/* ============================================================================
   GesServ · Tema "Blueprint técnico"  (prueba — cargado sobre el layout Bootstrap)
   Reversible: quita el <link> de este archivo en app_bootstrap.blade.php y vuelve todo.
   Vía CSS/variables, SIN Tailwind. Mono SOLO en datos (no en texto largo).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Exo:wght@500;600;700&family=Roboto+Mono:wght@400;500;700&display=swap');

:root {
    --bp-ground: #0a1a2f;
    --bp-card:   #0e2138;
    --bp-rail:   #08162a;
    --bp-soft:   #0f2c44;
    --bp-border: #1c3f5f;
    --bp-ink:    #dbe9f7;
    --bp-muted:  #7fa4c8;
    --bp-cyan:   #35c1e8;
    --bp-cyan-strong: #7ad8f0;
    --bp-amber:  #ffd166;
    --bp-ok:     #4ad6b4;
    --bp-bad:    #ff6b7a;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
/* !important: el body trae el degradado antiguo inline y hay que ganarle. */
body {
    background: var(--bp-ground) !important;
    color: var(--bp-ink) !important;
    font-family: 'Exo', system-ui, sans-serif !important;
}

/* Firma blueprint: rejilla de milimetrado, solo en el fondo del área de contenido.
   Deriva muy lentamente (como un plano vivo) — animación sutil, no distrae. */
.dashboard-container {
    position: relative;
    background-image:
        linear-gradient(var(--bp-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--bp-border) 1px, transparent 1px);
    background-size: 22px 22px;
    background-color: var(--bp-ground);
    background-blend-mode: soft-light;
    padding-top: 1.5rem;
    animation: bp-grid-drift 50s linear infinite;
}
/* Resplandor cian tenue que "respira" sobre la rejilla (da vida sin recargar). */
.dashboard-container::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(70% 55% at 28% 18%, rgba(53,193,232,0.09), transparent 60%);
    animation: bp-breathe 9s ease-in-out infinite;
}
/* Puntos brillantes que recorren las líneas de la rejilla en ángulos rectos (tipo circuito/Pac-Man).
   Cada tramo del keyframe cambia SOLO left o SOLO top → van por las líneas, nunca en diagonal.
   Se inyectan por JS (blueprint.js) con animation-delay escalonado: van equiespaciados por el mismo
   trazado → NUNCA coinciden en la misma posición, así que nunca chocan. Viajan por el fondo. */
.bp-runner {
    position: absolute; z-index: 0; pointer-events: none;
    width: 7px; height: 7px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px 2px rgba(255,255,255,.9), 0 0 14px 5px var(--bp-cyan), 0 0 26px 9px rgba(53,193,232,.5);
    left: 4%; top: 8%;
    animation: bp-runner 14s linear infinite;
}
/* El contenido va por encima del resplandor y de los puntos (los runners quedan como fondo). */
.dashboard-container > *:not(.bp-runner) { position: relative; z-index: 1; }

@keyframes bp-runner {
    0%   { left: 4%;  top: 8%;  }
    10%  { left: 92%; top: 8%;  }   /* → */
    20%  { left: 92%; top: 42%; }   /* ↓ */
    30%  { left: 34%; top: 42%; }   /* ← */
    40%  { left: 34%; top: 78%; }   /* ↓ */
    52%  { left: 96%; top: 78%; }   /* → */
    64%  { left: 96%; top: 24%; }   /* ↑ */
    74%  { left: 52%; top: 24%; }   /* ← */
    86%  { left: 52%; top: 8%;  }   /* ↑ */
    100% { left: 4%;  top: 8%;  }   /* ← (cierra el circuito, bucle sin salto) */
}

@keyframes bp-grid-drift {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 44px 44px, 44px 44px; }   /* 2 celdas → bucle sin costura */
}
@keyframes bp-breathe {
    0%, 100% { opacity: .45; }
    50%      { opacity: 1; }
}

/* ── Topbar / navbar ──────────────────────────────────────────────────────── */
.navbar, nav.navbar {
    background: var(--bp-rail) !important;
    border-bottom: 1px solid var(--bp-border);
}

/* ── Títulos ──────────────────────────────────────────────────────────────── */
/* Título "placa de latón": degradado dorado metálico + brillo tenue. Cálido sobre el azul del plano. */
.dashboard-title {
    font-family: 'Exo', sans-serif !important;
    font-weight: 700; letter-spacing: .6px;
    background: linear-gradient(180deg, #ffe9a8 0%, #e8c15a 48%, #c8992e 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
    text-shadow: 0 0 24px rgba(212,175,55,.22);
}
/* El icono del título va en dorado pleno (el clip de texto no le sienta bien a los iconos-fuente). */
.dashboard-title i {
    -webkit-text-fill-color: #e8c15a !important; color: #e8c15a !important;
    filter: drop-shadow(0 0 10px rgba(212,175,55,.35));
}
.dashboard-subtitle { color: var(--bp-muted) !important; }

/* ── Tarjetas de KPI (stat-card) → superficie de plano, radio pequeño ─────── */
.stat-card {
    background: var(--bp-card) !important;
    border: 1px solid var(--bp-border) !important;
    /* Barrita de acento a la IZQUIERDA en TODAS las tarjetas (consistencia). Cian por defecto
       (acceso normal); las de estado la sobreescriben con su color semántico más abajo. */
    border-left: 3px solid var(--bp-cyan) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    transition: border-color .15s, background .15s;
    /* Altura uniforme: todas las tarjetas de una fila igualan la más alta. */
    height: 100%;
    display: flex; flex-direction: column; justify-content: center;
    min-height: 118px;
}
.stat-card:hover {
    /* Ilumina los 3 lados, pero NO el izquierdo: así la barrita de estado (rojo/ámbar/verde) no
       se pierde al pasar por encima. */
    border-top-color: var(--bp-cyan) !important;
    border-right-color: var(--bp-cyan) !important;
    border-bottom-color: var(--bp-cyan) !important;
    background: var(--bp-soft) !important;
}
.stat-card i { color: var(--bp-cyan); opacity: 1; }
.stat-card__value {
    font-family: 'Roboto Mono', ui-monospace, monospace;   /* mono SOLO en la cifra */
    font-variant-numeric: tabular-nums;
    color: var(--bp-ink);
}
.stat-card__label {
    color: var(--bp-muted); text-transform: uppercase;
    letter-spacing: .5px; font-size: .72rem; opacity: 1;
}

/* Semántica de ESTADO: no por fondo de color, sino por borde de cota.
   (Las clases --red/--amber/--green las usan backup, salud, monitor, colisiones.) */
.stat-card--red    { border-left: 3px solid var(--bp-bad) !important; }
.stat-card--red    i { color: var(--bp-bad); }
.stat-card--amber,
.stat-card--yellow { border-left: 3px solid var(--bp-amber) !important; }
.stat-card--amber i,
.stat-card--yellow i { color: var(--bp-amber); }
.stat-card--green  { border-left: 3px solid var(--bp-ok) !important; }
.stat-card--green  i { color: var(--bp-ok); }
/* Las de acceso (blue/cyan/teal/purple/pink/orange) → acento de marca cian. */
.stat-card--purple i, .stat-card--pink i, .stat-card--orange i,
.stat-card--teal i, .stat-card--blue i, .stat-card--cyan i { color: var(--bp-cyan); }

/* ── Botones ──────────────────────────────────────────────────────────────── */
.btn-primary {
    background: var(--bp-cyan) !important; border-color: var(--bp-cyan) !important;
    color: #04121b !important; font-weight: 600;
}
.btn-primary:hover { background: var(--bp-cyan-strong) !important; border-color: var(--bp-cyan-strong) !important; }
.btn-outline-light { border-color: var(--bp-border) !important; color: var(--bp-ink) !important; }
.btn-outline-light:hover { background: var(--bp-soft) !important; border-color: var(--bp-cyan) !important; }

/* ── Tablas → cabecera de plano, datos en mono ────────────────────────────── */
.table { color: var(--bp-ink); }
/* Cabecera "de plano": pisa los fondos de color viejos (azul/morado/verde de app_custom.css e
   inline). Texto cian en mayúsculas + línea de cota cian debajo. */
.table thead, .table thead tr, .table thead th,
.table-servidores thead, .table-dominios thead, .table-paginas thead, .table-trabajos thead {
    background: var(--bp-rail) !important;
    background-image: none !important;
    color: var(--bp-cyan) !important;
    text-transform: uppercase; letter-spacing: .6px; font-size: .76rem; font-weight: 600;
    font-family: 'Exo', sans-serif !important;
}
.table thead th { border-bottom: 2px solid var(--bp-cyan) !important; border-color: var(--bp-border); }
.table td, .table th { border-color: var(--bp-border) !important; }
.table tbody td { font-family: 'Roboto Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
/* Hover de fila: fondo suave + una barrita cian a la izquierda (empirulado). */
.table-hover tbody tr { transition: background .12s, box-shadow .12s; }
.table-hover tbody tr:hover {
    background: var(--bp-soft) !important;
    box-shadow: inset 3px 0 0 var(--bp-cyan);
}

/* Formularios tipo "ficha técnica" (tabla con label en <th> | campo en <td>): la columna de labels
   se convierte en etiquetas de cota — fondo de plano, texto cian, barrita de acento a la izquierda. */
.table tbody th {
    background: var(--bp-rail) !important;
    color: var(--bp-cyan) !important;
    font-family: 'Exo', sans-serif; font-weight: 600; letter-spacing: .3px;
    border-left: 3px solid var(--bp-cyan) !important;
    vertical-align: middle;
}
/* La fila del label resalta suavemente al enfocar su campo (foco dentro de la fila). */
.table tbody tr:focus-within th { background: var(--bp-soft) !important; color: var(--bp-cyan-strong) !important; }
.table tbody tr:focus-within td { background: rgba(53,193,232,.04) !important; }

/* ── Formulario-ficha: consola negra enmarcada en dorado ──────────────────────────────
   Bootstrap le mete margin-bottom a .table → a cero para simetría. Marco dorado (combina con
   el título) y la columna de campos en negro puro = consola de verdad. */
/* El marco dorado va en el CONTENEDOR (div), no en la <table>: con border-collapse las celdas
   se comían parte del borde exterior y no se veía en los 4 lados. */
form .table-responsive {
    padding: 0;
    border: 2px solid #caa64a !important;   /* marco dorado (placa), los 4 lados */
    border-radius: 8px; overflow: hidden;
    box-shadow: 0 0 18px rgba(202,166,74,.12);
}
form .table { margin: 0 !important; border: none !important; }
/* La columna de campos (td) en negro consola; los labels (th) mantienen su fondo de plano. */
form .table td { background: #02060d !important; }
form .table tbody tr:focus-within td { background: #000 !important; }
/* Separadores finos entre filas; la última sin borde (arriba/abajo iguales). */
form .table tbody tr:not(:last-child) th,
form .table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--bp-border) !important; }
form .table tbody tr:last-child th,
form .table tbody tr:last-child td { border-bottom: none !important; }

/* ── Campos "terminal": sin caja, solo una línea inferior que se ilumina al escribir ─── */
form .table td .form-control,
form .table td .form-select,
form .table td textarea,
form .table td .form-control-normandy {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--bp-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: .45rem .25rem !important;
    font-family: 'Roboto Mono', ui-monospace, monospace;   /* aire de consola */
    transition: border-color .15s, box-shadow .15s, background .15s;
}
form .table td .form-control:focus,
form .table td .form-select:focus,
form .table td textarea:focus,
form .table td .form-control-normandy:focus {
    border-bottom-color: var(--bp-cyan) !important;
    box-shadow: 0 6px 12px -8px var(--bp-cyan) !important;   /* glow bajo la línea */
    background: rgba(53,193,232,.03) !important;
}
form .table td .form-control::placeholder,
form .table td textarea::placeholder { color: var(--bp-muted); opacity: .7; }
/* El textarea conserva algo de caja (una línea sola en varias filas se ve rara). */
form .table td textarea { border: 1px solid var(--bp-border) !important; border-radius: 6px !important; padding: .5rem .6rem !important; }
form .table td textarea:focus { border-color: var(--bp-cyan) !important; }

/* Paneles "glassmorphism" viejos (rgba blanco translúcido, con o sin espacios) → superficie card.
   Sin borde: el fondo card ya los distingue del fondo, y así el marco dorado de las fichas no
   compite con un borde gris a los lados. */
[style*="rgba(255,255,255,0.1)"], [style*="rgba(255, 255, 255, 0.1)"],
[style*="rgba(255,255,255,0.06)"], [style*="rgba(255, 255, 255, 0.06)"],
[style*="rgba(255,255,255,0.08)"], [style*="rgba(255, 255, 255, 0.08)"] {
    background: var(--bp-card) !important;
    backdrop-filter: none !important;
    border: none !important;
    border-radius: 12px !important;
}

/* ── Foco visible (anillo cian) en todo lo interactivo ────────────────────── */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus, .form-select:focus {
    outline: 2px solid var(--bp-cyan) !important; outline-offset: 1px;
    box-shadow: none !important; border-color: var(--bp-cyan) !important;
}

/* ── Inputs ───────────────────────────────────────────────────────────────── */
/* Fondo más oscuro que las superficies + sombra interior → el campo se "hunde" y da profundidad
   (antes todo era del mismo tono y se veía plano). */
.form-control, .form-select {
    background: #061020 !important; color: var(--bp-ink) !important;
    border: 1px solid var(--bp-border) !important; border-radius: 6px !important;
    box-shadow: inset 0 1px 4px rgba(0,0,0,.45) !important;
}
.form-control:focus, .form-select:focus {
    background: #071628 !important;
    box-shadow: inset 0 1px 4px rgba(0,0,0,.4), 0 0 0 .18rem rgba(53,193,232,.25) !important;
}
.form-control::placeholder { color: var(--bp-muted); }

/* ============================================================================
   COMPONENTES GLOBALES — aplica el tema a TODO el sitio (todas las vistas).
   Cubre los componentes Bootstrap que aún traían su estilo por defecto.
   ============================================================================ */

/* ── Modales ──────────────────────────────────────────────────────────────── */
.modal-content { background: var(--bp-card) !important; border: 1px solid var(--bp-border) !important; border-radius: 6px !important; color: var(--bp-ink); }
.modal-header, .modal-footer { border-color: var(--bp-border) !important; }
.modal-title { color: var(--bp-ink); font-family: 'Exo', sans-serif; }
.btn-close { filter: invert(.9) grayscale(1) brightness(1.4); }

/* ── Dropdowns ────────────────────────────────────────────────────────────── */
.dropdown-menu { background: var(--bp-card) !important; border: 1px solid var(--bp-border) !important; border-radius: 6px !important; }
.dropdown-item { color: var(--bp-ink) !important; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--bp-soft) !important; color: var(--bp-cyan-strong) !important; }
.dropdown-divider { border-color: var(--bp-border) !important; }

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.alert { border-radius: 6px !important; border: 1px solid var(--bp-border); }
.alert-success { background: rgba(74,214,180,.12) !important;  border-color: var(--bp-ok)   !important; color: #bff3e6 !important; }
.alert-danger  { background: rgba(255,107,122,.12) !important; border-color: var(--bp-bad)  !important; color: #ffd0d5 !important; }
.alert-warning { background: rgba(255,209,102,.12) !important; border-color: var(--bp-amber) !important; color: #ffe9b8 !important; }
.alert-info    { background: rgba(53,193,232,.12) !important;  border-color: var(--bp-cyan) !important; color: #c5ecf8 !important; }

/* ── Cards Bootstrap / paneles ────────────────────────────────────────────── */
.card { background: var(--bp-card) !important; border: 1px solid var(--bp-border) !important; border-radius: 6px !important; color: var(--bp-ink); }
.card-header, .card-footer { background: var(--bp-rail) !important; border-color: var(--bp-border) !important; color: var(--bp-ink); }
.list-group-item { background: var(--bp-card) !important; border-color: var(--bp-border) !important; color: var(--bp-ink) !important; }

/* ── Pestañas ─────────────────────────────────────────────────────────────── */
.nav-tabs { border-color: var(--bp-border) !important; }
.nav-tabs .nav-link { color: var(--bp-muted) !important; border-radius: 6px 6px 0 0; }
.nav-tabs .nav-link.active { background: var(--bp-card) !important; color: var(--bp-cyan) !important; border-color: var(--bp-border) var(--bp-border) var(--bp-card) !important; }
.nav-pills .nav-link { color: var(--bp-muted) !important; }
.nav-pills .nav-link.active { background: var(--bp-cyan) !important; color: #04121b !important; }

/* ── Botones semánticos → paleta blueprint ────────────────────────────────── */
.btn-success { background: var(--bp-ok) !important;   border-color: var(--bp-ok) !important;   color: #052018 !important; }
.btn-danger  { background: var(--bp-bad) !important;  border-color: var(--bp-bad) !important;  color: #2a0a0e !important; }
.btn-info    { background: var(--bp-cyan) !important; border-color: var(--bp-cyan) !important; color: #04121b !important; }
.btn-warning { background: var(--bp-amber) !important; border-color: var(--bp-amber) !important; color: #2c2200 !important; }
.btn-secondary { background: var(--bp-soft) !important; border-color: var(--bp-border) !important; color: var(--bp-ink) !important; }
/* Secundario/Cancelar: CON CUERPO (fondo con relieve) para que se distinga del fondo — antes era
   solo un borde y se veía "fantasma". Sigue siendo neutro (no compite con el CTA cian). */
.btn-outline-secondary {
    background: var(--bp-soft) !important;
    border: 1px solid var(--bp-border) !important;
    color: var(--bp-ink) !important;
}
.btn-outline-secondary:hover { background: var(--bp-card) !important; border-color: var(--bp-muted) !important; color: #fff !important; }
.btn-outline-info, .btn-outline-primary { border-color: var(--bp-border) !important; color: var(--bp-ink) !important; }
.btn-outline-info:hover, .btn-outline-primary:hover { background: var(--bp-soft) !important; border-color: var(--bp-cyan) !important; color: var(--bp-cyan-strong) !important; }
/* CTA principal (cian) con glow → destaca claramente como la acción principal. */
.btn-primary { box-shadow: 0 0 18px rgba(53,193,232,.4) !important; }
.btn-primary:hover { box-shadow: 0 0 26px rgba(53,193,232,.6) !important; }
/* Botones de acción al pie de un formulario (Cancelar | Guardar): mismo ancho, alineados. */
form .d-flex.justify-content-between .btn-lg { min-width: 200px; }
.btn-outline-danger { border-color: var(--bp-bad) !important; color: var(--bp-bad) !important; }
.btn-outline-danger:hover { background: rgba(255,107,122,.15) !important; }

/* ── Badges (mantienen la semántica) ──────────────────────────────────────── */
.badge.bg-success, .badge.text-bg-success { background: var(--bp-ok) !important;   color: #052018 !important; }
.badge.bg-danger,  .badge.text-bg-danger  { background: var(--bp-bad) !important;  color: #2a0a0e !important; }
.badge.bg-warning, .badge.text-bg-warning { background: var(--bp-amber) !important; color: #2c2200 !important; }
.badge.bg-info,    .badge.text-bg-info    { background: var(--bp-cyan) !important; color: #04121b !important; }
.badge.bg-primary, .badge.text-bg-primary { background: var(--bp-cyan) !important; color: #04121b !important; }
.badge.bg-secondary, .badge.text-bg-secondary { background: var(--bp-soft) !important; color: var(--bp-muted) !important; }

/* ── Progress / paginación ────────────────────────────────────────────────── */
.progress { background: var(--bp-rail) !important; border-radius: 6px; }
.progress-bar { background: var(--bp-cyan) !important; }
.page-link { background: var(--bp-card) !important; border-color: var(--bp-border) !important; color: var(--bp-ink) !important; }
.page-item.active .page-link { background: var(--bp-cyan) !important; border-color: var(--bp-cyan) !important; color: #04121b !important; }

/* ── Formularios extra ────────────────────────────────────────────────────── */
.form-label { color: var(--bp-ink); font-weight: 500; }
.form-text { color: var(--bp-muted) !important; }
.form-check-input:checked { background-color: var(--bp-cyan) !important; border-color: var(--bp-cyan) !important; }
.input-group-text { background: var(--bp-rail) !important; border-color: var(--bp-border) !important; color: var(--bp-muted) !important; }

/* ── Helpers de color de Bootstrap → paleta blueprint ─────────────────────── */
.text-white   { color: var(--bp-ink) !important; }
.text-secondary, .text-muted { color: var(--bp-muted) !important; }
.text-info, .text-primary { color: var(--bp-cyan) !important; }
.text-success { color: var(--bp-ok) !important; }
.text-danger  { color: var(--bp-bad) !important; }
.text-warning { color: var(--bp-amber) !important; }
.bg-dark, .bg-secondary { background-color: var(--bp-card) !important; }
.bg-light { background-color: var(--bp-soft) !important; color: var(--bp-ink) !important; }
hr { border-color: var(--bp-border) !important; opacity: 1; }

/* ── Títulos con degradado viejo (varias vistas) → tinta plana ────────────── */
.text-gradient, [class*="-title"][style*="gradient"] {
    background: none !important; -webkit-text-fill-color: var(--bp-ink) !important; color: var(--bp-ink) !important;
}

/* Cajas con fondo/gradiente del tema VIEJO (azul/morado inline) → se revisan caso a caso con Pato,
   un [style*="#hex"] genérico también pisaría texto/bordes con ese color y rompería cosas. */

@media (prefers-reduced-motion: reduce) {
    .stat-card { transition: none; }
    .dashboard-container { animation: none; }
    .dashboard-container::before { animation: none; opacity: .5; }
    .bp-runner { animation: none; display: none; }   /* sin los puntos viajeros */
}