/* =====================================================================
   CHECADOR - hoja de estilo propia.

   A proposito NO se arrastran Bootstrap, Font Awesome ni SB Admin: son
   16 MB que tardan en bajar y esto se abre desde el icono del celular,
   muchas veces con mala señal. Todo lo que hace falta cabe aqui.

   El color es AZUL, para distinguirlo de un vistazo: el sistema escolar
   es rojo y el punto de venta gris oscuro.
   ===================================================================== */

:root {
    --azul:        #1e88e5;
    --azul-fuerte: #1565c0;
    --azul-suave:  #e8f1fb;
    --verde:       #2e9e5b;
    --verde-suave: #e7f6ec;
    --rojo:        #c0392b;
    --rojo-suave:  #fdecec;
    --ambar:       #b45309;
    --ambar-suave: #fff6e6;
    --texto:       #1c2430;
    --texto-2:     #5b6675;
    --texto-3:     #8b96a8;
    --linea:       #e3e8ef;
    --fondo:       #eef2f7;
    --blanco:      #ffffff;
    --radio:       12px;
    --sombra:      0 1px 3px rgba(20, 30, 50, .10);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    margin: 0;
    font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--fondo);
    color: var(--texto);
}

/* ---------- armazon ---------- */
.chk-barra {
    background: var(--azul-fuerte);
    color: #fff;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 30;
}
.chk-barra h1 { margin: 0; font-size: 17px; font-weight: 600; flex: 1; }
.chk-barra .chk-quien { font-size: 13px; opacity: .85; }

.chk-menu {
    background: var(--blanco);
    border-bottom: 1px solid var(--linea);
    padding: 0 18px;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    position: sticky;
    top: 49px;
    z-index: 29;
}
.chk-menu a {
    padding: 13px 14px;
    font-size: 14.5px;
    color: var(--texto-2);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}
.chk-menu a:hover { color: var(--texto); }
.chk-menu a.activo { color: var(--azul-fuerte); border-bottom-color: var(--azul); font-weight: 600; }

.chk-cuerpo { max-width: 1040px; margin: 0 auto; padding: 20px 18px 60px; }

/* ---------- tarjetas ---------- */
.chk-tarj {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 18px 20px;
    margin-bottom: 16px;
    box-shadow: var(--sombra);
}
.chk-tarj > h2 {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--texto-3);
}
.chk-tarj > h2 + .chk-ayuda { margin-top: 0; }
.chk-ayuda { font-size: 13px; color: var(--texto-3); margin: 0 0 14px; }

/* ---------- formularios ---------- */
.chk-campo { margin-bottom: 14px; }
.chk-campo > label {
    display: block;
    font-size: 13px;
    color: var(--texto-2);
    margin-bottom: 5px;
}
input[type=text], input[type=date], input[type=time], input[type=number],
input[type=search], select, textarea {
    width: 100%;
    padding: 9px 11px;
    font: inherit;
    font-size: 15px;
    color: var(--texto);
    background: var(--blanco);
    border: 1px solid #cdd5e0;
    border-radius: 8px;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(30, 136, 229, .15);
}
input[disabled], select[disabled] { background: #f4f6f9; color: var(--texto-3); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--azul); }
input[type=range] { width: 100%; accent-color: var(--azul); }

.chk-rejilla { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ---------- botones ---------- */
.chk-btn {
    display: inline-block;
    border: 1px solid #cdd5e0;
    background: var(--blanco);
    color: var(--texto);
    border-radius: 9px;
    padding: 9px 16px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.chk-btn:hover { background: #f7f9fc; }
.chk-btn:active { transform: scale(.985); }
.chk-btn[disabled] { opacity: .5; cursor: default; }
.chk-btn-azul  { background: var(--azul); border-color: var(--azul); color: #fff; }
.chk-btn-azul:hover { background: var(--azul-fuerte); }
.chk-btn-rojo  { color: var(--rojo); border-color: #e3c4c4; }
.chk-btn-rojo:hover { background: var(--rojo-suave); }
.chk-btn-chico { padding: 6px 12px; font-size: 13px; }
.chk-btn-ancho { display: block; width: 100%; padding: 16px; font-size: 17px; }

/* ---------- tablas ---------- */
.chk-tabla { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.chk-tabla th {
    text-align: left;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--texto-3);
    padding: 0 8px 7px 0;
}
.chk-tabla td { padding: 9px 8px 9px 0; border-top: 1px solid var(--linea); vertical-align: middle; }
.chk-tabla tr:first-child td { border-top: 0; }
.chk-tabla td:last-child, .chk-tabla th:last-child { padding-right: 0; }
.chk-tabla .chk-num { text-align: right; color: var(--texto-2); }

/* ---------- etiquetas y avisos ---------- */
.chk-eti {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}
.chk-eti-verde { background: var(--verde-suave); color: #1d6b3f; }
.chk-eti-rojo  { background: var(--rojo-suave);  color: #8c2a20; }
.chk-eti-ambar { background: var(--ambar-suave); color: var(--ambar); }
.chk-eti-azul  { background: var(--azul-suave);  color: var(--azul-fuerte); }
.chk-eti-gris  { background: #eef1f5; color: var(--texto-2); }

.chk-aviso { border-radius: 10px; padding: 12px 14px; font-size: 14.5px; margin: 12px 0; }
.chk-aviso b { display: block; margin-bottom: 3px; }
.chk-aviso-ok   { background: var(--verde-suave); color: #14532d; border: 1px solid #bfe5cc; }
.chk-aviso-mal  { background: var(--rojo-suave);  color: #7f1d1d; border: 1px solid #f2c4c4; }
.chk-aviso-info { background: var(--azul-suave);  color: #14355e; border: 1px solid #c3dbf5; }
.chk-aviso-ojo  { background: var(--ambar-suave); color: #7a4a06; border: 1px solid #f0d9ab; }

/* ---------- pastilla de persona ---------- */
.chk-inicial {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--azul-suave); color: var(--azul-fuerte);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 700; flex: none;
}
.chk-persona { display: flex; align-items: center; gap: 11px; }
.chk-persona .chk-nom { font-size: 14.5px; }
.chk-persona .chk-sub { font-size: 12.5px; color: var(--texto-3); }

.chk-vacio { text-align: center; color: var(--texto-3); font-size: 14.5px; padding: 26px 0; }

/* ---------- pie de tarjeta ---------- */
.chk-pie {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea);
}
.chk-pie .chk-dato { font-size: 13px; color: var(--texto-2); }

/* ---------- celular ---------- */
@media (max-width: 640px) {
    .chk-cuerpo { padding: 14px 12px 50px; }
    .chk-tarj   { padding: 15px 16px; border-radius: 10px; }
    .chk-barra  { padding: 11px 14px; }
    .chk-menu   { padding: 0 10px; top: 47px; }

    /* Las tablas anchas se vuelven fichas, como en el sistema escolar:
       en un telefono una tabla de seis columnas no se puede leer. */
    .chk-fichas thead { display: none; }
    .chk-fichas tr {
        display: block;
        border: 1px solid var(--linea);
        border-radius: 10px;
        padding: 10px 12px;
        margin-bottom: 10px;
    }
    .chk-fichas td {
        display: flex; justify-content: space-between; gap: 12px;
        border: 0; padding: 4px 0;
    }
    .chk-fichas td::before {
        content: attr(data-et);
        font-size: 12.5px;
        color: var(--texto-3);
        flex: none;
    }
    .chk-fichas td:empty { display: none; }
}