/* =========================================================
   CRM — personalización de marca sobre Tabler 1.7.3
   Primario: cian #00B5F0 · Oscuro: carbón #3A3A3A
   Se carga DESPUÉS de tabler.min.css; solo variables y ajustes.
   ========================================================= */

:root,
[data-bs-theme],
[data-theme] {
  --crm-cyan: #00B5F0;
  --crm-cyan-dark: #0095C7;
  --crm-charcoal: #3A3A3A;
  --crm-charcoal-dark: #2F2F2F;

  --tblr-primary: #00B5F0;
  --tblr-primary-rgb: 0, 181, 240;
  --tblr-primary-fg: #ffffff;
  --tblr-primary-darken: #0099CC;
  --tblr-primary-lt-rgb: 229, 247, 254;
  --tblr-brand: #00B5F0;
  --tblr-link-color: #0095C7;
  --tblr-link-color-rgb: 0, 149, 199;
  --tblr-link-hover-color: #007AA3;
  --tblr-link-hover-color-rgb: 0, 122, 163;
  --tblr-focus-ring-color: rgba(0, 181, 240, .25);
}

[data-bs-theme=dark],
html[data-bs-theme=dark] [data-bs-theme] {
  --tblr-link-color: #33C4F3;
  --tblr-link-color-rgb: 51, 196, 243;
  --tblr-link-hover-color: #66D3F6;
  --tblr-link-hover-color-rgb: 102, 211, 246;
}

/* Botón primario: texto legible y hover con el cian oscuro */
.btn-primary {
  --tblr-btn-variant: #00B5F0;
  --tblr-btn-variant-darken: #0099CC;
  font-weight: 600;
}
.form-check-input:checked,
.form-selectgroup-input:checked + .form-selectgroup-label .form-selectgroup-check {
  background-color: var(--crm-cyan);
  border-color: var(--crm-cyan);
}
.form-selectgroup-input:checked + .form-selectgroup-label {
  border-color: var(--crm-cyan);
  color: inherit;
}
.form-selectgroup-boxes .form-selectgroup-input:checked + .form-selectgroup-label {
  background: color-mix(in oklab, var(--crm-cyan) 6%, transparent);
}

/* ---------- Sidebar carbón ---------- */
.navbar-vertical.crm-sidebar {
  --tblr-navbar-bg: var(--crm-charcoal);
  --tblr-navbar-border-color: var(--crm-charcoal-dark);
  --tblr-navbar-color: rgba(255, 255, 255, .72);
  --tblr-navbar-hover-color: #ffffff;
  --tblr-navbar-active-color: #ffffff;
  background-color: var(--crm-charcoal) !important;
}
html[data-bs-theme=dark] .navbar-vertical.crm-sidebar {
  --tblr-navbar-bg: #262626;
  --tblr-navbar-border-color: #1f1f1f;
  background-color: #262626 !important;
}
.crm-sidebar .navbar-nav .nav-link {
  border-radius: var(--tblr-border-radius);
  margin: 1px .5rem;
}
.crm-sidebar .navbar-nav .nav-link:hover:not(.disabled) {
  background: rgba(255, 255, 255, .06);
}
.crm-sidebar .navbar-nav .nav-item.active > .nav-link,
.crm-sidebar .navbar-nav .nav-link.active {
  background: rgba(0, 181, 240, .16);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--crm-cyan);
}
.crm-sidebar .navbar-nav .nav-item.active > .nav-link .nav-link-icon,
.crm-sidebar .navbar-nav .nav-link.active .nav-link-icon {
  color: var(--crm-cyan);
}
@media (min-width: 992px) {
  .navbar-expand-lg.navbar-vertical.crm-sidebar .navbar-nav .nav-link.active::after,
  .navbar-expand-lg.navbar-vertical.crm-sidebar .navbar-nav .nav-item.active > .nav-link::after {
    display: none;
  }
}
.crm-sidebar .nav-section-title {
  color: rgba(255, 255, 255, .42);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 1.25rem 1.25rem .375rem;
}
.crm-sidebar .crm-nav-soon {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
.crm-sidebar .crm-nav-soon .badge {
  font-size: .625rem;
  background: rgba(255, 255, 255, .1) !important;
  color: rgba(255, 255, 255, .75) !important;
}

/* ---------- Logo ---------- */
.crm-logo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
}
.crm-logo-mark {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}
.crm-logo-text {
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: .02em;
  color: inherit;
}
.crm-sidebar .crm-logo-text { color: #fff; }
.crm-logo-lg .crm-logo-mark { width: 2.75rem; height: 2.75rem; }
.crm-logo-lg .crm-logo-text { font-size: 1.6rem; color: var(--tblr-body-color); }

/* ---------- Barra superior ---------- */
.crm-topbar {
  border-bottom: 1px solid var(--tblr-border-color);
}
.crm-topbar .nav-link.crm-theme-toggle {
  color: var(--tblr-secondary);
}

/* ---------- Login ---------- */
body.crm-auth {
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(0, 181, 240, .14), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(58, 58, 58, .10), transparent 60%),
    var(--tblr-body-bg);
}
html[data-bs-theme=dark] body.crm-auth {
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(0, 181, 240, .12), transparent 60%),
    var(--tblr-body-bg);
}
.crm-auth .card-md {
  border-top: 3px solid var(--crm-cyan);
}

/* ---------- Varios ---------- */
.avatar.bg-primary-lt,
.badge.bg-primary-lt {
  color: #0089B8 !important;
}
html[data-bs-theme=dark] .avatar.bg-primary-lt,
html[data-bs-theme=dark] .badge.bg-primary-lt {
  color: #5AD0F7 !important;
}
.crm-subrow td { border-top: 0; }
table .crm-subrow + tr td { border-top-width: 1px; }
.crm-notes { white-space: normal; word-break: break-word; }
.datagrid { --tblr-datagrid-padding: 1.25rem; }
.datagrid-content { word-break: break-word; }
@media (min-width: 992px) {
  .crm-sticky { position: sticky; top: 1rem; }
}
.page-pretitle a { text-decoration: none; }
.page-pretitle a:hover { color: var(--tblr-primary) !important; }
.card-link-pop:hover { border-color: rgba(0, 181, 240, .5); }
.skip-link:focus {
  position: fixed; top: .5rem; left: .5rem; z-index: 2000;
  background: var(--tblr-bg-surface); padding: .5rem 1rem; border-radius: var(--tblr-border-radius);
}

/* ---------- Servicios ---------- */
.crm-tabs-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.crm-tabs-scroll .card-header-tabs { flex-wrap: nowrap; }
.crm-timeline { --tblr-timeline-icon-size: 2rem; }
.crm-timeline .timeline-event { margin-bottom: .75rem; }
.crm-timeline .timeline-event:last-child { margin-bottom: 0; }
.crm-timeline .timeline-event-card { box-shadow: none; }
.crm-timeline .timeline-event-card .card-body { padding: .625rem .875rem; }
.crm-comp {
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg, .5rem);
  padding: .75rem 1rem;
  margin-bottom: .75rem;
  transition: border-color .15s, background-color .15s;
}
.crm-comp:last-of-type { margin-bottom: 0; }
.crm-comp.is-on {
  border-color: rgba(0, 181, 240, .55);
  background: rgba(0, 181, 240, .04);
}
.crm-comp-body { margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--tblr-border-color); }
.crm-matrix th, .crm-matrix td { vertical-align: middle; }
.crm-matrix thead th { text-transform: none; letter-spacing: 0; font-weight: var(--tblr-font-weight-medium); }
.crm-matrix-label { font-size: .7rem; line-height: 1.1; white-space: nowrap; }
.crm-matrix .form-check-input { float: none; margin: 0; }
.crm-svc-table .crm-svc-child td { border-top: 0; padding-top: .25rem; padding-bottom: .25rem; font-size: .8125rem; }
.crm-svc-table .crm-svc-root:not(:first-child) td { border-top-width: 1px; }
.min-w-0 { min-width: 0; }
.crm-above { z-index: 2; }
.crm-tipo-card { transition: border-color .15s, box-shadow .15s; }
.crm-tipo-card:hover { border-color: rgba(0, 181, 240, .45); }
.crm-tipo-card.active { border-color: var(--tblr-primary); box-shadow: 0 0 0 1px var(--tblr-primary); }
.crm-svc-name { max-width: 17rem; }
@media (max-width: 767.98px) { .crm-svc-name { max-width: 9.5rem; } }

/* ---------- Ficha de tipo de servicio (catálogo) ---------- */
.crm-tipo-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}
.crm-tipo-nav-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .625rem .25rem .25rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: 999px;
  background: var(--tblr-bg-surface);
  color: var(--tblr-secondary);
  font-size: .8125rem;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.crm-tipo-nav-link:hover {
  color: var(--tblr-body-color);
  border-color: var(--crm-cyan);
  text-decoration: none;
}
.crm-tipo-nav-link.active {
  color: var(--tblr-body-color);
  font-weight: 600;
  border-color: var(--crm-cyan);
  box-shadow: inset 0 0 0 1px var(--crm-cyan);
}
.crm-tipo-nav-link .avatar { border-radius: 999px; }
.crm-plan-card .list-icon li { margin-bottom: .375rem; }
.crm-compare td, .crm-compare th { min-width: 9.5rem; }
.crm-compare td:first-child, .crm-compare th:first-child { min-width: 12rem; }

/* v2.2 · Correo Plus por cuenta */
.crm-plan-card .crm-spec-no { opacity: .6; }
.crm-plan-card .crm-spec-no span { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.crm-cuentas { display: flex; flex-wrap: wrap; gap: .25rem; max-height: 9.5rem; overflow-y: auto; }
.crm-cant-total strong { color: var(--tblr-body-color); }

/* v2.3 · Características de los planes */
.crm-matriz th, .crm-matriz td { min-width: 8.5rem; }
.crm-matriz .crm-matriz-car { min-width: 14rem; position: sticky; left: 0; z-index: 1; background: var(--tblr-bg-surface); }
.crm-matriz thead .crm-matriz-car { background: var(--tblr-bg-surface-tertiary, var(--tblr-bg-surface)); }
.crm-matriz-input { max-width: 9.5rem; margin: 0 auto; }
.crm-matriz .form-check-input { width: 1.25rem; height: 1.25rem; }
.crm-car-table tr:target, .crm-car-list .list-group-item:target { background: var(--tblr-primary-lt); }

/* v3.0 — Roles y permisos */
.crm-perm .crm-perm-grupo td { background: var(--tblr-bg-surface-tertiary, #f6f8fb); font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tblr-secondary); padding-top: .45rem; padding-bottom: .45rem; }
.crm-perm-celda { display: inline-flex; align-items: center; justify-content: center; padding: .35rem; margin: 0; cursor: pointer; border-radius: 4px; }
.crm-perm-celda:hover { background: rgba(0, 181, 240, .08); }
.crm-perm-celda .form-check-input { width: 1.2rem; height: 1.2rem; cursor: pointer; }
.crm-perm-desc { display: none; }
.crm-dl-compact { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; margin: 0; font-size: .8125rem; }
.crm-dl-compact dt { font-weight: 400; color: var(--tblr-secondary); }
.crm-dl-compact dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.crm-portal-hist { font-size: .8125rem; }
.crm-portal-hist li { display: flex; gap: .5rem; align-items: flex-start; padding: .2rem 0; }
.crm-diff del { text-decoration-thickness: 1px; }
.crm-diff-new { background: rgba(47, 179, 68, .12); color: #1d7a2e; padding: 0 .25rem; border-radius: 3px; font-weight: 500; }

/* ---------- v3.0 · Portal de clientes ---------- */
.crm-portal-top { background: #1e293b; border-bottom: 0; }
.crm-portal-top .crm-logo-text { color: #fff; }
.crm-portal-tag { color: rgba(255,255,255,.6); font-size: .8125rem; border-left: 1px solid rgba(255,255,255,.2); padding-left: .75rem; margin-left: .25rem; }
.crm-portal-nav { background: var(--tblr-bg-surface); border-bottom: 1px solid var(--tblr-border-color); min-height: 3rem; padding: 0; }
.crm-portal-nav .nav-item.active > .nav-link,
.crm-portal-nav .nav-link[aria-current="page"] { color: var(--tblr-primary); }
@media (min-width: 768px) {
  .crm-portal-nav .nav-item.active > .nav-link { box-shadow: inset 0 -2px 0 var(--tblr-primary); }
}
.crm-portal-hijo { padding-left: 3.25rem; background: var(--tblr-bg-surface-secondary); }
.crm-portal-hijo::before { content: "↳"; position: absolute; left: 1.4rem; top: 50%; transform: translateY(-50%); color: var(--tblr-secondary); }
.crm-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crm-qr svg { width: 168px; height: 168px; border: 1px solid var(--tblr-border-color); border-radius: 6px; }
.crm-codigos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem 1rem; padding: .75rem 1rem; background: var(--tblr-bg-surface-secondary); border-radius: 6px; font-size: .9375rem; }
.crm-pasos { padding-left: 1.25rem; color: var(--tblr-secondary); }
.crm-legal { max-height: 18rem; overflow-y: auto; padding: 1rem; border: 1px solid var(--tblr-border-color); border-radius: 6px; font-size: .875rem; }
.crm-portal-auth .container-tight { max-width: 30rem; }
.crm-portal .crm-dl-compact { font-size: .875rem; gap: .5rem 1rem; }