/* =========================================================
   PARTE 1 — BASE, VARIABLES, RESET Y SUBNAV GENERAL
   ========================================================= */

:root {
    --booh-blue:#00AFD8;
    --booh-light:#28E1FF;
    --accent:#28E1FF;
    --bg:#05080E;
    --bg-soft:#0B1018;
    --text:#E6F1FA;
    --text-muted:#8AA0B4;
}

/* RESET */
* { margin:0; padding:0; box-sizing:border-box; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: "Roboto", sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x:hidden!important;
}

/* WRAPPER GENERAL */
.dash-wrapper {
    width: 100%;
    padding-bottom: 60px;
}

/* CONTENEDOR PRINCIPAL */
.dash-main.container {
    max-width: 1100px;
    margin: auto;
    padding: 30px 14px 60px;
}

/* =========================================================
   SUBNAV PRINCIPAL DEL ÁREA CLIENTE
   ========================================================= */

.subnav {
  position: sticky;
  top: 70px;
  z-index: 900;
  background: rgba(11,16,24,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 20px;
}

.subnav-inner {
  display:flex;
  justify-content:center;
  padding:12px 0;
  background-color:#1A1F27;
}

.subnav ul {
  display:flex;
  gap:2rem;
  list-style:none;
}

.subnav a {
  color:var(--text-muted);
  padding:8px 18px;
  border-radius:999px;
  font-size:0.95rem;
  font-weight:500;
  transition:.25s;
}

.subnav a:hover {
  color:var(--booh-blue);
  background:rgba(255,255,255,0.05);
}

.subnav a.active {
  background:var(--booh-light);
  box-shadow:0 0 15px rgba(0,175,216,0.25);
  color:#fff;
  font-weight:700;
}

/* =========================================================
   PARTE 2 — HEADER RESUMEN DEL DASHBOARD (.dash-summary)
   ========================================================= */

.dash-summary {
    margin-bottom: 25px;
}

/* Tarjeta principal */
.dash-summary-card {
    background: linear-gradient(135deg, #0B1018, #05080E);
    border-radius: 18px;
    padding: 22px 24px;
    border: 1px solid rgba(255,255,255,0.07);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
    gap: 14px;
}

/* ---- LADO IZQUIERDO ---- */
.dash-summary-left h1 {
    color: var(--booh-blue);
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.dash-summary-left p {
    color: var(--text-muted);
    font-size: 0.95rem;
    max-width: 480px;
}

/* ---- LADO DERECHO ---- */
.dash-summary-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 150px;
}

.tag-online {
    padding: 6px 14px;
    font-size: 0.8rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(32,212,137,0.15);
    color: #20D489;
}

.tag-online::before {
    content: "";
    width: 8px;
    height: 8px;
    background: #20D489;
    border-radius: 50%;
}

.dash-user {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
}


/* =========================================================
   RESPONSIVE — MÓVIL < 768px
   ========================================================= */

@media (max-width: 768px) {

    .dash-summary-card {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding: 18px 20px;
        gap: 12px;
    }

    .dash-summary-left h1 {
        font-size: 1.5rem;
    }

    .dash-summary-left p {
        font-size: 0.9rem;
    }

    .dash-summary-right {
        align-items: flex-start;
        min-width: auto;
    }
}


/* =========================================================
   DESKTOP RESTAURADO ≥ 1000px (estilo premium original)
   ========================================================= */

@media (min-width: 1000px) {

    .dash-summary-card {
        background: radial-gradient(circle at 0% 0%, rgba(0,175,216,0.18), transparent 55%),
                    linear-gradient(135deg, #05080E, #071321);
        padding: 30px 35px;
        border: 1px solid rgba(0,175,216,0.25);
        box-shadow: 0 18px 40px rgba(0,0,0,0.55);
        gap: 20px;
    }

    .dash-summary-left h1 {
        font-size: 2.2rem;
        margin-bottom: 10px;
    }

    .dash-summary-left p {
        font-size: 1rem;
        max-width: 520px;
    }

    .dash-summary-right {
        min-width: 180px;
        gap: 10px;
    }

    .dash-summary-right .tag-online {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    .dash-summary-right .dash-user {
        font-size: 1rem;
    }
}

/* =========================================================
   PARTE 3 — TARJETAS GENERALES DEL DASHBOARD
   ========================================================= */

/* Contenedor general del grid de tarjetas */
.dash-card-group {
    margin: 35px 0;
    width: 100%;
}

/* Título de sección */
.dash-card-group h2 {
    color: var(--booh-blue);
    margin-bottom: 18px;
    padding-left: 6px;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: left;
}

/* Grid principal de tarjetas (desktop) */
.dash-cards-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* Tarjeta base */
.dash-card {
    background: #0B1018;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.35);
    transition: 0.25s ease;
}

.dash-card:hover {
    transform: translateY(-3px);
}

/* Etiqueta superior */
.dash-card-label {
    color: #8AA0B4;
    font-size: 0.9rem;
    margin-bottom: 6px;
    display: block;
}

/* Valor */
.dash-card-value {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
}

.dash-card-value.important {
    color: #FF6B6B;
}

/* Pequeño hint */
.dash-card-hint {
    margin-top: 8px;
    font-size: 0.85rem;
    color: #8AA0B4;
}

/* Acciones dentro de la tarjeta */
.dash-card-actions {
    margin-top: 15px;
    text-align: right;
}

/* Botón pequeño dentro de tarjeta */
.dash-card-actions .btn-primary.small {
    padding: 8px 14px;
    font-size: 0.82rem;
}


/* =========================================================
   KPIs (Escritorio y móvil)
   ========================================================= */

.kpi-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 10px;
}

.kpi-card {
    background: #05080E;
    border-radius: 14px;
    padding: 18px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.08);
}

.kpi-card h4 {
    color: #8AA0B4;
    font-size: 0.9rem;
    margin-bottom: 6px;
}

.kpi-card .value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #28E1FF;
}


/* =========================================================
   RESPONSIVE — MÓVIL
   ========================================================= */

@media (max-width: 900px) {

    /* Tarjetas → 1 columna */
    .dash-cards-3 {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .dash-card {
        width: 100%;
    }

    /* KPIs → 1 columna */
    .kpi-cards {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
}


/* =========================================================
   RESPONSIVE — ESCRITORIO ≥ 1000px (restaurado)
   ========================================================= */

@media (min-width: 1000px) {

    .dash-card-group {
        margin: 40px 0;
    }

    .dash-cards-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .dash-card {
        padding: 28px;
    }

    .dash-card-value {
        font-size: 2.2rem;
    }
}

/* =========================================================
   PARTE 4 — TABLAS Y FILTROS (CHIPS)
   ========================================================= */


/* =========================================================
   TABLAS (para pricing, productos, financiación, historial)
   ========================================================= */

.dash-table {
    width: 100%;
    border-collapse: collapse;
    background: #0B1018;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 15px;
    font-size: 0.95rem;
    color: #E6F1FA;
}

.dash-table thead {
    background: rgba(0,175,216,0.18);
}

.dash-table th {
    padding: 14px;
    text-align: left;
    font-weight: 600;
    color: #28E1FF;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.dash-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.dash-table tr:hover td {
    background: rgba(0,175,216,0.10);
}

/* Primera columna destacada */
.dash-table tbody tr td:first-child {
    font-weight: 600;
    color: #28E1FF;
}


/* =========================================================
   ESTADOS EN TABLAS (créditos y pricing)
   ========================================================= */

.status {
    padding: 6px 12px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: capitalize;
    display: inline-block;
}

.status-aprobado {
    background: rgba(0,255,160,0.18);
    color: #00FF9D;
}

.status-pendiente {
    background: rgba(255,180,0,0.20);
    color: #F6C344;
}

.status-rechazado {
    background: rgba(255,80,80,0.20);
    color: #FF6464;
}


/* =========================================================
   FILTROS (chips) — lista de restaurantes
   ========================================================= */

.filter-chips {
    margin-top: 10px;
    margin-bottom: 10px;
}

.filter-chips h4 {
    color: #8AA0B4;
    margin-bottom: 10px;
}

.chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chip {
    background: rgba(0,175,216,0.12);
    border: 1px solid rgba(0,175,216,0.25);
    padding: 8px 14px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #28E1FF;
    font-size: 0.85rem;
}

.chip-active {
    background: rgba(0,200,255,0.25);
}

.chip-close {
    cursor: pointer;
    color: #ff6b6b;
    font-weight: 700;
}

.chip-add {
    background: rgba(255,255,255,0.10);
    border: 1px dashed rgba(255,255,255,0.25);
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    color: #8AA0B4;
}

.chip-add:hover {
    background: rgba(255,255,255,0.18);
}


/* =========================================================
   SELECTOR DE RESTAURANTES (desplegable)
   ========================================================= */

.chip-selector {
    display: none;
    padding: 12px;
    background: #0B1018;
    border-radius: 12px;
    margin-top: 10px;
    border: 1px solid rgba(255,255,255,0.08);
}

.chip-selector.open {
    display: block;
}

.chip-option {
    display: block;
    padding: 10px;
    color: #E6F1FA;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.chip-option:hover {
    color: #28E1FF;
}


/* =========================================================
   RESPONSIVE — TABLAS y CHIPS
   ========================================================= */

@media (max-width: 900px) {

    /* FORZAR UNA SOLA COLUMNA */
    .dash-table {
        font-size: 0.85rem;
    }

    .chips-container {
        gap: 8px;
    }

    .chip {
        font-size: 0.8rem;
        padding: 6px 12px;
    }

    .chip-add {
        padding: 6px 12px;
    }
}

/* ========================================================
   PARTE 5 — IA PRICING (Alertas, Estrategias, Carta, Eventos)
   ======================================================== */


/* ========================================================
   TÍTULOS DE SECCIÓN
   ======================================================== */

.dash-main h2 {
    margin-bottom: 15px;
    color: #28E1FF;
    font-size: 1.4rem;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(0,175,216,0.25);
}


/* ========================================================
   TARJETAS DE ALERTAS IA
   ======================================================== */

.alert-card {
    background: #0B1018;
    border-radius: 18px;
    padding: 22px;
    margin-bottom: 18px;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}

.alert-card h3 {
    margin: 0;
    color: #28E1FF;
    font-size: 1.15rem;
    font-weight: 700;
}

.alert-card p {
    margin-top: 6px;
    color: #8AA0B4;
}

.alert-tag {
    margin-top: 12px;
    font-size: 0.85rem;
    background: rgba(0,175,216,0.20);
    padding: 6px 10px;
    border-radius: 8px;
    color: #28E1FF;
    display: inline-block;
}

.alert-card .btn-primary.small {
    margin-top: 18px;
    padding: 8px 12px;
    font-size: 0.85rem;
}


/* ========================================================
   TARJETAS DE ESTRATEGIAS IA
   ======================================================== */

.strategy-card {
    background: #0C131F;
    border-radius: 16px;
    padding: 22px;
    border: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 18px;
}

.strategy-card h3 {
    color: #00AFD8;
    margin-bottom: 5px;
}

.strategy-card p {
    color: #8AA0B4;
    margin: 5px 0;
}

.strategy-obj {
    color: #28E1FF;
    font-weight: 600;
    margin-top: 10px;
}

.strategy-card .btn-primary.small {
    margin-top: 18px;
    padding: 9px 13px;
}


/* ========================================================
   CARTA DE PRODUCTOS (IA PRICING)
   ======================================================== */

.products-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background: #0C131F;
    border-radius: 16px;
    overflow: hidden;
}

.products-table th {
    padding: 14px;
    text-align: left;
    font-size: 0.92rem;
    font-weight: 600;
    background: rgba(0,175,216,0.15);
    color: #28E1FF;
}

.products-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.products-table tr:hover td {
    background: rgba(0,175,216,0.10);
}

.products-table .price-ai {
    color: #28E1FF;
    font-weight: 700;
}


/* ========================================================
   EVENTOS (PARTIDOS, FESTIVOS, CLIMA…)
   ======================================================== */

.events-box {
    background: #0B1018;
    border-radius: 16px;
    padding: 22px;
    border: 1px solid rgba(255,255,255,0.06);
    margin-top: 25px;
}

.events-box h3 {
    color: #28E1FF;
    margin-bottom: 10px;
}

.event-item {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-between;
    color: #8AA0B4;
}

.event-item:last-child {
    border-bottom: none;
}

.event-impact {
    font-weight: 700;
    color: #00AFD8;
}


/* ========================================================
   TARJETAS RESUMEN DEL DASHBOARD IA PRICING
   ======================================================== */

.dash-cards-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.dash-card-value {
    font-size: 2rem;
    font-weight: 800;
    color: #28E1FF;
    margin-top: 6px;
}

.dash-card-label {
    color: #8AA0B4;
}


/* ========================================================
   RESPONSIVE IA PRICING
   ======================================================== */

@media (max-width: 1000px) {

    .dash-cards-3 {
        grid-template-columns: 1fr;
    }

    .alert-card,
    .strategy-card,
    .events-box {
        padding: 18px;
    }

    .products-table {
        font-size: 0.85rem;
    }

    .products-table th {
        padding: 12px;
    }

    .products-table td {
        padding: 10px 12px;
    }
}


/* ================================
   BLOQUE ALERTAS
================================ */

.dash-card-alertas {
    background: #0B1018;
    padding: 25px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
}

.dash-alerts-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.badge-count {
    background: #00AFD8;
    padding: 6px 10px;
    border-radius: 10px;
    font-weight: 700;
    color: #000;
    font-size: 13px;
}

.dash-alert-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dash-alert-item {
    padding: 14px 16px;
    border-radius: 12px;
    margin-bottom: 14px;
}

/* COLORES SEGÚN NIVEL */
.dash-alert-media {
    background: rgba(255,180,0,0.20);
}

.dash-alert-alta {
    background: rgba(255,80,80,0.28);
}

.dash-alert-baja {
    background: rgba(0,255,180,0.18);
}

.dash-alert-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.dash-alert-type {
    color: #28E1FF;
    font-weight: 700;
}

.dash-alert-level {
    color: #fff;
    font-size: 13px;
    opacity: .8;
}

.dash-alert-text {
    color: #E6F1FA;
    font-size: 14px;
    line-height: 1.45;
}

.dash-alert-footer {
    text-align: center;
    margin-top: 15px;
}

.link-simple {
    color: #28E1FF;
    opacity: .75;
    transition: .25s;
}

.link-simple:hover {
    opacity: 1;
}

/* ================================
   DASHBOARD – RESUMEN DE CUENTA
   ================================ */

.dash-main {
  padding-top: 24px;
  padding-bottom: 60px;
}

.dash-summary {
  margin-bottom: 24px;
}

/* Tarjeta principal */
.dash-summary-card {
  position: relative;
  overflow: hidden;

  background: radial-gradient(circle at 0% 0%, rgba(0,175,216,0.18), transparent 55%),
              linear-gradient(135deg, #05080E, #071321);
  border-radius: 18px;
  padding: 20px 18px;
  border: 1px solid rgba(0,175,216,0.25);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);

  display: flex;
  justify-content: space-between;
  gap: 16px;
}

/* IMPORTANTE: NO STICKY NI Z-INDEX RARO */
.dash-summary-card,
.dash-summary {
  position: static;
  z-index: 1;
}

.dash-summary-left h1 {
  font-size: 1.9rem;
  margin-bottom: 6px;
  color: #00AFD8;
}

.dash-summary-left p {
  max-width: 460px;
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* Lado derecho */
.dash-summary-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  min-width: 140px;
}

.dash-summary-right .tag-online {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(32, 212, 137, 0.16);
  color: #20D489;
  font-size: 0.8rem;
  font-weight: 600;
}

.dash-summary-right .dash-user {
  color: #E6F1FA;
  font-weight: 600;
  font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 768px) {
  .dash-summary-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .dash-summary-right {
    align-items: flex-start;
  }

  .dash-summary-left h1 {
    font-size: 1.6rem;
  }
}

/* FIX: evitar superposición con el header en Mi financiación */
.cliente-financiacion header + .subnav {
    margin-top: 80px !important;
}

.cliente-financiacion .dash-summary {
    margin-top: 20px !important;
}

/* ============================================
   HISTORIAL DE FINANCIACIÓN (TABLA + CARD)
============================================ */

.dash-card-score {
    background: #0B1018;
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.05);
}

.dash-card-score h2 {
    font-size: 22px;
    color: #28E1FF;
    margin-bottom: 18px;
}

/* === TABLA === */
.dash-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 0.95rem;
    color: #E6F1FA;
}

.dash-table thead {
    background: rgba(0, 175, 216, 0.25);
}

.dash-table th {
    text-align: left;
    padding: 12px 14px;
    font-weight: 600;
    color: #28E1FF;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.dash-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: #D9E8F5;
}

/* fila hover */
.dash-table tr:hover td {
    background: rgba(0,175,216,0.10);
}

/* === TAG ESTADOS === */
.status {
    padding: 6px 12px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: capitalize;
}

.status.devuelto {
    background: rgba(0,255,160,0.22);
    color: #00FF9D;
}

.status.aprobado {
    background: #8cc21b;
    color: #ffffff;
}


.status.pendiente {
    background: #fab459;
    color: #ffffff;
}

.status.rechazado {
    background: rgba(255,80,80,0.25);
    color: #Fffffff;
}

/* === BOTÓN ACCIÓN === */
.dash-score-actions {
    margin-top: 25px;
    text-align: center;
}

/* ============================================
   HISTORIAL DE SOLICITUDES
============================================ */

.dash-section-intro {
    color: #8AA0B4;
    margin-top: 6px;
    font-size: 0.95rem;
}

/* Reutiliza dash-table arriba */
/* Añadimos pequeño ajuste visual */

.dash-table tbody tr td:first-child {
    font-weight: 600;
    color: #28E1FF;
}

/* card vacío */
.dash-card p {
    font-size: 1rem;
    color: #fffff;
}

/* Tarjeta principal */
.credit-request-card {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    padding: 35px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    backdrop-filter: blur(10px);
}

/* Caja lateral con info resumida */
.credit-info-box {
    background: rgba(0, 175, 216, 0.10);
    border: 1px solid rgba(0, 175, 216, 0.25);
    border-radius: 16px;
    padding: 25px;
}

.credit-info-box .info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.credit-info-box span {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.credit-info-box strong {
    font-size: 1.1rem;
    color: #fff;
}

.info-hint {
    margin-top: 18px;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.45;
}

/* FORMULARIO */
.credit-form .form-group {
    margin-bottom: 20px;
}

.credit-form label {
    display: block;
    font-weight: 600;
    color: #E6F1FA;
    margin-bottom: 6px;
}

.credit-form input,
.credit-form select {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    background: #05080E;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 1rem;
}

.credit-form input:focus,
.credit-form select:focus {
    border-color: var(--booh-blue);
    outline: none;
}

.form-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 4px;
    display: block;
}

/* Botón */
.btn-submit-credit {
    padding: 14px 26px;
    width: 100%;
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 15px;
}

/* Responsive */
@media(max-width: 900px) {
    .credit-request-card {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* LAYOUT */
.credit-request-wrapper {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 40px;
    margin-top: 25px;
}

/* PANEL SCORE */
.score-panel {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 25px 30px;
    backdrop-filter: blur(10px);
    text-align: center;
}

.score-panel h3 {
    color: var(--booh-blue);
    margin-bottom: 15px;
}

/* GAUGE */
.mini-gauge {
    position: relative;
    width: 240px;
    margin: 0 auto 15px auto;
}

.mini-gauge-label {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
}

.score-text {
    color: var(--text-muted);
    font-size: .9rem;
    margin: 12px 0 18px 0;
}

.btn-block {
    display: block;
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    text-align: center;
}

/* FORMULARIO */
.credit-form-premium {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: 35px;
}

.form-block {
    margin-bottom: 22px;
}

.credit-form-premium label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #E6F1FA;
}

.credit-form-premium input,
.credit-form-premium select {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    background: #05080E;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 1rem;
}

.btn-submit-credit {
    width: 100%;
    padding: 16px;
    font-size: 1.1rem;
    margin-top: 10px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .credit-request-wrapper {
        grid-template-columns: 1fr;
    }
    .mini-gauge {
        width: 200px;
    }
}


/* ============================================================
   SECCIÓN: IA SCORING – CAJA PRINCIPAL
============================================================ */
.score-main-box {
    display: flex;
    gap: 30px;
    background: var(--bg-soft);
    padding: 30px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    margin-top: 20px;
    align-items: center;
    flex-wrap: wrap;
}

/* Gauge a la izquierda */
.score-gauge-left {
    flex: 1;
    text-align: center;
    position: relative;
}

.score-big-value {
    text-align: center;
    margin-top: -40px;
}

.score-big-value strong {
    font-size: 3.2rem;
    font-weight: 900;
    color: #28E1FF;
}

.score-big-value span {
    opacity: 0.6;
    font-size: 1.4rem;
}

/* Datos a la derecha */
.score-info-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 10px;
}

.score-info-item {
    display: flex;
    justify-content: space-between;
    background: rgba(255,255,255,0.04);
    padding: 14px 20px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
}

.score-info-item .label {
    color: var(--text-muted);
    font-size: .95rem;
}

.score-info-item .value {
    font-size: 1.2rem;
    font-weight: 700;
}

.value.low { color: #20D489; }
.value.mid { color: #F6C344; }
.value.high { color: #FF6B6B; }

.score-info-right .btn-primary {
    display: inline-block;
    margin-top: 20px;
    text-align: center;
    padding: 14px 22px;
}

/* ============================================================
   SECCIÓN: DESGLOSE DE FACTORES
============================================================ */
.score-breakdown-grid {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.score-breakdown-grid .dash-card {
    text-align: center;
}

.score-breakdown-grid h3 {
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.big-num {
    font-size: 1.9rem;
    font-weight: 800;
    color: #28E1FF;
}

.hint {
    font-size: 0.9rem;
    opacity: 0.6;
}

/* ============================================================
   SECCIÓN: RECOMENDACIÓN IA
============================================================ */
.dash-card p {
    line-height: 1.5;
    opacity: 0.85;
}

/* ============================================================
   GAUGE CANVAS
============================================================ */
#bigGauge {
    width: 100%;
    max-width: 420px;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 0 10px rgba(0,175,216,0.25));
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 900px) {

    .score-main-box {
        flex-direction: column;
        text-align: center;
        padding: 22px;
    }

    .score-info-right {
        width: 100%;
        padding: 0;
        margin-top: 10px;
    }

    .score-info-item {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }

    .score-big-value strong {
        font-size: 2.6rem;
    }

    .big-num {
        font-size: 1.6rem;
    }
}

@media (max-width: 600px) {
    .score-main-box {
        padding: 18px;
    }

    #bigGauge {
        max-width: 300px;
    }

    .score-big-value strong {
        font-size: 2.3rem;
    }
}

/* PANEL DE MEJORA SCORE */
#scoreHelp.score-help-hidden {
    display: none;
}

#scoreHelp.score-help-show {
    display: flex;
}

#scoreHelp {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.score-help-box {
    background: #0b1018;
    border: 1px solid rgba(255,255,255,0.15);
    padding: 30px;
    border-radius: 16px;
    width: 90%;
    max-width: 420px;
    color: #e6f1fa;
}

.score-help-box h3 {
    color: #28E1FF;
    margin-bottom: 15px;
}

.score-help-box ul li {
    margin-bottom: 8px;
}

/* =======================================================
   RESULTADO DE CRÉDITO – ESTILO PREMIUM
======================================================= */
.dash-card-group h2 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #28E1FF;
}

.dash-card {
    background: #0C141C;
    border: 1px solid rgba(255,255,255,0.06);
    padding: 25px;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}

.dash-card p {
    margin: 8px 0;
    font-size: 15px;
}

.status-green {
    background: #27db92;
    display: inline-block;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 600;
    text-align: center;
    font-size: 16px;
color:white; !important
}

.status-yellow {
    background: #f6c344;
   color:white; !important
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 600;
    text-align: center;
    display: inline-block;
}

.status-red {
    background: #ff5b5b;
color:white; !important
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 600;
    text-align: center;
    display: inline-block;
}

.dash-card h3 {
    font-size: 20px;
    margin-top: 10px;
    color: #fff;
    text-align: center;
}

.dash-card .btn-primary {
    margin-top: 0px;
    width: 30%;
    padding: 14px;
    font-size: 16px;
    border-radius: 10px;
}



/* =======================================================
   SECCIÓN "CÓMO MEJORAR TU SCORE"
======================================================= */

.score-tips {
    list-style: none;
    margin: 0;
    padding: 0;
}

.score-tips li {
    padding: 12px 14px;
    background: #111C26;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 15px;
    color: #b8d4e0;
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 4px solid #28E1FF;
    transition: 0.2s ease;
}

.score-tips li:hover {
    background: #15222d;
    transform: translateX(4px);
}

.score-tips li::before {
    content: "⭐";
    font-size: 18px;
}

.dash-card-hint {
    margin-top: 12px;
    text-align: center;
    color: #8899a8;
    font-size: 14px;
}


/* BOTÓN MEJORAR SCORE */
#btnMejorarScore {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    margin-top: 10px;
}


/* ================================
   WRAPPER PRINCIPAL
================================ */
.dash-wrapper {
    width: 100%;
    background: #05080E;
    padding-bottom: 60px;
}

/* ================================
   CONTENEDOR INTERNO
================================ */
.dash-main.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}

/* SUMMARY GENERAL */
.dash-summary {
    margin-bottom: 25px;
}

.dash-summary-card {
    background: #0B1018;
    border: 1px solid #13212f;
    padding: 22px 28px;
    border-radius: 14px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* IZQUIERDA */
.dash-summary-left h1 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 5px;
}

.dash-summary-left p {
    font-size: 15px;
    color: #8AA0B4;
}

/* DERECHA */
.tag-online {
    background: #28e1ff22;
    color: #28E1FF;
    padding: 5px 15px;
    font-size: 13px;
    border-radius: 8px;
    margin-right: 10px;
}

.dash-user {
    font-weight: 600;
}

/* DESKTOP */
@media (min-width: 1000px) {
    .dash-summary-card {
        padding: 30px 35px;
    }
}

/* AGRUPACIÓN */
.dash-card-group {
    background: transparent;
    margin-top: 35px;
}

.dash-card-group h2 {
    font-size: 20px;
    margin-bottom: 15px;
}

.dash-card {
    background: #0B1018;
    border: 1px solid #13212f;
    padding: 20px;
    border-radius: 14px;
    margin-bottom: 20px;
    text-align: center;
}

.dash-card-label {
    font-size: 14px;
    color: #8AA0B4;
}

.dash-card-value {
    font-size: 22px;
    font-weight: 700;
    margin: 5px 0;
}

.dash-card-hint {
    font-size: 14px;
    color: #6e8297;
}

/* GRID PRINCIPAL */
.dash-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}

@media (min-width: 900px) {
    .dash-grid {
        grid-template-columns: 2fr 1fr;
    }
}

.gauge-wrap {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    position: relative;
}

.gauge-label {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    font-weight: 700;
}

.dash-table {
    width: 100%;
    border-collapse: collapse;
    background: #0B1018;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #13212f;
}

.dash-table th, .dash-table td {
    padding: 14px;
    border-bottom: 1px solid #13212f;
}

.dash-table th {
    background: #0f1822;
    text-align: left;
}

.dash-table tr:hover {
    background: #0f1b29;
}

/* === HISTORIAL DE SOLICITUDES (CREDITOS) movil === */

.credits-history {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 18px;
}

/* Tarjeta base */
.credit-card {
    background: #111821;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.06);
}

/* Cabecera de la tarjeta */
.credit-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.credit-id {
    font-size: 13px;
    color: #8AA0B4;
}

.credit-date {
    font-size: 13px;
    color: #8AA0B4;
    opacity: 0.9;
}

/* Filas */
.credit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.credit-row:last-child {
    margin-bottom: 0;
}

/* Etiquetas */
.credit-label {
    font-size: 13px;
    color: #8AA0B4;
}

/* Valores */
.credit-value {
    font-size: 14px;
    text-align: right;
}

.credit-value.highlight {
    font-weight: 700;
    color: #28E1FF;
}

/* Estado */
.credit-row-status {
    margin-top: 8px;
}

.credit-status {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    text-transform: capitalize;
}

/* Colores por estado (ajusta a tus valores reales) */
.status-aprobado {
    background: rgba(0, 201, 128, 0.2);
    color: #00C980;
}

.status-pendiente {
    background: rgba(248, 161, 0, 0.2);
    color: #F8A100;
}

.status-rechazado {
    background: rgba(212, 50, 50, 0.2);
    color: #FF6464;
}

/* =========================================================
   IA PRICING – RESET & DISEÑO
   (pegar al final del CSS)
========================================================= */

/* Contenedor principal de IA Pricing */
.ia-pricing-page .dash-main.container,
.pricing-page .dash-main.container {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 20px;
}

/* =========================
   SUBMENÚ IA PRICING
   ========================= */

.pricing-subnav {
    position: static !important; /* quitamos todos los fixed raros */
    margin: 20px auto 25px !important;
    max-width: 1100px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 0;
    background: transparent !important;
    border-bottom: none !important;
    overflow-x: auto;
}

.pricing-subnav::-webkit-scrollbar {
    display: none;
}

.pricing-subnav .pricing-tab {
    flex: 0 0 auto;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(11,16,24,0.9);
    color: #E6F1FA;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.pricing-subnav .pricing-tab:hover {
    border-color: #00AFD8;
}

.pricing-subnav .pricing-tab.active {
    background: #00AFD8;
    color: #001018;
    border-color: transparent;
}

/* =========================
   BLOQUES / SECTION-BLOCK
   ========================= */

.section-block {
    margin: 20px 0;
    padding: 18px 20px;
    border-radius: 14px;
    background: #0B1018;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}

.section-block h2 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: #E6F1FA;
}

.section-block h3 {
    font-size: 1.05rem;
    margin-bottom: 10px;
    color: #E6F1FA;
}

/* =========================
   PILLS RESTAURANTES
   ========================= */

.restaurant-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.restaurant-pill {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    border: 1px solid rgba(255,255,255,0.14);
    background: #05080E;
    color: #E6F1FA;
    cursor: pointer;
    transition: all 0.2s ease;
}

.restaurant-pill:hover {
    border-color: #00AFD8;
}

.restaurant-pill.active {
    background: #00AFD8;
    color: #001018;
    border-color: #00AFD8;
}

/* =========================
   KPIs – cards superiores
   ========================= */

.kpi-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 12px;
}

.kpi-card {
    background: #05080E;
    border-radius: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,0.08);
    text-align: left;
}

.kpi-card h4 {
    font-size: 0.9rem;
    margin-bottom: 4px;
    color: #8AA0B4;
}

.kpi-card .value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #28E1FF;
}

/* =========================
   LISTA DE PRODUCTOS
   ========================= */

.product-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.product-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #05080E;
    border: 1px solid rgba(255,255,255,0.06);
}

.product-row strong {
    display: block;
    margin-bottom: 4px;
}

.product-row small {
    font-size: 0.8rem;
    color: #8AA0B4;
}

.product-prices {
    text-align: right;
    font-size: 0.9rem;
}

.product-prices span {
    display: block;
}

/* =========================
   ALERTAS IA
   ========================= */

.alert-row {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #05080E;
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 4px solid #28E1FF;
}

.alert-row strong {
    display: block;
    margin-bottom: 4px;
}

.alert-row small {
    font-size: 0.8rem;
    color: #8AA0B4;
}

.alert-row.importance-alta {
    border-left-color: #FF4D4F;
}

.alert-row.importance-media {
    border-left-color: #FFC842;
}

.alert-row.importance-baja {
    border-left-color: #27DB92;
}

/* =========================
   EVENTOS IA
   ========================= */

.event-row {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #05080E;
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 4px solid #00AFD8;
}

.event-row strong {
    display: block;
    margin-bottom: 4px;
}

.event-row small {
    font-size: 0.8rem;
    color: #8AA0B4;
}

/* =========================
   ESTADOS VACÍOS
   ========================= */

.empty-box {
    margin-top: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #05080E;
    border: 1px dashed rgba(255,255,255,0.25);
    text-align: center;
    font-size: 0.9rem;
    color: #8AA0B4;
}

/* =========================
   RESPONSIVE IA PRICING
   ========================= */

@media (max-width: 768px) {

    .pricing-subnav {
        justify-content: flex-start;
        padding: 6px 0;
        max-width: 100%;
    }

    .pricing-subnav .pricing-tab {
        font-size: 0.8rem;
        padding: 7px 12px;
    }

    .product-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-prices {
        text-align: left;
    }
}

.hidden { display: none; }

/* ================================================================
   BOOH FINANCE — MODERN DASHBOARD EXTENSIONS
   Aplicado a todas las nuevas secciones: Configuración, Ubicaciones,
   Marcas, Integraciones, Mi Cuenta, Facturación.
   ================================================================ */

/* ------------------------------
   LAYOUT GENERAL
--------------------------------*/
.dash-wrapper {
    width: 100%;
    padding-bottom: 80px;
}

.dash-main.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

/* ------------------------------
   SUBNAV PRINCIPAL
--------------------------------*/
.subnav {
    background: rgba(11,16,24,0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: sticky;
    top: 60px;
    z-index: 100;
}

.subnav-inner ul {
    display: flex;
    gap: 2rem;
    padding: 14px;
    list-style: none;
}

.subnav a {
    color: #8AA0B4;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.95rem;
    transition: 0.25s ease;
}

.subnav a:hover,
.subnav a.active {
    background: var(--booh-light);
    color: #001018;
    box-shadow: 0 0 14px rgba(0,175,216,0.35);
}

/* ------------------------------
   SUBNAV DE CONFIGURACIÓN / MI CUENTA
--------------------------------*/
.subnav-config .subnav-inner ul {
    gap: 1.4rem;
    flex-wrap: wrap;
}

.subnav-config a {
    font-size: 0.88rem;
    padding: 6px 14px;
}

/* ------------------------------
   SUMMARY BLOCK
--------------------------------*/
.dash-summary-card {
    background: #0E141E;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    box-shadow: 0 4px 22px rgba(0,0,0,0.25);
}

.dash-summary-left h1 {
    margin: 0 0 6px;
    color: var(--booh-blue);
}

.dash-summary-left p {
    color: #8AA0B4;
}

.tag-online {
    background: rgba(40,225,255,0.15);
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--booh-light);
    font-size: 0.85rem;
    margin-right: 10px;
}

/* ------------------------------
   GRID
--------------------------------*/
.dash-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}

/* ------------------------------
   CARDS (unificadas)
--------------------------------*/
.dash-card-group h2 {
    margin-bottom: 14px;
    color: var(--booh-light);
}

.dash-card {
    background: #0E141E;
    border-radius: 14px;
    padding: 22px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    transition: 0.25s ease;
}

.dash-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 26px rgba(0,0,0,0.35);
}

.dash-card-label {
    color: #8AA0B4;
    font-size: 0.85rem;
}

.dash-card-label-marca {
    color: var(--booh-blue);
    font-size: 0.85rem;
}

.dash-card-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text);
}

.dash-card-hint {
    color: #8AA0B4;
    font-size: 0.88rem;
    margin-top: 6px;
}

/* ------------------------------
   TABLES
--------------------------------*/
.data-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 14px;
    overflow: hidden;
    background: #0E141E;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.data-table th {
    background: rgba(0,175,216,0.22);
    padding: 12px 14px;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    color: var(--booh-light);
}

.data-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.data-table tr:nth-child(even) {
    background: #0c131c;
}

.status {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: capitalize;
}

.status.pagado { color: #20d489; background: rgba(32,212,137,0.12); }
.status.pendiente { color: #f6c344; background: rgba(246,195,68,0.12); }

/* ------------------------------
   FORMS
--------------------------------*/
.form-dashboard label {
    font-size: 0.9rem;
    color: #8AA0B4;
    font-weight: 600;
}

.form-dashboard input,
.form-dashboard select {
    width: 100%;
    padding: 12px;
    margin-top: 6px;
    margin-bottom: 12px;
    background: #1A2330;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--booh-text);
    transition: 0.25s ease;
}

.form-dashboard input:focus {
    border-color: var(--booh-light);
    box-shadow: 0 0 0 3px rgba(40,225,255,0.25);
    outline: none;
}

/* ------------------------------
   BUTTONS
--------------------------------*/
.btn-primary {
    background:var(--booh-light);
    color: #001018;
    padding: 10px 20px;
    border-radius: 999px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: 0.25s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,175,216,0.35);
}

.btn-outline {
    border: 1px solid var(--booh-blue);
    padding: 12px 18px;
    border-radius: 999px;
    color: var(--booh-blue);
    cursor: pointer;
    transition: 0.25s ease;
}

.btn-outline:hover {
    background: var(--booh-blue);
    color: #001018;
}

/* ------------------------------
   ALERTS
--------------------------------*/
.alert-success,
.alert-danger {
    padding: 14px;
    border-radius: 10px;
    margin-bottom: 16px;
    border-left: 4px solid;
}

.alert-success {
    background: rgba(32,212,137,0.12);
    border-color: #20D489;
    color: #20D489;
}

.alert-danger {
    background: rgba(255,107,107,0.12);
    border-color: #FF6B6B;
    color: #FF6B6B;
}

/* ------------------------------
   MOBILE RESPONSIVE
--------------------------------*/
@media (max-width: 768px) {

    .subnav-inner ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    .dash-summary-card {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .dash-card {
        padding: 18px;
    }

    .dash-card-value {
        font-size: 1.6rem;
    }
}

/* ================================================================
   SECCIONES DE CONFIGURACIÓN — UBICACIONES / MARCAS / INTEGRACIONES
   ================================================================ */

/* -------------------------------------------------------
   TITULARES DE GRUPO
------------------------------------------------------- */
.config-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.config-section-title h3 {
    margin: 0;
    color: var(--booh-light);
}

.btn-add {
    background: linear-gradient(180deg, var(--booh-blue), var(--booh-light));
    padding: 8px 18px;
    border-radius: 999px;
    color: #001018;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.9rem;
    transition: 0.2s ease;
    border: none;
}

.btn-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,175,216,0.35);
}

/* -------------------------------------------------------
   TABLAS DE UBICACIONES / MARCAS / INTEGRACIONES
------------------------------------------------------- */
.table-settings {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    border-radius: 12px;
    overflow: hidden;
}

.table-settings th {
    background: rgba(0,175,216,0.22);
    color: var(--booh-light);
    padding: 12px;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.table-settings td {
    padding: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 0.95rem;
    color: var(--text);
}

.table-settings tr:nth-child(even) {
    background: #0d151f;
}

.table-settings tr:hover {
    background: rgba(0,175,216,0.08);
}

/* -------------------------------------------------------
   ESTADOS DE INTEGRACIONES
------------------------------------------------------- */
.badge-status {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.badge-status.ok {
    background: rgba(32,212,137,0.15);
    color: #20D489;
}

.badge-status.error {
    background: rgba(255,107,107,0.15);
    color: #FF6B6B;
}

.badge-status.pending {
    background: rgba(246,195,68,0.15);
    color: #F6C344;
}

/* -------------------------------------------------------
   BOTONES DE ACCIÓN (editar, borrar, conectar)
------------------------------------------------------- */
.action-btn {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: 0.2s ease;
}

.action-edit {
    border-color: var(--booh-light);
    color: var(--booh-light);
}

.action-edit:hover {
    background: var(--booh-light);
    color: #001018;
}

.action-delete {
    border-color: #ff6b6b;
    color: #ff6b6b;
}

.action-delete:hover {
    background: #ff6b6b;
    color: #001018;
}

.action-connect {
    border-color: var(--booh-blue);
    color: var(--booh-blue);
}

.action-connect:hover {
    background: var(--booh-blue);
    color: #001018;
}

/* -------------------------------------------------------
   FORMULARIOS DE CONFIGURACIÓN (Add Ubicación / Marca)
------------------------------------------------------- */
.form-settings {
    background: #0E141E;
    padding: 22px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
    margin-top: 24px;
    display: grid;
    gap: 14px;
    max-width: 520px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.form-settings label {
    font-size: 0.9rem;
    color: #8AA0B4;
}

.form-settings input,
.form-settings select {
    background: #1A2330;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text);
    transition: 0.2s ease;
}

.form-settings input:focus {
    border-color: var(--booh-light);
    box-shadow: 0 0 0 3px rgba(40,225,255,0.25);
    outline: none;
}

/* -------------------------------------------------------
   FACTURACIÓN
------------------------------------------------------- */
.facturacion-summary {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.facturacion-box {
    background: #0E141E;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    flex: 1 1 240px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}

.facturacion-box h4 {
    color: var(--booh-light);
    margin: 0 0 6px;
}

.facturacion-box .value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--booh-blue);
}

.factura-download {
    padding: 8px 14px;
    border: 1px solid var(--booh-light);
    color: var(--booh-light);
    border-radius: 999px;
    font-size: 0.85rem;
    text-decoration: none;
    transition: 0.2s ease;
}

.factura-download:hover {
    background: var(--booh-light);
    color: #001018;
}

/* -------------------------------------------------------
   BANCOS — (oculta saldo, solo 4 dígitos)
------------------------------------------------------- */
.bank-box {
    background: #0E141E;
    padding: 20px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 20px;
}

.bank-box h4 {
    margin: 0 0 10px;
    color: var(--booh-light);
}

.bank-last4 {
    font-size: 1.3rem;
    color: var(--booh-blue);
    font-weight: 800;
}

.bank-connect-btn {
    margin-top: 10px;
    display: inline-block;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--booh-blue);
    color: var(--booh-blue);
}

.bank-connect-btn:hover {
    background: var(--booh-blue);
    color: #001018;
}

/* ================================================================
   LAYOUT 3 COLUMNAS — SOLO CONTENIDO EN LA COLUMNA CENTRAL
   ================================================================ */

@media (min-width: 1100px) {

    /* Wrapper principal centrado */
    .dash-main.container {
        max-width: 1400px;          /* ancho total */
        margin: 0 auto;
        padding: 0 20px;
    }

    /* Grid de 3 columnas */
    .dash-grid {
        display: grid;
        grid-template-columns: 1fr minmax(650px, 900px) 1fr; /* lateral - contenido - lateral */
        gap: 0px;
    }

    /* Columna central contiene todo */
    .dash-card-group {
        grid-column: 2; /* SIEMPRE columna central */
        width: 100%;
        display: grid;
        grid-template-columns: 1fr; /* 1 columna interna */
        gap: 24px;
    }

    /* Summary, alertas, etc → también en columna central */
    .dash-summary,
    .dash-summary-card,
    .dash-card-alertas,
    .subnav-config {
        grid-column: 2;
    }

    /* Si algo quieres 100% ancho central → fullwidth */
    .dash-card-group .fullwidth {
        width: 100%;
        grid-column: 1 / -1;
    }
}

/* Modo tablet (700-1100px) → columna única centrada */
@media (max-width: 1099px) {
    .dash-main.container {
        max-width: 780px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .dash-grid {
        display: block;
    }
}

/* Móvil */
@media (max-width: 700px) {
    .dash-main.container {
        max-width: 92%;
        padding: 0 12px;
    }
}

/* ==========================
   NUEVO HEADER (aislado)
   ========================== */
.hf-header {
    width: 100%;
    height: 70px;
    background: #0B1018;
    border-bottom: 1px solid rgba(255,255,255,.07);
    position: sticky;
    top: 0;
    z-index: 999999; /* siempre por encima */
}

.hf-inner {
    max-width: 1400px;
    margin: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
}

.hf-logo img {
    height: 54px;
}

.hf-right {
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
}

/* Estado */
.hf-status {
    color: #E6F1FA;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hf-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.hf-ok { background:#00FF7F; }
.hf-fail { background:#FF4A4A; }
.hf-partial { background:#FFA500; }

/* Usuario */
.hf-user {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
}

.hf-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background:#00AFD8;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:16px;
    color:#001018;
}

.hf-username {
    color:#E6F1FA;
    font-weight:600;
    font-size:14px;
}

/* Dropdown usuario */
.hf-dropdown {
    position:absolute;
    top:48px;
    right:0;
    width:170px;
    background:#111821;
    border-radius:12px;
    padding:8px 0;
    box-shadow:0 8px 22px rgba(0,0,0,.45);
    display:none;
    z-index:999999999; /* al máximo */
}

.hf-dropdown a {
    display:block;
    padding:10px 16px;
    color:#E6F1FA;
    font-size:14px;
}
.hf-dropdown a:hover {
    background:#0D141C;
}

/* Menú móvil */
.hf-toggle {
    display:none;
    flex-direction:column;
    gap:4px;
    background:none;
    border:none;
    cursor:pointer;
}

.hf-toggle span {
    width:24px;
    height:3px;
    background:#E6F1FA;
    border-radius:2px;
}

/* Responsive */
@media(max-width:900px) {
    .hf-status { display:none; }
    .hf-toggle { display:flex; }

    .hf-right {
        position:fixed;
        top:70px;
        right:-260px;
        background:#0B1018;
        width:260px;
        height:100vh;
        flex-direction:column;
        align-items:flex-start;
        padding:20px;
        gap:22px;
        transition:.3s ease;
        box-shadow:-8px 0 20px rgba(0,0,0,.35);
        z-index:9999999;
    }

    .hf-right.open {
        right:0;
    }

    .hf-user {
        width:100%;
        justify-content:flex-start;
    }

    .hf-dropdown {
        position:relative;
        top:0;
        width:100%;
        box-shadow:none;
    }

    .dash-card .btn-primary { width: 80%;
}

}



/* CONTENEDOR AJUSTADO */
.gauge-wrap {
    position: relative;
    width: 100%;
    max-width: 360px;   /* controlas desde aquí */
    margin: 0 auto;     /* SIEMPRE centrado */
    padding-top: 10px;
}

/* CANVAS AJUSTABLE */
#gaugeCanvasDashboard {
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto !important;
    filter: drop-shadow(0 0 8px rgba(0,175,216,0.25));
}

/* ETIQUETA DE SCORE CENTRADA */
.gauge-label {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

/* ADAPTACIÓN MÓVIL */
@media (max-width: 480px) {
    .gauge-wrap {
        max-width: 260px;
    }
    .gauge-label {
        font-size: 1.3rem;
        bottom: 10px;
    }
}


/* ===== MARCAS ===== */

.marca-item {
    text-align: center;
    padding: 25px;
}

.marca-nombre {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent);
}

.marca-logo {
    height: 40px;
    margin: 10px 0;
}

.estado-activa {
    color: #27db92;
}

.estado-inactiva {
    color: #ff5b5b;
}

.marca-btns {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-sm {
    padding: 8px 16px;
}

/* Toggle activar/desactivar */
.btn-toggle {
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 700;
    display: inline-block;
    transition: 0.2s ease;
    color: #000;
}

.btn-toggle.activar {
    background: #27db92;
}

.btn-toggle.desactivar {
    background: #ff5b5b;
}

.mb-20 { margin-bottom:20px; }
.mt-30 { margin-top:30px; }
.mt-6 { margin-top:6px; }
.m-0 { margin:0; }

.marca-btns {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;              /* MÁS SEPARACIÓN */
    flex-wrap: wrap;
}

/* Tamaño base */
.marca-btns a {
    padding: 12px 26px;
    font-size: 1rem;
    border-radius: 12px;
    font-weight: 700;
    transition: 0.2s ease;
}

/* Editar */
.btn-primary {
    background: var(--accent);
    color: #000;
}

.btn-primary:hover {
    opacity: 0.8;
}

/* Eliminar */
.btn-outline {
    border: 2px solid var(--accent);
    color: var(--accent);
}

.btn-outline:hover {
    background: var(--accent);
    color: #000;
}

/* Activar / Desactivar */
.btn-toggle {
    color: #000;
}

.btn-toggle.activar {
    background: #27db92;
}

.btn-toggle.desactivar {
    background: #ff5b5b;
}

.btn-toggle:hover {
    opacity: 0.8;
}

.marca-btns a {
    padding: 8px 18px;      /* MÁS PEQUEÑOS */
    font-size: 0.95rem;     /* TEXTO MÁS COMPACTO */
    border-radius: 10px;
    font-weight: 600;       /* Menos grueso → más fino visualmente */
}

/* Editar */
.btn-primary {
    background: var(--accent);
    color: #000;
}

.btn-primary:hover {
    opacity: 0.8;
}

/* Eliminar */
.btn-outline {
    border: 2px solid var(--accent);
    color: var(--accent);
}

.btn-outline:hover {
    background: var(--accent);
    color: #000;
}

/* Activar / Desactivar */
.btn-toggle.activar {
    background: #27db92;
    color: #000;
}

.btn-toggle.desactivar {
    background: #ff5b5b;
    color: #000;
}

.btn-toggle:hover {
    opacity: 0.85;
}

/* MÁS SEPARACIÓN ENTRE BOTONES */
.marca-btns {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 16px;   /* un poco menos que antes para compensar el tamaño pequeño */
    flex-wrap: wrap;
}

.marca-btns a {
    padding: 8px 18px;
    font-size: 0.95rem;
    border-radius: 10px;
    font-weight: 600;
    line-height: 1;         /* 🔥 Elimina el espacio vertical */
    display: inline-flex;   /* 🔥 Centrado perfecto */
    align-items: center;    /* 🔥 Alinear vertical */
    justify-content: center;
    height: 38px;           /* 🔥 MISMA ALTURA = 100% alineados */
    box-sizing: border-box;
}

.marca-btns {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Normaliza los 3 botones */
.marca-btns a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;          /* MISMA ALTURA */
    width: 180px;          /* 🔥 MISMO ANCHO = ¡ALINEADOS! */
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    line-height: 1;
    box-sizing: border-box;
    text-align: center;
    padding: 0;            /* ELIMINA DESALINEACIÓN */
}

/* Estilos individuales */
.btn-primary {
    background: var(--accent);
    color: #000;
}

.btn-outline {
    border: 2px solid var(--accent);
    color: var(--accent);
}

.btn-outline:hover {
    background: var(--accent);
    color: #000;
}

.btn-toggle.activar {
    background: #27db92;
    color: #000;
}

.btn-toggle.desactivar {
    background: #ff5b5b;
    color: #000;
}

.btn-toggle:hover {
    opacity: .85;
}

/* ===============================================
   ESTILO GLOBAL DE FORMULARIOS — BOOH FINANCE
   =============================================== */

.config-form label {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
    color: var(--text);
}

.config-form input[type="text"],
.config-form input[type="email"],
.config-form input[type="password"],
.config-form input[type="number"],
.config-form select,
.config-form textarea {
    width: 100%;
    background: #0E131A;
    border: 2px solid #1C2733;
    padding: 12px 14px;
    border-radius: 12px;
    color: var(--text);
    font-size: 1rem;
    margin-bottom: 18px;
    transition: 0.2s ease;
    outline: none;
}

.config-form input:focus,
.config-form select:focus,
.config-form textarea:focus {
    border-color: var(--accent);
    background: #131b24;
}

/* ANCHO PARA CAMPOS LADO A LADO (SI SE USAN) */
.config-form .form-row {
    display: flex;
    gap: 20px;
}
.config-form .form-row > div {
    flex: 1;
}

/* ============
   INPUT FILE
   ============ */

.config-form input[type="file"] {
    padding: 12px;
    background: #0E131A;
    border: 2px solid #1C2733;
    border-radius: 12px;
    cursor: pointer;
    color: var(--text-muted);
}

.config-form input[type="file"]::-webkit-file-upload-button {
    background: var(--accent);
    color: #000;
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    margin-right: 12px;
    cursor: pointer;
    font-weight: 600;
}

/* ============
   BOTONES DE FORMULARIO
   ============ */

.form-btn-group {
    display: flex;
    gap: 16px;
    margin-top: 10px;
}

/* ===================================
   INTEGRACIONES — Estilos limpios
   =================================== */

.mb-20 { margin-bottom:20px; }

/* Selector ubicación */
.integraciones-form {}
.integraciones-label {
    font-size: 14px;
    color: var(--text-muted);
}
.integraciones-select {
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    background: #0F141B;
    border: 2px solid #1C2633;
    color: var(--text);
    margin-top: 6px;
}

/* Tarjeta */
.integracion-card {
    text-align: center;
    padding: 25px;
}

/* Nombre de la plataforma */
.integracion-title {
    font-size: 1.3rem;
    color: var(--accent);
    font-weight: 700;
}

/* Estado */
.integracion-status {
    margin: 8px 0;
    font-weight: 700;
}
.status-ok { color:#27db92; }
.status-ko { color:#ff5b5b; }

/* API Key */
.integracion-apikey {
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* Acciones */
.integracion-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Botones */
.btn-full {
    width: 100%;
    text-align: center;
    padding: 12px;
    border-radius: 12px;
    font-weight: 700;
}
.btn-danger {
    background:#ff5b5b;
    color:#fff;
}

/* Formulario Edit API */
.integracion-form {
    margin-top: 10px;
    padding: 15px;
    border: 1px solid #1C2633;
    border-radius: 12px;
    background: #0F141B;
}
.integracion-form label {
    display:block;
    margin-bottom:6px;
    color: var(--text);
}
.integracion-form input {
    width:100%;
    padding:10px 14px;
    border-radius:12px;
    background:#0E131A;
    border:2px solid #1C2733;
    color:var(--text);
}
.hidden { display:none; }

/* BOTONES COMPACTOS PARA INTEGRACIONES */
.btn-full {
    width: 100%;
    text-align: center;
    padding: 10px 0;     /* ↓ antes 12px → ahora más pequeño */
    border-radius: 10px; /* ↓ antes 12px */
    font-size: 0.95rem;  /* ↓ tamaño de texto */
    font-weight: 600;    /* ↓ más fino */
}

.btn-danger {
    background:#ff5b5b;
    color:#fff;
    padding: 10px 0 !important; /* ↓ reduce altura */
}

.btn-outline {
    border: 2px solid var(--accent);
    color: var(--accent);
    padding: 8px 0 !important; /* ↓ más pequeño */
    border-radius: 10px;
    font-size: 0.95rem;
}

.btn-full {
    padding: 8px 0;
    border-radius: 8px;
    font-size: 0.9rem;
}

/* BOTONES EN FILA COMO EN MARCAS */
.integracion-actions-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* Botones compactos estilo sección Marcas */
.btn-sm2 {
    padding: 10px 22px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;   /* igual que en marcas */
    transition: .2s;
}

/* Colores */
.btn-sm2.btn-danger {
    background: #ff5b5b;
    color: #fff;
}

.btn-sm2.btn-outline {
    border: 2px solid var(--accent);
    color: var(--accent);
    background: transparent;
}

.btn-sm2.btn-outline:hover {
    background: var(--accent);
    color: #000;
}

.btn-sm2.btn-primary {
    background: var(--accent);
    color: #000;
}

.btn-sm2:hover {
    opacity: .85;
}

/* Formulario edit API */
.integracion-form {
    margin-top: 20px;
    border: 1px solid #1C2633;
    padding: 15px;
    border-radius: 12px;
    background: #0E131A;
}

/* Botones compactos unificados */
.btn-sm2 {
    padding: 10px 22px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    min-width: 150px;     /* MISMO ANCHO */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: .2s ease;
}

/* Colores */
.btn-primary.btn-sm2 {
    background: var(--accent);
    color: #000;
}

.btn-danger.btn-sm2 {
    background: #ff5b5b;
    color: #fff;
}

.btn-outline.btn-sm2 {
    border: 2px solid var(--accent);
    color: var(--accent);
}

.btn-outline.btn-sm2:hover {
    background: var(--accent);
    color: #000;
}

.btn-sm2:hover {
    opacity: .85;
}

/* Alineación horizontal */
.integracion-actions-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

a.btn-primary.btn-sm2,
button.btn-primary.btn-sm2 {
    padding: 10px 22px !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    min-width: 150px !important;
    height: auto !important;
    line-height: 1 !important;
}

/* ===========================================================
   ESTILOS CONFIGURACIÓN – BOOH FINANCE
   =========================================================== */

/* --- Tarjetas generales --- */
.dash-card-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dash-card {
    background: #0B1018;
    border-radius: 16px;
    padding: 25px 30px;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* --- Titulares --- */
.dash-card h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 10px;
}

.dash-card-hint {
    color: #8AA0B4;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ===========================================================
   FORMULARIO – PREFERENCIAS
   =========================================================== */

.config-form {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Grupo de campo */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Label */
.form-group label {
    color: #E6F1FA;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Inputs / Selects */
.config-form input[type="text"],
.config-form input[type="number"],
.config-form select {
    width: 100%;
    background: #05080E;
    border: 1px solid #1A1F27;
    border-radius: 12px;
    padding: 12px 14px;
    color: #E6F1FA;
    font-size: 0.95rem;
    transition: 0.2s ease;
}

.config-form input:focus,
.config-form select:focus {
    border-color: var(--booh-blue, #00AFD8);
    outline: none;
}

/* Divider */
.divider {
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin: 25px 0;
}

/* ===========================================================
   TOGGLES (checkbox estilo limpio)
   =========================================================== */

.toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 0.95rem;
    color: #E6F1FA;
}

.toggle-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--booh-blue, #00AFD8);
}

/* ===========================================================
   BOTONES
   =========================================================== */

.btn-primary {
    background: var(--booh-blue, #00AFD8);
    color: #05080E;
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 12px;
    display: inline-block;
    text-align: center;
    transition: 0.2s ease;
}

.btn-primary:hover {
    opacity: 0.8;
}

/* Versión pequeña */
.btn-sm2 {
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */

@media (max-width: 768px) {

    .dash-card {
        padding: 20px;
    }

    .dash-card h2 {
        font-size: 1.2rem;
    }

    .config-form {
        gap: 20px;
    }

}

/* ============================================================
   DASHBOARD VISUAL — KPI PRINCIPALES
============================================================ */
.big-kpi-grid {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.big-kpi-card {
    background: #0B1018;
    padding: 25px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    text-align: center;
    transition: 0.25s ease;
}

.big-kpi-card:hover {
    background: #111722;
    transform: translateY(-3px);
}

.big-kpi-card h3 {
    margin: 0;
    font-size: 1rem;
    opacity: 0.75;
}

.big-kpi-card strong {
    display: block;
    margin-top: 10px;
    font-size: 2rem;
    font-weight: 800;
    color: #28E1FF;
}

.big-kpi-card p {
    opacity: 0.65;
    margin-top: 6px;
    font-size: 0.85rem;
}

/* ============================================================
   CLIMA
============================================================ */
.weather-box {
    background: #0B1018;
    padding: 25px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.weather-left h3 {
    font-size: 2.2rem;
    margin: 0;
    font-weight: 800;
}

.weather-left p {
    margin: 4px 0 0 0;
    opacity: .7;
}

.weather-impact {
    text-align: right;
}

.weather-impact h4 {
    margin: 0;
    font-size: 1rem;
    opacity: .75;
}

.weather-impact p {
    margin-top: 4px;
    font-size: 1rem;
    font-weight: 700;
}

/* ============================================================
   VENTAS POR CANAL
============================================================ */
.sales-channels-grid {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.channel {
    background: #0B1018;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    padding: 20px;
    text-align: center;
    transition: .2s;
}

.channel:hover {
    background: #111722;
    transform: translateY(-3px);
}

.channel img {
    height: 36px;
    margin-bottom: 8px;
    opacity: 0.85;
}

.channel strong {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    color: #28E1FF;
}

.channel span {
    font-size: .9rem;
    opacity: .7;
}

/* ============================================================
   GRÁFICO PRINCIPAL
============================================================ */
.chart-toggles {
    margin-bottom: 15px;
    display: flex;
    gap: 12px;
}

.chart-btn {
    padding: 8px 18px;
    border-radius: 8px;
    background: #0B1018;
    border: 1px solid rgba(255,255,255,0.12);
    cursor: pointer;
    color: #fff;
    transition: .2s;
}

.chart-btn.active,
.chart-btn:hover {
    background: #00AFD8;
    color: #000;
    border-color: #00AFD8;
}

/* ============================================================
   EVENTOS IA
============================================================ */
.events-grid {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.event-card {
    background: #0B1018;
    border-radius: 14px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,0.09);
    transition: .2s;
}

.event-card:hover {
    background: #111722;
    transform: translateY(-3px);
}

.event-type {
    font-size: 0.85rem;
    opacity: .7;
}

.event-title {
    font-size: 1rem;
    margin-top: 4px;
    font-weight: 700;
    color: #28E1FF;
}

.event-desc {
    margin-top: 8px;
    opacity: .75;
    font-size: .9rem;
}

/* ============================================================
   TOP PRODUCTOS
============================================================ */
.top-list {
    margin-top: 15px;
    list-style: none;
    padding: 0;
}

.top-list li {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-between;
}

.top-list li strong {
    color: #28E1FF;
}

.top-list li span {
    opacity: .7;
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1024px) {
    .big-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .sales-channels-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .events-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .big-kpi-grid {
        grid-template-columns: 1fr;
    }
    .sales-channels-grid {
        grid-template-columns: 1fr;
    }
    .events-grid {
        grid-template-columns: 1fr;
    }
    .weather-box {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* Forzar dashboard ancho completo */
.dash-main.container {
    max-width: 100% !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.dash-brand-performance {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dash-brand-performance li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #1a2230;
    font-size: 15px;
}

.dash-brand-performance li:last-child {
    border-bottom: none;
}

/* GRID GENERAL DE CARDS */
.dash-cards-credit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

/* Versión responsive para tablets y pantallas medianas */
@media (max-width: 1200px) {
    .dash-cards-credit {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Versión responsive para <1000px */
@media (max-width: 1000px) {
    .dash-cards-credit {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Versión móvil */
@media (max-width: 600px) {
    .dash-cards-credit {
        grid-template-columns: 1fr;
    }
}

.dash-card-group {
    display: block;
}

@media (max-width: 1000px) {
    .dash-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* =======================================================
   FORZAR GRID RESPONSIVE EN TODAS LAS CARDS DEL DASHBOARD
   ======================================================= */

/* Selecciona TODAS las zonas con cards */
.dash-cards-credit,
.dash-card-group .dash-card-group-inner,
.dash-card-group,
.dash-grid {
    width: 100%;
}

/* GRID BASE */
.dash-cards-credit {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 20px !important;
}

/* ===========================
   BREAKPOINT  ≤ 1200px → 4 cols
   =========================== */
@media (max-width: 1200px) {
    .dash-cards-credit {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ===========================
   BREAKPOINT  ≤ 1000px → 3 cols
   =========================== */
@media (max-width: 1000px) {
    .dash-cards-credit {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ===========================
   BREAKPOINT  ≤ 600px → 1 col
   =========================== */
@media (max-width: 600px) {
    .dash-cards-credit {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}