/* =====================================================================
   Konstrue Brand · capa de retematización sobre TailAdmin Free (Tailwind v4)
   Carga: DESPUÉS de main.css (Tailwind v4 pre-compilado).
   Audiencia: header.php (app autenticada) y auth/login.php.
   Reglas:
     - No se recompila Tailwind. Todo se hace por custom properties y
       overrides de cascada.
     - No se rompe el dark mode existente (Alpine `darkMode` en body).
     - --color-warning-300 se mantiene en #fec84b (intocable por brief).
     - Reasignación de --color-brand-* a NARANJA Konstrue OS (#EA580C):
       efecto inmediato sobre todos los `bg-brand-*`, `text-brand-*`,
       `ring-brand-*`, `border-brand-*` del HTML existente.
     - Paleta alineada con prototipo Konstrue OS (KPM Dashboards):
       Navy `#0B1F3A` (texto/headings/sidebar deep) + Naranja `#EA580C`
       (CTA, active state, accents). Ver memoria
       [[project_konstrue_os_palette]].
     - Los nombres de los tokens (`--kt-yellow*`) se conservan por
       compatibilidad con el resto de las reglas de este archivo y de
       los módulos; el VALOR pasa a naranja. Si en el futuro se
       renombra, hay que migrar todas las referencias en este archivo.
   ===================================================================== */

@layer theme {
  :root,
  :host {
    /* ---------------------------------------------------------------
       1. Tokens de marca Konstrue OS (navy + naranja)
       Nota: los identificadores `--kt-yellow*` se conservan por
       compatibilidad con las reglas de este archivo; el VALOR migró
       a la familia naranja del prototipo Konstrue OS.
       --------------------------------------------------------------- */
    --kt-yellow:        #EA580C; /* orange-600 — acento de marca */
    --kt-yellow-strong: #C2410C; /* orange-700 — hover/pressed */
    --kt-yellow-soft:   #FFF7ED; /* orange-50 — fondo suave (hover tabla, badge) */

    /* Navy ejecutivo Konstrue OS — texto principal, headings, sidebar deep */
    --kt-navy:          #0B1F3A;
    --kt-navy-soft:     #1E3A5F;

    --kt-graphite:      #3D3D3D;
    --kt-gray-medium:   #8C8C8C;
    --kt-gray-light:    #E8E8E8;
    --kt-white:         #FFFFFF;

    --kt-kons:          #3D3D3D;
    --kt-true:          #9B9B9B;

    /* Estados funcionales (no definidos en el manual original) */
    --kt-success:       #16a34a;
    --kt-success-soft:  #DCFCE7;
    --kt-danger:        #DC2626;
    --kt-danger-soft:   #FEE2E2;
    --kt-info:          #3D3D3D;
    --kt-warning:       #B45309;
    --kt-warning-soft:  #FEF3C7;

    /* Superficies / light mode por defecto */
    --kt-bg:            #FFFFFF;
    --kt-surface:       #FFFFFF;
    --kt-surface-2:     #F7F7F7;
    --kt-text:          #3D3D3D;
    --kt-text-muted:    #8C8C8C;
    --kt-border:        #E8E8E8;

    /* Anillos de foco (naranja con alpha) */
    --kt-ring-yellow:   rgba(234, 88, 12, 0.35);

    /* ---------------------------------------------------------------
       2. Tipografía
       --------------------------------------------------------------- */
    --font-sans: 'Raleway', ui-sans-serif, system-ui, -apple-system,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Poppins', var(--font-sans);

    /* ---------------------------------------------------------------
       3. Reasignación de la paleta `brand-*` de TailAdmin
       (era amarillo Konstrue #FFC300; pasa a NARANJA Konstrue OS #EA580C)
       Esto retematiza, sin tocar HTML, todos los:
         bg-brand-* · text-brand-* · border-brand-* · ring-brand-*
       Valores alineados a la escala `orange-*` de Tailwind v3,
       coherentes con `assets/css/konstrue-os.css` (kos-orange-*).
       --------------------------------------------------------------- */
    --color-brand-25:   #FFFBF5;
    --color-brand-50:   #FFF7ED;
    --color-brand-100:  #FFEDD5;
    --color-brand-200:  #FED7AA;
    --color-brand-300:  #FDBA74;
    --color-brand-400:  #FB923C;
    --color-brand-500:  #F97316;
    --color-brand-600:  #EA580C;
    --color-brand-700:  #C2410C;
    --color-brand-800:  #9A3412;
    --color-brand-900:  #7C2D12;
    --color-brand-950:  #431407;
  }

  /* -----------------------------------------------------------------
     4. Dark mode — superficies cálidas, no azul-frío
     ----------------------------------------------------------------- */
  .dark {
    --kt-bg:            #1A1A1A;
    --kt-surface:       #262626;
    --kt-surface-2:     #3D3D3D;
    --kt-text:          #F2F2F2;
    --kt-text-muted:    #B8B8B8;
    --kt-border:        #2E2E2E;
  }
}

/* =====================================================================
   5. Tipografía base — Raleway en body, Poppins en headings
   ===================================================================== */
@layer base {
  html {
    font-family: var(--font-sans);
  }

  body {
    font-family: var(--font-sans);
    color: var(--kt-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4,
  .font-display,
  .text-title-sm,
  .text-title-md,
  .text-title-lg {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
  }

  /* Recalibrado del fondo en dark mode (mata el bg-gray-900 azul-frío
     que el body inline aplica vía Alpine).
     Usamos !important porque `bg-gray-900` es utility Tailwind con la
     misma especificidad y aplicada inline. */
  body.dark,
  html.dark body {
    background-color: var(--kt-bg) !important;
    color: var(--kt-text);
  }
}

/* =====================================================================
   6. Utilities Konstrue base (@layer components)
   ===================================================================== */
@layer components {

  /* ---------------- Botones ---------------- */
  .kt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.625rem 1.125rem;
    border-radius: 0.625rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.005em;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    transition:
      background-color 0.15s ease,
      border-color 0.15s ease,
      color 0.15s ease,
      box-shadow 0.15s ease,
      transform 0.05s ease;
  }
  .kt-btn:focus { outline: none; }
  .kt-btn:focus-visible {
    box-shadow: 0 0 0 3px var(--kt-ring-yellow);
  }
  .kt-btn:disabled,
  .kt-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .kt-btn:active:not(:disabled) { transform: translateY(1px); }

  .kt-btn-primary {
    background-color: var(--kt-yellow); /* naranja #EA580C */
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(11, 31, 58, 0.10);
  }
  .kt-btn-primary:hover:not(:disabled) {
    background-color: var(--kt-yellow-strong);
  }

  .kt-btn-secondary {
    background-color: var(--kt-white);
    color: var(--kt-graphite);
    border-color: var(--kt-graphite);
  }
  .kt-btn-secondary:hover:not(:disabled) {
    background-color: var(--kt-surface-2);
  }
  .dark .kt-btn-secondary {
    background-color: transparent;
    color: var(--kt-text);
    border-color: var(--kt-text);
  }
  .dark .kt-btn-secondary:hover:not(:disabled) {
    background-color: var(--kt-surface);
  }

  .kt-btn-ghost {
    background-color: transparent;
    color: var(--kt-graphite);
  }
  .kt-btn-ghost:hover:not(:disabled) {
    background-color: var(--kt-surface-2);
  }
  .dark .kt-btn-ghost { color: var(--kt-text); }
  .dark .kt-btn-ghost:hover:not(:disabled) {
    background-color: var(--kt-surface);
  }

  .kt-btn-danger {
    background-color: var(--kt-danger);
    color: #FFFFFF;
  }
  .kt-btn-danger:hover:not(:disabled) { background-color: #B91C1C; }

  /* Terciario / link — solo texto, hover con subrayado */
  .kt-btn-link {
    background-color: transparent;
    color: var(--kt-graphite);
    text-decoration: none;
    min-height: auto;
    padding: 0.25rem 0.125rem;
    border-radius: 0.25rem;
    font-family: var(--font-sans);
    font-weight: 500;
  }
  .kt-btn-link:hover:not(:disabled) {
    text-decoration: underline;
    text-decoration-color: var(--kt-yellow);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
  .dark .kt-btn-link { color: var(--kt-text); }

  /* Floating Action Button — icon-only circular */
  .kt-btn-fab {
    width: 3.5rem;
    height: 3.5rem;
    min-height: 0;
    padding: 0;
    border-radius: 9999px;
    background-color: var(--kt-yellow); /* naranja */
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(11, 31, 58, 0.18);
  }
  .kt-btn-fab:hover:not(:disabled) {
    background-color: var(--kt-yellow-strong);
    box-shadow: 0 6px 18px rgba(11, 31, 58, 0.24);
  }

  /* Tamaños */
  .kt-btn-sm {
    min-height: 36px;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    border-radius: 0.5rem;
  }
  .kt-btn-lg {
    min-height: 52px;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    border-radius: 0.75rem;
  }

  /* Estado loading — spinner inline reemplaza al contenido */
  .kt-btn.is-loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
  }
  .kt-btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 1rem;
    margin: -0.5rem 0 0 -0.5rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 9999px;
    color: var(--kt-graphite);
    animation: kt-spin 0.6s linear infinite;
  }
  .kt-btn-primary.is-loading::after { color: #FFFFFF; }
  .kt-btn-danger.is-loading::after  { color: #FFFFFF; }
  @keyframes kt-spin {
    to { transform: rotate(360deg); }
  }

  /* ---------------- Card ----------------
     Spec brief: blanco, borde --kt-gray-light, radio 12px, sombra
     0 1px 2px rgba(61,61,61,0.04). En dark, superficie cálida #262626. */
  .kt-card {
    background-color: var(--kt-surface);
    border: 1px solid var(--kt-gray-light);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(61, 61, 61, 0.04);
  }
  .dark .kt-card {
    background-color: var(--kt-surface);
    border-color: var(--kt-border);
    box-shadow: none;
  }

  /* Variante hover — eleva al pasar el cursor (para tarjetas clicables) */
  .kt-card-hover {
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  }
  .kt-card-hover:hover {
    box-shadow: 0 4px 12px rgba(61, 61, 61, 0.08);
    border-color: #D4D4D4;
  }
  .dark .kt-card-hover:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: var(--kt-text-muted);
  }

  /* Variante destacada — borde izquierdo amarillo (cards con foco de marca) */
  .kt-card-featured {
    border-left: 3px solid var(--kt-yellow);
  }

  /* ---------------- Input ---------------- */
  .kt-input {
    display: block;
    width: 100%;
    min-height: 44px;
    padding-block: 0.625rem;
    padding-inline: 0.875rem; /* longhand: permite override con pr-* en inputs con icono */
    border: 1px solid var(--kt-gray-light);
    border-radius: 0.5rem;
    background-color: var(--kt-white);
    color: var(--kt-text);
    font-family: var(--font-sans);
    font-size: 1rem; /* >=16px evita zoom iOS */
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .kt-input::placeholder { color: var(--kt-text-muted); }
  .kt-input:focus {
    outline: none;
    border-color: var(--kt-yellow);
    box-shadow: 0 0 0 3px var(--kt-ring-yellow);
  }
  .dark .kt-input {
    background-color: var(--kt-surface);
    border-color: var(--kt-border);
    color: var(--kt-text);
  }
  .dark .kt-input:focus {
    border-color: var(--kt-yellow);
    box-shadow: 0 0 0 3px var(--kt-ring-yellow);
  }

  /* ---------------- Badge ---------------- */
  .kt-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background-color: var(--kt-surface-2);
    color: var(--kt-graphite);
  }
  .kt-badge-yellow {
    background-color: var(--kt-yellow-soft); /* orange-50 */
    color: var(--kt-yellow-strong);          /* orange-700 — contraste */
  }
  .kt-badge-success {
    background-color: var(--kt-success-soft);
    color: #166534;
  }
  .kt-badge-danger {
    background-color: var(--kt-danger-soft);
    color: #991B1B;
  }
  .kt-badge-warning {
    background-color: var(--kt-warning-soft);
    color: var(--kt-warning);
  }

  /* ---------------- Section title ---------------- */
  .kt-section-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--kt-graphite);
    line-height: 1.2;
  }
  .dark .kt-section-title { color: var(--kt-text); }

  /* ---------------- Divider ---------------- */
  .kt-divider {
    border: none;
    border-top: 1px solid var(--kt-gray-light);
    margin: 1rem 0;
  }
  .dark .kt-divider { border-top-color: var(--kt-border); }

  /* ---------------- Accent bar lateral del manual ----------------
     Marca decorativa "punto anclaje + barra" del manual Konstrue.
     Aplicar a un contenedor para mostrar barra amarilla 3px a la
     izquierda. */
  .kt-accent-bar {
    position: relative;
    padding-left: 1rem;
  }
  .kt-accent-bar::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.125rem;
    bottom: 0.125rem;
    width: 3px;
    background-color: var(--kt-yellow);
    border-radius: 2px;
  }

  /* ---------------- Color utilities ----------------
     Reemplazo del rol "amarillo de marca" para HTML existente que
     hoy usa `amber-*` muertas. */
  .kt-bg-yellow        { background-color: var(--kt-yellow) !important; }
  .kt-bg-yellow-soft   { background-color: var(--kt-yellow-soft) !important; }
  .kt-bg-graphite      { background-color: var(--kt-graphite) !important; }
  .kt-bg-success-soft  { background-color: var(--kt-success-soft) !important; }
  .kt-bg-danger-soft   { background-color: var(--kt-danger-soft) !important; }
  .kt-bg-warning-soft  { background-color: var(--kt-warning-soft) !important; }

  .kt-text-yellow      { color: var(--kt-yellow) !important; }
  .kt-text-graphite    { color: var(--kt-graphite) !important; }
  .kt-text-warning     { color: var(--kt-warning) !important; }
  .kt-text-success     { color: #166534 !important; }
  .kt-text-danger      { color: var(--kt-danger) !important; }
  .kt-text-muted       { color: var(--kt-gray-medium) !important; }

  .kt-border-yellow    { border-color: var(--kt-yellow) !important; }
  .kt-border-graylight { border-color: var(--kt-gray-light) !important; }
  .kt-border-warning   { border-color: #FCD34D !important; }
  .kt-border-danger    { border-color: #FECACA !important; }
  .kt-border-success   { border-color: #BBF7D0 !important; }

  /* Dark mode: el naranja Konstrue OS también cumple AA sobre #1A1A1A */
}

/* =====================================================================
   7. Overrides de contraste — botones/headings que usan la paleta brand-*
   Tras migrar --color-brand-* a la familia NARANJA (orange-600 #EA580C),
   `bg-brand-500/600/700` con texto BLANCO ya pasa WCAG AA (contraste
   ≥ 4.5:1 sobre orange-600/700). Forzamos texto blanco en botones y
   permitimos que los headings con `text-brand-*` se vean naranja.
   Si en el futuro algún HTML usa `bg-brand-100/200` (fondos claros),
   ahí sí sería ilegible con blanco — pero esos tonos están reservados
   a fondos suaves de chips, no a botones.
   ===================================================================== */
@layer utilities {
  /* Selectores con `~=` matchean clase exacta (no prefijo), así
     `bg-brand-500` aplica pero `bg-brand-50` no. Cubrimos 500..950
     porque a partir del 500 el contraste con blanco supera 4.5:1. */
  button[class~="bg-brand-500"],
  button[class~="bg-brand-600"],
  button[class~="bg-brand-700"],
  button[class~="bg-brand-800"],
  button[class~="bg-brand-900"],
  button[class~="bg-brand-950"],
  a[class~="bg-brand-500"],
  a[class~="bg-brand-600"],
  a[class~="bg-brand-700"],
  a[class~="bg-brand-800"],
  a[class~="bg-brand-900"],
  a[class~="bg-brand-950"],
  [role="button"][class~="bg-brand-500"],
  [role="button"][class~="bg-brand-600"],
  [role="button"][class~="bg-brand-700"],
  [role="button"][class~="bg-brand-800"],
  [role="button"][class~="bg-brand-900"],
  [role="button"][class~="bg-brand-950"] {
    color: #FFFFFF !important;
  }
  button[class*="bg-brand-"] svg,
  a[class*="bg-brand-"] svg,
  [role="button"][class*="bg-brand-"] svg {
    fill: currentColor;
  }
}

/* =====================================================================
   8. Sidebar — paleta Konstrue OS ejecutiva (prototipo KPM Dashboards)
   Aside con fondo navy `#0B1F3A`, texto slate claro y item activo
   con fondo naranja sólido `#EA580C` + texto blanco.
   El sidebar mantiene este look independientemente del dark mode global
   (ya estaba "oscuro" por diseño en el prototipo).
   ===================================================================== */
@layer utilities {
  /* Fondo navy + borde derecho sutil para definir el panel */
  aside.sidebar {
    background-color: var(--kt-navy) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    color: #E2E8F0; /* slate-200 base */
  }
  .dark aside.sidebar {
    background-color: var(--kt-navy) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* Header del sidebar — separador sutil respecto al menú.
     Forzar siempre el logo "dark" (claro) dentro del sidebar navy,
     sin importar el dark mode global. Los selectores escapan el
     atributo de clase porque Tailwind usa `dark:hidden`/`dark:block`. */
  aside.sidebar .sidebar-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 0.5rem;
  }
  aside.sidebar img[class*="dark:hidden"] { display: none !important; }
  aside.sidebar img[class*="dark:block"]  { display: block !important; }

  /* Título de grupo "MENÚ" + su icono colapsado */
  aside.sidebar h3,
  aside.sidebar h3 .menu-group-title {
    color: #94A3B8 !important; /* slate-400 */
  }
  aside.sidebar h3 .menu-group-icon {
    fill: #94A3B8;
  }

  /* ---- Item INACTIVO ----
     Texto slate-300, icono slate-400. Hover: fondo navy-soft + texto blanco. */
  aside.sidebar .menu-item-inactive,
  aside.sidebar .menu-dropdown-item-inactive {
    color: #CBD5E1 !important; /* slate-300 */
  }
  aside.sidebar .menu-item-inactive svg,
  aside.sidebar .menu-item-inactive [data-lucide],
  aside.sidebar .menu-dropdown-item-inactive svg,
  aside.sidebar .menu-dropdown-item-inactive [data-lucide] {
    color: #94A3B8; /* slate-400 */
  }
  aside.sidebar .menu-item-inactive:hover,
  aside.sidebar .menu-dropdown-item-inactive:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: #FFFFFF !important;
  }
  aside.sidebar .menu-item-inactive:hover svg,
  aside.sidebar .menu-item-inactive:hover [data-lucide],
  aside.sidebar .menu-dropdown-item-inactive:hover svg,
  aside.sidebar .menu-dropdown-item-inactive:hover [data-lucide] {
    color: #FFFFFF;
  }
  /* Dark mode global: igual al base (sidebar siempre navy) */
  .dark aside.sidebar .menu-item-inactive,
  .dark aside.sidebar .menu-dropdown-item-inactive {
    color: #CBD5E1 !important;
  }

  /* ---- Item ACTIVO ----
     Konstrue OS: fondo naranja sólido + texto e iconos blancos.
     Se anula la barra ::before del look anterior (item entero naranja). */
  aside.sidebar .menu-item-active {
    background-color: var(--kt-yellow) !important; /* #EA580C */
    color: #FFFFFF !important;
  }
  aside.sidebar .menu-item-active svg,
  aside.sidebar .menu-item-active [data-lucide],
  aside.sidebar .menu-item-active .menu-item-arrow {
    color: #FFFFFF;
  }
  aside.sidebar .menu-item-active::before {
    display: none;
    content: none;
  }
  .dark aside.sidebar .menu-item-active {
    background-color: var(--kt-yellow) !important;
    color: #FFFFFF !important;
  }

  /* Submenú: item activo con fondo naranja translúcido (no compite con el padre) */
  aside.sidebar .menu-dropdown-item-active {
    background-color: rgba(234, 88, 12, 0.18) !important;
    color: #FFFFFF !important;
  }
  aside.sidebar .menu-dropdown-item-active svg,
  aside.sidebar .menu-dropdown-item-active [data-lucide] {
    color: #FFFFFF;
  }
  .dark aside.sidebar .menu-dropdown-item-active {
    background-color: rgba(234, 88, 12, 0.22) !important;
    color: #FFFFFF !important;
  }
}

/* =====================================================================
   9. Tablas — override no invasivo de <thead> + utility .kt-table
   Retematiza automáticamente cualquier tabla cuyo <thead> use el
   patrón TailAdmin (bg-slate-50 / bg-gray-50). Sin tocar HTML.
   ===================================================================== */
@layer utilities {
  /* Header de tabla coherente */
  thead.bg-slate-50,
  thead.bg-gray-50,
  thead.bg-slate-100 {
    background-color: var(--kt-surface-2) !important;
  }
  thead.bg-slate-50 th,
  thead.bg-gray-50 th,
  thead.bg-slate-100 th {
    color: var(--kt-graphite);
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0.01em;
    border-bottom: 1px solid var(--kt-gray-light);
  }
  .dark thead.bg-slate-50,
  .dark thead.bg-gray-50,
  .dark thead.bg-slate-100 {
    background-color: var(--kt-surface) !important;
  }
  .dark thead.bg-slate-50 th,
  .dark thead.bg-gray-50 th,
  .dark thead.bg-slate-100 th {
    color: var(--kt-text);
    border-bottom-color: var(--kt-border);
  }

  /* Utility .kt-table — para tablas que se migran explícitamente al
     sistema Konstrue. Agrega zebra, hover, separadores coherentes. */
  table.kt-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-sans);
  }
  table.kt-table thead {
    background-color: var(--kt-surface-2);
  }
  table.kt-table thead th {
    color: var(--kt-graphite);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--kt-gray-light);
  }
  table.kt-table tbody tr {
    transition: background-color 0.1s ease;
  }
  table.kt-table tbody tr + tr td {
    border-top: 1px solid var(--kt-gray-light);
  }
  table.kt-table tbody td {
    padding: 0.75rem 1rem;
    color: var(--kt-text);
    font-size: 0.875rem;
  }
  table.kt-table.kt-table-zebra tbody tr:nth-child(even) {
    background-color: rgba(247, 247, 247, 0.6);
  }
  table.kt-table tbody tr:hover {
    background-color: var(--kt-yellow-soft);
  }
  .dark table.kt-table thead {
    background-color: var(--kt-surface);
  }
  .dark table.kt-table thead th {
    color: var(--kt-text);
    border-bottom-color: var(--kt-border);
  }
  .dark table.kt-table tbody td {
    color: var(--kt-text);
  }
  .dark table.kt-table tbody tr + tr td {
    border-top-color: var(--kt-border);
  }
  .dark table.kt-table.kt-table-zebra tbody tr:nth-child(even) {
    background-color: rgba(38, 38, 38, 0.5);
  }
  .dark table.kt-table tbody tr:hover {
    background-color: rgba(234, 88, 12, 0.08); /* naranja con alpha sutil */
  }

  /* Scroll horizontal con sombra lateral (para tablas anchas en móvil).
     Aplicar al wrapper: <div class="kt-table-scroll"><table>...</table></div> */
  .kt-table-scroll {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .kt-table-scroll::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    background: linear-gradient(to left, rgba(61, 61, 61, 0.08), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  @media (max-width: 768px) {
    .kt-table-scroll::after { opacity: 1; }
  }
}

/* =====================================================================
   10. Modales — utilities .kt-modal-* con animación de entrada
   estandarizada y backdrop con blur sutil. Compatible con el patrón
   "fixed inset-0 z-NN" + panel centrado que usa toda la app.
   ===================================================================== */
@layer utilities {
  /* Backdrop: cubre toda la pantalla, oscurece y desenfoca el fondo */
  .kt-modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.45); /* slate-900/45 */
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: kt-modal-fade-in 0.15s ease-out;
  }

  /* Panel: card centrada con sombra fuerte */
  .kt-modal-panel {
    position: relative;
    z-index: 10;
    background-color: var(--kt-surface);
    border: 1px solid var(--kt-gray-light);
    border-radius: 0.875rem;
    box-shadow: 0 24px 48px -12px rgba(61, 61, 61, 0.25),
                0 0 0 1px rgba(61, 61, 61, 0.02);
    animation: kt-modal-slide-up 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .dark .kt-modal-panel {
    background-color: var(--kt-surface);
    border-color: var(--kt-border);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.05);
  }

  /* Header del modal — título + opcionalmente botón cerrar */
  .kt-modal-header {
    padding: 1.125rem 1.25rem;
    border-bottom: 1px solid var(--kt-gray-light);
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--kt-graphite);
  }
  .dark .kt-modal-header {
    border-bottom-color: var(--kt-border);
    color: var(--kt-text);
  }

  /* Body del modal — área de contenido con padding coherente */
  .kt-modal-body {
    padding: 1.25rem;
    color: var(--kt-text);
  }

  /* Footer del modal — acciones alineadas a la derecha */
  .kt-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--kt-gray-light);
    background-color: rgba(247, 247, 247, 0.4);
    border-radius: 0 0 0.875rem 0.875rem;
  }
  .dark .kt-modal-footer {
    border-top-color: var(--kt-border);
    background-color: rgba(38, 38, 38, 0.4);
  }

  @keyframes kt-modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes kt-modal-slide-up {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
}

/* =====================================================================
   11. Cards heredadas del template TailAdmin — armonización sutil
   Las vistas (kcliente, kcatalgoos, kempresa, kproveedor, kproyecto,
   kcentrotareas, etc.) usan el patrón `bg-white rounded-2xl border
   border-slate-200 shadow-sm` que es casi idéntico a .kt-card pero
   con borde border-slate-200 (#e2e8f0) en vez de --kt-gray-light
   (#E8E8E8). Override sutil para coherencia, sin tocar HTML.
   No afecta inputs (no tienen rounded-xl/2xl/3xl).
   ===================================================================== */
@layer utilities {
  div.bg-white.border.border-slate-200:where(.rounded-xl, .rounded-2xl, .rounded-3xl):not(.kt-card):not(.kt-modal-panel),
  section.bg-white.border.border-slate-200:where(.rounded-xl, .rounded-2xl, .rounded-3xl):not(.kt-card):not(.kt-modal-panel) {
    border-color: var(--kt-gray-light);
  }
  div.bg-white.border.border-gray-200:where(.rounded-xl, .rounded-2xl, .rounded-3xl):not(.kt-card):not(.kt-modal-panel),
  section.bg-white.border.border-gray-200:where(.rounded-xl, .rounded-2xl, .rounded-3xl):not(.kt-card):not(.kt-modal-panel) {
    border-color: var(--kt-gray-light);
  }
}

/* =====================================================================
   12. Toasts — utility .kt-toast con animación + override sutil para
   los toasts existentes (id=#toast / #profileToast) que usan el
   patrón TailAdmin "fixed bottom-X right-X bg-white shadow-soft".
   Animación de entrada estandarizada slide-up + fade-in.
   ===================================================================== */
@layer utilities {
  /* Utility opcional para toasts nuevos */
  .kt-toast {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 99999;
    max-width: 24rem;
    background-color: var(--kt-surface);
    border: 1px solid var(--kt-gray-light);
    border-radius: 0.875rem;
    box-shadow: 0 12px 32px -8px rgba(61, 61, 61, 0.18);
    padding: 0.75rem 1rem;
    font-family: var(--font-sans);
    animation: kt-toast-slide-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .dark .kt-toast {
    background-color: var(--kt-surface);
    border-color: var(--kt-border);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
  }

  /* Override no invasivo de los toasts existentes (#toast, #profileToast)
     — añade la misma animación de entrada estandarizada sin tocar HTML. */
  div#toast:not(.hidden),
  div#profileToast:not(.hidden) {
    animation: kt-toast-slide-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes kt-toast-slide-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* =====================================================================
   13. Responsividad fina — utilities opt-in
   ===================================================================== */
@layer utilities {
  /* Asegura tap target mínimo 44x44px (WCAG SC 2.5.5).
     Aplicar a botones icon-only chicos (w-9 h-9, etc.) que necesiten
     un área táctil mayor sin cambiar el tamaño visual del icono. */
  .kt-min-tap {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Tabla → cards apiladas en mobile (<640px). Opt-in.
     El <table> debe tener data-label en cada <td> para mostrar el
     header de la columna en formato card.
     Uso: <table class="kt-table kt-table-stack-mobile"> ... <td data-label="Columna">valor</td> ...
  */
  @media (max-width: 640px) {
    table.kt-table-stack-mobile thead {
      display: none;
    }
    table.kt-table-stack-mobile tr {
      display: block;
      border: 1px solid var(--kt-gray-light);
      border-radius: 0.75rem;
      margin-bottom: 0.75rem;
      padding: 0.5rem;
    }
    table.kt-table-stack-mobile tbody tr + tr td {
      border-top: none;
    }
    table.kt-table-stack-mobile td {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.75rem;
      padding: 0.5rem 0.25rem;
      border: none;
    }
    table.kt-table-stack-mobile td::before {
      content: attr(data-label);
      font-weight: 600;
      color: var(--kt-gray-medium);
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
  }

  /* Inputs en mobile: asegurar font-size 16px para evitar zoom iOS.
     .kt-input ya cumple por default. Esta regla protege a inputs
     legacy que se mantienen sin migrar. */
  @media (max-width: 640px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea,
    select {
      font-size: max(16px, 1em);
    }
  }
}

/* =====================================================================
   14. Dark mode — recalibrado profundo de la paleta gray-* de
   TailAdmin (azul-frío) a tonos cálidos Konstrue (#1A1A1A, #262626).
   Se reasignan las CSS variables que --dark:bg-gray-* consume.
   Aplica automáticamente a TODAS las clases dark:bg-gray-*,
   dark:bg-black, dark:hover:bg-gray-* del HTML existente.
   ===================================================================== */
@layer utilities {
  .dark {
    --color-gray-700: #3D3D3D;  /* surface-2 (grafito) */
    --color-gray-800: #262626;  /* surface cálido principal */
    --color-gray-900: #1A1A1A;  /* fondo body */
    --color-black:    #1A1A1A;  /* dark:bg-black usa el mismo bg */
  }
}