/* ==========================================================================
   DowntimeCO — Shell de la aplicación de demostración
   --------------------------------------------------------------------------
   Se carga DESPUÉS de ../css/styles.css: hereda los tokens del PRD, la
   tipografía y componentes que ya existen (.btn, .card, .result__rows,
   .pareto, .mono). Aquí solo vive lo que la landing no tiene: la barra de
   aplicación, los tableros y la interfaz táctil del operador.
   ========================================================================== */

/* El glow fijo lo aporta `body::before` de styles.css; aquí solo se ajusta la
   intensidad, porque en un panel operativo la legibilidad de las tablas manda
   sobre la atmósfera. */
body.app-body {
  background: var(--bg-base);
  min-height: 100vh;
}
body.app-body::before {
  background:
    radial-gradient(1100px 620px at 50% -16%, rgba(255, 182, 39, 0.09), transparent 60%),
    radial-gradient(880px 560px at 2% 4%,     rgba(53, 208, 232, 0.05), transparent 58%),
    radial-gradient(900px 700px at 78% 104%,  rgba(255, 182, 39, 0.04), transparent 62%);
}

/* --------------------------------------------------------------- app bar */
.app__bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 22px;
  background: rgba(6, 8, 11, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.app__brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -0.02em; }
.app__planta {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); padding-left: 14px; border-left: 1px solid var(--border);
}
.app__planta:empty { display: none; }

/* Pantalla de acceso: las descripciones de rol arrancan en el mismo eje. */
.result__rows--roles { grid-template-columns: auto 1fr; }
.result__rows--roles .result__row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.result__rows--roles .result__row b { text-align: left; }
.app__sim {
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: var(--accent-amber-tint); color: var(--accent-amber);
}
.app__user { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.app__user-txt { display: flex; flex-direction: column; line-height: 1.35; text-align: right; }
.app__user-txt b { font-size: 0.86rem; font-weight: 600; }
.app__user-txt span { font-size: 0.68rem; color: var(--text-muted); }
.app__salir {
  background: none; border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 15px; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.app__salir:hover { border-color: var(--accent-red); color: var(--accent-red); }
@media (max-width: 620px) {
  .app__planta, .app__sim { display: none; }
  .app__user-txt span { display: none; }
}

.app__main { max-width: 1240px; margin-inline: auto; padding: 26px 22px 70px; }
.app__title { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.app__title h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
.app__title p { font-size: 0.9rem; margin-top: 6px; }

/* ---------------------------------------------------------------- avisos */
.aviso {
  border: 1px solid rgba(255, 77, 79, 0.45);
  background: var(--accent-red-tint);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-size: 0.87rem;
  color: var(--text-dim);
  margin-bottom: 22px;
}
.aviso b { color: var(--text-primary); }

/* Notificaciones breves: sustituyen los alertas nativos del navegador para
   conservar la jerarquía visual del tablero y no interrumpir la demo. */
.toast-stack {
  position: fixed; z-index: 100; top: 84px; right: 22px;
  width: min(390px, calc(100vw - 32px)); display: grid; gap: 10px;
  pointer-events: none;
}
.toast {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: start; gap: 10px;
  padding: 13px 14px; border: 1px solid var(--border); border-left: 3px solid var(--accent-cyan);
  border-radius: var(--r-md); background: rgba(15, 20, 28, 0.97);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38); color: var(--text-secondary);
  animation: toast-entra 0.2s ease-out both; pointer-events: auto;
}
.toast--ok { border-left-color: var(--accent-green); }
.toast--error { border-left-color: var(--accent-red); }
.toast--warn { border-left-color: var(--accent-amber); }
.toast__icon { font-family: var(--mono); font-weight: 800; line-height: 1.35; color: var(--accent-cyan); }
.toast--ok .toast__icon { color: var(--accent-green); }
.toast--error .toast__icon { color: var(--accent-red); }
.toast--warn .toast__icon { color: var(--accent-amber); }
.toast__title { display: block; font-size: 0.78rem; color: var(--text-primary); margin-bottom: 3px; }
.toast__text { display: block; font-size: 0.75rem; line-height: 1.45; }
.toast__close { border: 0; background: transparent; color: var(--text-muted); font-size: 1rem; line-height: 1; cursor: pointer; padding: 1px 2px; }
.toast__close:hover { color: var(--text-primary); }
.toast--sale { animation: toast-sale 0.18s ease-in both; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(-8px) translateX(8px); } to { opacity: 1; transform: none; } }
@keyframes toast-sale { to { opacity: 0; transform: translateX(14px); } }
@media (max-width: 620px) { .toast-stack { top: 70px; right: 16px; } }

/* ------------------------------------------------------------------ KPIs */
.kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 22px; }
.kpi { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; }
.kpi__lbl { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.kpi__val { font-family: var(--mono); font-size: 1.65rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi__val--red { color: var(--accent-red); }
.kpi__val--green { color: var(--accent-green); }
.kpi__val--cyan { color: var(--accent-cyan); }
.kpi__pie { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }

/* --------------------------------------------------------------- paneles */
.rejilla { display: grid; gap: 18px; }
@media (min-width: 1000px) { .rejilla--2 { grid-template-columns: 1.25fr 0.75fr; align-items: start; } }

.panel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.panel__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 18px; border-bottom: 1px solid var(--border); background: var(--bg-panel-alt);
}
.panel__head h2 { font-size: 0.94rem; font-weight: 600; }
.panel__head .mono { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-left: auto; }
.panel__body { padding: 18px; }
.panel__body--flush { padding: 0; }

/* ---------------------------------------------------------------- tablas */
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.tabla th, .tabla td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tabla thead th {
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--text-muted); font-weight: 600;
}
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.tabla td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tabla td.dinero { text-align: right; font-family: var(--mono); color: var(--accent-red); font-weight: 600; }
.tabla .apagado { color: var(--text-muted); }
.tabla tr.es-demo td:first-child::after {
  content: "nuevo";
  margin-left: 8px; padding: 2px 7px; border-radius: 999px;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--accent-amber-tint); color: var(--accent-amber);
}

.tabla-paginacion {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-top: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(255,255,255,0.012), transparent 56%);
}
.tabla-paginacion__estado {
  color: var(--text-muted); font-size: 0.64rem; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tabla-paginacion__acciones { display: flex; gap: 8px; }
.tabla-paginacion .btn--sm {
  min-height: 34px; padding: 7px 11px; border-radius: 7px;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.07em;
  text-transform: uppercase;
}
.tabla-paginacion .btn--ghost {
  border-color: var(--border); background: rgba(255,255,255,0.025); color: var(--text-secondary);
}
.tabla-paginacion .btn--ghost:hover:not(:disabled) {
  border-color: rgba(255, 182, 39, 0.72); background: var(--accent-amber-tint);
  color: var(--accent-amber); box-shadow: 0 5px 16px -11px rgba(255, 182, 39, 0.8);
}
.tabla-paginacion .btn--ghost:disabled {
  opacity: 1; border-color: rgba(31, 42, 54, 0.82); background: transparent;
  color: rgba(139, 149, 163, 0.5); cursor: not-allowed; box-shadow: none;
}
@media (max-width: 560px) {
  .tabla-paginacion { align-items: flex-start; flex-direction: column; }
}

/* -------------------------------------------------------- estado activos */
.pill-estado {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  padding: 4px 10px; border-radius: 999px; border: 1px solid transparent;
}
.pill-estado i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-estado--run   { color: var(--accent-green); border-color: rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.1); }
.pill-estado--setup { color: var(--accent-amber); border-color: rgba(255, 182, 39, 0.4); background: var(--accent-amber-tint); }
.pill-estado--stop  { color: var(--accent-red);   border-color: rgba(255, 77, 79, 0.45);  background: var(--accent-red-tint); }
.pill-estado--espera { color: #8b95a3; border-color: rgba(139, 149, 163, 0.45); background: rgba(139, 149, 163, 0.1); }

.mosaico { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.activo-card {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-panel-alt); padding: 14px 15px;
}
.activo-card--stop { border-color: rgba(255, 77, 79, 0.45); background: linear-gradient(180deg, var(--accent-red-tint), var(--bg-panel-alt)); }
.activo-card--setup { border-color: rgba(255, 182, 39, 0.35); }
.activo-card--espera { border-color: rgba(139, 149, 163, 0.4); }
.activo-card--espera .activo-card__id { color: #8b95a3; }
.activo-card__id { font-family: var(--mono); font-size: 0.95rem; font-weight: 700; color: var(--accent-amber); }
.activo-card__nom { font-size: 0.76rem; color: var(--text-muted); margin: 2px 0 10px; }
.activo-card__pie { font-family: var(--mono); font-size: 0.72rem; color: var(--text-secondary); margin-top: 10px; }
.activo-card__cuello {
  display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 999px;
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--accent-red-tint); color: var(--accent-red);
}
.activo-card__cuello--paralelo {
  background: var(--accent-amber-tint); color: var(--accent-amber);
}

/* --------------------------------------------------- leaderboard turnos */
.turnos { display: grid; gap: 10px; }
.turno-fila { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.turno-fila__id {
  font-family: var(--mono); font-weight: 700; font-size: 0.8rem;
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--bg-panel-alt); border: 1px solid var(--border);
}
.turno-fila__id--top { border-color: var(--accent-green); color: var(--accent-green); }
.turno-fila__barra { height: 7px; border-radius: 999px; background: var(--bg-panel-alt); overflow: hidden; }
.turno-fila__barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-cyan), var(--accent-green)); }
.turno-fila__val { font-family: var(--mono); font-size: 0.82rem; color: var(--text); }
.turno-fila__meta { grid-column: 2 / -1; font-size: 0.72rem; color: var(--text-muted); }

/* ==========================================================================
   INTERFAZ TÁCTIL DEL OPERADOR
   Objetivo del PRD: registro en 3 toques y menos de 10 segundos, con áreas
   grandes para guantes y CERO cifras de dinero en pantalla.
   ========================================================================== */
.pasos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.paso {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
  /* Reseteo de <button>: el paso se ve igual que antes de ser interactivo. */
  background: none; border: none; padding: 0; cursor: default;
}
.paso b {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-panel-alt); border: 1px solid var(--border); font-size: 0.7rem;
}
.paso.is-activo { color: var(--accent-amber); }
.paso.is-activo b { border-color: var(--accent-amber); color: var(--accent-amber); }
.paso.is-hecho { color: var(--accent-green); }
.paso.is-hecho b { border-color: var(--accent-green); color: var(--accent-green); }
/* Solo los pasos ya completados (is-hecho) se pueden tocar para retroceder. */
.paso.is-clicable { cursor: pointer; }
.paso.is-clicable:hover { color: var(--text); }
.paso.is-clicable:hover b { border-color: var(--text); }

.op-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.op-btn {
  min-height: 108px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-panel-alt);
  color: var(--text-primary);
  display: grid; gap: 6px; place-content: center; justify-items: center;
  padding: 16px 12px;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.op-btn:active { transform: scale(0.98); }
.op-btn:hover { border-color: var(--line-hi); }
.op-btn b { font-size: 1.5rem; font-weight: 700; color: var(--accent-amber); letter-spacing: -0.01em; }
.op-btn span { font-family: var(--sans); font-size: 0.74rem; color: var(--text-muted); }
.op-btn.is-activo { border-color: var(--accent-amber); background: var(--accent-amber-tint); }
.op-btn--run   { border-color: rgba(52, 211, 153, 0.4); }
.op-btn--setup { border-color: rgba(255, 182, 39, 0.4); }
.op-btn--stop  { border-color: rgba(255, 77, 79, 0.45); }
.op-btn--run b   { color: var(--accent-green); }
.op-btn--setup b { color: var(--accent-amber); }
.op-btn--stop b  { color: var(--accent-red); }
.op-btn__punto { width: 30px; height: 30px; border-radius: 50%; display: block; }

.op-estado {
  display: grid; gap: 6px; place-items: center; text-align: center;
  padding: 26px 18px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--bg-panel-alt);
}
.op-estado__id { font-family: var(--mono); font-size: 2rem; font-weight: 700; color: var(--accent-amber); }
.op-estado__crono { font-family: var(--mono); font-size: 2.6rem; font-weight: 700; letter-spacing: -0.02em; }
.op-estado__crono--stop { color: var(--accent-red); }
.op-estado__crono--setup { color: var(--accent-amber); }
.op-estado__crono--run { color: var(--accent-green); }
.op-estado__causa { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }

.op-ok {
  border: 1px solid rgba(52, 211, 153, 0.45);
  background: rgba(52, 211, 153, 0.1);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-top: 18px;
  font-size: 0.88rem;
  color: var(--text-dim);
}
.op-ok b { color: var(--accent-green); }

/* ==========================================================================
   PANTALLA DE ACCESO
   ========================================================================== */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; }
.login { width: 100%; max-width: 940px; display: grid; gap: 28px; }
@media (min-width: 900px) { .login { grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; } }

.login__marca { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.login__caja { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow); }
.login__caja h2 { font-size: 1.1rem; margin-bottom: 4px; }

.cuentas { display: grid; gap: 10px; margin: 18px 0 6px; }
.cuenta {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; align-items: center;
  text-align: left; padding: 13px 15px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-panel-alt);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cuenta:hover { border-color: var(--line-hi); }
.cuenta.is-activa { border-color: var(--accent-amber); background: var(--accent-amber-tint); }
.cuenta__ico {
  grid-row: 1 / 3; width: 38px; height: 38px; border-radius: var(--r-sm);
  display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 0.8rem;
  background: var(--bg-panel); border: 1px solid var(--border); color: var(--accent-amber);
}
.cuenta b { font-size: 0.9rem; font-weight: 600; }
.cuenta span { font-family: var(--mono); font-size: 0.7rem; color: var(--text-muted); }

.login__aviso {
  border: 1px solid var(--line-hi); border-radius: var(--r-md);
  background: var(--bg-panel-alt); padding: 14px 16px;
  font-size: 0.8rem; color: var(--text-secondary); margin-top: 22px;
}
.login__aviso b { color: var(--accent-amber); }

.login__err {
  display: none; margin-top: 12px; font-size: 0.82rem; color: var(--accent-red);
}
.login__err.is-visible { display: block; }

/* ==========================================================================
   BLOQUES DE LA v2 — acordeones, bandeja, líneas y gráficas
   ========================================================================== */

/* Avatar de iniciales en la barra superior. */
.app__avatar {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-amber-tint);
  border: 1px solid var(--accent-amber);
  color: var(--accent-amber);
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em;
}

/* ----------------------------------------------------------- acordeones */
.acordeon {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  overflow: hidden;
}
.acordeon + .acordeon { margin-top: 14px; }
.acordeon__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: var(--bg-panel-alt);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.acordeon__head::-webkit-details-marker { display: none; }
.acordeon__head:hover { background: #141b24; }
.acordeon__ttl { font-size: 0.94rem; font-weight: 600; }
.acordeon__badge {
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-muted);
}
.acordeon__badge--alerta { border-color: var(--accent-red); color: var(--accent-red); background: var(--accent-red-tint); }
.acordeon__chevron { margin-left: auto; color: var(--text-muted); transition: transform 0.2s ease; }
.acordeon[open] .acordeon__chevron { transform: rotate(180deg); }
.acordeon[open] .acordeon__head { border-bottom: 1px solid var(--border); }
.acordeon__body { padding: 18px; }
.acordeon__body--flush { padding: 0; }
/* Acordeón de Análisis con IA (Operaciones y Dirección).
   El amarillo vive SOLO en la pestaña del encabezado: brillante cuando el
   análisis ya cargó, desvanecido mientras la IA trabaja. El contenido que se
   despliega conserva el fondo oscuro estándar y los colores propios de sus
   elementos (el cian de "IA pensando", las insignias de prioridad, etc.). */
.acordeon--ia > .acordeon__head {
  background: var(--accent-amber);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.acordeon--ia > .acordeon__head:hover { background: #FFC24D; }
.acordeon--ia > .acordeon__head .acordeon__ttl,
.acordeon--ia > .acordeon__head .acordeon__chevron { color: var(--bg-base); transition: color 0.25s ease; }
.acordeon--ia[open] > .acordeon__head { border-bottom-color: var(--accent-amber); }

.acordeon--ia.acordeon--ia-cargando > .acordeon__head,
.acordeon--ia.acordeon--ia-cargando > .acordeon__head:hover { background: rgba(255, 182, 39, 0.24); }
.acordeon--ia.acordeon--ia-cargando > .acordeon__head .acordeon__ttl,
.acordeon--ia.acordeon--ia-cargando > .acordeon__head .acordeon__chevron { color: rgba(255, 182, 39, 0.85); }
.acordeon--ia.acordeon--ia-cargando[open] > .acordeon__head { border-bottom-color: rgba(255, 182, 39, 0.3); }

/* Cuerpo: fondo oscuro y respiro alrededor de la tarjeta interna, para que el
   recuadro cian de "Procesando señales de planta" no quede pegado al
   encabezado ni a los bordes. */
.acordeon--ia > .acordeon__body { padding: 20px 16px 16px; background: var(--bg-panel); }
.acordeon--ia .ia { margin-top: 0; }
/* La tarjeta ya no pinta su degradado ni su filo ámbar dentro del acordeón
   (el ámbar es exclusivo de la pestaña). Mientras carga, .ia--generando sigue
   aplicando su propio borde cian. */
.acordeon--ia .ia:not(.ia--generando) { background: var(--bg-panel-alt); border-left-color: var(--line-hi); }

/* -------------------------------------------- bandeja de solicitudes --- */
.solicitudes { display: grid; gap: 10px; }
/* El contenedor del ticket es SIEMPRE neutro. Con cinco tarjetas de colores
   ninguna destaca; con una insignia roja entre contenedores grises, el
   pendiente se ve desde el otro lado del pasillo. */
.solicitud {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px 14px;
  align-items: center;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-panel-alt);
}
.solicitud__id { display: grid; gap: 2px; }
.solicitud__id b { font-size: 1rem; color: var(--accent-amber); }
.solicitud__id span { font-size: 0.66rem; color: var(--text-muted); }
.solicitud__txt { display: grid; gap: 2px; min-width: 0; }
.solicitud__txt b { font-size: 0.88rem; font-weight: 600; }
.solicitud__txt span { font-size: 0.75rem; color: var(--text-muted); }
.solicitud__reloj { display: grid; gap: 2px; text-align: right; }
.solicitud__reloj b { font-size: 1.05rem; color: var(--accent-red); }
.solicitud__reloj span { font-size: 0.74rem; color: var(--text-secondary); }
.solicitud__accion {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px dashed var(--line-hi);
}
.solicitud__select { flex: 1 1 200px; padding: 8px 10px; font-size: 0.82rem; }
.solicitud__btn { padding: 9px 18px; font-size: 0.82rem; flex: none; }
.solicitud__nota { font-size: 0.74rem; color: var(--text-muted); }

/* ------------------------------------------------- bloques por línea --- */
.linea-bloque + .linea-bloque { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border); }
.linea-bloque__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.linea-bloque__head b { font-size: 0.92rem; }
.linea-bloque__head .mono { font-size: 0.7rem; color: var(--text-muted); }

/* --------------------------------------------------------- mapa de líneas
   Recuadro FIJO (no <details>) arriba del resto del tablero: cadena de
   "prismas" por línea, uno por activo, con color de estado retroiluminado.
   Solo la leyenda de la derecha es plegable. */
.mapa-lineas {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  padding: 14px 18px;
  margin-bottom: 20px;
}
.mapa-lineas__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.mapa-lineas__leyenda summary { text-align: right; }
.mapa-lineas__ttl { font-size: 0.94rem; font-weight: 600; }
.mapa-lineas__leyenda { margin-left: auto; font-size: 0.72rem; color: var(--text-muted); }
.mapa-lineas__leyenda summary { cursor: pointer; list-style: none; user-select: none; }
.mapa-lineas__leyenda summary::-webkit-details-marker { display: none; }
.mapa-lineas__leyenda-body { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-panel-alt); }
.mapa-lineas__leyenda-body span { display: flex; align-items: center; gap: 12px; }

/* Una columna por línea, lado a lado en pantallas anchas y apiladas en una
   tableta angosta. Dentro, el flujo baja nivel por nivel (etapa por etapa). */
#mapaLineas { display: grid; gap: 18px 24px; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); align-items: start; }
.mapa-linea {
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 10px 20px;
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  overflow-x: auto;
}
.mapa-linea__id { align-self: flex-start; margin-bottom: 14px; font-size: 0.78rem; color: var(--text-muted); }
.mapa-linea__id b { margin-right: 6px; font-size: 0.82rem; color: var(--text-secondary); }
/* Equipos de una misma etapa: en paralelo, uno al lado del otro. */
.mapa-nivel { display: flex; justify-content: center; gap: var(--prisma-separacion, 28px); }
/* Las uniones entre niveles se dibujan en SVG (convergen, se ramifican o
   pasan directo). Blancas y con halo para contrastar con el fondo. */
.mapa-conector { display: block; flex: none; overflow: visible; }
.mapa-conector line { stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.55)); }

/* Flechas de flujo sobre las vías. Cian = actividad en curso (misma señal que
   usa la IA en la identidad visual). En un tramo sin producción las flechas
   se quedan quietas y apagadas, pero siguen visibles: se lee "aquí se cortó". */
.mapa-flecha-tren { opacity: 0.45; }
.mapa-flecha-tren path {
  fill: none; stroke: var(--text-muted); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.mapa-flecha-tren.is-activo { opacity: 1; animation: mapa-flujo 2250ms linear infinite; }
.mapa-flecha-tren.is-activo path { stroke: var(--accent-cyan); filter: drop-shadow(0 0 2px rgba(53, 208, 232, 0.8)); }
/* Un paso exacto (30px = FLUJO.paso en operaciones.js; 2250ms = FLUJO.periodoMs): el ciclo no tiene salto. */
@keyframes mapa-flujo { from { transform: translateX(0); } to { transform: translateX(30px); } }
@media (prefers-reduced-motion: reduce) { .mapa-flecha-tren.is-activo { animation: none; } }

/* Prisma: relleno TRANSPARENTE, solo el contorno lleva el color del estado.
   El volumen 3D sale de una segunda cara desplazada (::before) y de sombras
   interiores; el halo exterior es el "retroiluminado". --c / --c-rgb los
   fija cada modificador de estado. */
.mapa-prisma {
  --c: var(--accent-green); --c-rgb: 52, 211, 153;
  position: relative; isolation: isolate;
  flex: none;
  display: inline-grid; place-items: center;
  width: var(--prisma-ancho, 76px); height: 42px;
  border: 2px solid var(--c);
  border-radius: 6px;
  background: transparent;
  color: var(--c);
  font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
  box-shadow:
    0 0 14px rgba(var(--c-rgb), 0.45),
    inset 0 2px 0 rgba(255, 255, 255, 0.14),
    inset 0 -8px 12px rgba(var(--c-rgb), 0.12);
}
/* Cara trasera del prisma: mismo contorno, desplazado y más tenue. */
.mapa-prisma::before {
  content: "";
  position: absolute; inset: -2px;
  border: 2px solid var(--c);
  border-radius: 6px;
  opacity: 0.35;
  transform: translate(6px, 6px);
  z-index: -1;
}
.mapa-prisma--run    { --c: var(--accent-green); --c-rgb: 52, 211, 153; }
.mapa-prisma--paro   { --c: var(--accent-amber); --c-rgb: 255, 182, 39; }
.mapa-prisma--cuello { --c: var(--accent-red);   --c-rgb: 255, 77, 79; }
.mapa-prisma--espera { --c: #8b95a3;             --c-rgb: 139, 149, 163; }

/* Muestras de la leyenda: el mismo prisma, en miniatura y sin eslabón. */
.mapa-lineas__leyenda-body .mapa-prisma { width: 24px; height: 16px; border-radius: 4px; }
.mapa-lineas__leyenda-body .mapa-prisma::before { border-radius: 4px; transform: translate(3px, 3px); }

/* Botón de selección de línea en la tableta del operador. */
.op-btn--linea { min-height: 150px; }
.op-btn--linea b { font-size: 1.9rem; }

/* --------------------------------------------------------- donut chart */
.donut-wrap { display: grid; gap: 20px; align-items: center; }
@media (min-width: 620px) { .donut-wrap { grid-template-columns: 190px 1fr; } }
.donut svg { width: 100%; max-width: 190px; height: auto; display: block; margin-inline: auto; }
.donut__seg { transition: opacity 0.15s ease; }
.donut__seg:hover { opacity: 0.75; }
.donut__cifra { font-family: var(--mono); font-size: 30px; font-weight: 700; fill: var(--text-primary); }
.donut__pie { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; fill: var(--text-muted); text-transform: uppercase; }

.leyenda { display: grid; gap: 9px; }
.leyenda__fila { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; font-size: 0.82rem; }
.leyenda__punto { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }
.leyenda__txt { color: var(--text-secondary); }
.leyenda__fila b { font-size: 0.82rem; color: var(--text); }
.leyenda__monto { font-size: 0.76rem; color: var(--text-muted); min-width: 88px; text-align: right; }
.leyenda__inline { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; }

/* ------------------------------------------------ barras horizontales */
.barras-h { display: grid; gap: 12px; }
.barra-h { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; align-items: center; }
.barra-h__lbl { display: grid; gap: 1px; }
.barra-h__lbl b { font-size: 0.84rem; }
.barra-h__lbl span { font-size: 0.62rem; color: var(--text-muted); }
.barra-h__pista { height: 12px; border-radius: 999px; background: var(--bg-panel-alt); overflow: hidden; }
.barra-h__pista i { display: block; height: 100%; border-radius: 999px; }
.barra-h__val { font-size: 0.8rem; color: var(--text); min-width: 92px; text-align: right; }

/* -------------------------------------------------- barras verticales */
.barras-v { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: end; }
.barra-v { display: grid; gap: 8px; justify-items: center; }
.barra-v__pista {
  display: flex; align-items: flex-end; justify-content: center; gap: 8px;
  height: 170px; width: 100%;
  padding: 0 8px 0;
  border-bottom: 1px solid var(--border);
}
.barra-v__col { flex: 1 1 0; max-width: 46px; height: 100%; display: flex; align-items: flex-end; }
.barra-v__col i { display: block; width: 100%; border-radius: 4px 4px 0 0; min-height: 2px; transition: height 0.3s ease; }
.barra-v__lbl { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.barra-v__val { font-size: 0.74rem; color: var(--text-muted); }

/* ---------------------------------------------- panel de mantenimiento */
.admin__sub {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 26px 0 12px; padding-top: 18px; border-top: 1px solid var(--border);
}

/* ==========================================================================
   BLOQUES DE LA v3
   ========================================================================== */

/* Botón de retorno a la landing, presente en las tres vistas. */
.app__volver {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.76rem; font-weight: 600; color: var(--text-muted);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.app__volver:hover { border-color: var(--accent-amber); color: var(--accent-amber); }
@media (max-width: 860px) { .app__volver span { display: none; } .app__volver { padding: 8px; } }

/* --------------------------- banners de confirmación del operador ------ */
.op-ok--run {
  border-color: rgba(52, 211, 153, 0.55);
  background: rgba(6, 46, 33, 0.8);
  color: #B7F0D8;
}
.op-ok--run b { color: var(--accent-green); }
.op-ok--stop {
  border-color: rgba(255, 77, 79, 0.6);
  background: rgba(58, 10, 11, 0.8);
  color: #FFC9CA;
}
.op-ok--stop b { color: var(--accent-red); }
.op-ok--retro {
  border-color: rgba(255, 182, 39, 0.6);
  background: rgba(56, 39, 5, 0.8);
  color: #FFE2A8;
}
.op-ok--retro b { color: var(--accent-amber); }

/* ------------------------------ insignia de estado de una solicitud ---- */
.badge-estado {
  display: inline-block; margin-top: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  border: 1px solid transparent;
}
.badge-estado--ok     { color: var(--accent-green); border-color: rgba(52, 211, 153, 0.5); background: rgba(52, 211, 153, 0.12); }
.badge-estado--alerta { color: var(--accent-red);   border-color: rgba(255, 77, 79, 0.55); background: var(--accent-red-tint); }
.badge-estado--neutro { color: var(--text-muted);   border-color: var(--line-hi);          background: var(--bg-panel); }

.solicitud__folio { display: block; font-size: 0.62rem; color: var(--text-muted); margin-top: 3px; }

/* Historial de decisiones dentro de la bitácora. */
.historial-validaciones { padding: 16px 18px; border-bottom: 1px solid var(--line); background: rgba(10, 15, 22, 0.32); }
.historial-validaciones__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.historial-validaciones__head h3 { margin: 0; font-size: 0.88rem; }
.historial-validaciones__head span { color: var(--text-muted); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; }
.validacion { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 12px; margin-top: 7px; border: 1px solid var(--line); border-left: 3px solid var(--text-muted); border-radius: 6px; background: var(--bg-panel); }
.validacion--aprobada { border-left-color: var(--accent-green); }
.validacion--rechazada { border-left-color: var(--text-muted); }
.validacion--cerrada { border-left-color: var(--accent-amber); }
.validacion > div:first-child { display: grid; gap: 3px; }
.validacion > div:first-child b { color: var(--accent-amber); font-size: 0.72rem; }
.validacion > div:first-child span, .validacion__meta span { font-size: 0.72rem; color: var(--text-secondary); }
.validacion__meta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; text-align: right; }
.validacion__meta .badge-estado { margin-top: 0; }
@media (max-width: 680px) { .validacion { align-items: flex-start; flex-direction: column; } .validacion__meta { justify-content: flex-start; text-align: left; } }

/* Sí / No / Cambiar causa sobre un pendiente. */
.btn-accion {
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line-hi);
  background: var(--bg-panel);
  font-size: 0.8rem; font-weight: 600; color: var(--text-secondary);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.btn-accion:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.btn-accion--si:hover    { border-color: var(--accent-green); color: var(--accent-green); background: rgba(52, 211, 153, 0.1); }
.btn-accion--no:hover    { border-color: var(--accent-red);   color: var(--accent-red);   background: var(--accent-red-tint); }
.btn-accion--causa:hover { border-color: var(--accent-amber); color: var(--accent-amber); background: var(--accent-amber-tint); }
.solicitud__select { flex: 1 1 100%; margin-top: 8px; }

/* ------------------------------------------- selector de turno simulado */
.turno-sel { display: inline-flex; align-items: center; gap: 8px; }
.turno-sel > span { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.turno-sel select { padding: 9px 12px; font-size: 0.8rem; width: auto; min-width: 190px; }

/* ------------------------------------------ tarjeta de resumen con IA -- */
.ia {
  margin-top: 20px;
  border: 1px solid var(--line-hi);
  border-left: 3px solid var(--accent-amber);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--accent-amber-tint), transparent 70%), var(--bg-panel-alt);
  padding: 15px 17px;
}
.ia__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ia__badge {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em;
  color: var(--accent-amber); text-transform: uppercase;
}
.ia__badge b { color: var(--text-muted); font-weight: 400; }
.ia__prioridad {
  display: inline-flex; align-items: center; margin-top: 3px; padding: 4px 9px; border-radius: 999px;
  font-family: var(--mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; border: 1px solid transparent;
}
.ia__prioridad[hidden] { display: none; }
.ia__prioridad--baja    { color: var(--accent-green); border-color: rgba(52, 211, 153, 0.45); background: rgba(52, 211, 153, 0.1); }
.ia__prioridad--media   { color: var(--accent-cyan);  border-color: rgba(53, 208, 232, 0.45); background: rgba(53, 208, 232, 0.1); }
.ia__prioridad--alta    { color: var(--accent-amber); border-color: rgba(255, 182, 39, 0.48); background: var(--accent-amber-tint); }
.ia__prioridad--critica { color: var(--accent-red);   border-color: rgba(255, 77, 79, 0.5); background: var(--accent-red-tint); }
.ia__btn {
  margin-left: auto;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--line-hi); background: transparent;
  font-size: 0.74rem; font-weight: 600; color: var(--text-secondary);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ia__btn:hover { border-color: var(--accent-amber); color: var(--accent-amber); }
.ia__modelo { color: var(--text-muted); font-size: 0.58rem; letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; }
.ia__nivel { display: inline-flex; margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--border); color: var(--accent-amber); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; }
.ia__texto { font-size: 0.87rem; line-height: 1.65; color: var(--text-dim); transition: opacity 0.2s ease; }
.ia__texto b { color: var(--accent-amber); }
.ia__bloque { margin-top: 12px; padding: 10px 12px; border-left: 2px solid var(--border); background: rgba(255,255,255,0.018); }
.ia__bloque p { margin: 0 0 5px; }
.ia__bloque ul { margin: 5px 0 0; padding-left: 18px; }
.ia__bloque--resumen { color: var(--text-secondary); border-left-color: var(--text-muted); }
.ia__bloque--prioridad { border-left-color: var(--accent-amber); background: var(--accent-amber-tint); }
.ia__bloque--critico { border-left-color: var(--accent-red); background: var(--accent-red-tint); }
.ia__bloque--critico b { color: var(--accent-red); }
.ia__bloque--consideracion { color: var(--text-muted); font-size: 0.78rem; }
.ia__grupo { margin-top: 9px; border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: var(--r-sm); background: var(--bg-panel-alt); overflow: hidden; }
.ia__grupo summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; cursor: pointer; list-style: none; font: 700 0.7rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.ia__grupo summary::-webkit-details-marker { display: none; }
.ia__grupo summary::after { content: '⌄'; color: var(--text-muted); transition: transform 0.16s ease; }
.ia__grupo:not([open]) summary::after { transform: rotate(-90deg); }
.ia__grupo summary b { margin-left: auto; padding: 3px 7px; border: 1px solid currentColor; border-radius: 999px; font: 0.55rem var(--mono); letter-spacing: 0.08em; }
.ia__grupo-contenido { padding: 0 12px 10px; color: var(--text-dim); }
.ia__grupo-contenido p { margin: 0; font-size: 0.8rem; }
.ia__grupo-contenido ul { margin: 0; padding-left: 18px; }
.ia__grupo--hallazgos { border-left-color: var(--accent-cyan); }
.ia__grupo--hallazgos summary { color: var(--accent-cyan); }
.ia__grupo--prioridad { border-left-color: var(--accent-amber); background: var(--accent-amber-tint); }
.ia__grupo--prioridad summary { color: var(--accent-amber); }
.ia__grupo--critico { border-left-color: var(--accent-red); background: var(--accent-red-tint); }
.ia__grupo--critico summary { color: var(--accent-red); }
.ia__grupo--estable { border-left-color: var(--accent-green); background: rgba(52, 211, 153, 0.07); }
.ia__grupo--estable summary { color: var(--accent-green); }
.ia__grupo--seguimiento { border-left-color: var(--accent-green); }
.ia__grupo--seguimiento summary { color: var(--accent-green); }
.ia__grupo--vacio .ia__grupo-contenido { color: var(--text-muted); }
.ia__metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 12px; }
.ia__metricas > div { min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-panel); }
.ia__metricas span, .ia__metricas small { display: block; color: var(--text-muted); font: 0.55rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.ia__metricas b { display: block; margin: 3px 0; color: var(--accent-amber); font: 700 0.9rem var(--mono); }
@media (max-width: 620px) { .ia__metricas { grid-template-columns: 1fr; } }
.ia__pie { font-size: 0.66rem; color: var(--text-muted); margin-top: 9px; }
.ia__pie--demo {
  color: var(--accent-amber);
  border-left: 2px solid var(--accent-amber);
  background: var(--accent-amber-tint);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 6px 9px;
}
.ia__pie--real { color: var(--text-muted); }
.ia--generando { border-color: rgba(53, 208, 232, 0.5); background: linear-gradient(135deg, rgba(53, 208, 232, 0.06), transparent 42%, rgba(255, 182, 39, 0.035)); box-shadow: 0 0 0 1px rgba(53, 208, 232, 0.08), 0 0 28px rgba(53, 208, 232, 0.07); }
.ia__cargando { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 0; color: var(--text-secondary); }
.ia__cargando b, .ia__cargando div > span { display: block; }
.ia__cargando b { color: var(--accent-cyan); font-size: 0.82rem; }
.ia__cargando div > span { margin-top: 3px; font-size: 0.74rem; color: var(--text-muted); }
.ia__sparkles { position: relative; display: inline-block; flex: 0 0 32px; width: 32px; height: 30px; color: var(--accent-cyan); filter: drop-shadow(0 0 8px rgba(53, 208, 232, 0.38)); }
.ia__sparkles svg { position: absolute; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: ia-destello 1.35s ease-in-out infinite alternate; }
.ia__sparkles svg:first-child { width: 24px; height: 24px; left: 1px; top: 3px; }
.ia__sparkles svg:nth-child(2) { width: 13px; height: 13px; right: 0; top: 0; color: var(--accent-amber); animation-delay: 0.22s; }
.ia__sparkles svg:nth-child(3) { width: 10px; height: 10px; right: 1px; bottom: 0; color: #D7F8FF; animation-delay: 0.42s; }
.ia__metricas--cargando > div { min-height: 56px; position: relative; overflow: hidden; }
.ia__metricas--cargando > div::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(53, 208, 232, 0.12), transparent); animation: ia-esqueleto 1.1s ease-in-out infinite; }
.ia__pie--cargando { color: var(--accent-cyan); }
@keyframes ia-destello { from { transform: scale(0.76) rotate(-7deg); opacity: 0.42; } to { transform: scale(1.08) rotate(7deg); opacity: 1; } }
@keyframes ia-esqueleto { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .ia__sparkles svg, .ia__metricas--cargando > div::after { animation: none; } }

/* Acciones que primero piden análisis a IA, antes de abrir o enviar un PDF. */
.btn--ia-cargando { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.btn__sparkles { position: relative; display: inline-block; flex: 0 0 17px; width: 17px; height: 17px; }
.btn__sparkles svg { position: absolute; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: ia-destello 1.15s ease-in-out infinite alternate; }
.btn__sparkles svg:first-child { width: 16px; height: 16px; left: 0; top: 1px; }
.btn__sparkles svg:nth-child(2) { width: 8px; height: 8px; right: -1px; top: -1px; animation-delay: 0.2s; }
@media (prefers-reduced-motion: reduce) { .btn__sparkles svg { animation: none; } }

/* Turno seleccionado, resaltado en la gráfica de barras verticales. */
.barra-v--activo .barra-v__lbl { color: var(--accent-amber); }
.barra-v--activo .barra-v__pista { border-bottom-color: var(--accent-amber); }

/* ==========================================================================
   HISTORIAL DE SESIÓN DEL OPERADOR
   ========================================================================== */
.log { display: grid; gap: 8px; max-height: 420px; overflow-y: auto; }
.log__fila {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  background: var(--bg-panel-alt);
  font-size: 0.82rem;
  line-height: 1.5;
  animation: fade 0.22s ease;
}
.log__fila--run   { border-left-color: var(--accent-green); }
.log__fila--stop  { border-left-color: var(--accent-red); }
.log__fila--retro { border-left-color: var(--accent-amber); }
.log__fila--run b   { color: var(--accent-green); }
.log__fila--stop b  { color: var(--accent-red); }
.log__fila--retro b { color: var(--accent-amber); }
.log__hora { font-size: 0.7rem; color: var(--text-muted); padding-top: 2px; }
.log__txt { color: var(--text-dim); min-width: 0; }
.log__folio { font-size: 0.66rem; color: var(--text-muted); }
.log__x {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.7rem;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.log__x:hover { border-color: var(--accent-red); color: var(--accent-red); background: var(--accent-red-tint); }

/* El selector de activos del panel de Mantenimiento lista doce equipos. */
.select--scroll { max-height: 15rem; overflow-y: auto; }
.acordeon__badge--ok { border-color: rgba(52, 211, 153, 0.5); color: var(--accent-green); background: rgba(52, 211, 153, 0.1); }

/* ==========================================================================
   FILTRO DE RANGO (DIRECCIÓN) Y CAUSA LIBRE
   ========================================================================== */
.rango {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  margin-bottom: 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-panel);
}
.rango__campo { display: grid; gap: 6px; }
.rango__lbl {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
}
.rango__par { display: flex; gap: 8px; flex-wrap: wrap; }
.rango__par input, .rango__par select { padding: 8px 10px; font-size: 0.8rem; width: auto; }
.rango__par select { min-width: 148px; }
.rango__flecha { color: var(--text-muted); padding-bottom: 10px; }
.rango__acciones { display: flex; gap: 6px; margin-left: auto; padding-bottom: 2px; }
.rango__acciones .btn-accion { padding: 7px 13px; font-size: 0.74rem; }
.rango__acciones .btn-accion.is-activo { border-color: var(--accent-amber); color: var(--accent-amber); background: var(--accent-amber-tint); }
.rango__resumen { flex: 1 1 100%; font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }
@media (max-width: 720px) { .rango__acciones { margin-left: 0; } }

/* Reclasificación de causa con texto libre en la bandeja. */
.solicitud__reclasif { flex: 1 1 100%; display: grid; gap: 8px; margin-top: 8px; }
.solicitud__reclasif select, .solicitud__reclasif input { padding: 8px 10px; font-size: 0.82rem; }
.solicitud__reclasif .btn-accion { justify-self: start; }

/* «Otros» en la tableta de piso: campo grande, del tamaño de un botón táctil. */
.op-btn--otros { border-style: dashed; }
.op-libre { display: grid; gap: 10px; padding: 4px; }
.op-libre__lbl { font-size: 0.86rem; font-weight: 600; color: var(--text-secondary); }
.op-libre .input { padding: 14px 14px; font-size: 1rem; }
.op-libre__acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.op-libre__acciones .btn { flex: 1 1 160px; }

/* Origen de los datos en la barra superior: verde si está persistiendo en
   Supabase, rojo si se perdió la conexión, ámbar (por defecto) si es local. */
.app__sim--nube { background: rgba(52, 211, 153, 0.12); color: var(--accent-green); }
.app__sim--degradado { background: var(--accent-red-tint); color: var(--accent-red); }