/* ==========================================================================
   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__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; } }

.nota-rol {
  border: 1px dashed var(--line-hi);
  border-left: 3px solid var(--accent-cyan);
  border-radius: var(--r-sm);
  padding: 12px 15px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 20px;
}
.nota-rol b { color: var(--accent-cyan); }

/* ------------------------------------------------------------------ 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);
}

/* -------------------------------------------------------- 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); }

.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__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);
}
.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); }

.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; }

/* -------------------------------------------- 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); }

/* 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 > 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;
}
/* En Operaciones, el radar IA precede a la primera bandeja: necesita el mismo
   respiro visual que existe entre los acordeones consecutivos. */
.ia + .acordeon { margin-top: 16px; }
.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); }