/* Sinapsis — estilos con el manual de marca de DeerSystems (tema oscuro por defecto). */
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url(assets/fonts/montserrat-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url(assets/fonts/montserrat-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 300; font-display: swap; src: url(assets/fonts/inter-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(assets/fonts/inter-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(assets/fonts/inter-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(assets/fonts/inter-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url(assets/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url(assets/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); }

:root {
  /* Tokens del sistema de diseño DeerSystems */
  --verde: #7ed957; --verde-hover: #8fe46a; --verde-profundo: #62c23c;
  --cian: #00b4d8; --azul: #051923; --violeta: #7209b7; --pizarra: #1e293b;
  --oro: #ffb703; --coral: #ef476f; --teal-medio: #1fb8a8;
  --canvas: #051923; --canvas-soft: #082330; --surface: #1e293b6b; --surface-strong: #0d2a38;
  --ink: #f2f6f8; --body: #b9c6d2; --mute: #94a3b8;
  --hairline: #94a3b829; --hairline-strong: #94a3b84d;
  --primary: var(--verde); --on-primary: var(--azul);
  --warning-text: #ffb703; --danger-text: #ef476f; --primary-text: #7ed957; --link: #00b4d8;
  --gradiente: linear-gradient(100deg, var(--verde) 0%, #3fcf9c 45%, var(--cian) 100%);
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
  --display: "Montserrat", system-ui, sans-serif;
  --text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --nav-h: 68px;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--canvas); color: var(--body); font: 400 16px/26px var(--text); }
body { min-height: 100dvh; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); margin: 0; }
h1 { font-size: 26px; line-height: 32px; font-weight: 700; }
h2 { font-size: 20px; line-height: 28px; font-weight: 700; }
h3 { font-size: 16px; line-height: 22px; font-weight: 600; }
p { margin: 0; }
a { color: var(--link); text-decoration: none; }
code, .mono { font-family: var(--mono); font-size: 13px; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.eyebrow { font: 600 12px/16px var(--display); letter-spacing: 1.5px; text-transform: uppercase; color: var(--mute); }
.mute { color: var(--mute); }
.small { font-size: 14px; line-height: 22px; }
.caption { font: 500 12px/18px var(--text); color: var(--mute); }

/* ---------- Estructura ---------- */
.app { max-width: 720px; margin: 0 auto; padding: 0 16px calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; margin: 0 -16px 8px; background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline); }
.topbar .marca { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.topbar .marca img { width: 30px; height: 30px; }
.topbar .marca b { font: 700 18px/1 var(--display); color: var(--ink); letter-spacing: -.2px; }
.topbar .marca span { display: block; font: 500 11px/14px var(--text); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atras { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-strong); background: transparent; color: var(--ink); cursor: pointer; }

.vista { display: flex; flex-direction: column; gap: 16px; animation: entrar .35s var(--ease); }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cabecera { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }

.nav { position: fixed; inset: auto 0 0 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--canvas-soft); border-top: 1px solid var(--hairline); }
.nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--mute); font: 500 11px/14px var(--text); position: relative; }
.nav a svg { width: 22px; height: 22px; }
.nav a.activo { color: var(--ink); }
.nav a.activo::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: var(--gradiente); border-radius: 2px; }
.nav a.escanear span.boton { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-top: -22px;
  border-radius: 50%; background: var(--primary); color: var(--on-primary); border: 4px solid var(--canvas); }
.nav a.escanear svg { width: 24px; height: 24px; }
.nav a.escanear.activo::before { display: none; }

/* ---------- Componentes ---------- */
.tarjeta { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 16px; }
.tarjeta.fuerte { background: var(--surface-strong); }
.pila { display: flex; flex-direction: column; gap: 12px; }
.fila { display: flex; align-items: center; gap: 12px; }
.fila.entre { justify-content: space-between; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px;
  border-radius: var(--radius-sm); border: 1px solid var(--hairline-strong); background: transparent; color: var(--ink);
  font: 600 15px/20px var(--text); cursor: pointer; transition: background .2s var(--ease), transform .1s; text-align: center; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn.primario { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.btn.primario:hover { background: var(--verde-hover); }
.btn.primario:active { background: var(--verde-profundo); }
.btn.peligro { color: var(--danger-text); border-color: #ef476f66; }
.btn.ia { background: var(--violeta); color: #fff; border-color: transparent; }
.btn.bloque { width: 100%; }
.btn.grande { min-height: 56px; font-size: 17px; }
.btn.chico { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.btn svg { width: 20px; height: 20px; flex: none; }
.enlace { background: none; border: 0; color: var(--link); padding: 0; cursor: pointer; font: 500 14px var(--text); }

.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.grid-2 > * { min-width: 0; }
.campo label { font: 500 13px/18px var(--text); color: var(--body); }
.campo input, .campo select, .campo textarea, .buscador input {
  width: 100%; min-height: 46px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--hairline-strong);
  background: var(--surface-strong); color: var(--ink); outline: none; transition: border-color .2s; }
.campo input:focus, .campo select:focus, .buscador input:focus { border-color: var(--cian); box-shadow: 0 0 0 3px #00b4d833; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8); }
/* iPhone: el campo de fecha trae su propio ancho mínimo y se sale de la pantalla. */
.campo input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%;
  text-align: left; line-height: 24px; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.buscador { position: relative; }
.buscador svg { position: absolute; left: 12px; top: 13px; width: 20px; height: 20px; color: var(--mute); }
.buscador input { padding-left: 42px; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill);
  font: 500 12px/18px var(--mono); border: 1px solid var(--hairline-strong); color: var(--body); white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.ok { color: var(--primary-text); border-color: #7ed95755; }
.chip.alerta { color: var(--warning-text); border-color: #ffb70366; }
.chip.error { color: var(--danger-text); border-color: #ef476f66; }
.chip.info { color: var(--link); border-color: #00b4d855; }
.chip.ia { color: #fff; background: var(--violeta); border-color: transparent; }
.chip.neutro::before, .chip.sin::before { display: none; }

.segmentos { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.segmentos button { flex: none; padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--hairline-strong);
  background: transparent; color: var(--body); font: 500 14px var(--text); cursor: pointer; }
.segmentos button.activo { background: var(--ink); color: var(--azul); border-color: transparent; }

/* KPI del inicio */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--hairline); color: inherit; }
.kpi b { font: 700 32px/38px var(--display); color: var(--ink); }
.kpi.error b { color: var(--danger-text); }
.kpi.alerta b { color: var(--warning-text); }
.kpi.cero b { color: var(--mute); }
.hero { position: relative; overflow: hidden; padding: 20px; border-radius: var(--radius-lg); background: var(--surface-strong); border: 1px solid var(--hairline); }
.hero::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--gradiente); }
.hero h1 span { background: var(--gradiente); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Listas */
.lista { display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.lista > * + * { border-top: 1px solid var(--hairline); }
.item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: inherit; background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer; }
.item:active { background: #94a3b814; }
.item .cuerpo { flex: 1; min-width: 0; }
.item .titulo { font: 600 15px/21px var(--text); color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.item .sub { font-size: 13px; line-height: 19px; color: var(--mute); }
.item .cifra { font: 600 18px/22px var(--display); color: var(--ink); text-align: right; }
.item .cifra small { display: block; font: 500 11px/14px var(--text); color: var(--mute); }
.item .cifra.bajo { color: var(--warning-text); }
.vacio { padding: 28px 16px; text-align: center; color: var(--mute); font-size: 14px; }

.barra-progreso { height: 6px; border-radius: 3px; background: var(--hairline-strong); overflow: hidden; }
.barra-progreso i { display: block; height: 100%; background: var(--gradiente); }

/* Escáner */
.camara { position: relative; aspect-ratio: 3 / 4; max-height: 56dvh; width: 100%; border-radius: var(--radius-lg); overflow: hidden; background: #000; border: 1px solid var(--hairline); }
.camara #lector { width: 100%; height: 100%; }
.camara #lector video, .camara #lector-rec video { object-fit: cover; width: 100% !important; height: 100% !important; }
.camara .marco { position: absolute; inset: 22% 10%; border-radius: var(--radius-md); pointer-events: none;
  box-shadow: 0 0 0 9999px #05192399; outline: 2px solid var(--cian); }
.camara .marco::after { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: var(--gradiente); animation: barrido 2.2s var(--ease) infinite; }
@keyframes barrido { 0%, 100% { transform: translateY(-40px); opacity: .4; } 50% { transform: translateY(40px); opacity: 1; } }
.camara .estado { position: absolute; left: 12px; right: 12px; bottom: 12px; text-align: center; color: var(--ink); font-size: 14px; }
.camara .sin-camara { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }

/* Hoja inferior (modal) */
.velo { position: fixed; inset: 0; z-index: 40; background: #02101799; display: flex; align-items: flex-end; justify-content: center; animation: aparecer .2s; }
@keyframes aparecer { from { opacity: 0; } }
body.con-hoja { position: fixed; left: 0; right: 0; overflow: hidden; }
.hoja { width: 100%; max-width: 720px; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--canvas-soft); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); animation: subir .3s var(--ease); }
@keyframes subir { from { transform: translateY(40px); } }
/* La raya es la manija: zona táctil ancha y alta, sin que el navegador la tome como scroll. */
.hoja .asa { position: relative; height: 28px; margin: -20px -16px 4px; touch-action: none; cursor: grab; }
.hoja .asa::after { content: ""; position: absolute; left: 50%; top: 12px; width: 40px; height: 4px; margin-left: -20px;
  border-radius: 2px; background: var(--hairline-strong); }

.aviso { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50;
  max-width: calc(100% - 32px); padding: 12px 16px; border-radius: var(--radius-md); background: var(--ink); color: var(--azul);
  font: 500 14px/20px var(--text); animation: subir .3s var(--ease); }
.aviso.error { background: var(--coral); color: #fff; }

.cargando { display: inline-block; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.esqueleto { height: 64px; border-radius: var(--radius-md); background: linear-gradient(90deg, var(--surface) 0%, var(--surface-strong) 50%, var(--surface) 100%); background-size: 200% 100%; animation: brillo 1.2s infinite; }
@keyframes brillo { to { background-position: -200% 0; } }

.firma { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px 0 8px; color: var(--mute); font-size: 12px; line-height: 16px; text-align: center; }
.firma img { width: 20px; height: 20px; flex: none; }

/* Ingreso */
.login { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 28px; max-width: 400px; margin: 0 auto; padding: 24px 16px; }
.login .logo { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.login .logo img { width: 56px; height: 56px; }
.login h1 { font-size: 34px; line-height: 40px; }
.login h1 span { background: var(--gradiente); -webkit-background-clip: text; background-clip: text; color: transparent; }

table.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tabla td { padding: 8px 0; border-top: 1px solid var(--hairline); }
table.tabla td:last-child { text-align: right; color: var(--ink); }

@media (min-width: 600px) {
  .kpis { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.camara #lector-rec { width: 100%; height: 100%; }
.btn.grande, .btn.bloque { white-space: normal; }
.item > svg { width: 22px; height: 22px; flex: none; color: var(--cian); }

/* ---------- Escritorio: navegación lateral, contenido más ancho y diálogos centrados ---------- */
@media (hover: hover) {
  .item:hover, .kpi:hover { background: #94a3b814; }
  .btn:not(.primario):not(.ia):hover { background: #94a3b814; }
  .nav a:hover { color: var(--ink); }
}
@media (min-width: 1024px) {
  :root { --lateral: 232px; }
  .app { max-width: 1120px; padding: 0 32px 32px; margin-left: calc(var(--lateral) + max(0px, (100vw - var(--lateral) - 1120px) / 2)); }
  .topbar { margin: 0 -32px 16px; padding: 14px 32px; }
  .nav { inset: 0 auto 0 0; width: var(--lateral); height: auto; padding: 88px 12px 24px; display: flex; flex-direction: column; gap: 4px;
    border-top: 0; border-right: 1px solid var(--hairline); }
  .nav a { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 10px 14px; border-radius: var(--radius-sm); font: 500 15px/20px var(--text); }
  .nav a.activo { background: #94a3b81a; }
  .nav a.activo::before { inset: 8px auto 8px 0; width: 3px; height: auto; }
  .nav a.escanear { order: -1; margin-bottom: 12px; background: var(--primary); color: var(--on-primary); font-weight: 600; }
  .nav a.escanear:hover { background: var(--verde-hover); color: var(--on-primary); }
  .nav a.escanear span.boton { width: auto; height: auto; margin: 0; border: 0; background: none; color: inherit; border-radius: 0; }
  .nav a.escanear svg { width: 22px; height: 22px; }
  .vista { gap: 20px; }
  h1 { font-size: 30px; line-height: 38px; }
  .hero { padding: 32px; }
  .hero .btn.bloque { width: auto; align-self: flex-start; padding: 10px 28px; }
  .kpi { padding: 18px 20px; }
  .camara { max-width: 560px; max-height: 60dvh; margin: 0 auto; }
  .vista > .grid-2:has(> .btn) { max-width: 560px; width: 100%; margin: 0 auto; }
  .velo { align-items: center; padding: 32px 32px 32px calc(var(--lateral) + 32px); }
  .hoja { max-width: 560px; max-height: 86dvh; border-radius: var(--radius-lg); padding: 24px; }
  .hoja .asa { display: none; }
  .aviso { bottom: 24px; left: calc(50% + var(--lateral) / 2); }
}

/* ---------- Logo del hospital, accesos y listas de pasos ---------- */
.logo-neuro { width: 220px; max-width: 100%; height: auto; }
.logo-neuro.chico { width: 160px; }
.login .logo img.logo-neuro { width: 240px; height: auto; }
.nav .lateral-logo, .nav .lateral-extra { display: none; }
.enlace-manual { color: inherit; align-items: center; }
.enlace-manual > svg { width: 28px; height: 28px; flex: none; color: var(--cian); }
ol.pasos { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 22px; }
ol.pasos li::marker { color: var(--primary-text); font: 600 14px var(--display); }
ol.pasos b { color: var(--ink); }

@media (min-width: 1024px) {
  .nav .lateral-logo { display: block; position: absolute; top: 20px; left: 20px; width: calc(var(--lateral) - 40px); height: auto; }
  .nav .lateral-extra { display: flex; margin-top: auto; }
}

/* ---------- Manual animado ---------- */
.man-indice { position: sticky; top: 66px; z-index: 5; padding: 8px 0; background: var(--canvas); }
.man-capitulo { display: grid; gap: 20px; scroll-margin-top: 120px; }
.man-escena { display: flex; justify-content: center; padding: 8px 0; }
.man-escena * { animation-play-state: paused; }
.man-escena.en-vista * { animation-play-state: running; }
@media (min-width: 760px) { .man-capitulo { grid-template-columns: 1.2fr 1fr; align-items: center; } }

.man-tel { position: relative; width: 220px; height: 300px; border-radius: 26px; border: 6px solid #0d2a38; background: var(--canvas);
  box-shadow: 0 0 0 1px var(--hairline-strong), 0 18px 40px #0008; overflow: hidden; padding: 18px 14px; font-size: 12px; color: var(--body); }
.man-tit { font: 600 12px/16px var(--display); color: var(--ink); margin-bottom: 12px; }
.man-toast { position: absolute; left: 12px; right: 12px; bottom: 14px; padding: 9px 12px; border-radius: 10px; background: var(--ink); color: var(--azul);
  font: 600 12px/16px var(--text); text-align: center; animation: man-toast 4s var(--ease) infinite; }
.man-toast b { color: var(--verde-profundo); }
@keyframes man-toast { 0%, 55% { opacity: 0; transform: translateY(14px); } 65%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 1. Escáner */
.man-camara { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, #12384a, #02101a); }
.man-codigo { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 120px; height: 70px; padding: 8px; display: flex; gap: 3px;
  justify-content: center; background: #f2f6f8; border-radius: 4px; }
.man-codigo i { display: block; width: 3px; background: #051923; }
.man-codigo i:nth-child(3n) { width: 6px; } .man-codigo i:nth-child(4n) { width: 2px; }
.man-linea { position: absolute; left: 34px; right: 34px; top: 42%; height: 2px; background: var(--gradiente); box-shadow: 0 0 12px var(--cian);
  animation: man-barrido 4s var(--ease) infinite; }
@keyframes man-barrido { 0% { transform: translateY(-34px); } 25% { transform: translateY(34px); } 50% { transform: translateY(-34px); } 55%, 100% { transform: translateY(0); opacity: 0; } }

/* 2. Formulario de ingreso */
.man-campo { margin-bottom: 10px; }
.man-campo span { display: block; font-size: 11px; color: var(--mute); margin-bottom: 4px; }
.man-escribe { display: block; height: 30px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--hairline-strong); background: var(--surface-strong);
  font: 500 12px/18px var(--mono); font-style: normal; color: var(--ink); white-space: nowrap; overflow: hidden; }
.man-form .man-escribe { animation: man-escribir 4.5s steps(10) infinite; animation-delay: var(--d); }
@keyframes man-escribir { 0% { color: transparent; border-color: var(--hairline-strong); } 8% { border-color: var(--cian); } 30%, 100% { color: var(--ink); border-color: var(--hairline-strong); } }
.man-equiv { font-size: 11px; color: var(--primary-text); margin: 4px 0 12px; animation: man-aparece 4.5s infinite; }
.man-boton { padding: 9px; border-radius: 6px; background: var(--primary); color: var(--azul); text-align: center; font: 600 12px var(--text);
  animation: man-pulso 4.5s infinite; }
.man-form .man-toast { animation-duration: 4.5s; }
@keyframes man-aparece { 0%, 40% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes man-pulso { 0%, 50% { transform: none; } 55% { transform: scale(.94); background: var(--verde-profundo); } 62%, 100% { transform: none; } }

/* 3. Pruebas */
.man-cifra { display: flex; flex-direction: column; margin-bottom: 14px; }
.man-cifra b { position: relative; height: 40px; font: 700 34px/40px var(--display); color: var(--ink); }
.man-cifra b span { position: absolute; left: 0; top: 0; }
.man-n1, .man-n2 { opacity: 0; }
.man-n1 { animation: man-n1 6s infinite; } .man-n2 { animation: man-n2 6s infinite; }
.man-n3 { color: var(--warning-text); animation: man-n3 6s infinite; }
@keyframes man-n1 { 0%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes man-n2 { 0%, 32% { opacity: 0; } 36%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes man-n3 { 0%, 64% { opacity: 0; } 68%, 100% { opacity: 1; } }
.man-cifra small { font-size: 11px; color: var(--mute); }
.man-barra { position: relative; height: 10px; border-radius: 5px; background: var(--hairline-strong); overflow: hidden; margin-bottom: 18px; }
.man-barra i { position: absolute; inset: 0 auto 0 0; width: 8%; background: var(--warning-text); border-radius: 5px; animation: man-gasto 6s var(--ease) infinite; }
.man-barra em { position: absolute; top: 0; bottom: 0; left: 10%; width: 2px; background: var(--coral); }
@keyframes man-gasto { 0%, 25% { width: 100%; background: var(--verde); } 40%, 55% { width: 41%; background: var(--verde); } 70%, 100% { width: 8%; background: var(--warning-text); } }
.man-chip { display: inline-block; padding: 4px 10px; border-radius: 999px; border: 1px solid #ffb70366; color: var(--warning-text); font: 500 11px var(--mono);
  animation: man-chip 6s var(--ease) infinite; }
@keyframes man-chip { 0%, 68% { opacity: 0; transform: scale(.7); } 74%, 100% { opacity: 1; transform: none; } }

/* 4. Alertas */
.man-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: center; }
.man-kpi { padding: 12px 10px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--surface); animation: man-kpi 5s var(--ease) infinite;
  animation-delay: calc(var(--i) * .25s); }
.man-kpi b { display: block; font: 700 26px/30px var(--display); }
.man-kpi.e b { color: var(--danger-text); } .man-kpi.a b { color: var(--warning-text); }
.man-kpi span { font-size: 11px; }
@keyframes man-kpi { 0%, 6% { opacity: 0; transform: translateY(10px) scale(.95); } 16%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 5. Pedido */
.man-flujo { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-left: 22px; }
.man-flujo::before { content: ""; position: absolute; left: 40px; top: 70px; bottom: 70px; width: 2px; background: var(--hairline-strong); }
.man-paso { position: relative; display: flex; align-items: center; gap: 12px; font: 600 13px var(--text); color: var(--mute);
  animation: man-paso 6s infinite; animation-delay: calc(var(--i) * 1.4s); }
.man-paso span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--hairline-strong);
  background: var(--canvas); font: 700 13px var(--display); }
@keyframes man-paso { 0% { color: var(--mute); } 8%, 100% { color: var(--ink); } }
.man-paso span { animation: man-paso-n 6s infinite; animation-delay: calc(var(--i) * 1.4s); }
@keyframes man-paso-n { 0% { background: var(--canvas); border-color: var(--hairline-strong); color: var(--mute); }
  8%, 100% { background: var(--primary); border-color: var(--primary); color: var(--azul); } }

/* 6. Instalar y notificar */
.man-inicio { background: linear-gradient(160deg, #0d2a38, #051923); }
.man-iconos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 70px; }
.man-iconos i, .man-iconos img { width: 100%; aspect-ratio: 1; border-radius: 10px; background: #94a3b833; }
.man-iconos img { animation: man-caer 5s var(--ease) infinite; }
@keyframes man-caer { 0%, 10% { opacity: 0; transform: translateY(-30px) scale(.6); } 25%, 100% { opacity: 1; transform: none; } }
.man-notif { position: absolute; left: 8px; right: 8px; top: 10px; display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 12px;
  background: #f2f6f8f2; color: var(--azul); box-shadow: 0 8px 20px #0006; animation: man-notif 5s var(--ease) infinite; }
.man-notif img { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.man-notif b { display: block; font: 600 11px/14px var(--text); }
.man-notif span { display: block; font-size: 10px; line-height: 13px; color: #334155; }
@keyframes man-notif { 0%, 35% { opacity: 0; transform: translateY(-70px); } 45%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-70px); } }

/* ---------- Código de farmacia copiable y líneas del pedido ---------- */
.cod-farmacia { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid #00b4d866; background: #00b4d81a; color: var(--ink); font: 600 13px/18px var(--mono); }
.cod-farmacia small { font: 500 10px/14px var(--text); letter-spacing: .4px; text-transform: uppercase; color: var(--link); }
.cod-farmacia svg { width: 14px; height: 14px; color: var(--link); }
.cod-farmacia:hover { background: #00b4d833; }
.cod-farmacia:active { transform: scale(.97); }
.item-pedido { align-items: flex-start; }
.cant-pedido { width: 76px; min-height: 42px; text-align: center; border-radius: 6px; border: 1px solid var(--hairline-strong);
  background: var(--surface-strong); color: var(--ink); }
.enlace.quitar { display: inline-flex; align-items: center; gap: 4px; color: var(--danger-text); font-size: 13px; }
.enlace.quitar svg { width: 14px; height: 14px; }

/* ---------- Filtros del inventario ---------- */
.filtros-inventario { gap: 8px; flex-wrap: wrap; align-items: stretch; }
.filtros-inventario select { flex: 1 1 220px; min-height: 42px; padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-strong); background: var(--surface-strong); color: var(--ink); font: 500 14px var(--text); }
.filtros-inventario .segmentos { flex: 2 1 320px; }