/* ============================================================
   UBICACIÓN: /laboratorio/assets/css/estilo.css
   FUNCIÓN:   Identidad visual del Laboratorio Digital.
              Se carga DESPUÉS de Bootstrap para pisar sus valores.
   ============================================================ */

/* ---------- 1. Paleta y tipografía ---------- */
:root {
    --papel:        #F1F2ED;   /* fondo general, papel de cuaderno */
    --papel-alto:   #FFFFFF;   /* tarjetas */
    --tinta:        #1A2621;   /* texto principal */
    --tinta-suave:  #5E6B64;   /* texto secundario */
    --linea:        #D9DCD2;   /* bordes y separadores */
    --senal:        #17605A;   /* color de marca, acciones */
    --senal-clara:  #E3EDEA;   /* fondos de estado activo */
    --ambar:        #C8791A;   /* datos, horas, atención */
    --alerta:       #A63A2B;   /* errores y bloqueos */

    --radio:        6px;
    --sombra:       0 1px 2px rgba(26, 38, 33, .06),
                    0 8px 24px rgba(26, 38, 33, .05);

    --fuente-texto:  'IBM Plex Sans', system-ui, sans-serif;
    --fuente-titulo: 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif;
    --fuente-dato:   'IBM Plex Mono', ui-monospace, monospace;
}

/* ---------- 2. Base ---------- */
body {
    background-color: var(--papel);
    color: var(--tinta);
    font-family: var(--fuente-texto);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .titulo {
    font-family: var(--fuente-titulo);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--tinta);
}

a { color: var(--senal); text-decoration: none; }
a:hover { color: var(--tinta); }

/* Foco visible siempre: se navega mucho con teclado al cargar la diaria */
:focus-visible {
    outline: 2px solid var(--senal);
    outline-offset: 2px;
}

/* ---------- 3. Barra superior ---------- */
.barra {
    background: var(--papel-alto);
    border-bottom: 1px solid var(--linea);
}

.barra .marca {
    font-family: var(--fuente-titulo);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinta);
}

.barra .marca span { color: var(--senal); }

.barra .nav-link {
    color: var(--tinta-suave);
    font-size: .9rem;
    font-weight: 500;
    padding: .4rem .8rem;
    border-radius: var(--radio);
}

.barra .nav-link:hover { color: var(--tinta); background: var(--papel); }

.barra .nav-link.activo {
    color: var(--senal);
    background: var(--senal-clara);
}

/* Regla milimetrada bajo la barra: el guiño de instrumento de laboratorio */
.regla {
    height: 6px;
    background-image: repeating-linear-gradient(
        to right,
        var(--linea) 0 1px,
        transparent 1px 12px
    );
    border-bottom: 1px solid var(--linea);
}

/* ---------- 4. Avatares ---------- */
.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--fuente-dato);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .02em;
    flex-shrink: 0;
}

.avatar-sm { width: 26px; height: 26px; font-size: .62rem; }

/* ---------- 5. Tarjetas ---------- */
.tarjeta {
    background: var(--papel-alto);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.tarjeta-cuerpo { padding: 1.25rem; }

.rotulo {
    font-family: var(--fuente-dato);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

/* ---------- 6. Datos numéricos ---------- */
.dato {
    font-family: var(--fuente-dato);
    font-variant-numeric: tabular-nums;
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1;
    color: var(--tinta);
}

.dato .unidad {
    font-size: .8rem;
    color: var(--tinta-suave);
    margin-left: .15rem;
}

.dato-ambar { color: var(--ambar); }

/* ---------- 7. Botones ---------- */
.btn { border-radius: var(--radio); font-weight: 500; font-size: .9rem; }

.btn-senal {
    background: var(--senal);
    border: 1px solid var(--senal);
    color: #fff;
}
.btn-senal:hover { background: #114b46; border-color: #114b46; color: #fff; }

.btn-linea {
    background: transparent;
    border: 1px solid var(--linea);
    color: var(--tinta);
}
.btn-linea:hover { background: var(--papel); color: var(--tinta); }

/* ---------- 8. Formularios ---------- */
.form-control, .form-select {
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    font-size: .95rem;
    padding: .55rem .75rem;
    background: var(--papel-alto);
    color: var(--tinta);
}

.form-control:focus, .form-select:focus {
    border-color: var(--senal);
    box-shadow: 0 0 0 3px var(--senal-clara);
}

.form-label {
    font-size: .82rem;
    font-weight: 500;
    color: var(--tinta-suave);
    margin-bottom: .3rem;
}

/* ---------- 9. Avisos ---------- */
.aviso {
    border-radius: var(--radio);
    padding: .7rem 1rem;
    font-size: .9rem;
    border: 1px solid;
}
.aviso-exito { background: var(--senal-clara); border-color: #BCD6D1; color: #114b46; }
.aviso-error { background: #F7E6E3; border-color: #E5C4BE; color: var(--alerta); }
.aviso-aviso { background: #FBF0DF; border-color: #EBD8B8; color: #7A4A0B; }

/* ---------- 10. Pantalla de acceso ---------- */
.acceso {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.acceso-caja { width: 100%; max-width: 380px; }

.acceso-marca {
    font-family: var(--fuente-titulo);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: .2rem;
}
.acceso-marca span { color: var(--senal); }

.acceso-bajada {
    text-align: center;
    font-family: var(--fuente-dato);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    margin-bottom: 1.75rem;
}

/* ---------- 11. Estados de proyecto ---------- */
.chip {
    display: inline-block;
    font-family: var(--fuente-dato);
    font-size: .66rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .18rem .5rem;
    border-radius: 3px;
    border: 1px solid;
}
.chip-idea     { color: #3A4E7A; border-color: #C6CFE2; background: #EDF1F8; }
.chip-en_curso { color: #114b46; border-color: #BCD6D1; background: var(--senal-clara); }
.chip-pausado  { color: #7A4A0B; border-color: #EBD8B8; background: #FBF0DF; }
.chip-cerrado  { color: var(--tinta-suave); border-color: var(--linea); background: var(--papel); }

/* ---------- 12. Móvil ---------- */
@media (max-width: 576px) {
    .dato { font-size: 1.5rem; }
    .tarjeta-cuerpo { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ============================================================
   13. Barras de avance  (agregado en Fase 2)
   ============================================================ */
.barra-avance {
    height: 8px;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: 999px;
    overflow: hidden;
}

.barra-avance > span {
    display: block;
    height: 100%;
    background: var(--senal);
    border-radius: 999px;
}

.barra-fina { height: 5px; }
.barra-fina > span { background: var(--ambar); }

/* ---------- 14. Fila de integrante con casilla ---------- */
.fila-integrante {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .5rem;
    border: 1px solid transparent;
    border-radius: var(--radio);
    cursor: pointer;
    font-size: .9rem;
}

.fila-integrante:hover { background: var(--papel); }

.fila-integrante:has(input:checked) {
    background: var(--senal-clara);
    border-color: #BCD6D1;
}

.fila-integrante input { accent-color: var(--senal); }

/* ---------- 15. Tablas ---------- */
.tabla-lab { font-size: .9rem; margin: 0; }

.tabla-lab thead th {
    font-family: var(--fuente-dato);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    background: var(--papel);
    border-bottom: 1px solid var(--linea);
    padding: .7rem 1rem;
    white-space: nowrap;
}

.tabla-lab tbody td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--linea);
    vertical-align: middle;
}

.tabla-lab tbody tr:last-child td { border-bottom: 0; }
.tabla-lab tbody tr:hover { background: var(--papel); }

/* ---------- 16. Tarjeta clickeable ---------- */
a.tarjeta { transition: border-color .12s ease, transform .12s ease; }
a.tarjeta:hover { border-color: var(--senal); transform: translateY(-2px); }