/* ============================================================
   EduTrauma Tools — capa de app móvil
   v2.0 · 2026-09 · según design/handoff-v2/README.md

   Se carga DESPUÉS de edutrauma-ui.css, del que hereda los tokens de marca.
   Aquí viven los componentes que el sistema original no tenía porque las
   tools eran páginas sueltas: pestañas, pila de navegación, hojas modales,
   switches, segmented controls y el primer arranque.
   ============================================================ */

:root{
  --app-bg: #f2f4f9;
  --app-surface: #ffffff;
  --app-navy: #00205C;
  --app-navy-deep: #001845;
  --app-navy-light: #062b6f;
  --app-red: #E02826;
  --app-teal: #16829e;
  --app-slate: #5b6b8c;
  --app-green: #1F7A5C;
  --app-green-bright: #4ad196;
  --app-amber: #c99a12;
  --app-amber-text: #7a5b13;

  --app-sep: rgba(0,32,92,.1);
  --app-press: rgba(0,32,92,.055);
  --app-field: rgba(0,32,92,.07);
  --app-tab-off: rgba(0,32,92,.38);

  --app-shadow-card: 0 6px 18px rgba(0,32,92,.07);
  --app-shadow-sheet: 0 -12px 40px rgba(0,32,92,.22);
  --app-shadow-toast: 0 12px 30px rgba(0,32,92,.32);

  --app-ease: cubic-bezier(.32,.72,0,1);
  --app-spring: cubic-bezier(.34,1.5,.64,1);
}

/* ---------- Armazón ---------- */
html, body{ height:100%; }
body.et-app-body{
  margin:0;
  background: var(--app-bg);
  color: var(--app-navy);
  font-family: var(--et-font);
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
/* Contexto de apilado propio: las capas internas (arranque, hojas) no deben
   taparse con el chrome del sistema — barra de estado e indicador de inicio. */
/* El body de la serie es flex centrado (edutrauma-ui.css): sin ancho propio,
   el contenedor se encogería al tamaño de su contenido. */
.et-app{
  position:relative; z-index:0;
  width:100%; max-width:480px;
  display:flex; flex-direction:column;
  height:100dvh;
  overflow:hidden;
}

.et-strip{
  background: var(--app-navy);
  padding: calc(14px + env(safe-area-inset-top)) 16px 8px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-shrink:0;
}
.et-strip img.et-logo{ height:22px; width:auto; display:block; }
.et-course-chip{
  background:#fff; border-radius:8px; padding:3px 8px;
  display:flex; align-items:center; flex-shrink:0;
}
.et-course-chip img{ height:24px; width:auto; display:block; }

.et-ribbon{
  background: var(--app-navy-deep);
  border-top:2px solid var(--app-red);
  color: rgba(255,255,255,.78);
  text-align:center;
  font-size:.58rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.24em;
  padding:5px 16px 6px;
  flex-shrink:0;
}

/* ---------- Nav bar (solo pantallas empujadas) ---------- */
.et-nav{
  position:relative; flex-shrink:0;
  height:44px;
  display:flex; align-items:center;
  background: rgba(242,244,249,.9);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-bottom:.5px solid rgba(0,32,92,.14);
}
.et-nav-back{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:3px;
  background:none; border:0; cursor:pointer;
  padding:0 8px 0 10px; height:44px;
  color: var(--app-teal); font:600 17px/1 var(--et-font);
  letter-spacing:-.01em;
  transition:opacity .18s ease;
}
.et-nav-back:active{ opacity:.4; }
.et-nav-back svg{ width:12px; height:20px; flex-shrink:0; }
.et-nav-title{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:0 96px;
  font:600 17px/1.2 var(--et-font); color:var(--app-navy);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  pointer-events:none;
}
.et-nav-title span{ overflow:hidden; text-overflow:ellipsis; }

/* ---------- Área de scroll ---------- */
.et-scroll{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
}
.et-pad{ padding:0 16px 26px; }

/* ---------- Tab bar ---------- */
.et-tabs{
  flex-shrink:0;
  display:flex;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  border-top:.5px solid rgba(0,32,92,.16);
  padding:7px 6px calc(10px + env(safe-area-inset-bottom));
}
.et-tab{
  flex:1; min-height:46px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:none; border:0; cursor:pointer;
  color: var(--app-tab-off);
  font:600 10px/1.2 var(--et-font);
  transition:color .18s ease;
}
.et-tab svg{ width:25px; height:25px; stroke-width:1.7; }
.et-tab[aria-selected="true"]{ color: var(--app-navy); }

/* ---------- Transiciones de pila ---------- */
@keyframes etPush{ from{ opacity:.2; transform:translateX(26px) } to{ opacity:1; transform:none } }
@keyframes etPop { from{ opacity:.2; transform:translateX(-22px) } to{ opacity:1; transform:none } }
@keyframes etFade{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.et-anim-push{ animation: etPush .34s var(--app-ease) both; }
.et-anim-pop { animation: etPop  .34s var(--app-ease) both; }
.et-anim-fade{ animation: etFade .34s var(--app-ease) both; }

/* ---------- Tipografía de pantalla ---------- */
.et-h1{
  margin:18px 0 6px;
  font:800 30px/36px var(--et-font); letter-spacing:-.03em;
  color:var(--app-navy); text-wrap:balance;
}
.et-lede{ margin:0 0 18px; font:400 15px/1.5 var(--et-font); color:var(--app-slate); }
.et-section{
  margin:22px 0 8px;
  font:600 13px/1.2 var(--et-font); text-transform:uppercase; letter-spacing:.04em;
  color:var(--app-slate);
}
.et-note{ margin:10px 2px 0; font:400 12px/1.45 var(--et-font); color:var(--app-slate); }

/* ---------- Grupo de lista inset ---------- */
.et-group{
  background:var(--app-surface); border-radius:14px; overflow:hidden;
  box-shadow:var(--app-shadow-card);
}
.et-row{
  display:flex; align-items:center; gap:12px; width:100%;
  min-height:52px; padding:12px 14px;
  background:none; border:0; cursor:pointer; text-align:left;
  border-bottom:.5px solid var(--app-sep);
  font-family:var(--et-font); color:var(--app-navy);
  text-decoration:none;
  transition:background .12s ease;
}
.et-row:last-child{ border-bottom:0; }
.et-row:active{ background:var(--app-press); }
.et-row-main{ display:block; flex:1; min-width:0; }
.et-row-title{ display:block; font:600 17px/1.25 var(--et-font); letter-spacing:-.02em; }
.et-row-sub{ display:block; margin-top:2px; font:400 13px/1.4 var(--et-font); color:var(--app-slate); }
.et-row-value{
  display:block; flex-shrink:0;
  font:400 17px/1.25 var(--et-font); color:var(--app-slate);
  max-width:52%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.et-chev{ width:8px; height:14px; flex-shrink:0; color:rgba(0,32,92,.3); }
.et-check{ width:16px; height:16px; flex-shrink:0; color:var(--app-red); }
.et-tile{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 3px 8px rgba(0,32,92,.14);
}
.et-tile img{ height:28px; width:auto; display:block; }
.et-tile-mono{ color:#fff; font:800 11px/1 var(--et-font); letter-spacing:.02em; }
.et-tile-sm{ width:30px; height:30px; border-radius:8px; box-shadow:none; background:#eef1f7; }
.et-tile-sm svg{ width:17px; height:17px; color:var(--app-navy); }

.et-gap{ height:22px; }

/* ---------- Panel de portada (Kit) ---------- */
.et-cover{
  position:relative; overflow:hidden;
  margin:0 0 4px;
  padding:20px 16px;
  border-radius:0 0 24px 24px;
  background:linear-gradient(180deg,#001845 0%,#00205C 55%,#062b6f 100%);
  color:#fff;
}
.et-cover::before{
  content:""; position:absolute; top:-42px; right:-52px;
  width:190px; height:190px; border-radius:999px;
  border:26px solid rgba(255,255,255,.05); pointer-events:none;
}
.et-cover::after{
  content:""; position:absolute; bottom:-70px; left:-40px;
  width:150px; height:150px; border-radius:999px;
  background:rgba(224,40,38,.14); pointer-events:none;
}
.et-cover > *{ position:relative; z-index:1; }
.et-cover h1{
  margin:0; font:800 31px/36px var(--et-font); letter-spacing:-.035em;
  color:#fff; text-wrap:balance;
}
.et-cover p{ margin:8px 0 0; font:400 15px/1.45 var(--et-font); color:rgba(255,255,255,.72); }
.et-cover-sep{ height:1px; background:rgba(255,255,255,.15); margin:16px 0 2px; }
.et-cover-row{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:10px 0 2px; background:none; border:0; text-align:left;
  font-family:var(--et-font); color:#fff;
  transition:opacity .18s ease;
}
button.et-cover-row{ cursor:pointer; }
button.et-cover-row:active{ opacity:.55; }
.et-cover-tile{
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.et-cover-eyebrow{
  display:block;
  font:700 11px/1.2 var(--et-font); text-transform:uppercase; letter-spacing:.18em;
  color:rgba(255,255,255,.6);
}
.et-cover-name{ display:block; margin-top:2px; font:600 16px/1.3 var(--et-font); }
.et-cover-text{ display:block; font:400 14px/1.45 var(--et-font); color:rgba(255,255,255,.72); }
.et-cover-count{ font:600 15px/1 var(--et-font); color:rgba(255,255,255,.7); }

/* Barra condensada al hacer scroll */
.et-sticky-wrap{ position:sticky; top:0; height:0; z-index:6; }
.et-sticky-bar{
  height:42px; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--app-navy-deep); color:rgba(255,255,255,.92);
  font:600 14px/1 var(--et-font);
  box-shadow:0 6px 16px rgba(0,24,69,.28);
  opacity:0;
}
.et-sticky-dot{ width:7px; height:7px; border-radius:999px; background:var(--app-green-bright); flex-shrink:0; }
@supports (animation-timeline: scroll()){
  .et-sticky-bar{
    animation: etBarIn linear both;
    animation-timeline: scroll(nearest);
    animation-range: 60px 130px;
  }
}
@keyframes etBarIn{ from{ opacity:0 } to{ opacity:1 } }

/* ---------- Botones ---------- */
.et-btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:50px; padding:13px 18px;
  border:0; border-radius:13px; cursor:pointer;
  background:var(--app-navy); color:#fff;
  font:700 17px/1.2 var(--et-font); letter-spacing:-.01em;
  transition:transform .3s var(--app-spring), filter .2s ease, background .2s ease;
}
.et-btn:active{ transform:scale(.97); filter:brightness(.9); }
.et-btn[disabled]{ background:rgba(0,32,92,.3); cursor:default; }
.et-btn[disabled]:active{ transform:none; filter:none; }
.et-btn-red{ background:var(--app-red); min-height:54px; border-radius:14px; }
.et-btn-ghost{ background:var(--app-field); color:var(--app-navy); }
.et-btn-text{
  display:block; width:100%; padding:12px; margin-top:4px;
  background:none; border:0; cursor:pointer;
  color:var(--app-teal); font:600 15px/1.2 var(--et-font); text-align:center;
  transition:opacity .18s ease;
}
.et-btn-text:active{ opacity:.4; }

/* ---------- Campo de búsqueda ---------- */
.et-search{
  display:flex; align-items:center; gap:8px;
  background:var(--app-field); border-radius:10px; padding:8px 10px;
}
.et-search svg{ width:15px; height:15px; color:var(--app-slate); flex-shrink:0; }
.et-search input{
  flex:1; min-width:0; border:0; background:none; outline:none;
  font:400 17px/1.3 var(--et-font); color:var(--app-navy);
}
.et-search input::placeholder{ color:var(--app-slate); }
.et-search-clear{
  width:24px; height:24px; border-radius:999px; border:0; flex-shrink:0;
  background:rgba(0,32,92,.22); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font:700 13px/1 var(--et-font);
}
.et-cancel{
  background:none; border:0; cursor:pointer; padding:0 2px; flex-shrink:0;
  color:var(--app-teal); font:400 17px/1 var(--et-font);
  transition:opacity .18s ease;
}
.et-cancel:active{ opacity:.4; }

/* ---------- Segmented control ---------- */
.et-seg{
  display:flex; gap:2px; padding:2px;
  background:var(--app-field); border-radius:10px;
}
.et-seg button{
  flex:1; height:34px; border:0; border-radius:8px; cursor:pointer;
  background:none; color:var(--app-navy);
  font:400 15px/1 var(--et-font);
  transition:background .18s ease, box-shadow .18s ease, font-weight .18s ease;
}
.et-seg button[aria-pressed="true"]{
  background:#fff; font-weight:600; box-shadow:0 1px 3px rgba(0,32,92,.18);
}

/* ---------- Switch iOS ---------- */
.et-switch{
  position:relative; flex-shrink:0;
  width:51px; height:31px; border-radius:999px; border:0; cursor:pointer;
  background:rgba(0,32,92,.16);
  transition:background .2s ease;
}
.et-switch[aria-checked="true"]{ background:var(--app-green); }
.et-switch::after{
  content:""; position:absolute; top:2px; left:2px;
  width:27px; height:27px; border-radius:999px; background:#fff;
  box-shadow:0 2px 5px rgba(0,32,92,.28);
  transition:transform .2s ease;
}
.et-switch[aria-checked="true"]::after{ transform:translateX(20px); }

/* ---------- Barra de progreso (offline) ---------- */
.et-meter{ height:5px; border-radius:999px; background:var(--app-field); overflow:hidden; }
.et-meter > i{ display:block; height:100%; border-radius:999px; background:var(--app-green); }

/* ---------- Tarjeta simple ---------- */
.et-card{
  background:var(--app-surface); border-radius:14px; padding:14px;
  box-shadow:var(--app-shadow-card);
}

/* ---------- Hoja modal ---------- */
.et-overlay{
  position:absolute; inset:0; z-index:40;
  background:rgba(0,24,69,.34);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  display:flex; flex-direction:column; justify-content:flex-end;
  animation:etOverlayIn .22s ease both;
}
@keyframes etOverlayIn{ from{ opacity:0 } to{ opacity:1 } }
.et-sheet{
  background:var(--app-bg);
  border-radius:20px 20px 0 0;
  box-shadow:var(--app-shadow-sheet);
  padding:9px 0 calc(18px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; min-height:0;
  animation:etSheetUp .3s var(--app-ease) both;
}
.et-sheet-tall{ height:88%; }
@keyframes etSheetUp{ from{ transform:translateY(100%) } to{ transform:none } }
.et-grabber{
  width:38px; height:5px; border-radius:999px;
  background:rgba(0,32,92,.2); margin:0 auto 8px; flex-shrink:0;
}
.et-sheet-bar{
  position:relative; flex-shrink:0;
  height:44px; display:flex; align-items:center; justify-content:center;
  border-bottom:.5px solid var(--app-sep); padding:0 14px;
}
.et-sheet-bar h2{ margin:0; font:600 17px/1.2 var(--et-font); color:var(--app-navy); }
.et-sheet-bar .et-cancel{ position:absolute; right:14px; }
.et-sheet-body{ flex:1; overflow-y:auto; padding:14px 16px 0; min-width:0; }
.et-sheet-head{ padding:4px 16px 12px; flex-shrink:0; }
.et-sheet-head h2{
  margin:0 0 4px; font:800 22px/1.25 var(--et-font); letter-spacing:-.03em; color:var(--app-navy);
}
.et-sheet-head p{ margin:0; font:400 14px/1.45 var(--et-font); color:var(--app-slate); }

/* ---------- Toast ---------- */
.et-toast{
  position:absolute; left:16px; right:16px; bottom:96px; z-index:60;
  background:rgba(0,24,69,.95);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:#fff; border-radius:14px; padding:13px 16px;
  font:500 15px/1.35 var(--et-font);
  box-shadow:var(--app-shadow-toast);
  animation:etUp .28s var(--app-ease) both;
}
@keyframes etUp{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* ---------- Estado vacío ---------- */
.et-empty{ text-align:center; padding:44px 20px; }
.et-empty svg{ width:44px; height:44px; color:rgba(0,32,92,.25); }
.et-empty h3{ margin:14px 0 4px; font:700 19px/1.3 var(--et-font); color:rgba(0,32,92,.55); }
.et-empty p{ margin:0; font:400 14px/1.5 var(--et-font); color:var(--app-slate); }

/* ============================================================
   PRIMER ARRANQUE
   Cubre la app entera salvo el chrome del sistema.
   ============================================================ */
.et-onb{
  position:absolute; inset:0; z-index:50;
  display:flex; flex-direction:column;
  background:var(--app-bg);
}

/* Paso 0 — bienvenida */
.et-onb-welcome{
  position:relative; overflow-y:auto; overflow-x:hidden;
  flex:1; display:flex; flex-direction:column;
  padding:calc(18px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#001845 0%,#00205C 55%,#062b6f 100%);
  color:#fff;
}
.et-onb-welcome::before{
  content:""; position:absolute; top:-42px; right:-52px;
  width:190px; height:190px; border-radius:999px;
  border:26px solid rgba(255,255,255,.05);
}
.et-onb-welcome::after{
  content:""; position:absolute; bottom:-70px; left:-40px;
  width:150px; height:150px; border-radius:999px;
  background:rgba(224,40,38,.14);
}
.et-onb-welcome > *{ position:relative; z-index:1; }
/* align-self: en una columna flex, un item con width:auto se estira al ancho
   del contenedor y el logo se deforma. */
.et-onb-welcome img{ height:30px; width:auto; align-self:flex-start; flex-shrink:0; }
.et-onb-welcome .et-onb-fill{ flex:1; min-height:18px; }
.et-onb-eyebrow{
  font:700 11px/1.3 var(--et-font); text-transform:uppercase; letter-spacing:.22em;
  color:rgba(255,255,255,.6); margin:0 0 12px;
}
.et-onb-welcome h1{
  margin:0 0 12px; font:800 34px/39px var(--et-font); letter-spacing:-.03em;
  text-wrap:balance;
}
.et-onb-welcome .et-onb-sub{ margin:0 0 20px; font:400 16px/1.5 var(--et-font); color:rgba(255,255,255,.74); }
.et-onb-privacy{
  display:flex; gap:11px; align-items:flex-start;
  background:rgba(255,255,255,.1); border-radius:13px; padding:13px 14px;
  margin-bottom:18px;
}
.et-onb-privacy svg{ width:19px; height:19px; flex-shrink:0; color:var(--app-green-bright); }
.et-onb-privacy p{ margin:0; font:400 13.5px/1.45 var(--et-font); color:rgba(255,255,255,.82); }

/* Pasos 1–3 — cabecera navy */
.et-onb-head{
  flex-shrink:0;
  background:linear-gradient(180deg,#001845 0%,#00205C 100%);
  border-radius:0 0 22px 22px;
  padding:calc(14px + env(safe-area-inset-top)) 20px 20px;
  color:#fff;
}
.et-onb-prog{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.et-onb-dots{ display:flex; gap:6px; align-items:center; }
.et-onb-dots i{
  display:block; width:7px; height:7px; border-radius:999px;
  background:rgba(255,255,255,.28);
  transition:width .3s ease, background .3s ease;
}
.et-onb-dots i.done{ background:var(--app-red); }
.et-onb-dots i.now{ width:22px; background:var(--app-red); }
.et-onb-step{
  font:700 12px/1 var(--et-font); text-transform:uppercase; letter-spacing:.14em;
  color:rgba(255,255,255,.68);
}
.et-onb-head h2{ margin:0 0 6px; font:800 26px/1.22 var(--et-font); letter-spacing:-.03em; text-wrap:balance; }
.et-onb-head p{ margin:0; font:400 14px/1.45 var(--et-font); color:rgba(255,255,255,.68); }
.et-onb-foot{
  flex-shrink:0; padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  text-align:center; font:400 12px/1.4 var(--et-font); color:var(--app-slate);
}

/* Paso 4 — confirmación */
.et-onb-done{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:24px 30px; text-align:center;
  background:linear-gradient(180deg,#001845 0%,#00205C 55%,#062b6f 100%);
  color:#fff;
}
.et-onb-done .et-onb-ring{
  width:72px; height:72px; border-radius:999px; margin-bottom:12px;
  background:rgba(74,209,150,.16);
  display:flex; align-items:center; justify-content:center;
  animation:etSymbol .5s var(--app-spring) both;
}
.et-onb-done .et-onb-ring svg{ width:36px; height:36px; color:var(--app-green-bright); }
.et-onb-done h2{ margin:0; font:800 28px/1.2 var(--et-font); letter-spacing:-.03em; }
.et-onb-done p{ margin:0; font:400 15px/1.5 var(--et-font); color:rgba(255,255,255,.74); max-width:28ch; }
@keyframes etSymbol{
  0%{ opacity:0; transform:scale(.7) }
  60%{ transform:scale(1.06) }
  100%{ opacity:1; transform:scale(1) }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .et-anim-push, .et-anim-pop, .et-anim-fade{ animation:etFade .01ms both; }
}

/* ============================================================
   HERRAMIENTAS — lista de algoritmos, preguntas y resultados
   ============================================================ */

/* ---------- Fila de algoritmo (cuerpo + estrella de favorito) ---------- */
.et-algo{ display:flex; align-items:stretch; border-bottom:.5px solid var(--app-sep); }
.et-algo:last-child{ border-bottom:0; }
.et-algo .et-row{ border-bottom:0; }
.et-fav{
  width:46px; flex-shrink:0; border:0; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--app-red);
  transition:transform .3s var(--app-spring);
}
.et-fav:active{ transform:scale(.85); }
.et-fav svg{ width:18px; height:18px; }

/* Tarjeta de favorito del Kit */
.et-fav-card{
  flex:0 0 172px; width:172px;
  background:var(--app-surface); border-radius:14px; padding:13px;
  box-shadow:var(--app-shadow-card);
  display:flex; flex-direction:column; gap:8px; align-items:flex-start;
  border:0; cursor:pointer; text-align:left;
  transition:transform .3s var(--app-spring);
}
.et-fav-card:active{ transform:scale(.95); }
.et-fav-card svg{ width:19px; height:19px; color:var(--app-red); }
.et-fav-name{ font:600 15px/1.3 var(--et-font); color:var(--app-navy); }
.et-fav-tool{ font:400 12px/1.2 var(--et-font); color:var(--app-slate); }
.et-carousel{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.et-carousel::-webkit-scrollbar{ display:none; }

/* ---------- Cabecera de progreso ---------- */
.et-prog-top{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:16px 0 7px;
  font:700 12px/1.2 var(--et-font); text-transform:uppercase; letter-spacing:.14em;
  color:var(--app-slate);
}
.et-prog-name{
  font:600 12px/1.3 var(--et-font); text-transform:none; letter-spacing:0;
  text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:58%;
}
.et-prog{ height:4px; border-radius:999px; background:rgba(0,32,92,.12); overflow:hidden; }
.et-prog > i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#00205C,#E02826);
  transition:width .3s ease;
}

/* ---------- Badge de categoría ---------- */
.et-cat{
  display:inline-flex; align-items:center; gap:6px;
  margin:18px 0 0; padding:5px 11px 5px 9px;
  background:var(--app-teal-soft, #e7f4f7); border-radius:999px;
  font:700 12px/1.2 var(--et-font); text-transform:uppercase; letter-spacing:.1em;
  color:var(--app-teal);
}
.et-cat svg{ width:14px; height:14px; }

/* ---------- Pregunta y opciones ---------- */
.et-q{
  margin:14px 0 0;
  font:800 26px/1.22 var(--et-font); letter-spacing:-.03em;
  color:var(--app-navy); text-wrap:pretty;
}
.et-help{ margin:10px 0 0; font:400 15px/1.5 var(--et-font); color:var(--app-slate); }
.et-opts{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.et-opt{
  display:flex; align-items:center; gap:12px; width:100%;
  min-height:62px; padding:14px 16px;
  background:var(--app-surface); border:0; border-radius:14px; cursor:pointer;
  box-shadow:var(--app-shadow-card); text-align:left;
  transition:transform .3s var(--app-spring), background .2s ease;
}
.et-opt:active{ transform:scale(.965); background:#fbfcfe; }
.et-opt-label{ display:block; font:600 18px/1.3 var(--et-font); color:var(--app-navy); }
.et-opt-sub{ display:block; margin-top:3px; font:400 13px/1.4 var(--et-font); color:var(--app-slate); }

/* ---------- SÍ / NO ---------- */
.et-yn{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.et-yn button{
  min-height:78px; border-radius:16px; cursor:pointer;
  font:800 24px/1 var(--et-font); letter-spacing:.04em;
  transition:transform .3s var(--app-spring), filter .2s ease;
}
.et-yn button:active{ transform:scale(.955); }
.et-yes{ background:var(--app-navy); color:#fff; border:0; }
.et-yes:active{ filter:brightness(.9); }
.et-no{ background:var(--app-surface); color:var(--app-navy); border:1.5px solid var(--app-navy); }

/* ---------- Regla práctica ---------- */
.et-rules{
  margin-top:20px; background:var(--app-surface); border-radius:14px; padding:14px 16px;
  box-shadow:var(--app-shadow-card);
}
.et-rules h4{
  margin:0 0 10px; font:700 11px/1.2 var(--et-font);
  text-transform:uppercase; letter-spacing:.14em; color:var(--app-slate);
}
.et-rules li{ display:flex; gap:9px; margin-bottom:8px; font:400 14px/1.45 var(--et-font); color:var(--app-slate); }
.et-rules li:last-child{ margin-bottom:0; }
.et-rules li::before{
  content:""; flex-shrink:0; margin-top:.5em;
  width:7px; height:7px; border-radius:999px; background:var(--app-red);
}
.et-rules b{ color:var(--app-navy); font-weight:600; }
.et-rules ul{ list-style:none; margin:0; padding:0; }

/* ---------- Tarjeta de resultado ---------- */
.et-result{
  background:var(--app-surface); border-radius:16px; overflow:hidden;
  padding:0 18px 22px; margin-top:18px; text-align:center;
  box-shadow:0 10px 28px rgba(0,32,92,.1);
}
.et-result-band{ height:74px; margin:0 -18px; border-bottom:4px solid; }
.et-result-sym{
  width:58px; height:58px; border-radius:999px; margin:-48px auto 0;
  background:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,32,92,.16);
  animation:etSymbol .45s var(--app-spring) both;
}
.et-result-sym svg{ width:28px; height:28px; }
.et-result-eyebrow{
  margin:14px 0 5px; font:700 11px/1.3 var(--et-font);
  text-transform:uppercase; letter-spacing:.16em; color:var(--app-slate);
}
.et-result h2{ margin:0 0 9px; font:800 24px/1.22 var(--et-font); letter-spacing:-.03em; text-wrap:balance; }
.et-result p{ margin:0; font:400 15px/1.55 var(--et-font); color:var(--app-navy); }

.et-caution{
  margin-top:14px; padding:12px 14px; border-radius:11px; text-align:left;
  background:#fff8ec; color:var(--app-amber-text);
  font:400 13px/1.5 var(--et-font);
}
.et-neutral{
  margin-top:14px; padding:12px 14px; border-radius:11px; text-align:left;
  background:#eef1f7; color:var(--app-slate);
  font:400 13px/1.5 var(--et-font);
}
.et-steps{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.et-steps li{
  display:flex; gap:10px; align-items:flex-start; text-align:left;
  background:#eef1f7; border-radius:12px; padding:10px 12px;
}
.et-steps .et-step-n{
  flex-shrink:0; width:22px; height:22px; border-radius:6px;
  background:var(--app-navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font:700 12px/1 var(--et-font);
}
.et-steps span:last-child{ font:400 14px/1.5 var(--et-font); color:var(--app-navy); }

.et-trace-val{ font:400 13px/1.45 var(--et-font); color:var(--app-slate); }
.et-trace-val b{ color:var(--app-teal); font-weight:600; }

/* ---------- NEXUS ---------- */
.et-checkrow{
  display:flex; align-items:center; gap:12px; width:100%;
  min-height:54px; padding:10px 14px;
  border-bottom:.5px solid var(--app-sep); background:none; border-left:0; border-right:0; border-top:0;
  cursor:pointer; text-align:left;
}
.et-checkrow:last-child{ border-bottom:0; }
.et-checkrow span{ flex:1; font:400 17px/1.3 var(--et-font); color:var(--app-navy); }

/* ---------- Rejilla de Björck ---------- */
.et-bj-block{ margin-top:16px; }
.et-bj-head{ display:flex; align-items:baseline; gap:9px; margin-bottom:8px; flex-wrap:wrap; }
.et-bj-head b{ font:700 13px/1.2 var(--et-font); color:var(--app-navy); }
.et-bj-head span{ font:400 12px/1.35 var(--et-font); color:var(--app-slate); }
.et-bj-cells{ display:flex; flex-wrap:wrap; gap:9px; }
.et-bj-cell{
  flex:1 1 44%; min-width:132px; min-height:86px;
  background:var(--app-surface); border:0; border-radius:13px; padding:11px 12px;
  box-shadow:var(--app-shadow-card); cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:5px;
  transition:transform .3s var(--app-spring);
}
.et-bj-cell:active{ transform:scale(.96); }
.et-bj-top{ display:flex; align-items:center; gap:7px; }
.et-bj-code{
  height:26px; padding:0 9px; border-radius:7px; color:#fff;
  display:flex; align-items:center; font:800 13px/1 var(--et-font); letter-spacing:.02em;
}
.et-bj-state{ font:600 12px/1.2 var(--et-font); color:var(--app-slate); }
.et-bj-sum{ font:600 13px/1.35 var(--et-font); color:var(--app-navy); }
.et-bj-steps{ font:400 12px/1.2 var(--et-font); color:var(--app-slate); margin-top:auto; }

/* Botón de acceso a la rejilla, sobre la lista de algoritmos */
.et-bj-link{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:14px; border:0; border-radius:14px; cursor:pointer; text-align:left;
  background:var(--app-navy); color:#fff;
  transition:transform .3s var(--app-spring), filter .2s ease;
}
.et-bj-link:active{ transform:scale(.97); filter:brightness(.9); }
.et-bj-link .et-tile{ background:rgba(255,255,255,.14); box-shadow:none; }
.et-bj-link .et-tile svg{ width:19px; height:19px; }
.et-bj-link b{ display:block; font:700 16px/1.3 var(--et-font); }
.et-bj-link span{ display:block; margin-top:2px; font:400 13px/1.4 var(--et-font); color:rgba(255,255,255,.72); }

/* ============================================================
   AAST · TEG6s · CALCULADORAS
   ============================================================ */

/* ---------- Buscador pegajoso (AAST y calculadoras) ---------- */
.et-sticky-search{
  position:sticky; top:0; z-index:6;
  background:var(--app-bg); padding:14px 0 10px; margin:0 0 4px;
}
.et-sticky-search > div{
  display:flex; align-items:center; gap:10px;
  background:var(--app-surface); border-radius:13px; padding:10px 13px;
  box-shadow:0 4px 14px rgba(0,32,92,.09);
}
.et-sticky-search svg{ width:19px; height:19px; color:var(--app-slate); flex-shrink:0; }
.et-sticky-search input{
  flex:1; min-width:0; border:0; background:none; outline:none;
  font:600 19px/1.3 var(--et-font); color:var(--app-navy);
}
.et-sticky-search input::placeholder{ color:var(--app-slate); font-weight:400; }
.et-sticky-search.sm input{ font-size:18px; }

/* ---------- Rejilla de órganos ---------- */
.et-organ-grid{ display:flex; flex-wrap:wrap; gap:9px; }
.et-organ{
  flex:1 1 44%; min-width:140px; min-height:58px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--app-surface); border:0; border-radius:13px; padding:11px 13px;
  box-shadow:var(--app-shadow-card); cursor:pointer; text-align:left;
  transition:transform .3s var(--app-spring);
}
.et-organ:active{ transform:scale(.955); }
.et-organ b{ font:600 16px/1.25 var(--et-font); color:var(--app-navy); }
.et-organ span{ font:700 11px/1 var(--et-font); color:var(--app-teal); flex-shrink:0; }

/* ---------- Fila de lesión ---------- */
.et-lesion{
  display:flex; align-items:flex-start; gap:12px; width:100%;
  padding:12px 14px; border:0; border-bottom:.5px solid var(--app-sep);
  background:none; cursor:pointer; text-align:left;
  transition:background .12s ease;
}
.et-lesion:last-child{ border-bottom:0; }
.et-lesion[aria-pressed="true"]{ background:#eef4fb; }
.et-grade{
  width:44px; height:44px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,32,92,.07); color:var(--app-navy);
  font:800 22px/1 var(--et-font); letter-spacing:-.02em;
}
.et-lesion[aria-pressed="true"] .et-grade{ background:var(--app-navy); color:#fff; }
.et-lesion-main{ flex:1; min-width:0; }
.et-lesion-label{ display:block; font:500 16px/1.4 var(--et-font); color:var(--app-navy); }
.et-lesion-meta{ display:block; margin-top:3px; font:400 12px/1.4 var(--et-font); color:var(--app-slate); }
.et-lesion-warn{
  display:flex; gap:7px; margin-top:6px;
  font:400 12px/1.4 var(--et-font); color:var(--app-amber-text);
}
.et-lesion-warn::before{
  content:""; flex-shrink:0; margin-top:.45em;
  width:6px; height:6px; border-radius:999px; background:var(--app-amber);
}

/* ---------- Barra de grado ---------- */
.et-gradebar{
  position:absolute; left:0; right:0; bottom:0; z-index:8;
  display:flex; align-items:center; gap:12px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(0,24,69,.96);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 -8px 26px rgba(0,32,92,.28);
  animation:etUp .28s var(--app-ease) both;
}
.et-gradebar-box{
  width:50px; height:50px; border-radius:12px; flex-shrink:0;
  background:#fff; color:var(--app-navy);
  display:flex; align-items:center; justify-content:center;
  font:800 24px/1 var(--et-font);
}
.et-gradebar-main{ flex:1; min-width:0; color:#fff; }
.et-gradebar-eyebrow{
  display:block; font:700 10px/1.2 var(--et-font);
  text-transform:uppercase; letter-spacing:.16em; color:rgba(255,255,255,.6);
}
.et-gradebar-name{ display:block; margin-top:2px; font:600 15px/1.25 var(--et-font); }
.et-gradebar-note{ display:block; margin-top:2px; font:400 12px/1.35 var(--et-font); color:#ffd9d8; }
.et-gradebar button{
  flex-shrink:0; min-height:44px; padding:0 18px; border:0; border-radius:12px;
  background:var(--app-red); color:#fff; cursor:pointer;
  font:700 15px/1 var(--et-font);
  transition:transform .3s var(--app-spring);
}
.et-gradebar button:active{ transform:scale(.94); }

/* ---------- Campos (TEG y calculadoras) ---------- */
.et-field{
  background:var(--app-surface); border-radius:14px; padding:13px 14px;
  box-shadow:var(--app-shadow-card); margin-bottom:10px;
}
.et-field-row{ display:flex; align-items:center; gap:12px; }
.et-field-label{ flex:1; min-width:0; }
.et-field-label b{ display:block; font:700 16px/1.3 var(--et-font); color:var(--app-navy); }
.et-field-label span{ display:block; margin-top:2px; font:400 12px/1.4 var(--et-font); color:var(--app-slate); }
.et-field-plain b{ font-weight:400; }
.et-cap{
  display:flex; align-items:baseline; gap:6px; flex-shrink:0;
  background:rgba(0,32,92,.06); border-radius:10px; padding:8px 11px;
}
.et-cap input{
  width:66px; border:0; background:none; outline:none; text-align:right;
  font:700 22px/1.2 var(--et-font); color:var(--app-navy);
}
.et-cap span{ font:600 13px/1 var(--et-font); color:var(--app-slate); }
.et-outrange{
  display:flex; gap:8px; margin-top:10px; padding:9px 11px;
  background:#fff8ec; border-radius:9px;
  font:400 12.5px/1.4 var(--et-font); color:var(--app-amber-text);
}
.et-outrange::before{
  content:""; flex-shrink:0; margin-top:.4em;
  width:6px; height:6px; border-radius:999px; background:var(--app-amber);
}
.et-segstack{ display:flex; flex-direction:column; gap:6px; margin-top:11px; }
.et-segstack button{
  min-height:46px; padding:10px 13px; border:0; border-radius:10px; cursor:pointer;
  background:rgba(0,32,92,.05); color:var(--app-navy); text-align:left;
  font:400 15px/1.35 var(--et-font);
  transition:box-shadow .18s ease, font-weight .18s ease;
}
.et-segstack button[aria-pressed="true"]{ box-shadow:inset 0 0 0 1.5px var(--app-navy); font-weight:600; }
.et-seg-num{ display:flex; gap:6px; margin-top:11px; }
.et-seg-num button{
  flex:1; height:42px; border:0; border-radius:9px; cursor:pointer;
  background:rgba(0,32,92,.05); color:var(--app-navy);
  font:600 17px/1 var(--et-font);
  transition:box-shadow .18s ease;
}
.et-seg-num button[aria-pressed="true"]{ box-shadow:inset 0 0 0 1.5px var(--app-navy); background:#fff; }
.et-legend{
  background:var(--app-info-soft, #e7f4f7); border-radius:12px; padding:12px 14px;
  margin-bottom:12px; font:400 13px/1.5 var(--et-font); color:var(--app-navy);
}

/* ---------- Panel TEG ---------- */
.et-comp{
  display:flex; gap:0; background:var(--app-surface); border-radius:14px;
  overflow:hidden; box-shadow:var(--app-shadow-card); margin-bottom:10px;
}
.et-comp-rail{ width:5px; flex-shrink:0; }
.et-comp-body{ flex:1; min-width:0; padding:13px 14px; }
.et-comp-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.et-comp-name{
  font:700 12px/1.2 var(--et-font); text-transform:uppercase; letter-spacing:.1em;
  color:var(--app-slate);
}
.et-pill{
  flex-shrink:0; padding:3px 9px; border-radius:999px;
  font:700 11px/1.3 var(--et-font); text-transform:uppercase; letter-spacing:.06em;
}
.et-comp-finding{ margin:7px 0 0; font:700 17px/1.3 var(--et-font); }
.et-comp-value{ margin:4px 0 0; font:400 12px/1.4 var(--et-font); color:var(--app-slate); }
.et-comp-sug{
  margin:10px 0 0; padding-top:10px; border-top:.5px solid var(--app-sep);
  font:400 14px/1.5 var(--et-font); color:var(--app-navy);
}
.et-alert-card{ border-radius:14px; padding:13px 15px; margin-bottom:10px; }
.et-alert-card b{ display:block; font:800 16px/1.3 var(--et-font); margin-bottom:4px; }
.et-alert-card p{ margin:0; font:400 14px/1.5 var(--et-font); color:var(--app-navy); }

/* ---------- Resultado de calculadora ---------- */
.et-calc-result{
  background:var(--app-surface); border-radius:16px; overflow:hidden;
  box-shadow:0 10px 28px rgba(0,32,92,.1); text-align:center;
  padding:0 18px 22px; margin-top:18px;
}
.et-calc-band{ height:6px; margin:0 -18px 18px; }
.et-bignum{
  display:flex; align-items:baseline; justify-content:center; gap:7px;
  margin:0 0 10px;
}
.et-bignum b{ font:800 56px/1 var(--et-font); letter-spacing:-.04em; }
.et-bignum span{ font:600 17px/1 var(--et-font); color:var(--app-slate); }
.et-calc-cat{
  display:inline-block; padding:5px 13px; border-radius:999px;
  font:700 15px/1.3 var(--et-font);
}
.et-calc-detail{ margin:12px 0 0; font:400 15px/1.55 var(--et-font); color:var(--app-navy); }
.et-crit{
  margin-top:14px; padding:12px 14px; border-radius:11px; text-align:left;
  background:#fdecea; color:#8f1714; font:600 13px/1.5 var(--et-font);
}
.et-area-pill{
  display:inline-block; margin:16px 0 6px; padding:4px 11px; border-radius:999px;
  background:#e7f4f7; color:var(--app-teal);
  font:700 11px/1.3 var(--et-font); text-transform:uppercase; letter-spacing:.1em;
}
.et-recent{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.et-recent::-webkit-scrollbar{ display:none; }
.et-recent button{
  flex-shrink:0; min-height:44px; padding:0 15px; border:0; border-radius:999px;
  background:var(--app-navy); color:#fff; cursor:pointer;
  font:600 14px/1 var(--et-font);
  transition:transform .3s var(--app-spring);
}
.et-recent button:active{ transform:scale(.95); }

/* ---------- Casos ---------- */
.et-case-top{ display:flex; align-items:center; gap:8px; }
.et-pill-active{
  flex-shrink:0; padding:2px 8px; border-radius:999px;
  background:#fdecea; color:var(--app-red);
  font:700 10px/1.4 var(--et-font); text-transform:uppercase; letter-spacing:.08em;
}
.et-case-prev{
  display:block; margin-top:4px;
  font:400 13px/1.4 var(--et-font); color:var(--app-navy);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.et-dot{
  width:9px; height:9px; border-radius:999px; flex-shrink:0; margin-top:7px;
}
.et-entry-tool{
  flex:1; font:700 11px/1.3 var(--et-font);
  text-transform:uppercase; letter-spacing:.12em; color:var(--app-slate);
}
.et-entry-time{
  flex-shrink:0; font:400 12px/1.3 var(--et-font); color:var(--app-slate);
  font-variant-numeric:tabular-nums;
}
.et-entry-title{ display:block; margin-top:3px; font:600 16px/1.3 var(--et-font); }
.et-input{
  width:100%; box-sizing:border-box;
  background:var(--app-surface); border:0; border-radius:12px;
  padding:14px 15px; outline:none;
  font:400 17px/1.3 var(--et-font); color:var(--app-navy);
  box-shadow:var(--app-shadow-card);
}
.et-input::placeholder{ color:rgba(0,32,92,.35); }
.et-row[disabled]{ cursor:default; }

/* ---------- Guías ---------- */
.et-num, .et-code{
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--app-navy); color:#fff; border-radius:7px;
}
.et-num{ width:26px; height:26px; font:700 13px/1 var(--et-font); }
.et-code{ min-width:62px; height:26px; padding:0 8px; font:700 12px/1 var(--et-font); }
/* El tile navy necesita su icono en blanco: .et-tile-sm svg lo pinta navy. */
.et-tile-on svg{ color:#fff; }

/* ---------- Aviso de dato pendiente (no bloqueante) ---------- */
.et-ask{
  background:var(--app-surface); border-radius:14px; padding:14px;
  box-shadow:var(--app-shadow-card);
  border-left:3px solid var(--app-teal);
  margin-top:18px;
}
.et-ask p{ margin:0 0 12px; font:400 14px/1.5 var(--et-font); color:var(--app-navy); }
.et-ask-actions{ display:flex; gap:8px; }
.et-ask-actions button{
  min-height:40px; padding:0 16px; border:0; border-radius:10px; cursor:pointer;
  background:var(--app-navy); color:#fff;
  font:600 14px/1 var(--et-font);
  transition:transform .3s var(--app-spring);
}
.et-ask-actions button:active{ transform:scale(.96); }
.et-ask-actions button.ghost{ background:none; color:var(--app-slate); }
.et-pill-soon{
  flex-shrink:0; padding:3px 9px; border-radius:999px;
  background:rgba(0,32,92,.07); color:var(--app-slate);
  font:700 10px/1.4 var(--et-font); text-transform:uppercase; letter-spacing:.08em;
}

/* ---------- Compartir / imprimir un caso ---------- */
.et-share{ display:flex; gap:9px; margin-top:18px; }
.et-share button{
  flex:1; min-height:48px; border:0; border-radius:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--app-surface); color:var(--app-teal);
  box-shadow:var(--app-shadow-card);
  font:600 15px/1 var(--et-font);
  transition:transform .3s var(--app-spring);
}
.et-share button:active{ transform:scale(.96); }
.et-share svg{ width:18px; height:18px; }

/* ---------- Impresión: solo el registro del caso ----------
   Desde la hoja de impresión, el teléfono ofrece "Guardar en Archivos" como
   PDF. Así no hace falta generar el PDF ni cargar una librería que dejaría de
   funcionar sin conexión. */
/* ---------- Foco visible ----------
   No había ninguna regla de foco en toda la app, y cuatro inputs quitaban el
   del navegador sin poner nada. Con teclado o con un conmutador no se sabía
   dónde se estaba. :focus-visible no se le aparece a quien toca la pantalla. */
.et-app a:focus-visible,
.et-app button:focus-visible,
.et-app input:focus-visible,
.et-app textarea:focus-visible{
  outline:2.5px solid var(--app-teal);
  outline-offset:2px;
  border-radius:8px;
}

@media print{
  /* Lo que se imprime es un documento clínico: fuera todo control. Los campos
     de escribir y el interruptor salían impresos dentro de la evolución. */
  .et-strip, .et-ribbon, .et-nav, .et-tabs, .et-share, .et-btn, .et-btn-text,
  .et-escribir, .et-marcar, .et-search, .et-sticky-search, .et-sticky-wrap,
  #layers, .et-note{ display:none !important; }
  html, body, .et-app{ height:auto !important; overflow:visible !important; background:#fff !important; }
  .et-app{ max-width:none !important; }
  .et-scroll{ overflow:visible !important; }
  .et-pad{ padding:0 !important; }
  .et-group{ box-shadow:none !important; border:1px solid #ccd3e2; break-inside:avoid; }
  .et-row{ break-inside:avoid; }
  .et-lede{ color:#000 !important; }
  /* Encabezado impreso: el nombre del caso no se ve porque vivía en la nav bar. */
  .et-scroll .et-pad::before{
    content:attr(data-print-title);
    display:block; margin:0 0 4px;
    font:800 20px/1.25 var(--et-font); color:#00205C;
  }
}
.et-textarea{
  width:100%; box-sizing:border-box; min-height:52vh; resize:none;
  background:var(--app-surface); border:0; border-radius:12px; padding:14px;
  box-shadow:var(--app-shadow-card);
  font:400 14px/1.6 var(--et-font); color:var(--app-navy);
  -webkit-user-select:text; user-select:text;
}

/* ============================================================
   CAMAS — capa compartida
   Deliberadamente distinta de Casos: aquí lo que escribes lo ve tu equipo.
   El teal marca lo compartido; el navy sigue siendo lo propio.
   ============================================================ */
.et-aviso{
  margin-top:16px; padding:13px 15px; border-radius:12px;
  background:var(--app-surface); border-left:3px solid var(--app-teal);
  box-shadow:var(--app-shadow-card);
  font:400 13.5px/1.5 var(--et-font); color:var(--app-navy);
}
.et-aviso.amber{ border-left-color:var(--app-amber); background:#fff8ec; color:var(--app-amber-text); }

.et-camas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.et-cama{
  flex:1 1 44%; min-width:140px; min-height:74px;
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  background:var(--app-surface); border:0; border-left:3px solid rgba(0,32,92,.14);
  border-radius:13px; padding:12px 14px; cursor:pointer; text-align:left;
  box-shadow:var(--app-shadow-card);
  transition:transform .3s var(--app-spring);
}
.et-cama:active{ transform:scale(.96); }
.et-cama.ocupada{ border-left-color:var(--app-teal); }
.et-cama-et{ font:700 12px/1.2 var(--et-font); text-transform:uppercase; letter-spacing:.1em; color:var(--app-slate); }
.et-cama-p{ font:600 17px/1.3 var(--et-font); color:var(--app-navy); }
.et-cama:not(.ocupada) .et-cama-p{ color:rgba(0,32,92,.35); font-weight:400; }

.et-codigo{
  font:800 30px/1 var(--et-font); letter-spacing:.22em; color:var(--app-navy);
  font-variant-numeric:tabular-nums;
}

/* Indicaciones: lo que falta por hacer */
.et-ind{ display:flex; gap:11px; align-items:flex-start; padding:10px 14px; }
.et-ind + .et-ind{ border-top:.5px solid var(--app-sep); }
.et-ind.hecha .et-ind-txt{ color:var(--app-slate); text-decoration:line-through; }
.et-ind-check{
  flex-shrink:0; width:24px; height:24px; margin-top:1px; border-radius:7px; cursor:pointer;
  border:1.5px solid var(--app-teal); background:none; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.et-ind-check svg{ width:14px; height:14px; }
.et-ind.hecha .et-ind-check{ background:var(--app-green); border-color:var(--app-green); cursor:default; }
.et-ind-main{ flex:1; min-width:0; }
.et-ind-txt{ display:block; font:400 16px/1.4 var(--et-font); color:var(--app-navy); }
.et-ind-meta{ display:block; margin-top:3px; font:400 12px/1.4 var(--et-font); color:var(--app-slate); }

/* Evolución: se lee de arriba abajo, como en papel */
.et-evo{ display:flex; gap:12px; padding:11px 0; border-bottom:.5px solid var(--app-sep); }
.et-evo:last-of-type{ border-bottom:0; }
.et-evo-hora{
  flex-shrink:0; width:44px; font:600 13px/1.5 var(--et-font); color:var(--app-slate);
  font-variant-numeric:tabular-nums;
}
.et-evo-main{ flex:1; min-width:0; }
.et-evo-txt{ display:block; font:400 15px/1.55 var(--et-font); color:var(--app-navy); }
.et-evo-det{ display:block; margin-top:2px; font:400 13px/1.45 var(--et-font); color:var(--app-slate); }
.et-evo-firma{ display:block; margin-top:3px; font:400 12px/1.4 var(--et-font); color:var(--app-slate); }
/* Lo que escribió la app sola se distingue de lo que escribió una persona. */
.et-evo.calc .et-evo-main{
  background:#eef1f7; border-radius:10px; padding:9px 11px; margin:-3px 0;
}
.et-evo-tool{
  display:block; font:700 10.5px/1.3 var(--et-font);
  text-transform:uppercase; letter-spacing:.12em; color:var(--app-teal); margin-bottom:2px;
}

/* Escrito pero todavía no confirmado por el servidor. Se ve, porque hacerlo
   desaparecer hasta que vuelva la red es lo que hace dudar y escribir dos veces. */
.et-evo.pendiente, .et-ind.pendiente{ opacity:.62; }
.et-evo.pendiente .et-evo-firma, .et-ind.pendiente .et-ind-meta{ font-style:italic; }

.et-escribir{ display:flex; gap:8px; align-items:stretch; margin-top:10px; }
.et-escribir .et-input{ flex:1; }
.et-escribir button{
  flex-shrink:0; width:50px; border:0; border-radius:12px; cursor:pointer;
  background:var(--app-navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s var(--app-spring);
}
.et-escribir button:active{ transform:scale(.94); }

/* Interruptor "esto es un pendiente": se escribe primero y se clasifica
   después. Apagado por defecto — la mayoría de lo que se escribe es evolución. */
.et-marcar{
  display:flex; align-items:center; gap:10px; width:100%;
  margin:10px 0 0; padding:7px 2px; text-align:left;
  background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent;
  font:600 14px/1.3 var(--et-font); color:var(--app-slate);
}
.et-marcar > span:last-child{ flex:1; min-width:0; }
.et-marcar.on{ color:var(--app-navy); }
.et-marcar-caja{
  flex-shrink:0; width:21px; height:21px; border-radius:6px;
  border:1.5px solid var(--app-sep); background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, border-color .15s ease;
}
.et-marcar-caja svg{ width:12px; height:12px; color:#fff; opacity:0; }
.et-marcar.on .et-marcar-caja{ background:var(--app-teal); border-color:var(--app-teal); }
.et-marcar.on .et-marcar-caja svg{ opacity:1; }
.et-escribir button svg{ width:10px; height:16px; color:#fff; }