/*
 * CallDrive Theme Layer
 * ---------------------
 * Capa de tokens de marca sobre Metronic 8.2.9 (style.bundle.css SIN modificar).
 * Fuente de verdad: html/Brandkit (styleguide_calldrive.png / color-palette_simple_calldrive.JPG).
 *
 * Paleta oficial:  #00C9F6 (cian) | #008CF8 (azul, primary) | #C209FA (magenta, acento/info) | #000000
 * Secundaria:      #040404 | #C680E4 (lavender) | #25A5F2 (dodger) | #645BE9 (royal)
 * Tipografia:      Roboto (Google Fonts). Gobold/Ethnocentric: sin archivos de fuente, pendiente.
 *
 * Este archivo debe cargarse DESPUES de style.bundle.css.
 * Documentacion: docs/DESIGN_SYSTEM.md
 */

/* ============================================================
   1. Variables de marca CallDrive
   ============================================================ */
:root {
  --cd-cyan: #00C9F6;
  --cd-blue: #008CF8;
  --cd-magenta: #C209FA;
  --cd-black: #040404;
  --cd-lavender: #C680E4;
  --cd-dodger: #25A5F2;
  --cd-royal: #645BE9;
  --cd-gradient: linear-gradient(90deg, #00C9F6 0%, #008CF8 45%, #C209FA 100%);
}

/* ============================================================
   2. Tokens Bootstrap + Metronic — modo claro
   ============================================================ */
:root,
[data-bs-theme=light] {
  /* Tipografia de marca */
  --bs-body-font-family: Roboto, Helvetica, "sans-serif";
  --bs-font-sans-serif: Roboto, Helvetica, "sans-serif";

  /* Primary: CallDrive Blue */
  --bs-primary: #008CF8;
  --bs-primary-rgb: 0, 140, 248;
  --bs-primary-active: #0072D4;
  --bs-primary-light: #E6F4FF;
  --bs-primary-inverse: #FFFFFF;
  --bs-primary-clarity: rgba(0, 140, 248, 0.2);
  --bs-text-primary: #008CF8;
  --bs-primary-text-emphasis: #003864;
  --bs-primary-bg-subtle: #CCE8FE;
  --bs-primary-border-subtle: #99D1FC;

  /* Links */
  --bs-link-color: #008CF8;
  --bs-link-color-rgb: 0, 140, 248;
  --bs-link-hover-color: #0072D4;
  --bs-link-hover-color-rgb: 0, 114, 212;

  /* Info: CallDrive Magenta (sustituye al morado #7239EA de Metronic) */
  --bs-info: #C209FA;
  --bs-info-rgb: 194, 9, 250;
  --bs-info-active: #A806D9;
  --bs-info-light: #F9EBFF;
  --bs-info-inverse: #FFFFFF;
  --bs-info-clarity: rgba(194, 9, 250, 0.2);
  --bs-text-info: #C209FA;

  /* Estados de componentes Metronic */
  --bs-component-active-bg: #008CF8;
  --bs-component-hover-color: #008CF8;
  --bs-component-checked-bg: #008CF8;

  /* Menus, ribbons y scrolltop */
  --bs-menu-link-color-hover: #008CF8;
  --bs-menu-link-color-show: #008CF8;
  --bs-menu-link-color-here: #008CF8;
  --bs-menu-link-color-active: #008CF8;
  --bs-ribbon-label-bg: #008CF8;
  --bs-scrolltop-bg-color: #008CF8;
  --bs-scrolltop-bg-color-hover: #0072D4;
}

/* ============================================================
   3. Tokens Bootstrap + Metronic — modo oscuro
   ============================================================ */
[data-bs-theme=dark] {
  --bs-body-font-family: Roboto, Helvetica, "sans-serif";
  --bs-font-sans-serif: Roboto, Helvetica, "sans-serif";

  --bs-primary: #008CF8;
  --bs-primary-rgb: 0, 140, 248;
  --bs-primary-active: #25A5F2;
  --bs-primary-light: #0B2438;
  --bs-primary-inverse: #FFFFFF;
  --bs-primary-clarity: rgba(0, 140, 248, 0.2);
  --bs-text-primary: #008CF8;
  --bs-primary-text-emphasis: #66BAFB;
  --bs-primary-bg-subtle: #001C32;
  --bs-primary-border-subtle: #005495;

  --bs-link-color: #008CF8;
  --bs-link-color-rgb: 0, 140, 248;
  --bs-link-hover-color: #25A5F2;
  --bs-link-hover-color-rgb: 37, 165, 242;

  --bs-info: #CE4DFF;
  --bs-info-rgb: 206, 77, 255;
  --bs-info-active: #D96FFF;
  --bs-info-light: #2A1233;
  --bs-info-inverse: #FFFFFF;
  --bs-info-clarity: rgba(206, 77, 255, 0.2);
  --bs-text-info: #CE4DFF;

  --bs-component-active-bg: #008CF8;
  --bs-component-hover-color: #008CF8;
  --bs-component-checked-bg: #008CF8;

  --bs-menu-link-color-hover: #008CF8;
  --bs-menu-link-color-show: #008CF8;
  --bs-menu-link-color-here: #008CF8;
  --bs-menu-link-color-active: #008CF8;
  --bs-ribbon-label-bg: #008CF8;
  --bs-scrolltop-bg-color: #008CF8;
  --bs-scrolltop-bg-color-hover: #25A5F2;
}

/* ============================================================
   4. Reglas del bundle con hex literal (no usan var())
   ============================================================ */

/* Checks, radios y switches */
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-check.form-check-solid .form-check-input[type=checkbox]:indeterminate {
  background-color: var(--bs-primary);
}

/* Range sliders (pseudo-elementos de vendor: reglas separadas) */
.form-range::-webkit-slider-thumb {
  background-color: var(--bs-primary);
}

.form-range::-moz-range-thumb {
  background-color: var(--bs-primary);
}

/* Botones Bootstrap (Metronic los repinta via .btn.btn-primary con var(),
   esto cubre usos con la clase suelta) */
.btn-primary {
  --bs-btn-color: #FFFFFF;
  --bs-btn-bg: #008CF8;
  --bs-btn-border-color: #008CF8;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: #0072D4;
  --bs-btn-hover-border-color: #0072D4;
  --bs-btn-focus-shadow-rgb: 0, 140, 248;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: #0072D4;
  --bs-btn-active-border-color: #0072D4;
  --bs-btn-disabled-color: #FFFFFF;
  --bs-btn-disabled-bg: #008CF8;
  --bs-btn-disabled-border-color: #008CF8;
}

.btn-outline-primary {
  --bs-btn-color: #008CF8;
  --bs-btn-border-color: #008CF8;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: #008CF8;
  --bs-btn-hover-border-color: #008CF8;
  --bs-btn-focus-shadow-rgb: 0, 140, 248;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: #008CF8;
  --bs-btn-active-border-color: #008CF8;
  --bs-btn-disabled-color: #008CF8;
  --bs-btn-disabled-border-color: #008CF8;
}

/* Nav pills y progreso */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--bs-primary);
}

.progress,
.progress-stacked {
  --bs-progress-bar-bg: var(--bs-primary);
}

/* Icono del acordeon (SVG con color embebido) */
.accordion {
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23008CF8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

[data-bs-theme=dark] .accordion-button::after {
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23008CF8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Separadores */
.separator.separator-content.border-primary::before,
.separator.separator-content.border-primary::after {
  border-color: var(--bs-primary) !important;
}

/* Landing (no usada por la app, cubierta por consistencia) */
.landing-header .menu .menu-link.active,
[data-kt-sticky-landing-header=on] .landing-header .menu .menu-link.active {
  color: var(--bs-primary);
}

/* ============================================================
   5. Tipografia: el bundle repinta body con "Inter" literal
   ============================================================ */
body {
  font-family: Roboto, Helvetica, "sans-serif";
}

/* ============================================================
   6. Sidebar oscuro: negro de marca + logo y tipografia del menu
   (el bundle usa #0D0E12 literal, no la variable)
   ============================================================ */
[data-kt-app-layout=dark-sidebar] .app-sidebar {
  --bs-app-sidebar-light-bg-color: var(--cd-black);
  background-color: var(--cd-black);
}

/* Logo: compacto y centrado en el sidebar */
.app-sidebar-logo {
  justify-content: center;
}

.app-sidebar-logo > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.app-sidebar-logo .cd-sidebar-logo {
  height: 18px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}

.app-sidebar-logo .cd-sidebar-logo-mini {
  height: 16px;
  width: auto;
  object-fit: contain;
}

/* Menu: tipografia mas marcada (como el preview de tokens) */
#kt_app_sidebar_menu.menu,
#kt_app_sidebar_menu .menu-link {
  font-weight: 600;
}

#kt_app_sidebar_menu .menu-title {
  font-weight: 600;
  letter-spacing: 0.01em;
}

#kt_app_sidebar_menu .menu-heading {
  font-weight: 700;
  letter-spacing: 0.04em;
}

#kt_app_sidebar_menu .menu-link.active .menu-title,
#kt_app_sidebar_menu .menu-item.here > .menu-link .menu-title {
  font-weight: 700;
}

/* ============================================================
   7. Utilidades de marca
   ============================================================ */
.cd-bg-gradient {
  background: var(--cd-gradient);
}

.cd-text-gradient {
  background: var(--cd-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
   8. Look neumorfico oscuro (aplica solo en modo dark)
   Mismo idioma visual del login: negro de marca, superficies
   con relieve, inputs hundidos, acentos neon. Centralizado aqui
   para no tocar style.bundle.css.
   ============================================================ */
[data-bs-theme=dark] {
  --cd-app-bg: #040404;
  --cd-surface: #0c0d12;
  --cd-surface-2: #0a0b0f;
  --cd-border-soft: rgba(255, 255, 255, 0.06);

  /* Relieve neumorfico */
  --cd-shadow-out:
    14px 14px 38px rgba(0, 0, 0, 0.8),
    -8px -8px 24px rgba(255, 255, 255, 0.022);
  --cd-shadow-in:
    inset 5px 5px 12px rgba(0, 0, 0, 0.72),
    inset -3px -3px 8px rgba(255, 255, 255, 0.028);

  /* Superficies base de Metronic sobre el negro de marca */
  --bs-body-bg: #050609;
  --bs-app-bg-color: var(--cd-app-bg);
  --bs-app-blank-bg-color: var(--cd-app-bg);
  --bs-card-bg: var(--cd-surface);
  --bs-modal-bg: var(--cd-surface);
  --bs-drawer-bg: var(--cd-surface);
}

/* -- Fondo de la app con brillos de neon atenuados -------------- */
/* Glow en body (background-image), NO en ::before fixed + z-index en
   #kt_app_content_container: eso creaba un stacking context que atrapaba
   los .modal debajo del .modal-backdrop (z-index ~1050 en body). */
[data-bs-theme=dark] body {
  background-color: var(--cd-app-bg);
  background-image:
    radial-gradient(circle at 12% 12%, rgba(0, 201, 246, 0.06), transparent 42%),
    radial-gradient(circle at 88% 18%, rgba(194, 9, 250, 0.055), transparent 45%),
    radial-gradient(circle at 60% 95%, rgba(0, 140, 248, 0.05), transparent 50%);
  background-attachment: fixed;
}

[data-bs-theme=dark] .app-wrapper,
[data-bs-theme=dark] .app-main {
  background-color: transparent;
}

/* -- Header, toolbar y footer alineados al negro de marca ------ */
/* Nota: NO usar backdrop-filter en .app-header — crea containing block
   y desplaza los megamenus Metronic (position:fixed + Popper) a la derecha. */
[data-bs-theme=dark] .app-header,
[data-bs-theme=dark][data-kt-app-header-fixed=true] .app-header {
  background-color: rgba(6, 7, 11, 0.96);
  border-bottom: 1px solid var(--cd-border-soft);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-bs-theme=dark] .app-toolbar,
[data-bs-theme=dark] .app-footer {
  background-color: transparent;
}

/* -- Cards, modales y drawers: superficie con relieve ---------- */
[data-bs-theme=dark] .card,
[data-bs-theme=dark] .modal-content,
[data-bs-theme=dark] .drawer .card,
[data-bs-theme=dark] .menu-sub-dropdown {
  background-color: var(--cd-surface);
  border: 1px solid var(--cd-border-soft);
  border-radius: 18px;
  box-shadow: var(--cd-shadow-out);
}

/* Filo superior con gradiente solo en cards de pagina (no widgets chicos) */
[data-bs-theme=dark] .app-content .card {
  position: relative;
}

[data-bs-theme=dark] .app-content > .card::before,
[data-bs-theme=dark] #kt_app_content_container > .card::before,
[data-bs-theme=dark] #kt_app_content_container > .row > div > .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--cd-gradient);
  opacity: 0.7;
}

[data-bs-theme=dark] .card .card-header {
  border-bottom: 1px solid var(--cd-border-soft);
}

/* -- Inputs hundidos (inset neumorfico) ------------------------ */
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select,
[data-bs-theme=dark] .select2-container--bootstrap5 .select2-selection {
  background-color: var(--cd-surface-2);
  border: 1px solid var(--cd-border-soft);
  border-radius: 12px;
  color: #E9EAED;
  box-shadow: var(--cd-shadow-in);
}

[data-bs-theme=dark] .form-control::placeholder {
  color: #5A5C66;
}

[data-bs-theme=dark] .form-control:focus,
[data-bs-theme=dark] .form-select:focus {
  background-color: var(--cd-surface-2);
  border-color: rgba(0, 140, 248, 0.55);
  box-shadow:
    var(--cd-shadow-in),
    0 0 0 3px rgba(0, 140, 248, 0.18);
  color: #FFFFFF;
}

/* Autofill oscuro para evitar el amarillo de Chrome */
[data-bs-theme=dark] .form-control:-webkit-autofill,
[data-bs-theme=dark] .form-control:-webkit-autofill:hover,
[data-bs-theme=dark] .form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--cd-surface-2) inset;
  -webkit-text-fill-color: #E9EAED;
  caret-color: #E9EAED;
  transition: background-color 9999s ease-out;
}

/* -- Boton primary con el gradiente de marca ------------------- */
[data-bs-theme=dark] .btn.btn-primary {
  background: var(--cd-gradient);
  background-size: 150% 100%;
  background-position: 0% 0%;
  border: 0;
  box-shadow: 0 4px 20px rgba(0, 140, 248, 0.3);
  transition: background-position 0.35s ease, box-shadow 0.2s ease;
}

[data-bs-theme=dark] .btn.btn-primary:hover,
[data-bs-theme=dark] .btn.btn-primary:focus,
[data-bs-theme=dark] .btn.btn-primary:active {
  background-position: 100% 0%;
  box-shadow: 0 6px 26px rgba(194, 9, 250, 0.36);
}

/* -- Tablas: contenedor oscuro, filas legibles ---------------- */
[data-bs-theme=dark] .table {
  --bs-table-bg: transparent;
  --bs-table-color: #C9CBD3;
  --bs-table-border-color: var(--cd-border-soft);
  --bs-table-hover-bg: rgba(0, 140, 248, 0.08);
  --bs-table-hover-color: #FFFFFF;
}

[data-bs-theme=dark] .table > thead th {
  color: #8A8D99;
  border-bottom-color: var(--cd-border-soft);
}

/* DataTables (cubre CSS residual del CDN si sigue cargando) */
[data-bs-theme=dark] .dataTables_wrapper,
[data-bs-theme=dark] .dataTables_wrapper .dataTables_length,
[data-bs-theme=dark] .dataTables_wrapper .dataTables_filter,
[data-bs-theme=dark] .dataTables_wrapper .dataTables_info,
[data-bs-theme=dark] .dataTables_wrapper .dataTables_paginate {
  color: #C9CBD3;
}

[data-bs-theme=dark] .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #C9CBD3 !important;
}

[data-bs-theme=dark] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #FFFFFF !important;
}

[data-bs-theme=dark] table.dataTable tbody tr {
  background-color: transparent;
}

[data-bs-theme=dark] table.dataTable tbody tr:hover {
  background-color: rgba(0, 140, 248, 0.08);
}

/* -- SweetAlert2: refuerzo por si el override del bundle no gana */
[data-bs-theme=dark] .swal2-popup {
  background: var(--cd-surface);
  color: #C9CBD3;
  border: 1px solid var(--cd-border-soft);
  border-radius: 18px;
  box-shadow: var(--cd-shadow-out);
}

[data-bs-theme=dark] .swal2-title,
[data-bs-theme=dark] .swal2-html-container {
  color: #E9EAED;
}

/* -- Dropzone (list_uploader) --------------------------------- */
[data-bs-theme=dark] .dropzone,
[data-bs-theme=dark] .dz-clickable {
  background-color: var(--cd-surface-2);
  border: 1px dashed rgba(0, 140, 248, 0.4);
  border-radius: 14px;
}