/* ============================================================================
   Panel admin metabot.es — design system (minimalist-ui)
   Minimalismo utilitario premium: monocromático cálido, tipografía editorial,
   retícula bento, líneas de 1px, acentos pastel para estados. Sin frameworks.
   Fuentes del sistema (respeta CSP self; no se cargan tipografías externas).
   ============================================================================ */

:root {
  /* Lienzo y superficies */
  --lienzo:        #F7F6F3;
  --tarjeta:       #FFFFFF;
  --tarjeta-alt:   #F9F9F8;
  --borde:         #EAEAEA;
  --borde-fuerte:  #E0E0DE;

  /* Texto (nunca negro absoluto) */
  --tinta:         #111111;
  --tinta-suave:   #55534E;
  --tinta-tenue:   #8A877F;

  /* Acentos pastel desaturados (solo etiquetas/estados) */
  --verde-pal:     #EDF3EC;
  --verde-tinta:   #2F5D3A;
  --rojo-pal:      #FDEBEC;
  --rojo-tinta:    #8A3038;
  --azul-pal:      #E1F3FE;
  --azul-tinta:    #235773;
  --ambar-pal:     #FBF3DB;
  --ambar-tinta:   #7A5B18;

  /* Tipografía */
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:  'SF Mono', 'JetBrains Mono', 'Cascadia Code', Consolas, 'Liberation Mono', monospace;

  --radio: 10px;
  --lateral: 244px;

  /* Alias heredados: plantillas y reglas antiguas referencian estos nombres. Si no existen,
     `var()` no resuelve y falla en SILENCIO (bordes que no se pintan, texto invisible sobre
     fondo oscuro). Se mapean a los tokens reales para que todo el UI quede coherente. */
  --linea:      var(--borde);
  --linea-fuerte: var(--borde-fuerte);
  --papel-2:    var(--tarjeta-alt);
  --fondo:      var(--tarjeta);
  --verde:      var(--verde-tinta);
  --rojo:       var(--rojo-tinta);
  --rojo-suave: var(--rojo-pal);

  /* Escala de elevación (z-index) semántica: nunca valores mágicos tipo 999. */
  --z-pegado: 5;
  --z-menu:   20;
}

* { box-sizing: border-box; }

/* Foco visible coherente en TODA superficie interactiva (accesibilidad; solo teclado). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--lienzo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: 30px; }
h2 { font-size: 21px; }
h3 { font-size: 16px; font-family: var(--sans); font-weight: 600; }

.mono { font-family: var(--mono); }
.tenue { color: var(--tinta-tenue); }
.suave { color: var(--tinta-suave); }
/* pista-campo: el comentario (entre paréntesis) de la etiqueta de un campo del editor.
   Gris claro, peso normal y algo más pequeño para que apenas moleste (1:1 con el PHP). */
.pista-campo { color: var(--tinta-tenue); font-weight: 400; font-size: 0.85em; opacity: 0.75; }

/* ---------- Estructura: barra lateral + contenido -------------------------- */
.disposicion { display: flex; min-height: 100vh; }

.lateral {
  width: var(--lateral);
  flex: 0 0 var(--lateral);
  background: var(--tarjeta);
  border-right: 1px solid var(--borde);
  padding: 26px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.marca {
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px 22px;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 18px;
}
.marca .logo {
  width: 26px; height: 26px; flex: 0 0 26px;
  border: 1.5px solid var(--tinta); border-radius: 7px;
  display: grid; place-items: center;
}
.marca .nombre { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.marca .nombre b { font-weight: 600; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--tinta-suave);
  font-size: 14px;
  transition: background .15s ease, color .15s ease;
}
.nav a:hover { background: var(--tarjeta-alt); color: var(--tinta); }
.nav a.activo { background: var(--tinta); color: #fff; }
.nav a svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: .9; }

.lateral .pie { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--borde); }
.ficha-usuario { display: flex; align-items: center; gap: 11px; padding: 4px 4px 12px; }
.ficha-usuario .avatar {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px;
  background: var(--tinta); color: #fff;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 16px; font-weight: 600;
}
.ficha-usuario .ident { min-width: 0; }
.ficha-usuario .usuario { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ficha-usuario .rol {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--tinta-tenue); text-transform: uppercase;
}
.btn-salir {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--tinta-suave);
  background: var(--tarjeta-alt); border: 1px solid var(--borde); border-radius: 9px;
  padding: 9px 12px; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-salir:hover { background: #fff; color: var(--tinta); border-color: var(--borde-fuerte); }
.btn-salir svg { width: 16px; height: 16px; }

.contenido { flex: 1 1 auto; min-width: 0; }

.barra-sup {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 40px;
  border-bottom: 1px solid var(--borde);
  background: rgba(247,246,243,.8);
  backdrop-filter: saturate(180%) blur(8px);
  position: sticky; top: 0; z-index: 5;
}
.barra-sup .ruta { font-size: 13px; color: var(--tinta-tenue); font-family: var(--mono); }
.barra-sup h1 { margin-top: 2px; }

.lienzo-int { padding: 34px 40px 60px; max-width: 1120px; }

/* ---------- Tarjetas KPI (bento) ------------------------------------------ */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 30px;
}
.kpi {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.kpi .rotulo {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-tenue); font-weight: 600;
}
.kpi .cifra { font-family: var(--serif); font-size: 40px; line-height: 1; }
.kpi .nota { font-size: 12.5px; color: var(--tinta-suave); }
.kpi.ancha { grid-column: span 2; }

/* ---------- Tabla ---------------------------------------------------------- */
.panel {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.panel .cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--borde);
}
.panel .cabecera h2 { font-family: var(--sans); font-size: 15px; font-weight: 600; }
.panel-cuerpo { padding: 22px 24px; }
.panel-cuerpo > :first-child { margin-top: 0; }
.panel-cuerpo > :last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tinta-tenue); font-weight: 600;
  padding: 11px 22px; border-bottom: 1px solid var(--borde);
}
tbody td { padding: 13px 20px; border-bottom: 1px solid var(--borde); font-size: 14px; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s ease; }
/* Zebra: filas alternas con un tinte muy sutil para diferenciarse a golpe de vista; el hover prima.
   - Tablas normales (un solo <tbody>): se raya por FILA (nth-child even).
   - Tablas CRUD de fila desplegable: cada ELEMENTO es su propio <tbody class="item"> (resumen +
     editor) → se raya por ELEMENTO (tbody.item:nth-of-type even), lo que además permite el toggle
     Editar↔Cerrar con :target (ver más abajo). */
tbody:not(.item) tr:nth-child(even) > td { background: var(--tarjeta-alt); }
tbody.item:nth-of-type(even) > tr > td { background: var(--tarjeta-alt); }
tbody tr:hover > td { background: #F2F1EE; }
td .id { font-family: var(--mono); font-size: 13px; color: var(--tinta-suave); }

/* Columna de ACCIONES (siempre la última): alineada a la derecha, sin partir, con separación
   consistente entre botones/enlaces. Patrón común a todas las tablas de listado. */
th.acciones, td.acciones { text-align: right; white-space: nowrap; }
td.acciones > * { vertical-align: middle; }
td.acciones .btn, td.acciones form { display: inline-flex; margin-left: 6px; }
td.acciones form { margin: 0 0 0 6px; }

/* Envoltorio scrollable para CUALQUIER tabla de listado ancha dentro de una .panel (que recorta
   con overflow:hidden). Se aplica por clase reutilizable .tabla-scroll y a los envoltorios HTMX
   #tabla-* de las listas. Así la última columna ("Ver →"/acciones) nunca queda recortada. */
.tabla-scroll,
#tabla-bots, #tabla-salud, #tabla-activos, #tabla-cuentas, #tabla-brokers, #tabla-planes { overflow-x: auto; }

/* Tablas MUY anchas (bots ~10 col, salud ~9): padding de celda más apretado para que quepan sin
   scroll en pantallas normales. */
#tabla-bots thead th, #tabla-bots tbody td,
#tabla-salud thead th, #tabla-salud tbody td { padding-left: 14px; padding-right: 14px; }

/* ---------- Fila desplegable de edición (patrón CRUD uniforme, sin JS) -------
   Cada elemento editable es su propio <tbody class="item" id="fila-…">, con DOS <tr>: la
   fila-resumen (solo lectura, en columnas) y la fila-editor (form inline a ancho completo con
   colspan). La editora está oculta y se revela con :target al pulsar "Editar ▾" (ancla al id del
   <tbody>). Como el <tbody> se puede seleccionar por :target, el MISMO botón alterna:
     - cerrado: se ve "Editar ▾"  (.abrir),   href="#fila-…"     → abre.
     - abierto: se ve "Cerrar ▴"  (.cerrar),  href="#cerrar"      → cierra (quita el :target).
   "Cancelar" dentro del editor también cierra (href="#cerrar"). Pure CSS → compatible con CSP self. */
tbody.item > tr.fila-editor > td { padding: 0; }
tbody.item > tr.fila-editor { display: none; }
tbody.item:target > tr.fila-editor { display: table-row; }
tbody.item:target > tr.fila-editor > td { background: var(--tarjeta-alt); box-shadow: inset 3px 0 0 var(--tinta); }
tbody.item:target > tr > td { background: var(--tarjeta-alt); } /* resalta el elemento abierto entero */
/* Toggle del enlace de acción: "Editar ▾" ↔ "Cerrar ▴". */
tbody.item .cerrar { display: none; }
tbody.item:target .abrir { display: none; }
tbody.item:target .cerrar { display: inline; }
.editor-caja { padding: 16px 20px; }
.editor-linea { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.editor-linea .campo { margin: 0; }
.editor-linea label.mini, .editor-linea .mini { font-size: 12px; color: var(--tinta-tenue); display: block; }
.editor-acciones { display: flex; gap: 10px; margin-top: 12px; align-items: center; }
/* Enlace de acción "Editar ▾/Cerrar ▴": no se subraya como enlace de tabla. */
a.enlace-editar { color: var(--tinta-suave); font-size: 13.5px; font-weight: 600; }
a.enlace-editar:hover { color: var(--tinta); }

/* ---------- Insignias de estado ------------------------------------------- */
.insignia {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.5;
}
.insignia .punto { width: 7px; height: 7px; border-radius: 50%; }
.insignia.on  { background: var(--verde-pal); color: var(--verde-tinta); }
.insignia.on  .punto { background: var(--verde-tinta); }
.insignia.off { background: var(--rojo-pal); color: var(--rojo-tinta); }
.insignia.off .punto { background: var(--rojo-tinta); }
.insignia.neutra { background: var(--tarjeta-alt); color: var(--tinta-suave); }
.insignia.neutra .punto { background: var(--tinta-tenue); }
.insignia.ambar { background: var(--ambar-pal); color: var(--ambar-tinta); }
.insignia.ambar .punto { background: var(--ambar-tinta); }

/* ---------- Salud VPS: métricas, barras y sparklines ----------------------- */
.rejilla-metricas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;
}
.metrica {
  background: var(--tarjeta-alt); border: 1px solid var(--borde);
  border-radius: 10px; padding: 14px 16px;
}
.metrica-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.metrica-cab span { color: var(--tinta-tenue); font-size: 13px; }
.metrica-cab b { font-size: 18px; }
.barra { height: 8px; border-radius: 999px; background: var(--borde); overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--tinta); border-radius: 999px; }
.spark { width: 100%; height: 48px; display: block; }
.spark polyline { fill: none; stroke: var(--tinta); stroke-width: 1.5; }

/* Gráfica de línea del histórico con ejes (CPU/RAM). SVG server-side, sin JS. Los colores/tamaños
   del trazado van INLINE en el SVG (robustez ante cache); aquí solo el marco y el tope de ancho.
   max-width ≈ viewBox → el SVG no se estira ×2-3 y el texto (unidades del viewBox) queda a tamaño real. */
.grafica {
  display: block; width: 100%; max-width: 1000px; height: auto;
  background: var(--tarjeta-alt); border: 1px solid var(--borde); border-radius: 10px;
}
.grafica-titulo { color: var(--tinta-tenue); font-size: 12px; margin-bottom: 4px; }
.grafica-caja { margin-bottom: 16px; }

/* ---------- Botones -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  padding: 10px 18px; border-radius: 9px; border: 1px solid transparent;
  cursor: pointer; transition: transform .12s ease, background .15s ease;
}
.btn-primario { background: var(--tinta); color: #fff; }
.btn-primario:hover { transform: scale(.98); }
.btn-fantasma { background: transparent; border-color: var(--borde-fuerte); color: var(--tinta); }
.btn-fantasma:hover { background: var(--tarjeta-alt); }
.btn-vinculo { color: var(--tinta-suave); font-size: 13.5px; }
.btn-vinculo:hover { color: var(--tinta); }
.btn-sm { padding: 6px 13px; font-size: 13px; border-radius: 8px; }
.btn-peligro { background: var(--rojo-pal); color: var(--rojo-tinta); border-color: #F3D2D5; }
.btn-peligro:hover { background: #fbe0e2; }
.acciones-cab { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.acciones-cab form { margin: 0; }

/* Selectores del formulario (crear setup): mismo aspecto que .campo input */
.campo select {
  width: 100%; padding: 11px 13px; font-size: 14px; font-family: var(--sans);
  color: var(--tinta); background: var(--tarjeta-alt);
  border: 1px solid var(--borde-fuerte); border-radius: 9px; outline: none;
}
.campo select:focus { border-color: var(--tinta); background: #fff; }

/* Editor de override: checkbox "overridear esta clave" junto a la etiqueta */
.ov-check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12.5px; }
.ov-check input { width: 15px; height: 15px; accent-color: var(--tinta); }

/* ---------- Login ---------------------------------------------------------- */
.login-marco {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(1200px 500px at 50% -10%, #FFFFFF 0%, var(--lienzo) 60%);
}
.login-caja {
  width: 100%; max-width: 380px;
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: 14px; padding: 34px 32px 30px;
}
.login-caja .marca { justify-content: center; border: 0; padding-bottom: 10px; margin-bottom: 6px; }
.login-caja h1 { font-size: 22px; text-align: center; margin-bottom: 4px; }
.login-caja .sub { text-align: center; color: var(--tinta-tenue); font-size: 13.5px; margin-bottom: 24px; }
.campo { margin-bottom: 15px; }
.campo label { display: block; font-size: 12.5px; font-weight: 600; color: var(--tinta-suave); margin-bottom: 6px; }
.campo input {
  width: 100%; padding: 11px 13px; font-size: 14px; font-family: var(--sans);
  color: var(--tinta); background: var(--tarjeta-alt);
  border: 1px solid var(--borde-fuerte); border-radius: 9px; outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.campo input:focus { border-color: var(--tinta); background: #fff; }

/* --- Barras de alta/acción EN LÍNEA (activos, cuentas, brokers, planes,
   actualizaciones) ------------------------------------------------------------
   Cada campo es una COLUMNA "etiqueta encima de su casilla" que NUNCA se desliga
   al estrechar la ventana. Antes se usaba <label>texto<br><input> con
   align-items:flex-end: al ajustarse la fila, la etiqueta y su casilla quedaban
   desalineadas (parecía que un campo tenía la etiqueta del de al lado). Al hacer
   la etiqueta un flex en columna, texto y casilla quedan pegados pase lo que pase. */
.forma-linea { display: flex; gap: 12px 14px; align-items: flex-end; flex-wrap: wrap; }
/* Cada campo (label directo, salvo los de checkbox .check) se apila en columna. */
.forma-linea > label:not(.check) {
  display: inline-flex; flex-direction: column; gap: 5px;
  font-size: 12px; font-weight: 400; color: var(--tinta-tenue);
}
.forma-linea > label:not(.check) br { display: none; }   /* la columna ya apila; el <br> sobra */
.forma-linea > label:not(.check) > input:not([type=checkbox]),
.forma-linea > label:not(.check) > select,
.forma-linea > label:not(.check) > textarea {
  padding: 9px 11px; font-size: 13.5px; font-family: var(--sans);
  color: var(--tinta); background: var(--tarjeta-alt);
  border: 1px solid var(--borde-fuerte); border-radius: 8px; outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.forma-linea > label:not(.check) > input:not([type=checkbox]):focus,
.forma-linea > label:not(.check) > select:focus,
.forma-linea > label:not(.check) > textarea:focus { border-color: var(--tinta); background: #fff; }
/* Checkbox en columna (label "MT5"/"API" encima de la casilla): centrado, sin recuadro. */
.forma-linea > label:not(.check) > input[type=checkbox] { align-self: flex-start; width: 16px; height: 16px; accent-color: var(--tinta); margin: 4px 0; }
/* Checkbox dentro de una barra: casilla + texto en línea, alineado con las casillas. */
.forma-linea > label.check { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; }

.login-caja .btn-primario { width: 100%; justify-content: center; margin-top: 6px; }
.aviso {
  background: var(--rojo-pal); color: var(--rojo-tinta);
  border: 1px solid #F3D2D5; border-radius: 9px;
  padding: 10px 13px; font-size: 13px; margin-bottom: 18px;
}
/* .aviso.ok: mismo formato pero en verde (resultado correcto, p.ej. contraseña cambiada). */
.aviso.ok {
  background: var(--verde-pal); color: var(--verde-tinta);
  border-color: #CFE2CE;
}

/* ---------- Detalle / config ---------------------------------------------- */
.rejilla-detalle { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
/* min-width:0 permite que las columnas se encojan (si no, el contenido ancho —una URL
   larga en el JSON— desborda el card en vez de envolver/hacer scroll). */
.rejilla-detalle > * { min-width: 0; }
.def { display: grid; grid-template-columns: 160px 1fr; gap: 2px 14px; }
.def dt { color: var(--tinta-tenue); font-size: 13px; padding: 7px 0; }
.def dd { margin: 0; padding: 7px 0; font-size: 14px; }
.codigo {
  background: #FBFBFA; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 16px 18px; font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
  color: var(--tinta-suave); overflow: auto; max-height: 460px;
  /* Envuelve líneas largas (URLs del override) en vez de desbordar el card. */
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.migaja { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--tinta-suave); margin-bottom: 16px; }
.migaja a:hover { color: var(--tinta); }

.vacio { padding: 40px; text-align: center; color: var(--tinta-tenue); }

/* Códigos de recuperación 2FA: rejilla monoespaciada, fácil de copiar. */
.lista-codigos {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px;
}
.lista-codigos li {
  background: #FBFBFA; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 10px 14px; font-size: 15px; letter-spacing: .06em; text-align: center;
  color: var(--tinta); user-select: all;
}

.pnl-pos { color: var(--verde-tinta); font-weight: 600; }
.pnl-neg { color: var(--rojo-tinta); font-weight: 600; }

/* --- Editor de setups: avisos, tabs (sin JS), formulario -------------------- */
.aviso-error {
  background: var(--rojo-suave, #fbeaea); border: 1px solid var(--rojo-tinta, #b3261e);
  color: var(--rojo-tinta, #b3261e); border-radius: 10px; padding: 11px 15px;
  font-size: 13.5px; margin-bottom: 14px;
}
.aviso-suave {
  background: #faf6ec; border: 1px solid #e3d6ac; color: #7a5b12;
  border-radius: 10px; padding: 11px 15px; font-size: 13.5px; margin-bottom: 14px;
}

/* Panel con PESTAÑAS (sin JS): los radios + labels + paneles son HERMANOS dentro de `.tabs`.
   Los radios (ocultos) preceden a su label; los paneles llevan order:99 para caer bajo la
   banda de pestañas aunque estén después en el DOM. El borde inferior continuo de la banda lo
   dibuja el `border-top` del panel visible (width:100%), así que la línea llega de lado a lado.
   La pestaña activa se subraya con `box-shadow inset` (no `border`) para NO desplazar 1px. */
.tabs {
  display: flex; flex-wrap: wrap; align-items: stretch;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.tab-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.tab-label {
  padding: 13px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  color: var(--tinta-tenue); white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--borde);          /* base de la banda bajo cada pestaña */
  transition: color .15s ease, background .15s ease;
}
.tab-label:hover { color: var(--tinta); background: var(--tarjeta-alt); }
.tab-radio:checked + .tab-label {
  color: var(--tinta);
  box-shadow: inset 0 -2px 0 var(--tinta);           /* subrayado activo, sin salto de layout */
}
.tab-radio:focus-visible + .tab-label { outline: 2px solid var(--tinta); outline-offset: -2px; }
/* Relleno flexible al final de la banda: continúa la línea inferior hasta el borde derecho. */
.tab-relleno { flex: 1 1 auto; order: 50; box-shadow: inset 0 -1px 0 var(--borde); }
.tab-panel { display: none; order: 99; width: 100%; padding: 22px 24px; }
.tab-panel > :first-child { margin-top: 0; }
.tab-panel > :last-child { margin-bottom: 0; }
/* Sub-bloques dentro de una pestaña: separación vertical uniforme sin cards anidadas. El
   separador solo aplica a HIJOS DIRECTOS de la pestaña (no a bloques dentro de una rejilla,
   p.ej. las 2 columnas LONG/SHORT del OB, que se separan por el gap de la rejilla). */
.tab-panel > .bloque + .bloque { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--borde); }
.tab-panel .bloque > h3 { margin-bottom: 12px; }
/* Pestaña que aloja una TABLA a sangre: sin padding propio; la tabla usa su padding de celda
   (llega de borde a borde, como en los paneles normales) y la cabecera/paginador van con margen. */
.tab-panel.tabla { padding: 0; }
.tab-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 22px; border-bottom: 1px solid var(--borde);
}
.tab-cab h3 { font-size: 15px; }
.tab-panel.tabla > .paginador { padding: 2px 22px 18px; margin-top: 6px; }
.tab-panel.tabla > .nota-pie { padding: 0 22px 16px; margin-top: 8px; }
.tab-panel.tabla > .vacio { padding: 40px; }
/* Asocia cada radio marcado con su panel (sin JS). Cubre hasta 24 pestañas. */
#tab0:checked ~ #panel0, #tab1:checked ~ #panel1, #tab2:checked ~ #panel2,
#tab3:checked ~ #panel3, #tab4:checked ~ #panel4, #tab5:checked ~ #panel5,
#tab6:checked ~ #panel6, #tab7:checked ~ #panel7, #tab8:checked ~ #panel8,
#tab9:checked ~ #panel9, #tab10:checked ~ #panel10, #tab11:checked ~ #panel11,
#tab12:checked ~ #panel12, #tab13:checked ~ #panel13, #tab14:checked ~ #panel14,
#tab15:checked ~ #panel15, #tab16:checked ~ #panel16, #tab17:checked ~ #panel17,
#tab18:checked ~ #panel18, #tab19:checked ~ #panel19, #tab20:checked ~ #panel20,
#tab21:checked ~ #panel21, #tab22:checked ~ #panel22, #tab23:checked ~ #panel23 { display: block; }

.def-form { display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: 4px 18px; align-items: center; margin: 0; }
.def-form dt { color: var(--tinta-tenue); font-size: 12.5px; padding: 6px 0; overflow-wrap: anywhere; }
.def-form dd { margin: 0; padding: 6px 0; }
.entrada {
  width: 100%; max-width: 320px; padding: 7px 10px; font-size: 13.5px;
  border: 1px solid var(--linea); border-radius: 8px; background: #fff; color: var(--tinta);
}
.entrada:focus { outline: 2px solid var(--tinta); outline-offset: 1px; border-color: var(--tinta); }
.area-codigo {
  width: 100%; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px;
  line-height: 1.5; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 10px;
  background: var(--papel-2, #faf9f6); color: var(--tinta); resize: vertical;
}

/* ---------- Dashboard de Order Blocks (OB) --------------------------------- */
.rejilla-ob { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.rejilla-ob > * { min-width: 0; }
/* Línea de tiempo del recorrido: SVG server-side (sin JS, respeta CSP). */
.ob-timeline { display: block; width: 100%; height: auto; }

@media (max-width: 860px) {
  .lateral { display: none; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .rejilla-detalle { grid-template-columns: 1fr; }
  .rejilla-ob { grid-template-columns: 1fr; }
  .lienzo-int, .barra-sup { padding-left: 20px; padding-right: 20px; }
}

/* ---------- Paginador (server-side, sin JS) -------------------------------- */
.paginador {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 14px; flex-wrap: wrap;
}
.paginador .paginas { display: inline-flex; align-items: center; gap: 4px; }
.paginador a, .paginador .actual, .paginador .inact {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 9px;
  border-radius: 8px; font-size: 13px; line-height: 1;
  border: 1px solid var(--borde); text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.paginador a { color: var(--tinta); background: var(--tarjeta); }
.paginador a:hover { background: var(--tarjeta-alt); border-color: var(--borde-fuerte); }
/* Página actual: número BLANCO sobre tinta (antes usaba una var inexistente → nº invisible). */
.paginador .actual { background: var(--tinta); color: #fff; border-color: var(--tinta); font-weight: 600; }
.paginador .inact { color: var(--tinta-tenue); background: transparent; opacity: .6; }
/* Cuando el paginador cuelga directo de un panel (tras una tabla a sangre), le falta margen
   lateral y queda pegado al borde. Le damos el mismo respiro horizontal que las celdas. */
.panel > .paginador { padding: 2px 22px 18px; margin-top: 6px; }
/* Notas al pie sueltas dentro de un panel (no envueltas en .panel-cuerpo): mismo respiro. */
.panel > table + .nota-pie, .panel > .nota-pie { padding: 0 22px 16px; margin-top: 8px; }

/* ---------------------------------------------------------------------------
   TOAST de confirmación (verde=ok / rojo=error) tras una acción con redirección.
   Auto-cierre 100% CSS (0 JS, MÁXIMA 1): aparece, se mantiene ~4 s y se desvanece.
   Se alimenta del servidor (?ok=/?err= → .Flash). Fijo arriba-centro, top layer.
--------------------------------------------------------------------------- */
.toast-flash {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: min(92vw, 560px);
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  pointer-events: none;
  animation: mbFlashIn .35s ease-out, mbFlashOut .5s ease-in 4.2s forwards;
}
.toast-flash--ok    { background: var(--verde-tinta); }
.toast-flash--error { background: var(--rojo-tinta); }

@keyframes mbFlashIn {
  from { opacity: 0; transform: translate(-50%, -12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes mbFlashOut {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, -12px); }
}
@media (prefers-reduced-motion: reduce) {
  .toast-flash { animation: none; opacity: 1; }
}

/* Barra de buscador/filtros: layout base COMÚN a todas las listas (antes cada plantilla lo
   repetía con estilos inline). Alinea buscador + selects + botones en una fila que envuelve. */
.barra-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
/* Cuando cuelga directa de .panel (bots/setups/pedidos/salud) no hereda el padding del cuerpo →
   se le da el mismo margen horizontal que la cabecera para que no toque los bordes de la card. */
.panel > .barra-filtros { padding: 16px 22px 0 22px; }
/* MISMA ALTURA para TODOS los controles de la barra (input de búsqueda, selects .entrada y los
   botones Filtrar/Limpiar). Sin esto, cada control trae su propio padding (input 11px, .entrada
   7px, .btn 10px) → alturas distintas que, con align-items:end, dejan los botones "caídos" y los
   selects hundidos respecto al buscador. Con altura común quedan alineados en una sola línea. */
.barra-filtros input,
.barra-filtros select,
.barra-filtros .entrada,
.barra-filtros .btn { height: 40px; box-sizing: border-box; }

/* Bloque plegable de ALTA (patrón CRUD uniforme): un <details> que oculta el formulario de
   "+ Nuevo …" para no ensuciar la lista. Al abrir muestra el formulario con respiro. */
.bloque-crear { margin-bottom: 14px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--tarjeta-alt); }
.bloque-crear > summary { cursor: pointer; padding: 11px 14px; font-weight: 600; font-size: 13.5px; color: var(--tinta-suave); list-style: none; }
.bloque-crear > summary::-webkit-details-marker { display: none; }
.bloque-crear > summary::marker { content: ""; }
.bloque-crear[open] > summary { border-bottom: 1px solid var(--borde); color: var(--tinta); }
.bloque-crear .crear-form { padding: 14px; }

/* Botón-icono compacto (p.ej. Guardar ✓ en filas estrechas): cuadrado, sin ensanchar la fila. */
.btn.btn-icono { padding: 7px 10px; min-width: 34px; font-size: 15px; line-height: 1; text-align: center; }

/* Sub-pestañas del RECORRIDO (LONG / SHORT), autocontenidas (las .tabs usan IDs fijos y no
   anidan). Radios ocultos + labels + paneles hermanos, asociados por :checked. Sin JS. */
.subtabs { display: flex; flex-wrap: wrap; align-items: stretch; border-bottom: 1px solid var(--borde); margin-bottom: 12px; }
.subtab-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.subtab-label { padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--tinta-tenue); white-space: nowrap; }
.subtab-label:hover { color: var(--tinta); }
.subtab-radio:checked + .subtab-label { color: var(--tinta); box-shadow: inset 0 -2px 0 var(--tinta); }
.subtab-panel { display: none; order: 99; width: 100%; }
#sub_long:checked ~ #subpanel_long, #sub_short:checked ~ #subpanel_short { display: block; }

/* Secuencia del ciclo OB/OTE en columnas (hito · resultado · detalle) — más legible. */
.ob-secuencia-tabla { width: 100%; margin-top: 10px; border-collapse: collapse; }
.ob-secuencia-tabla td { padding: 7px 10px; border-bottom: 1px solid var(--borde); font-size: 13px; vertical-align: middle; }
.ob-secuencia-tabla td.paso { font-weight: 600; width: 34%; }
.ob-secuencia-tabla td.res { width: 22%; }
.ob-secuencia-tabla tr:last-child td { border-bottom: 0; }

/* ── Hilo de un TICKET de soporte (detalle admin) ─────────────────────────── */
.hilo { list-style: none; margin: 18px 0 8px; padding: 0 0 0 22px; position: relative; }
.hilo::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: rgba(120,140,170,.25); }
.hilo-msg { position: relative; margin: 0 0 16px; }
.hilo-msg::before { content: ""; position: absolute; left: -22px; top: 4px; width: 12px; height: 12px; border-radius: 999px; background: #7aa0ff; box-shadow: 0 0 0 3px var(--fondo, #fff); }
.hilo-msg--respuesta::before { background: #21c8b7; }
.hilo-meta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.hilo-quien-cli { color: #4f74c9; }
.hilo-quien-sop { color: #128a7d; }
.hilo-cuerpo { white-space: pre-wrap; word-break: break-word; line-height: 1.5; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(120,140,170,.25); background: rgba(120,140,170,.06); }
.hilo-msg--respuesta .hilo-cuerpo { background: rgba(33,200,183,.08); border-color: rgba(33,200,183,.30); }
.hilo-responder { margin-top: 20px; border-top: 1px solid rgba(120,140,170,.20); padding-top: 16px; }
.hilo-responder textarea { width: 100%; margin: 8px 0; }
.hilo-acciones { margin-top: 6px; }
.hilo-estado { margin-top: 16px; border-top: 1px solid rgba(120,140,170,.20); padding-top: 14px; }

/* Insignia "Respondido" (soporte contestó, espera al cliente) — azul. */
.insignia.azul { background: rgba(84,165,255,.16); color: #2b6fd6; }
.insignia.azul .punto { background: #2b6fd6; }