/* ===========================
   styles_variables.css
   Única fuente de verdad de tokens de diseño
   (usado por TODA la app)
   =========================== */


/* ---------------------------------
  Tamaños / espacios de cabeceras
  --------------------------------- */
:root {
  /* Compatibilidad visor_naturaleza */
  --border: #d9dbe1;
  --bg-soft: #f8fafc;
  /* Zebra striping (claro) */
  --table-zebra-odd: #FFFFFF;
  /* fila 1,3,5,... */
  --table-zebra-even: #D6DEEA;
  /* fila 2,4,6,... (más contraste) */

  /* Topbar / header */
  --topbar-h: 48px;
  /* alto topbar */
  --header-h: 95px;
  /* alto combinado título + filtros */
  /* --pie-h se define donde se usa; mantener fallback de 32px */

  /* Tipografías compactas en topbar */
  --topbar-font: var(--fs-xs);
  /* ≈13px */
  --topbar-font-sm: var(--fs-xxs);
  /* ≈12px */

  /* Gaps/paddings */
  --topbar-gap: var(--space-3);
  /* 12px */
  --topbar-pad-x: var(--space-5);
  /* 20px */

  /* Select empresa */
  --topbar-select-minw: 160px;
  --topbar-select-h: 28px;

  /* Íconos (sidebar/topbar) */
  --icon-size: 20px;
  --icon-size-sm: 18px;

  /* Subcontenedor (cabeceras/menús secundarios) */
  --sub-topbar-h: 48px;
  --sub-menu-h: 44px;
  --sub-header-bg: var(--color-bg-2, #f8f9fa);
  --sub-header-border: var(--color-border, #e0e0e0);
  --sub-menu-bg: var(--color-bg-1, #fff);
  --sub-menu-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  --sub-iframe-bg: var(--color-bg-1, #fff);

  /* Densidad para celdas de operaciones */
  --ops-gap: 4px;
  --ops-gap-compact: 3px;
  --ops-row-height: 34px;
}

@media (max-width: 768px) {
  :root {
    --topbar-h: 44px;
    --topbar-pad-x: var(--space-4);
    /* 16px */
    --topbar-select-minw: 140px;
    --icon-size: 18px;
  }
}

/* ---------------------------------
   Paleta base (modo claro por defecto)
   --------------------------------- */
:root {
  --color_black: #000000;

  /* Primarios */
  --color-primary: #5a5c5e;
  --color-primary-600: #606264;
  --color-primary-700: #9399a1;
  --color-secondary: #7c8797;
  --color-accent: #808ea1;

  /* Neutros (Alto Contraste) */
  --color-bg: #FFFFFF;
  --color-surface: #F8F9FA;
  --color-surface-2: #F1F3F5;
  --color-border: #CED4DA;
  --color-border-2: #ADB5BD;

  /* Texto (Alto Contraste - Oscuro sobre Claro) */
  --color-text: #000000;
  --color-text-2: #212529;
  --color-text-3: #495057;
  --color-muted: #6C757D;
  --color-on-primary: #FFFFFF;

  /* Estados */
  --color-success: #059669;
  --color-warning: #D97706;
  --color-danger: #DC2626;
  --color-info: #2563EB;

  /* Zonas estructurales (Alto Contraste) */
  --topbar-bg: #000000;
  --topbar-fg: #FFFFFF;

  /* Sidebar */
  --sidebar-bg: #FFFFFF;
  --sidebar-fg: #000000;
  --sidebar-border: #CED4DA;
  --sidebar-active-bg: #F1F3F5;
  --sidebar-hover-bg: #E9ECEF;
  --sidebar-indicator: #000000;
  --sidebar-width: 260px;
  --sidebar-width-closed: 72px;
  --sidebar-width-mobile: 280px;

  /* Tipografía base */
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  --font-size: 16px;
  --line-height: 1.45;

  /* Escala tipográfica */
  --fs-04: .25rem;
  --fs-05: .3125rem;
  --fs-06: .375rem;
  --fs-07: .4375rem;
  --fs-08: .5rem;
  --fs-09: .5625rem;
  --fs-10: .625rem;
  --fs-11: .6875rem;
  --fs-xxs: .75rem;
  --fs-xs: .8125rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;

  /* Espaciado (escala 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;

  /* Radios & sombras */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 6px rgba(0, 0, 0, .04);
  --shadow-2: 0 3px 8px rgba(0, 0, 0, .08), 0 6px 20px rgba(0, 0, 0, .06);
  --shadow-overlay: 0 10px 40px rgba(0, 0, 0, .25);

  /* Dimensiones controladas */
  --h-input: 35px;
  --h-input-dense: 31px;
  --table-row-height: 31px;

  /* Tablas */
  --table-head-bg: var(--color-surface-2);
  --table-row-alt-bg: #FAFBFC;
  --table-hover-bg: #F2F6FB;
  --table-border: var(--color-border);
  --table-fg: var(--color-text);
  --table-hover-fg: var(--color-text);
  /* Hover de énfasis (acento) */
  --hover-accent: #dff8d3;
  --table-hover-accent: var(--hover-accent);

  /* Dropdowns (autocomplete/menus flotantes) */
  --dropdown-bg: var(--color-surface);
  --dropdown-fg: var(--color-text);
  --dropdown-bd: var(--color-border);
  --dropdown-shadow: 0 10px 28px rgba(0, 0, 0, .18);

  /* Formularios */
  --field-bg: #FFFFFF;
  --field-border: var(--color-border-2);
  --field-border-focus: var(--color-primary);
  --field-outline-focus: color-mix(in srgb, var(--color-primary), #FFFFFF 75%);

  /* Botones (tokens generales) */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-bg-h: var(--color-primary-600);
  --btn-primary-bd: var(--color-primary-700);

  /* Secundario (filtro/ícono por defecto) */
  --btn-secondary-bg: #FFFFFF;
  --btn-secondary-bd: var(--color-border);
  --btn-secondary-fg: var(--color-text);
  --btn-secondary-bg-h: color-mix(in srgb, var(--btn-secondary-bg), var(--color-primary) 6%);
  --btn-secondary-bd-h: color-mix(in srgb, var(--btn-secondary-bd), var(--color-primary) 25%);

  /* Badges / Chips */
  --badge-radius: 999px;
  --badge-pad-v: 2px;
  --badge-pad-h: 8px;

  /* ========= Modales (tokens base) ========= */
  --modal-backdrop: rgba(17, 24, 39, .45);
  --modal-bg: #FFFFFF;
  --modal-border: var(--color-border);
  --modal-radius: var(--radius-sm);
  /* var(--radius-lg);*/
  --modal-shadow: var(--shadow-overlay);
  --modal-max-w: 720px;
  --modal-max-h: 80vh;

  /* Padding genérico body (se mantiene por compatibilidad) */
  --modal-pad-x: var(--space-5);
  --modal-pad-y: var(--space-4);

  /* Tinte de cabecera (franja superior del modal) */
  --modal-header-tint: color-mix(in srgb, var(--color-primary), #61B4FF 35%);
  --modal-header-bg: #EEF1F5;
  --modal-footer-bg: #FFFFFF;

  /* ========= NUEVOS TOKENS de compacidad modal ========= */
  /* Header: controlan la densidad (alto visual) del encabezado del modal */
  --modal-header-py: 4px;
  /* Padding vertical del header del modal. Reduce la altura visual de la franja del título. Usado en .crud-modal__header -> padding */
  --modal-header-px: 14px;
  /* Padding horizontal del header del modal. Da aire a izquierda/derecha del título y botón X */
  --modal-title-size: 0.625rem;
  /* Tamaño de fuente del título del modal. Usado en .crud-modal__header [#crudNuevoTitle/#crudEditarTitle] */
  --modal-title-lh: 1.2;
  /* Line-height del título. Compacta la caja de línea para bajar la altura del header */
  --modal-close-size: 18px;
  /* Tamaño (ancho/alto) del botón de cierre “X”. Usado en .crud-close para hacerlo más pequeño */

  /* Footer: compactan el pie del modal (zona de botones) */
  --modal-footer-py: 10px;
  /* Padding vertical del footer del modal. Reduce altura del pie */
  --modal-footer-px: 14px;
  /* Padding horizontal del footer. Alinea botones sin ocupar mucho ancho */

  /* Botones del modal (footer): densidad/tamaño de acción primaria/secundaria */
  --modal-btn-font-size: 0.625rem;
  /* Tamaño de fuente de los botones del footer (Cancelar/Aceptar/Guardar) */
  --modal-btn-min-h: 24px;
  /* Altura mínima de los botones del footer (compacta respecto a 40–44px) */
  --modal-btn-pad-y: 4px;
  /* Padding vertical interno de los botones. Ajusta “altura percibida” */
  --modal-btn-pad-x: 6px;
  /* Padding horizontal interno de los botones. Ajusta “ancho percibido” */
  --modal-btn-radius: 6px;
  /* Radio de borde de los botones del footer (estética y consistencia con tu UI) */

  /* Transiciones: controlan la suavidad de cambios visuales */
  --transition-fast: .15s ease;
  /* Transición corta para hover/active (botones, iconos) */
  --transition: .25s ease;
  /* Transición general para elementos con movimiento/opacidad (aperturas, sombras) */

  /* Z-index: orden de apilamiento para que modales y notificaciones estén por sobre dropdowns/tablas */
  --z-topbar: 50;
  /* Barra superior (si aplica) por sobre layout base */
  --z-sidebar: 40;
  /* Sidebar por debajo de topbar pero sobre contenido */
  --z-dropdown: 900;
  /* Menús flotantes/autocomplete por encima de layout normal */
  --z-modal: 1000;
  /* Modal y backdrop por encima de dropdowns */
  --z-notify: 1100;
  /* Notificaciones (Swal/toasts) por encima del modal si corresponde */

  /* Breakpoints: referencias centralizadas para media queries coherentes en toda la app */
  --bp-xl: 1280px;
  /* Corte “XL” (desktop ancho) */
  --bp-lg: 1024px;
  /* Corte “LG” (desktop estándar) */
  --bp-md: 768px;
  /* Corte “MD” (tablet) */
  --bp-md2: 350px;
  /* Corte extra para móviles muy pequeños (ancho mínimo crítico) */
  --bp-sm: 480px;
  /* Corte “SM” (móvil típico) */

  /* Tokens base para botones ícono: controlan apariencia de .boton_icono y variantes */
  --icon-button-bg: var(--btn-secondary-bg);
  /* Fondo base de botones de ícono (Excel, QR, Editar, etc.) */
  --icon-button-fg: var(--btn-secondary-fg);
  /* Color del icono (fill/text) en botones de ícono */
  --icon-button-bd: var(--btn-secondary-bd);
  /* Borde de botones de ícono (delimita en temas claros/osc.) */
}

@media (prefers-color-scheme: dark) {

  /* ---------------------------------
    Tema oscuro (auto por preferencia SO)
    --------------------------------- */
  :root[data-theme="auto"],
  :root:not([data-theme]) {
    --border: #343A40;
    --bg-soft: #121212;
    --color-bg: #000000;
    --color-surface: #121212;
    --color-surface-2: #1E1E1E;
    --color-border: #343A40;
    --color-border-2: #495057;

    --color-text: #FFFFFF;
    --color-text-2: #F8F9FA;
    --color-text-3: #E9ECEF;
    --color-muted: #ADB5BD;

    --topbar-bg: #000000;
    --topbar-fg: #FFFFFF;

    /* Subcontenedor */
    --sub-header-bg: var(--color-surface, #151820);
    --sub-header-border: var(--color-border, #2A3142);
    --sub-menu-bg: var(--color-surface-2, #1B2030);
    --sub-menu-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
    --sub-iframe-bg: var(--color-bg, #0F1115);

    /* Sidebar oscuro */
    --sidebar-bg: #000000;
    --sidebar-fg: #FFFFFF;
    --sidebar-border: #343A40;
    --sidebar-active-bg: #212529;
    --sidebar-hover-bg: #343A40;
    --sidebar-indicator: #FFFFFF;

    /* Zebra (oscuro auto) */
    --table-zebra-odd: #232A36;
    --table-zebra-even: #101218;

    /* Tablas */
    --table-head-bg: #1B2030;
    --table-row-alt-bg: #141925;
    --table-hover-bg: #1C2334;
    --table-fg: var(--color-text);
    --table-hover-fg: var(--color-text);

    /* Hover alternativo (acento) */
    --hover-accent: #dff8d3;
    --table-hover-accent: var(--hover-accent);

    /* Formularios */
    --field-bg: #141925;

    /* Modales */
    --modal-bg: #151820;
    --modal-header-bg: #1B2030;
    --modal-footer-bg: #151820;
    /* Cabecera modal (franja) en oscuro auto */
    --modal-header-tint: color-mix(in srgb, var(--color-primary), #3B82F6 22%);

    /* Botón secundario adaptado a oscuro */
    --btn-secondary-bg: #1B2030;
    --btn-secondary-bd: var(--color-border);
    --btn-secondary-fg: var(--color-text);
    --btn-secondary-bg-h: color-mix(in srgb, var(--btn-secondary-bg), #ffffff 6%);
    --btn-secondary-bd-h: color-mix(in srgb, var(--btn-secondary-bd), #ffffff 20%);

    /* Botón ícono */
    --icon-button-bg: var(--btn-secondary-bg);
    --icon-button-fg: var(--btn-secondary-fg);
    --icon-button-bd: var(--btn-secondary-bd);

    /* Dropdowns en auto oscuro */
    --dropdown-bg: var(--color-surface);
    --dropdown-fg: var(--color-text);
    --dropdown-bd: var(--color-border);
  }
}

:root[data-theme="dark"],
:root[data-theme="oscuro"] {
  /* ---------------------------------
    Tema oscuro explícito (data-theme="dark")
    --------------------------------- */
  --border: #343A40;
  --bg-soft: #121212;
  /* Zebra (oscuro) */
  --table-zebra-odd: #1A1A1A;
  --table-zebra-even: #0D0D0D;

  --color-bg: #000000;
  --color-surface: #121212;
  --color-surface-2: #1E1E1E;
  --color-border: #343A40;
  --color-border-2: #495057;

  --color-text: #FFFFFF;
  --color-text-2: #F8F9FA;
  --color-text-3: #E9ECEF;
  --color-muted: #ADB5BD;

  --topbar-bg: #000000;
  --topbar-fg: #FFFFFF;

  /* Sidebar oscuro */
  --sidebar-bg: #000000;
  --sidebar-fg: #FFFFFF;
  --sidebar-border: #343A40;
  --sidebar-active-bg: #212529;
  --sidebar-hover-bg: #343A40;
  --sidebar-indicator: #FFFFFF;

  /* Subcontenedor */
  --sub-header-bg: var(--color-surface, #151820);
  --sub-header-border: var(--color-border, #2A3142);
  --sub-menu-bg: var(--color-surface-2, #1B2030);
  --sub-menu-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  --sub-iframe-bg: var(--color-bg, #0F1115);

  /* Tablas */
  --table-head-bg: #1B2030;
  --table-row-alt-bg: #141925;
  --table-hover-bg: #1C2334;
  --table-fg: var(--color-text);
  --table-hover-fg: var(--color-text);

  /* Hover alternativo (acento) */
  --hover-accent: #dff8d3;
  --table-hover-accent: var(--hover-accent);

  /* Formularios */
  --field-bg: #141925;

  /* Modales */
  --modal-bg: #151820;
  --modal-header-bg: #1B2030;
  --modal-footer-bg: #151820;
  /* Cabecera modal (franja) en oscuro explícito */
  --modal-header-tint: color-mix(in srgb, var(--color-primary), #3B82F6 22%);

  /* Botón secundario */
  --btn-secondary-bg: #1B2030;
  --btn-secondary-bd: var(--color-border);
  --btn-secondary-fg: var(--color-text);
  --btn-secondary-bg-h: color-mix(in srgb, var(--btn-secondary-bg), #ffffff 6%);
  --btn-secondary-bd-h: color-mix(in srgb, var(--btn-secondary-bd), #ffffff 20%);

  /* Botón ícono */
  --icon-button-bg: var(--btn-secondary-bg);
  --icon-button-fg: var(--btn-secondary-fg);
  --icon-button-bd: var(--btn-secondary-bd);

  /* Dropdowns en oscuro explícito */
  --dropdown-bg: var(--color-surface);
  --dropdown-fg: var(--color-text);
  --dropdown-bd: var(--color-border);
}

/* ===== Accesibilidad móvil para botones de modal ===== */
@media (max-width: 480px) {
  :root {
    --modal-btn-min-h: 38px;
    --modal-btn-font-size: 0.9rem;
  }
}