/* ════════════════════════════════════════════════════════════════════
   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; }

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