/* ════════════════════════════════════════════════════════════════════
   Diseño "Mac" sobre la marca V2C -- a petición expresa del usuario
   01/10/2026: "mejorar el diseño en todos los link, diseño mac, pero
   manteniendo el formato de v2c, rollo los bordes, desplegables... todo
   tal cual como mac".

   Se mantiene de V2C: la paleta blanco/negro/grises (ningún color de
   acento nuevo -- el acento de macOS aquí es el negro V2C, como el acento
   "Grafito" de macOS), el logo, la estructura y Montserrat (en un Mac se
   ve con la tipografía del sistema, San Francisco).
   Se toma de macOS: esquinas, materiales translúcidos, sombras suaves,
   menús desplegables con resaltado redondeado, selectores con la doble
   flecha, casillas, interruptores, anillo de foco, botones de pulsar,
   hojas modales y barras de desplazamiento finas.

   Todo va bajo html.mac (layout.html y las páginas sueltas lo ponen en la
   etiqueta <html>): esa especificidad hace que mande sobre los <style> de
   cada sección, que se cargan después, sin tocar una sola plantilla.
   ════════════════════════════════════════════════════════════════════ */

html.mac {
  /* Tokens de V2C (los usan decenas de componentes) con geometría Mac */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --v2c-bg: #F2F2F0;
  /* Grises de texto secundario un punto más oscuros: los de V2C
     (#7A7A78 / #A9A9A7) se quedaban en 3,8-4,3 de contraste sobre el
     fondo, por debajo del 4,5 de WCAG AA para texto pequeño (medido en
     las capturas). Siguen siendo los mismos grises neutros. */
  --v2c-muted: #686866;
  --slate-500: #6B6B69;

  /* Enlaces en el negro V2C, no en el azul por defecto de Bootstrap
     (color ajeno a la marca y con 4,0 de contraste sobre el fondo). */
  --bs-link-color: #1F1F1F;
  --bs-link-color-rgb: 31, 31, 31;
  --bs-link-hover-color: #000;
  --bs-link-hover-color-rgb: 0, 0, 0;

  /* Superficies y sombras macOS: borde capilar + sombra difusa */
  --mac-linea: rgba(0, 0, 0, .09);
  --mac-linea-fuerte: rgba(0, 0, 0, .16);
  --mac-sombra-ventana: 0 0 0 .5px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px rgba(0, 0, 0, .04);
  --mac-sombra-ventana-hover: 0 0 0 .5px rgba(0, 0, 0, .06), 0 2px 4px rgba(0, 0, 0, .06), 0 10px 28px rgba(0, 0, 0, .07);
  --mac-sombra-menu: 0 0 0 .5px rgba(0, 0, 0, .12), 0 4px 10px rgba(0, 0, 0, .08), 0 14px 36px rgba(0, 0, 0, .14);
  --mac-sombra-hoja: 0 0 0 .5px rgba(0, 0, 0, .12), 0 12px 30px rgba(0, 0, 0, .14), 0 30px 80px rgba(0, 0, 0, .22);
  --mac-sombra-control: 0 .5px 1px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04);
  --mac-acento: #1F1F1F;
  --mac-resaltado: rgba(28, 28, 28, .86);
  --mac-foco: 0 0 0 3.5px rgba(31, 31, 31, .22);
  --mac-vidrio-claro: rgba(251, 251, 250, .84);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-sm: var(--mac-sombra-ventana);
  --shadow-md: var(--mac-sombra-ventana-hover);
  --shadow-lg: var(--mac-sombra-menu);
  --shadow-xl: var(--mac-sombra-hoja);

  /* Bootstrap lee estas variables en todos sus componentes */
  --bs-border-radius: 6px;
  --bs-border-radius-sm: 5px;
  --bs-border-radius-lg: 9px;
  --bs-border-radius-xl: 12px;
  --bs-border-radius-xxl: 16px;
  --bs-border-color: var(--mac-linea-fuerte);
  --bs-focus-ring-color: rgba(31, 31, 31, .22);
}

/* ── Tipografía: San Francisco en un Mac, Montserrat (V2C) en el resto ── */
/* (Sin tocar el fondo del body: las páginas del layout ya lo pintan con
   --v2c-bg, y las sueltas -- pago público, portales -- tienen el suyo.) */
html.mac body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", 'Montserrat', Arial, Helvetica, system-ui, sans-serif;
  letter-spacing: -.003em;
}
html.mac h1, html.mac h2, html.mac h3, html.mac h4, html.mac h5, html.mac h6,
html.mac .page-title, html.mac .kpi-value, html.mac .exec-kpi-val {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", 'Montserrat', Arial, Helvetica, system-ui, sans-serif;
}
html.mac ::selection { background: rgba(31, 31, 31, .18); }

/* ── Barras de desplazamiento finas y "flotantes" como en macOS ── */
html.mac * { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .28) transparent; }
html.mac ::-webkit-scrollbar { width: 11px; height: 11px; }
html.mac ::-webkit-scrollbar-track { background: transparent; }
html.mac ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .24); border-radius: 8px;
  border: 3px solid transparent; background-clip: content-box;
}
html.mac ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .40); background-clip: content-box; }
html.mac ::-webkit-scrollbar-corner { background: transparent; }

/* ════════════════════════════════════════════════════════════════════
   Barra lateral: el negro V2C como "vidrio" oscuro de macOS
   ════════════════════════════════════════════════════════════════════ */
/* Negro V2C sólido: el "vidrio" translúcido sobre el fondo claro la
   aclaraba a gris carbón (#2A2A2A medido en las capturas) y se perdía la
   marca; detrás de la barra no hay nada que transparentar. */
html.mac .sidebar {
  background: #0E0E0E;
  border-right: 1px solid rgba(255, 255, 255, .06);
}
html.mac .sidebar-section-label { color: rgba(255, 255, 255, .5); }
html.mac .sidebar-brand .sep { color: rgba(255, 255, 255, .4); }
html.mac .sidebar-scroll-wrap, html.mac .sidebar-nav { padding-left: .55rem; padding-right: .55rem; }
html.mac .sidebar ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); background-clip: content-box; }
html.mac .sidebar * { scrollbar-color: rgba(255, 255, 255, .25) transparent; }
html.mac .sidebar-link, html.mac .sidebar-sublink {
  border-radius: 7px;
  transition: background .12s ease, color .12s ease;
}
html.mac .sidebar-link { padding: .42rem .6rem; }
html.mac .sidebar-sublink { padding-top: .36rem; padding-bottom: .36rem; }
html.mac .sidebar-link:hover, html.mac .sidebar-sublink:hover { background: rgba(255, 255, 255, .08); }
/* Selección: rectángulo redondeado relleno, como la fila elegida en Finder */
html.mac .sidebar-link.active { background: rgba(255, 255, 255, .94); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
html.mac .sidebar-sublink.active { background: rgba(255, 255, 255, .15); }
html.mac .sidebar-link:hover i, html.mac .sidebar-sublink:hover i { transform: none; }
html.mac .sidebar-brand, html.mac .sidebar-footer { border-color: rgba(255, 255, 255, .07); }
html.mac .sidebar-user { border-radius: 7px; }
html.mac .topbar {
  background: rgba(14, 14, 14, .94);
  backdrop-filter: saturate(170%) blur(24px);
  -webkit-backdrop-filter: saturate(170%) blur(24px);
}
html.mac .sidebar-toggle { border-radius: 7px; }

/* ════════════════════════════════════════════════════════════════════
   Tarjetas y contenedores: "ventanas" con borde capilar y sombra suave
   ════════════════════════════════════════════════════════════════════ */
/* Definición base de las tarjetas compartidas para las páginas que no
   cargan la hoja de su sección (Correo de proveedores, Producción >
   Análisis, Lugenergy > Pagos, Fiscal, Inventario...): sin esto quedaban
   como un bloque sin fondo con sombra flotando. :where() deja la
   especificidad en la de una clase, así que donde la sección sí las
   define, su <style> (que va después) sigue mandando. Es la misma
   definición que tienen en cobros/_shared_estilos.html y en las 9 hojas
   que definen .report-table-wrap; solo cambia que aquí la tabla ancha
   se desplaza en vez de cortarse. */
:where(html.mac) .report-table-wrap { background: #fff; border: 1px solid var(--mac-linea); overflow-x: auto; }
:where(html.mac) .db-card { background: #fff; border: 1px solid var(--mac-linea); overflow: hidden; }
:where(html.mac) .db-card-hdr {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
  padding: .85rem 1.2rem;
}
:where(html.mac) .db-card-title { font-size: .86rem; font-weight: 700; color: var(--slate-800); display: flex; align-items: center; gap: .4rem; }
:where(html.mac) .db-card-body { padding: 1rem 1.2rem; }

/* .card solo dentro de la app (.app-shell): la página pública de pago usa
   una .card propia con su sombra de ventana flotante, que se respeta. */
html.mac .app-shell .card, html.mac .kpi-card, html.mac .stat-card, html.mac .bank-card,
html.mac .db-card, html.mac .exec-kpi, html.mac .report-table-wrap, html.mac .nav-card,
html.mac .list-group {
  border-color: var(--mac-linea);
  border-radius: 12px;
  box-shadow: var(--mac-sombra-ventana);
}
html.mac .stat-card { border-left-width: 3px; }
html.mac .app-shell .card:hover, html.mac .kpi-card:hover, html.mac .stat-card:hover, html.mac .bank-card:hover {
  transform: none;
  box-shadow: var(--mac-sombra-ventana-hover);
}
html.mac .nav-card:hover:not(.nav-card-soon) { box-shadow: var(--mac-sombra-ventana-hover); }
html.mac .app-shell .card-header, html.mac .db-card-hdr, html.mac .bank-card-header {
  background: rgba(248, 248, 247, .9);
  border-bottom-color: var(--mac-linea);
}
html.mac .app-shell .card-header { border-radius: 12px 12px 0 0 !important; }
html.mac .app-shell .card-footer { background: rgba(248, 248, 247, .9); border-top-color: var(--mac-linea); }
html.mac .hero-band { border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
html.mac .info-box, html.mac pre.calc { border-radius: 10px; }
html.mac .page-header { border-bottom-color: var(--mac-linea); }
html.mac .tl-icon-wrap, html.mac .bank-icon { border-radius: 9px; }
html.mac .empty-state i { opacity: .7; }

/* ════════════════════════════════════════════════════════════════════
   Botones de pulsar (macOS): blanco con sombra fina; el principal relleno
   con el negro V2C. Sin "saltos" al pasar el ratón: en macOS el botón se
   oscurece al pulsarlo, no se mueve.
   ════════════════════════════════════════════════════════════════════ */
html.mac .btn {
  --bs-btn-border-radius: 7px;
  --bs-btn-font-weight: 500;
  --bs-btn-font-size: .85rem;
  --bs-btn-padding-y: .36rem;
  --bs-btn-padding-x: .85rem;
  transform: none !important;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
}
html.mac .btn-sm { --bs-btn-border-radius: 6px; --bs-btn-font-size: .78rem; --bs-btn-padding-y: .22rem; --bs-btn-padding-x: .62rem; }
html.mac .btn-lg { --bs-btn-border-radius: 9px; }
html.mac .btn:focus-visible { box-shadow: var(--mac-foco); outline: none; }

html.mac .btn-outline-secondary, html.mac .btn-outline-dark, html.mac .btn-light,
html.mac .btn-outline-primary, html.mac .btn-secondary {
  background-color: #fff;
  border: 1px solid var(--mac-linea-fuerte);
  color: #1F1F1F;
  box-shadow: var(--mac-sombra-control);
}
html.mac .btn-outline-secondary:hover, html.mac .btn-outline-dark:hover, html.mac .btn-light:hover,
html.mac .btn-outline-primary:hover, html.mac .btn-secondary:hover {
  background-color: #F7F7F6; border-color: rgba(0, 0, 0, .2); color: #0E0E0E;
}
html.mac .btn-outline-secondary:active, html.mac .btn-outline-dark:active, html.mac .btn-light:active,
html.mac .btn-outline-primary:active, html.mac .btn-secondary:active,
html.mac .btn-check:checked + .btn-outline-secondary, html.mac .btn-check:checked + .btn-outline-dark {
  background-color: #E9E9E7; border-color: rgba(0, 0, 0, .22); color: #0E0E0E; box-shadow: none;
}
html.mac .btn-dark, html.mac .btn-primary {
  background-color: #1C1C1C;
  background-image: linear-gradient(to bottom, #2E2E2E, #161616);
  border: 1px solid #0E0E0E;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .22), inset 0 .5px 0 rgba(255, 255, 255, .14);
}
html.mac .btn-dark:hover, html.mac .btn-primary:hover { background-image: linear-gradient(to bottom, #383838, #1C1C1C); color: #fff; }
html.mac .btn-dark:active, html.mac .btn-primary:active { background-image: none; background-color: #050505; }
html.mac .btn-success, html.mac .btn-danger, html.mac .btn-warning, html.mac .btn-info {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), inset 0 .5px 0 rgba(255, 255, 255, .16);
}
html.mac .btn-outline-success, html.mac .btn-outline-danger, html.mac .btn-outline-warning {
  background-color: #fff; box-shadow: var(--mac-sombra-control);
}
html.mac .btn-outline-success:hover { background-color: #F3FAF6; color: var(--success); }
html.mac .btn-outline-danger:hover { background-color: #FEF5F4; color: var(--danger); }
html.mac .btn-link {
  --bs-btn-color: #1F1F1F; --bs-btn-hover-color: #000; --bs-btn-active-color: #000;
  box-shadow: none; text-underline-offset: 2px; text-decoration-color: rgba(0, 0, 0, .3);
}
/* Botones de los módulos React (Cashflow, Tableros...): son enlaces con
   clases de Tailwind y heredaban el subrayado de los enlaces de Bootstrap
   ("Actualizar" salía subrayado). */
html.mac a[class*="tw-rounded"], html.mac a[class*="tw-border"] { text-decoration: none; }
html.mac a.tw-rounded-lg.tw-border.tw-px-3 {
  border-radius: 7px; border-color: var(--mac-linea-fuerte); box-shadow: var(--mac-sombra-control);
  transition: background-color .12s ease;
}
html.mac .btn:disabled, html.mac .btn.disabled { opacity: .45; box-shadow: none; }
/* Grupos de botones = control segmentado de macOS */
html.mac .btn-group { border-radius: 7px; box-shadow: var(--mac-sombra-control); }
html.mac .btn-group > .btn { box-shadow: none; }
/* Grupo de opciones (radios .btn-check): carril gris con la elegida como
   pastilla blanca, como el control segmentado de macOS y las .nav-pills. */
html.mac .btn-group:has(> .btn-check) {
  background: rgba(0, 0, 0, .065); border-radius: 8px; padding: 2px; gap: 2px;
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .05);
}
html.mac .btn-group:has(> .btn-check) > .btn {
  border: 0; border-radius: 6px !important; margin-left: 0 !important;
  background: transparent; box-shadow: none; color: var(--slate-700);
}
html.mac .btn-group:has(> .btn-check) > .btn:hover { background: rgba(0, 0, 0, .045); color: #0E0E0E; }
html.mac .btn-group:has(> .btn-check) > .btn-check:checked + .btn {
  background: #fff; color: #0E0E0E; box-shadow: 0 1px 2px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .06);
}
html.mac .btn-group:has(> .btn-check) > .btn-check:focus-visible + .btn { box-shadow: var(--mac-foco); }

/* ════════════════════════════════════════════════════════════════════
   Campos de texto, selectores ("pop-up" con doble flecha), casillas e
   interruptores
   ════════════════════════════════════════════════════════════════════ */
html.mac .form-control, html.mac .form-select {
  border: 1px solid var(--mac-linea-fuerte);
  border-radius: 6px;
  background-color: #fff;
  box-shadow: inset 0 .5px 1px rgba(0, 0, 0, .06);
  transition: border-color .12s ease, box-shadow .12s ease;
}
html.mac .form-control-sm, html.mac .form-select-sm { border-radius: 5px; }
html.mac .form-control-lg, html.mac .form-select-lg { border-radius: 8px; }
html.mac .form-control:focus, html.mac .form-select:focus {
  border-color: rgba(31, 31, 31, .55);
  box-shadow: var(--mac-foco);
}
html.mac .form-control:disabled, html.mac .form-select:disabled, html.mac .form-control[readonly] {
  background-color: #F5F5F4; color: var(--slate-500);
}
html.mac .form-control::placeholder { color: #A9A9A7; }
html.mac .input-group-text {
  background: #F5F5F4; border-color: var(--mac-linea-fuerte); color: var(--slate-600);
}
html.mac .form-label { font-weight: 600; font-size: .78rem; color: var(--slate-700); margin-bottom: .3rem; }

/* Selector como el botón emergente de macOS: el control blanco con el
   cuadradito oscuro y la doble flecha a la derecha. */
html.mac .form-select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='18' viewBox='0 0 16 18'%3e%3crect width='16' height='18' rx='4.5' fill='%231F1F1F'/%3e%3cpath d='M5 7.25 8 4.5l3 2.75M5 10.75 8 13.5l3-2.75' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 3px center;
  background-size: 16px 18px;
  padding-right: 1.95rem;
  box-shadow: var(--mac-sombra-control);
  cursor: pointer;
}
html.mac .form-select-sm:not([multiple]):not([size]) {
  background-size: 14px 15px; background-position: right 3px center; padding-right: 1.65rem;
}
html.mac .form-select:not([multiple]):not([size]):focus { box-shadow: var(--mac-foco); }
html.mac .form-select:not([multiple]):not([size]):disabled {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='18' viewBox='0 0 16 18'%3e%3crect width='16' height='18' rx='4.5' fill='%23B5B5B3'/%3e%3cpath d='M5 7.25 8 4.5l3 2.75M5 10.75 8 13.5l3-2.75' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  cursor: default;
}

html.mac .form-check-input {
  border: 1px solid rgba(0, 0, 0, .26);
  box-shadow: inset 0 .5px 1px rgba(0, 0, 0, .08);
  cursor: pointer;
}
html.mac .form-check-input[type="checkbox"] { border-radius: 4px; }
html.mac .form-check-input:checked, html.mac .form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--mac-acento);
  border-color: var(--mac-acento);
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .15);
}
html.mac .form-check-input:focus { border-color: rgba(31, 31, 31, .55); box-shadow: var(--mac-foco); }
html.mac .form-check-input:disabled { opacity: .4; cursor: default; }
/* Interruptor de macOS: carril gris que se rellena de negro, bola blanca */
html.mac .form-switch .form-check-input {
  width: 2.15em; height: 1.2em; margin-top: .15em;
  border: none; border-radius: 1em;
  background-color: #D9D9D7;
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .1);
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.3' fill='%23fff' stroke='rgba(0,0,0,0.14)' stroke-width='.35'/%3e%3c/svg%3e");
}
html.mac .form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.3' fill='%23fff' stroke='rgba(0,0,0,0.14)' stroke-width='.35'/%3e%3c/svg%3e");
}
html.mac .form-switch .form-check-input:checked { background-color: var(--mac-acento); }

/* ════════════════════════════════════════════════════════════════════
   Menús desplegables: material translúcido, esquinas de 9px y la fila
   resaltada como un rectángulo redondeado (el gesto más "Mac" de todos)
   ════════════════════════════════════════════════════════════════════ */
html.mac .dropdown-menu {
  --bs-dropdown-link-active-bg: var(--mac-resaltado);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-hover-bg: var(--mac-resaltado);
  --bs-dropdown-link-hover-color: #fff;
  background: var(--mac-vidrio-claro);
  backdrop-filter: saturate(180%) blur(30px);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  border: none;
  border-radius: 9px;
  box-shadow: var(--mac-sombra-menu);
  padding: 5px;
  font-size: .82rem;
  min-width: 11rem;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.mac .dropdown-menu { background: #FBFBFA; }
}
html.mac .dropdown-item {
  border-radius: 5px;
  padding: .3rem .65rem;
  color: #1F1F1F;
  display: flex; align-items: center; gap: .45rem;
}
html.mac .dropdown-item:hover, html.mac .dropdown-item:focus, html.mac .dropdown-item.active,
html.mac .dropdown-item:active {
  background-color: var(--mac-resaltado);
  color: #fff;
}
html.mac .dropdown-item:hover i, html.mac .dropdown-item:focus i, html.mac .dropdown-item.active i { color: #fff !important; }
html.mac .dropdown-item.disabled, html.mac .dropdown-item:disabled { color: #B5B5B3; background: transparent; }
html.mac .dropdown-divider { margin: 4px 6px; border-top-color: rgba(0, 0, 0, .1); opacity: 1; }
html.mac .dropdown-header { font-size: .7rem; font-weight: 600; color: rgba(0, 0, 0, .58); padding: .3rem .65rem .2rem; }
html.mac .dropdown-menu-dark {
  --bs-dropdown-link-hover-bg: rgba(255, 255, 255, .16);
  --bs-dropdown-link-active-bg: rgba(255, 255, 255, .2);
  background: rgba(36, 36, 36, .9);
}
html.mac .dropdown-menu-dark .dropdown-item { color: rgba(255, 255, 255, .88); }

/* ════════════════════════════════════════════════════════════════════
   Ventanas emergentes (modales) como hojas de macOS
   ════════════════════════════════════════════════════════════════════ */
html.mac .modal-content {
  background: rgba(252, 252, 251, .95);
  backdrop-filter: saturate(180%) blur(30px);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  border: none;
  border-radius: 12px;
  box-shadow: var(--mac-sombra-hoja);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.mac .modal-content { background: #FCFCFB; }
}
html.mac .modal-header { border-bottom: 1px solid rgba(0, 0, 0, .06); }
html.mac .modal-header .modal-title { font-size: 1rem; font-weight: 700; }
html.mac .modal-footer { border-top: 1px solid rgba(0, 0, 0, .06); background: rgba(246, 246, 245, .6); }
html.mac .modal-backdrop { --bs-backdrop-opacity: .22; }
html.mac .modal.fade .modal-dialog { transform: scale(.97); transition: transform .18s ease-out, opacity .18s ease-out; }
html.mac .modal.show .modal-dialog { transform: none; }
html.mac .btn-close { border-radius: 50%; opacity: .45; }
html.mac .btn-close:hover { opacity: .8; }

/* Avisos de Bootstrap y burbujas de ayuda */
html.mac .tooltip { --bs-tooltip-bg: #F8F8F7; --bs-tooltip-color: #1F1F1F; --bs-tooltip-opacity: 1; }
html.mac .tooltip-inner {
  border-radius: 6px; font-size: .74rem; padding: .3rem .55rem; text-align: left;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 3px 10px rgba(0, 0, 0, .12);
}
html.mac .popover {
  --bs-popover-border-radius: 10px; --bs-popover-border-color: rgba(0, 0, 0, .1);
  box-shadow: var(--mac-sombra-menu);
}

/* ════════════════════════════════════════════════════════════════════
   Tablas (vista de lista de macOS), cápsulas y avisos
   ════════════════════════════════════════════════════════════════════ */
html.mac .ft thead th, html.mac .table > thead > tr > th {
  background: rgba(247, 247, 246, .95);
  border-bottom: 1px solid var(--mac-linea);
  color: var(--slate-500);
}
html.mac .ft tbody td { border-bottom-color: rgba(0, 0, 0, .05); }
html.mac .ft tbody tr:hover td { background: rgba(0, 0, 0, .025); }
html.mac .table { --bs-table-border-color: rgba(0, 0, 0, .06); --bs-table-hover-bg: rgba(0, 0, 0, .025); }
/* Fechas y datos secundarios de las tablas: #A9A9A7 sobre blanco daba
   2,3 de contraste, ilegible para texto pequeño. */
html.mac .ft .muted, html.mac td.small.muted { color: #737371; }
/* Celda de acciones con class="d-flex" (6 tablas: Subcontratas, Pagos
   Lugenergy, Gestión Proveedores, Solicitudes de pago, RRHH, Auro): una
   celda flex deja de ser celda -- se cortaba el borde de la fila y los
   botones ("Ver"...) quedaban partidos o fuera de la tabla. */
html.mac table td.d-flex { display: table-cell !important; white-space: nowrap; }
html.mac table td.d-flex > * { display: inline-block; vertical-align: middle; margin: 0; }
html.mac table td.d-flex > * + * { margin-left: .25rem; }
/* Subcontratas: las cabeceras largas en una línea ensanchaban la tabla
   más que su tarjeta y la columna de acciones quedaba cortada. */
html.mac table[id^="scTabla"] thead th { white-space: normal; vertical-align: bottom; }

html.mac .pill, html.mac .badge, html.mac .nav-card-badge { border-radius: 999px !important; }
html.mac .badge { font-weight: 600; }
html.mac a.pill:hover, html.mac button.pill:hover, html.mac .pill[role="button"]:hover { transform: none; filter: brightness(.97); }

html.mac .alert { border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); }

/* Pestañas, paginación, barras de progreso, listas */
html.mac .nav-pills {
  background: rgba(0, 0, 0, .055); border-radius: 8px; padding: 2px; display: inline-flex; gap: 2px;
}
html.mac .nav-pills .nav-link { border-radius: 6px; padding: .28rem .8rem; color: var(--slate-700); font-weight: 500; }
html.mac .nav-pills .nav-link.active, html.mac .nav-pills .show > .nav-link {
  background: #fff; color: #0E0E0E; box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04);
}
html.mac .nav-tabs { border-bottom-color: var(--mac-linea); }
html.mac .nav-tabs .nav-link { border-radius: 7px 7px 0 0; }
html.mac .pagination { --bs-pagination-border-radius: 7px; --bs-pagination-active-bg: var(--mac-acento); --bs-pagination-active-border-color: var(--mac-acento); --bs-pagination-color: #1F1F1F; }
html.mac .progress { --bs-progress-border-radius: 999px; --bs-progress-bar-bg: var(--mac-acento); height: .45rem; background: rgba(0, 0, 0, .07); }
html.mac .list-group { --bs-list-group-border-color: var(--mac-linea); --bs-list-group-active-bg: var(--mac-resaltado); --bs-list-group-active-border-color: transparent; overflow: hidden; }

/* ════════════════════════════════════════════════════════════════════
   Buscador (Ctrl+K) como Spotlight y avisos flotantes como las
   notificaciones de macOS
   ════════════════════════════════════════════════════════════════════ */
html.mac .cmdk-item { border-radius: 7px; }
html.mac .cmdk-item-activo { background: var(--mac-resaltado) !important; color: #fff !important; }
html.mac .cmdk-item-activo .cmdk-item-sub, html.mac .cmdk-item-activo .cmdk-item-nombre { color: #fff !important; }
html.mac .toast-item {
  border-radius: 14px !important;
  background: rgba(251, 251, 250, .9) !important;
  backdrop-filter: saturate(180%) blur(26px);
  -webkit-backdrop-filter: saturate(180%) blur(26px);
  box-shadow: var(--mac-sombra-menu) !important;
}

/* ── Movimiento: macOS no "levanta" tarjetas ni desplaza iconos al pasar
   el ratón; la entrada de cada página se queda, muy suave. ── */
html.mac .sidebar-link i, html.mac .sidebar-sublink i { transition: none; }

/* ════════════════════════════════════════════════════════════════════
   Animaciones e interacciones (02/10/2026, a petición expresa del
   usuario: "pon animaciones, mejora el diseño, interacciones"). Mismo
   espíritu que el resto del archivo: nada se "levanta" al pasar el ratón
   -- cada gesto (pulsar, aparecer, marcar) tiene una respuesta breve y
   clara, como en macOS de verdad, y todo respeta prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════ */

/* Enlaces de texto sueltos (fuera de .btn, que ya tenía transición):
   el color entra suave, y el foco por teclado se ve consistente en vez
   del azul por defecto del navegador. */
html.mac a:not(.btn):not(.pill):not(.dropdown-item):not(.nav-link) { transition: color .1s ease; }
html.mac a:focus-visible, html.mac button:focus-visible {
  outline: 2px solid rgba(31, 31, 31, .35); outline-offset: 2px; border-radius: 3px;
}

/* El interruptor se desliza en vez de cambiar de golpe, como en macOS/iOS */
html.mac .form-switch .form-check-input {
  transition: background-color .18s ease, background-position .22s cubic-bezier(.34, 1.25, .64, 1), box-shadow .12s ease;
}
html.mac .form-check-input {
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

/* Filas de tabla: el resaltado entra suave, no de golpe */
html.mac .ft tbody tr td, html.mac .table tbody tr td { transition: background-color .1s ease; }

/* Pestañas y cápsulas de filtro: el fondo activo también entra suave */
html.mac .nav-pills .nav-link, html.mac .nav-tabs .nav-link, html.mac .sf-chip, html.mac .page-link {
  transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}

@media (prefers-reduced-motion: no-preference) {
  /* Pulsar: un golpe de tecla breve (lo que SÍ hace un botón real de
     macOS), nunca el rebote al pasar el ratón, que sigue desactivado
     arriba. Se junta con la transición de color/fondo que .btn ya tenía. */
  html.mac .btn:not(:disabled):not(.disabled):active {
    transform: scale(.975) !important;
    transition: transform .08s ease, background-color .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
  }
  html.mac .pill[role="button"]:active, html.mac a.pill:active, html.mac button.pill:active,
  html.mac .sf-chip:active, html.mac .btn-close:active {
    transform: scale(.94);
  }

  /* La página aparece como una ventana real de macOS al abrirse: un
     fundido breve con una leve subida en los bloques de primer nivel del
     contenido -- una sola vez por carga, no en cada fila de una tabla. */
  html.mac main.container-fluid > * {
    animation: mac-aparece .32s cubic-bezier(.2, .8, .3, 1) backwards;
  }
}

@keyframes mac-aparece {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Animaciones de cabecera por sección (ver templates/_anim_cabecera.html):
   el contenedor común, un SVG de 48x48 escalado a 52px, con lo que entre o
   no en cada página. */
.cab-anim { width: 52px; height: 52px; flex-shrink: 0; }
.cab-anim svg { display: block; width: 100%; height: 100%; }
@media (max-width: 575.98px) { .cab-anim { width: 40px; height: 40px; } }

@media print {
  html.mac .card, html.mac .db-card, html.mac .exec-kpi, html.mac .report-table-wrap { box-shadow: none; }
}