/* =========================================================================
   Sentinel-Hub — sistema de estilos compartido
   Aplica sobre Bootstrap 5 + Font Awesome ya vendorizados. No reemplaza
   Bootstrap: reestiliza sus clases utilitarias (badge, btn, card, table)
   para que toda la app comparta un mismo lenguaje visual, sin tener que
   tocar las clases que ya usan los templates.
   ========================================================================= */

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

:root {
    --hub-blue: #0066ff;
    --hub-cyan: #00d2d3;
    --hub-bg: #030712;
    --hub-panel: #0f172a;
    --hub-panel-2: #131f38;
    --hub-border: rgba(0, 210, 211, 0.16);
    --hub-border-soft: rgba(255, 255, 255, 0.07);
    --hub-ink: #e7ecf5;
    --hub-muted: #8b96ab;

    --hub-teal: #2dd4a7;
    --hub-teal-soft: rgba(45, 212, 167, 0.12);
    --hub-coral: #ff6b6b;
    --hub-coral-soft: rgba(255, 107, 107, 0.12);
    --hub-warn: #f2b84b;
    --hub-warn-soft: rgba(242, 184, 75, 0.12);

    --font-display: 'Space Grotesk', 'Inter', sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    --radius-lg: 14px;
    --radius-md: 10px;
    --radius-sm: 7px;
}

/* ---------- Base ---------- */
body { font-family: var(--font-body); background-color: var(--hub-bg); color: var(--hub-ink); }
h1, h2, h3, h4, h5, h6, .navbar-brand, .btn { font-family: var(--font-display); }
.small, small, .table, td, th { font-family: var(--font-body); }
.text-muted { color: var(--hub-muted) !important; }
.text-gradient { background: linear-gradient(90deg, var(--hub-blue), var(--hub-cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Form controls (shared) ---------- */
.form-control-hub { background-color: rgba(255, 255, 255, 0.04); border: 1px solid rgba(0, 210, 211, 0.3); color: var(--hub-ink); }
.form-control-hub:focus { background-color: rgba(255, 255, 255, 0.06); border-color: var(--hub-cyan); color: var(--hub-ink); box-shadow: 0 0 0 3px rgba(0, 210, 211, 0.14); }
.form-control-hub::placeholder { color: #58616d !important; opacity: 1; }

/* ---------- Navbar ---------- */
.navbar {
    background-color: rgba(15, 23, 42, 0.86) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hub-border);
    box-shadow: 0 1px 0 rgba(0, 210, 211, 0.05), 0 8px 24px rgba(0, 0, 0, 0.35);
}
.navbar .navbar-brand span { letter-spacing: 0.01em; }
.navbar .navbar-brand img { transition: filter 0.2s ease; }

/* ---------- Cards ---------- */
.card-hub {
    background-color: var(--hub-panel) !important;
    border: 1px solid var(--hub-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 40px rgba(0, 0, 0, 0.45);
    position: relative;
    overflow: hidden;
}
.card-hub::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 210, 211, 0.55), transparent);
}

/* ---------- Buttons ---------- */
.btn { border-radius: var(--radius-sm); font-weight: 600; letter-spacing: 0.01em; transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.btn-hub {
    background: linear-gradient(90deg, var(--hub-blue), var(--hub-cyan));
    border: none; color: #051019; font-weight: 700;
    box-shadow: 0 6px 18px rgba(0, 210, 211, 0.18);
}
.btn-hub:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 210, 211, 0.32); color: #051019; }
.btn-hub:active { transform: translateY(0); }

.btn-outline-light, .btn-outline-info, .btn-outline-danger, .btn-outline-success {
    border-width: 1px; background: rgba(255, 255, 255, 0.02);
}
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.35); transform: translateY(-1px); }
.btn-outline-info { color: var(--hub-cyan); border-color: rgba(0, 210, 211, 0.45); }
.btn-outline-info:hover { background: rgba(0, 210, 211, 0.12); border-color: var(--hub-cyan); color: var(--hub-cyan); transform: translateY(-1px); }
.btn-outline-danger { color: var(--hub-coral); border-color: rgba(255, 107, 107, 0.4); }
.btn-outline-danger:hover { background: var(--hub-coral-soft); border-color: var(--hub-coral); color: var(--hub-coral); transform: translateY(-1px); }
.btn-success { background-color: rgba(45, 212, 167, 0.16); border: 1px solid var(--hub-teal); color: var(--hub-teal); }
.btn-success:hover { background-color: var(--hub-teal); color: #052620; }
.btn-sm { border-radius: var(--radius-sm); padding: 0.38rem 0.9rem; font-size: 0.76rem; }

.form-control-hub { border-radius: var(--radius-sm); }

/* ---------- Badges → pill "status-tag" ---------- */
.badge {
    border-radius: 999px !important;
    font-family: var(--font-mono);
    font-size: 0.66rem !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 700 !important;
    padding: 0.42em 0.9em !important;
    border: 1px solid transparent;
}
.badge.bg-success { background-color: var(--hub-teal-soft) !important; color: var(--hub-teal) !important; border-color: rgba(45, 212, 167, 0.4); }
.badge.bg-danger { background-color: var(--hub-coral-soft) !important; color: var(--hub-coral) !important; border-color: rgba(255, 107, 107, 0.4); }
.badge.bg-warning { background-color: var(--hub-warn-soft) !important; color: var(--hub-warn) !important; border-color: rgba(242, 184, 75, 0.45); }
.badge.bg-info { background-color: rgba(0, 210, 211, 0.12) !important; color: var(--hub-cyan) !important; border-color: rgba(0, 210, 211, 0.45); }
.badge.bg-secondary { background-color: rgba(255, 255, 255, 0.06) !important; color: var(--hub-muted) !important; border-color: rgba(255, 255, 255, 0.14); }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; }
.table thead th {
    font-family: var(--font-mono) !important;
    font-size: 0.68rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hub-cyan) !important;
    font-weight: 600 !important;
    padding-top: 0.9rem; padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--hub-border) !important;
}
.table td { padding-top: 0.95rem; padding-bottom: 0.95rem; }
.table-hover > tbody > tr:hover > * { background-color: rgba(0, 210, 211, 0.055) !important; }

/* Avatar chip: envuelve un icono fa-user (u otros) en un circulo con
   degrade, sin requerir cambios de markup -- aplica sobre el icono ya
   presente en la celda de la tabla. */
.table td > i.fa-user,
.table td > i.fa-user-clock,
.table td > i.fa-user-shield {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, var(--hub-blue), var(--hub-cyan));
    color: #051019 !important; font-size: 0.7rem;
}

/* ---------- Stat tiles ---------- */
.stat-tile-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.stat-tile {
    flex: 1 1 160px;
    background: var(--hub-panel-2);
    border: 1px solid var(--hub-border-soft);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
}
.stat-tile .stat-n { font-family: var(--font-mono); font-size: 1.65rem; font-weight: 700; color: var(--hub-ink); line-height: 1; }
.stat-tile .stat-l { font-size: 0.68rem; color: var(--hub-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.35rem; }
.stat-tile.accent .stat-n { color: var(--hub-cyan); }
.stat-tile.danger .stat-n { color: var(--hub-coral); }
.stat-tile.warn .stat-n { color: var(--hub-warn); }
.stat-tile.ok .stat-n { color: var(--hub-teal); }

/* ---------- Reusable component CSS moved out of index.html ---------- */
.section-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hub-muted); margin-bottom: 0.75rem; }

.score-gauge {
    --pct: 0;
    width: 132px; height: 132px; border-radius: 50%;
    background: conic-gradient(var(--gauge-color, var(--hub-cyan)) calc(var(--pct) * 1%), rgba(255,255,255,0.08) 0);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    box-shadow: 0 0 0 6px rgba(255,255,255,0.02);
}
.score-gauge-inner { width: 102px; height: 102px; border-radius: 50%; background: var(--hub-panel); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.score-gauge-value { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 700; line-height: 1; }
.score-gauge-label { font-size: 0.68rem; color: var(--hub-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.03em; }

.module-card { border-radius: var(--radius-md); padding: 1.1rem 1.25rem; }
.module-card-risk { background-color: var(--hub-coral-soft); border: 1px solid rgba(255, 107, 107, 0.35); }
.module-card-info { background-color: rgba(255,255,255,0.03); border: 1px solid var(--hub-border); }

.scan-loading-overlay { position: fixed; inset: 0; background: rgba(3, 7, 18, 0.92); backdrop-filter: blur(2px); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.scan-loading-overlay.d-none { display: none !important; }
.scan-loading-box { text-align: center; padding: 2rem 2.5rem; border-radius: var(--radius-lg); background: var(--hub-panel); border: 1px solid var(--hub-border); box-shadow: 0 10px 40px rgba(0,0,0,0.6); max-width: 320px; }
.scan-spinner { width: 54px; height: 54px; margin: 0 auto 1.25rem; border-radius: 50%; border: 4px solid rgba(0, 210, 211, 0.15); border-top-color: var(--hub-cyan); animation: scan-spin 0.9s linear infinite; }
@keyframes scan-spin { to { transform: rotate(360deg); } }
.scan-loading-text { font-size: 0.9rem; color: #cbd5e1; min-height: 1.2em; }

/* =========================================================================
   Landing pública (24-sep-2026) — nav + secciones informativas en "/"
   antes de pedir credenciales. Reutiliza los tokens y componentes de
   arriba (card-hub, btn-hub, text-gradient, etc.), no crea un lenguaje
   visual aparte.
   ========================================================================= */
html { scroll-behavior: smooth; }

.navbar-nav .nav-link { color: var(--hub-muted); font-weight: 600; font-size: 0.86rem; padding: 0.5rem 1rem !important; transition: color 0.15s ease; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus { color: var(--hub-cyan); }
.navbar-toggler { border-color: var(--hub-border); }
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(0, 210, 211, 0.2); }

.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--hub-cyan);
    background: rgba(0, 210, 211, 0.1); border: 1px solid var(--hub-border);
    border-radius: 999px; padding: 0.4em 1em;
}

.landing-section { padding: 5.5rem 0; border-top: 1px solid var(--hub-border-soft); }
.landing-section:first-of-type { border-top: none; }

.feature-card { background: var(--hub-panel); border: 1px solid var(--hub-border); border-radius: var(--radius-lg); padding: 1.75rem; height: 100%; }
.feature-card .feature-icon {
    width: 44px; height: 44px; border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--hub-blue), var(--hub-cyan));
    display: flex; align-items: center; justify-content: center;
    color: #051019; font-size: 1.1rem; margin-bottom: 1rem;
}

.step-item { display: flex; gap: 1.25rem; align-items: flex-start; }
.step-number {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
    background: var(--hub-panel-2); border: 1px solid var(--hub-border);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-weight: 700; color: var(--hub-cyan);
}

.landing-footer { border-top: 1px solid var(--hub-border-soft); padding: 2.5rem 0; }

.social-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hub-border);
    color: var(--hub-muted);
    font-size: 0.95rem;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.social-icon:hover, .social-icon:focus {
    color: var(--hub-cyan);
    border-color: var(--hub-cyan);
    background: rgba(0, 210, 211, 0.1);
}

/* ---------- Checkbox (form-check), registro/T&C ---------- */
.form-check-input { background-color: rgba(255, 255, 255, 0.04); border: 1px solid rgba(0, 210, 211, 0.35); }
.form-check-input:checked { background-color: var(--hub-cyan); border-color: var(--hub-cyan); }
.form-check-input:focus { border-color: var(--hub-cyan); box-shadow: 0 0 0 3px rgba(0, 210, 211, 0.14); }

/* ---------- Documento legal (Términos y Condiciones) ---------- */
.legal-doc { max-width: 760px; margin: 0 auto; }
.legal-doc h2 { font-size: 1.05rem; margin-top: 2.25rem; margin-bottom: 0.75rem; }
.legal-doc h2:first-of-type { margin-top: 0; }
.legal-doc p, .legal-doc li { color: var(--hub-muted); line-height: 1.7; }
.legal-doc ul { padding-left: 1.25rem; }
.legal-doc strong { color: var(--hub-ink); }

/* ---------- Detalle de solicitante (admin_solicitudes / admin_usuario_detalle) ---------- */
.applicant-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.6rem 1.5rem; margin-top: 0.75rem; }
.applicant-grid dt { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hub-muted); font-family: var(--font-mono); margin-bottom: 0.15rem; }
.applicant-grid dd { font-size: 0.86rem; color: var(--hub-ink); margin-bottom: 0; word-break: break-word; }
.applicant-grid .applicant-full { grid-column: 1 / -1; }

/* =========================================================================
   Login — radar decorativo + inputs con icono (rediseño, 24-sep-2026)
   Componentes reutilizables: cualquier form del sitio puede usar
   .input-icon-wrap para inputs con icono a la izquierda.
   ========================================================================= */
.input-icon-wrap { position: relative; }
.input-icon-wrap > i { position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); color: var(--hub-muted); font-size: 0.85rem; pointer-events: none; }
.input-icon-wrap input.form-control-hub { padding-left: 2.6rem; }

.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hub-teal); display: inline-block; box-shadow: 0 0 0 3px var(--hub-teal-soft); }

.radar-scan { position: relative; width: 148px; height: 148px; flex-shrink: 0; }
.radar-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--hub-border); }
.radar-ring.r2 { inset: 20px; }
.radar-ring.r3 { inset: 40px; }
.radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(0, 210, 211, 0.5), transparent 30%); animation: radar-spin 3.6s linear infinite; }
.radar-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: var(--hub-panel); border: 1px solid var(--hub-border); display: flex; align-items: center; justify-content: center; color: var(--hub-cyan); font-size: 1.1rem; z-index: 2; }
.radar-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; animation: radar-pulse 2.6s ease-in-out infinite; }
.radar-dot.d1 { top: 14%; left: 72%; background: var(--hub-coral); box-shadow: 0 0 0 4px var(--hub-coral-soft); }
.radar-dot.d2 { top: 68%; left: 20%; background: var(--hub-warn); box-shadow: 0 0 0 4px var(--hub-warn-soft); animation-delay: 0.85s; }
.radar-dot.d3 { top: 78%; left: 66%; background: var(--hub-teal); box-shadow: 0 0 0 4px var(--hub-teal-soft); animation-delay: 1.7s; }
@keyframes radar-spin { to { transform: rotate(360deg); } }
@keyframes radar-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .radar-sweep, .radar-dot { animation: none; } }