/*!
 * asistec-theme.css — tema de AsisTec Server. Equivale a osu-theme.css de Orange.
 * Cargar SIEMPRE después de bootstrap.min.css. Solo añade lo que Bootstrap no trae:
 *   (1) sistema de 3 temas conmutables (Medianoche / Arena / Cielo) por tokens CSS,
 *   (2) layout del sidebar (.asistec-side) y pulido de UI,
 *   (3) visor de código read-only (.asistec-code / .ln),
 *   (4) selector de tema (.tema-card / .tema-swatch).
 *
 * ===== Sistema de temas =====
 * El tema activo se elige con el atributo  html[data-tema="medianoche|arena|cielo"]
 * (lo fija un script temprano leyendo localStorage, y se sincroniza con el servidor
 * vía /api/ui/tema). Además se conmuta data-bs-theme:  medianoche→dark, arena/cielo→light.
 * TODO color del tema vive en tokens (--bs-* y --asistec-*). Para crear un tema nuevo,
 * copiá un bloque html[data-tema="..."] y cambiá los valores; las reglas de abajo no se tocan.
 */

/* --- Tokens compartidos por todos los temas (no cromáticos) --- */
:root {
  --bs-body-font-family: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Esquinas redondeadas (look moderno tipo Claude) */
  --bs-border-radius: .7rem;
  --bs-border-radius-sm: .45rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;
  --bs-border-radius-2xl: 1.5rem;
  /* Visor de código: siempre oscuro (como un editor), en cualquier tema */
  --asistec-code-bg: #0a0c10;
  --asistec-code-fg: #d7dae0;
}

/* ===================== TEMA: MEDIANOCHE (oscuro, por defecto) ===================== */
:root,
html[data-tema="medianoche"] {
  --bs-primary: #6366f1;
  --bs-primary-rgb: 99, 102, 241;
  --bs-primary-text-emphasis: #c7d2fe;
  --bs-link-color: #c7d2fe;
  --bs-link-color-rgb: 199, 210, 254;
  --bs-link-hover-color: #e0e7ff;
  --asistec-primary-hover: #7c7ff5;
  --asistec-primary-active: #4f52d6;

  --bs-body-bg: #0e1116;
  --bs-body-color: #e6e9ef;
  --bs-emphasis-color: #ffffff;
  --bs-secondary-bg: #161b22;
  --bs-tertiary-bg: #1b212b;
  --bs-secondary-color: rgba(230, 233, 239, .72);
  --bs-tertiary-color: rgba(230, 233, 239, .5);
  --bs-border-color: #2a313c;
  --bs-border-color-translucent: rgba(255, 255, 255, .10);

  --asistec-accent: #818cf8;
  --asistec-accent-rgb: 129, 140, 248;
  --asistec-text-accent: #a5b4fc;
  --asistec-outline-color: #a5b4fc;
  --asistec-outline-border: #3d4656;
  --asistec-hover-soft: rgba(255, 255, 255, .05);
  --asistec-hover-soft2: rgba(255, 255, 255, .10);
  --asistec-table-border: rgba(255, 255, 255, .08);
  --asistec-thead-bg: rgba(255, 255, 255, .04);
  --asistec-scroll: rgba(255, 255, 255, .16);
  --asistec-scroll-hover: rgba(255, 255, 255, .30);
  --asistec-navbar-bg: linear-gradient(90deg, #1b212b 0%, #161b22 60%, #13181f 100%);
  --asistec-navbar-edge: rgba(129, 140, 248, .35);
  --asistec-navbar-shadow: 0 2px 14px rgba(0, 0, 0, .45);
  --asistec-sticky-bg: linear-gradient(180deg, #1b212b, #161b22);
  --asistec-hairline: rgba(255, 255, 255, .12);
  --asistec-card-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .45);
  --asistec-swal-bg: #1b212b;
  --asistec-login-bg:
    radial-gradient(1100px 560px at 50% -12%, rgba(129, 140, 248, .14), transparent 60%),
    radial-gradient(760px 420px at 88% 112%, rgba(99, 102, 241, .20), transparent 60%);
  --asistec-login-card-bg: rgba(27, 33, 43, .85);
  --asistec-ok: #34d399;
  --asistec-ok-rgb: 52, 211, 153;
  --asistec-dng: #f87171;
  --asistec-dng-rgb: 248, 113, 113;
  --asistec-nav-active-bg: rgba(99, 102, 241, .20);
  --asistec-nav-active-color: #ffffff;
}

/* ===================== TEMA: ARENA (claro cálido, estilo Claude) ===================== */
html[data-tema="arena"] {
  --bs-primary: #c0563c;
  --bs-primary-rgb: 192, 86, 60;
  --bs-primary-text-emphasis: #9e3f22;
  --bs-link-color: #9e3f22;
  --bs-link-color-rgb: 158, 63, 34;
  --bs-link-hover-color: #7a2e16;
  --asistec-primary-hover: #ac4a31;
  --asistec-primary-active: #97402a;

  --bs-body-bg: #f4f1ea;
  --bs-body-color: #2b2722;
  --bs-emphasis-color: #1a1714;
  --bs-secondary-bg: #efebe2;
  --bs-tertiary-bg: #ffffff;
  --bs-secondary-color: #6b6359;
  --bs-tertiary-color: #938a7e;
  --bs-border-color: #e2dbcd;
  --bs-border-color-translucent: rgba(43, 39, 34, .12);

  --asistec-accent: #c0563c;
  --asistec-accent-rgb: 192, 86, 60;
  --asistec-text-accent: #9e3f22;
  --asistec-outline-color: #9e3f22;
  --asistec-outline-border: #d8cfbe;
  --asistec-hover-soft: rgba(43, 39, 34, .05);
  --asistec-hover-soft2: rgba(43, 39, 34, .08);
  --asistec-table-border: #ece5d8;
  --asistec-thead-bg: #f6f2ea;
  --asistec-scroll: rgba(43, 39, 34, .22);
  --asistec-scroll-hover: rgba(43, 39, 34, .36);
  --asistec-navbar-bg: linear-gradient(90deg, #c0563c 0%, #b04a31 100%);
  --asistec-navbar-edge: rgba(255, 255, 255, .22);
  --asistec-navbar-shadow: 0 2px 12px rgba(43, 39, 34, .18);
  --asistec-sticky-bg: linear-gradient(180deg, #ffffff, #f7f3ec);
  --asistec-hairline: rgba(43, 39, 34, .06);
  --asistec-card-shadow: 0 .5rem 1rem rgba(43, 39, 34, .12);
  --asistec-swal-bg: #ffffff;
  --asistec-login-bg:
    radial-gradient(1100px 560px at 50% -12%, rgba(192, 86, 60, .10), transparent 60%),
    radial-gradient(760px 420px at 88% 112%, rgba(158, 63, 34, .10), transparent 60%);
  --asistec-login-card-bg: rgba(255, 255, 255, .92);
  --asistec-ok: #2e7d46;
  --asistec-ok-rgb: 46, 125, 70;
  --asistec-dng: #c0392b;
  --asistec-dng-rgb: 192, 57, 43;
  --asistec-nav-active-bg: rgba(192, 86, 60, .12);
  --asistec-nav-active-color: #9e3f22;
}

/* ===================== TEMA: CIELO (claro SaaS, azul de marca) ===================== */
html[data-tema="cielo"] {
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-primary-text-emphasis: #1e40af;
  --bs-link-color: #1e40af;
  --bs-link-color-rgb: 30, 64, 175;
  --bs-link-hover-color: #163083;
  --asistec-primary-hover: #1d4ed8;
  --asistec-primary-active: #1e40af;

  --bs-body-bg: #f1f5f9;
  --bs-body-color: #0f172a;
  --bs-emphasis-color: #0b1220;
  --bs-secondary-bg: #e9eef4;
  --bs-tertiary-bg: #ffffff;
  --bs-secondary-color: #64748b;
  --bs-tertiary-color: #94a3b8;
  --bs-border-color: #e2e8f0;
  --bs-border-color-translucent: rgba(15, 23, 42, .10);

  --asistec-accent: #2563eb;
  --asistec-accent-rgb: 37, 99, 235;
  --asistec-text-accent: #1d4ed8;
  --asistec-outline-color: #1d4ed8;
  --asistec-outline-border: #cbd5e1;
  --asistec-hover-soft: rgba(15, 23, 42, .04);
  --asistec-hover-soft2: rgba(15, 23, 42, .07);
  --asistec-table-border: #eef2f6;
  --asistec-thead-bg: #f8fafc;
  --asistec-scroll: rgba(15, 23, 42, .18);
  --asistec-scroll-hover: rgba(15, 23, 42, .32);
  --asistec-navbar-bg: linear-gradient(90deg, #2563eb 0%, #1d4ed8 100%);
  --asistec-navbar-edge: rgba(255, 255, 255, .22);
  --asistec-navbar-shadow: 0 2px 12px rgba(15, 23, 42, .14);
  --asistec-sticky-bg: linear-gradient(180deg, #ffffff, #f8fafc);
  --asistec-hairline: rgba(15, 23, 42, .05);
  --asistec-card-shadow: 0 .5rem 1rem rgba(15, 23, 42, .10);
  --asistec-swal-bg: #ffffff;
  --asistec-login-bg:
    radial-gradient(1100px 560px at 50% -12%, rgba(37, 99, 235, .10), transparent 60%),
    radial-gradient(760px 420px at 88% 112%, rgba(30, 64, 175, .10), transparent 60%);
  --asistec-login-card-bg: rgba(255, 255, 255, .94);
  --asistec-ok: #16a34a;
  --asistec-ok-rgb: 22, 163, 74;
  --asistec-dng: #dc2626;
  --asistec-dng-rgb: 220, 38, 38;
  --asistec-nav-active-bg: rgba(37, 99, 235, .10);
  --asistec-nav-active-color: #1e40af;
}

/* Tarjetas y list-group sobre la superficie del tema, para distinguirse del body. */
.card {
  --bs-card-bg: var(--bs-tertiary-bg);
  --bs-card-color: var(--bs-body-color);
  --bs-card-border-color: var(--bs-border-color);
}
.list-group {
  --bs-list-group-bg: var(--bs-tertiary-bg);
  --bs-list-group-color: var(--bs-body-color);
  --bs-list-group-border-color: var(--bs-border-color);
  --bs-list-group-action-hover-bg: var(--asistec-hover-soft);
}
.table { --bs-table-color: var(--bs-body-color); }

/* Bootstrap fija el color de los botones/badges por clase, no por --bs-primary:
   hay que re-tintar explícitamente. */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--asistec-primary-hover);
  --bs-btn-hover-border-color: var(--asistec-primary-hover);
  --bs-btn-active-bg: var(--asistec-primary-active);
  --bs-btn-active-border-color: var(--asistec-primary-active);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-outline-primary {
  /* texto/borde con el acento del tema, legible sobre la superficie */
  --bs-btn-color: var(--asistec-outline-color);
  --bs-btn-border-color: var(--asistec-outline-border);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--asistec-primary-active);
  --bs-btn-active-border-color: var(--asistec-primary-active);
}
.bg-primary   { background-color: var(--bs-primary) !important; }
/* Acento de texto/iconos del tema */
.text-primary { color: var(--asistec-text-accent) !important; }

/* Foco de inputs y switch activo con el acento del tema */
.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

/* nav-pills activo (sidebar) con el acento del tema */
.nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); }

/* Barras de progreso: pista translúcida + relleno con el acento brillante del tema. */
.progress {
  --bs-progress-bg: var(--asistec-hover-soft2);
}
.progress-bar {
  background-color: var(--asistec-accent);
}

/* Tarjetas: borde sutil + leve elevación al pasar el mouse */
.card {
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--asistec-card-shadow) !important;
  border-color: rgba(var(--bs-primary-rgb), .55);
}

/* Insignia con el icono del servicio (cuadro redondeado tintado con el acento). */
.svc-badge {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .6rem;
  background: rgba(var(--bs-primary-rgb), .18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Botón de acción deshabilitado: que se note tenue pero legible. */
.btn.disabled, .btn:disabled { opacity: .45; }

/* ======================= PULIDO UI / FLUIDEZ ======================= */

/* Tipografía Inter (vendorizada) */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/vendor/fonts/inter-variable.woff2") format("woff2");
}
body { letter-spacing: -.01em; }
h1, h2, h3, h4, h5, h6, .navbar-brand, .card-title { letter-spacing: -.02em; }
.text-uppercase, thead.table-light th { letter-spacing: .07em; }

/* Transiciones suaves globales (sensación fluida sin exceso) */
.btn, .nav-link, .form-control, .form-select, .card, .list-group-item, .badge, .progress-bar {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease,
              box-shadow .15s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }

/* Sidebar como "control rail": item activo con barra de acento */
.asistec-side .nav-link { position: relative; border-radius: .5rem; color: var(--bs-secondary-color); }
.asistec-side .nav-link:hover { background: var(--asistec-hover-soft); color: var(--bs-body-color); }
.asistec-side .nav-link.active { background: var(--asistec-nav-active-bg); color: var(--asistec-nav-active-color); }
.asistec-side .nav-link.active::before {
  content: ""; position: absolute; left: -.5rem; top: 18%; bottom: 18%;
  width: 3px; border-radius: 3px; background: var(--asistec-accent);
}

/* Cross-fade al mostrar una sección (la navegación conmuta .d-none) */
section[data-sec]:not(.d-none) { animation: sec-in .28s ease both; }
@keyframes sec-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Tablas más legibles sobre la superficie del tema */
.table { --bs-table-hover-bg: var(--asistec-hover-soft); --bs-table-hover-color: var(--bs-body-color); }
.table > :not(caption) > * > * { border-color: var(--asistec-table-border); }
.table-light, thead.table-light th {
  --bs-table-bg: var(--asistec-thead-bg);
  --bs-table-color: var(--bs-secondary-color);
  text-transform: uppercase; font-size: .72rem; font-weight: 600;
}

/* Scrollbar acorde al tema */
* { scrollbar-width: thin; scrollbar-color: var(--asistec-scroll) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--asistec-scroll); border-radius: 6px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--asistec-scroll-hover); background-clip: padding-box; }

/* SweetAlert2 con la identidad del tema */
.swal2-popup {
  background: var(--asistec-swal-bg); color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color); border-radius: 1rem;
  font-family: var(--bs-body-font-family);
}
.swal2-title { color: var(--bs-body-color); font-weight: 600; }
.swal2-html-container { color: var(--bs-secondary-color); }
.swal2-confirm { background-color: var(--bs-primary) !important; box-shadow: none !important; }
.swal2-confirm.swal2-styled.danger, .swal2-confirm.danger { background-color: var(--asistec-dng) !important; }
.swal2-cancel {
  background-color: transparent !important;
  border: 1px solid var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}
.swal2-toast {
  background: var(--asistec-swal-bg) !important; color: var(--bs-body-color) !important;
  border: 1px solid var(--bs-border-color);
}
.swal2-toast .swal2-title { color: var(--bs-body-color) !important; }

/* (2) Sidebar fijo en pantallas ≥ lg (offcanvas-lg colapsa a móvil bajo lg) */
.asistec-side {
  width: 16rem;
}
@media (min-width: 992px) {
  /* Sidebar independiente del scroll: llena la altura del shell (#dash) y, si su
     contenido no cabe, scrollea por dentro — no se mueve con el área de trabajo. */
  .asistec-side { height: 100%; overflow-y: auto; }
}

/* (3) Visor de código read-only con numeración de línea (siempre oscuro) */
.asistec-code {
  font-family: var(--bs-font-monospace);
  font-size: .85rem;
  background: var(--asistec-code-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
  padding: .5rem 0;
  overflow: auto;
  max-height: 60vh;
}
.asistec-code .ln {
  display: block;
  padding: 0 .75rem;
  white-space: pre;
  color: var(--asistec-code-fg);
}
.asistec-code .ln:hover { background: rgba(var(--bs-primary-rgb), .08); }

/* Resaltado de sintaxis para my.cnf (formato INI) en el visor de código */
.asistec-code .tok-sec  { color: #e5c07b; font-weight: 600; }   /* [mysqld] */
.asistec-code .tok-key  { color: #61afef; }                     /* clave */
.asistec-code .tok-punc { color: #7f8c98; }                     /* = */
.asistec-code .tok-val  { color: #98c379; }                     /* valor */
.asistec-code .tok-dir  { color: #c678dd; }                     /* !include / !includedir */
.asistec-code .tok-com  { color: #7f848e; font-style: italic; } /* # comentario */

/* Ancho legible para formularios */
.sec-narrow { max-width: 46rem; }

/* ======================= PROFUNDIDAD + SEÑALES VIVAS ======================= */

/* Navbar de marca: degradado del tema + filo de acento (barra de control). */
.navbar.bg-primary {
  background: var(--asistec-navbar-bg) !important;
  border-bottom: 1px solid var(--asistec-navbar-edge);
  box-shadow: var(--asistec-navbar-shadow);
}

/* Cabecera de sección (barra sticky dentro de <main>): degradado del tema + leve blur. */
main > .sticky-top {
  background: var(--asistec-sticky-bg) !important;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border-bottom-color: var(--bs-border-color) !important;
}
/* Título de sección con tick de acento: ancla la mirada y marca la jerarquía. */
#sectitle { position: relative; padding-left: .9rem; }
#sectitle::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 1.05em; border-radius: 3px;
  background: var(--asistec-accent); box-shadow: 0 0 8px rgba(var(--asistec-accent-rgb), .7);
}

/* Hairline superior en tarjetas (luz de borde, sin clipear esquinas). */
.card { position: relative; }
.card::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--asistec-hairline), transparent);
  pointer-events: none;
}

/* FIRMA — señales vivas: el verde "respira" (servicio activo), el rojo es alarma fija. */
@keyframes señal-viva {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(var(--asistec-ok-rgb), 0)); opacity: .9; }
  50%      { filter: drop-shadow(0 0 5px rgba(var(--asistec-ok-rgb), .9)); opacity: 1; }
}
/* Dos patrones en el HTML: clases juntas en el <i> (instancias/réplicas/pm2) o
   el color en el <span> y fa-circle en el <i> hijo (tarjetas de Servicios). */
.fa-circle.text-success, .text-success > .fa-circle {
  color: var(--asistec-ok) !important;
  animation: señal-viva 2.4s ease-in-out infinite;
}
.fa-circle.text-danger, .text-danger > .fa-circle {
  color: var(--asistec-dng) !important;
  filter: drop-shadow(0 0 3px rgba(var(--asistec-dng-rgb), .55));
}

/* Fondo de login con halos de marca: el panel flota sobre el fondo del tema. */
#login {
  background: var(--asistec-login-bg);
}
#login .card {
  background: var(--asistec-login-card-bg);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Botonera de las tarjetas de Servicios: control segmentado uniforme.
   Los botones son neutros y el color lo lleva solo el icono (play/stop/rotate),
   con hover de tinte semántico y deshabilitado claramente atenuado. */
#svc_cards .btn-group .btn {
  background-color: var(--asistec-hover-soft);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
  font-weight: 500;
}
#svc_cards .btn-group .btn:hover:not(:disabled) {
  background-color: var(--asistec-hover-soft2);
  border-color: var(--bs-primary);
  color: var(--bs-emphasis-color);
}
#svc_cards .btn-group .btn:disabled { opacity: .38; }
/* Color semántico en el icono (se atenúa solo cuando el botón está disabled). */
#svc_cards .btn-group .fa-play   { color: var(--asistec-ok); }
#svc_cards .btn-group .fa-stop   { color: var(--asistec-dng); }
#svc_cards .btn-group .fa-rotate { color: var(--asistec-text-accent); }
/* Hover con tinte de la acción para reforzar el significado. */
#svc_cards .btn-group .btn-outline-success:hover:not(:disabled) {
  background-color: rgba(var(--asistec-ok-rgb), .14); border-color: rgba(var(--asistec-ok-rgb), .5);
}
#svc_cards .btn-group .btn-outline-danger:hover:not(:disabled) {
  background-color: rgba(var(--asistec-dng-rgb), .14); border-color: rgba(var(--asistec-dng-rgb), .5);
}

/* Tarjetas del tablero de Inicio: clickeables (navegan a su sección). */
.ini-tile { cursor: pointer; }
.ini-tile:hover { border-color: rgba(var(--asistec-accent-rgb), .55); }

/* ======================= SELECTOR DE TEMA (sección Apariencia) ======================= */
.tema-card { cursor: pointer; }
.tema-card .tema-check { opacity: 0; color: var(--bs-primary); transition: opacity .15s ease; }
.tema-card.sel { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), .45) !important; }
.tema-card.sel .tema-check { opacity: 1; }
.tema-swatch {
  height: 74px; border-radius: .6rem; overflow: hidden;
  display: flex; gap: 0;
}
.tema-swatch .ss-side { width: 30%; }
.tema-swatch .ss-main { flex: 1; padding: 9px 10px; display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.tema-swatch .ss-line { height: 8px; border-radius: 4px; }

/* Foco accesible y visible para teclado (piso de calidad). */
:focus-visible { outline: 2px solid var(--asistec-accent); outline-offset: 2px; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 .25rem rgba(var(--asistec-accent-rgb), .35); }

/* Respeta a quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  .fa-circle.text-success { animation: none; }
  section[data-sec]:not(.d-none) { animation: none; }
  .card, .btn, .nav-link, .progress-bar { transition: none; }
}