/* ============================================================================
 * DESIGN SYSTEM AUAS — TOKENS DE ESPACIADO, RADIOS, SOMBRAS Y TRANSICIONES
 * ----------------------------------------------------------------------------
 * Fuente de verdad: apps/static/assets/PHOSIS/css/style.css
 *                    apps/static/assets/css/components/time-picker-24.css
 *
 * REGLA: los valores de espaciado son los que Bootstrap 5 y el template ya
 * usan (0.25rem / 0.5rem / 1rem / 1.5rem). Frecuencias medidas:
 *   1rem     280 usos   0.5rem   243 usos
 *   0.25rem  228 usos   1.5rem   223 usos
 *   2rem      38 usos   0.75rem   22 usos
 *
 * PREFERIR SIEMPRE las utilidades de Bootstrap (mb-3, p-2, gap-2…) sobre
 * estilos inline. Estas variables son para CSS propio, no para HTML.
 * ========================================================================= */

:root,
[data-bs-theme="light"],
[data-pc-preset="PHOSIS"],
[data-pc-preset="MINSAIT"],
[data-pc-preset="TECNIDRONES"] {

  /* ==========================================================================
   * 1. ESCALA DE ESPACIADO (base 0.25rem = 4px, igual que Bootstrap)
   * ========================================================================== */
  --ui-space-0:    0;
  --ui-space-1:    0.25rem;   /*  4px — mb-1, p-1 */
  --ui-space-2:    0.5rem;    /*  8px — mb-2, p-2 */
  --ui-space-3:    0.75rem;   /* 12px — mb-3 */
  --ui-space-4:    1rem;      /* 16px — mb-4, p-4 */
  --ui-space-5:    1.5rem;    /* 24px — mb-5 */
  --ui-space-6:    2rem;      /* 32px */
  --ui-space-7:    3rem;      /* 48px */
  --ui-space-8:    4rem;      /* 64px — separadores de sección */

  /* ==========================================================================
   * 2. RADIOS
   * Frecuencia real en PHOSIS/style.css:
   *   4px (46 usos) ← DOMINANTE      6px (10)   2px (10)   5px (7)
   *   15px (7)     50px (6)         1rem (4)    3px (3)   0.25rem (3)
   * ========================================================================== */
  --ui-radius-none:    0;
  --ui-radius-sm:      2px;      /* control denso */
  --ui-radius-xs:      4px;      /* ★ DOMINANTE — inputs, botones, badges */
  --ui-radius-sm-alt:  5px;
  --ui-radius:         6px;      /* cards, modales */
  --ui-radius-lg:      15px;
  --ui-radius-pill:    50px;
  --ui-radius-round:   50%;
  --ui-radius-1rem:    1rem;

  /* ==========================================================================
   * 3. SOMBRAS
   * Valores literales de PHOSIS/style.css
   * ========================================================================== */
  --ui-shadow-none:     none;
  --ui-shadow-xs:       0 1px 2px rgba(69, 90, 100, .05);
  --ui-shadow-sm:       0 1px 20px 0 rgba(69, 90, 100, .08);   /* --pc-card-box-shadow */
  --ui-shadow-focus:    0 0 0 0.2rem rgba(4, 169, 245, 0.25);
  --ui-shadow-focus-hi: 0 0 0 1px #fff, 0 0 0 3px rgba(4, 169, 245, 0.4);
  --ui-shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.4);
  --ui-shadow-lg:       0 0 20px 0 rgba(0, 0, 0, .05);

  /* ==========================================================================
   * 4. TRANSICIONES
   * Patrón dominante en PHOSIS/style.css:
   *   "background-color .15s ease-in-out, border-color .15s,
   *    box-shadow .15s ease-in-out"  ( Bootstrap )
   *   "all .3s ease-in-out" / "all .2s ease-in-out" / "all .08s"
   * ========================================================================== */
  --ui-transition-fast:   0.15s ease-in-out;
  --ui-transition-base:   0.2s ease-in-out;
  --ui-transition-slow:   0.3s ease-in-out;
  --ui-transition-snap:   0.08s cubic-bezier(0.37, 0.24, 0.53, 0.99);
  --ui-transition-theme:   background-color var(--ui-transition-fast),
                           border-color var(--ui-transition-fast),
                           box-shadow var(--ui-transition-fast),
                           color var(--ui-transition-fast);

  /* ==========================================================================
   * 5. Z-INDEX
   * Escala necesaria porque el repo tiene valores arbitrarios (3001, 1000).
   * Usar SIEMPRE estos tokens en lugar de números sueltos.
   * ========================================================================== */
  --ui-z-base:          0;
  --ui-z-dropdown:      1000;    /* dropdown-menu */
  --ui-z-sticky:        1020;
  --ui-z-overlay:       1050;    /* backdrop */
  --ui-z-modal:         1060;    /* .modal-content */
  --ui-z-popover:       1070;
  --ui-z-tooltip:       1080;
  --ui-z-toast:         1090;    /* toast-container */
  --ui-z-flyout:        1100;    /* dt-actions-flyout */

  /* ==========================================================================
   * 6. ALTO DE CONTROL (input, select, botón)
   * ========================================================================== */
  --ui-control-height:        38px;
  --ui-control-height-sm:     31px;
  --ui-control-height-lg:     48px;
}

/* ============================================================================
 * UTILIDADES PROPIAS (solo cuando Bootstrap NO cubre el caso)
 * Preferencia absoluta: utilidades Bootstrap antes que esto.
 * ========================================================================= */
.ui-stack        { display: flex; flex-direction: column; gap: var(--ui-space-4); }
.ui-stack-sm     { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.ui-stack-lg     { display: flex; flex-direction: column; gap: var(--ui-space-5); }
.ui-divider      { height: 1px; background: var(--ui-border); border: 0; opacity: 1; }
.ui-divider-vertical { width: 1px; align-self: stretch; background: var(--ui-border); }