/* ════════════════════════════════════════════════════════════════
   SO|LU|CH · Panel de seguimiento de pacientes
   Identidad: tinta profunda + teal de marca + ámbar para lo vencido
   ════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:light;
  /* Marca */
  --marca:#00997f;
  --marca-fuerte:#007a66;
  --marca-suave:#e2f4f0;
  --tinta-marca:#0b1620;

  /* Superficies */
  --fondo:#f2f5f7;
  --papel:#ffffff;
  --papel-2:#f8fafb;
  --linea:#e4e9ee;
  --linea-fuerte:#d3dbe3;

  /* Texto */
  --tinta:#0f1b25;
  --tinta-media:#43535f;
  --tinta-suave:#6b7a87;

  /* Semánticos */
  --alerta:#b45309;
  --alerta-suave:#fdf1e3;
  --azul:#1d4ed8;
  --azul-suave:#e8eefc;
  --rojo:#b3261e;
  --rojo-suave:#fdeceb;
  --violeta:#5b46b0;
  --violeta-suave:#efecfb;
  --ambar:#8a6300;
  --ambar-suave:#fdf4dc;
  --verde:#15803d;

  /* Menú lateral */
  --nav-fondo:#0b1620;
  --nav-texto:#94a6b4;
  --nav-texto-vivo:#ffffff;
  --nav-activo:#16242f;
  --nav-linea:#1b2b38;

  --r:12px;
  --r-s:8px;
  --sombra:0 1px 2px rgba(11,22,32,.05), 0 4px 16px rgba(11,22,32,.04);
  --sombra-alta:0 20px 50px rgba(11,22,32,.22);
  --ancho-nav:236px;
  --transicion:.16s cubic-bezier(.4,0,.2,1);
}

:root[data-tema="oscuro"]{
  color-scheme:dark;
  --marca:#2dd4b0;
  --marca-fuerte:#4ee0c0;
  --marca-suave:#10312b;
  --fondo:#0a1219;
  --papel:#111d26;
  --papel-2:#16232d;
  --linea:#22323e;
  --linea-fuerte:#2e4150;
  --tinta:#e8eef3;
  --tinta-media:#a9b8c4;
  --tinta-suave:#7e8f9c;
  --alerta:#f0a65a;
  --alerta-suave:#33240f;
  --azul:#7ba7f5;
  --azul-suave:#16263f;
  --rojo:#f28b82;
  --rojo-suave:#3a1c1a;
  --violeta:#b6a5f0;
  --violeta-suave:#241f3d;
  --ambar:#e8c46a;
  --ambar-suave:#31280f;
  --verde:#5dd48b;
  --nav-fondo:#070e14;
  --nav-activo:#14222c;
  --nav-linea:#1a2833;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.28);
  --sombra-alta:0 20px 50px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--fondo);color:var(--tinta);
  font:14px/1.55 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background var(--transicion),color var(--transicion);
}
.sprite{display:none}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em}

/* ── Botones ─────────────────────────────────────────────── */
button{
  font:inherit;cursor:pointer;border-radius:var(--r-s);
  border:1px solid var(--linea-fuerte);background:var(--papel);color:var(--tinta);
  padding:7px 13px;font-weight:500;transition:var(--transicion);
}
button:hover{background:var(--papel-2);border-color:var(--tinta-suave)}
button:active{transform:translateY(.5px)}
button:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
button.primario{background:var(--marca);border-color:var(--marca);color:#fff;font-weight:600}
button.primario:hover{background:var(--marca-fuerte);border-color:var(--marca-fuerte)}
:root[data-tema="oscuro"] button.primario{color:#04231d}
button.sutil{background:transparent;border-color:transparent;color:var(--tinta-suave)}
button.sutil:hover{background:var(--papel-2);color:var(--tinta);border-color:transparent}
button.ancho{width:100%;justify-content:center}
button:disabled{opacity:.45;cursor:not-allowed}
button.icono{padding:7px;border-color:transparent;background:transparent;color:var(--nav-texto)}

/* ── Estructura ──────────────────────────────────────────── */
.app{display:grid;grid-template-columns:var(--ancho-nav) minmax(0,1fr);min-height:100vh}

.nav{
  background:var(--nav-fondo);color:var(--nav-texto);
  display:flex;flex-direction:column;gap:6px;padding:18px 14px 14px;
  position:sticky;top:0;height:100vh;
}
.nav-marca{padding:0 8px 14px}
.logo{display:block;font-weight:800;letter-spacing:.14em;font-size:15px;color:var(--nav-texto-vivo)}
.logo i{color:var(--marca);font-style:normal;margin:0 1px}
.nav-marca small{color:#6b7f8e;font-size:11px;letter-spacing:.02em}

.nav-tenant{
  display:flex;align-items:center;gap:10px;padding:10px;margin-bottom:10px;
  background:var(--nav-activo);border:1px solid var(--nav-linea);border-radius:10px;
}
.inicial{
  width:30px;height:30px;border-radius:8px;flex:none;
  background:linear-gradient(140deg,var(--marca),#0b6b58);
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;
}
.nav-tenant strong{display:block;color:var(--nav-texto-vivo);font-size:13px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.nav-tenant small{font-size:11px;color:#6b7f8e}

.nav-lista{display:flex;flex-direction:column;gap:2px;flex:1}
.nav-item{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:transparent;border:0;border-radius:var(--r-s);padding:9px 10px;
  color:var(--nav-texto);font-weight:500;font-size:13.5px;position:relative;
}
.nav-item:hover{background:var(--nav-activo);color:var(--nav-texto-vivo)}
.nav-item.activa{background:var(--nav-activo);color:var(--nav-texto-vivo);font-weight:600}
.nav-item.activa::before{
  content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;
  background:var(--marca);border-radius:0 3px 3px 0;
}
.nav-item .badge{
  margin-left:auto;font-style:normal;font-size:11px;font-weight:700;
  background:var(--alerta);color:#fff;border-radius:999px;padding:1px 7px;min-width:20px;text-align:center;
}
.nav-item .badge.cero{background:#243544;color:#7c8f9e}
.nav-item > .punto{margin-left:auto}

.nav-pie{display:flex;align-items:center;gap:6px;border-top:1px solid var(--nav-linea);padding-top:10px}
.estado-wa{
  flex:1;display:flex;align-items:center;gap:8px;background:transparent;border:0;
  color:var(--nav-texto);font-size:12px;padding:6px 8px;border-radius:var(--r-s);text-align:left;
}
.estado-wa:hover{background:var(--nav-activo);color:var(--nav-texto-vivo)}
.punto{width:7px;height:7px;border-radius:50%;background:#3d5162;flex:none;font-style:normal}
.ok .punto,.punto.ok{background:#22c55e;box-shadow:0 0 0 3px #22c55e26}
.espera .punto,.punto.espera{background:#eab308;animation:latido 1.3s ease-in-out infinite}
.mal .punto,.punto.mal{background:#ef4444}
@keyframes latido{50%{opacity:.25}}
.btn-tema svg{width:16px;height:16px}
#btn-tema:hover{color:var(--nav-texto-vivo);background:var(--nav-activo)}
.en-oscuro{display:none}
:root[data-tema="oscuro"] .en-claro{display:none}
:root[data-tema="oscuro"] .en-oscuro{display:block}

.lienzo{display:flex;flex-direction:column;min-width:0}

/* ── Cabecera ────────────────────────────────────────────── */
.top{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:20px 26px 16px;background:var(--papel);border-bottom:1px solid var(--linea);
  position:sticky;top:0;z-index:20;
}
.top-titulo h1{font-size:19px}
.top-titulo p{margin:2px 0 0;color:var(--tinta-suave);font-size:12.5px}
.top-controles{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.pista{width:38px;height:22px;border-radius:999px;background:var(--linea-fuerte);
  position:relative;transition:var(--transicion);flex:none}
.pista::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:var(--transicion);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked + .pista{background:var(--marca)}
.switch input:checked + .pista::after{transform:translateX(16px)}
.switch input:focus-visible + .pista{outline:2px solid var(--marca);outline-offset:2px}
.switch-texto{font-weight:600;font-size:13px;white-space:nowrap}

.reloj{display:flex;align-items:center;gap:8px}
.reloj-fecha{color:var(--tinta-suave);font-size:12px;white-space:nowrap}
.reloj-botones{display:flex;background:var(--papel-2);border:1px solid var(--linea);border-radius:var(--r-s);overflow:hidden}
.reloj-botones button{border:0;border-radius:0;background:transparent;padding:5px 9px;
  font-size:12px;font-variant-numeric:tabular-nums;color:var(--tinta-media)}
.reloj-botones button + button{border-left:1px solid var(--linea)}
.reloj-botones button:hover{background:var(--marca-suave);color:var(--marca-fuerte)}
.offset{font-size:11.5px;font-weight:700;color:var(--alerta);background:var(--alerta-suave);
  padding:3px 9px;border-radius:999px;white-space:nowrap}

/* ── Cuerpo ──────────────────────────────────────────────── */
.cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;padding:20px 26px 40px;align-items:start;flex:1}
.col-principal{min-width:0}
.col-actividad{position:sticky;top:104px}
.seccion{display:none;animation:entrar .2s ease}
.seccion.activa{display:block}
@keyframes entrar{from{opacity:0;transform:translateY(5px)}}

/* ── KPIs ────────────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:18px}
.kpi{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  padding:13px 15px;box-shadow:var(--sombra)}
.kpi b{display:block;font-size:23px;line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi span{color:var(--tinta-suave);font-size:11.5px}
.kpi.destaca{border-color:color-mix(in srgb,var(--alerta) 35%,var(--linea))}
.kpi.destaca b{color:var(--alerta)}

/* ── Tarjetas de contenido ───────────────────────────────── */
.item{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  padding:15px 17px;margin-bottom:11px;box-shadow:var(--sombra);
  transition:border-color var(--transicion),box-shadow var(--transicion);
  animation:aparecer .28s ease}
.item:hover{border-color:var(--linea-fuerte)}
@keyframes aparecer{from{opacity:0;transform:translateY(-6px)}}
.item.saliendo{border-color:var(--marca);box-shadow:0 0 0 3px var(--marca-suave)}
.item-cabeza{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap}
.item-cabeza h4{font-size:14.5px}
.item-cabeza .tel{color:var(--tinta-suave);font-size:12.5px}
.item-cabeza .acciones{margin-left:auto;display:flex;gap:6px;align-items:center}
.burbuja{background:var(--papel-2);border:1px solid var(--linea);border-left:3px solid var(--marca);
  border-radius:var(--r-s);padding:10px 13px;font-size:13px;color:var(--tinta-media);white-space:pre-wrap}
.meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:9px;color:var(--tinta-suave);font-size:11.5px}
.meta b{color:var(--tinta-media);font-weight:600}

.etq{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
.etq.cliente{background:var(--marca-suave);color:var(--marca-fuerte)}
.etq.prospecto{background:var(--azul-suave);color:var(--azul)}
.etq.vencida{background:var(--alerta-suave);color:var(--alerta)}
.etq.auto{background:var(--violeta-suave);color:var(--violeta)}
.etq.error{background:var(--rojo-suave);color:var(--rojo)}
.etq.sim{background:var(--ambar-suave);color:var(--ambar)}
/* Bloque de plantilla de Meta en el formulario de reglas: plegado, para que
   quien solo quiere una regla de demo no lo vea. */
.bloque-api{border:1px solid var(--linea);border-radius:var(--r-s);padding:0 12px;margin:4px 0 2px}
.bloque-api>summary{cursor:pointer;padding:10px 0;font-size:13px;font-weight:600;color:var(--tinta)}
.bloque-api>summary .sub{font-weight:400}
.bloque-api[open]{padding-bottom:10px;background:var(--papel-2)}
.bloque-api code{font-size:11.5px;background:var(--papel);padding:1px 5px;border-radius:4px;
  border:1px solid var(--linea)}

/* Lo que escribe el paciente. Se distingue de lo que sale para que la
   conversacion se lea de un vistazo, sin necesitar una vista aparte. */
.etq.entrante{background:var(--azul-suave);color:var(--azul)}
tr.entrante>td:first-child{box-shadow:inset 3px 0 0 var(--azul)}
.asunto{color:var(--tinta);font-weight:500}
.burbuja.suya{border-left-color:var(--azul)}

/* Conversaciones: el hilo con una persona, en burbujas. Una lista plana de
   mensajes sueltos deja de servir al segundo paciente. */
.banda-cola{margin-bottom:10px;padding:9px 14px;border-radius:var(--r-s);font-size:13px;
  background:var(--ambar-suave);color:var(--ambar);border:1px solid transparent}
.banda-cola b{font-weight:700}
.etq.pendiente{background:var(--ambar-suave);color:var(--ambar)}
tr.espera-respuesta>td:first-child{box-shadow:inset 3px 0 0 var(--ambar)}
.reloj-ventana{color:var(--ambar);font-variant-numeric:tabular-nums}
.mal{color:var(--rojo)}

.hilo{display:flex;flex-direction:column;gap:9px;max-height:420px;overflow-y:auto;
  padding:2px 2px 6px}
.msg{display:flex;flex-direction:column;max-width:78%}
.msg.suyo{align-self:flex-start}
.msg.nuestro{align-self:flex-end;align-items:flex-end}
.msg.nuestro .burbuja{border-left:none;border-right:3px solid var(--marca)}
.msg-pie{margin-top:3px;font-size:11px;color:var(--tinta-suave)}
/* El archivo que mandó el paciente, dentro de su burbuja. Un comprobante se
   tiene que poder leer sin abrirlo; el tope es para que una foto vertical no
   empuje el resto del hilo fuera de pantalla. */
.adjunto{display:block}
.adjunto img{display:block;max-width:100%;max-height:300px;border-radius:var(--r-s);border:1px solid var(--linea)}
.pie-adjunto{display:block;margin-top:7px}
.adjunto-doc{display:inline-block;font-weight:600;color:var(--marca);text-decoration:none}
.adjunto-doc:hover{text-decoration:underline}
.adjunto-no{color:var(--tinta-suave);font-size:12px;font-style:italic}

/* Pestañas de la bandeja. Sin ellas la lista crece para siempre y todo parece
   igual de urgente. */
.pestanas{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:12px;
  border-bottom:1px solid var(--linea)}
.pestana{padding:8px 13px;font-size:13px;font-weight:600;color:var(--tinta-suave);
  background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;margin-bottom:-1px}
.pestana:hover{color:var(--tinta)}
.pestana.activa{color:var(--marca-fuerte);border-bottom-color:var(--marca)}
.pestana .cuenta{font-style:normal;font-size:11px;font-weight:700;padding:1px 6px;
  border-radius:999px;background:var(--papel-2);color:var(--tinta-media)}
.pestana.activa .cuenta{background:var(--marca-suave);color:var(--marca-fuerte)}
.pestana.urgente .cuenta{background:var(--ambar-suave);color:var(--ambar)}

.etq.hecha{background:var(--papel-2);color:var(--tinta-suave)}
tr.resuelta>td{opacity:.62}
tr.resuelta>td:last-child{opacity:1}
.duenio.hecha{background:var(--papel-2);color:var(--tinta-suave)}

/* Afinar la vista: rango de fechas y etiquetas. A los tres meses son cientos de
   conversaciones y sin esto no se encuentra la de la semana pasada. */
.afinar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.grupo-rango,.grupo-tags{display:flex;gap:5px;flex-wrap:wrap}
.chip{padding:4px 11px;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;
  border:1px solid var(--linea);background:var(--papel);color:var(--tinta-media);
  display:inline-flex;align-items:center;gap:5px}
.chip:hover{border-color:var(--linea-fuerte);color:var(--tinta)}
.chip.activo{background:var(--marca-suave);border-color:transparent;color:var(--marca-fuerte)}
.chip .cuenta{font-style:normal;font-size:10.5px;font-weight:700;opacity:.7}
.chip.quitar{color:var(--tinta-suave)}
.grupo-tags{padding-left:14px;border-left:1px solid var(--linea)}

/* Etiquetas que salen solas de lo que el paciente eligió en el menú. */
.etq.tag{font-weight:600}
.etq.tag.azul{background:var(--azul-suave);color:var(--azul)}
.etq.tag.violeta{background:var(--violeta-suave);color:var(--violeta)}
.etq.tag.marca{background:var(--marca-suave);color:var(--marca-fuerte)}
.etq.tag.ambar{background:var(--ambar-suave);color:var(--ambar)}
.etq.tag.rojo{background:var(--rojo-suave);color:var(--rojo)}
.chip.tag.azul{color:var(--azul)} .chip.tag.violeta{color:var(--violeta)}
.chip.tag.marca{color:var(--marca-fuerte)} .chip.tag.ambar{color:var(--ambar)}
.chip.tag.rojo{color:var(--rojo)}

.ver-mas{display:block;width:100%;margin-top:10px;padding:11px;font-size:13px;font-weight:600;
  cursor:pointer;border:1px dashed var(--linea-fuerte);border-radius:var(--r-s);
  background:var(--papel);color:var(--tinta-media)}
.ver-mas:hover{border-color:var(--marca);color:var(--marca-fuerte)}
.ver-mas .sub{display:inline;margin-left:6px;font-weight:400}

/* Quién atiende cada conversación. */
.etq.mia{background:var(--marca-suave);color:var(--marca-fuerte)}
.etq.ajena{background:var(--violeta-suave);color:var(--violeta)}
.duenio{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;
  padding:9px 12px;border-radius:var(--r-s);font-size:12.5px;border:1px solid var(--linea)}
.duenio.mia{background:var(--marca-suave);color:var(--marca-fuerte);border-color:transparent}
.duenio.ajena{background:var(--violeta-suave);color:var(--violeta);border-color:transparent}
.duenio.libre{background:var(--papel-2);color:var(--tinta-media)}
.duenio button{margin-left:auto}

/* Cuadro de respuesta: solo aparece al abrir un mensaje recibido. */
.responder{margin-top:10px}
.responder textarea{width:100%;box-sizing:border-box;padding:9px 11px;font:inherit;font-size:13px;
  color:var(--tinta);background:var(--papel);border:1px solid var(--linea-fuerte);
  border-radius:var(--r-s);resize:vertical;min-height:44px}
.responder textarea:focus{outline:none;border-color:var(--marca)}
.responder-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;flex-wrap:wrap}
.nota-respuesta{margin-top:10px;padding:9px 12px;font-size:12.5px;color:var(--tinta-suave);
  background:var(--papel-2);border:1px dashed var(--linea-fuerte);border-radius:var(--r-s)}

/* Mensaje frenado: sigue en la agenda y se puede enviar a mano, pero no sale solo. */
.etq.espera{background:var(--ambar-suave);color:var(--ambar)}
tr.retenida>td{opacity:.62}
tr.retenida>td:last-child{opacity:1}

/* ── Tabla ───────────────────────────────────────────────── */
.tabla-scroll{overflow-x:auto;background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--r);box-shadow:var(--sombra)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 15px;border-bottom:1px solid var(--linea);white-space:nowrap}
th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-suave);
  background:var(--papel-2);font-weight:600;position:sticky;top:0}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--transicion)}
tbody tr:hover{background:var(--papel-2)}
td .sub{color:var(--tinta-suave);font-size:11.5px}
td .urgente{color:var(--alerta);font-weight:600}
.borrar{border:0;background:none;color:var(--linea-fuerte);padding:3px 7px;line-height:1}
.borrar:hover{color:var(--rojo);background:var(--rojo-suave)}

/* ── Reglas ──────────────────────────────────────────────── */
.regla-fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.regla-fila b{font-size:14px}
.regla-fila .tel{color:var(--tinta-suave);font-size:12.5px}
input,select,textarea{
  font:inherit;padding:7px 10px;border:1px solid var(--linea-fuerte);border-radius:var(--r-s);
  background:var(--papel);color:var(--tinta);width:100%;transition:var(--transicion)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--marca);
  box-shadow:0 0 0 3px var(--marca-suave)}
.regla-fila input[type=number]{width:78px;text-align:center;font-variant-numeric:tabular-nums}
textarea{min-height:76px;resize:vertical;margin-top:9px;font-size:13px;line-height:1.5}

/* ── Conexión ────────────────────────────────────────────── */
.conexion-grid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;align-items:start}
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--sombra)}
.tarjeta h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tinta-suave);margin-bottom:10px}
.detalle{font-size:12.5px;color:var(--tinta-media);margin:0 0 12px}
.simulando{display:flex;align-items:center;gap:9px;background:var(--ambar-suave);
  color:var(--ambar);border-radius:var(--r-s);padding:10px 12px;font-size:12.5px;font-weight:500}
.simulando::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.qr{text-align:center;margin-bottom:12px}
.qr img{width:100%;max-width:280px;border:1px solid var(--linea);border-radius:var(--r-s);
  background:#fff;padding:6px}
.codigo{text-align:center;margin-bottom:12px}
.codigo span{display:block;font:700 26px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.18em;background:var(--marca-suave);color:var(--marca-fuerte);
  border-radius:var(--r-s);padding:14px 8px;margin-bottom:8px;user-select:all}
.codigo small{color:var(--tinta-suave);font-size:11.5px;display:block}
.progreso{height:6px;background:var(--linea);border-radius:999px;overflow:hidden;margin-bottom:12px}
.progreso div{height:100%;background:var(--marca);border-radius:999px;transition:width .35s ease}
#wa-acciones{display:flex;flex-direction:column;gap:7px}
#wa-acciones:empty{display:none}
.pie-tarjeta{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--linea)}
.pie-tarjeta button{font-size:12.5px;padding:5px 9px}
.instrucciones ol{margin:0;padding-left:18px;font-size:13px;color:var(--tinta-media);line-height:1.7}
.instrucciones li{margin-bottom:7px}
.instrucciones .nota{margin:12px 0 0;padding:10px 12px;background:var(--ambar-suave);
  color:var(--ambar);border-radius:var(--r-s);font-size:12.5px}

/* ── Actividad ───────────────────────────────────────────── */
.actividad{display:flex;flex-direction:column}
.log{list-style:none;margin:0;padding:0;min-height:180px;max-height:min(60vh,460px);
  overflow-y:auto;font-size:12.5px}
.log li{padding:7px 0;border-bottom:1px dashed var(--linea);color:var(--tinta-media);
  animation:aparecer .28s ease;line-height:1.45}
.log li:last-child{border-bottom:0}
.log li time{color:var(--tinta-suave);font-variant-numeric:tabular-nums;
  margin-right:7px;font-size:11px}
.log .vacio{color:var(--tinta-suave)}

/* ── Diálogos y avisos ───────────────────────────────────── */
dialog{border:0;border-radius:14px;padding:24px;box-shadow:var(--sombra-alta);
  width:min(430px,92vw);background:var(--papel);color:var(--tinta)}
dialog::backdrop{background:rgba(8,16,24,.5);backdrop-filter:blur(2px)}
dialog h3{margin-bottom:6px;font-size:16px}
dialog label{display:block;margin-bottom:12px;font-size:12px;color:var(--tinta-suave);font-weight:500}
dialog input,dialog select{margin-top:5px;color:var(--tinta)}
dialog .ayuda{margin:0 0 16px;color:var(--tinta-suave);font-size:12.5px}
dialog .acciones{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}

.aviso{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--tinta-marca);color:#fff;padding:11px 20px;border-radius:999px;
  font-size:13px;font-weight:500;box-shadow:var(--sombra-alta);z-index:60;
  animation:subir .25s ease}
:root[data-tema="oscuro"] .aviso{background:var(--papel-2);border:1px solid var(--linea-fuerte)}
@keyframes subir{from{opacity:0;transform:translate(-50%,10px)}}
.aviso.mal{background:var(--rojo);color:#fff}
.oculto{display:none!important}
.vaciar{text-align:center;color:var(--tinta-suave);padding:44px 24px;background:var(--papel);
  border:1px dashed var(--linea-fuerte);border-radius:var(--r);font-size:13px;line-height:1.7}
.vaciar b{color:var(--tinta-media)}

/* ── Navegación móvil ────────────────────────────────────── */
.nav-movil{display:none}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:1180px){
  .cuerpo{grid-template-columns:minmax(0,1fr)}
  .col-actividad{position:static}
  .log{max-height:220px}
  .conexion-grid{grid-template-columns:minmax(0,1fr)}
  .kpis{grid-template-columns:repeat(5,1fr)}
}
@media(max-width:900px){
  :root{--ancho-nav:64px}
  .nav{padding:16px 10px 14px;align-items:center}
  .nav-marca small,.nav-tenant div,.nav-item span,.estado-wa span{display:none}
  .nav-marca{padding:0 0 12px}
  .logo{font-size:10px;letter-spacing:.06em}
  .nav-tenant{justify-content:center;padding:6px}
  .nav-item{justify-content:center;padding:10px 0}
  .nav-item.activa::before{left:-10px}
  .nav-item .badge{position:absolute;top:3px;right:6px;margin:0;padding:0 5px;font-size:10px;min-width:16px}
  .nav-pie{flex-direction:column}
  .estado-wa{flex:none;padding:6px}
  .kpis{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
  .app{grid-template-columns:1fr}
  .nav{display:none}
  .nav-movil{
    display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
    position:fixed;bottom:0;left:0;right:0;z-index:40;
    background:var(--papel);border-top:1px solid var(--linea);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .nav-movil .nav-item{
    flex-direction:column;gap:3px;align-items:center;justify-content:center;
    color:var(--tinta-suave);font-size:10.5px;padding:6px 2px;font-weight:500;
  }
  .nav-movil .nav-item span{display:block}
  .nav-movil .nav-item.activa{color:var(--marca);background:transparent;font-weight:600}
  .nav-movil .nav-item.activa::before{display:none}
  .nav-movil .nav-item .badge{position:absolute;top:0;right:22%;margin:0;padding:0 5px;font-size:9.5px;min-width:15px}
  .top{padding:14px 16px 12px;position:static}
  .top-titulo h1{font-size:17px}
  .top-controles{gap:10px;width:100%}
  .reloj{flex:1;justify-content:flex-start}
  .reloj-fecha{display:none}
  #btn-paciente{margin-left:auto}
  .cuerpo{padding:14px 16px 90px;gap:14px}
  .log{min-height:0}
  .kpis{grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px}
  .kpi{padding:9px 10px}
  .kpi b{font-size:18px}
  .kpi span{font-size:10.5px;display:block;line-height:1.25}
  .item{padding:13px 14px}
  .item-cabeza .acciones{margin-left:0;width:100%;margin-top:4px}
  .item-cabeza .acciones button{width:100%}
  .meta{gap:10px}
  th,td{padding:9px 12px}
  .codigo span{font-size:22px;letter-spacing:.12em}
  dialog{width:100%;max-width:none;border-radius:16px 16px 0 0;
    margin:auto auto 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Barra de encabezado de sección */
.barra-seccion{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.barra-seccion .ayuda{margin:0;flex:1;color:var(--tinta-suave);font-size:12.5px}
dialog .dos{display:grid;grid-template-columns:1fr 110px;gap:10px}
dialog textarea{margin-top:5px;min-height:96px}
.regla-fila .quitar{margin-left:auto}
.item.apagada{opacity:.62}
.item.apagada .burbuja{border-left-color:var(--linea-fuerte)}
.comprar{border:0;background:var(--marca-suave);color:var(--marca-fuerte);
  font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:999px}
.comprar:hover{background:var(--marca);color:#fff;border:0}
.acciones-fila{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.titulo-grupo{font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tinta-suave);margin:22px 0 10px;font-weight:600}
.titulo-grupo:first-child{margin-top:0}
.titulo-grupo small{font-weight:500;text-transform:none;letter-spacing:0;opacity:.75}

/* ── Filas expandibles: el detalle del mensaje bajo la fila ───────── */
tr.clicable{cursor:pointer}
tr.clicable td:first-child{position:relative;padding-left:26px}
tr.clicable td:first-child::before{
  content:"";position:absolute;left:12px;top:50%;width:5px;height:5px;
  border-right:1.5px solid var(--tinta-suave);border-bottom:1.5px solid var(--tinta-suave);
  transform:translateY(-70%) rotate(-45deg);transition:transform var(--transicion);opacity:.6}
tr.clicable.abierta td:first-child::before{transform:translateY(-30%) rotate(45deg)}
tr.abierta{background:var(--papel-2)}
tr.fila-detalle td{padding:0 15px 14px 26px;white-space:normal;background:var(--papel-2)}
tr.fila-detalle .burbuja{margin-top:2px}
tr.fila-detalle .meta{margin-top:8px}
tr.fila-detalle textarea{margin-top:2px}
tr.apagada{opacity:.55}
tr.saliendo{background:var(--marca-suave)}
tr.saliendo td:first-child{box-shadow:inset 3px 0 0 var(--marca)}
.col-switch{width:52px}
.col-switch .switch{gap:0}
td input[type=number]{width:74px;text-align:center;font-variant-numeric:tabular-nums}
.acciones-fila{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.etq{background:var(--papel-2);color:var(--tinta-suave)}
@media(max-width:720px){
  tr.clicable td:first-child{padding-left:22px}
  tr.clicable td:first-child::before{left:9px}
  tr.fila-detalle td{padding:0 12px 12px 22px}
}

/* Columnas que se esconden en pantalla chica: su dato pasa al subtexto */
.solo-movil{display:none}
td.nowrap{white-space:nowrap}
@media(max-width:720px){
  .opcional{display:none}
  .solo-movil{display:block}
  /* El texto se acomoda en varias líneas en vez de estirar la tabla */
  th,td{padding:9px 10px;white-space:normal}
  td.nowrap{white-space:nowrap}
  td b{font-size:13.5px}
  /* La acción queda pegada a la derecha aunque la tabla tenga que desplazarse */
  tr.clicable td:last-child{position:sticky;right:0;background:var(--papel);
    box-shadow:-7px 0 9px -7px rgba(11,22,32,.16)}
  tr.abierta td:last-child,tr.saliendo td:last-child{background:var(--papel-2)}
}
@media(max-width:720px){
  .tel-corto{white-space:nowrap;font-size:11px}
  .solo-movil{white-space:nowrap}
  tbody td{font-size:13px;vertical-align:middle}
  tbody td:first-child{max-width:118px}
  .acciones-fila .enviar{padding:5px 11px;font-size:12px}
}

/* Filtros del historial */
.filtros{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.filtros input[type=search]{flex:1;min-width:190px}
.filtros select{width:auto;min-width:160px}
.conteo{color:var(--tinta-suave);font-size:12px;white-space:nowrap}

/* Grupos de reglas que se pliegan */
.titulo-grupo{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:none;border:0;padding:0;cursor:pointer;color:var(--tinta-suave)}
.titulo-grupo:hover{background:none;color:var(--tinta)}
.titulo-grupo .flecha{width:5px;height:5px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform var(--transicion);margin-right:2px}
.titulo-grupo.plegado .flecha{transform:rotate(-45deg)}
.grupo-reglas{margin-bottom:6px}
@media(max-width:720px){
  .filtros select{flex:1}
}

/* Acción de la fila: discreta en reposo, con color solo al apuntarla.
   Con una acción por fila, el verde sólido repetido dominaba la tabla. */
.enviar{
  background:transparent;border:1px solid var(--linea-fuerte);color:var(--marca-fuerte);
  font-size:12.5px;font-weight:600;padding:4px 12px;border-radius:999px;
}
.enviar:hover{background:var(--marca);border-color:var(--marca);color:#fff}
:root[data-tema="oscuro"] .enviar:hover{color:#04231d}
.enviar.enviando{background:var(--marca-suave);border-color:var(--marca-suave);color:var(--marca-fuerte)}
tr:hover .enviar{border-color:var(--marca)}

/* Ajustes */
.ajustes{margin-bottom:14px;max-width:560px}
.ajustes h3{margin-bottom:8px}
.switch.linea{margin:14px 0 4px}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:320px;margin-top:12px}
.campos label{font-size:12px;color:var(--tinta-suave);font-weight:500}
.campos input{margin-top:4px}
.etiqueta-campo{font-size:12px;color:var(--tinta-suave);font-weight:500;margin:16px 0 7px}
.dias{display:flex;gap:6px;flex-wrap:wrap}
.dia{width:42px;padding:7px 0;text-align:center;font-size:12px;font-weight:600;
  border-radius:var(--r-s);border:1px solid var(--linea-fuerte);background:var(--papel);
  color:var(--tinta-suave);cursor:pointer}
.dia.activo{background:var(--marca-suave);border-color:var(--marca);color:var(--marca-fuerte)}
.dia:hover{border-color:var(--marca)}
.estado-horario{margin:16px 0 0;padding:10px 12px;border-radius:var(--r-s);
  background:var(--papel-2);color:var(--tinta-media);font-size:12.5px}
.estado-horario.espera{background:var(--ambar-suave);color:var(--ambar)}
/* El interruptor conserva su layout flex: `display:block` lo rompía */
.ajustes label:not(.switch){display:block;font-size:12px;color:var(--tinta-suave);font-weight:500}
.ajustes label:not(.switch) input{margin-top:5px;max-width:340px;color:var(--tinta)}
.ajustes .switch-texto{color:var(--tinta)}
#horario-detalle.oculto{display:none}

/* Banda informativa sobre la agenda */
.banda{display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:var(--r);
  background:var(--ambar-suave);color:var(--ambar);font-size:12.5px;margin-bottom:12px;font-weight:500}
.banda::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.banda.oculta{display:none}

/* Pantalla de acceso */
.acceso{position:fixed;inset:0;display:grid;place-items:center;padding:24px;
  background:var(--nav-fondo);z-index:100}
.acceso-caja{width:min(360px,100%);background:var(--papel);border-radius:16px;
  padding:30px 28px;box-shadow:var(--sombra-alta)}
.acceso-caja .logo{color:var(--tinta);margin-bottom:18px}
.acceso-caja h1{font-size:17px;margin-bottom:4px}
.acceso-caja > p{color:var(--tinta-suave);font-size:12.5px;margin:0 0 20px}
.acceso-caja label{display:block;font-size:12px;color:var(--tinta-suave);
  font-weight:500;margin-bottom:13px}
.acceso-caja input{margin-top:5px}
.acceso-caja button{margin-top:8px}
.error{background:var(--rojo-suave);color:var(--rojo);padding:9px 12px;
  border-radius:var(--r-s);font-size:12.5px;margin:0 0 12px}
.ajustes code{background:var(--papel-2);border:1px solid var(--linea);
  border-radius:5px;padding:1px 5px;font-size:11.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
#datos-sesion{color:var(--tinta);font-weight:500}