/* =====================================================================
   Panel de administracion de encuestas PEI - IMLI 2026
   ===================================================================== */

* { box-sizing: border-box; }

:root {
    --azul: #1f4e78;
    --azul-claro: #2c6ca8;
    --fondo: #eef2f7;
    --borde: #dbe1e8;
    --texto: #16202e;
    --suave: #5b6b7f;
    --verde: #1e8e5a;
    --verde-claro: #5bb85b;
    --ambar: #f0ad4e;
    --rojo: #d9534f;
    --neutro: #9aa5b1;
    --radio: 10px;
    --sombra: 0 1px 3px rgba(15, 23, 42, .08);
}

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

a { color: var(--azul-claro); }

/* ------------------------------- Login ------------------------------ */
.pantalla-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #1f4e78 0%, #0f2d47 100%);
    padding: 20px;
}

.caja-login {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 14px;
    padding: 34px 30px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
}

.caja-login .marca {
    text-align: center;
    margin-bottom: 22px;
}

.caja-login .marca .sello {
    width: 58px;
    height: 58px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--azul);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .05em;
}

.caja-login h1 { font-size: 1.15rem; margin: 0 0 4px; }
.caja-login .sub { margin: 0; color: var(--suave); font-size: .88rem; }

.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 5px; color: var(--suave); }

.campo input {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    font: inherit;
    /* 16px exactos: por debajo de eso Safari en iPhone hace zoom al enfocar. */
    font-size: 16px;
}

.campo input:focus {
    outline: none;
    border-color: var(--azul-claro);
    box-shadow: 0 0 0 3px rgba(44, 108, 168, .15);
}

.boton {
    display: inline-block;
    background: var(--azul);
    color: #fff;
    border: 0;
    border-radius: var(--radio);
    padding: 11px 20px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.boton:hover { background: var(--azul-claro); }
.boton-ancho { width: 100%; }
.boton-claro { background: #fff; color: var(--azul); border: 1px solid var(--borde); }
.boton-claro:hover { background: var(--fondo); color: var(--azul); }
.boton-verde { background: var(--verde); }
.boton-verde:hover { background: #24a76b; }

.mensaje-error {
    background: #fdecea;
    border: 1px solid #f5c2c0;
    color: #922b25;
    border-radius: var(--radio);
    padding: 10px 13px;
    font-size: .88rem;
    margin-bottom: 14px;
}

.mensaje-ok {
    background: #e8f6ee;
    border: 1px solid #b9e0c9;
    color: #1a6c43;
    border-radius: var(--radio);
    padding: 10px 13px;
    font-size: .88rem;
    margin-bottom: 14px;
}

/* --------------------------- Barra superior ------------------------- */
.barra {
    background: var(--azul);
    color: #fff;
    padding: 0 20px;
    box-shadow: var(--sombra);
    position: sticky;
    top: 0;
    z-index: 20;
}

.barra-interna {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 58px;
    flex-wrap: wrap;
}

.barra .logo { font-weight: 700; letter-spacing: .04em; }
.barra .logo small { display: block; font-weight: 400; font-size: .72rem; opacity: .8; letter-spacing: 0; }
.barra nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; align-items: center; }

.barra nav a {
    color: #fff;
    text-decoration: none;
    padding: 7px 13px;
    border-radius: 8px;
    font-size: .9rem;
    opacity: .9;
}

.barra nav a:hover, .barra nav a.activo { background: rgba(255, 255, 255, .16); opacity: 1; }
.barra .usuario { font-size: .85rem; opacity: .85; }

/* ------------------------------ Contenido --------------------------- */
.envoltura { max-width: 1240px; margin: 0 auto; padding: 24px 20px 60px; }

.encabezado-pagina {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.encabezado-pagina h1 { margin: 0; font-size: 1.35rem; }
.encabezado-pagina p { margin: 4px 0 0; color: var(--suave); font-size: .9rem; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }

.panel {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 18px 20px;
    margin-bottom: 20px;
}

.panel h2 {
    margin: 0 0 4px;
    font-size: 1rem;
    color: var(--azul);
}

.panel .ayuda { margin: 0 0 14px; color: var(--suave); font-size: .84rem; }

/* ------------------------------ Tarjetas ---------------------------- */
/* min() evita que la columna minima sea mas ancha que la pantalla del celular
   y produzca desplazamiento horizontal. */
.rejilla { display: grid; gap: 16px; }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

.tarjeta-encuesta {
    background: #fff;
    border: 1px solid var(--borde);
    border-top: 4px solid var(--color-tarjeta, var(--azul));
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tarjeta-encuesta h3 { margin: 0; font-size: 1rem; }
.tarjeta-encuesta .ruta { font-size: .76rem; color: var(--suave); word-break: break-all; }
.tarjeta-encuesta .cifra { font-size: 2rem; font-weight: 700; line-height: 1; }
.tarjeta-encuesta .cifra small { font-size: .8rem; font-weight: 400; color: var(--suave); }
.tarjeta-encuesta .pie-tarjeta { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; flex-wrap: wrap; }
.tarjeta-encuesta .pie-tarjeta .boton { padding: 8px 14px; font-size: .85rem; }

.kpi {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 16px 18px;
}

.kpi .rotulo { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); }
.kpi .valor { font-size: 1.9rem; font-weight: 700; line-height: 1.15; margin-top: 4px; }
.kpi .detalle { font-size: .82rem; color: var(--suave); }

.insignia {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: .76rem;
    font-weight: 600;
    color: #fff;
}

/* ------------------------------ Graficas ---------------------------- */
.marco-grafica { position: relative; width: 100%; }
.marco-grafica canvas { max-width: 100%; }

/* ------------------------------- Tablas ----------------------------- */
.tabla-envoltura { overflow-x: auto; }

table.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

table.tabla th, table.tabla td {
    border: 1px solid var(--borde);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}

table.tabla thead th {
    background: var(--azul);
    color: #fff;
    font-weight: 600;
    position: sticky;
    top: 0;
    white-space: nowrap;
}

table.tabla tbody tr:nth-child(even) { background: #f8fafc; }
table.tabla td.num, table.tabla th.num { text-align: center; white-space: nowrap; }
table.tabla .fila-ambito td {
    background: #e7eef6;
    font-weight: 700;
    color: var(--azul);
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .04em;
}

/* Barra de proporcion dentro de la tabla */
.barra-mini {
    display: flex;
    height: 14px;
    border-radius: 4px;
    overflow: hidden;
    min-width: 110px;
    background: var(--fondo);
}

.barra-mini span { display: block; height: 100%; }

/* --------------------------- Texto libre ---------------------------- */
.comentario {
    border: 1px solid var(--borde);
    border-left: 4px solid var(--azul-claro);
    border-radius: var(--radio);
    padding: 12px 14px;
    margin-bottom: 10px;
    background: #fff;
}

.comentario .meta { font-size: .76rem; color: var(--suave); margin-bottom: 6px; }
.comentario p { margin: 0 0 8px; white-space: pre-wrap; }
.comentario .etiqueta { font-weight: 600; font-size: .8rem; color: var(--azul); display: block; }

/* ------------------------------ Filtros ----------------------------- */
.filtros {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filtros .campo { margin: 0; }
.filtros input[type="date"] {
    padding: 8px 10px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    font: inherit;
    font-size: 16px;
}

.vacio {
    text-align: center;
    padding: 40px 20px;
    color: var(--suave);
}

.pie-admin {
    text-align: center;
    font-size: .8rem;
    color: var(--suave);
    padding: 10px 0 30px;
}

@media (max-width: 720px) {
    .barra { position: static; padding: 0 12px; }
    .barra-interna { min-height: auto; padding: 10px 0; }
    /* El menu pasa a una sola linea deslizable para no comerse media pantalla. */
    .barra nav {
        margin-left: 0;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .barra nav::-webkit-scrollbar { display: none; }
    .barra nav a { white-space: nowrap; flex: none; }

    .envoltura { padding: 16px 12px 40px; }
    .encabezado-pagina h1 { font-size: 1.15rem; }
    .panel { padding: 16px 14px; }
    .acciones .boton, .filtros .boton { flex: 1 1 auto; }
    .kpi .valor { font-size: 1.6rem; }
    table.tabla { font-size: .82rem; }
    table.tabla th, table.tabla td { padding: 7px 8px; }
    /* Aviso de que la tabla se desliza en lugar de cortarse. */
    .tabla-envoltura { -webkit-overflow-scrolling: touch; }
}

@media print {
    .barra, .acciones, .filtros, .pie-admin { display: none !important; }
    body { background: #fff; }
    .panel { break-inside: avoid; box-shadow: none; }
}