/* Capa visual comun (rediseño 27/10/2026): tarjetas redondeadas, botones tipo pildora con icono, botones
   redondos solo-icono, buscadores en pildora y tablas limpias. Solo presentacion: no cambia ids, funciones
   ni flujos. Todos los colores salen de las variables del tema (tema.js): --bg-black, --panel-dark,
   --panel-darker, --facet-gray, --border-blue, --neon-cyan, --white, --muted. Ningun color fijo nuevo
   (las sombras son negras transparentes). Va despues del <style> de cada pagina para poder ajustar lo de ahi.
   Los iconos los pone ui.js (SVG de linea, sin internet). */

:root {
  --ui-r: 16px;          /* tarjetas */
  --ui-r-in: 12px;       /* tarjetas dentro de tarjetas, campos */
  --ui-pill: 999px;
  --ui-line: var(--border-blue);
  --ui-shadow: 0 1px 2px rgba(0, 0, 0, .22), 0 8px 26px rgba(0, 0, 0, .20);
  --ui-shadow-hover: 0 2px 4px rgba(0, 0, 0, .24), 0 12px 32px rgba(0, 0, 0, .26);
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  :root { --ui-line: color-mix(in srgb, var(--border-blue) 75%, transparent); }
}
/* Temas claros: sombra mas suave */
html[data-tema="azul"], html[data-tema="pastel"] {
  --ui-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 20px rgba(0, 0, 0, .07);
  --ui-shadow-hover: 0 2px 4px rgba(0, 0, 0, .07), 0 10px 28px rgba(0, 0, 0, .11);
}

/* ---------- Tarjetas ---------- */
html .card {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r);
  box-shadow: var(--ui-shadow);
  transition: box-shadow .2s;
}
html details.card > summary { cursor: pointer; padding: 2px 0; }
/* Tarjetas de dentro (notas, paquetes, casos, tickets, llamadas...) */
html .rnote, html .pkg, html .case, html .tk, html .call, html .item, html .acct, html .rep,
html .po-totals, html .payer-box, html .pl-list, html .assign-box, html .rscan-item, html .terms, html .guests,
html .success-box, html .delivery-toggle label, html .grid3 {
  border-radius: var(--ui-r-in);
}
html .modal, html .dlg { border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
html .internal-note, html .alert { border-radius: 10px; }

/* ---------- Tarjetas de indicadores (KPI): titulo arriba, numero grande, en tarjeta ---------- */
html .risk-counts { gap: 10px; }
html .count-chip {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px;
  min-width: 150px; flex: 1 1 150px; max-width: 280px;
  padding: 14px 16px; border: 1px solid var(--ui-line); border-radius: var(--ui-r);
  background: var(--panel-dark); box-shadow: var(--ui-shadow);
}
html .count-chip strong { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.3px; }
html .count-chip span { font-size: 12.5px; line-height: 1.3; }
/* La primera, si no es de un estado (rojo/amarillo/verde), va destacada con el color del tema */
html .risk-counts > .count-chip:first-child:not(.rojo):not(.amarillo):not(.verde) {
  background: var(--neon-cyan); border-color: var(--neon-cyan); color: var(--bg-black);
}
html .risk-counts > .count-chip:first-child:not(.rojo):not(.amarillo):not(.verde) span { color: var(--bg-black); opacity: .78; }
@media (max-width: 640px) {
  html .count-chip { min-width: calc(50% - 5px); flex-basis: calc(50% - 5px); max-width: none; padding: 12px 14px; }
  html .count-chip strong { font-size: 22px; }
}

/* ---------- Botones ---------- */
html button { border-radius: var(--ui-pill); transition: filter .15s, border-color .15s, background-color .15s, box-shadow .15s, transform .12s; }
html button.secondary:hover:not(:disabled) { border-color: var(--neon-cyan); filter: none; }
html button:focus-visible, html a:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }
html button[hidden] { display: none !important; }
/* Con icono (lo marca ui.js): icono + texto en fila */
html button.ui-has-ico { display: inline-flex; align-items: center; justify-content: center; gap: 8px; vertical-align: middle; }
html button.ui-has-ico .ui-emo { display: none; }
/* Si el texto no cabe (botones de ancho fijo de las filas), que el icono no se salga por la izquierda */
html .row-actions button.ui-has-ico, html .pkg-actions button.ui-has-ico { justify-content: flex-start; }
html .ui-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
html button.small .ui-ico { width: 16px; height: 16px; }
/* Solo icono: redondo */
html button.btn-icon, html button.ui-icon-only {
  width: 42px; height: 42px; min-width: 42px; min-height: 42px; padding: 0; gap: 0; aspect-ratio: 1;
}
html button.small.ui-icon-only { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
html button.ui-icon-only .ui-ico { width: 19px; height: 19px; }
/* Clases para usar a mano en paginas nuevas */
html .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--ui-pill); }
html .btn-primary { background: var(--neon-cyan); color: var(--bg-black); border: 1px solid var(--neon-cyan); font-weight: bold; }
html .btn-ghost { background: transparent; color: var(--white); border: 1px solid var(--border-blue); font-weight: normal; }
html .btn-ghost:hover:not(:disabled) { border-color: var(--neon-cyan); background: var(--panel-darker); }
/* Filas de botones de cada nota: que respiren */
html .pkg-actions, html .acts, html .btns, html .rsvp { gap: 8px; }

/* Volver (paginas aparte): pildora contorneada */
html a.back, html body > main > a[href="index.html"]:first-child {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 12px; border: 1px solid var(--ui-line);
  border-radius: var(--ui-pill); background: var(--panel-dark); text-decoration: none; font-size: 14px;
}
html a.back:hover, html body > main > a[href="index.html"]:first-child:hover { border-color: var(--neon-cyan); }

/* Pestañas en pildora */
html .tabs button, html .tabs a { border-radius: var(--ui-pill); }

/* ---------- Campos ---------- */
html input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), html select, html textarea {
  border-radius: var(--ui-r-in);
}
html input:focus, html select:focus, html textarea:focus { box-shadow: 0 0 0 3px var(--ui-ring, transparent); }
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  :root { --ui-ring: color-mix(in srgb, var(--neon-cyan) 22%, transparent); }
}
/* Buscadores: pildora con lupa (la lupa la dibuja ui.js con el color del tema) */
html input.ui-search {
  border-radius: var(--ui-pill); padding-left: 42px;
  background-image: var(--ui-search-ico, none); background-repeat: no-repeat; background-position: 15px 50%; background-size: 18px 18px;
}

/* Codigos de producto: se ven y se guardan en MAYUSCULAS (ui.js las convierte al escribir) */
html input[data-upper] { text-transform: uppercase; }
html input[data-upper]::placeholder { text-transform: none; }

/* 28/10: relacion de despachos (paso 2): imprimir las seleccionadas */
html .dl-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 4px 0 2px; }
html .dl-bar .dl-all { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
html .dl-bar .dl-all input { width: 18px; height: 18px; margin: 0; }

/* Cola 3: filtro de transportadoras en "2. Imprimir rótulos y despachar" */
html .r-carrier { display: flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; }
html .r-carrier[hidden] { display: none; }
html .r-carrier select { width: auto; min-width: 190px; margin: 0; border-radius: var(--ui-pill); padding: 8px 14px; }
@media (max-width: 700px) { html .r-carrier { width: 100%; } html .r-carrier select { flex: 1; min-width: 0; } }

/* Cola 3: por que Escanear esta deshabilitado (faltan productos en el inventario) */
html .scan-why { flex-basis: 100%; order: 10; font-size: 12.5px; color: var(--muted); }
/* Cola 4: lo que SI esta en el inventario, en verde y con el mismo estilo */
html .scan-why.scan-ok { order: 11; color: var(--green, #3fc98a); font-weight: 600; }
/* Cola 4: productos de la nota en cada tarjeta de Pedidos recibidos */
html .r-items { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
html .r-items li { padding: 2px 0 2px 10px; border-left: 3px solid var(--ui-line); }
/* Cola 4: pistola sobre el QR del rotulo (paso 2) */
html .dl-scan { max-width: 360px; margin: 6px 0 0; border-radius: var(--ui-pill); }
html #dl_scan_msg:empty { display: none; }
html button:disabled { opacity: .55; cursor: not-allowed; }

/* Cola 2: comprobante de ingreso de produccion (Pedidos de produccion) */
html .prdoc h3 { margin: 0 0 6px; color: var(--neon-cyan); font-size: 16px; }
html .prdoc p { margin: 4px 0; font-size: 14px; }
html .prdoc table { min-width: 0 !important; margin: 8px 0; }
html .prdoc-sign { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
html .prdoc-sign > div { flex: 1 1 200px; border-top: 1px solid var(--ui-line); padding-top: 6px; font-size: 13.5px; }

/* Cola 2: historial siempre a la vista arriba a la derecha de cada tarjeta de Notas recibidas */
/* La columna de la derecha flota: los datos de la nota siguen a su izquierda (sin hueco) y los botones van debajo */
html .rnote { display: flow-root; }
html .rnote-top { display: block; }
html .rnote-side { float: right; margin: 0 0 8px 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; width: min(440px, 50%); }
html .rnote > .pkg-actions, html .rnote > .rscan { clear: both; }
html .rnote-tl { width: 100%; text-align: left; padding: 6px 10px; border: 1px solid var(--ui-line); border-radius: var(--ui-r-in); background: var(--panel-dark); }
html .rnote-tl .rnote-hist-list { max-height: 320px; }
html .rnote-tl .rnote-hist-list li { padding: 2px 0 6px 22px; font-size: 12.5px; }
html .rnote-tl .rnote-hist-list li::before { top: 7px; }
html .rnote-tl .rnote-hist-list .when { display: inline; font-size: 12px; }
html .rnote-tl .role { color: var(--muted); font-weight: normal; }
html .rnote-tl-more { display: inline-block; margin: 2px 0 0 22px; font-size: 12.5px; }
/* Cola 4: el historial de la nota cerrado por defecto (solo el boton) */
html .rnote-tl.closed { padding: 0; border: 0; background: none; text-align: right; }
html .rnote-tl-btn { margin: 4px 0 0; }
@media (max-width: 700px) {
  html .rnote-side { float: none; width: 100%; margin: 6px 0 8px; align-items: flex-start; }
}

/* Mini historial de cada nota (Notas recibidas) */
html .rnote-hist { margin-top: 10px; border-top: 1px dashed var(--ui-line); padding-top: 8px; }
html .rnote-hist > summary { cursor: pointer; font-size: 13px; color: var(--muted); list-style-position: inside; }
html .rnote-hist[open] > summary { color: var(--neon-cyan); margin-bottom: 6px; }
html .rnote-hist-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto;
  background: linear-gradient(var(--ui-line), var(--ui-line)) 7px 0 / 2px 100% no-repeat; }
html .rnote-hist-list li { position: relative; padding: 4px 0 8px 24px; font-size: 13px; line-height: 1.4; }
html .rnote-hist-list li::before { content: ''; position: absolute; left: 3px; top: 9px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--neon-cyan); box-shadow: 0 0 0 3px var(--panel-darker); }
html .rnote-hist-list li.bad::before { background: var(--muted); }
html .rnote-hist-list .when { display: block; color: var(--muted); font-size: 12px; }
html .rnote-hist-list .what { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }

/* Stickers QR en "1.1 En produccion": casilla por venta, seleccionar todo y la lista de pares para imprimir */
html .stk-pick, html .stk-all { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; color: var(--neon-cyan); margin: 4px 0; }
html .stk-pick input, html .stk-all input, html .stk-list input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex: none; }
html .stk-list { max-height: 55vh; overflow-y: auto; display: grid; gap: 10px; margin-top: 6px; }
html .stk-group { border: 1px solid var(--ui-line); border-radius: var(--ui-r-in); padding: 8px 12px; }
html .stk-sale { display: flex; gap: 8px; align-items: center; cursor: pointer; margin-bottom: 4px; }
html .stk-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px 0 4px 26px; font-size: 14px; cursor: pointer; }
html .stk-row span { flex: 1 1 180px; min-width: 0; }
html .stk-row .stk-qty { width: 72px; margin: 0; padding: 6px 8px; }

/* ---------- Tablas limpias: cabecera con el color del tema, filas sin bordes pesados ---------- */
html th { color: var(--neon-cyan); font-weight: 600; font-size: 12.5px; letter-spacing: .3px; }
html th, html td { border-bottom-color: var(--ui-line); }
html thead th { border-bottom: 1px solid var(--neon-cyan); }
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  html thead th { border-bottom-color: color-mix(in srgb, var(--neon-cyan) 45%, transparent); }
  html tbody tr:hover td { background: color-mix(in srgb, var(--neon-cyan) 5%, transparent); }
}
html .table-wrap { border-radius: var(--ui-r-in); }
@media (max-width: 700px) {
  html #mainContent table:not(.keep-table) tr { border-radius: 14px; border-color: var(--ui-line); padding: 8px 14px; }
}

/* ---------- Chips ---------- */
html .chip, html .tag, html .st, html .kind, html .who-tag { border-radius: var(--ui-pill); }

/* ---------- Menu lateral (index.html) ---------- */
html #sidebar { gap: 4px; padding: 18px 12px; }
html #sidebar > button { border-radius: var(--ui-pill); padding: 10px 14px; gap: 12px; }
html #sidebar > button .ui-ico { width: 18px; height: 18px; opacity: .85; }
html #sidebar > button.active { box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
html #sidebar .brand { border-bottom-color: var(--ui-line); }
html .sidebar-user { border-top-color: var(--ui-line); }
html .sidebar-user .me-card { border-radius: 14px; }
html .sidebar-user > button.secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
html .nav-badge { border-radius: var(--ui-pill); }
html .sidebar-toggle { border-radius: 50%; box-shadow: var(--ui-shadow); }
html .logo-mark { border-radius: 12px; }

/* Boton de tema (tema.js): pildora con icono */
html #tema-btn { gap: 7px; box-shadow: var(--ui-shadow); }
html #tema-btn .ui-ico { width: 17px; height: 17px; }
html #tema-box { border-radius: 16px; }
html #tema-box button { border-radius: 12px; }

/* Subbarra de atajos (bloques.js) */
html .subbar button { border-radius: var(--ui-pill); }

@media print {
  html .card, html .count-chip { box-shadow: none !important; }
}

/* Cola 5: indicador "Mi quincena" arriba de Seguimientos. Colores por estado (oscuro por defecto; claros en los temas claros) */
html .qz { --qz-proceso: #9aa39f; --qz-despachado: #5b95ea; --qz-viajando: #8b78e0; --qz-por_llegar: #2bb8b8; --qz-exitoso: #36b86d; --qz-devuelto: #ec6464; --qz-ambar: #e8ae3a;
  border-radius: 12px; padding: 12px 14px; margin: 10px 0; }
html[data-tema="azul"] .qz, html[data-tema="pastel"] .qz { --qz-proceso: #8a948f; --qz-despachado: #3b7bd8; --qz-viajando: #6a56c9; --qz-por_llegar: #0f9b9b; --qz-exitoso: #1f9d55; --qz-devuelto: #d64545; --qz-ambar: #d99a1e; }
html .qz:empty { display: none; }
html .qz-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
html .qz-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
html .qz-sel { width: auto; margin: 0; padding: 6px 12px; border-radius: var(--ui-pill); }
html .qz-pill { padding: 4px 12px; border-radius: var(--ui-pill); font-weight: 700; font-size: 13px; color: #fff; }
html .qz-pill.ok { background: var(--qz-exitoso); } html .qz-pill.warn { background: var(--qz-ambar); } html .qz-pill.bad { background: var(--qz-devuelto); }
html .qz-pill.none { background: none; color: var(--muted); border: 1px solid var(--ui-line); font-weight: 600; }
html .qz-body { display: grid; grid-template-columns: 136px 1fr 1.25fr; gap: 16px; align-items: center; margin: 10px 0; }
html .qz-ring { flex: none; width: 136px; height: 136px; }
html .qz-big { font-size: 24px; font-weight: 700; fill: currentColor; dominant-baseline: middle; }
html .qz-small { font-size: 10.5px; fill: var(--muted); }
html .qz-meta { fill: var(--qz-ambar); font-weight: 700; }
html .qz-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html .qz-tile { border: 1px solid var(--ui-line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
html .qz-tile b { font-size: 18px; } html .qz-tile span { font-size: 12.5px; color: var(--muted); }
html .qz-bars { width: 100%; height: auto; max-height: 170px; }
html .qz-num { font-size: 12px; font-weight: 700; fill: currentColor; }
html .qz-pills { display: flex; gap: 6px; flex-wrap: wrap; }
html .qz-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; margin: 0; border-radius: var(--ui-pill); border: 1px solid var(--c); background: none; color: inherit; font-size: 13px; cursor: pointer; }
html .qz-btn i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
@media (max-width: 700px) { html .qz-body { grid-template-columns: 1fr; } html .qz-ring { justify-self: center; } }
html tr.pgen-ok td { opacity: .65; }
/* Recibir produccion general: un bloque por nota */
html .pgen-note { border: 1px solid var(--ui-line); border-radius: var(--ui-r-in); padding: 8px 10px; margin: 8px 0; }
html .pgen-note ul { margin: 2px 0 4px; padding-left: 18px; }
html .pgen-note-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
html .pgen-note-count, html .pgen-note-head .chip { margin-left: auto; }

/* ---------- Interaccion suave (nov 2026). Solo CSS, 100 a 180 ms, y solo en controles que hacen algo ---------- */
@media screen {
  html button, html summary, html a.btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  /* Pulsar: respuesta breve, tambien con el dedo. No mueve a los vecinos. */
  html button:not(:disabled):active { transform: scale(.97); }
  /* Mouse: solo donde hay mouse de verdad, para que el efecto no quede pegado despues de tocar */
  @media (hover: hover) and (pointer: fine) {
    html button:not(.secondary):not(.small):not(:disabled):hover { transform: scale(1.02); box-shadow: 0 2px 8px rgba(0, 0, 0, .22); }
    html button.small:not(.secondary):not(:disabled):hover { box-shadow: 0 1px 5px rgba(0, 0, 0, .22); }
    html button.secondary:not(:disabled):hover { background-color: var(--panel-darker, transparent); }
    html a:not(.btn):hover { text-decoration-thickness: 2px; }
    html label:has(> input[type=checkbox]:not(:disabled)):hover, html label:has(> input[type=radio]:not(:disabled)):hover { color: var(--neon-cyan); }
    html select:not(:disabled):hover, html input:not([type=checkbox]):not([type=radio]):not(:disabled):hover, html textarea:not(:disabled):hover { border-color: var(--neon-blue, var(--neon-cyan)); }
  }
  /* Deshabilitado: se distingue y no aparenta estar activo */
  html button:disabled, html select:disabled, html input:disabled, html textarea:disabled { opacity: .55; cursor: not-allowed; filter: none; box-shadow: none; transform: none; }
  /* Campos: el que recibe el foco se resalta, sin cambiar de tamano */
  html input, html select, html textarea { transition: border-color .15s, box-shadow .15s; }
  html input:focus-visible, html select:focus-visible, html textarea:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 1px; border-color: var(--neon-cyan); }
  html input[type=checkbox], html input[type=radio] { accent-color: var(--neon-cyan); cursor: pointer; transition: transform .12s; }
  html input[type=checkbox]:not(:disabled):active, html input[type=radio]:not(:disabled):active { transform: scale(.9); }
  html select { text-overflow: ellipsis; max-width: 100%; }
  html summary:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  html button, html input, html select, html textarea { transition: none !important; }
  html button:hover, html button:active, html input:active { transform: none !important; }
}
@media print { html button, html input { transition: none !important; transform: none !important; } }