/* ==========================================================================
   TrueLift Escritorio — estilos propios.
   Parte del sistema de diseño del Coach (../coach/styles.css): mismos
   tokens, botones, tarjetas, alertas y modal. Aquí solo lo que es nuevo.
   ========================================================================== */

/* ---------- Fuentes y tokens de la app (rediseño, fase 9) ----------
   Las tres familias de la app móvil (lib/tl_design.dart): Saira Condensed
   para títulos y cifras grandes, Instrument Sans para el texto e IBM Plex
   Mono para toda cifra comparable. Autoalojadas en ../fonts (SIL OFL), como
   las de la web, para no pedir nada a terceros. Archivo se queda solo para
   el logotipo. Los colores van en @media screen: la hoja del Coach los
   redefine para imprimir y el informe en papel no debe cambiar. */
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/sairacondensed-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/sairacondensed-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/sairacondensed-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/sairacondensed-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/sairacondensed-800-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Saira Condensed";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/sairacondensed-800-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/instrumentsans-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/instrumentsans-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibmplexmono-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibmplexmono-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibmplexmono-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibmplexmono-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/ibmplexmono-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/ibmplexmono-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root{
  --display:"Saira Condensed", "Archivo", system-ui, sans-serif;
  --sans:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ancho:1280px;
}
/* El lima de la app (kLima), no el de la web. */
@media screen{
  :root{
    --lima:#A3E020; --lima-hover:#B8EE4C;
    --lima-10:rgba(163,224,32,.10); --lima-14:rgba(163,224,32,.14);
    --lima-18:rgba(163,224,32,.18); --lima-30:rgba(163,224,32,.32);
  }
}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:absolute;left:12px;top:-60px;z-index:200;padding:8px 12px;background:var(--lima);color:#0A0C0B;border-radius:8px;font:700 12px var(--mono)}
.saltar:focus{top:12px}

#espacioActual{font:400 12px var(--sans);overflow-wrap:anywhere}
#espacioActual:empty{display:none}
#tabs button[aria-disabled="true"]{color:var(--txt4)}
#avisoGlobal{max-width:var(--ancho);margin:0 auto;padding:16px clamp(16px,3vw,44px) 0}
#avisoGlobal:empty{display:none}
#avisoGlobal .alerta{margin-top:12px}

/* Modal más ancho para la vista previa de importación. */
#modalCaja.ancho{width:min(820px,100%)}
#modalCaja h3{margin:16px 0 8px;font:800 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--txt3)}
#modalCaja .opcion{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin:6px 0;border:1px solid var(--borde-campo);border-radius:var(--radio-sm);cursor:pointer}
#modalCaja .opcion:hover{border-color:rgba(255,255,255,.22)}
#modalCaja .opcion input{margin-top:3px}
#modalCaja .opcion small{display:block;color:var(--txt3);margin-top:2px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}

/* Cifras en rejilla (vista previa y tarjeta de datos). */
.cifras{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:8px 0}
.cifra{padding:10px 12px;background:var(--sup2);border:1px solid var(--borde);border-radius:var(--radio-sm)}
.cifra b{display:block;font:800 18px var(--mono);color:var(--txt)}
.cifra span{font-size:12px;color:var(--txt3)}
.cifra.aviso b{color:var(--ambar)}

.lista-plana{margin:6px 0;padding-left:18px}
.lista-plana li{margin:2px 0}
.lista-plana code,.mono-peq{font:500 12px var(--mono);color:var(--txt2);word-break:break-all}
details.detalle{margin:6px 0}
details.detalle summary{cursor:pointer;color:var(--txt2)}

/* Progreso de procesamiento. */
.progreso{height:8px;background:var(--sup3);border-radius:6px;overflow:hidden;margin:12px 0 6px}
.progreso i{display:block;height:100%;width:0;background:var(--lima);transition:width .15s}

/* Estado vacío y primeros pasos. */
.bienvenida{max-width:720px;margin:24px auto;text-align:left}
.bienvenida h1{font:900 30px var(--sans);letter-spacing:-.02em;color:var(--txt);margin:0 0 8px}
.pasos{counter-reset:paso;list-style:none;padding:0;margin:16px 0}
.pasos li{counter-increment:paso;position:relative;padding:8px 0 8px 38px}
.pasos li::before{content:counter(paso);position:absolute;left:0;top:6px;width:26px;height:26px;border-radius:50%;background:var(--lima-14);color:var(--lima);font:800 13px var(--mono);display:flex;align-items:center;justify-content:center}
.fila-botones{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}

/* Galería de fotos. */
.galeria-dia{margin:14px 0}
.card .galeria-dia h3{margin:0 0 8px;font:700 12px var(--mono);letter-spacing:.06em;text-transform:none;color:var(--txt3)}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.foto{margin:0;background:var(--sup2);border:1px solid var(--borde);border-radius:var(--radio-sm);overflow:hidden}
.foto button{display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left}
.foto .marco{aspect-ratio:3/4;background:var(--sup3);display:flex;align-items:center;justify-content:center}
.foto img{width:100%;height:100%;object-fit:contain;display:block}
.foto .hueco{padding:10px;text-align:center;font-size:12px;color:var(--txt3)}
.foto figcaption{padding:6px 8px;font-size:12px;display:flex;flex-direction:column;gap:3px}
.foto figcaption .chip{align-self:flex-start;font-size:9px}
.foto-grande{max-width:100%;max-height:70vh;display:block;margin:0 auto;border-radius:10px}

/* Comparación: cada imagen ocupa el mismo marco y conserva su proporción.
   La cortina recorta la capa, no cambia su ancho ni escala por eje. */
.foto-selectores{display:grid;grid-template-columns:130px minmax(0,1fr) minmax(0,1fr);gap:12px}
.foto-selectores label,.foto-filtro label,.encuadre label{display:block;font-size:12px;color:var(--txt2)}
.foto-selectores select{display:block;width:100%;margin-top:5px;min-width:0}
.comparador-etiquetas{display:flex;justify-content:space-between;gap:10px;margin:14px 0 6px;font:600 12px var(--mono)}
.comparador-lienzo{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;isolation:isolate}
.comparador-marco{position:relative;aspect-ratio:3/4;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--sup3);border-radius:8px;min-width:0}
.comparador-marco img{width:100%;height:100%;object-fit:contain;display:block;transform-origin:center;flex-shrink:0}
.comparador-lienzo.encuadre-app .comparador-marco{background:#000}
.comparador-lienzo.encuadre-app .comparador-marco img{object-fit:cover}
.foto-encuadre-app{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--txt2)}
.foto-encuadre-app input{accent-color:var(--lima);width:16px;height:16px}
.comparador-marco .hueco{padding:20px;font-size:13px;color:var(--txt3);text-align:center}
.comparador-lienzo:not(.modo-lado){display:block;width:min(100%,540px);aspect-ratio:3/4;margin:0 auto}
.comparador-lienzo:not(.modo-lado) .comparador-marco{position:absolute;inset:0;width:100%;height:100%}
.modo-cortina .foto-b{clip-path:inset(0 calc(100% - var(--corte)) 0 0);border-radius:0}
.modo-cortina::after{content:'';position:absolute;top:0;bottom:0;left:var(--corte);width:2px;background:var(--lima);pointer-events:none;z-index:2}
.modo-superposicion .foto-b{opacity:var(--opacidad)}
.comparador-control{max-width:540px;margin:12px auto;font-size:13px}
.comparador-control input,.encuadre input{display:block;width:100%;accent-color:var(--lima);margin:6px 0 12px}
.encuadres,.comparador-contextos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.encuadre{min-width:0;border:1px solid var(--borde);border-radius:8px;padding:12px}
.encuadre legend{font-size:12px;color:var(--txt2)}

.encuadre output{float:right;font-family:var(--mono)}
.foto-contexto{font-size:12.5px;line-height:1.6;overflow-wrap:anywhere}
.foto-filtro{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--txt3)}
@media(max-width:640px){
  .foto-selectores{grid-template-columns:minmax(0,1fr)}
  .encuadres,.comparador-contextos{grid-template-columns:minmax(0,1fr)}
  .comparador-lienzo{gap:6px}
  .comparador-etiquetas{font-size:10px}
}

/* Tablas de historial. */
.tabla-scroll{position:relative;overflow-x:auto}
td .chip{white-space:normal}
/* Tabla que no cabe ni saltando de línea (marcarDesplazables): cada fila es
   una ficha con su primera celda de título y el resto de datos en rejilla,
   con la etiqueta de la columna encima. Solo en pantalla: el papel tiene su
   propio ancho y ahí la tabla vuelve a ser tabla. */
@media screen{
  .tabla-scroll.apilada > table,.tabla-scroll.apilada > table > tbody{display:block}
  .tabla-scroll.apilada > table > thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tabla-scroll.apilada > table > tbody > tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,96px),1fr));gap:10px 14px;padding:12px 2px}
  .tabla-scroll.apilada > table > tbody > tr + tr{border-top:1px solid var(--sep)}
  .tabla-scroll.apilada > table > tbody > tr > *{display:block;min-width:0;padding:0;border:0;overflow-wrap:break-word}
  .tabla-scroll.apilada > table > tbody > tr > th[scope="row"]{grid-column:1/-1;font-size:14px;font-weight:600}
  .tabla-scroll.apilada td[data-etiqueta]::before{content:attr(data-etiqueta);content:attr(data-etiqueta) / "";display:block;margin-bottom:3px;font:600 10px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--txt4)}
  .tabla-scroll.apilada td:empty{display:none}
  .tabla-scroll.apilada .linea-svg{max-width:100%;height:auto}
}

@media (max-width:640px){
  .bienvenida h1{font-size:24px}
  .galeria{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
}

/* Separación entre tarjetas apiladas y foco del título del modal (recibe el
   foco por programa para que el lector de pantalla lo anuncie; el contorno
   lima ahí solo distrae). */
#contenido > .card,#contenido > .grid{margin-bottom:14px}
#contenido > .grid > .card{margin-bottom:0}
#modalCaja h2:focus{outline:none}

/* ---------- Secciones personales (fase 2) ---------- */
.cabecera-seccion{margin:4px 0 12px}
.cabecera-seccion h1{font:900 26px var(--sans);letter-spacing:-.02em;color:var(--txt);margin:0 0 4px}
.cabecera-seccion p{margin:0;font-size:13.5px}
.subnav{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 12px;padding:4px;background:var(--sup1);border:1px solid var(--borde);border-radius:var(--radio-sm);width:max-content;max-width:100%}
.subnav button{border:0;background:none;color:var(--txt3);font:700 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;border-radius:6px;cursor:pointer}
.subnav button:hover{color:var(--txt2)}
.subnav button.activa{background:var(--lima-14);color:var(--lima)}
button.enlace{border:0;background:none;padding:0;color:var(--txt);font:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:var(--borde-campo);text-underline-offset:3px}
button.enlace:hover{color:var(--lima);text-decoration-color:var(--lima)}
.btn-enlace{font-size:12px}
.sub-h,.card .sub-h{margin:14px 0 4px;font:700 12px var(--mono);letter-spacing:.06em;color:var(--txt3);text-transform:uppercase}
.valoracion{font-size:15px;line-height:1.5}
.valoracion .chip{margin-right:6px;vertical-align:1px}
details.ayuda summary{font-size:12.5px;color:var(--txt3)}
.nota{font-size:12px;color:var(--txt2);white-space:pre-wrap}
table tbody th[scope="row"]{padding:8px 10px;font:500 13px var(--sans);letter-spacing:0;text-transform:none;color:var(--txt);border-bottom:1px solid var(--sep);vertical-align:top;min-width:7em}
table tbody tr:last-child th[scope="row"]{border-bottom:none}
th button.enlace{font:inherit}
td .chip,th .chip{margin:1px 2px 1px 0}
.rutina-dias{grid-template-columns:repeat(auto-fit,minmax(min(100%,640px),1fr));margin-bottom:14px}
.rutina-dias > .card{margin:0}
:focus-visible{outline:2px solid var(--lima);outline-offset:2px}
.subnav button:focus-visible,#tabs button:focus-visible{outline-offset:-2px}
@media (max-width:640px){
  .cabecera-seccion h1{font-size:22px}
  .subnav{width:auto}
}
img[data-mini]:not([src]){visibility:hidden}

/* ---------- Mi resumen y ficha por ejercicio (fase 3) ---------- */
.resumen-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:14px;margin-bottom:14px}
.resumen-grid > .card{margin:0}
.conclusiones{display:grid;gap:10px}
.conclusion{padding:12px 14px;border:1px solid var(--borde);border-left:4px solid var(--txt4);border-radius:var(--radio-sm);background:var(--sup2)}
.card .conclusion h3{margin:0 0 4px;font:800 15px var(--sans);letter-spacing:0;text-transform:none;color:var(--txt)}
.conclusion p{margin:4px 0}
.conclusion .periodo{font-size:12.5px}
.conclusion.tono-verde{border-left-color:var(--lima)}
.conclusion.tono-ambar{border-left-color:var(--ambar)}
.conclusion.tono-rojo{border-left-color:var(--rojo)}
.conclusion.tono-azul{border-left-color:var(--azul)}
.serie{white-space:nowrap;font:500 12.5px var(--mono)}
.sep-serie{color:var(--txt4)}
.tabla-series td:nth-child(3){white-space:normal;min-width:220px}
.comparar-sel{display:flex;gap:16px;flex-wrap:wrap}
.comparar-sel .mod-fila{margin:4px 0}
.comparar-sel select{max-width:100%}
.graf-rango{display:flex;gap:8px 16px;flex-wrap:wrap;align-items:flex-end;margin-bottom:10px}
.graf-rango .fila-botones{margin-top:0}
.graf-rango .fila-botones .btn{padding:6px 10px;font-size:11px}
.graf-fechas{display:flex;gap:12px;flex-wrap:wrap}
.graf-fechas .mod-fila{margin:0}
@media (max-width:640px){
  .tabla-series td:nth-child(3){min-width:160px}
}
.resumen-grid td .chip{white-space:normal;text-align:center}

/* Comparación manual de periodos (fase 4). */
.periodos-sel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:12px 0}
.periodos-sel fieldset{min-width:0;border:1px solid var(--borde);border-radius:var(--radio-sm);padding:12px}
.periodos-sel legend{font-weight:700;color:var(--txt)}
.periodos-sel input{min-width:0;max-width:100%;color-scheme:dark}
.aviso-comparacion{border-left:3px solid var(--ambar);padding-left:10px;color:var(--txt2)}
@media (max-width:640px){.periodos-sel{grid-template-columns:1fr}}

b.sube{color:var(--lima)}
b.baja{color:var(--naranja)}

/* ---------- Informes (fase 7) ---------- */
.inf-tipo,.inf-fotos{min-width:0;border:1px solid var(--borde);border-radius:var(--radio-sm);padding:12px;margin:10px 0}
.inf-tipo legend,.inf-fotos legend{font-weight:700;color:var(--txt)}
.inf-radio{display:flex;gap:8px;align-items:center;margin:6px 0;font-size:13.5px;color:var(--txt)}
.inf-fechas{display:flex;gap:16px;flex-wrap:wrap}
.inf-tipo input[type="date"]{color-scheme:dark;max-width:100%}
.inf-tipo select{max-width:100%}
.inf-tipo :disabled{opacity:.5}
.inf-elegir{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.inf-elegir li{position:relative;background:var(--sup2);border:1px solid var(--borde);border-radius:var(--radio-sm);padding:6px}
.inf-elegir input{position:absolute;top:10px;left:10px;width:18px;height:18px;accent-color:var(--lima);z-index:1}
.inf-elegir label{display:block;font-size:12px;color:var(--txt2);cursor:pointer}
.inf-elegir .marco{display:flex;aspect-ratio:3/4;background:var(--sup3);border-radius:6px;overflow:hidden;margin-bottom:4px}
.inf-elegir img{width:100%;height:100%;object-fit:contain}
.inf-elegir input:checked + label .marco{outline:2px solid var(--lima);outline-offset:-2px}
.inf-elegir input:disabled + label{opacity:.5;cursor:not-allowed}
.informe-doc{margin-top:18px;padding-top:6px;border-top:1px dashed var(--borde-campo)}
.informe-doc > .card{margin-bottom:14px}
.inf-cab{margin:8px 0 16px}
.inf-cab h2{margin:2px 0 4px;font:900 26px var(--sans);letter-spacing:-.02em;color:var(--txt)}
.inf-cab h2:focus{outline:none}
.inf-cab p{margin:2px 0}
.inf-marca{font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lima)}
.inf-meta{font-size:12.5px}
.inf-lista{margin:0;padding-left:18px}
.inf-lista li{margin:6px 0}
.inf-fecha{font:600 12.5px var(--mono);color:var(--txt2);margin-right:4px}
.inf-fotos-doc{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.inf-fotos-doc figure{margin:0}
.inf-fotos-doc .marco{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;background:var(--sup3);border-radius:8px;overflow:hidden}
.inf-fotos-doc img{width:100%;height:100%;object-fit:contain}
.inf-fotos-doc figcaption{font-size:12px;color:var(--txt2);margin-top:4px}
.inf-pie{font-size:12px;margin-top:4px}

@media print{
  /* En papel solo el documento: sin controles, sin bordes de pantalla y
     sin desplegables (las tablas del informe ya van abiertas). */
  .informe-doc{margin:0;padding:0;border:0}
  .informe-doc .card{break-inside:auto;padding:12px 14px}
  .informe-doc h3,.informe-doc h4{break-after:avoid}
  .informe-doc tr,.informe-doc .cifra,.inf-fotos-doc figure,.informe-doc .chart-caja{break-inside:avoid}
  .inf-marca{color:#5d7d10}
  .tabla-scroll{overflow:visible}
  .informe-doc button.enlace{text-decoration:none;color:inherit}
  .inf-fotos-doc{grid-template-columns:repeat(3,1fr)}
  .cifras{grid-template-columns:repeat(4,1fr)}
  .saltar,#vivo,#chartTip{display:none!important}
}
@media (max-width:640px){
  .inf-cab h2{font-size:22px}
  .inf-elegir{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
}
.inf-nota{font-size:12.5px}

/* ---------- Acabado (fase 7): jerarquía y contraste ---------- */
/* Los títulos de tarjeta son h2 (h1 de sección → h2 de tarjeta → h3), con
   el mismo aspecto que el h3 de las tarjetas del Coach. */
.card h2{margin:0 0 14px;font:700 16px/1.2 var(--display);letter-spacing:1.4px;text-transform:uppercase;color:var(--txt)}
/* En pantalla el gris más tenue y el rojo no llegaban a 4,5:1 sobre las
   superficies oscuras. Solo en el escritorio y solo en pantalla: el Coach y
   la hoja de impresión conservan sus tonos. */
@media screen{:root{--txt4:#838a86;--rojo:#e5645a}}
/* "Día rojo" es rojo de verdad en el escritorio. El Coach lo pinta naranja
   (var(--naranja)); aquí se sobrescribe solo para el estado rojo. */
:root{--rojo-vivo:#F04438;--rojo-vivo-14:rgba(240,68,56,.14)}
.chip.rojo{background:var(--rojo-vivo-14);border-color:rgba(240,68,56,.32);color:var(--rojo-vivo)}
.punto.rojo,.pista-seg.rojo,.barra i.rojo{background:var(--rojo-vivo)}
.alerta.rojo{border-left-color:var(--rojo-vivo);background:var(--rojo-vivo-14)}
.alerta.rojo .tag,.esc.rojo .on{color:var(--rojo-vivo)}

/* ==========================================================================
   Rediseño (fase 9): marco con barra lateral y lenguaje visual de la app.
   Títulos y botones en Saira Condensed, cuerpo en Instrument Sans, cifras
   en IBM Plex Mono. El lima marca acción o logro; nunca es fondo grande.
   ========================================================================== */
body{font:400 14px/1.45 var(--sans)}
#marco{display:flex;align-items:flex-start;min-height:100vh}
#principal{flex:1;min-width:0}
#contenido{max-width:var(--ancho);padding:32px clamp(16px,3vw,44px) 72px}

/* ---------- Barra lateral ---------- */
#lateral{
  position:sticky;top:0;flex:none;width:260px;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:22px;padding:24px 16px;
  border-right:1px solid var(--borde);background:var(--fondo);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;
}
#lateral #topbar{display:flex;flex-direction:column;align-items:stretch;gap:20px;padding:0;border:0;background:none}
#lateral .brand{padding:0 8px;margin:0;align-items:baseline}
.brand .wordmark{flex:none;white-space:nowrap;font-family:"Archivo",var(--sans);font-weight:900;font-size:22px}
#lateral .brand-coach{align-self:auto;font:500 10.5px var(--mono);letter-spacing:.18em}

.lat-datos{display:flex;flex-direction:column;gap:12px;padding:14px;background:var(--sup1);border:1px solid var(--borde);border-radius:var(--radio)}
.lat-datos-cab{display:flex;align-items:center;gap:10px}
.lat-avatar{flex:none;width:34px;height:34px;border-radius:50%;background:var(--sup2);border:1px solid var(--borde-campo);display:flex;align-items:center;justify-content:center}
.lat-avatar svg{width:18px;height:18px;fill:none;stroke:var(--lima);stroke-width:1.8;stroke-linecap:round}
.lat-datos-txt{min-width:0;display:flex;flex-direction:column}
.lat-datos-txt b{font-size:14px}
.lat-estado{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:12.5px;line-height:1.4;color:var(--txt2)}
.lat-estado:empty{display:none}
.lat-estado::before{content:"";flex:none;width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--txt4)}
.lat-estado.al-dia::before{background:var(--lima)}
.lat-estado.antigua::before{background:var(--ambar)}
.lat-datos .btn{width:100%;padding:0 12px;white-space:nowrap;font-size:14.5px}
.lat-importar{gap:8px;border-color:rgba(163,224,32,.45)!important;color:var(--lima)!important}
.lat-importar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lat-fotos{min-height:36px!important;font-size:14px!important}

#lateral #tabs{display:flex;flex-direction:column;gap:2px;padding:0;border:0;background:none;overflow:visible}
.tabs-grupo{padding:14px 12px 6px;font:600 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--txt4)}
.tabs-grupo:first-child{padding-top:0}
.tabs-sep{height:1px;margin:12px 0 10px;background:var(--sep)}
#tabs button{
  display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;
  border:0;border-radius:10px;background:none;color:var(--txt2);
  font:500 14.5px var(--sans);letter-spacing:0;text-transform:none;text-align:left;white-space:nowrap;
}
#tabs button:hover{background:var(--sup2);color:var(--txt)}
#tabs button.activa{background:var(--lima-14);color:var(--lima);font-weight:600}
.tab-ico{flex:none;width:20px;height:20px;fill:none;stroke:var(--txt3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#tabs button.activa .tab-ico{stroke:currentColor}
#tabs kbd{margin-left:auto;font:500 11px var(--mono);color:var(--txt4)}
#tabs button.activa kbd{color:var(--txt3)}

#lateral .privacy-notice{
  margin:auto 0 0;max-width:none;display:flex;gap:10px;align-items:flex-start;
  padding:12px;border:0;border-radius:10px;background:var(--sup1);
  font-size:12px;line-height:1.45;color:var(--txt3);
}
#lateral .privacy-notice svg{flex:none;width:16px;height:16px;margin-top:2px;fill:none;stroke:var(--lima);stroke-width:2;stroke-linecap:round}
#lateral .privacy-notice p{margin:0}
#lateral .privacy-notice strong{display:inline;margin:0 4px 0 0;font:600 12px var(--sans);letter-spacing:0;text-transform:none;color:var(--txt)}

@media (max-width:900px){
  #marco{display:block}
  #lateral{position:static;width:auto;height:auto;overflow:visible;gap:12px;padding:14px clamp(12px,3vw,24px);border-right:0;border-bottom:1px solid var(--borde)}
  #lateral #topbar{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px}
  .lat-datos{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 12px}
  .lat-datos-cab{flex:1 1 200px}
  .lat-estado{flex:1 1 220px}
  .lat-datos .btn{width:auto;flex:1 1 200px}
  #lateral #tabs{flex-direction:row;flex-wrap:wrap;gap:4px;padding-bottom:4px}
  .tabs-grupo,.tabs-sep,#tabs kbd{display:none}
  #tabs button{flex:none;min-height:40px;padding:0 14px;border-radius:999px}
  #lateral .privacy-notice{margin:0}
}
@media (max-width:640px){
  #tabs .tab-ico{display:none}
  .lat-avatar{display:none}
}
@media print{#marco{display:block}}

/* ---------- Encabezados, tarjetas y textos ---------- */
.cabecera-seccion{margin:0 0 20px}
.cabecera-seccion h1{margin:0 0 8px;font:700 46px/1 var(--display);letter-spacing:.5px;color:var(--txt)}
.cabecera-seccion p{font-size:15px;color:var(--txt2)}
.card{padding:20px 22px}
.card h3{font:600 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--txt2)}
.sub-h,.card .sub-h{margin:16px 0 6px;font:600 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--txt2)}
#contenido > .card,#contenido > .grid{margin-bottom:16px}
.grid{gap:16px}
.resumen-grid{gap:16px;margin-bottom:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr))}
.kv>span:first-child{font-size:13px}
details.ayuda summary,details.detalle summary{font-size:13px}
#modalCaja h2{font:700 24px/1.15 var(--display);letter-spacing:.5px}
#modalCaja h3{font:600 12px var(--sans);letter-spacing:.12em;color:var(--txt2)}
.bienvenida h1{font:700 46px/1 var(--display);letter-spacing:.5px}
#dropzone{font:700 22px var(--display);letter-spacing:.5px;text-transform:none}

/* ---------- Botones ---------- */
.btn{
  min-height:40px;padding:0 18px;gap:8px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);background:transparent;color:var(--txt);
  font:700 15px var(--display);letter-spacing:.5px;text-transform:none;
}
.btn:hover{border-color:rgba(255,255,255,.28);background:var(--sup2);color:var(--txt)}
.btn.pri{background:var(--lima);border-color:var(--lima);color:#0A0C0B;font-weight:700}
.btn.pri:hover{background:var(--lima-hover);border-color:var(--lima-hover)}
.btn.peligro{color:var(--rojo);border-color:rgba(212,72,59,.45);background:transparent}
.btn-enlace{font-size:15px}
.graf-rango .fila-botones .btn{min-height:34px;padding:0 12px;font-size:14px}
.btn-mini{font:600 12px var(--sans);letter-spacing:0;border-radius:8px}

/* ---------- Apartados (subnav) ---------- */
.subnav{gap:4px;padding:4px;margin:0 0 20px;border-radius:999px}
.subnav button{min-height:40px;padding:0 16px;border-radius:999px;font:600 15px var(--display);letter-spacing:.5px;text-transform:none;color:var(--txt2)}
.subnav button:hover{color:var(--txt)}
.subnav button.activa{font-weight:700}

/* ---------- Tablas, chips, cifras y avisos ---------- */
th{font:600 11px var(--sans);letter-spacing:.12em;color:var(--txt4)}
td{padding:9px 10px}
.chip{padding:3px 10px;font:600 12px var(--sans);letter-spacing:0}
.chip.verde{border-color:rgba(163,224,32,.28)}
.cifras{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.cifra{padding:14px 16px;border:0;border-radius:12px;background:var(--sup2)}
.cifra b{font:800 30px/1.05 var(--display);letter-spacing:0}
.cifra span{font-size:12.5px}
.alerta{border:1px solid var(--borde);border-radius:var(--radio-sm);align-items:flex-start}
.alerta.ambar{border-color:rgba(224,169,46,.32)}
.alerta.azul{border-color:rgba(111,168,220,.32)}
.alerta.rojo{border-color:rgba(240,68,56,.32)}
.alerta .tag{font:700 11px var(--sans);letter-spacing:.12em}
.conclusion{border:1px solid var(--borde);border-radius:var(--radio);background:var(--sup2)}
.conclusion.tono-verde{border-color:var(--lima-30)}
.conclusion.tono-ambar{border-color:rgba(224,169,46,.32)}
.conclusion.tono-rojo{border-color:rgba(240,68,56,.32)}
.conclusion.tono-azul{border-color:rgba(111,168,220,.32)}
.chart-caja{background:transparent;border:0;padding:4px 0}
@media screen{svg text{fill:#838a86}}
.leyenda{font:500 12px var(--sans);letter-spacing:0}

/* ---------- Mi resumen (fase 9) ---------- */
.resumen-contexto{margin:8px 0 0;font-size:14px;color:var(--txt3)}
.resumen-contexto b{font-weight:600;color:var(--txt2)}
.icono{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
b.sube{color:var(--lima)} b.baja{color:var(--naranja)}

/* Cifras clave */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:16px;margin-bottom:16px}
.card.kpi{display:flex;flex-direction:column;gap:10px;margin:0}
.card.kpi h2{margin:0;font-size:15px}
.kpi-verde{border-color:var(--lima-30)}
.kpi-ambar{border-color:rgba(224,169,46,.32)}
.kpi-rojo{border-color:rgba(240,135,45,.32)}
.kpi-cifra{margin:0;font:800 54px/.95 var(--display);color:var(--txt)}
.kpi-cifra.logro{color:var(--lima)}
.kpi-cifra span{font:700 24px var(--display);color:var(--txt3)}
.kpi-titular{display:flex;align-items:center;gap:10px;margin:0;font:700 22px/1.15 var(--sans);color:var(--txt)}
.kpi-titular .icono{width:26px;height:26px;stroke-width:2.2;color:var(--txt3)}
.kpi-titular .icono.verde{color:var(--lima)} .kpi-titular .icono.ambar{color:var(--ambar)} .kpi-titular .icono.rojo{color:var(--naranja)}
.kpi-txt{margin:0;font-size:13.5px;color:var(--txt2)}
.kpi-txt b{font-weight:600;color:var(--txt)}
.kpi-pie{display:flex;justify-content:space-between;gap:8px;margin:0;font:500 11px var(--mono);color:var(--txt3)}
.kpi-pie b{color:var(--txt);font-weight:600}
.kpi-cab-estado{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kpi-progreso{height:10px;margin-top:auto;border-radius:5px;background:rgba(255,255,255,.06);overflow:hidden}
.kpi-progreso i{display:block;height:100%;border-radius:5px;background:var(--lima)}
/* Tu nivel: colores de nivel de la app (kNivelColores): gris, verde, azul,
   morado y dorado. En claro, los de TLPaleta.clara. */
:root{--nivel-0:#8E8E8E;--nivel-1:#A3E020;--nivel-2:#6FA8DC;--nivel-3:#B07CDC;--nivel-4:#E8C547;--nivel-sin:#5F6660}
.nivel-nombre{margin:0;font:800 34px/1 var(--display);letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--nivel-sin)}
.nivel-tramos{display:flex;gap:3px}
.nivel-tramo{flex:1;display:block;height:8px;border-radius:4px;background:var(--vacio);overflow:hidden}
.nivel-tramo i{display:block;height:100%}
.nivel-grado{flex:none}
.kpi-nivel .kpi-pie{margin-top:auto}
.nivel-t0{color:var(--nivel-0)} .nivel-t1{color:var(--nivel-1)} .nivel-t2{color:var(--nivel-2)} .nivel-t3{color:var(--nivel-3)} .nivel-t4{color:var(--nivel-4)}
.nivel-c0{background:var(--nivel-0)} .nivel-c1{background:var(--nivel-1)} .nivel-c2{background:var(--nivel-2)} .nivel-c3{background:var(--nivel-3)} .nivel-c4{background:var(--nivel-4)}
.kpi-nivel.nivel-b0{border-color:color-mix(in srgb,var(--nivel-0) 35%,transparent)}
.kpi-nivel.nivel-b1{border-color:color-mix(in srgb,var(--nivel-1) 35%,transparent)}
.kpi-nivel.nivel-b2{border-color:color-mix(in srgb,var(--nivel-2) 35%,transparent)}
.kpi-nivel.nivel-b3{border-color:color-mix(in srgb,var(--nivel-3) 35%,transparent)}
.kpi-nivel.nivel-b4{border-color:color-mix(in srgb,var(--nivel-4) 35%,transparent)}
.kpi-linea{margin-top:auto}
.kpi-linea svg{width:100%;height:48px}
.kpi-acciones{margin-top:auto}
.kpi-acciones .btn{width:100%}
.mini-svg{display:block;width:100%;height:48px;margin-top:auto}
.mini-barra{fill:var(--vacio)}
.mini-barra.logro{fill:var(--lima)}
.mini-barra.descarga{opacity:.55}
.mini-cero{stroke:rgba(255,255,255,.22);stroke-dasharray:3 4}
.mini-trazo{fill:none;stroke:rgba(201,207,201,.45);stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mini-punto{stroke:var(--sup1);stroke-width:1.5}

/* Lo más relevante: tres tarjetas en fila */
.conclusiones{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.conclusion{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:var(--sup1)}
.card .conclusion h3{font:700 17px/1.3 var(--sans)}
.conclusion .fila-botones{margin-top:auto;padding-top:8px}

/* Línea de tiempo */
.linea-tiempo .lt-cabecera{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:flex-start;justify-content:space-between}
.lt-titulo{flex:1 1 340px;min-width:0}
.lt-titulo h2{display:inline;margin:0 10px 0 0;font-size:20px}
.lt-titulo .chip{vertical-align:3px}
.lt-titulo p{margin:8px 0 0;font-size:14px}
.lt-capas{display:flex;flex-wrap:wrap;gap:8px}
.lt-capa{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--borde-campo);background:var(--sup2);color:var(--txt);font:600 13.5px var(--sans)}
.lt-capa i{width:14px;height:14px;border-radius:4px;border:2px solid var(--vacio)}
.lt-capa[aria-pressed="true"] i{background:var(--lima);border-color:var(--lima)}
.lt-capa[aria-pressed="false"]{color:var(--txt3)}
.lt-desplazable{margin-top:18px}
.lt-lienzo{min-width:600px;display:flex;flex-direction:column;gap:4px}
.lt-fila{padding-top:10px}
.lt-fila + .lt-fila:not(.lt-fila-eje){border-top:1px solid var(--sep)}
.lt-fila-fases{padding-top:0}
.lt-fila-eje{padding-top:0;border-top:1px solid var(--borde)}
.lt-cab{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;padding:0 4px 4px}
.lt-nombre{font:600 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--txt2)}
.lt-nombre span{letter-spacing:0;text-transform:none;font-weight:400;color:var(--txt3)}
.lt-ley{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--txt3)}
.lt-ley span{display:inline-flex;align-items:center;gap:6px}
.lt-ley i{display:inline-block}
.lt-ley-punto{width:9px;height:9px;border-radius:50%}
.lt-ley-punto.peq{width:6px;height:6px}
.lt-ley-hueco{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--txt3)}
.lt-ley-linea{width:16px;height:2px;background:var(--txt2)}
.lt-ley-obj{width:16px;border-top:2px dashed rgba(255,255,255,.4)}
.lt-ley-dia{width:10px;height:10px;border-radius:3px}
.lt-svg{display:block;width:100%;height:auto;overflow:visible}
.lt-ret{stroke:var(--reticula);stroke-width:1}
.lt-cero{stroke:rgba(255,255,255,.28);stroke-dasharray:4 4}
.lt-guia{stroke:rgba(240,135,45,.45);stroke-dasharray:2 4}
.lt-descarga{fill:rgba(255,255,255,.035)}
.lt-eje{font:500 11px var(--mono)}
.lt-rotulo{font:500 11px var(--mono);fill:var(--txt2)}
.lt-rotulo.fuerte{font-weight:600;fill:var(--txt)}
.lt-trazo{fill:none;stroke:rgba(201,207,201,.5);stroke-width:2;stroke-linejoin:round}
.lt-punto{stroke:var(--sup1);stroke-width:2}
.lt-hueco{fill:var(--sup1);stroke:var(--txt3);stroke-width:1.8}
.lt-tendencia{fill:none;stroke:var(--txt2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.lt-pesaje{fill:#3E4642}
.lt-objetivo{stroke:rgba(255,255,255,.4);stroke-width:1.5;stroke-dasharray:6 5}
.lt-fase{fill:rgba(255,255,255,.06)}
.lt-fase.deficit{fill:rgba(240,135,45,.13)}
.lt-fase.superavit{fill:rgba(111,168,220,.14)}
.lt-fase-txt{font:600 12px var(--sans);fill:var(--txt)}
.lt-descarga-chip{fill:rgba(255,255,255,.12)}
.lt-descarga-txt{font:600 11px var(--sans);fill:var(--txt)}
.lt-dia.normal,.lt-ley-dia.normal{fill:var(--lima);background:var(--lima)}
.lt-dia.descarga,.lt-ley-dia.descarga{fill:rgba(163,224,32,.38);background:rgba(163,224,32,.38)}
.lt-dia.cardio,.lt-ley-dia.cardio{fill:var(--azul);background:var(--azul)}
.lt-dia.descanso,.lt-ley-dia.descanso{fill:rgba(255,255,255,.06);background:rgba(255,255,255,.10)}
.linea-tiempo.oculta-rend [data-capa="rend"],.linea-tiempo.oculta-peso [data-capa="peso"],.linea-tiempo.oculta-entrenos [data-capa="entrenos"]{display:none}
.lt-pie{margin:12px 0 0;font-size:12.5px}

/* Fila de ejercicios + columna lateral */
.resumen-fila{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;margin-bottom:16px}
.resumen-principal{flex:3 1 560px;min-width:0}
.resumen-lateral{flex:2 1 320px;min-width:0;display:flex;flex-direction:column;gap:16px}
.resumen-principal > .card,.resumen-lateral > .card{margin:0}
.tabla-ejercicios td{vertical-align:middle}
/* La mini línea encoge con la columna para que la tabla quepa junto a la
   columna lateral sin desplazarse. */
.tabla-ejercicios td:nth-child(2){width:120px}
.tabla-ejercicios .linea-svg{width:100%;min-width:64px;max-width:120px;height:auto}
.ej-sub{display:block;margin-top:2px;font:400 12px var(--sans);color:var(--txt3)}
.linea-svg{display:block}
.linea-trazo{fill:none;stroke:var(--txt2);stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round}
.tarjeta-sub{margin:-8px 0 12px;font-size:13px}
.vol-lista{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:11px}
.vol-lista li{display:grid;grid-template-columns:minmax(90px,120px) minmax(0,1fr) 34px;gap:12px;align-items:center;font-size:13.5px;color:var(--txt)}
.vol-lista b{text-align:right;font:500 13px var(--mono)}
.vol-barra{height:10px;border-radius:5px;background:rgba(255,255,255,.05);overflow:hidden}
.vol-barra i{display:block;height:100%;border-radius:5px;background:var(--azul)}
.rec-grafica{margin-top:10px}

/* Sigue en el escritorio */
.siguiente h2{margin:8px 2px 12px;font:700 20px var(--display);letter-spacing:1.2px;text-transform:uppercase;color:var(--txt)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:12px}
.tile{display:flex;align-items:center;gap:14px;min-height:76px;padding:14px 16px;text-align:left;border:1px solid var(--borde);border-radius:var(--radio);background:var(--sup1);color:var(--txt2);transition:border-color .15s}
.tile:hover{border-color:rgba(163,224,32,.45)}
.tile-ico{width:42px;height:42px;padding:10px;border-radius:12px;background:var(--sup2);color:var(--lima);stroke-width:1.8}
.tile-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tile-txt b{font-size:15px;color:var(--txt)}
.tile-txt span{font-size:13px;color:var(--txt3)}
.tile-flecha{color:var(--txt3)}
@media print{.linea-tiempo,.siguiente,.kpis{break-inside:avoid}}

/* ---------- Bienvenida (fase 9) ---------- */
.bienvenida{max-width:none;margin:8px 0 0}
.bv-hero{display:flex;flex-wrap:wrap;gap:32px 40px;align-items:center;margin-bottom:40px}
.bv-intro{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.bienvenida h1{margin:0;font:800 clamp(40px,5vw,64px)/.98 var(--display);letter-spacing:.5px;color:var(--txt)}
.bv-lead{margin:0;max-width:560px;font-size:17px;line-height:1.55;color:var(--txt2)}
.bv-privacidad{display:flex;gap:12px;align-items:flex-start;max-width:560px;margin:0;padding:14px 16px;border-radius:12px;background:var(--sup1);border:1px solid var(--borde);font-size:13.5px;color:var(--txt2)}
.bv-privacidad .icono{color:var(--lima);margin-top:1px}
.bv-zona{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px 28px;text-align:center;border:2px dashed rgba(163,224,32,.45);border-radius:20px;background:var(--sup1)}
.bv-zona-ico{width:64px;height:64px;border-radius:18px;background:var(--lima-14);display:flex;align-items:center;justify-content:center;color:var(--lima)}
.bv-zona-ico .icono{width:30px;height:30px}
.bv-zona h2{margin:0;font:700 26px var(--display);letter-spacing:.5px;color:var(--txt)}
.bv-zona p{margin:0;font-size:14.5px;color:var(--txt3)}
.bv-zona .fila-botones{justify-content:center;margin:4px 0 0}
.bv-zona .btn.pri{min-height:48px;padding:0 24px;font-size:17px}
.bv-h2{margin:0 0 14px;font:700 22px var(--display);letter-spacing:1px;text-transform:uppercase;color:var(--txt)}
.bv-pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px;margin:0 0 40px}
.bv-pasos li{display:flex;flex-direction:column;gap:4px;padding:20px 20px 20px 64px;border-radius:var(--radio);background:var(--sup1);border:1px solid var(--borde)}
.bv-pasos li::before{left:20px;top:20px;width:32px;height:32px}
.bv-pasos li > b{font-size:15px}
.bv-pasos li > span{font-size:13.5px;color:var(--txt2)}
.bv-dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:16px}
.bv-dos .card{margin:0;padding:24px}
.bv-dos h3{margin:0;font:700 20px var(--display);letter-spacing:.5px;text-transform:none;color:var(--txt)}
.bv-dos .muted{margin:2px 0 14px;font-size:13px}
.bv-dos ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.bv-dos li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--txt2)}
.bv-dos li::before{content:"";flex:none;width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--vacio)}
.bv-escritorio{border-color:rgba(163,224,32,.45)}
.bv-escritorio li{color:var(--txt)}
.bv-escritorio li::before{display:none}
.bv-escritorio .icono{width:16px;height:16px;margin-top:3px;color:var(--lima);stroke-width:2.8}

/* ---------- Entrenamiento: lista + ficha (fase 9) ---------- */
.ficha-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:20px;align-items:start}
.ficha-detalle{min-width:0}
.ficha-detalle > .card{margin-bottom:16px}
.card.ficha-lista{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;padding:14px 10px;margin:0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
.ficha-lista ul{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:2px}
.ficha-grupo{margin:6px 8px 6px;font:600 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--txt4)}
.ficha-item{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid transparent;border-radius:10px;background:none;text-align:left;color:var(--txt2)}
.ficha-item:hover{background:var(--sup2);color:var(--txt)}
.ficha-item.sel{border-color:rgba(163,224,32,.45);background:var(--lima-10);color:var(--txt)}
.ficha-item-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.ficha-item-nom{font-size:13.5px;font-weight:500;line-height:1.3}
.ficha-item.sel .ficha-item-nom{font-weight:600}
.ficha-item-sub{font:500 11px var(--mono);color:var(--txt3)}
.ficha-item .linea-svg{flex:none;opacity:.8}
.ficha-item.sel .linea-svg{opacity:1}
.card.ficha-cab h2{margin:0 0 10px;font:700 34px/1.05 var(--display);letter-spacing:.5px;text-transform:none}
.ficha-cab-fila{display:flex;gap:22px;align-items:flex-start}
.ficha-cab-txt{flex:1;min-width:0}
.ficha-nota{margin:-2px 0 12px}
.ficha-etiquetas{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.ficha-etiquetas span{padding:3px 10px;border-radius:999px;background:var(--sup2);font-size:12.5px;color:var(--txt2)}

/* ---------- Dibujos de los ejercicios ----------
   Los de la biblioteca de la app (dibujos.js). La base (.ej-dibujo y sus
   tamaños, y que no salgan al imprimir) viene de ../coach/styles.css; aquí
   los tamaños propios y el botón que abre la ficha ampliada. */
.ej-dibujo-btn{flex:none;display:block;padding:0;border:0;background:none;border-radius:12px;cursor:zoom-in}
.ej-dibujo-btn:hover .ej-dibujo{border-color:var(--lima)}
.ej-dibujo-btn:focus-visible{outline:2px solid var(--lima);outline-offset:2px}
img.ej-dibujo[data-ejercicio]{cursor:pointer}
.ej-dibujo-cab{width:168px;height:168px;border-radius:14px;font-size:44px}
.ej-dibujo-rut{width:52px;height:52px;border-radius:9px;font-size:15px}
#modalCaja .ej-ficha .ej-dibujo-xl{width:min(360px,100%);height:auto;aspect-ratio:1}
/* Fotos de RepDB: figura en color sobre transparente. Como en la app, van
   sobre superficie 2 en los dos temas y enteras (sin recortar). */
img.ej-dibujo.ej-foto{background:var(--sup2);object-fit:contain}
@media (max-width:640px){
  .ficha-cab-fila{flex-direction:column-reverse;gap:12px}
  .ej-dibujo-cab{width:120px;height:120px}
}

@media (max-width:1100px){
  .ficha-layout{grid-template-columns:minmax(0,1fr)}
  .card.ficha-lista{display:none}
}

/* ---------- Comparar periodos (fase 9) ---------- */
.periodos-sel fieldset{padding:14px 16px 16px;border-radius:12px}
.periodos-sel fieldset:nth-child(2){border-color:rgba(163,224,32,.45)}
.periodos-sel legend{padding:0 6px;font:700 17px var(--display);letter-spacing:.5px}
.ab-resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:16px;margin-bottom:16px}
.ab-tile{display:flex;flex-direction:column;gap:8px;padding:18px 20px;border:1px solid var(--borde);border-radius:var(--radio);background:var(--sup1)}
.ab-tile h3{margin:0;font:700 15px var(--display);letter-spacing:1.4px;text-transform:uppercase;color:var(--txt)}
.ab-valores{display:flex;align-items:baseline;gap:10px;margin:0;flex-wrap:wrap}
.ab-a{font:700 26px var(--display);color:var(--txt3)}
.ab-b{font:800 40px/1 var(--display);color:var(--txt)}
.ab-valores .icono{width:18px;height:18px;color:var(--vacio);align-self:center}
.ab-pie{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0;font-size:12.5px;color:var(--txt3)}
.dif-celda{display:flex;align-items:center;gap:10px;white-space:nowrap}
.dif-barra{position:relative;flex:none;width:90px;height:8px;border-radius:4px;background:rgba(255,255,255,.05)}
.dif-barra::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--borde-campo)}
.dif-barra i{position:absolute;top:0;bottom:0;border-radius:4px;background:var(--azul)}
.dif-barra i.pos{left:50%}
.dif-barra i.neg{right:50%}

/* ---------- Mi rutina: de tu móvil a tu móvil (fase 9) ---------- */

/* ---------- Informes: vista previa en papel (fase 9) ----------
   En pantalla el documento ya se ve como sale impreso: hoja clara y los
   colores de papel de la hoja de impresión. */
@media screen{
  .informe-doc{
    --fondo:#FBFBF7; --sup1:#FBFBF7; --sup2:#F1F3EE; --sup3:#E7EBE4;
    --txt:#151815; --txt2:#2D332F; --txt3:#5A625C; --txt4:#646C66; --apagado:#646C66; --vacio:#C3C7BF;
    --lima:#4C6A0A; --lima-10:#F2F7E6; --lima-14:#EAF3D6; --lima-18:#E2EFC4; --lima-30:#B9D472;
    --ambar:#8A6408; --ambar-14:#F7EFD9; --naranja:#A9520E; --naranja-14:#FAEADB;
    --rojo:#A2352A; --rojo-vivo:#B3261E; --rojo-vivo-14:#F8E3E1; --azul:#2F6EA3; --azul-14:#E3EEF8;
    --borde:#DDE1DC; --borde-campo:#CDD2CC; --sep:#E6E9E4; --reticula:#E1E5E0;
    max-width:900px;margin:22px auto 0;padding:clamp(20px,4vw,52px);border:0;border-radius:8px;
    background:#FBFBF7;color:var(--txt2);box-shadow:0 24px 70px rgba(0,0,0,.5);
  }
  .informe-doc > .card{background:transparent;border:0;border-top:1px solid var(--borde);border-radius:0;padding:18px 0 6px;margin:0 0 6px}
  .informe-doc .card h3{font:700 16px var(--display);letter-spacing:1.4px;color:var(--txt)}
  .informe-doc svg text{fill:#5A625C}
  .informe-doc .inf-cab{padding-bottom:16px;border-bottom:2px solid var(--txt)}
  .informe-doc .inf-cab h2{color:var(--txt)}
  .informe-doc .cifra{background:transparent;border:1px solid var(--borde)}
  .informe-doc .chip.verde{border-color:var(--lima-30)}
}
.aviso-comparacion{border-left:0;padding:10px 14px;border:1px solid rgba(224,169,46,.32);border-radius:var(--radio-sm);background:var(--ambar-14);color:var(--txt)}

/* Progreso de la fase (como «Cómo vas» de la app): barra de peso con la
   marca de lo previsto y barra de tiempo, del mismo ancho. */
.fase-progreso{margin:14px 0 10px;padding:12px 14px;border:1px solid var(--borde);border-radius:var(--radio-sm);background:var(--sup2)}
.fase-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fase-cab .sub-h{margin:0}
.fase-fila{display:flex;justify-content:space-between;gap:10px;margin:10px 0 5px;font-size:12px;color:var(--txt3)}
.fase-fila b{color:var(--txt);font-weight:600}
.fase-barra{position:relative;height:8px;background:var(--sup3);border-radius:6px}
.fase-barra i{display:block;height:100%;border-radius:6px}
.fase-barra b{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--txt);border-radius:1px}
.fase-frase{margin:10px 0 4px;font-weight:600}
@media print{.fase-progreso{break-inside:avoid}}

/* ---------- Tema claro «Tiza» (como la app, 16/10/2026) ----------
   tema.js pone data-tema="claro" en <html>. Paleta de la app (TLPaleta.clara):
   fondo de tiza, tarjeta blanca y campo gris verdoso, bordes en negro
   translúcido. El lima se desdobla: --lima es la TINTA (texto, iconos,
   trazos), un oliva que se lee sobre blanco; los rellenos con texto oscuro
   encima usan --lima-relleno. Solo en pantalla: al imprimir manda la hoja
   de papel. */
@media screen{
  html[data-tema="claro"]{
    color-scheme:light;
    --fondo:#F3F5F2; --sup1:#FFFFFF; --sup2:#ECEFEB; --sup3:#E1E5E0;
    --lima:#477500; --lima-hover:#3A6000; --lima-relleno:#A3E020; --lima-relleno-hover:#B8EE4C;
    --lima-10:#EBF5D6; --lima-14:#E3F0C8; --lima-18:#DAEBB8; --lima-30:rgba(71,117,0,.32);
    --ambar:#946200; --ambar-14:rgba(148,98,0,.08);
    --naranja:#B44D06; --naranja-14:rgba(180,77,6,.08);
    --rojo:#B3261E; --rojo-14:rgba(179,38,30,.10);
    --rojo-vivo:#C02E14; --rojo-vivo-14:rgba(192,46,20,.08);
    --azul:#2A6CB0; --azul-14:rgba(42,108,176,.08);
    --txt:#0E1210; --txt2:#353D38; --txt3:#4F5853; --txt4:#626C67;
    --apagado:#8A938E; --vacio:#A9B2AD;
    --borde:rgba(14,24,18,.10); --borde-campo:rgba(14,24,18,.16);
    --sep:rgba(14,24,18,.07); --reticula:rgba(14,24,18,.08);
    --nivel-0:#6E6E6E; --nivel-1:#477500; --nivel-2:#2A6CB0; --nivel-3:#8D5BC4; --nivel-4:#8A6C00; --nivel-sin:#8A938E;
  }
  html[data-tema="claro"] svg text{fill:#4F5853}
  /* Rellenos lima con texto oscuro encima. */
  html[data-tema="claro"] .btn.pri,html[data-tema="claro"] .saltar,
  html[data-tema="claro"] .btn.pri:hover{background:var(--lima-relleno-hover);border-color:var(--lima-relleno-hover);color:#0A0C0B}
  /* Velos y realces que en oscuro aclaran: en claro oscurecen. */
  html[data-tema="claro"] .btn{border-color:rgba(14,24,18,.16)}
  html[data-tema="claro"] .btn:hover,html[data-tema="claro"] .btn-mini:hover,
  html[data-tema="claro"] #modalCaja .opcion:hover,
  html[data-tema="claro"] input:hover,html[data-tema="claro"] select:hover,html[data-tema="claro"] textarea:hover{border-color:rgba(14,24,18,.30)}
  html[data-tema="claro"] .chip.gris{background:rgba(14,24,18,.05)}
  html[data-tema="claro"] .kpi-progreso,html[data-tema="claro"] .vol-barra,html[data-tema="claro"] .dif-barra,html[data-tema="claro"] .barra{background:rgba(14,24,18,.07)}
  html[data-tema="claro"] .mini-cero{stroke:rgba(14,24,18,.25)}
  html[data-tema="claro"] .lt-ley-obj{border-top-color:rgba(14,24,18,.45)}
  html[data-tema="claro"] .lt-cero{stroke:rgba(14,24,18,.28)}
  html[data-tema="claro"] .lt-descarga{fill:rgba(14,24,18,.04)}
  html[data-tema="claro"] .lt-pesaje{fill:#B4BCB7}
  html[data-tema="claro"] .lt-objetivo{stroke:rgba(14,24,18,.35)}
  html[data-tema="claro"] .lt-fase{fill:rgba(14,24,18,.05)}
  html[data-tema="claro"] .lt-descarga-chip{fill:rgba(14,24,18,.10)}
  html[data-tema="claro"] .lt-dia.descanso,html[data-tema="claro"] .lt-ley-dia.descanso{fill:rgba(14,24,18,.07);background:rgba(14,24,18,.10)}
  html[data-tema="claro"] .ej-lista,html[data-tema="claro"] #tabs,html[data-tema="claro"] #modalCaja,
  html[data-tema="claro"] .card.ficha-lista{scrollbar-color:rgba(14,24,18,.20) transparent}
  /* Los dibujos son trazo blanco sobre negro: en claro se invierten a trazo
     oscuro sobre el gris del campo, como las láminas de la app. */
  html[data-tema="claro"] img.ej-dibujo:not(.ej-foto){filter:invert(1) brightness(.93)}
  /* Las fotos de progreso no se tocan. El informe ya es una hoja clara. */
  html[data-tema="claro"] .informe-doc{box-shadow:0 10px 40px rgba(14,24,18,.14)}
}
/* Elegir tema en Mis datos. */
.tema-elegir{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 8px;padding:0;border:0}
.tema-op{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--txt2);cursor:pointer}
.tema-op input{accent-color:var(--lima)}

/* Encuadre hecho en la app (FotosTL.transformCss): recuadro 3:4, imagen a
   sangre y fondo negro neutro donde asome el borde, como en el móvil. Va al
   final para ganar a los .marco de galería, informe y selector de fotos. */
.marco.con-ajuste,.foto-grande-marco.con-ajuste{background:#000;overflow:hidden}
.marco.con-ajuste img{object-fit:cover;transform-origin:center}
.foto-grande-marco{width:min(100%,calc(70vh * 3 / 4));aspect-ratio:3/4;margin:0 auto;border-radius:10px}
.foto-grande-marco img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:center}

/* Nombre del usuario (opcional, de la copia): saludo de Mi resumen y portada del informe. */
.cabecera-seccion .saludo{margin:2px 0 4px;font:700 20px var(--display);letter-spacing:.3px;color:var(--lima)}
.inf-saludo{margin:2px 0 6px;font-weight:600}

/* ---------- Nutrición (solo consulta) ---------- */
:root{--morado:#A78BFA;--m-prot:var(--lima);--m-hid:var(--azul);--m-gra:var(--ambar)}
html[data-tema="claro"]{--morado:#6D4BD8}
.nut-fase{margin:2px 0 6px;font:800 15px var(--mono);letter-spacing:.12em;color:var(--lima)}
.nut-kcal{margin:4px 0;font:800 40px var(--display);color:var(--lima);line-height:1}
.nut-kcal span{font:600 15px var(--sans);color:var(--txt2)}
.nut-modo{font-weight:600;margin:4px 0}
.nut-kv{margin-top:10px}
.nut-macros-barra{display:flex;height:12px;border-radius:7px;overflow:hidden;background:var(--sup3);margin:12px 0 6px}
.nut-macros-barra i{display:block;height:100%}
.m-prot{background:var(--m-prot)}.m-hid{background:var(--m-hid)}.m-gra{background:var(--m-gra)}
.nut-leyenda{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--txt2);margin:0 0 10px}
.nut-leyenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.nut-temporada-cab .cifras{margin-top:0}
.nut-modo-btns{margin:0 0 12px}
.nut-cuerpos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:640px;margin:0 auto}
.nut-cuerpo{margin:0;text-align:center}
.nut-cuerpo img,.nut-cuerpo-vacio{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:12px;background:#000}
.nut-cuerpo-vacio{display:flex;align-items:center;justify-content:center;padding:12px;color:var(--txt3);font-size:13px}
.nut-cuerpo figcaption{margin-top:8px;font-size:13px;line-height:1.5}
.nut-superponer{position:relative;width:min(100%,320px);aspect-ratio:2/3;margin:0 auto;border-radius:12px;overflow:hidden;background:#000}
.nut-capa{position:absolute;inset:0}
.nut-capa img{width:100%;height:100%;object-fit:cover;display:block}
.nut-capa.encima{opacity:var(--opacidad,.5)}
.nut-superponer-pie{display:flex;justify-content:space-between;gap:12px;max-width:320px;margin:8px auto;font-size:12.5px;color:var(--txt2)}
.nut-desls{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px 18px;margin-top:14px}
.nut-desl{display:block;font-size:12.5px;color:var(--txt2);max-width:420px}
.nut-desl input{display:block;width:100%;accent-color:var(--lima);margin-top:6px}
.nut-superponer + .nut-superponer-pie + .nut-desl{margin:6px auto}
.nut-repro{text-align:center}
.nut-repro-etapa{margin:0;font:800 26px var(--display);letter-spacing:.3px}
.nut-repro-rotulo{margin:4px 0 12px;color:var(--txt2);font-size:13px}
.nut-repro-lienzo{position:relative;width:min(100%,calc((85vh - 260px) * 2 / 3),400px);aspect-ratio:2/3;margin:0 auto;border-radius:12px;overflow:hidden;background:#000}
.nut-repro-lienzo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nut-repro-lienzo img.encima{opacity:0}
.nut-repro-avance{height:6px;max-width:420px;margin:14px auto 0;border-radius:4px;background:var(--sup3);overflow:hidden}
.nut-repro-avance i{display:block;height:100%;width:0;background:var(--lima)}
@media (max-width:520px){.nut-cuerpos{gap:10px}.nut-kcal{font-size:32px}}

/* Semáforo de VFC y FC en reposo (Recuperación). */
.pastilla-senal{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 12px;margin:0 0 12px;border:1px solid var(--borde);border-radius:999px;background:var(--sup2);font-size:13px}
.pastilla-senal .ps-luces{display:inline-flex;gap:5px}
.pastilla-senal .ps-luces i{width:11px;height:11px;border-radius:50%;border:2px solid var(--txt4);box-sizing:border-box}
.pastilla-senal.verde .ps-luces i.on{background:var(--lima);border-color:var(--lima)}
.pastilla-senal.ambar{background:rgba(224,169,46,.10);border-color:rgba(224,169,46,.45)}
.pastilla-senal.ambar .ps-luces i.on{border-color:var(--ambar);border-width:3px}
.pastilla-senal.rojo{background:rgba(240,68,56,.10);border-color:rgba(240,68,56,.5)}
.pastilla-senal.rojo .ps-luces i.on{background:var(--rojo-vivo,#F04438);border-color:var(--rojo-vivo,#F04438)}
.pastilla-senal .ps-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.pastilla-senal .ps-txt span{color:var(--txt2);font-size:12px}
.pastilla-senal .ps-fecha{margin-left:auto;font-size:11.5px}