/* ================= BASE ================= */
body{
margin:0;
font-family:'Poppins',sans-serif;
background:#f4f7fb;
color:#1e2a38;
}

/* ================= LOGIN ================= */
.login-wrapper{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:linear-gradient(135deg,#003366,#001a33);
}

.login-card{
background:#fff;
padding:55px;
border-radius:18px;
width:400px;
box-shadow:0 30px 70px rgba(0,0,0,0.25);
text-align:center;
animation:fadeIn .5s ease;
}

.login-card h2{
color:#003366;
margin-bottom:30px;
font-weight:600;
}

.login-card input{
width:100%;
padding:15px;
margin-bottom:15px;
border-radius:10px;
border:1px solid #d9e1ec;
font-size:14px;
transition:0.3s;
}

.login-card input:focus{
outline:none;
border-color:#003366;
box-shadow:0 0 0 3px rgba(0,51,102,0.1);
}

.login-card button{
width:100%;
padding:15px;
background:#003366;
color:#fff;
border:none;
border-radius:10px;
font-weight:600;
cursor:pointer;
transition:0.3s;
}

.login-card button:hover{
background:#0055a5;
transform:translateY(-2px);
}

.error{
color:#b00020;
margin-top:12px;
font-size:13px;
}

/* ================= LAYOUT ================= */
.admin-layout{
display:flex;
min-height:100vh;
}

/* ================= SIDEBAR ================= */
.sidebar{
width:260px;
background:#003366;
color:#fff;
padding:35px 25px;
display:flex;
flex-direction:column;
box-shadow:5px 0 25px rgba(0,0,0,0.08);
}

.sidebar h3{
margin-bottom:40px;
font-size:18px;
letter-spacing:1px;
}

.sidebar a{
color:#fff;
text-decoration:none;
padding:14px 15px;
border-radius:10px;
margin-bottom:8px;
transition:0.3s;
font-size:14px;
}

.sidebar a:hover{
background:rgba(255,255,255,0.15);
padding-left:20px;
}

.sidebar .logout{
margin-top:auto;
background:#001a33;
text-align:center;
}

/* ================= MAIN ================= */
.main-content{
flex:1;
padding:50px;
animation:fadeIn .4s ease;
}

h2{
color:#003366;
margin-bottom:30px;
font-weight:600;
}

/* ================= CARDS ================= */
.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
margin-bottom:50px;
}

.card{
background:#fff;
padding:35px;
border-radius:18px;
box-shadow:0 20px 45px rgba(0,0,0,0.06);
transition:0.3s;
position:relative;
overflow:hidden;
}

.card:hover{
transform:translateY(-5px);
}

.card:before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:6px;
background:linear-gradient(90deg,#003366,#0055a5);
}

.card.total:before{background:#003366;}
.card.pending:before{background:#ffc107;}
.card.approved:before{background:#28a745;}

.card strong{
font-size:32px;
color:#003366;
display:block;
margin-top:10px;
}

/* ================= BUSCADOR ================= */
.buscador-pro{
width:350px;
padding:14px 18px;
border-radius:50px;
border:1px solid #d9e1ec;
margin-bottom:25px;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
transition:0.3s;
}

.buscador-pro:focus{
outline:none;
border-color:#003366;
box-shadow:0 0 0 4px rgba(0,51,102,0.1);
}

/* ================= TABLA ================= */
.tabla{
width:100%;
border-collapse:collapse;
background:#fff;
border-radius:16px;
overflow:hidden;
box-shadow:0 20px 45px rgba(0,0,0,0.05);
}

.tabla th{
background:#003366;
color:#fff;
padding:16px;
text-align:left;
font-weight:500;
}

.tabla td{
padding:16px;
border-bottom:1px solid #eef2f7;
font-size:14px;
}

.tabla tr:hover{
background:#f3f7fc;
transition:0.2s;
}

/* ================= ESTADOS ================= */
.estado{
padding:7px 14px;
border-radius:20px;
font-size:12px;
font-weight:600;
display:inline-block;
}

.estado.pendiente{
background:#fff4cc;
color:#8a6d3b;
}

.estado.aprobado{
background:#d4edda;
color:#155724;
}

.estado.rechazado{
background:#f8d7da;
color:#721c24;
}

/* ================= ACCIONES ================= */
.tabla a{
text-decoration:none;
font-size:16px;
margin-right:10px;
transition:0.3s;
}

.tabla a:hover{
transform:scale(1.2);
}

/* ================= FORMULARIO OFERTA ================= */
.form-oferta{
background:#fff;
padding:40px;
border-radius:18px;
box-shadow:0 20px 45px rgba(0,0,0,0.06);
max-width:750px;
}

.grid-2{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

.form-oferta input,
.form-oferta select,
.form-oferta textarea{
width:100%;
padding:15px;
margin-bottom:18px;
border-radius:10px;
border:1px solid #d9e1ec;
font-size:14px;
transition:0.3s;
}

.form-oferta input:focus,
.form-oferta select:focus,
.form-oferta textarea:focus{
outline:none;
border-color:#003366;
box-shadow:0 0 0 3px rgba(0,51,102,0.1);
}

.form-oferta button{
background:#003366;
color:#fff;
padding:15px;
border:none;
border-radius:10px;
cursor:pointer;
font-weight:600;
transition:0.3s;
width:100%;
}

.form-oferta button:hover{
background:#0055a5;
transform:translateY(-2px);
}

/* ================= TOAST ================= */
.toast{
position:fixed;
top:25px;
right:25px;
background:#003366;
color:#fff;
padding:16px 22px;
border-radius:12px;
box-shadow:0 15px 40px rgba(0,0,0,0.2);
animation:slideIn 0.4s ease;
z-index:9999;
font-size:14px;
}

/* ================= ANIMACIONES ================= */
@keyframes fadeIn{
from{opacity:0; transform:translateY(10px);}
to{opacity:1; transform:translateY(0);}
}

@keyframes slideIn{
from{opacity:0; transform:translateX(50px);}
to{opacity:1; transform:translateX(0);}
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){
.admin-layout{flex-direction:column;}
.sidebar{width:100%; flex-direction:row; overflow:auto;}
.sidebar a{margin-right:10px;}
.main-content{padding:25px;}
.grid-2{grid-template-columns:1fr;}
.buscador-pro{width:100%;}
}
/* Cargo columna */
.tabla td:nth-child(2){
font-weight:600;
color:#003366;
}

/* Separador ofertas */
hr{
border:none;
height:1px;
background:#e5edf5;
margin:40px 0;
}