/* =========================================================================
   HOLZPRO · CAPA DE MARCA Y USABILIDAD (2026-10-29)
   -------------------------------------------------------------------------
   Última capa visual: se carga después de erp-classic-theme.css y de los
   CSS de módulo. No toca estructura, eventos ni nombres del menú, y no
   afecta los PDF (print.css y las ventanas de impresión tienen su estilo).

   Regla de color (una sola, para toda la app):
     - Azul Holzpro  #01547d  navegación, selección, enlaces y botones normales
     - Naranjo acción #c05208 la acción principal de cada pantalla
                              (naranjo de marca #eb6409 oscurecido para que el
                              texto blanco cumpla contraste 4,7:1)
     - Grafito / grises       texto, bordes, superficies (familia gris fría)
     - Verde / ámbar / rojo   solo estados (OK, alerta, error)

   Regla de formas: controles 3 px, contenedores 4 px, insignias redondas.
   ========================================================================= */

/* Todo dentro de @media screen: la impresión de cotizaciones (#printArea)
   y los PDF quedan exactamente como estaban. */
@media screen {

:root {
  --hz-azul: #01547d;
  --hz-azul-osc: #013f5e;
  --hz-azul-suave: #e3eef4;
  --hz-naranjo-marca: #eb6409;
  --hz-naranjo: #c05208;
  --hz-naranjo-osc: #9e4306;

  --primary: var(--hz-azul);
  --primary-dark: var(--hz-azul-osc);
  --accent: var(--hz-naranjo);
  --accent-dark: var(--hz-naranjo-osc);
  --muted: #5f6b74;               /* 4,9:1 sobre el fondo gris */
  --radius-sm: 3px;
  --radius-md: 4px;

  --bs-primary: #01547d;
  --bs-primary-rgb: 1, 84, 125;
  --bs-link-color: #01547d;
  --bs-link-color-rgb: 1, 84, 125;
  --bs-link-hover-color: #013f5e;
  --bs-link-hover-color-rgb: 1, 63, 94;
  --bs-primary-bg-subtle: #e3eef4;
  --bs-primary-border-subtle: #a9c9da;
  --bs-primary-text-emphasis: #013f5e;
  --bs-border-radius: 3px;
  --bs-border-radius-sm: 3px;
  --bs-border-radius-lg: 4px;
  --bs-secondary-color: rgba(37, 45, 51, .78);
  --bs-focus-ring-color: rgba(1, 84, 125, .35);
}

/* ── 1. Botones: azul normal, naranjo solo para la acción principal ───── */
.btn-primary {
  --bs-btn-bg: #01547d; --bs-btn-border-color: #01547d;
  --bs-btn-hover-bg: #013f5e; --bs-btn-hover-border-color: #013f5e;
  --bs-btn-active-bg: #01324b; --bs-btn-active-border-color: #01324b;
  --bs-btn-disabled-bg: #01547d; --bs-btn-disabled-border-color: #01547d;
  --bs-btn-focus-shadow-rgb: 1, 84, 125;
}
.btn-outline-primary {
  --bs-btn-color: #01547d; --bs-btn-border-color: #01547d;
  --bs-btn-hover-bg: #01547d; --bs-btn-hover-border-color: #01547d;
  --bs-btn-active-bg: #013f5e; --bs-btn-active-border-color: #013f5e;
  --bs-btn-disabled-color: #01547d; --bs-btn-disabled-border-color: #01547d;
  --bs-btn-focus-shadow-rgb: 1, 84, 125;
}
.nav-pills { --bs-nav-pills-link-active-bg: #01547d; --bs-nav-link-color: #01547d; --bs-nav-link-hover-color: #013f5e; }
.nav-link { --bs-nav-link-color: #01547d; }

/* La acción principal (.btn-naranja) ya usa var(--accent): queda con el
   naranjo de marca oscurecido. El login usa el mismo. */
#btnLogin { background: var(--hz-naranjo) !important; border-color: var(--hz-naranjo) !important; }
#btnLogin:hover { background: var(--hz-naranjo-osc) !important; }

/* Salir deja de ser el botón más llamativo del encabezado */
.btn-salir {
  background: transparent !important;
  color: rgba(255, 255, 255, .86) !important;
}
.btn-salir:hover { background: rgba(255, 255, 255, .10) !important; color: #fff !important; }

/* Pestaña activa y foco en azul de marca */
.app-tabs .nav-link.active { border-bottom-color: var(--hz-azul); color: var(--hz-azul-osc); }

/* Indicadores: el color lateral solo comunica estado (rojo = atrasado) */
.erp-kpi, .erp-kpi.orange, .erp-kpi.green { border-left-color: var(--hz-azul); }
.erp-kpi.red { border-left-color: var(--danger); }

/* Formas: un solo sistema */
.btn, .form-control, .form-select, .input-group-text, .dropdown-menu,
.omnibox-input-box, .nav-pills .nav-link { border-radius: var(--radius-sm); }
.card, .erp-panel, .totales-box, .modal-content, .accordion,
.accordion-item, .toast, .alert, .list-group { border-radius: var(--radius-md); }
.accordion-item:first-of-type, .accordion-item:first-of-type .accordion-button { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
.accordion-item:last-of-type { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }

/* Fuente única (había restos de Segoe UI y Arial Black) */
body, .logo-hp, .logo-hp * { font-family: var(--font-ui); }

/* ── 2. Interacción: foco visible, presión y números alineados ───────── */
:focus-visible { outline: 2px solid var(--hz-azul); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { box-shadow: 0 0 0 .2rem rgba(1, 84, 125, .30); outline: 0; }
.btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; }
.btn:active:not(:disabled), .btn-naranja:active:not(:disabled), .btn-oscuro:active:not(:disabled) { transform: translateY(1px) !important; }
.table td, .erp-table td, .tbl-cot td, .erp-kpi strong, .totales-box { font-variant-numeric: tabular-nums; }
.erp-page-head p, .erp-panel-head p { text-wrap: pretty; }

/* Botones de encabezado de panel nunca se parten en varias líneas */
.erp-panel-head .btn, .erp-page-head .btn, #btnNuevaOD { white-space: nowrap; flex-shrink: 0; }

/* ── 3. Navegación de escritorio: que quepan las 13 pestañas ─────────── */
.app-tabs { position: relative; }
.app-tabs .nav { overflow-x: auto; scrollbar-width: none; }
.app-tabs .nav::-webkit-scrollbar { display: none; }
.app-tabs .nav-link { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 1399.98px) {
  .app-tabs .nav-link { padding-left: 8px; padding-right: 8px; gap: 4px; }
}
@media (max-width: 1199.98px) {
  /* En pantallas medianas se ocultan los íconos: quedan los nombres de siempre */
  .app-tabs .nav-link > i.fas { display: none; }
  .app-tabs .nav-link { padding-left: 7px; padding-right: 7px; }
}

/* Aviso de "hay más" en barras que se deslizan (lo activa ui-scroll-hint.js) */
.hz-scroll::before, .hz-scroll::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 28px;
  pointer-events: none; opacity: 0; transition: opacity .15s ease; z-index: 2;
}
.hz-scroll::before { left: 0; background: linear-gradient(to right, var(--hz-fade, #e7ebed), transparent); }
.hz-scroll::after  { right: 0; background: linear-gradient(to left, var(--hz-fade, #e7ebed), transparent); }
.hz-scroll.hz-mas-izq::before, .hz-scroll.hz-mas-der::after { opacity: 1; }
.app-tabs.hz-scroll { --hz-fade: #e7ebed; }
.bottom-nav.hz-scroll { --hz-fade: #26343e; }
/* El menú inferior es él mismo el que se desliza: el degradado va "pegado"
   a sus bordes (sticky) para no irse con el contenido */
.bottom-nav.hz-scroll::before, .bottom-nav.hz-scroll::after {
  position: sticky; top: auto; bottom: auto; align-self: stretch; flex: 0 0 28px; width: 28px;
}
.bottom-nav.hz-scroll::before { left: 0; order: -10; margin-right: -28px; }
.bottom-nav.hz-scroll::after  { right: 0; order: 999; margin-left: -28px; }

/* ── 4. Celular ──────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Encabezado: el estado de conexión queda solo como punto de color,
     así nunca empuja el usuario ni Salir fuera de la pantalla */
  #apiBadgeText { display: none !important; }
  .app-navbar { min-width: 0; }
  .omnibox-wrapper { min-width: 0; flex: 1 1 auto; }
  .nav-user { flex: 0 0 auto; }

  /* Menú inferior: Cotizar al lado de Inicio (es la acción que vende) */
  #bnInicio { order: -2; }
  #bnCotizador { order: -1; }
  .bottom-nav { scrollbar-width: none; }
  .bottom-nav::-webkit-scrollbar { display: none; }

  /* Encabezados de panel: si no cabe, los controles bajan a otra línea */
  .erp-panel-head { flex-wrap: wrap; gap: 8px; }
  .erp-panel-head > div:first-child { flex: 1 1 100%; min-width: 0; }

  /* Tablas anchas: se deslizan dentro de su panel, no rompen la página */
  .erp-panel > .erp-table:not(.pc-cards),
  .erp-panel-body > .erp-table:not(.pc-cards),
  .erp-panel > .table:not(.tbl-cot),
  .erp-panel-body > .table:not(.tbl-cot) {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
  }

  /* Legibilidad: base 14 px y nada bajo 12 px */
  body { font-size: 14px; }
  .erp-page-head p, .erp-panel-head p, .erp-kpi small { font-size: 12px; }
  .erp-panel-head h2 { font-size: 14px; }
  .erp-eyebrow, .erp-kpi span, .bottom-nav-item, .badge, .small, small,
  .table th, .erp-table th, .tbl-cot th, .form-label, label { font-size: 12px; }
  .table td, .erp-table td, .tbl-cot td { font-size: 13px; }
  [style*="font-size:9px"], [style*="font-size: 9px"],
  [style*="font-size:9.5px"], [style*="font-size:10px"], [style*="font-size: 10px"],
  [style*="font-size:10.5px"], [style*="font-size: 10.5px"],
  [style*="font-size:11px"], [style*="font-size: 11px"],
  [style*="font-size:11.5px"], [style*="font-size:.7rem"], [style*="font-size:.72rem"],
  [style*="font-size:.75rem"], [style*="font-size:.78rem"] { font-size: 12px !important; }

  /* Controles para el dedo: 44 px de alto; 16 px en campos evita el zoom */
  .btn, .form-control, .form-select, .nav-pills .nav-link, .page-link,
  .accordion-button, .bottom-nav-item { min-height: 44px; }
  .btn-sm { min-height: 40px; min-width: 40px; }
  .form-control, .form-select, .omnibox-input-box { font-size: 16px; }
  .btn-salir, .nav-user-avatar { min-height: 40px; min-width: 40px; }
}

/* ── 5. Escritorio: piso de legibilidad para textos mínimos ──────────── */
@media (min-width: 768px) {
  .erp-eyebrow, .erp-kpi span { font-size: 10px; }
  .erp-kpi small, .erp-panel-head p { font-size: 11px; }
  .omnibox-shortcut, #apiBadge { font-size: 10px !important; }
  .btn, .btn-naranja, .btn-oscuro, .btn-accion { font-size: 11.5px; }
  [style*="font-size:9px"], [style*="font-size: 9px"], [style*="font-size:9.5px"] { font-size: 10.5px !important; }
}

/* ── 6. Movimiento reducido ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .btn:active:not(:disabled), .btn-naranja:active:not(:disabled), .btn-oscuro:active:not(:disabled) { transform: none !important; }
}

} /* fin @media screen */