/* Tema visual (2026-10-22): letra grande y contraste alto, pensado para que lo
   use comodo desde un muchacho hasta una persona mayor, en modo claro u
   oscuro (nucleo/tema.ts pone data-bs-theme en <html>). Va despues de
   estilos.css y del CSS de cada pagina: define los colores como variables
   (las hojas de cada pagina ya las usan) y le da la forma nueva a menu,
   botones, campos, tablas y etiquetas. Las paginas no necesitan clases nuevas. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Colores: modo claro ───────────────────────────────── */
:root {
  --color-primario:   #1f55c6;   /* enlaces, iconos activos y montos destacados */
  --color-primario-2: #1844a3;
  --boton:            #1f55c6;   /* fondo del boton principal (texto blanco) */
  --boton-hover:      #1844a3;
  --boton-activo:     #153b8d;
  --color-suave:      #eaf0fc;
  --color-suave-borde:#b9caef;
  --color-secundario: #15803d;
  --color-fondo:      #f5f7fa;
  --superficie:       #ffffff;
  --superficie-2:     #f8fafc;
  --hover:            #f1f4f8;
  --hover-2:          #e7ebf1;
  --color-sidebar:    var(--superficie);
  --color-texto:      #172033;
  --texto-2:          #2b3446;
  --color-tenue:      #5b6577;
  --color-borde:      #e2e6ec;
  --borde-tenue:      #edf0f4;
  --borde-fuerte:     #cfd6e0;
  --color-acento:     #b45309;
  --color-alerta:     #c0362c;
  --color-panel:      #f0f4fb;
  --color-grid:       rgba(31,85,198,.07);
  --verde-suave:      #e6f4eb;  --verde-borde: #bfe3cc;  --verde-texto: #116a32;
  --rojo-suave:       #fbe9e7;  --rojo-borde:  #f2c7c3;  --rojo-texto:  #9b2c23;
  --amarillo-suave:   #fdf3dc;  --amarillo-borde: #f5dfa6; --amarillo-texto: #774605;
  --info-suave:       #e5f2fb;  --info-borde:  #c4daf6;  --info-texto:  #0b5d82;
  --gris-suave:       #eceff3;
  --sombra:           0 1px 2px rgba(23,32,51,.05), 0 2px 8px rgba(23,32,51,.04);
  --sombra-alta:      0 20px 50px rgba(23,32,51,.18);
  --velo:             rgba(23,32,51,.35);
  --anillo:           rgba(31,85,198,.18);
  --sidebar-ancho:    256px;
  --radio:            10px;
  --radio-tarjeta:    14px;
}

/* ── Colores: modo oscuro ──────────────────────────────── */
[data-bs-theme="dark"] {
  --color-primario:   #8db0f7;
  --color-primario-2: #a9c3fa;
  --boton:            #2f63d6;
  --boton-hover:      #3a6fe0;
  --boton-activo:     #2552b8;
  --color-suave:      #1c2a46;
  --color-suave-borde:#34497a;
  --color-secundario: #4ade80;
  --color-fondo:      #0f141b;
  --superficie:       #171d27;
  --superficie-2:     #1b222d;
  --hover:            #212a37;
  --hover-2:          #2a3442;
  --color-texto:      #e8ecf2;
  --texto-2:          #d3d9e3;
  --color-tenue:      #a0aabb;
  --color-borde:      #2b3442;
  --borde-tenue:      #232b37;
  --borde-fuerte:     #3a4555;
  --color-acento:     #f0a35e;
  --color-alerta:     #f2877e;
  --color-panel:      #182133;
  --color-grid:       rgba(141,176,247,.08);
  --verde-suave:      #15301f;  --verde-borde: #24533a;  --verde-texto: #86e0a6;
  --rojo-suave:       #3a1c1a;  --rojo-borde:  #6b302b;  --rojo-texto:  #f6a39b;
  --amarillo-suave:   #352a12;  --amarillo-borde: #66501f; --amarillo-texto: #f3cd7a;
  --info-suave:       #13293a;  --info-borde:  #24506e;  --info-texto:  #8ccff0;
  --gris-suave:       #262f3c;
  --sombra:           0 1px 2px rgba(0,0,0,.35);
  --sombra-alta:      0 20px 50px rgba(0,0,0,.55);
  --velo:             rgba(0,0,0,.55);
  --anillo:           rgba(141,176,247,.25);
  color-scheme: dark;
}

/* ── Bootstrap con las mismas variables (en los dos modos) ─ */
:root, [data-bs-theme="dark"] {
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-color: var(--color-texto);
  --bs-body-bg: var(--color-fondo);
  --bs-emphasis-color: var(--color-texto);
  --bs-secondary-color: var(--color-tenue);
  --bs-secondary-bg: var(--superficie-2);
  --bs-tertiary-bg: var(--superficie-2);
  --bs-border-color: var(--color-borde);
  --bs-border-radius: var(--radio);
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: var(--radio-tarjeta);
  --bs-primary-text-emphasis: var(--color-primario-2);
  --bs-primary-bg-subtle: var(--color-suave);
  --bs-link-color: var(--color-primario);
  --bs-link-hover-color: var(--color-primario-2);
  --bs-focus-ring-color: var(--anillo);
  --bs-heading-color: var(--color-texto);
}
:root { --bs-link-color-rgb: 31,85,198; --bs-link-hover-color-rgb: 24,68,163; --bs-primary-rgb: 31,85,198; }
[data-bs-theme="dark"] { --bs-link-color-rgb: 141,176,247; --bs-link-hover-color-rgb: 169,195,250; --bs-primary-rgb: 141,176,247; }

body {
  font-family: var(--bs-body-font-family);
  font-size: 1rem;
  line-height: 1.55;
  background: var(--color-fondo);
  color: var(--color-texto);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}
.text-muted, .text-secondary, .text-body-secondary { color: var(--color-tenue) !important; }
.text-primary { color: var(--color-primario) !important; }
.text-success { color: var(--verde-texto) !important; }
.text-danger { color: var(--rojo-texto) !important; }
.text-warning { color: var(--amarillo-texto) !important; }
.bg-white, .bg-body { background-color: var(--superficie) !important; }
.bg-light, .bg-body-tertiary, .table-light, .table-light > * { --bs-table-bg: var(--superficie-2); background-color: var(--superficie-2) !important; color: var(--color-texto); }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--color-borde) !important; }
small, .small { font-size: .875rem; }
.num-tabular, .text-end { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--color-primario); outline-offset: 2px; }

/* ── Marca ─────────────────────────────────────────────── */
.marca { display: inline-flex; align-items: center; gap: .6rem; }
.marca-icono {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--boton); color: #fff; font-size: 1.1rem;
}
.marca-nombre, .login-marca {
  font-family: var(--bs-body-font-family);
  font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; color: var(--color-texto);
}
.login-marca { font-size: 1.75rem; }
.login-marca .bi { color: var(--color-primario); }

/* ── Menu lateral ──────────────────────────────────────── */
.sidebar {
  background: var(--color-sidebar); color: var(--color-texto);
  border-right: 1px solid var(--color-borde);
}
.sidebar-header { padding: 1.1rem 1.25rem; border-bottom: 0; }
.btn-esconder-menu { color: var(--color-tenue); top: 1.2rem; }
.btn-esconder-menu:hover { background: var(--hover); color: var(--color-texto); }
.empresa-activa {
  margin: 0 .9rem .25rem; padding: .6rem .8rem; border-radius: var(--radio);
  background: var(--superficie-2); border: 1px solid var(--color-borde); color: var(--color-texto);
  display: flex; align-items: center; gap: .65rem;
}
.empresa-activa:hover { background: var(--color-suave); border-color: var(--color-suave-borde); color: var(--color-texto); }
.empresa-activa.sin-cambio, .empresa-activa.sin-cambio:hover { background: var(--superficie-2); border-color: var(--color-borde); }
.empresa-activa .empresa-textos { min-width: 0; flex: 1; }
.empresa-activa small { color: var(--color-tenue); font-size: .75rem; letter-spacing: 0; text-transform: none; }
.empresa-activa span span, .empresa-activa #empresa-activa { font-size: .95rem; font-weight: 700; }
.empresa-logo {
  width: auto; height: 44px; max-width: 84px; flex-shrink: 0; object-fit: contain; border-radius: 8px;
  background: #fff; padding: 3px; border: 1px solid var(--color-borde);
}
.sidebar-nav { padding: .5rem .75rem 1rem; }
.menu-grupo { padding-top: .35rem; }
.menu-grupo + .menu-grupo { margin-top: .35rem; }
.menu-grupo:not(:has(a)) { display: none; }
.menu-titulo {
  display: block; padding: .6rem .75rem .3rem;
  font-size: .78rem; font-weight: 600; color: var(--color-tenue);
}
.sidebar-nav a {
  gap: .75rem; padding: .6rem .75rem; min-height: 44px; border-radius: var(--radio);
  color: var(--texto-2); font-size: .97rem; font-weight: 500;
}
.sidebar-nav a .bi { font-size: 1.15rem; color: var(--color-tenue); width: 1.25rem; text-align: center; }
.sidebar-nav a:hover { background: var(--hover); color: var(--color-texto); }
.sidebar-nav a.activo { background: var(--color-suave); color: var(--color-primario); font-weight: 650; border-left: 0; }
.sidebar-nav a.activo .bi { color: var(--color-primario); }
.sidebar-footer { border-top: 1px solid var(--color-borde); color: var(--color-tenue); padding: .9rem 1rem; }
.sidebar-footer #nombre-usuario { color: var(--color-texto); font-size: .95rem; margin-bottom: .1rem; }
#rol-usuario { color: var(--color-acento) !important; }
.btn-mostrar-menu { border-radius: var(--radio); background: var(--superficie); border-color: var(--color-borde); color: var(--color-primario); }

/* Barra superior en celular y tablet */
.barra-movil { background: var(--superficie) !important; color: var(--color-texto) !important; border-bottom: 1px solid var(--color-borde); box-shadow: none !important; }
.barra-movil-marca { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--bs-body-font-family) !important; font-weight: 800 !important; letter-spacing: -.01em !important; color: var(--color-texto) !important; font-size: 1.05rem !important; }
.barra-movil-marca .marca-icono { width: 30px; height: 30px; border-radius: 8px; font-size: .95rem; }
.barra-movil-empresa { color: var(--color-tenue) !important; font-weight: 600; }
.btn-hamburguesa { color: var(--color-texto) !important; }
.btn-hamburguesa:hover, .btn-hamburguesa:focus-visible { background: var(--hover) !important; outline-color: var(--color-primario) !important; }
.btn-cerrar-sidebar { background: var(--hover) !important; color: var(--color-texto) !important; }
.sidebar-overlay { background: var(--velo); }

/* ── Contenido ─────────────────────────────────────────── */
.main-content { padding: 1.75rem 2.25rem; }
.topbar { margin-bottom: 1.5rem; gap: .75rem; }
.topbar h1, .cb-titulo h1 { font-size: 1.6rem; font-weight: 800; color: var(--color-texto); letter-spacing: -.02em; }
h1, h2, h3, h4, h5, h6, .h5, .h6 { color: var(--color-texto); letter-spacing: -.01em; }
.tabla-wrapper .tabla-header h5, .chart-card-header h5, .resumen .tabla-wrapper h5,
.paso-ambiente .titulo, .tc-titulo, .ml-titulo, .nota-markdown h4, .nota-markdown h5 { color: var(--color-texto); font-weight: 700; }
.tabla-wrapper .tabla-header { border-bottom-color: var(--color-borde); }

/* Tarjetas y recuadros */
.card, .tabla-wrapper, .metrica-card, .tarjeta-empresa, .caja-catalogo, .caja-ticket {
  background: var(--superficie); color: var(--color-texto);
  border: 1px solid var(--color-borde); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra);
}
.card { --bs-card-bg: var(--superficie); --bs-card-cap-bg: var(--superficie); --bs-card-border-color: var(--color-borde); }
.card-header { background: var(--superficie); border-bottom-color: var(--color-borde); font-weight: 650; }
.metrica-card { border-top: 1px solid var(--color-borde); text-align: left; padding: 1.25rem 1.4rem; }
.metrica-card .numero { color: var(--color-texto); font-size: 2rem; }
.metrica-card .etiqueta { color: var(--color-tenue); font-size: .85rem; text-transform: none; letter-spacing: 0; }
.metrica-card:hover { transform: none; box-shadow: var(--sombra); }
.tarjeta-empresa { border-left: 4px solid var(--color-primario); }
.te-nombre { color: var(--color-texto); }
.masthead-reporte { border-radius: var(--radio-tarjeta); border-left-color: var(--color-primario); }
.logo-marco {
  width: 180px; height: 90px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--borde-fuerte); border-radius: var(--radio); background: #fff; overflow: hidden;
}
.logo-marco img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-marco .text-muted { color: #5b6577 !important; }

/* ── Botones ───────────────────────────────────────────── */
.btn {
  --bs-btn-padding-y: .55rem; --bs-btn-padding-x: 1.05rem; --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 600; --bs-btn-border-radius: var(--radio);
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
}
.btn-sm, .btn-group-sm > .btn {
  --bs-btn-padding-y: .35rem; --bs-btn-padding-x: .75rem; --bs-btn-font-size: .9rem;
  --bs-btn-border-radius: 8px; min-height: 36px;
}
.btn-lg { --bs-btn-padding-y: .75rem; --bs-btn-font-size: 1.1rem; min-height: 52px; }
.btn-link, .btn-close { min-height: 0; }
.btn-close { display: inline-block; }
.btn .bi { line-height: 1; }
.btn-primary {
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff;
  --bs-btn-bg: var(--boton); --bs-btn-border-color: var(--boton);
  --bs-btn-hover-bg: var(--boton-hover); --bs-btn-hover-border-color: var(--boton-hover);
  --bs-btn-active-bg: var(--boton-activo); --bs-btn-active-border-color: var(--boton-activo);
  --bs-btn-disabled-bg: var(--boton); --bs-btn-disabled-border-color: var(--boton);
  --bs-btn-focus-shadow-rgb: 31,85,198;
  background: var(--bs-btn-bg); border-color: var(--bs-btn-border-color);
}
.btn-primary:hover, .btn-primary:focus { background: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); }
.btn-outline-primary {
  --bs-btn-color: var(--color-primario); --bs-btn-border-color: var(--color-suave-borde); --bs-btn-bg: var(--superficie);
  --bs-btn-hover-bg: var(--color-suave); --bs-btn-hover-color: var(--color-primario-2); --bs-btn-hover-border-color: var(--color-suave-borde);
  --bs-btn-active-bg: var(--color-suave); --bs-btn-active-color: var(--color-primario-2); --bs-btn-active-border-color: var(--color-primario);
  background: var(--bs-btn-bg);
}
.btn-outline-primary:hover { background: var(--bs-btn-hover-bg); }
.btn-check:checked + .btn-outline-primary { background: var(--color-suave); color: var(--color-primario-2); border-color: var(--color-primario); }
.btn-outline-secondary, .btn-light {
  --bs-btn-color: var(--texto-2); --bs-btn-border-color: var(--borde-fuerte); --bs-btn-bg: var(--superficie);
  --bs-btn-hover-bg: var(--hover); --bs-btn-hover-color: var(--color-texto); --bs-btn-hover-border-color: var(--borde-fuerte);
  --bs-btn-active-bg: var(--hover-2); --bs-btn-active-color: var(--color-texto); --bs-btn-active-border-color: var(--borde-fuerte);
  background: var(--bs-btn-bg); color: var(--bs-btn-color); border-color: var(--bs-btn-border-color);
}
.btn-outline-secondary:hover, .btn-light:hover { background: var(--bs-btn-hover-bg); color: var(--bs-btn-hover-color); }
.btn-success { --bs-btn-bg: #15803d; --bs-btn-border-color: #15803d; --bs-btn-hover-bg: #116a32; --bs-btn-hover-border-color: #116a32; }
.btn-danger { --bs-btn-bg: #c0362c; --bs-btn-border-color: #c0362c; --bs-btn-hover-bg: #a22d24; --bs-btn-hover-border-color: #a22d24; }
.btn-outline-danger {
  --bs-btn-color: var(--rojo-texto); --bs-btn-border-color: var(--rojo-borde); --bs-btn-bg: var(--superficie);
  --bs-btn-hover-bg: #c0362c; --bs-btn-hover-border-color: #c0362c; --bs-btn-hover-color: #fff;
  background: var(--bs-btn-bg);
}
.btn-outline-danger:hover { background: var(--bs-btn-hover-bg); }
.btn-check + .btn { min-height: 40px; }
.btn-group > .btn { min-height: 40px; }

/* ── Campos ────────────────────────────────────────────── */
.form-control, .form-select {
  min-height: 44px; font-size: 1rem; border-radius: var(--radio);
  background-color: var(--superficie); border-color: var(--borde-fuerte); color: var(--color-texto);
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--superficie-2); color: var(--color-tenue); }
.form-control-sm, .form-select-sm { min-height: 36px; font-size: .9rem; border-radius: 8px; }
textarea.form-control { min-height: 88px; }
.form-control:focus, .form-select:focus { background-color: var(--superficie); color: var(--color-texto); border-color: var(--color-primario); box-shadow: 0 0 0 4px var(--anillo); }
.form-control::placeholder { color: var(--color-tenue); opacity: .8; }
.form-label { font-weight: 600; font-size: .95rem; color: var(--texto-2); margin-bottom: .35rem; }
.form-text { color: var(--color-tenue); font-size: .875rem; }
.input-group-text { background: var(--superficie-2); border-color: var(--borde-fuerte); color: var(--color-tenue); border-radius: var(--radio); }
.form-check-input { width: 1.2em; height: 1.2em; margin-top: .18em; background-color: var(--superficie); border-color: var(--borde-fuerte); }
.form-check-input:checked { background-color: var(--boton); border-color: var(--boton); }
.form-switch .form-check-input { width: 2.4em; }

/* ── Tablas ────────────────────────────────────────────── */
.table {
  --bs-table-bg: var(--superficie); --bs-table-color: var(--color-texto); --bs-table-border-color: var(--borde-tenue);
  --bs-table-hover-bg: var(--hover); --bs-table-hover-color: var(--color-texto);
  --bs-table-striped-bg: var(--superficie-2); --bs-table-striped-color: var(--color-texto);
  --bs-table-active-bg: var(--color-suave); --bs-table-active-color: var(--color-texto);
  font-size: .95rem;
}
.table > :not(caption) > * > * { padding: .8rem .85rem; border-bottom-color: var(--borde-tenue); }
.table > thead > tr > th, .table thead th {
  background: var(--superficie-2); color: var(--color-tenue); font-size: .82rem; font-weight: 600;
  text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--color-borde); white-space: nowrap;
}
.table-sm > :not(caption) > * > * { padding: .5rem .6rem; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--hover); }
.table-warning { --bs-table-bg: var(--amarillo-suave); --bs-table-color: var(--color-texto); }
.table-danger  { --bs-table-bg: var(--rojo-suave); --bs-table-color: var(--color-texto); }
.table-success { --bs-table-bg: var(--verde-suave); --bs-table-color: var(--color-texto); }
.table-info    { --bs-table-bg: var(--info-suave); --bs-table-color: var(--color-texto); }
.list-group { --bs-list-group-bg: var(--superficie); --bs-list-group-color: var(--color-texto); --bs-list-group-border-color: var(--color-borde); --bs-list-group-action-hover-bg: var(--hover); }

/* ── Etiquetas de estado ───────────────────────────────── */
.badge {
  --bs-badge-font-size: .8rem; --bs-badge-font-weight: 600; --bs-badge-padding-y: .32em; --bs-badge-padding-x: .7em;
  border-radius: 999px; letter-spacing: 0;
}
.badge.bg-success, .badge.text-bg-success { background: var(--verde-suave) !important; color: var(--verde-texto) !important; }
.badge.bg-danger, .badge.text-bg-danger { background: var(--rojo-suave) !important; color: var(--rojo-texto) !important; }
.badge.bg-warning, .badge.text-bg-warning { background: var(--amarillo-suave) !important; color: var(--amarillo-texto) !important; }
.badge.bg-info, .badge.text-bg-info { background: var(--info-suave) !important; color: var(--info-texto) !important; }
.badge.bg-primary, .badge.text-bg-primary { background: var(--color-suave) !important; color: var(--color-primario-2) !important; }
.badge.bg-secondary, .badge.text-bg-secondary { background: var(--gris-suave) !important; color: var(--texto-2) !important; }
.badge.bg-light, .badge.text-bg-light { background: var(--superficie-2) !important; color: var(--texto-2) !important; border: 1px solid var(--color-borde); }
.badge.bg-dark, .badge.text-bg-dark { background: var(--texto-2) !important; color: var(--superficie) !important; }

/* ── Avisos ────────────────────────────────────────────── */
.alert { border-radius: var(--radio-tarjeta); border-width: 1px; font-size: .95rem; }
.alert-warning { --bs-alert-link-color: var(--amarillo-texto); background: var(--amarillo-suave); border-color: var(--amarillo-borde); color: var(--amarillo-texto); }
.alert-danger  { --bs-alert-link-color: var(--rojo-texto); background: var(--rojo-suave); border-color: var(--rojo-borde); color: var(--rojo-texto); }
.alert-success { --bs-alert-link-color: var(--verde-texto); background: var(--verde-suave); border-color: var(--verde-borde); color: var(--verde-texto); }
.alert-info, .alert-primary { --bs-alert-link-color: var(--info-texto); background: var(--info-suave); border-color: var(--info-borde); color: var(--info-texto); }
.alert-secondary, .alert-light { background: var(--superficie-2); border-color: var(--color-borde); color: var(--texto-2); }

/* ── Pestanas ──────────────────────────────────────────── */
.nav-tabs { border-bottom-color: var(--color-borde); gap: .25rem; }
.nav-tabs .nav-link {
  color: var(--color-tenue); font-weight: 600; border: 0; border-bottom: 3px solid transparent;
  border-radius: 0; padding: .7rem 1rem; min-height: 44px; background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--color-texto); border-bottom-color: var(--borde-fuerte); }
.nav-tabs .nav-link.active { color: var(--color-primario); background: transparent; border-bottom-color: var(--color-primario); }
.nav-pills .nav-link { border-radius: 999px; color: var(--texto-2); font-weight: 600; padding: .45rem 1rem; min-height: 40px; }
.nav-pills .nav-link.active { background: var(--boton); color: #fff; }

/* ── Modales, menus y avisos flotantes ─────────────────── */
.modal-content { --bs-modal-bg: var(--superficie); background: var(--superficie); color: var(--color-texto); border: 0; border-radius: 16px; box-shadow: var(--sombra-alta); }
.modal-header { border-bottom-color: var(--color-borde); padding: 1.1rem 1.4rem; }
.modal-title { font-weight: 700; font-size: 1.2rem; }
.modal-body { padding: 1.25rem 1.4rem; }
.modal-footer { border-top-color: var(--color-borde); padding: .9rem 1.4rem; }
.modal-backdrop { --bs-backdrop-bg: #0b0f15; }
.offcanvas { --bs-offcanvas-bg: var(--superficie); background: var(--superficie); color: var(--color-texto); border-left-color: var(--color-borde) !important; }
.dropdown-menu { --bs-dropdown-bg: var(--superficie); --bs-dropdown-link-color: var(--color-texto); --bs-dropdown-link-hover-bg: var(--hover); border-color: var(--color-borde); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: .4rem; }
.dropdown-item { border-radius: 8px; padding: .55rem .8rem; }
.toast { border-radius: 12px; font-size: .95rem; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
[data-bs-theme="dark"] .btn-close-white { filter: none; }
kbd { background: var(--hover-2); color: var(--color-texto); }

/* ── Inicio de sesion ──────────────────────────────────── */
.login-wrapper { background: var(--color-fondo); padding: 1rem; }
.login-card {
  background: var(--superficie); color: var(--color-texto);
  border-top: 0; border: 1px solid var(--color-borde); border-radius: 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,.08); padding: 2.5rem 2.25rem; max-width: 420px;
}

/* ── Pantallas angostas ────────────────────────────────── */
@media (max-width: 991.98px) {
  .main-content { padding: 1rem 1.25rem; padding-top: calc(52px + 1rem); }
  .sidebar { width: min(var(--sidebar-ancho), 86vw); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
}
@media (max-width: 768px) {
  .topbar h1 { font-size: 1.35rem; }
}
@media (max-width: 575.98px) {
  .main-content { padding: calc(52px + .75rem) .85rem 1rem; }
  .login-card { padding: 2rem 1.4rem; }
  .tabla-tarjetas > tbody > tr, .tabla-tarjetas > tfoot > tr { border-bottom-color: var(--color-borde) !important; }
}

/* ── Ajustes del modo oscuro en pantallas con estilo propio ─ */
[data-bs-theme="dark"] .btn-cobrar:disabled { background: #24402d; border-color: #24402d; color: #8fb39b; }
[data-bs-theme="dark"] .inv-mini, [data-bs-theme="dark"] .empresa-logo { background: #fff; }

/* ── Color de marca de la empresa (nucleo/marca.ts pone las --m-* en <html>) ── */
html.con-marca {
  --color-primario: var(--m-primario); --color-primario-2: var(--m-primario-2);
  --boton: var(--m-boton); --boton-hover: var(--m-boton-hover); --boton-activo: var(--m-boton-activo);
  --color-suave: var(--m-suave); --color-suave-borde: var(--m-suave-borde);
  --anillo: var(--m-anillo); --color-grid: var(--m-grid);
  --bs-link-color-rgb: var(--m-primario-rgb); --bs-link-hover-color-rgb: var(--m-primario-2-rgb);
  --bs-primary-rgb: var(--m-primario-rgb);
}
html.con-marca[data-bs-theme="dark"] {
  --color-primario: var(--m-o-primario); --color-primario-2: var(--m-o-primario-2);
  --color-suave: var(--m-o-suave); --color-suave-borde: var(--m-o-suave-borde);
  --anillo: var(--m-o-anillo); --color-grid: var(--m-o-grid);
  --bs-link-color-rgb: var(--m-o-primario-rgb); --bs-link-hover-color-rgb: var(--m-o-primario-2-rgb);
  --bs-primary-rgb: var(--m-o-primario-rgb);
}

/* ── Configuracion: titulo y pestanas (dominio/pestanas-config.ts) ── */
.config-cabecera { margin-bottom: 1.25rem; }
.config-cabecera h1 { font-size: 1.6rem; font-weight: 800; margin: 0 0 .75rem; color: var(--color-texto); }
.pestanas-config {
  display: flex; flex-wrap: nowrap; gap: .25rem; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--color-borde);
}
.pestanas-config::-webkit-scrollbar { display: none; }
.pestanas-config .nav-link {
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  padding: .65rem .9rem; color: var(--color-tenue); font-weight: 600;
  border-bottom: 3px solid transparent; margin-bottom: -1px; border-radius: 0;
}
.pestanas-config .nav-link:hover { color: var(--color-texto); }
.pestanas-config .nav-link.active { color: var(--color-primario); border-bottom-color: var(--boton); }

/* ── Configuracion > Marca ── */
.muestras-color { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: .6rem; max-width: 460px; }
.muestra-color {
  width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--superficie);
  background: var(--muestra); box-shadow: 0 0 0 1px var(--color-borde); cursor: pointer; position: relative;
}
.muestra-color.elegida { box-shadow: 0 0 0 3px var(--color-texto); }
.muestra-color.elegida::after {
  content: "\F26E"; font-family: bootstrap-icons; color: #fff; font-size: 1.2rem;
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
#marca-hex { width: 9rem; text-transform: uppercase; }
.form-control-color { width: 4rem; height: 44px; padding: .25rem; }
.factura-muestra {
  --fm-color: #1a3a5c;
  background: #fff; color: #1d2733; border: 1px solid #e3e7ec; border-radius: 10px;
  padding: 1rem; font-size: .8rem; box-shadow: var(--sombra);
}
.fm-cab { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .6rem; margin-bottom: .6rem; border-bottom: 2px solid var(--fm-color); }
.fm-logo { max-height: 36px; max-width: 120px; display: block; margin-bottom: .25rem; }
.fm-empresa { font-weight: 800; font-size: 1rem; color: var(--fm-color); }
.fm-tipo { font-weight: 700; color: var(--fm-color); }
.fm-tenue { color: #6c757d; }
.fm-tabla { width: 100%; border-collapse: collapse; }
.fm-tabla th { background: var(--fm-color); color: #fff; padding: .35rem .5rem; font-weight: 600; text-align: left; }
.fm-tabla td { padding: .35rem .5rem; border-bottom: 1px solid #e3e7ec; }
.fm-total { display: flex; justify-content: space-between; margin-top: .6rem; padding-top: .4rem; border-top: 2px solid var(--fm-color); font-weight: 800; font-size: .95rem; }