/* ==========================================================================
   Marca · cian #00B5F0 + gris carbón #3A3A3A
   Se carga DESPUÉS de tabler.min.css y sobrescribe sus variables.
   ========================================================================== */
:root,
:root[data-bs-theme],
[data-bs-theme] {
  --brand-cyan: #00B5F0;
  --brand-carbon: #3A3A3A;
  --brand-cyan-ink: light-dark(#00708F, #5CD3F7);   /* cian legible como texto */

  --tblr-brand: #00B5F0;
  --tblr-primary: #00B5F0;
  --tblr-primary-rgb: 0, 181, 240;
  --tblr-primary-lt-rgb: 217, 244, 252;
  /* Texto sobre botones cian: el carbón da contraste ~4.8:1 (el blanco solo ~2.4:1) */
  --tblr-primary-fg: #3A3A3A;

  --tblr-dark: #3A3A3A;
  --tblr-dark-rgb: 58, 58, 58;

  --tblr-link-color: light-dark(#00708F, #5CD3F7);
  --tblr-link-hover-color: light-dark(#00526A, #9BE3FA);
  --tblr-link-color-rgb: 0, 112, 143;
  --tblr-link-hover-color-rgb: 0, 82, 106;
}

/* Barra lateral en gris carbón */
.navbar-vertical {
  --tblr-navbar-bg: #3A3A3A;
  --tblr-navbar-border-color: #2E2E2E;
}
.navbar-vertical .navbar-brand a { display: inline-flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; font-weight: 600; letter-spacing: .01em; }
.navbar-vertical .nav-link.active {
  color: #fff;
  background: rgba(0, 181, 240, .16);
  box-shadow: inset 3px 0 0 var(--brand-cyan);
}
.navbar-vertical .nav-link.active .nav-link-icon { color: var(--brand-cyan); }

/* Títulos en carbón (solo modo claro) */
:root:not([data-bs-theme="dark"]) .page-title,
:root:not([data-bs-theme="dark"]) .card-title { color: var(--brand-carbon); }

/* Chips de estatus: texto cian oscuro para contraste */
.bg-primary-lt { color: var(--brand-cyan-ink) !important; }

/* Login */
.auth-brand { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.25rem; font-weight: 600; color: var(--brand-carbon); text-decoration: none; }
:root[data-bs-theme="dark"] .auth-brand { color: #fff; }

/* Tablas de clientes */
.table-clients td { vertical-align: middle; }
.client-name { font-weight: 600; color: inherit; text-decoration: none; }
.client-name:hover { color: var(--tblr-link-color); }

/* Servicios ---------------------------------------------------------- */
/* Icono de tipo de servicio: cian de marca sobre fondo cian suave */
.type-icon { color: var(--brand-cyan-ink); }
.type-icon svg { width: 1.25rem; height: 1.25rem; }
.avatar-lg.type-icon svg { width: 1.75rem; height: 1.75rem; }
.min-w-0 { min-width: 0; }

/* Pestañas por tipo: una sola línea con desplazamiento horizontal en pantallas angostas */
.service-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.service-tabs .nav-link { white-space: nowrap; padding-inline: .75rem; }
.table-services td { vertical-align: middle; }
.card-link .subheader { color: var(--tblr-secondary); }

/* Avisos de vencimiento: tonos más oscuros en modo claro para cumplir contraste 4.5:1 sobre blanco */
:root:not([data-bs-theme="dark"]) .text-orange { color: #b54708 !important; }
:root:not([data-bs-theme="dark"]) .text-red    { color: #c4291c !important; }

/* Tabla comparativa de planes (Correo Plus) ---------------------------- */
.plan-table th.plan-col { font-weight: 600; white-space: nowrap; border-bottom: 3px solid var(--tblr-border-color); }
.plan-table .plan-col.is-selected { background: var(--tblr-primary-lt); }
.plan-table th.plan-col.is-selected { color: var(--brand-cyan-ink); border-bottom-color: var(--brand-cyan); }
.plan-table td:first-child { min-width: 14rem; }

/* Avisos en modo claro: texto más oscuro para contraste */
:root:not([data-bs-theme="dark"]) .alert-warning,
:root:not([data-bs-theme="dark"]) .alert-warning strong { color: #8a3b00; }
:root:not([data-bs-theme="dark"]) .alert-danger,
:root:not([data-bs-theme="dark"]) .alert-danger strong { color: #9b1c12; }

/* Portal de clientes --------------------------------------------------- */
.portal-navbar {
  --tblr-navbar-bg: #3A3A3A;
  --tblr-navbar-border-color: #2E2E2E;
  background: #3A3A3A;
  border-bottom: 1px solid #2E2E2E;
}
.portal-brand { display: inline-flex; align-items: center; gap: .6rem; color: #fff; font-weight: 600; letter-spacing: .01em; }
.portal-navbar .nav-link { color: rgba(255, 255, 255, .78); }
.portal-navbar .nav-link:hover { color: #fff; }
.portal-navbar .nav-link.active { color: #fff; box-shadow: inset 0 -3px 0 var(--brand-cyan); }
.portal-navbar .nav-link.active .nav-link-icon { color: var(--brand-cyan); }
.portal-navbar .nav-link.disabled { color: rgba(255, 255, 255, .55); cursor: default; }
.portal-navbar .nav-link.disabled .badge { color: rgba(255, 255, 255, .8); }
@media (max-width: 767.98px) {
  .portal-navbar .nav-link.active { box-shadow: inset 3px 0 0 var(--brand-cyan); padding-left: .75rem; }
}

/* Aviso fijo cuando el equipo ve el portal como cliente */
.impersonation-bar { background: #8a3b00; color: #fff; padding: .5rem 0; font-size: .9rem; position: sticky; top: 0; z-index: 1031; }
.impersonation-bar svg { flex-shrink: 0; }

/* Tarjetas de servicio del portal */
.svc-card { text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; height: 100%; }
a.svc-card:hover, a.svc-card:focus-visible { box-shadow: 0 4px 14px rgba(0, 0, 0, .12); transform: translateY(-1px); color: inherit; }
.stat-icon { width: 2.5rem; height: 2.5rem; }