@charset "UTF-8";
/* =====================================================================
   Transcriptor de Patología — hoja de estilo única
   Paleta derivada de la tinción H&E:
     hematoxilina (índigo) = institucional
     eosina (rosa vino)    = reservada al estado "dictando"
   ===================================================================== */

:root {
    /* Tinta y papel */
    --tinta:          #14181F;
    --tinta-2:        #1D232C;
    --tinta-3:        #2C3540;
    --texto:          #1B2128;
    --texto-medio:    #4E5763;
    --texto-suave:    #78828F;
    --papel:          #F7F8F9;
    --superficie:     #FFFFFF;
    --linea:          #E1E5EA;
    --linea-fuerte:   #C3CAD3;

    /* Hematoxilina — acento institucional */
    --hema:           #3A3F7C;
    --hema-fuerte:    #2B2F62;
    --hema-tenue:     #EDEEF6;
    --hema-borde:     #C6C9E2;

    /* Eosina — solo estado activo de dictado */
    --eos:            #A8384F;
    --eos-tenue:      #FBEEF1;
    --eos-borde:      #E7BFC8;

    /* Semánticos */
    --verde:          #2A6349;
    --verde-tenue:    #E8F1EC;
    --ambar:          #7A5B12;
    --ambar-tenue:    #F8F1DE;

    /* Tipografía */
    --sans:  "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --serif: "IBM Plex Serif", ui-serif, Georgia, "Times New Roman", serif;
    --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --rail: 236px;
    --radio: 3px;
    --sombra: 0 1px 2px rgba(20, 24, 31, .05), 0 1px 3px rgba(20, 24, 31, .04);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--texto);
    background: var(--papel);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--hema); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--hema);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Etiqueta de folio — tratada como etiqueta de laminilla
   --------------------------------------------------------------- */
.folio {
    font-family: var(--mono);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .04em;
    white-space: nowrap;
}
.folio-chip {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .04em;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--superficie);
}
.folio-chip .tipo {
    padding: .16rem .42rem;
    background: var(--hema);
    color: #fff;
    font-weight: 600;
}
.folio-chip .num { padding: .16rem .5rem; color: var(--texto); }

/* ---------------------------------------------------------------
   Rail lateral
   --------------------------------------------------------------- */
.disposicion { display: flex; min-height: 100vh; }

.rail {
    width: var(--rail);
    flex: 0 0 var(--rail);
    background: var(--tinta);
    color: #AEB6C2;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.rail-marca {
    padding: 1.35rem 1.25rem 1.1rem;
    border-bottom: 1px solid var(--tinta-3);
}
.rail-marca .titulo {
    font-family: var(--serif);
    font-size: 1.02rem;
    font-weight: 600;
    color: #F2F4F7;
    letter-spacing: -.01em;
    line-height: 1.25;
}
.rail-marca .sub {
    font-family: var(--mono);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #6E7887;
    margin-top: .3rem;
}

.rail-nav { padding: .9rem .6rem; flex: 1; overflow-y: auto; }
.rail-grupo {
    font-family: var(--mono);
    font-size: .63rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #5D6675;
    padding: .9rem .65rem .35rem;
}
.rail-grupo:first-child { padding-top: .1rem; }

.rail a.enlace {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .48rem .65rem;
    border-radius: var(--radio);
    color: #B8C0CC;
    font-size: .875rem;
    text-decoration: none;
    border-left: 2px solid transparent;
}
.rail a.enlace:hover { background: var(--tinta-2); color: #EDF0F4; text-decoration: none; }
.rail a.enlace.activo {
    background: var(--tinta-2);
    color: #fff;
    border-left-color: #8C93D6;
    font-weight: 500;
}
.rail a.enlace svg { width: 15px; height: 15px; flex: 0 0 15px; opacity: .8; }

.rail-pie {
    border-top: 1px solid var(--tinta-3);
    padding: .85rem 1.25rem 1.1rem;
    font-size: .8rem;
}
.rail-pie .quien { color: #E7EAEF; font-weight: 500; }
.rail-pie .rol {
    font-family: var(--mono);
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #6E7887;
    margin-top: .12rem;
}
.rail-pie a { color: #8892A1; font-size: .78rem; display: inline-block; margin-top: .55rem; }
.rail-pie a:hover { color: #D6DBE2; }

/* ---------------------------------------------------------------
   Área principal
   --------------------------------------------------------------- */
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.barra {
    background: var(--superficie);
    border-bottom: 1px solid var(--linea);
    padding: 1.1rem 2rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.barra .ruta {
    font-family: var(--mono);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--texto-suave);
    margin-bottom: .3rem;
}
.barra h1 {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.42rem;
    font-weight: 600;
    letter-spacing: -.015em;
}
.barra .acciones { display: flex; gap: .5rem; align-items: center; }

.contenido { padding: 1.75rem 2rem 3rem; max-width: 1180px; width: 100%; }

/* ---------------------------------------------------------------
   Tarjetas y bloques
   --------------------------------------------------------------- */
.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}
.tarjeta > .cabeza {
    padding: .85rem 1.15rem;
    border-bottom: 1px solid var(--linea);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.tarjeta > .cabeza h2 {
    margin: 0;
    font-size: .78rem;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--texto-medio);
    font-weight: 500;
}
.tarjeta > .cuerpo { padding: 1.15rem; }

.rejilla { display: grid; gap: 1rem; }
.rejilla-4 { grid-template-columns: repeat(4, 1fr); }
.rejilla-2 { grid-template-columns: repeat(2, 1fr); }

/* Indicadores del panel */
.cifra { padding: 1.05rem 1.15rem; }
.cifra .etiqueta {
    font-family: var(--mono);
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--texto-suave);
}
.cifra .valor {
    font-family: var(--serif);
    font-size: 1.95rem;
    font-weight: 600;
    line-height: 1.15;
    margin-top: .3rem;
    letter-spacing: -.02em;
}
.cifra.acento .valor { color: var(--hema); }

/* ---------------------------------------------------------------
   Controles
   --------------------------------------------------------------- */
.boton {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--sans);
    font-size: .85rem;
    font-weight: 500;
    line-height: 1;
    padding: .55rem .95rem;
    border-radius: var(--radio);
    border: 1px solid var(--linea-fuerte);
    background: var(--superficie);
    color: var(--texto);
    cursor: pointer;
    text-decoration: none;
    transition: background .12s ease, border-color .12s ease;
}
.boton:hover { background: #F1F3F6; text-decoration: none; }
.boton svg { width: 15px; height: 15px; }

.boton.primario {
    background: var(--hema);
    border-color: var(--hema);
    color: #fff;
}
.boton.primario:hover { background: var(--hema-fuerte); border-color: var(--hema-fuerte); }

.boton.grabando {
    background: var(--eos);
    border-color: var(--eos);
    color: #fff;
}
.boton.grabando:hover { background: #8F2C40; }

.boton.sutil { border-color: transparent; background: transparent; color: var(--texto-medio); }
.boton.sutil:hover { background: #EDF0F3; }
.boton:disabled { opacity: .5; cursor: not-allowed; }

label.campo {
    display: block;
    font-family: var(--mono);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--texto-medio);
    margin-bottom: .35rem;
}

input[type=text], input[type=email], input[type=password], input[type=date], select, textarea {
    width: 100%;
    font-family: var(--sans);
    font-size: .92rem;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio);
    padding: .55rem .7rem;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--hema);
    box-shadow: 0 0 0 3px var(--hema-tenue);
}

.pareja { display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-end; }
.pareja > * { flex: 1 1 160px; }
.pareja > .angosto { flex: 0 0 auto; }

/* ---------------------------------------------------------------
   Distintivos de estado
   --------------------------------------------------------------- */
.marca {
    display: inline-block;
    font-family: var(--mono);
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: .2rem .48rem;
    border-radius: var(--radio);
    border: 1px solid;
}
.marca.borrador   { color: var(--ambar); background: var(--ambar-tenue); border-color: #E4D5A8; }
.marca.finalizado { color: var(--verde); background: var(--verde-tenue); border-color: #BCD8C8; }

/* ---------------------------------------------------------------
   Tablas
   --------------------------------------------------------------- */
table.listado { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.listado th {
    text-align: left;
    font-family: var(--mono);
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 500;
    color: var(--texto-suave);
    padding: .6rem 1.15rem;
    border-bottom: 1px solid var(--linea);
    background: #FBFCFD;
}
table.listado td {
    padding: .7rem 1.15rem;
    border-bottom: 1px solid var(--linea);
    vertical-align: middle;
}
table.listado tr:last-child td { border-bottom: 0; }
table.listado tbody tr:hover { background: #FAFBFC; }
table.listado .fecha { font-family: var(--mono); font-size: .8rem; color: var(--texto-medio); }
table.listado .resumen {
    color: var(--texto-medio);
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vacio { padding: 3rem 1.15rem; text-align: center; color: var(--texto-suave); }
.vacio p { margin: 0 0 1rem; }

/* ---------------------------------------------------------------
   Avisos
   --------------------------------------------------------------- */
.aviso {
    padding: .7rem 1rem;
    border-radius: var(--radio);
    border: 1px solid;
    font-size: .88rem;
    margin-bottom: 1.25rem;
}
.aviso.ok    { background: var(--verde-tenue); border-color: #BCD8C8; color: #1F4E39; }
.aviso.error { background: var(--eos-tenue);   border-color: var(--eos-borde); color: #7E2637; }
.aviso.info  { background: var(--hema-tenue);  border-color: var(--hema-borde); color: var(--hema-fuerte); }

/* =====================================================================
   ELEMENTO FIRMA — el editor como documento, no como formulario
   ===================================================================== */

.documento {
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding-bottom: .5rem;
}

.documento-encabezado {
    padding: 1.35rem 1.5rem 1.15rem;
    border-bottom: 2px solid var(--tinta);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.documento-encabezado .quien {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 600;
}
.documento-encabezado .meta {
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--texto-suave);
    letter-spacing: .05em;
    text-align: right;
    line-height: 1.7;
}

/* Una sección = etiqueta en el margen + campo de dictado */
.seccion {
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: 0 1.5rem;
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--linea);
    border-left: 3px solid transparent;
    transition: background .15s ease, border-left-color .15s ease;
}
.seccion:last-of-type { border-bottom: 0; }

.seccion .margen { padding-top: .1rem; }
.seccion .margen .nombre {
    font-family: var(--mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--texto-medio);
    font-weight: 500;
    display: block;
}
.seccion .margen .conteo {
    font-family: var(--mono);
    font-size: .64rem;
    color: var(--texto-suave);
    margin-top: .3rem;
    display: block;
}

.seccion textarea {
    font-family: var(--serif);
    font-size: .97rem;
    line-height: 1.68;
    border: 1px solid transparent;
    background: transparent;
    padding: .1rem .4rem;
    resize: vertical;
    min-height: 4.5rem;
    width: 100%;
}
.seccion textarea:hover { border-color: var(--linea); }
.seccion textarea:focus {
    border-color: var(--linea-fuerte);
    background: #FCFCFD;
    box-shadow: none;
}

/* Estado dictando: única aparición de la eosina */
.seccion.dictando {
    background: var(--eos-tenue);
    border-left-color: var(--eos);
}
.seccion.dictando .margen .nombre { color: var(--eos); }
.seccion.dictando textarea {
    background: var(--superficie);
    border-color: var(--eos-borde);
}

.seccion .controles { margin-top: .55rem; display: flex; gap: .4rem; align-items: center; }

.pulso {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--eos);
    display: inline-block;
    animation: latido 1.35s ease-in-out infinite;
}
@keyframes latido {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.75); }
}

/* Barra de dictado en vivo */
.barra-dictado {
    position: fixed;
    left: var(--rail);
    right: 0;
    bottom: 0;
    background: var(--tinta);
    color: #E4E8EE;
    padding: .7rem 2rem;
    display: none;
    align-items: center;
    gap: 1.1rem;
    z-index: 40;
    box-shadow: 0 -2px 14px rgba(20, 24, 31, .18);
}
.barra-dictado.visible { display: flex; }
.barra-dictado .estado {
    font-family: var(--mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: #F0B9C4;
    display: flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}
.barra-dictado .provisional {
    flex: 1;
    font-family: var(--serif);
    font-style: italic;
    color: #98A2B0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.barra-dictado .cronometro {
    font-family: var(--mono);
    font-size: .8rem;
    color: #AEB6C2;
}

.ayuda-voz {
    font-family: var(--mono);
    font-size: .7rem;
    line-height: 1.9;
    color: var(--texto-medio);
}
.ayuda-voz b { color: var(--eos); font-weight: 500; }

/* Barra de guardado, pegada abajo del documento */
.acciones-documento {
    position: sticky;
    bottom: 0;
    background: var(--superficie);
    border-top: 1px solid var(--linea);
    padding: .85rem 1.5rem;
    display: flex;
    gap: .6rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    border-radius: 0 0 var(--radio) var(--radio);
}
.acciones-documento .nota {
    font-family: var(--mono);
    font-size: .68rem;
    color: var(--texto-suave);
    letter-spacing: .04em;
}

/* =====================================================================
   Vista de lectura del estudio
   ===================================================================== */
.lectura .seccion-lectura {
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: 0 1.5rem;
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--linea);
}
.lectura .seccion-lectura:last-child { border-bottom: 0; }
.lectura .seccion-lectura .nombre {
    font-family: var(--mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--texto-medio);
}
.lectura .texto {
    font-family: var(--serif);
    font-size: .97rem;
    line-height: 1.68;
    white-space: normal;
}
.lectura .texto.sin-dato { color: var(--texto-suave); font-style: italic; }

/* =====================================================================
   Acceso
   ===================================================================== */
.acceso {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.acceso-relato {
    background: var(--tinta);
    color: #C8CFD9;
    padding: 3.5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.acceso-relato .titulo {
    font-family: var(--serif);
    font-size: 2rem;
    line-height: 1.2;
    color: #F4F6F8;
    font-weight: 600;
    letter-spacing: -.02em;
    max-width: 15ch;
}
.acceso-relato .nota {
    font-size: .86rem;
    color: #7C8695;
    max-width: 42ch;
    line-height: 1.7;
}
.acceso-relato .sello {
    font-family: var(--mono);
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #5A6371;
}

/* Franja H&E: dos bandas de color, la referencia directa a la tinción */
.franja { display: flex; height: 4px; width: 120px; margin-bottom: 2rem; }
.franja span:first-child { flex: 2; background: var(--hema); }
.franja span:last-child  { flex: 1; background: var(--eos); }

.acceso-forma {
    background: var(--superficie);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
}
.acceso-forma .caja { width: 100%; max-width: 330px; }
.acceso-forma h1 {
    font-family: var(--serif);
    font-size: 1.32rem;
    margin: 0 0 .35rem;
    font-weight: 600;
}
.acceso-forma .sub { color: var(--texto-suave); font-size: .875rem; margin: 0 0 1.75rem; }
.acceso-forma .grupo { margin-bottom: 1rem; }
.acceso-forma .boton { width: 100%; justify-content: center; padding: .65rem; margin-top: .5rem; }
.acceso-forma .legal {
    margin-top: 1.75rem;
    font-size: .74rem;
    color: var(--texto-suave);
    line-height: 1.6;
    border-top: 1px solid var(--linea);
    padding-top: 1rem;
}

/* =====================================================================
   Responsivo
   ===================================================================== */
@media (max-width: 940px) {
    .rejilla-4 { grid-template-columns: repeat(2, 1fr); }
    .acceso { grid-template-columns: 1fr; }
    .acceso-relato { padding: 2.25rem 1.5rem; }
    .acceso-relato .titulo { font-size: 1.5rem; }
}

@media (max-width: 760px) {
    .disposicion { flex-direction: column; }
    .rail {
        width: 100%;
        flex: none;
        position: static;
        height: auto;
    }
    .rail-nav { display: flex; flex-wrap: wrap; gap: .2rem; padding: .6rem; }
    .rail-grupo { display: none; }
    .rail a.enlace { border-left: 0; border-bottom: 2px solid transparent; }
    .rail a.enlace.activo { border-left: 0; border-bottom-color: #8C93D6; }
    .barra, .contenido { padding-left: 1.1rem; padding-right: 1.1rem; }
    .barra-dictado { left: 0; padding: .7rem 1.1rem; }
    .seccion, .lectura .seccion-lectura { grid-template-columns: 1fr; gap: .5rem; }
    .rejilla-4, .rejilla-2 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media print {
    .rail, .barra .acciones, .acciones-documento, .barra-dictado { display: none !important; }
    body { background: #fff; }
    .tarjeta, .documento { border: 0; box-shadow: none; }
}