/* ============================================================
   Portal de Ofertas Laborales — Estilos
   ============================================================ */

:root{
    --azul-900: #1e2a4a;
    --azul-700: #2f4373;
    --azul-600: #3b5bdb;
    --azul-500: #5271ff;
    --azul-100: #e8ecfb;

    --teal-500: #12b3a6;
    --teal-600: #0d9488;

    --verde: #1f9d55;
    --verde-bg: #e5f7ec;

    --rojo: #d64545;
    --rojo-bg: #fbe9e9;

    --amarillo-bg: #fff6e0;
    --amarillo-texto: #8a6100;

    --gris-50: #f6f7fb;
    --gris-100: #eef0f6;
    --gris-200: #e2e5ee;
    --gris-400: #9aa2b1;
    --gris-600: #5b6272;
    --gris-800: #2c3140;

    --radio: 12px;
    --sombra: 0 2px 6px rgba(30, 42, 74, 0.06), 0 8px 24px rgba(30, 42, 74, 0.06);
    --transicion: all .15s ease;
}

*{
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 2.5rem 1.5rem 4rem;
    background: linear-gradient(180deg, var(--azul-100) 0%, var(--gris-50) 320px);
    color: var(--gris-800);
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
}

/* ---------- Encabezado ---------- */

h1{
    max-width: 960px;
    margin: 0 auto 2rem;
    text-align: center;
    color: var(--azul-900);
    font-size: 2.1rem;
    letter-spacing: .3px;
}

h1::after{
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin: .6rem auto 0;
    background: linear-gradient(90deg, var(--azul-600), var(--teal-500));
    border-radius: 4px;
}

h2{
    color: var(--azul-900);
    font-size: 1.25rem;
    margin: 0 0 1.1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--gris-200);
}

h3{
    color: var(--azul-700);
    font-size: 1.05rem;
    margin: 0 0 .8rem;
}

/* ---------- Secciones (tarjetas) ---------- */

section{
    max-width: 960px;
    margin: 0 auto 1.75rem;
    padding: 1.75rem 2rem;
    background: #ffffff;
    border: 1px solid var(--gris-200);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

section section{
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: var(--gris-50);
    box-shadow: none;
}

/* ---------- Formularios ---------- */

form{
    display: flex;
    flex-direction: column;
    gap: .9rem;
    max-width: 420px;
}

form br{
    display: none;
}

label{
    font-size: .88rem;
    font-weight: 600;
    color: var(--gris-600);
    margin-bottom: -.4rem;
}

input[type="text"],
input[type="number"],
input[type="password"],
select{
    width: 100%;
    padding: .65rem .8rem;
    font-size: .95rem;
    font-family: inherit;
    color: var(--gris-800);
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: 8px;
    transition: var(--transicion);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
select:focus{
    outline: none;
    border-color: var(--azul-500);
    box-shadow: 0 0 0 3px var(--azul-100);
}

input[type="text"]::placeholder,
input[type="number"]::placeholder{
    color: var(--gris-400);
}

select{
    cursor: pointer;
}

/* Checkbox y radio */

input[type="checkbox"],
input[type="radio"]{
    width: 17px;
    height: 17px;
    accent-color: var(--azul-600);
    cursor: pointer;
    vertical-align: middle;
    margin-right: .35rem;
}

section > label[for="radArea"],
section > label[for="radTodas"]{
    font-weight: 500;
    color: var(--gris-800);
    margin-right: 1rem;
    margin-bottom: 0;
}

#filtroNivel{
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px dashed var(--gris-200);
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
#filtroNivel select{
    width: auto;
}

/* ---------- Botones ---------- */

input[type="button"]{
    align-self: flex-start;
    padding: .6rem 1.3rem;
    font-size: .9rem;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--azul-600);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transicion);
    margin: .15rem .5rem .15rem 0;
}

input[type="button"]:hover{
    background: var(--azul-700);
    transform: translateY(-1px);
}
input[type="button"]:active{
    transform: translateY(0);
}

/* Botones de cierre de sesión: tono neutro */
#btnLogout, #btnLogoutAdmin, #btnAtrasPos, #btnAtrasEstadisticas{
    background: var(--gris-600);
}
#btnLogout:hover, #btnLogoutAdmin:hover, #btnAtrasPos:hover, #btnAtrasEstadisticas:hover{
    background: var(--gris-800);
}

/* Acciones por color: aceptar/postularse en verde, cerrar/rechazar en rojo */
.btnPostularme, .btnProcesar{
    background: var(--teal-600);
}
.btnPostularme:hover, .btnProcesar:hover{
    background: var(--teal-500);
}

.btnCerrar{
    background: var(--rojo);
}
.btnCerrar:hover{
    background: #b93636;
}

.btnEditarOferta{
    background: var(--azul-500);
}

#btnCrearOferta, #btnGuardarCambiosOferta, #btnRegistrarUsuario, #btnLogin{
    align-self: flex-start;
    margin-top: .3rem;
}

/* ---------- Usuario logueado ---------- */

#usuarioLogueado{
    display: inline-block;
    font-weight: 700;
    color: var(--azul-700);
    background: var(--azul-100);
    padding: .3rem .85rem;
    border-radius: 999px;
    margin-bottom: 1rem;
    font-size: .9rem;
}
#usuarioLogueado:not(:empty)::before{
    content: "👤 ";
}

/* ---------- Tablas ---------- */

table{
    width: 100%;
    border-collapse: collapse;
    margin-top: .5rem;
    font-size: .9rem;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--gris-200);
}

thead tr{
    background: var(--azul-900);
}

th{
    color: #fff;
    text-align: left;
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: .75rem .9rem;
}

td{
    padding: .7rem .9rem;
    border-top: 1px solid var(--gris-100);
    vertical-align: middle;
}

tbody tr:nth-child(even){
    background: var(--gris-50);
}

tbody tr:hover{
    background: var(--azul-100);
}

tbody:empty::after{
    content: "";
}

/* Botones e inputs dentro de celdas, más compactos */
td input[type="button"]{
    padding: .4rem .85rem;
    font-size: .82rem;
    margin: 0;
}
td select{
    width: auto;
    padding: .4rem .6rem;
}

/* ---------- Mensajes / avisos ---------- */

#pErrorOferta, #pErrorPostulaciones, #pOfertaNoEncontrada{
    color: var(--rojo);
    background: var(--rojo-bg);
    padding: .6rem .9rem;
    border-radius: 8px;
    font-size: .88rem;
}
#pErrorOferta:empty, #pErrorPostulaciones:empty, #pOfertaNoEncontrada:empty{
    display: none;
}

#pMotivoInactivaVacantes, #pMotivoInactivaLimitePos, #pMotivoPostulacion{
    color: var(--amarillo-texto);
    background: var(--amarillo-bg);
    padding: .6rem .9rem;
    border-radius: 8px;
    font-size: .88rem;
    margin-top: .8rem;
}
#pMotivoInactivaVacantes:empty, #pMotivoInactivaLimitePos:empty, #pMotivoPostulacion:empty{
    display: none;
}

#ofertasDestacadas:not(:empty){
    display: inline-block;
    font-weight: 700;
    color: var(--teal-600);
    background: var(--verde-bg);
    padding: .3rem .8rem;
    border-radius: 999px;
    margin-bottom: .8rem;
}

#estadisticasPorOferta, #porcentajeVacantes, #postulanteMasActivas{
    background: var(--gris-50);
    border: 1px solid var(--gris-200);
    padding: .7rem .9rem;
    border-radius: 8px;
    font-size: .9rem;
    margin-top: .6rem;
}
#estadisticasPorOferta:empty, #porcentajeVacantes:empty, #postulanteMasActivas:empty{
    display: none;
}

hr{
    border: none;
    border-top: 1px solid var(--gris-200);
    margin: 1.3rem 0;
}

/* ---------- Buscador de estadísticas ---------- */

#buscarOferta{
    max-width: 260px;
    display: inline-block;
    margin-right: .5rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 640px){
    body{ padding: 1.2rem .8rem 3rem; }
    section{ padding: 1.2rem 1.1rem; }
    h1{ font-size: 1.6rem; }
    table{ display: block; overflow-x: auto; white-space: nowrap; }
    form{ max-width: 100%; }
}