/* ============================================
   App D'Origen — Tema unificado
   Paleta corporativa + tipografía + variables
   ============================================ */

:root {
  /* Verdes corporativos D'Origen */
  --primary:       #0b542b;
  --primary-light: #1a7040;
  --primary-soft:  rgba(11, 84, 43, 0.06);
  --primary-line:  rgba(11, 84, 43, 0.14);
  --accent:        #6fb85d;
  --accent-soft:   rgba(111, 184, 93, 0.12);

  /* Neutros */
  --bg:            #f5f7f5;
  --surface:       #ffffff;
  --surface-alt:   #f1f5f3;
  --border:        #d8e5dc;
  --border-soft:   #e8eee9;

  /* Texto */
  --text:          #0d1f14;
  --text-muted:    #5a7462;
  --text-soft:     #8aa090;

  /* Estados */
  --danger:        #b91c1c;
  --danger-soft:   rgba(185, 28, 28, 0.08);
  --warning:       #B8862F;
  --warning-soft:  rgba(184, 134, 47, 0.08);
  --success:       #16803d;
  --success-soft:  rgba(22, 128, 61, 0.08);

  /* Layout */
  --radius:        8px;
  --radius-lg:     12px;
  --shadow:        0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg:     0 8px 24px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%;
  /* El body no scrollea de lado JAMÁS. Las páginas fuera del armazón
     (login, mi-ruta, la entrada pública) no pasan por .main y necesitan
     esta red igual que las demás.
     Dos declaraciones a propósito: `clip` es lo correcto pero es CSS
     reciente — un Safari que no lo entienda se queda con `hidden`. */
  overflow-x: hidden;
  overflow-x: clip;
  /* Y el REBOTE elástico de iOS: aunque no haya nada que desplazar, un
     arrastre lateral "tiraba" de la página entera y asomaban huecos
     blancos por los bordes. Esto lo apaga; el overflow no puede. */
  overscroll-behavior-x: none;
}
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Utilidad: ocultar */
.hidden { display: none !important; }

/* Spinner común */
.spinner {
  width: 20px; height: 20px; border: 2.5px solid var(--border);
  border-top-color: var(--primary); border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════
   CUSTOM SELECT — reemplaza el <select> nativo en toda la app.
   Ver assets/js/custom-select.js (window.enhanceSelects()).
   ══════════════════════════════════════════════════════════ */
/* display:block (no inline-block): dentro de un flex-item se ajusta al
   contenido igual que el <select> nativo; dentro de un grid-item hereda el
   stretch por defecto de CSS Grid y ocupa toda la celda — así el wrapper
   reproduce el ancho que tenía el <select> original sin tener que
   adivinar el contexto de cada página. */
.csel-wrap { position: relative; display: block; }
.csel-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }

.csel-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 36px; padding: 0 12px;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  background: #fff; color: var(--text);
  font-size: 13px; font-weight: 500; font-family: inherit;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.csel-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel-btn svg { flex-shrink: 0; color: var(--text-muted); transition: transform .15s, color .15s; }
.csel-btn:hover { border-color: var(--primary-light); color: var(--primary); }
.csel-btn:hover svg { color: var(--primary); }
.csel-wrap.open .csel-btn { border-color: var(--primary); color: var(--primary); }
.csel-wrap.open .csel-btn svg { color: var(--primary); transform: rotate(180deg); }

.csel-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 100%; max-height: 300px; overflow-y: auto;
  background: #fff; border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  animation: cselIn .16s ease;
}
.csel-panel.hidden { display: none; }
/* Cuando abrir hacia la derecha lo cortaría contra el borde del modal/
   ventana (ver assets/js/custom-select.js), se alinea por la derecha. */
.csel-panel.csel-panel-right { left: auto; right: 0; transform-origin: top right; }
.csel-panel::-webkit-scrollbar { width: 8px; }
.csel-panel::-webkit-scrollbar-track { background: transparent; }
.csel-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.csel-panel::-webkit-scrollbar-thumb:hover { background: var(--text-soft); }

@keyframes cselIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.csel-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 8px 10px; border: none; border-radius: 8px;
  background: transparent; color: var(--text); white-space: nowrap;
  font-size: 13px; font-weight: 500; font-family: inherit; text-align: left; cursor: pointer;
  transition: background .15s, color .15s;
}
.csel-item:hover { background: var(--surface-alt); }
.csel-item.active { color: var(--primary); font-weight: 700; background: var(--primary-soft); }
.csel-item svg { flex-shrink: 0; color: var(--primary); opacity: 0; }
.csel-item.active svg { opacity: 1; }
.csel-item-disabled { opacity: .45; cursor: not-allowed; }

/* ── Custom Date Picker (assets/js/custom-datepicker.js) ─────────── */
.cdp-wrap { position: relative; display: block; }
.cdp-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.cdp-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 36px; padding: 0 12px;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  background: #fff; color: var(--text);
  font-size: 13px; font-weight: 500; font-family: inherit;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.cdp-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdp-btn-label.cdp-placeholder { color: var(--text-soft); }
.cdp-btn svg { flex-shrink: 0; color: var(--text-muted); transition: color .15s; }
.cdp-wrap.open .cdp-btn { border-color: var(--primary); color: var(--primary); }
.cdp-wrap.open .cdp-btn svg { color: var(--primary); }

.cdp-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  width: 280px;
  background: #fff; border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  animation: cselIn .16s ease;
}
.cdp-panel.hidden { display: none; }
/* Colgado del body mientras está abierto, para que ningún contenedor con
   scroll (el cuerpo de un modal) lo recorte. Ver positionPanel en
   assets/js/custom-datepicker.js. */
.cdp-panel.cdp-panel-flotante { position: fixed; z-index: 3200; }
.cdp-panel.cdp-panel-right { left: auto; right: 0; transform-origin: top right; }

.cdp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cdp-mes { font-size: 13.5px; font-weight: 700; color: var(--text); text-transform: capitalize; }
.cdp-nav {
  width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent;
  color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .12s, color .12s;
}
.cdp-nav:hover { background: var(--surface-alt); color: var(--primary); }

.cdp-dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.cdp-dow span { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--text-soft); text-transform: uppercase; }

.cdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cdp-day {
  width: 100%; aspect-ratio: 1; border: none; border-radius: 8px; background: transparent;
  color: var(--text); font-size: 12.5px; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.cdp-day:hover { background: var(--surface-alt); }
.cdp-day-other { color: var(--text-soft); opacity: .55; }
.cdp-day-today { font-weight: 800; color: var(--primary); }
.cdp-day-selected { background: var(--primary); color: #fff; font-weight: 700; }
.cdp-day-selected:hover { background: var(--primary); }
.cdp-day-disabled { color: var(--text-soft); opacity: .35; cursor: not-allowed; }
.cdp-day-disabled:hover { background: transparent; }
.cdp-foot-btn[disabled] { color: var(--text-soft); opacity: .5; cursor: not-allowed; }
.cdp-foot-btn[disabled]:hover { text-decoration: none; }

.cdp-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.cdp-foot-btn {
  border: none; background: transparent; color: var(--primary);
  font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; padding: 4px 6px;
}
.cdp-foot-btn:hover { text-decoration: underline; }

/* ── Custom Time Picker (assets/js/custom-timepicker.js) ─────────── */
.ctp-wrap { position: relative; display: block; }
.ctp-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.ctp-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 36px; padding: 0 12px;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  background: #fff; color: var(--text);
  font-size: 13px; font-weight: 500; font-family: inherit; font-variant-numeric: tabular-nums;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.ctp-btn-label.ctp-placeholder { color: var(--text-soft); }
.ctp-btn svg { flex-shrink: 0; color: var(--text-muted); transition: color .15s; }
.ctp-wrap.open .ctp-btn { border-color: var(--primary); color: var(--primary); }
.ctp-wrap.open .ctp-btn svg { color: var(--primary); }

.ctp-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  width: 190px;
  background: #fff; border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  animation: cselIn .16s ease;
}
.ctp-panel.hidden { display: none; }
.ctp-panel.ctp-panel-flotante { position: fixed; z-index: 3200; }
.ctp-panel.ctp-panel-right { left: auto; right: 0; transform-origin: top right; }

.ctp-cols { display: flex; gap: 8px; }
.ctp-col-wrap { flex: 1; min-width: 0; }
.ctp-col-head {
  text-align: center; font-size: 10.5px; font-weight: 700; color: var(--text-soft);
  text-transform: uppercase; margin-bottom: 4px;
}
.ctp-col {
  position: relative; /* offsetParent para que offsetTop de .ctp-opt sea relativo a esta columna, no al panel */
  max-height: 168px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--border-soft); border-radius: 8px; padding: 4px;
}
.ctp-col::-webkit-scrollbar { width: 6px; }
.ctp-col::-webkit-scrollbar-track { background: transparent; }
.ctp-col::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.ctp-opt {
  flex-shrink: 0; height: 28px; border: none; border-radius: 6px; background: transparent;
  color: var(--text); font-size: 13px; font-weight: 600; font-family: inherit; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .12s, color .12s;
}
.ctp-opt:hover { background: var(--surface-alt); }
.ctp-opt.active { background: var(--primary); color: #fff; }
.ctp-opt.active:hover { background: var(--primary); }

.ctp-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.ctp-foot-btn {
  border: none; background: transparent; color: var(--primary);
  font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; padding: 4px 6px;
}
.ctp-foot-btn:hover { text-decoration: underline; }

/* Cuando abajo no cabe (una tabla con scroll propio, las últimas filas), el
   panel se abre hacia arriba. Ver positionPanel en assets/js/custom-select.js. */
.csel-panel.csel-panel-up {
  top: auto; bottom: calc(100% + 6px); transform-origin: bottom left;
}
.csel-panel.csel-panel-up.csel-panel-right { transform-origin: bottom right; }


/* ── Móvil ──────────────────────────────────────────────────────── */

/* El panel de un desplegable con textos largos (asesoras, clientes) heredaba
   el nowrap de sus opciones y se salía de la pantalla por la derecha. */
.csel-panel { max-width: min(340px, calc(100vw - 24px)); }
.csel-item span { overflow: hidden; text-overflow: ellipsis; }

/* Safari en iPhone hace ZOOM AUTOMÁTICO al enfocar cualquier campo con letra
   menor de 16px — y casi todos los de la app van a 13px. Ese zoom es una de
   las causas del "scroll lateral": amplía la página y corta el título por la
   izquierda. Ya estaba resuelto a mano en el chatbot y en mi-ruta; esto lo
   resuelve para TODA la app de una vez. El !important es deliberado: tiene
   que ganar a los 13px de cada módulo sin ir fichero a fichero. */
@media (max-width: 900px) {
  input[type="text"], input[type="search"], input[type="number"],
  input[type="email"], input[type="password"], input[type="tel"],
  input[type="date"], input[type="time"], select, textarea {
    font-size: 16px !important;
  }
}


/* Donde SÍ se desliza de lado (tablas anchas, la fila de pestañas), el
   gesto muere en su contenedor Y sin goma: `none`, no `contain` — contain
   evitaba arrastrar la página detrás, pero el contenedor seguía teniendo
   su PROPIO rebote elástico: la tabla se estiraba y asomaban huecos
   blancos por arriba y por los lados. Con none, al llegar al tope se para
   en seco. La lista cubre todos los contenedores con scroll horizontal de
   la app; un selector que no exista en una página no molesta. */
.page-tabs, .rut-tabla-wrap, .ped-table-wrap, .env-table-wrap,
.adm-table-wrap, .pal-table-wrap, .an-tabla-wrap, .met-pedidos-wrap,
.prop-table-wrap, .rep-detalle, .rut-import-preview, .cl-table-wrap,
.prod-table-wrap, .cart-table-scroll, .catg-seg-tabla, .ped-tabla-wrap,
.ges-tabla-wrap {
  overscroll-behavior: none;
}

/* ── Móvil: UNA sola dirección de scroll por página ──────────────
   Las tablas de lista iban dentro de un marco con max-height y scroll
   propio en LOS DOS ejes: al intentar bajar por la página, el dedo caía
   sobre la tabla, el gesto se quedaba atrapado dentro y cualquier
   arrastre un poco diagonal la movía de lado — "puedo arrastrar hacia
   los lados y es muy incómodo" (JM, con razón). En móvil el marco pierde
   la altura fija: la página escrolla en vertical como un todo (un solo
   sitio donde bajar) y el marco solo se desliza en horizontal, y solo
   si la tabla es de verdad más ancha que la pantalla.
   Se paga un precio pequeño: la cabecera de la tabla deja de quedarse
   pegada arriba al bajar. A cambio, el scroll deja de pelear contigo.
   Los marcos DENTRO de un modal (líneas de pedido) no están en la lista:
   un modal sí necesita su scroll interno. !important a propósito: pisa
   el max-height que cada módulo declara en su propio CSS, que carga
   después que este fichero. */
@media (max-width: 900px) {
  .cl-table-wrap, .prod-table-wrap, .ped-table-wrap, .env-table-wrap,
  .adm-table-wrap, .an-tabla-wrap, .an-tabla-alta,
  .pal-table-wrap {
    max-height: none !important;
    min-height: 0 !important;
    overflow-x: auto;
    overflow-y: hidden; /* la altura es la del contenido: nunca hay corte */
  }
}