/* ==========================================================
   CRAI VENTAS — CAPA EXPERIMENTAL REVERSIBLE
   Solo overrides. No duplica el CSS base.
   Para desactivar: eliminar la línea <link href="css/crai-experimental.css">
   en front/index.html. Sin tocar JS, backend ni BD.
   Objetivo: más color + jerarquía + identidad, sin saturar,
   manteniendo sistema POS/ERP profesional, sobrio y comparativo.
   ========================================================== */

/* ----------------------------------------------------------
   1) TOKENS — identidad CRAI (logo: #002d61 azul, #6d9733 verde)
   Turquesa/teal como acento vivo pero contenido. Tonos suaves.
   ---------------------------------------------------------- */
:root {
  /* Acento turquesa — vivo pero no fluorescente */
  --crai-accent: #108a7a;          /* teal medio, base interactiva */
  --crai-accent-strong: #0c6e62;   /* para texto/botón con contraste AA */
  --crai-accent-hover: #0a5e54;
  --crai-accent-soft: rgba(16, 138, 122, 0.095);
  --crai-accent-soft-2: rgba(16, 138, 122, 0.14);
  --crai-accent-border: rgba(16, 138, 122, 0.26);
  --crai-accent-ring: rgba(16, 138, 122, 0.20);
  --crai-accent-ring-strong: rgba(16, 138, 122, 0.30);

  /* Verde CRAI — logo #6d9733, armonizado con turquesa */
  --crai-green: #6d9733;
  --crai-green-soft: rgba(109, 151, 51, 0.090);
  --crai-green-border: rgba(109, 151, 51, 0.24);
  --crai-green-strong: #4a7328;
  /* Puente turquesa-verde — mezcla suave para detalles duo */
  --crai-teal-green: #2ea67a;
  --crai-duo: linear-gradient(90deg, #108a7a 0%, #3fa67a 55%, #6d9733 100%);
  --crai-duo-soft: linear-gradient(90deg, rgba(16,138,122,0.14), rgba(109,151,51,0.10));
  --crai-duo-border: linear-gradient(90deg, rgba(16,138,122,0.32), rgba(109,151,51,0.22));

  /* Apoyos identidad (no saturados) */
  --crai-navy: #0b2f4a;            /* derivado de #002d61, para detalles */
  --crai-navy-soft: rgba(0, 45, 97, 0.06);

  /* Superficies refinadas (muy sutil) */
  --crai-card-border: #e3e8ed;
  --crai-card-shadow: 0 2px 10px rgba(16, 30, 46, 0.06), 0 1px 2px rgba(16,30,46,0.04);
  --crai-card-shadow-hover: 0 4px 16px rgba(16,30,46,0.08), 0 1px 3px rgba(16,30,46,0.05);
}

/* ----------------------------------------------------------
   Centro resalta — periferia con mismo tinte pero 1 tono más oscuro
   Fondo página #f2f7f7, Sidebar/Topbar #e8f2f1 para marco sutil y que el centro blanco destaque
   ---------------------------------------------------------- */
:root {
  --bg: #e6eeee;
}
html, body {
  background: #e6eeee;
}
.sidebar {
  background: #c9ddd9 !important;
}
.topbar {
  background: #c9ddd9 !important;
  border-bottom-color: #b9d0cc !important;
}

/* ----------------------------------------------------------
   2) SIDEBAR — presencia sutil, activo distinguible sin color pleno
   ---------------------------------------------------------- */
/* Sidebar y Topbar con sombra oscura sutil en lugar de línea */
.sidebar {
  border-right: none !important;
  box-shadow: 2px 0 12px rgba(0,0,0,0.08);
  transition: width 260ms cubic-bezier(0.4, 0, 0.2, 1), padding 260ms ease, border-color 0.2s ease, box-shadow 260ms ease;
  will-change: width;
}
.app-shell {
  transition: grid-template-columns 260ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: grid-template-columns;
}
.main {
  transition: opacity 0.28s ease;
}
.app-shell.sidebar-collapsed .main {
  /* filter removido: creaba containing block para fixed (modales) y provocaba descentrado */
  filter: none;
}
/* Hacer el pliegue más perceptible de forma profesional: fade suave del contenido lateral */
.sidebar .nav-section,
.sidebar .brand strong,
.sidebar .brand span,
.sidebar .nav button span:last-child {
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.app-shell.sidebar-collapsed .sidebar .nav-section {
  display: none !important;
}
.app-shell.sidebar-collapsed .sidebar .nav button span:last-child {
  display: none !important;
  width: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  transform: none !important;
}
.app-shell.sidebar-collapsed .sidebar .nav button {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
.app-shell.sidebar-collapsed .sidebar.open .nav-section {
  display: block !important;
  height: auto !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 12px 10px 6px !important;
  transform: none !important;
}
.app-shell.sidebar-collapsed .sidebar.open .nav button span:last-child {
  display: inline !important;
  width: auto !important;
  opacity: 1 !important;
  overflow: visible !important;
  transform: none !important;
}
.app-shell.sidebar-collapsed .sidebar.open .nav button {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  white-space: normal !important;
  overflow: visible !important;
  justify-content: flex-start !important;
  padding: 8px 10px !important;
  gap: 10px !important;
}
.app-shell.sidebar-collapsed .sidebar.open .nav {
  gap: 2px !important;
}
/* Botón hamburguesa fijo y alineado con el encabezado — no se mueve al colapsar */
#sidebar-toggle {
  position: fixed !important;
  left: 16px;
  top: 12px;
  z-index: 65;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
}
.sidebar {
  padding: 0 13px 12px !important;
  gap: 0 !important;
}
.sidebar .brand {
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border-bottom: none !important;
}
.app-shell:not(.sidebar-collapsed) .sidebar {
  gap: 0 !important;
}
.app-shell:not(.sidebar-collapsed) .sidebar .nav-section {
  margin-top: 12px !important;
  padding: 12px 10px 6px !important;
}
/* Nivelar PRINCIPAL con parte inferior de topbar (56px) — la parte superior de las letras queda al nivel del borde inferior del topbar */
.app-shell:not(.sidebar-collapsed) .sidebar > .nav-section:nth-child(2) {
  margin-top: 0 !important;
  padding: 0 10px 6px !important;
}
@media (max-width: 820px) {
  #sidebar-toggle {
    display: none !important;
  }
}

/* Secciones del menú: un poco más de contraste pero discretas */
.nav-section {
  color: #8e98a3;
}

/* Botón nav base: transición suave */
.nav button {
  position: relative;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
  border: 1px solid transparent;
}

/* Hover: gris muy claro + leve acento */
.nav button:hover {
  background: #f3f6f7;
  border-color: #eef2f4;
  color: #1e252f;
}
.nav button:hover .nav-icon {
  opacity: 0.95;
  color: var(--crai-accent-strong);
}

/* Activo: fondo suave teal + indicador lateral sutil + icono destacado */
.nav button.active {
  background: var(--crai-accent-soft);
  border-color: var(--crai-accent-border);
  color: #0f2a2a;
  font-weight: 670;
  box-shadow: inset 3px 0 0 var(--crai-accent);
}
.nav button.active .nav-icon {
  opacity: 1;
  color: var(--crai-accent-strong);
}

/* Prueba: iconos del menú en color turquesa — más grandes y visibles, compacto */
.nav {
  gap: 1px;
}
.nav button {
  padding: 7px 10px;
}
.nav-icon {
  color: var(--crai-accent-strong) !important;
  opacity: 0.88;
  font-size: 19px;
  width: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 1px 1px rgba(16,138,122,0.06));
}
/* Iconos SVG del menú: heredan color/estados vía currentColor. */
.nav-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
.nav button:not(.active) .nav-icon {
  opacity: 0.88;
}
.nav button:hover .nav-icon {
  opacity: 1 !important;
}
.nav button.active .nav-icon {
  opacity: 1 !important;
  filter: drop-shadow(0 1px 2px rgba(16,138,122,0.18));
}
/* Vista colapsada (64px) — iconos más grandes, espacio equilibrado */
.app-shell.sidebar-collapsed .sidebar .nav {
  gap: 4px;
}
.app-shell.sidebar-collapsed .sidebar .nav button {
  padding: 8px 6px;
}
.app-shell.sidebar-collapsed .sidebar .nav-icon {
  font-size: 22px;
  width: auto;
  height: 24px;
  opacity: 0.92;
}
.app-shell.sidebar-collapsed .sidebar .nav-icon svg {
  width: 24px;
  height: 24px;
}
.app-shell.sidebar-collapsed .sidebar .nav button:not(.active) .nav-icon {
  opacity: 0.88;
}
.app-shell.sidebar-collapsed .sidebar .nav button.active .nav-icon {
  opacity: 1;
  filter: drop-shadow(0 1px 2px rgba(16,138,122,0.18));
}
/* Evitar que el fondo activo compita con texto: leve */
.nav button.active span:last-child {
  letter-spacing: -0.01em;
}

/* Sidebar-bottom: separación más refinada */
.sidebar-bottom {
  border-top-color: #e9edf0;
}

/* Brand en sidebar (si se usa) — no tocar logo, solo pulir texto */
.brand strong {
  letter-spacing: -0.015em;
}

/* ----------------------------------------------------------
   3b) PAGE-HEAD — alineación Sucursal + Movimiento (Caja) y similares
   ---------------------------------------------------------- */
.page-head {
  align-items: flex-end;
}
.page-head > div[style*="display:flex"] {
  align-items: flex-end !important;
}
.page-head .field {
  margin-bottom: 0;
}
.page-head .field label {
  font-size: 10px;
  font-weight: 650;
  color: #7a8591;
  line-height: 1;
  margin-bottom: 0;
}
.page-head .field select {
  height: 36px;
  border-radius: 9px;
  font-size: 13px;
  padding: 0 10px;
}
.page-head .btn {
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  padding: 0 14px;
  font-weight: 650;
  white-space: nowrap;
}

/* ----------------------------------------------------------
   3) TOPBAR — header con sombra oscura sutil en lugar de línea
   ---------------------------------------------------------- */
.topbar {
  background: #c9ddd9 !important;
  border-bottom: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  backdrop-filter: saturate(1.05) blur(6px);
  position: sticky;
}
/* Logo ya en topbar via JS: pulir borde suave */
.topbar .brand-logo {
  border: 1px solid #eef2f4;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16,30,46,0.06);
}

/* ----------------------------------------------------------
   4) BOTONES — identidad en primarios, secundarios discretos
   ---------------------------------------------------------- */
.btn {
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;
  border-color: #e6eaef;
}
.btn:active {
  transform: translateY(0.5px);
}

/* Primario: teal profesional, no gris oscuro */
.btn.primary {
  background: var(--crai-accent-strong);
  border-color: var(--crai-accent-strong);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16,138,122,0.18), 0 2px 8px rgba(16,138,122,0.14);
}
.btn.primary:hover {
  background: var(--crai-accent-hover);
  border-color: var(--crai-accent-hover);
  box-shadow: 0 2px 6px rgba(16,138,122,0.22), 0 4px 12px rgba(16,138,122,0.16);
}
.btn.primary:active {
  background: #094a42;
  border-color: #094a42;
}
.btn.primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--crai-accent-ring), 0 1px 2px rgba(16,138,122,0.18);
}

/* Botón primario full-width (login) — un poco más de presencia */
.btn.primary.full-width {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Secundario / ghost: mantiene discreción pero hover con acento muy suave */
.btn:not(.primary):hover {
  border-color: #d9e2e6;
  background: #f8fbfb;
}
.btn:not(.primary):active {
  background: #eef5f4;
}

/* Danger conserva semántica pero sin saturar */
.btn.danger {
  color: #9a2f2f;
  border-color: #f0d4d4;
}
.btn.danger:hover {
  background: #fef2f2;
  border-color: #e9b8b8;
  color: #7f1d1d;
}

/* Icon-btn: hover con acento sutil */
.icon-btn {
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.icon-btn:hover {
  border-color: #d9e2e6;
  color: var(--crai-accent-strong);
  background: #f4f9f8;
}

/* Botones pequeños en tablas / filtros */
.btn.small {
  border-radius: 8px;
}

/* Botones dentro de POS — dar jerarquía al Vender */
#pos-vender.btn.primary,
#pos-pago-confirm.btn.primary {
  font-weight: 750;
  letter-spacing: -0.015em;
  box-shadow: 0 2px 8px rgba(16,138,122,0.20), 0 1px 2px rgba(16,138,122,0.12);
}

/* ----------------------------------------------------------
   5) INPUTS — focus claro con acento de marca
   ---------------------------------------------------------- */
.field input,
.field select,
.field textarea,
.search input,
.toolbar select,
.filter-field-select,
.filter-input-wrap input,
.client-input-wrap input#client-search,
.select-wrap select,
.client-combobox-row input {
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.search input:focus,
.toolbar select:focus,
.filter-field-select:focus,
.filter-input-wrap input:focus,
.client-input-wrap input#client-search:focus,
.select-wrap select:focus {
  border-color: var(--crai-accent-border) !important;
  box-shadow: 0 0 0 3px var(--crai-accent-ring) !important;
  background: #fff;
}

/* Focus visible para accesibilidad */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
}

/* Placeholder legible (no demasiado claro) */
.field input::placeholder,
.field textarea::placeholder,
.search input::placeholder,
.filter-input-wrap input::placeholder {
  color: #a1aab4;
  opacity: 1;
}

/* Disabled claramente diferenciado */
.field input:disabled,
.field select:disabled,
.field textarea:disabled {
  background: #f3f5f7 !important;
  border-color: #e6eaef !important;
  color: #8e98a3 !important;
  cursor: not-allowed;
  opacity: 1;
}

/* Inputs en sale-item (POS cantidades) — foco acentuado */
.sale-item input:focus {
  border-color: var(--crai-accent-border) !important;
  box-shadow: 0 0 0 3px var(--crai-accent-ring) !important;
}

/* Select elegante flecha: mantener pero acentuar borde al focus */
.select-wrap select:focus {
  border-color: var(--crai-accent-border);
}

/* Combobox cliente: resultados con borde acento sutil */
.client-results {
  border-color: #dbe6e4;
  box-shadow: 0 12px 28px rgba(16, 40, 38, 0.10), 0 4px 10px rgba(16,40,38,0.06);
}
.client-option:hover {
  background: #f2f8f7;
  border-color: #d9ece9;
}
.client-option.is-selected {
  background: var(--crai-accent-soft);
  border-color: var(--crai-accent-border);
  box-shadow: 0 0 0 1px var(--crai-accent-border) inset;
}
.client-option-check {
  color: var(--crai-accent-strong);
}

/* Filtros toolbar inputs — focus teal */
.filter-toolbar {
  border-color: var(--crai-card-border);
}

/* ----------------------------------------------------------
   6) TARJETAS Y PANELES — contraste, borde y sombra sutil
   ---------------------------------------------------------- */
.card {
  border-color: var(--crai-card-border);
  box-shadow: var(--crai-card-shadow);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
/* Hover muy sutil en cards interactivas (no todas) */
.card:hover {
  /* no cambiar todas, solo leve si está dentro de grid interactivo */
}
.metric {
  border-color: #e6eaef;
  position: relative;
  overflow: hidden;
}
/* Detalle dúo turquesa->verde superior — 3px muy suave, solo identidad */
.metric::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--crai-duo);
  opacity: 0.85;
}
.metric:hover {
  box-shadow: var(--crai-card-shadow-hover);
  border-color: #dbe4e6;
}
/* Icono métrica con acento turquesa, variante verde para segunda métrica (alternancia sutil) */
.metric-icon {
  background: var(--crai-accent-soft);
  color: var(--crai-accent-strong);
  border: 1px solid rgba(16,138,122,0.14);
}
/* Si hay 4 métricas, la 2ª y 4ª insinúan verde para armonía duo sin romper uniformidad */
.grid-4 .metric:nth-child(2) .metric-icon,
.grid-4 .metric:nth-child(4) .metric-icon {
  background: var(--crai-green-soft);
  color: var(--crai-green-strong);
  border-color: var(--crai-green-border);
}
.grid-4 .metric:nth-child(2)::before,
.grid-4 .metric:nth-child(4)::before {
  background: linear-gradient(90deg, #6d9733 0%, #3fa67a 100%);
}

/* Card-pad refinado */
.card-pad {
  /* ya tiene padding, no tocar */
}

/* Sale main card — borde acento extremadamente sutil en header */
.sale-main-card {
  border-color: var(--crai-card-border);
}
.sale-form-kicker {
  color: #1a3a36;
}

/* Filter panel — fondo con matiz teal ultra suave */
.filter-panel {
  background: #f7f9f9;
  border-color: #e6eeee;
}

/* Admin toolbar */
.admin-toolbar {
  background: #f7f9f9;
  border-color: #e6eeee;
}

/* Content background — mantener blanco, pero refinamos separación */
.content {
  /* no tocar max-width ni padding estructural */
}

/* ----------------------------------------------------------
   7) TABLAS — cabecera más legible, filas con hover sutil
   ---------------------------------------------------------- */
.table-wrap th {
  color: #7a8591;
  border-bottom-color: #e6eaef;
  background: #fbfcfd;
  position: relative;
}
/* Línea dúo bajo header — turquesa->verde 2px, 18% opacidad */
.table-wrap thead tr {
  position: relative;
}
.table-wrap thead::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--crai-duo);
  opacity: 0.14;
}
.table-wrap td {
  border-bottom-color: #f0f3f5;
}
.table-wrap tbody tr:hover td {
  background: #f8fbfb;
}
/* Hover con borde izquierdo turquesa muy sutil para fila activa (solo en desktop) */
@media (min-width: 821px) {
  .table-wrap tbody tr:hover {
    box-shadow: inset 2px 0 0 rgba(16,138,122,0.22);
  }
}
.table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

/* Enlaces o elementos interactivos en tablas (si hay) */
.table-wrap a {
  color: var(--crai-accent-strong);
  text-decoration: underline;
  text-decoration-color: rgba(16,138,122,0.30);
  text-underline-offset: 2px;
}
.table-wrap a:hover {
  color: var(--crai-accent-hover);
  text-decoration-color: var(--crai-accent-strong);
}

/* ----------------------------------------------------------
   8) ESTADOS Y BADGES — diferenciación cromática suave
   ---------------------------------------------------------- */
.badge {
  border: 1px solid transparent;
  letter-spacing: 0.02em;
  font-weight: 700;
}

.badge.success {
  background: var(--crai-green-soft);
  color: var(--crai-green-strong);
  border-color: var(--crai-green-border);
}
.badge.warning {
  background: #fff7e6;
  color: #8a5a10;
  border-color: #f3dfb8;
}
.badge.danger {
  background: #fef0f0;
  color: #8a2a2a;
  border-color: #f0c9c9;
}
.badge.info {
  background: var(--crai-accent-soft);
  color: var(--crai-accent-strong);
  border-color: var(--crai-accent-border);
}
/* Variante turquesa-verde para estados mixtos (si se usa) */
.badge.duo {
  background: linear-gradient(135deg, rgba(16,138,122,0.10), rgba(109,151,51,0.08));
  color: #2a5a3a;
  border-color: rgba(16,138,122,0.18);
}

/* Badges en tablas: un poco más de padding vertical ya definido */

/* Notices — acento teal en info */
.notice-info {
  background: #f2f8f7;
  border-color: #d9ece9;
  color: #1a4a45;
}
.notice-warning {
  background: #fff8ed;
  border-color: #f7dfb6;
  color: #7d4f10;
}
.notice-danger {
  background: #fef2f2;
  border-color: #f0d0d0;
  color: #7f1d1d;
}
.notice-neutral {
  background: #f6f8fa;
  border-color: #e6eaef;
  color: #5a6570;
}

/* ----------------------------------------------------------
   9) TIPOGRAFÍA — pesos y contraste donde mejora legibilidad
   (sin aumento general exagerado, ya +1px en base)
   ---------------------------------------------------------- */
.page-head h1 {
  color: #182028;
  letter-spacing: -0.035em;
  position: relative;
  display: inline-block;
}
/* Subrayado dúo muy corto bajo títulos — oculto en POS y vistas para limpieza (detalle señalado) */
.page-head h1::after {
  display: none !important;
}
.page-head p {
  color: #6b7682;
}
.section-title h2 {
  letter-spacing: -0.02em;
  color: #1c242e;
  position: relative;
  padding-left: 10px;
}
.section-title h2::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 14px;
  background: var(--crai-duo);
  border-radius: 999px;
  opacity: 0.85;
}
.field label {
  color: #3a444e;
}
.metric-label {
  color: #6b7682;
}
.metric-value {
  color: #12181f;
}
.metric-hint {
  color: #8a94a0;
}

/* Links genéricos interactivos (sin tocar a ciegas) */
a:hover {
  color: var(--crai-accent-strong);
}

/* ----------------------------------------------------------
   10) POS — mejoras visuales compatibles, SIN lógica
   ---------------------------------------------------------- */
/* Layout ya optimizado en base: respetar, solo pulir */

/* Cart items: borde acento sutil al hover */
.pos-layout .card:hover {
  border-color: #dbe4e6;
}

/* TOTAL con jerarquía mayor — ya 32px en base, refinamos con dúo */
.pos-total {
  border-top-color: #e6eaef !important;
}
.pos-total span {
  color: #5a6570 !important;
}
.pos-total strong {
  color: #0f1f1e !important;
  position: relative;
}
.pos-total strong::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  background: var(--crai-duo);
  border-radius: 999px;
  opacity: 0.85;
}
/* Resumen lateral POS — badge suave con dúo para impuestos/descuentos */
.pos-layout aside .payment-summary,
.pos-layout aside div[style*="display:grid; gap:6px"] {
  /* no tocar estructura, solo asegurar tipografía nítida */
}

/* Sale items en POS carrito — hover con borde teal muy suave */
.sale-item {
  border-color: #e9edf0;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.sale-item:hover {
  border-color: #dbe8e6;
  background: #fcfefe;
}

/* Botón eliminar en carrito — acento danger suave ya existe, pulir */
.sale-item-del:hover {
  background: #fef2f2;
  border-color: #f0c9c9;
}

/* Scan input: foco teal */
#pos-scan:focus {
  border-color: var(--crai-accent-border) !important;
  box-shadow: 0 0 0 3px var(--crai-accent-ring) !important;
}

/* Chip POS — carrito count con dúo suave (si existe contador) */
.sale-products-title span {
  background: var(--crai-duo-soft) !important;
  border: 1px solid rgba(16,138,122,0.14);
  color: var(--crai-accent-strong) !important;
}

/* Pago modal — total destacado */
#pos-pago-modal .modal strong {
  color: #0f1f1e;
}
#pos-pago-modal [style*="Total a pagar"] + div {
  color: var(--crai-accent-strong);
}

/* Métodos de pago en modal — select/input focus */
#pos-pagos-list-modal select:focus,
#pos-pagos-list-modal input:focus {
  border-color: var(--crai-accent-border) !important;
  box-shadow: 0 0 0 3px var(--crai-accent-ring) !important;
}

/* Vuelto en verde suave pero con acento teal cuando positivo */
#pos-resumen-body [style*="color:var(--success)"] {
  color: var(--crai-accent-strong) !important;
}

/* Empty states — un poco más de calidez */
.sale-empty {
  border-color: #dde8e6;
  background: #fbfefd;
}
.sale-empty-icon {
  background: var(--crai-accent-soft);
  color: var(--crai-accent-strong);
}

/* ----------------------------------------------------------
   11) MODALES — refinamiento sutil
   ---------------------------------------------------------- */
.modal {
  border-color: #e3e8ed;
  box-shadow: 0 20px 60px rgba(12, 30, 28, 0.14), 0 8px 20px rgba(12,30,28,0.08);
}
.modal-head {
  border-bottom-color: #eef2f4;
  background: #fbfcfd;
}
.modal-head strong {
  letter-spacing: -0.015em;
  color: #182028;
}
.modal-foot {
  border-top-color: #eef2f4;
  background: #fbfcfd;
}
.modal-backdrop {
  background: rgba(18, 32, 30, 0.28);
  backdrop-filter: blur(2px);
}

/* ----------------------------------------------------------
   12) SWITCH / TOGGLES — acento teal cuando activo
   ---------------------------------------------------------- */
.switch.on {
  background: var(--crai-accent-strong);
}
.switch {
  background: #dfe6e4;
}

/* ----------------------------------------------------------
   13) GRÁFICOS / BARRAS — acento dúo turquesa->verde + chart refinado
   ---------------------------------------------------------- */
.bar-track {
  background: #eef3ee;
}
.bar-track i {
  background: var(--crai-duo);
  opacity: 0.95;
}
/* Alternancia sutil para segunda barra (si hay varias) */
.bar-row:nth-child(2) .bar-track i {
  background: linear-gradient(90deg, #6d9733 0%, #3fa67a 100%);
}

/* --- Chart: contenedor más aireado y profesional --- */
.chart {
  background: #fff;
  border-radius: 12px;
  padding: 14px 10px 6px;
  gap: 8px;
}
.chart-small {
  height: 230px;
}
.chart svg {
  color: var(--crai-accent-strong);
  overflow: visible;
}
/* Líneas de guía muy sutiles, discontinuas */
.chart svg line {
  stroke: #eef2f2;
  stroke-width: 0.7;
  stroke-dasharray: 3 4;
  opacity: 0.9;
}
/* Línea principal más fina y elegante, sin negrita */
.chart svg polyline {
  stroke: #0e6e62;
  stroke-width: 1.6;
  stroke-opacity: 0.92;
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(16,138,122,0.08));
}
/* FIX: el hit-area r=10 no debe pintarse — solo el punto visible */
.chart svg .chart-point circle:first-child {
  fill: transparent !important;
  stroke: transparent !important;
  r: 12px; /* área de toque grande pero invisible */
}
.chart svg .chart-point circle:last-child {
  fill: #0e6e62;
  stroke: #fff;
  stroke-width: 1.35;
  r: 2.4px; /* círculos ~35% más pequeños que r=3.2 original */
  transition: r 0.16s ease, fill 0.16s ease, stroke-width 0.16s ease, filter 0.16s ease;
  vector-effect: non-scaling-stroke;
}
/* Hover: punto crece sutil pero sigue contenido */
.chart svg .chart-point:hover circle:last-child {
  r: 3.6px;
  fill: #0a5e54;
  stroke-width: 1.5;
  filter: drop-shadow(0 1px 3px rgba(16,138,122,0.28));
}
.chart svg .chart-point:active circle:last-child {
  r: 2.8px;
}
.chart-labels {
  color: #8ea0b0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0 4px;
}
.chart-tooltip {
  font-size: 11px !important;
  padding: 6px 9px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(16,30,46,0.14);
}
/* Gris base del donut — mantener sobrio, borde suave turquesa 8% */
.donut {
  box-shadow: 0 0 0 1px rgba(16,138,122,0.08) inset;
}

/* ----------------------------------------------------------
   14) TOOLBAR / FILTROS — coherencia
   ---------------------------------------------------------- */
.toolbar {
  /* no layout */
}
.toolbar label {
  color: #7a8591;
}

/* Paginación si existe (pager.js) — botones con hover teal suave */
.pager button:hover {
  border-color: var(--crai-accent-border);
  color: var(--crai-accent-strong);
}
.pager button.active,
.pager button[aria-current="page"] {
  background: var(--crai-accent-soft);
  border-color: var(--crai-accent-border);
  color: var(--crai-accent-strong);
}

/* ----------------------------------------------------------
   15) AVATARES / USER MINI — acento sutil
   ---------------------------------------------------------- */
.avatar {
  border: 1px solid #e6eaef;
}
.profile-button {
  border-color: #e6eaef;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.profile-button:hover {
  border-color: #d9e2e6;
  box-shadow: 0 1px 4px rgba(16,30,46,0.06);
}

/* ----------------------------------------------------------
   16) SCROLLBAR / SELECCIÓN — detalles de acabado
   ---------------------------------------------------------- */
::selection {
  background: rgba(16, 138, 122, 0.18);
}
::-moz-selection {
  background: rgba(16, 138, 122, 0.18);
}

/* Focus visible global — anillo turquesa */
*:focus-visible {
  outline: 2px solid var(--crai-accent-ring-strong);
  outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none; /* ya tienen ring via box-shadow */
}

/* ----------------------------------------------------------
   16b) ANIMACIONES — colapso/despliegue ligero + carga con estética
   ---------------------------------------------------------- */
@keyframes craiFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes craiShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
/* Entrada suave al cambiar de pestaña (sin exagerar) */
.content > .page-head,
.content > .grid,
.content > .dashboard-grid,
.content > .card,
.content > .pos-layout,
.content > .sale-layout {
  animation: craiFadeIn 0.26s ease-out;
}
/* Estado Cargando… — puntos animados . .. ... siempre en movimiento */
@keyframes craiDots {
  0%   { content: "Cargando."; }
  33%  { content: "Cargando.."; }
  66%  { content: "Cargando..."; }
  100% { content: "Cargando."; }
}
.content > .card.crai-loading {
  position: relative;
  overflow: hidden;
  text-indent: -9999px;
  min-height: 72px;
  display: grid;
  place-items: center;
  background: linear-gradient(90deg, #ffffff 0%, #f3f8f7 50%, #ffffff 100%);
  background-size: 200% 100%;
  animation: craiShimmer 1.35s infinite linear, craiFadeIn 0.26s ease-out;
}
.content > .card.crai-loading::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--crai-duo);
  opacity: 0.28;
}
.content > .card.crai-loading::after {
  content: "Cargando.";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-indent: 0;
  color: #5a6b7a;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  animation: craiDots 1.15s infinite steps(1);
}

/* ----------------------------------------------------------
   17) RESPONSIVE — asegurar que nada rompe en móvil
   No tocar layout, solo asegurar que overrides no interfieren
   ---------------------------------------------------------- */
@media (max-width: 820px) {
  .nav button.active {
    box-shadow: inset 3px 0 0 var(--crai-accent), 0 1px 4px rgba(16,138,122,0.10);
  }
  .pos-total strong {
    font-size: 28px !important; /* levemente menor en móvil pero sigue jerárquico */
  }
}
@media (max-width: 560px) {
  .btn.primary {
    box-shadow: 0 1px 4px rgba(16,138,122,0.18);
  }
}

/* ----------------------------------------------------------
   18) PRINT / REDUCED MOTION — respeto
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}
@media print {
  .sidebar, .topbar, .menu-toggle, .sidebar-overlay {
    display: none !important;
  }
  .card {
    box-shadow: none !important;
    border-color: #e5e7eb !important;
  }
}

/* ----------------------------------------------------------
   19) COMPATIBILIDAD — asegurar que POS sea la parte más clara
   No agregar fondos coloreados a POS, mantener blanco/espacio
   ---------------------------------------------------------- */
.pos-layout .card {
  background: #fff;
}
.pos-layout .card.card-pad {
  /* padding ya en base, no duplicar */
}

/* Evitar que cualquier regla sature: anular posibles excesos */
.card.metric,
.card.card-pad,
.filter-toolbar,
.modal {
  /* nunca fondo coloreado completo */
}

/* Logo: nunca repetir dentro de módulos (no agregar reglas que lo inyecten) */
/* (esta capa no agrega logos) */

/* ----------------------------------------------------------
   20) CAJA → NAVEGACIÓN: resaltado breve del destino
   ---------------------------------------------------------- */
.nav button.nav-highlight {
  animation: navPulse 1000ms ease-out;
}
@keyframes navPulse {
  0% { background: var(--crai-accent-soft); box-shadow: inset 3px 0 0 var(--crai-accent); }
  40% { background: var(--crai-accent-soft-2); box-shadow: inset 3px 0 0 var(--crai-accent); }
  100% { background: transparent; box-shadow: none; }
}

/* ----------------------------------------------------------
   21) SIDEBAR — transición real 260ms (persistente en DOM, sin recrear)
   El sidebar permanece en el DOM; solo cambia la clase sidebar-collapsed.
   Con transición en width/grid la animación es perceptible y no se dispara
   al navegar (solo cuando cambia el estado colapsado).
   ---------------------------------------------------------- */
.app-shell,
.app-shell.sidebar-collapsed {
  animation: none !important;
}
.sidebar,
.app-shell.sidebar-collapsed .sidebar {
  animation: none !important;
}
/* Transición desktop ya definida en styles.css (260ms). En móvil drawer usa transform */
@media (max-width: 768px) {
  .sidebar {
    transition: transform 260ms cubic-bezier(0.4,0,0.2,1), box-shadow 260ms ease !important;
  }
}

/* ----------------------------------------------------------
   FIX: page-head siempre izquierda (tablet intermedia)
   Reporte: al reducir a vista tablet los títulos se alineaban a la derecha.
   Forzamos izquierda en todos los breakpoints, revisado 1 por 1.
   ---------------------------------------------------------- */
.page-head,
.page-head > div:first-child,
.page-head h1,
.page-head p {
  text-align: left !important;
}
.page-head {
  justify-content: space-between !important;
  align-items: flex-end !important;
}
.page-head > div:first-child {
  flex: 1 !important;
  min-width: 0 !important;
}
@media (max-width: 1100px) {
  .page-head {
    align-items: flex-start !important;
  }
  .page-head > div:first-child {
    width: 100%;
  }
}
@media (max-width: 820px) {
  .page-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .page-head > div,
  .page-head > div:first-child {
    width: 100% !important;
  }
}

/* ----------------------------------------------------------
   Header móvil — distribución equilibrada sin overflow
   Compacta logo, título, botón y perfil solo en pantallas pequeñas.
   Mantiene header de escritorio intacto.
   ---------------------------------------------------------- */
@media (max-width: 600px) {
  .topbar {
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 10px 0 62px !important;
    gap: 8px !important;
  }
  .topbar > div:first-child {
    gap: 8px !important;
  }
  .topbar .brand-logo {
    width: 28px !important;
    height: 28px !important;
  }
  .topbar strong {
    font-size: 14px !important;
    white-space: nowrap;
  }
  .topbar .top-actions {
    gap: 6px !important;
  }
  .topbar .btn.primary.small {
    padding: 6px 8px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }
  .topbar .icon-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }
  .profile-chip {
    padding: 2px !important;
    gap: 0 !important;
  }
  .profile-chip span:last-child {
    display: none !important;
  }
  .profile-chip .avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }
}
@media (max-width: 420px) {
  .topbar strong {
    display: none !important;
  }
}
@media (max-width: 360px) {
  .topbar {
    padding: 0 8px 0 58px !important;
  }
  .topbar > div:first-child {
    gap: 6px !important;
  }
  .topbar .top-actions {
    gap: 4px !important;
  }
  .topbar .btn.primary.small {
    padding: 5px 7px !important;
    font-size: 10px !important;
  }
}

/* ----------------------------------------------------------
    FIN CAPA EXPERIMENTAL
    Para desactivar: comentar/eliminar <link href="css/crai-experimental.css">
    en front/index.html
    ========================================================== */