:root {
   --background-light-primary: #fff;
   --background-light-secondary: #f8f8f9;
   --background-dark-primary: #232325;
   --background-dark-secondary: #1a1a1c;
   --color-border: #1a1a1c;
   --color-light-text-primary: #313131;
   --color-light-text-secondary: #6a6a6a;
   --color-dark-text-primary: #fff;
   --color-dark-text-secondary: rgb(255 255 255 / 60%);
   --color-accent: #f7871d;
   --color-accent-bg: oklch(0.7327 0.1709 56.18 / 10%);
   --color-accent-secondary: #ffd6a7;
   --color-call-active: #34d399;
   --color-call-missed: #f87171;
   --color-call-pending: #fbbf24;
   --color-call-info: #38bdf8;
   --color-call-active-bg: oklch(0.7729 0.1535 163.22 / 10%);
   --color-call-missed-bg: oklch(0.7106 0.1661 22.22 / 10%);
   --color-call-pending-bg: oklch(0.8369 0.1644 84.43 / 10%);
   --color-call-info-bg: oklch(0.7535 0.139 232.66 / 10%);

   /* Orden de apilado de lo que vive EN LA PÁGINA.
      Ojo: la capa superior del navegador (un <dialog> abierto con showModal()
      o un popover) se pinta por encima de todos estos valores, pase lo que
      pase. Por eso el loader se promueve a esa capa y los avisos de SweetAlert
      se pintan dentro del modal abierto; ver Views/helpers/loader.php y el
      bloque de "Capas de superposición" en DESIGN.md.
      --z-loader solo manda en el camino de respaldo, cuando el navegador no
      tiene Popover API. */
   --z-sticky: 30;    /* encabezado pegajoso y pie fijo */
   --z-overlay: 40;   /* velo del sidebar en móvil */
   --z-sidebar: 50;   /* sidebar */
   --z-alert: 1060;   /* .swal2-container, valor propio de SweetAlert2 */
   --z-loader: 2000;  /* pantalla de carga */
}

.bg-light-primary {
   background-color: var(--background-light-primary);
}

.bg-light-secondary {
   background-color: var(--background-light-secondary);
}

.bg-dark-primary {
   background-color: var(--background-dark-primary);
}

.bg-dark-secondary {
   background-color: var(--background-dark-secondary);
}

.bg-accent {
   background-color: var(--color-accent);
}

.bg-accent-secondary {
   background-color: var(--color-accent-secondary);
}

.bg-call-active {
   background-color: var(--color-call-active-bg);
}

.bg-call-missed {
   background-color: var(--color-call-missed-bg);
}

.bg-call-pending {
   background-color: var(--color-call-pending-bg);
}

.bg-call-info {
   background-color: var(--color-call-info-bg);
}

.color-light-text-primary {
   color: var(--color-light-text-primary) !important;
}

.color-light-text-secondary {
   color: var(--color-light-text-secondary) !important;
}

.color-dark-text-primary {
   color: var(--color-dark-text-primary) !important;
}

.color-dark-text-secondary {
   color: var(--color-dark-text-secondary) !important;
}

.color-text-accent {
   color: var(--color-accent);
}

.color-call-active {
   color: var(--color-call-active);
}

.color-call-missed {
   color: var(--color-call-missed);
}

.color-call-pending {
   color: var(--color-call-pending);
}

.color-call-info {
   color: var(--color-call-info);
}

button.button-active,
button.button-missed,
button.button-pending,
button.button-info,
button.button-accent {
   cursor: pointer;
}

.button-active {
   background-color: var(--color-call-active-bg);
   color: var(--color-call-active);
   border: 1px solid var(--color-call-active);
}

.button-missed {
   background-color: var(--color-call-missed-bg);
   color: var(--color-call-missed);
   border: 1px solid var(--color-call-missed);
}

.button-pending {
   background-color: var(--color-call-pending-bg);
   color: var(--color-call-pending);
   border: 1px solid var(--color-call-pending);
}

.button-info {
   background-color: var(--color-call-info-bg);
   color: var(--color-call-info);
   border: 1px solid var(--color-call-info);
}

.button-accent {
   background-color: var(--color-accent-bg);
   color: var(--color-accent);
   border: 1px solid var(--color-accent);
}

/* Pantalla de carga
   ------------------------------------------------------------------
   El elemento se promueve a la capa superior del navegador con la API de
   popover (ver Views/helpers/loader.php). Ahí el z-index no pinta nada: el
   orden lo da el orden de entrada en esa capa. El z-index de abajo es el
   camino de respaldo para navegadores sin Popover API, donde el loader
   quedará —inevitablemente— por debajo de un <dialog> abierto. */
.page-loader {
   position: fixed;
   inset: 0;
   z-index: var(--z-loader);
   display: grid;
   place-items: center;
   padding: 1.5rem;
   /* Opaco a propósito. Se probó un velo translúcido y el resultado era peor:
      dejando ver la pantalla de debajo, el loader parece una capa a medio
      poner y da la sensación de que la carga nunca llega a completarse. Una
      superficie sólida se lee como un estado, no como un destello. */
   background: #fff;
   opacity: 1;
   visibility: visible;
   transition: opacity 250ms ease, visibility 0s linear;
}

.page-loader.is-hidden {
   pointer-events: none;
   opacity: 0;
   visibility: hidden;
   transition-delay: 0s, 250ms;
}

/* Un popover abierto recibe del navegador position:fixed, inset:0,
   width/height:fit-content, margin:auto, border, padding y un fondo propio.
   Todo eso hay que devolverlo a lo de arriba.
   display NO se toca aquí: el camino de respaldo lo necesita siempre. */
.page-loader:popover-open {
   inset: 0;
   width: auto;
   height: auto;
   max-width: none;
   max-height: none;
   margin: 0;
   border: 0;
   padding: 1.5rem;
   overflow: hidden;
   color: inherit;
   background: #fff;
}

/* El velo propio del popover sobra: el fondo ya lo pone .page-loader. */
.page-loader::backdrop {
   background: transparent;
}

.page-loader__content {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
   text-align: center;
}

.page-loader__spinner {
   width: 2.75rem;
   height: 2.75rem;
   border: .25rem solid #f7871d40;
   border-top-color: var(--color-accent);
   border-radius: 50%;
   animation: page-loader-spin 700ms linear infinite;
}

.page-loader__logo {
   display: block;
   width: 10rem;
   height: auto;
}

.page-loader__message {
   margin: 0;
   color: var(--color-light-text-secondary);
   font-size: .875rem;
   font-weight: 600;
}

@keyframes page-loader-spin {
   to {
      transform: rotate(360deg);
   }
}

/* SweetAlert2
   ------------------------------------------------------------------
   Con un modal abierto, helpers.js pinta el aviso DENTRO del <dialog>
   (opción target) para que quede en su misma capa y no salga inerte. No hace
   falta reposicionar nada: en 11.x el contenedor es position:fixed inset:0
   siempre, sea cual sea el target. Solo se ata el z-index al token para el
   camino de respaldo. */
.swal2-container {
   z-index: var(--z-alert);
}