/* ═══════════════════════════════════════════════════════════════════════════
   FÁBRICA DE VIDEO DMSI — sala de control
   Identidad: acero + tablero, azul DMSI, cian señal, cinta de seguridad
   amarilla/negra SOLO para trabajo-en-curso y atención.
   Tipos: Chakra Petch (display/rótulos) · IBM Plex Mono (datos) · system (cuerpo)
   Sistema de espaciado en múltiplos de 4px. Mobile-first.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* color */
  --acero: #0A1420;
  --tablero: #10233B;
  --tablero-2: #0D1B2E;        /* superficies hundidas: inputs, pistas */
  --linea: #24405E;
  --linea-suave: #182e47;
  --azul: #0252B4;
  --azul-vivo: #0A66D6;        /* hover del primario */
  --cian: #5DA9FF;
  --amarillo: #FFD400;
  --verde: #43D9A3;
  --rojo: #FF6B5D;
  --vapor: #EAF2FB;
  --niebla: #8FA9C4;
  --sombra-panel: inset 0 1px 0 rgba(234, 242, 251, 0.04);

  /* tipografía */
  --f-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --f-cuerpo: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ritmo */
  --r: 4px;                     /* radio de esquina: casi recto, industrial */
  --ancho-col: 680px;

  /* firma: cinta de seguridad */
  --cinta-gradiente: repeating-linear-gradient(
    135deg,
    var(--amarillo) 0 10px,
    #131313 10px 20px
  );
}

/* ── base ─────────────────────────────────────────────────────────────────── */

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

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

body {
  margin: 0;
  background: var(--acero);
  color: var(--vapor);
  font-family: var(--f-cuerpo);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100dvh;
  /* trama de plancha de acero, casi imperceptible */
  background-image:
    radial-gradient(rgba(93, 169, 255, 0.045) 1px, transparent 1.5px);
  background-size: 26px 26px;
}

img, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--cian); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0 0 8px; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); }

::selection { background: var(--azul); color: var(--vapor); }

:focus-visible {
  outline: 2px solid var(--cian);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── firma: cinta de seguridad ────────────────────────────────────────────── */

.cinta {
  background: var(--cinta-gradiente);
  height: 6px;
}
.cinta-fina { height: 4px; }

@keyframes cinta-avanza {
  from { background-position: 0 0; }
  to   { background-position: 28.28px 0; } /* un período diagonal completo */
}

/* ── pantalla de arranque ─────────────────────────────────────────────────── */

.arranque {
  min-height: 100dvh;
  display: grid;
  place-content: center;
  gap: 12px;
  text-align: center;
}
.arranque-logo {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.12em;
}
.arranque-logo span { color: var(--niebla); font-weight: 500; }
.arranque-nota { color: var(--niebla); font-family: var(--f-mono); font-size: 12px; }

/* ── shell / header ───────────────────────────────────────────────────────── */

.app { min-height: 100dvh; display: flex; flex-direction: column; }

.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 20, 32, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea-suave);
}
.cabecera-fila {
  max-width: var(--ancho-col);
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.marca {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 15px;
  color: var(--vapor);
  white-space: nowrap;
}
.marca:hover { text-decoration: none; }
.marca .marca-sufijo { font-weight: 500; color: var(--niebla); font-size: 12px; letter-spacing: 0.14em; }
.marca-dmsi {
  background: var(--azul);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 2px 6px;
  border-radius: 2px;
}
.cabecera-espacio { flex: 1; }
.cabecera-usuario {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--niebla);
  max-width: 34vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* luz de máquina: verde = quieta, amarillo latiendo = trabajando */
.luz {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 6px rgba(67, 217, 163, 0.7);
  flex: none;
}
.luz[data-estado="trabajando"] {
  background: var(--amarillo);
  box-shadow: 0 0 8px rgba(255, 212, 0, 0.8);
  animation: latido 1.1s ease-in-out infinite;
}
.luz[data-estado="error"] {
  background: var(--rojo);
  box-shadow: 0 0 8px rgba(255, 107, 93, 0.8);
}
@keyframes latido {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ── contenido ────────────────────────────────────────────────────────────── */

.contenido {
  flex: 1;
  width: 100%;
  max-width: var(--ancho-col);
  margin: 0 auto;
  padding: 16px 16px 96px;
}

.vista-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 16px;
}
.vista-titulo h1 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.volver {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--niebla);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 6px 10px;
  background: none;
  cursor: pointer;
  white-space: nowrap;
}
.volver:hover { color: var(--vapor); border-color: var(--cian); text-decoration: none; }

/* ── paneles ──────────────────────────────────────────────────────────────── */

.panel {
  background: var(--tablero);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  box-shadow: var(--sombra-panel);
  margin-bottom: 16px;
}
.panel-cuerpo { padding: 16px; }

.rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--linea-suave);
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--niebla);
}
.rotulo::before {
  content: "";
  width: 4px;
  height: 14px;
  background: var(--cian);
  flex: none;
}
.rotulo[data-tono="atencion"]::before { background: var(--amarillo); }
.rotulo[data-tono="ok"]::before { background: var(--verde); }
.rotulo[data-tono="falla"]::before { background: var(--rojo); }
.rotulo .rotulo-extra { margin-left: auto; font-family: var(--f-mono); letter-spacing: 0; text-transform: none; }

/* ── botones ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-primario { background: var(--azul); color: #fff; }
.btn-primario:not([disabled]):hover { background: var(--azul-vivo); }

.btn-borde {
  background: none;
  color: var(--cian);
  border-color: var(--linea);
}
.btn-borde:not([disabled]):hover { border-color: var(--cian); }

.btn-ok { background: none; color: var(--verde); border-color: rgba(67, 217, 163, 0.4); }
.btn-ok:not([disabled]):hover { border-color: var(--verde); background: rgba(67, 217, 163, 0.08); }

.btn-falla { background: none; color: var(--rojo); border-color: rgba(255, 107, 93, 0.4); }
.btn-falla:not([disabled]):hover { border-color: var(--rojo); background: rgba(255, 107, 93, 0.08); }

.btn-bloque { width: 100%; }
.btn-chico { padding: 6px 10px; font-size: 11px; }

/* girito de espera dentro de un botón */
.girito {
  width: 13px; height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
  flex: none;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ── formularios ──────────────────────────────────────────────────────────── */

.campo { margin-bottom: 14px; }
.campo-etiqueta {
  display: block;
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--niebla);
  margin-bottom: 6px;
}
.campo-etiqueta em { font-style: normal; color: var(--linea); font-weight: 500; letter-spacing: 0.04em; }
.campo-ayuda { font-size: 12px; color: var(--niebla); margin-top: 4px; }

.entrada,
select.entrada,
textarea.entrada {
  width: 100%;
  background: var(--tablero-2);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  color: var(--vapor);
  padding: 10px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.entrada::placeholder { color: rgba(143, 169, 196, 0.55); }
.entrada:focus {
  outline: none;
  border-color: var(--cian);
  box-shadow: 0 0 0 3px rgba(93, 169, 255, 0.18);
}
textarea.entrada { resize: vertical; min-height: 72px; }
select.entrada {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238FA9C4' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

.campo-error {
  color: var(--rojo);
  font-size: 12.5px;
  margin-top: 6px;
}
.entrada[aria-invalid="true"] { border-color: var(--rojo); }

/* zona de archivo (ingreso de material) */
.zona-archivo {
  display: block;
  border: 1px dashed var(--linea);
  border-radius: var(--r);
  background: var(--tablero-2);
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.zona-archivo:hover, .zona-archivo.arrastrando { border-color: var(--cian); background: rgba(93, 169, 255, 0.06); }
.zona-archivo:focus-visible { border-style: solid; }
.zona-archivo .za-icono {
  font-family: var(--f-mono);
  font-size: 20px;
  color: var(--cian);
  display: block;
  margin-bottom: 4px;
}
.zona-archivo .za-texto { display: block; color: var(--vapor); font-size: 14px; }
.zona-archivo .za-nota { display: block; color: var(--niebla); font-size: 12px; margin-top: 2px; }
.zona-archivo.con-archivo { border-style: solid; border-color: var(--verde); }
.zona-archivo .za-elegido {
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--verde);
  word-break: break-all;
}

/* ── progreso: la cinta trabajando ────────────────────────────────────────── */

.tren-progreso { padding: 16px; }
.pct-fila {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.pct {
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: clamp(40px, 12vw, 56px);
  line-height: 1;
  color: var(--amarillo);
  font-variant-numeric: tabular-nums;
}
.pct-etiqueta {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vapor);
}
.pct-sub { color: var(--niebla); font-size: 12.5px; font-family: var(--f-mono); }

.pista {
  height: 16px;
  background: var(--tablero-2);
  border: 1px solid var(--linea);
  border-radius: 2px;
  overflow: hidden;
}
.pista-relleno {
  height: 100%;
  background: var(--cinta-gradiente);
  background-size: 28.28px 28.28px;
  animation: cinta-avanza 0.9s linear infinite;
  transition: width 0.6s ease;
  min-width: 4px;
}
.pista-relleno[data-quieta] { animation: none; }

/* ── tren de producción (stepper) ─────────────────────────────────────────── */

.tren {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tren span { display: inline-flex; align-items: center; }
.tren .paso { color: rgba(143, 169, 196, 0.5); white-space: nowrap; }
.tren .paso[data-hecho] { color: var(--verde); }
.tren .paso[data-actual] { color: var(--amarillo); }
.tren .une { color: rgba(143, 169, 196, 0.35); margin: 0 5px; }

/* ── chips de estado ──────────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  border: 1px solid var(--linea);
  color: var(--niebla);
  white-space: nowrap;
}
.chip[data-tono="trabajando"] { color: var(--amarillo); border-color: rgba(255, 212, 0, 0.45); }
.chip[data-tono="ok"] { color: var(--verde); border-color: rgba(67, 217, 163, 0.45); }
.chip[data-tono="falla"] { color: var(--rojo); border-color: rgba(255, 107, 93, 0.45); }
.chip[data-tono="accion"] { color: var(--cian); border-color: rgba(93, 169, 255, 0.45); }

/* ── lista de videos (órdenes de producción) ──────────────────────────────── */

.orden {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--tablero);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  color: inherit;
  transition: border-color 0.15s, background-color 0.15s;
}
.orden:hover { border-color: var(--cian); text-decoration: none; }
.orden:hover .orden-nombre { color: var(--cian); }
.orden-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.orden-nombre {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s;
}
.orden-slug { font-family: var(--f-mono); font-size: 11px; color: var(--niebla); }
.orden-siguiente {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--niebla);
}
.orden-siguiente strong { color: var(--vapor); font-weight: 600; }

/* ── vacíos ───────────────────────────────────────────────────────────────── */

.vacio {
  border: 1px dashed var(--linea);
  border-radius: var(--r);
  padding: 28px 20px;
  text-align: center;
  color: var(--niebla);
}
.vacio-titulo {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--vapor);
  margin-bottom: 4px;
}

/* ── sala de edición ──────────────────────────────────────────────────────── */

.sala { display: block; }

/* player */
.cabina { overflow: hidden; }
.pestanas {
  display: flex;
  border-bottom: 1px solid var(--linea-suave);
}
.pestana {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 8px;
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--niebla);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.pestana[aria-selected="true"] { color: var(--vapor); border-bottom-color: var(--cian); }
.pestana[disabled] { opacity: 0.4; cursor: not-allowed; }
.pestana .pestana-nota { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0; text-transform: none; color: var(--verde); display: block; }

.marco-video {
  background: #05090e;
  display: grid;
  place-items: center;
  position: relative;
}
.marco-video video {
  width: 100%;
  max-height: min(62vh, 560px);
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: #05090e;
}
.marco-vacio {
  aspect-ratio: 9 / 16;
  max-height: min(62vh, 560px);
  width: 100%;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  color: var(--niebla);
  padding: 24px;
}
.marco-vacio .mv-titulo { font-family: var(--f-display); font-weight: 600; letter-spacing: 0.06em; color: var(--vapor); }

.version-sello {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--acero);
  background: var(--verde);
  padding: 2px 7px;
  border-radius: 2px;
  pointer-events: none;
}

/* aviso "hay versión nueva" */
.aviso-version {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(67, 217, 163, 0.08);
  border-top: 1px solid rgba(67, 217, 163, 0.35);
  font-size: 13px;
}

/* guía: qué hacer ahora */
.guia {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  align-items: flex-start;
}
.guia-icono {
  font-family: var(--f-mono);
  color: var(--cian);
  font-size: 16px;
  line-height: 1.4;
  flex: none;
}
.guia[data-tono="atencion"] .guia-icono { color: var(--amarillo); }
.guia[data-tono="ok"] .guia-icono { color: var(--verde); }
.guia-texto strong { display: block; font-family: var(--f-display); letter-spacing: 0.04em; font-weight: 600; margin-bottom: 2px; }
.guia-texto span { color: var(--niebla); font-size: 13px; }

/* falla */
.falla-detalle {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--rojo);
  background: rgba(255, 107, 93, 0.07);
  border: 1px solid rgba(255, 107, 93, 0.25);
  border-radius: 2px;
  padding: 10px 12px;
  margin: 0 0 12px;
  word-break: break-word;
  white-space: pre-wrap;
  max-height: 140px;
  overflow: auto;
}

/* capturas */
.tira-capturas {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.captura {
  flex: none;
  width: 118px;
  scroll-snap-align: start;
  border: 1px solid var(--linea);
  border-radius: 2px;
  padding: 0;
  background: var(--tablero-2);
  cursor: zoom-in;
  overflow: hidden;
  position: relative;
  transition: border-color 0.15s;
}
.captura:hover { border-color: var(--cian); }
.captura img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.captura .captura-n {
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-family: var(--f-mono);
  font-size: 10px;
  background: rgba(10, 20, 32, 0.85);
  color: var(--cian);
  padding: 1px 5px;
  border-radius: 2px;
}
.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 16px;
}

/* visor de captura a pantalla completa */
.visor {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(5, 9, 14, 0.94);
  display: grid;
  place-items: center;
  padding: 20px;
  border: none;
  width: 100%;
  cursor: zoom-out;
}
.visor img {
  max-height: 88vh;
  max-width: 92vw;
  border: 1px solid var(--linea);
}
.visor .visor-pie {
  position: absolute;
  bottom: 16px;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--niebla);
}

/* ── chat con el editor ───────────────────────────────────────────────────── */

.chat-panel { display: flex; flex-direction: column; }
.chat-historial {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  max-height: 52vh;
  min-height: 180px;
  scroll-behavior: smooth;
}

.msg { max-width: 100%; }
.msg-cabeza {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.msg-cuerpo {
  border-left: 2px solid var(--linea);
  padding: 2px 0 2px 10px;
  font-size: 14px;
  overflow-wrap: break-word;
}
.msg-cuerpo p { margin: 0 0 8px; }
.msg-cuerpo p:last-child { margin-bottom: 0; }
.msg-cuerpo code {
  font-family: var(--f-mono);
  font-size: 12.5px;
  background: var(--tablero-2);
  border: 1px solid var(--linea-suave);
  border-radius: 2px;
  padding: 0 4px;
}
.msg[data-de="editor"] .msg-cabeza { color: var(--cian); }
.msg[data-de="editor"] .msg-cuerpo { border-left-color: var(--cian); }
.msg[data-de="vos"] .msg-cabeza { color: var(--niebla); }
.msg[data-de="vos"] .msg-cuerpo { border-left-color: var(--azul); color: var(--vapor); }

/* herramienta en uso: la máquina avisa qué está tocando */
.msg-herramienta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--amarillo);
  padding-left: 12px;
}
.msg-herramienta::before {
  content: "";
  width: 10px; height: 10px;
  border: 2px solid var(--amarillo);
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar 0.9s linear infinite;
  flex: none;
}
.msg-herramienta[data-hecha] { color: var(--niebla); }
.msg-herramienta[data-hecha]::before {
  animation: none;
  border: none;
  width: auto; height: auto;
  content: "·";
  color: var(--verde);
  font-weight: 700;
}

.msg-costo {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: rgba(143, 169, 196, 0.7);
  padding-left: 12px;
}
.msg-error-linea {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--rojo);
  padding-left: 12px;
  white-space: pre-wrap;
}

.chat-entrada {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--linea-suave);
  background: var(--tablero);
  position: sticky;
  bottom: 0;
  border-radius: 0 0 var(--r) var(--r);
}
.chat-entrada textarea {
  flex: 1;
  min-height: 42px;
  max-height: 132px;
  resize: none;
}
.chat-vacio {
  color: var(--niebla);
  font-size: 13px;
  text-align: center;
  padding: 20px 12px;
}
.chat-vacio strong { color: var(--vapor); display: block; font-family: var(--f-display); letter-spacing: 0.04em; margin-bottom: 4px; }

/* sugerencias de arranque del chat */
.sugerencias { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.sugerencia {
  font-size: 12px;
  color: var(--cian);
  background: none;
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.sugerencia:hover { border-color: var(--cian); }

/* ── subida ───────────────────────────────────────────────────────────────── */

.subiendo-velo {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(5, 9, 14, 0.92);
  display: grid;
  place-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}
.subiendo-velo .pista { width: min(420px, 78vw); }
.subiendo-nota { font-family: var(--f-mono); font-size: 12px; color: var(--niebla); }

/* ── login / registro ─────────────────────────────────────────────────────── */

.portal {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.portal-caja { width: min(400px, 100%); }
.portal-logo {
  text-align: center;
  margin-bottom: 18px;
}
.portal-logo .pl-fabrica {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.14em;
}
.portal-logo .pl-fabrica em { font-style: normal; color: var(--cian); }
.portal-logo .pl-sub {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--niebla);
  margin-top: 4px;
}
.portal-tabs { display: flex; border-bottom: 1px solid var(--linea-suave); }
.portal-pie {
  text-align: center;
  margin-top: 16px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: rgba(143, 169, 196, 0.7);
}

/* ── admin ────────────────────────────────────────────────────────────────── */

.config-fila { margin-bottom: 18px; }
.config-estado {
  font-family: var(--f-mono);
  font-size: 11.5px;
  margin: 4px 0 8px;
  color: var(--niebla);
}
.config-estado[data-ok] { color: var(--verde); }
.config-par { display: flex; gap: 8px; }
.config-par .entrada { flex: 1; }

.tunel-url {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--verde);
  background: var(--tablero-2);
  border: 1px solid rgba(67, 217, 163, 0.35);
  border-radius: 2px;
  padding: 10px 12px;
  word-break: break-all;
  margin-bottom: 10px;
  user-select: all;
}

/* ── avisos (toasts) ──────────────────────────────────────────────────────── */

.avisos {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(420px, calc(100vw - 32px));
}
.aviso {
  background: var(--tablero);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--cian);
  border-radius: var(--r);
  padding: 10px 14px;
  font-size: 13.5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  animation: aviso-entra 0.2s ease-out;
}
.aviso[data-tono="ok"] { border-left-color: var(--verde); }
.aviso[data-tono="falla"] { border-left-color: var(--rojo); }
.aviso[data-tono="atencion"] { border-left-color: var(--amarillo); }
@keyframes aviso-entra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ── celulares angostos ───────────────────────────────────────────────────── */

@media (max-width: 520px) {
  /* (cabecera, colchón inferior y mínimos táctiles: ahora los define el shell
     de teléfono al final de este archivo, para TODOS los anchos) */
  .chat-historial { max-height: 46dvh; }
  .marco-video video { max-height: 52dvh; }
  .vista-titulo { flex-wrap: wrap; }
}

/* ── SALA en teléfono: deck fijo arriba, la charla es el scroll ──────────── */

@media (max-width: 1019px) {
  /* El deck (video + estado + aprobables) queda CLAVADO bajo la cabecera:
     scrolear la charla nunca se lo lleva — lo aprobable siempre a la vista. */
  .sala-fija {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--fondo, #0A1420);
    padding-bottom: 6px;
    box-shadow: 0 12px 18px -14px rgba(0, 0, 0, .8);
  }
  /* el video compacto arriba + la barra de tabs pegada abajo */
  .sala-fija .marco-video video,
  .sala-fija .marco-vacio { max-height: 30dvh; background: #000; }
  .sala-fija .pestana { min-height: 38px; padding: 6px 10px; font-size: .82em; }
  .tabs-sala { display: flex; gap: 6px; padding: 6px 0 0; }
  .tabs-sala .pestana { flex: 1; min-height: 42px; font-weight: 800; }
  /* el cuerpo del tab activo es LA vista; los otros no existen */
  .tab-sala-cuerpo.oculto { display: none; }
  .tab-sala-cuerpo { overscroll-behavior: contain; }
  /* Redes y Ajustes scrollean adentro (el alto lo fija sala.js) */
  .tab-sala-cuerpo:not(.tab-edicion) { overflow-y: auto; }
  /* el tab de EDICIÓN es tablero, no lectura: compacto y sin párrafos
     (la guía completa vive en la conversación y en escritorio) */
  .tab-edicion .panel { margin-bottom: 6px; }
  .tab-edicion .rotulo { padding: 8px 12px; font-size: .78em; }
  .tab-edicion .panel > div { padding-left: 12px; padding-right: 12px; }
  .tab-edicion .tren { display: none; }
  .tab-edicion .pct-sub { font-size: .78em; }
  .tab-edicion .tira-capturas { display: flex; gap: 8px; overflow-x: auto; flex-wrap: nowrap; }
  .tab-edicion .tira-capturas img { max-height: 13dvh; width: auto; }
  .tab-edicion .panel[data-aprobadas="si"] .tira-capturas { display: none; }
  .tab-edicion .panel:not(.chat-panel) p,
  .tab-edicion .panel:not(.chat-panel) .campo-ayuda,
  .tab-edicion .guia-texto > span { display: none; }
  .tab-edicion .btn { min-height: 40px; padding: 8px 14px; }
  .tab-edicion .acciones { margin: 0; }
  /* la botonera en UNA fila: cada px de alto que ahorra es chat (pedido del
     dueño — "hay que cuidar ese espacio") */
  .tab-edicion .acciones .btn-chico {
    flex: 1 1 auto;
    min-height: 38px;
    padding: 6px 8px;
    font-size: .8em;
    white-space: nowrap;
  }
  /* sin trabajo activo, el panel de estado es ruido */
  .tab-edicion .panel[data-ocioso="si"] { display: none; }
  /* capturas aprobadas = misión cumplida: el panel entero se va
     (la descarga vive en la botonera) */
  .tab-edicion .panel[data-aprobadas="si"] { display: none; }
  /* botón de pantalla completa: grande, arriba a la izquierda del video */
  .marco-video { position: relative; }
  .btn-pantalla-completa {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    width: 44px;
    height: 44px;
    font-size: 22px;
    line-height: 1;
    color: #EAF2FB;
    background: rgba(8, 20, 40, .72);
    border: 1px solid rgba(237, 243, 250, .3);
    border-radius: 10px;
  }
  .btn-pantalla-completa:active { background: rgba(30, 94, 255, .8); }
  /* En la sala, la página entera mide 100% de pantalla: sin colchón inferior
     no queda NADA para scrolear a nivel página (pedido del dueño). */
  /* la conversación scrollea ADENTRO (el alto lo fija sala.js midiendo lo
     que el deck ocupa): la entrada del chat queda SIEMPRE a la vista y el
     scroll NUNCA se encadena a la página (el arrastre hasta arriba que
     reclamó el dueño era justo eso). */
  .sala-charla .chat-historial { max-height: none; overscroll-behavior: contain; }
  /* título de la sala: UNA línea chiquita, sin slug gigante */
  .vista-titulo { margin: 2px 0 8px; }
  .vista-titulo h1 {
    font-size: 13px;
    font-weight: 600;
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── PWA instalada en el teléfono (pantalla completa, notch incluido) ────── */

@media (display-mode: standalone) {
  /* el notch y la barra de gestos: la cabecera y la tab bar del shell ya
     respetan env(safe-area-inset-*); acá solo los laterales */
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ── utilidades ───────────────────────────────────────────────────────────── */

.mono { font-family: var(--f-mono); }
.oculto { display: none !important; }
.solo-lector {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ── escritorio ───────────────────────────────────────────────────────────── */

@media (min-width: 1020px) {
  /* REDISEÑO conversación-primero: el chat es la interfaz — se lleva el ancho.
     El video es consulta (columna angosta, sticky); estado y herramientas
     viven debajo de él para no empujar el chat. */
  :root { --ancho-col: 1240px; }
  body { font-size: 15.5px; }

  .sala {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }
  .sala-izquierda {
    position: sticky;
    top: 72px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
  }
  /* El VIDEO nunca se pierde de vista (reclamo del dueño: los paneles que
     aparecen al terminar el render lo empujaban fuera de pantalla): el
     player queda CLAVADO arriba de la columna mientras el resto scrollea —
     misma filosofía que el deck fijo del teléfono. */
  .sala-izquierda > .panel:first-child {
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
    box-shadow: 0 12px 18px -14px rgba(0, 0, 0, .8);
  }
  .sala-derecha { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
  .chat-historial { max-height: none; height: calc(100dvh - 340px); min-height: 420px; }
  .marco-video video, .marco-vacio { max-height: 44vh; }
  /* Los mensajes respiran: el texto del editor es el contenido principal */
  .msg-cuerpo { font-size: 15.5px; line-height: 1.62; }
  .msg { margin-bottom: 18px; }
}

/* ── movimiento reducido ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .pista-relleno { animation: none; }
  .chat-historial { scroll-behavior: auto; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SHELL DE TELÉFONO (Prompt 0, 16/9/2026)
   La app mide la altura visual (--alto-visual la pone ui.js con
   visualViewport: con el teclado abierto, el campo enfocado sigue a la vista).
   Cabecera mínima arriba, tab bar abajo, <main> scrollea ADENTRO. La página
   nunca scrollea: html/body con overflow hidden.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --alto-cabecera: 52px;
  --alto-tabbar: 56px;
  --toque: 44px;                 /* mínimo táctil (regla de iOS) */
  --dur: 200ms;                  /* transiciones de pantalla y sheets */
  --suave: cubic-bezier(.2, .7, .2, 1);
}

html, body { height: 100%; overflow: hidden; }
body { min-height: 0; }

.app-telefono {
  height: var(--alto-visual, 100dvh);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── cabecera mínima: ‹ volver | título | acción ─────────────────────────── */

.app-telefono .cabecera {
  position: static;               /* ya no es sticky: el layout la clava */
  flex: none;
  padding-top: env(safe-area-inset-top);
}
.app-telefono .cabecera-fila {
  max-width: none;
  height: var(--alto-cabecera);
  padding: 0 8px;
  display: grid;
  grid-template-columns: minmax(64px, 1fr) auto minmax(64px, 1fr);
  align-items: center;
  gap: 4px;
}
.cab-izq { justify-self: start; }
.cab-der { justify-self: end; display: flex; align-items: center; gap: 4px; }
.cab-volver {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: var(--toque);
  padding: 0 10px 0 4px;
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cian);
  -webkit-tap-highlight-color: transparent;
}
.cab-volver:hover { text-decoration: none; }
.cab-volver:active { opacity: .6; }
.cab-chevron { font-size: 26px; line-height: 1; margin-top: -3px; }
.cab-titulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  max-width: 62vw;
}
.cab-titulo h1 {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
/* acción de la cabecera: ícono o palabra corta, 44px */
.cab-der .btn, .cab-der button, .cab-der a {
  min-height: var(--toque);
  min-width: var(--toque);
  padding: 0 10px;
}

/* ── contenido: el ÚNICO scroll de la pantalla ────────────────────────────── */

.app-telefono .contenido {
  flex: 1;
  min-height: 0;
  max-width: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 12px 16px;
  scrollbar-width: none;
}
.app-telefono .contenido::-webkit-scrollbar { display: none; }
/* la cabecera ya muestra el título de la pantalla: el de la vista sobra en teléfono */
.app-telefono .vista-titulo { display: none; }
/* la sala calcula sus alturas contra el borde de main (ver sala.js) */
.app-telefono .contenido:has(.sala-vertical) { padding-bottom: 8px; }

/* ── tab bar ──────────────────────────────────────────────────────────────── */

.tabbar {
  flex: none;
  display: flex;
  align-items: stretch;
  height: calc(var(--alto-tabbar) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(10, 20, 32, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--linea-suave);
  transition: transform var(--dur) var(--suave);
}
.teclado-abierto .tabbar { display: none; }
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--niebla);
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur);
}
.tab:hover { text-decoration: none; }
.tab:active { opacity: .7; }
.tab-icono { font-size: 21px; line-height: 1; }
.tab[aria-current="page"] { color: var(--cian); }
.tab[aria-current="page"] .tab-icono { transform: translateY(-1px); }

/* ── sheets: paneles deslizables desde abajo ──────────────────────────────── */

.sheet-velo {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(5, 9, 14, 0);
  transition: background var(--dur);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet-velo-visible { background: rgba(5, 9, 14, 0.62); }
.sheet {
  width: min(560px, 100%);
  max-height: 90%;
  display: flex;
  flex-direction: column;
  background: var(--tablero);
  border: 1px solid var(--linea);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
  transform: translateY(100%);
  transition: transform var(--dur) var(--suave);
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet-visible { transform: translateY(0); }
.sheet[data-alto="alto"] { height: 90%; }
.sheet[data-alto="medio"] { height: 62%; }
.sheet-asa {
  width: 40px; height: 4px;
  border-radius: 2px;
  background: var(--linea);
  margin: 8px auto 2px;
  flex: none;
}
.sheet-cab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 8px 16px;
  flex: none;
}
.sheet-cab h2 {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sheet-cerrar {
  width: var(--toque); height: var(--toque);
  border: none; background: none;
  color: var(--niebla);
  font-size: 18px;
  border-radius: var(--r);
}
.sheet-cerrar:active { background: var(--tablero-2); }
.sheet-cuerpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 16px 12px;
}
.sheet-texto { color: var(--niebla); font-size: 15px; line-height: 1.5; }
.sheet-pie {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--linea-suave);
  background: var(--tablero);
}
.sheet-pie .btn { min-height: 48px; font-size: 14px; }

/* ── lista tocable estilo app ─────────────────────────────────────────────── */

.lista-tocable { margin-bottom: 18px; }
.lista-titulo {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--niebla);
  margin: 0 4px 6px;
}
.fila {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 12px;
  background: var(--tablero);
  border: 1px solid var(--linea);
  border-bottom-width: 0;
  color: var(--vapor);
  text-align: left;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fila:first-of-type { border-radius: var(--r) var(--r) 0 0; }
.fila:last-of-type { border-bottom-width: 1px; border-radius: 0 0 var(--r) var(--r); }
.fila:first-of-type:last-of-type { border-radius: var(--r); }
.fila:hover { text-decoration: none; }
.fila:active { background: var(--tablero-2); }
div.fila { cursor: default; }
.fila-icono { width: 28px; font-size: 20px; text-align: center; flex: none; }
.fila-mini { width: 40px; height: 40px; object-fit: cover; border-radius: 3px; flex: none; background: var(--tablero-2); }
.fila-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fila-titulo { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-detalle { font-size: 12.5px; color: var(--niebla); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-chevron { color: var(--niebla); font-size: 22px; line-height: 1; flex: none; }
.fila-falla .fila-titulo { color: var(--rojo); }

/* ── ajustes: tarjeta de perfil ───────────────────────────────────────────── */

.perfil {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  margin-bottom: 18px;
  background: var(--tablero);
  border: 1px solid var(--linea);
  border-radius: var(--r);
}
.perfil-avatar {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--azul);
  color: #fff;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 22px;
  border-radius: 50%;
  flex: none;
}
.perfil-texto { min-width: 0; }
.perfil-nombre { font-family: var(--f-display); font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perfil-detalle { font-family: var(--f-mono); font-size: 12px; color: var(--niebla); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── tacto: mínimos en TODA la app (no solo en <520px) ────────────────────── */

.btn { min-height: var(--toque); }
.btn-chico { min-height: 36px; }
.pestana { min-height: var(--toque); }
.entrada, textarea.entrada, select.entrada { font-size: 16px; min-height: var(--toque); }
.sugerencia { min-height: 36px; }

/* ── escritorio: el mismo shell, centrado y con aire ─────────────────────── */

@media (min-width: 1020px) {
  .app-telefono .cabecera-fila { max-width: var(--ancho-col); margin: 0 auto; }
  .app-telefono .contenido { max-width: var(--ancho-col); margin: 0 auto; padding: 18px 16px 24px; }
  .app-telefono .vista-titulo { display: flex; }
  .tabbar { justify-content: center; }
  .tab { flex: 0 0 140px; flex-direction: row; gap: 8px; }
}

/* ── movimiento reducido ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet-velo, .tabbar, .tab { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   iOS / iPhone — que el PWA se comporte como una app de Apple (16/9/2026)
   ═══════════════════════════════════════════════════════════════════════════ */

/* sin rebote elástico de la página ni "tirar para refrescar": la app es la
   pantalla entera; solo los contenedores internos rebotan (como en una app) */
html, body { overscroll-behavior: none; }
body { -webkit-overflow-scrolling: touch; }

/* sin zoom por doble toque en la interfaz (sigue permitido pellizcar imágenes
   del visor), y sin el resaltado gris de Safari al tocar */
* { -webkit-tap-highlight-color: transparent; }
button, a, .tab, .fila, .pestana, .sheet-cab, .cabecera { touch-action: manipulation; }

/* el "chrome" de la app no se selecciona ni abre el menú de copiar al mantener
   apretado (cabecera, tab bar, botones); el contenido sí se puede seleccionar */
.cabecera, .tabbar, .btn, .tab, .fila, .sheet-asa, .sheet-cab, .pestana {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* fuentes de sistema de iOS para el cuerpo (San Francisco): lo que el iPhone
   renderiza mejor y más rápido; los rótulos siguen en Chakra Petch (marca) */
:root { --f-cuerpo: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif; }

/* los inputs de Safari traen bordes y sombras propias: se apagan para que
   el campo sea el nuestro; y la fecha/hora no se ve en gris de sistema */
.entrada, textarea.entrada, select.entrada { -webkit-appearance: none; appearance: none; border-radius: var(--r); }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* barra de estado translúcida (apple-mobile-web-app-status-bar-style): el
   fondo de la cabecera pinta también debajo del reloj y la batería */
.app-telefono .cabecera { background: rgba(10, 20, 32, 0.96); }

/* la cinta de scroll interna: fina y sin flechas, como en iOS */
.contenido::-webkit-scrollbar, .sheet-cuerpo::-webkit-scrollbar, .chat-historial::-webkit-scrollbar { width: 0; height: 0; }

/* animación de "empujar" entre pantallas (la vista nueva entra desde la
   derecha, como el navigation controller de iOS) */
@keyframes pantalla-entra {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}
.app-telefono .contenido > *:not(.oculto) { animation: pantalla-entra var(--dur) var(--suave) both; }
@media (prefers-reduced-motion: reduce) { .app-telefono .contenido > * { animation: none; } }

/* iconos de la tab bar en SVG (trazo, estilo SF Symbols): el activo se rellena */
.tab-icono svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab[aria-current="page"] .tab-icono svg { fill: rgba(93, 169, 255, 0.18); stroke-width: 2.1; }

/* el sello de versión vive en Ajustes; flotando pisaba la tab bar */
body:has(.app-telefono) #sello-version { display: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   SALA COMO APP (Prompt 3, 16/9/2026) — cinco pestañas a pantalla completa
   ═══════════════════════════════════════════════════════════════════════════ */

/* la sala llena el main sin colchones: cada pestaña scrollea adentro */
.app-telefono .contenido[data-ruta="sala"] { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
/* el nodo envolvente de la vista también es columna flex: sin esto el chat crecía a 12.000px */
.app-telefono .contenido[data-ruta="sala"] > div { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sala-app { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sala-app .tab-sala-cuerpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 10px 12px 14px;
}
.sala-app .tab-sala-cuerpo.oculto { display: none; }
.sala-app .panel { margin-bottom: 10px; }

/* CHAT: columna que llena la pestaña; el historial crece y scrollea solo */
.sala-app .tab-chat { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.sala-app .tab-chat .chat-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; border: none; border-radius: 0; background: transparent; }
.sala-app .tab-chat .rotulo { flex: none; padding: 8px 14px; background: var(--tablero); }
.sala-app .tab-chat .chat-historial { flex: 1; min-height: 0; max-height: none !important; height: auto !important; padding: 12px 14px; }
.sala-app .tab-chat .sugerencias { flex: none; padding: 0 10px 8px; }
.sala-app .tab-chat .chat-entrada { flex: none; position: static; border-radius: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
.sala-app .tab-chat .chat-entrada textarea { min-height: var(--toque); }
/* burbujas: el editor a la izquierda con fondo, vos a la derecha en azul */
.sala-app .msg { max-width: 92%; }
.sala-app .msg[data-de="vos"] { margin-left: auto; }
.sala-app .msg-cuerpo { border-left: none; padding: 10px 12px; border-radius: 12px; background: var(--tablero); border: 1px solid var(--linea-suave); }
.sala-app .msg[data-de="vos"] .msg-cuerpo { background: var(--azul); border-color: var(--azul); color: #fff; }
.sala-app .msg[data-de="vos"] .msg-cabeza { justify-content: flex-end; }

/* VIDEO: reproductor a lo ancho, vertical, con las acciones debajo */
.sala-app .tab-video .marco-video video, .sala-app .tab-video .marco-vacio { max-height: 62dvh; }
.sala-app .tab-video .acciones .btn { flex: 1 1 auto; min-height: 48px; }

/* APROBAR: las capturas grandes, una por pantalla, deslizables */
.sala-app .tab-aprobar .tira-capturas { padding: 12px; gap: 12px; }
.sala-app .tab-aprobar .captura { width: min(300px, 80vw); }
.sala-app .tab-aprobar .captura img { aspect-ratio: 9 / 16; }
.sala-app .tab-aprobar .acciones .btn { flex: 1 1 auto; min-height: 48px; }
.sala-app .tab-aprobar .panel[data-ocioso="si"] { display: none; }
.sala-app .vacio-aprobar { display: none; margin-top: 8px; }
.sala-app .tab-aprobar .panel.oculto + .vacio-aprobar { display: block; }

/* la barra propia de la sala: botones (no links), con insignias */
.tabbar-sala .tab { position: relative; border: none; background: none; font: inherit; font-family: var(--f-display); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--niebla); cursor: pointer; }
.tabbar-sala .tab[aria-current="page"] { color: var(--cian); }
.tab-insignia {
  position: absolute;
  top: 6px;
  left: calc(50% + 6px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--cian);
  color: var(--acero);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  letter-spacing: 0;
}
.tab-insignia[data-tono="trabajando"] { background: var(--amarillo); animation: latido 1.1s ease-in-out infinite; }
.tab-insignia[data-tono="ok"] { background: var(--verde); }

/* ═══════════════════════════════════════════════════════════════════════════
   VIDEOS COMO APP (Prompt 2, 16/9/2026) — lista tocable + botón flotante
   ═══════════════════════════════════════════════════════════════════════════ */

.vista-videos { padding-bottom: 80px; }
.buscador { margin-bottom: 12px; }
.lista-videos .fila { min-height: 66px; }
.fila-mini-video { width: 44px; height: 66px; object-fit: cover; border-radius: 4px; }
.fila-mini-letra {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--tablero-2);
  border: 1px solid var(--linea);
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--cian);
  flex: none;
}
.fila-atencion .fila-detalle { color: var(--amarillo); }
.lista-videos .chip { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }

/* botón flotante "+" (56px, azul DMSI, sobre la tab bar) */
.fab {
  position: fixed;
  right: 16px;
  bottom: calc(var(--alto-tabbar) + env(safe-area-inset-bottom) + 16px);
  width: 56px; height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--azul);
  color: #fff;
  font-size: 32px;
  line-height: 1;
  font-weight: 300;
  box-shadow: 0 8px 24px rgba(2, 82, 180, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
  z-index: 60;
  cursor: pointer;
  transition: transform var(--dur) var(--suave), background var(--dur);
}
.fab:active { transform: scale(0.94); background: var(--azul-vivo); }
.teclado-abierto .fab { display: none; }

/* el formulario de nuevo video dentro del panel deslizable: pasos numerados */
.ingreso { margin: 0; }
.ingreso-form { padding: 4px 0 8px; }
.paso-ingreso {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vapor);
}
.paso-ingreso:first-child { margin-top: 4px; }
.paso-n {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 12px;
}
.ingreso-form .btn-primario { min-height: 52px; margin-top: 8px; }
.ingreso-form .zona-archivo { padding: 22px 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   AJUSTES / ADMINISTRACIÓN COMO APP (Prompt 4, 16/9/2026)
   ═══════════════════════════════════════════════════════════════════════════ */

.seccion-config { padding: 4px 0 12px; }
.seccion-config .config-fila { margin-bottom: 18px; }
.seccion-config .config-par { flex-direction: column; gap: 8px; }
.seccion-config .config-par .btn { min-height: 46px; }
.seccion-config .btn-bloque { min-height: 50px; }

/* opciones como filas con marca (radio), no <select> */
.opciones { display: flex; flex-direction: column; border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; }
.opcion {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 8px 12px;
  background: var(--tablero-2); border: none; border-bottom: 1px solid var(--linea-suave);
  color: var(--vapor); font: inherit; text-align: left; cursor: pointer;
}
.opcion:last-child { border-bottom: none; }
.opcion .opcion-texto { flex: 1; min-width: 0; }
.opcion .btn-oir { margin-left: auto; flex: none; min-width: 44px; min-height: 40px; padding: 0 12px; }

/* ═══ EL ESTUDIO (videos creados sin cámara, 29/9/2026) ═══════════════════ */
.estudio-intro { margin: 0 16px 10px; color: var(--vapor-2, var(--humo)); font-size: 13.5px; line-height: 1.4; }
.estudio-detalle { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
.estudio-estado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.estudio-barra { height: 6px; border-radius: 3px; background: var(--tablero-2); overflow: hidden; }
.estudio-barra-relleno { height: 100%; background: var(--cian); border-radius: 3px; transition: width 0.6s ease; }
.estudio-tren { display: flex; gap: 6px; flex-wrap: wrap; }
.estudio-paso { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--linea); color: var(--humo); }
.estudio-paso.hecho { color: var(--verde); border-color: rgba(67, 217, 163, 0.45); }
.estudio-paso.activo { color: var(--amarillo); border-color: rgba(255, 212, 0, 0.45); }
.estudio-titulo-guion { margin: 0; font-weight: 800; font-size: 17px; }
.estudio-escenas { display: flex; flex-direction: column; gap: 10px; }
.estudio-escena { padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--r); background: var(--tablero-2); }
.estudio-escena-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.estudio-escena-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--cian); color: #0a0a1a; font-weight: 800; font-size: 12px; }
.estudio-escena-texto { margin: 0 0 4px; font-size: 14.5px; line-height: 1.45; }
.estudio-cierre { margin: 0; font-style: italic; color: var(--vapor); }
.opcion:active { background: var(--tablero); }
.opcion-marca {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--linea); flex: none;
  display: grid; place-items: center;
}
.opcion[aria-checked="true"] .opcion-marca { border-color: var(--cian); }
.opcion[aria-checked="true"] .opcion-marca::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cian); }
.opcion-texto { font-size: 14.5px; line-height: 1.35; }
.opcion[aria-checked="true"] .opcion-texto { color: var(--vapor); font-weight: 600; }

.tunel-estado { padding: 12px; margin-bottom: 16px; border-radius: var(--r); border: 1px solid var(--linea); background: var(--tablero-2); }
.tunel-on { border-color: rgba(67, 217, 163, 0.45); }
.tunel-estado .tunel-url { margin: 6px 0 10px; }

.usuario-fila { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--linea-suave); }
.usuario-nombre { font-weight: 700; font-size: 15px; }
.usuario-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.usuario-acciones .btn { flex: 1 1 auto; min-height: 40px; }

.marca-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.marca-logo { max-height: 64px; max-width: 200px; background: rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 6px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ENTRAR COMO APP (Prompt 1, 16/9/2026)
   ═══════════════════════════════════════════════════════════════════════════ */

.portal-app {
  height: var(--alto-visual, 100dvh);
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  overflow: hidden;
}
.portal-app .portal-caja { width: min(400px, 100%); margin: 0 auto; }
.portal-app .portal-logo { margin-bottom: 26px; transition: transform var(--dur) var(--suave), margin var(--dur) var(--suave); transform-origin: center top; }
.portal-app .pl-marca { margin-bottom: 8px; }
.portal-app .pl-marca .marca-dmsi { font-size: 12px; padding: 4px 9px; }
.portal-app .pl-fabrica { font-size: 28px; }
/* con el teclado abierto la marca se achica: "Entrar" sigue a la vista */
.teclado-abierto .portal-app { justify-content: flex-start; }
.teclado-abierto .portal-app .portal-logo { transform: scale(0.62); margin-bottom: 4px; }
.portal-form .campo { margin-bottom: 12px; }
.portal-form .btn-primario { min-height: 52px; font-size: 15px; margin-top: 4px; }
.portal-form .btn-borde { min-height: 48px; }
.portal-pie-app { text-align: center; margin-top: 22px; }
.portal-link {
  background: none; border: none; color: var(--niebla);
  font: inherit; font-size: 14px; min-height: var(--toque); padding: 8px 12px; cursor: pointer;
}
.portal-link strong { color: var(--cian); }
.registro-form .btn-primario { min-height: 52px; margin-top: 4px; }


/* ═══════════════════════════════════════════════════════════════════════════
   VISOR DE IMÁGENES (Prompt 6, 16/9/2026)
   ═══════════════════════════════════════════════════════════════════════════ */

.visor-app {
  position: fixed; inset: 0; z-index: 180;
  display: flex; flex-direction: column;
  background: #000;
  opacity: 0; transition: opacity var(--dur);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.visor-visible { opacity: 1; }
.visor-cab {
  flex: none; height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px 0 16px;
  color: #fff;
  font-family: var(--f-mono); font-size: 13px;
}
.visor-cerrar { width: var(--toque); height: var(--toque); border: none; background: none; color: #fff; font-size: 20px; }
.visor-pista {
  flex: 1; min-height: 0;
  display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
  touch-action: pan-x pinch-zoom;
}
.visor-pista::-webkit-scrollbar { display: none; }
.visor-item {
  flex: none; width: 100%; height: 100%;
  scroll-snap-align: center;
  display: grid; place-items: center;
  padding: 8px;
}
.visor-item img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  transition: transform var(--dur) var(--suave);
  background: #0a0a0a;
}
.visor-acciones {
  flex: none;
  display: flex; gap: 8px;
  padding: 10px 12px 12px;
  background: rgba(0, 0, 0, 0.6);
}
.visor-acciones .btn { flex: 1 1 auto; min-height: 48px; }