/* BOOMZAIR Taller — estilo
   Lenguaje visual (08-10-2026): el «App Shell» del panel de administración de Shopify.
   · Menú lateral negro (#0A0A0A) de 240 px, fundido con el marco oscuro que rodea la ventana.
   · Dentro del marco, un gran panel blanco con esquinas redondeadas (16 px), separado del marco por 5 px arriba,
     a la derecha y abajo: una ventana independiente que se desplaza por dentro.
   · Sobre el panel, tarjetas blancas con contorno sutil y sombra suave; acento negro #101010 en botones y
     selecciones. Tipografía Inter (archivos propios en assets/fonts, con respaldo del sistema).
   Los nombres de las variables antiguas (--oro, --papel, --tinta…) se conservan para no tocar las pantallas. */
/* Tipografía Inter (licencia OFL), servida desde assets/fonts: sin depender de internet ni de Google. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/inter-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/inter-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --marco: #0a0a0a;          /* fondo exterior de la aplicación: el marco que rodea la ventana y el menú lateral */
  --lateral: #0a0a0a;        /* menú lateral: el mismo negro del marco (un solo bloque) */
  --fondo: #ffffff;          /* el gran panel claro de contenido */
  --panel: #ffffff;          /* tarjetas y tablas */
  --panel-2: #fbfbfb;        /* superficie de contenido secundaria: cajas internas, fondo de ventanas */
  --panel-3: #f7f7f7;        /* resalte suave: encabezados de tabla, selección, filas al pasar */
  --lateral-ancho: 240px;    /* ancho del menú (como en Shopify) */
  --marco-gap: 5px;          /* separación entre el panel y el marco */
  --tinta: #101010;          /* acento principal */
  --tinta-2: #303030;        /* acento más claro: botón corriente, texto fuerte secundario */
  --oro: #c9c9c9;            /* (nombre heredado) gris claro para acentos sobre fondos oscuros */
  --oro-claro: #ebebeb;
  --grafito: #4a4a4a;
  --acento-fondo: #f3f3f3;
  --papel: #ffffff;
  --blanco: #ffffff;
  --texto: #1a1a1a;
  --texto-suave: #616161;
  --texto-tenue: #8a8a8a;
  --linea: #e3e3e3;
  --linea-suave: #ebebeb;
  --linea-fuerte: #c9c9c9;
  --verde: #1f6b45;
  --rojo: #b3372f;
  --azul: #2f5f8f;
  --ambar: #8a5a00;
  --radio: 12px;
  --radio-ventana: 16px;     /* curvatura de las esquinas del panel */
  --sup: 0px;                /* (heredado) ya no hay barra superior: los elementos fijos se pegan al borde del panel */
  --sombra: 0 1px 0 rgba(26,26,26,.07), 0 2px 8px rgba(26,26,26,.05);
  --sombra-alta: 0 8px 24px rgba(26,26,26,.10), 0 1px 0 rgba(26,26,26,.07);
  --sombra-flotante: 0 24px 64px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 14px/1.5 Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--marco);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* ---------- App Shell: menú negro + marco oscuro + panel claro ---------- */
.app { display: flex; height: 100vh; height: 100dvh; }
body.vercomo { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
body.vercomo .app { flex: 1; min-height: 0; height: auto; }

.sidebar {
  width: var(--lateral-ancho); flex-shrink: 0; height: 100%;
  background: var(--lateral); color: #dcdcdc;
  display: flex; flex-direction: column; min-height: 0;
}
.marca { display: flex; align-items: center; gap: 9px; padding: 16px 18px 10px; min-width: 0; white-space: nowrap; flex-wrap: wrap; }
.marca-wordmark { display: block; width: 100%; max-width: 170px; height: auto; }   /* (08-11-2026) el logotipo BOOMZAIR (assets/marca/wordmark*.png) en vez del símbolo + texto */
.sidebar .marca .marca-sub { width: 100%; }
.marca-gema { display: inline-block; width: 18px; height: 18px; vertical-align: middle; object-fit: contain; }   /* (08-11-2026) el logo de la marca (assets/marca), antes un rombo de texto */
.marca-texto { display: inline-block; color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.marca-sub { display: none; }

.buscar-lat { margin: 2px 12px 6px; }
.buscar-lat input, #buscador_global {
  width: 100%; height: 36px; padding: 0 12px 0 34px; font: inherit; font-size: 13.5px;
  border-radius: 10px; border: 1px solid #393939; background: #393939; color: #fff; box-shadow: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><circle cx='7' cy='7' r='4.5' stroke='%23a6a6a6' stroke-width='1.6' fill='none'/><path d='M10.5 10.5L14 14' stroke='%23a6a6a6' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: 11px center;
}
.buscar-lat input::placeholder { color: #a6a6a6; }
.buscar-lat input:focus { outline: none; background-color: #262626; border-color: #616161; box-shadow: none; }

.tienda-sel { padding: 0; margin: 0 12px 6px; }
.tienda-sel select {
  width: 100%; padding: 7px 28px 7px 12px; font: inherit; font-size: 13px; cursor: pointer;
  border-radius: 10px; border: 1px solid #393939; background: #303030; color: #fff; box-shadow: none;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%23a6a6a6' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center;
}
.tienda-sel select:focus { outline: none; border-color: #616161; box-shadow: none; }
.tienda-sel select option { background: #1a1a1a; color: #fff; }
.tienda-fija { margin: 0 12px 6px; padding: 7px 12px; border-radius: 10px; border: 1px dashed #4a4a4a; color: #c9c9c9; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar nav { flex: 1; min-height: 0; padding: 6px 12px 8px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
.sidebar nav::-webkit-scrollbar { width: 8px; }
.sidebar nav::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 8px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; margin: 1px 0; color: #dcdcdc; font-size: 13.5px; font-weight: 500;
  border-radius: 8px; line-height: 1.3;
}
.sidebar nav a:hover { background: #1f1f1f; text-decoration: none; color: #fff; }
.sidebar nav a.on { background: #262626; color: #fff; font-weight: 600; }
.sidebar nav .ico { width: 20px; text-align: center; color: #a6a6a6; font-size: 14px; }
.sidebar nav a:hover .ico, .sidebar nav a.on .ico { color: #fff; }

.sidebar-pie { padding: 10px 14px 12px; border-top: 1px solid #262626; font-size: 12.5px; color: #a6a6a6; }
.sidebar-pie p { margin: 0 0 8px; display: flex; gap: 4px 10px; flex-wrap: wrap; }
.sidebar-pie a.mini { color: #a6a6a6; text-decoration: none; }
.sidebar-pie a.mini:hover { color: #fff; }
.quien-lat { display: flex; align-items: center; gap: 10px; min-width: 0; }
.quien { color: #fff; font-weight: 600; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.quien small { display: block; color: #a6a6a6; font-size: 11.5px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: #303030; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.salir { margin-left: auto; color: #a6a6a6; font-size: 12px; font-weight: 500; white-space: nowrap; }
.salir:hover { color: #fff; }

/* El panel claro: una ventana independiente dentro del marco, que se desplaza por dentro */
.contenido {
  flex: 1; min-width: 0; min-height: 0;
  margin: var(--marco-gap) var(--marco-gap) var(--marco-gap) 0;
  background: var(--fondo); border-radius: var(--radio-ventana);
  overflow: auto; overscroll-behavior: contain;
  padding: 22px 28px 56px;
  scrollbar-width: thin; scrollbar-color: #c9c9c9 transparent;
}
.contenido:focus { outline: none; }
.contenido::-webkit-scrollbar { width: 10px; height: 10px; }
.contenido::-webkit-scrollbar-thumb { background: #c9c9c9; border-radius: 10px; border: 2px solid #fff; }
.contenido::-webkit-scrollbar-track { background: transparent; }

/* ---------- Encabezados y paneles ---------- */
h1 { font-size: 20px; font-weight: 600; margin: 0 0 4px; letter-spacing: -.01em; }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
h3 { font-size: 14px; font-weight: 600; }
.sub { color: var(--texto-suave); margin: 0 0 18px; font-size: 13.5px; }

.card {
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 18px 20px; margin-bottom: 16px;
  box-shadow: var(--sombra);
}
.card h2 { border: 0; display: block; padding: 0; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.stat { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 18px; box-shadow: var(--sombra); }
.stat .n { font-size: 24px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 12.5px; color: var(--texto-suave); margin-top: 2px; }
.stat.oro .n { color: var(--tinta); }
.stat.rojo .n { color: var(--rojo); }
.stat.verde .n { color: var(--verde); }

/* ---------- Formularios ---------- */
label { display: block; font-size: 13px; font-weight: 500; color: var(--texto); margin: 12px 0 5px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=file], input[type=search], input[type=url], input[type=tel], input[type=datetime-local], select, textarea {
  width: 100%; padding: 8px 12px; font: inherit; font-size: 13.5px;
  border: 1px solid #b5b5b5; border-radius: 8px; background: #fff; color: var(--texto);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(16,16,16,.12); }
input::placeholder, textarea::placeholder { color: #8a8a8a; }
textarea { min-height: 80px; resize: vertical; }
.fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

.btn {
  display: inline-block; padding: 7px 14px; border: 0; border-radius: 8px;
  background: var(--tinta-2); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.35;
  cursor: pointer; text-decoration: none; text-align: center; vertical-align: middle;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.45), 0 1px 1px rgba(0,0,0,.06);
  transition: background .12s;
}
.btn:disabled, .btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  filter: saturate(.55);
  box-shadow: none;
}
.btn:disabled:hover, .btn[disabled]:hover { transform: none; filter: saturate(.55); }
.btn:hover { background: #1a1a1a; text-decoration: none; color: #fff; }
/* Acción principal: negro pleno; el .btn corriente queda un punto más claro para marcar jerarquía */
.btn-oro { background: var(--tinta); color: #fff; }
.btn-oro:hover { background: #2b2b2b; color: #fff; }
.btn-linea { background: #fff; color: var(--texto); border: 1px solid var(--linea); padding: 6px 13px; box-shadow: inset 0 -1px 0 #c9c9c9, 0 1px 1px rgba(0,0,0,.04); }
.btn-linea:hover { background: #f7f7f7; color: var(--texto); }
.btn-rojo { background: var(--rojo); }
.btn-rojo:hover { background: #8e1f0b; }
.btn-chico { padding: 4px 10px; font-size: 12.5px; font-weight: 500; border-radius: 7px; }
.btn-linea.btn-chico { padding: 3px 9px; }

/* ---------- Tablas ---------- */
table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); }
.card, .desliza { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #c9c9c9 #f1f1f1; }
.card table { margin: 0; }
th, td { white-space: nowrap; }

/* Barra de desplazamiento visible y discreta */
.card::-webkit-scrollbar, .desliza::-webkit-scrollbar { height: 12px; }
.card::-webkit-scrollbar-track, .desliza::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.card::-webkit-scrollbar-thumb, .desliza::-webkit-scrollbar-thumb { background: #c9c9c9; border-radius: 10px; border: 2px solid #f1f1f1; }
.card::-webkit-scrollbar-thumb:hover, .desliza::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
th {
  text-align: left; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--texto-suave); background: var(--panel-2);
  padding: 9px 12px; border-bottom: 1px solid var(--linea); border-right: 1px solid #f0f0f0; border-top: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 2;
}
th:first-child { border-left: 1px solid var(--linea); border-top-left-radius: 10px; }
th:last-child { border-top-right-radius: 10px; border-right: 1px solid var(--linea); }
td {
  padding: 9px 12px; vertical-align: middle; font-size: 13.5px;
  border-bottom: 1px solid var(--linea); border-right: 1px solid #f0f0f0;
}
td:first-child { border-left: 1px solid var(--linea); }
td:last-child { border-right: 1px solid var(--linea); }
tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }
tr:hover td { background: #f7f7f7; }

/* En papel: nada de scroll recortado, encabezados estáticos, filas filtradas fuera */
@media print {
  .card, .desliza { overflow: visible !important; }
  table { width: 100% !important; }
  th, td { white-space: normal !important; }
  th { position: static !important; }
  tr[data-filtrada="1"] { display: none !important; }
  .filtro-tabla { display: none !important; }
}
tr[data-filtrada="1"] { display: none; }
.filtro-tabla { margin: 0 0 10px; display: flex; gap: 8px 16px; align-items: center; flex-wrap: wrap; }
.filtro-tabla input { width: 100%; max-width: 340px; padding: 7px 12px; border: 1px solid var(--linea); border-radius: 8px; font-size: 13.5px; box-shadow: none; }
.filtro-tabla input:focus { border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(16,16,16,.10); }
/* Tablas largas: de a 60 filas (las demás páginas no cuestan nada al navegador); en papel salen todas */
tr[data-paginada="1"] { display: none; }
/* Mientras la página carga (antes de que el JavaScript arme las páginas de cada tabla) las filas de las páginas 2 y siguientes ya nacen
   ocultas: el navegador no las dibuja para esconderlas un instante después (12-10-2026). Las mismas tablas que pagina header.php. */
html.tabla-pre .contenido .card table:not(.compacta):not([data-sin-orden]):not(#tpiedras):not(details table):not(.rep table) > tbody > tr:nth-child(n+62) { display: none; }
.pagina-tabla { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12.5px; color: var(--texto-suave); }
div.pagina-tabla { margin: 10px 0 0; }
.pagina-tabla span { margin-right: 6px; }
.pagina-tabla button { border: 1px solid var(--linea); background: #fff; border-radius: 7px; padding: 3px 9px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--texto); }
.pagina-tabla button:hover { background: #f7f7f7; border-color: #c9c9c9; }
.pagina-tabla button.activo { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.pagina-tabla button:disabled { opacity: .4; cursor: default; }
@media print { tr[data-paginada="1"] { display: table-row; } .pagina-tabla { display: none !important; } }
th.ordenable { cursor: pointer; user-select: none; }
th.ordenable:hover { background: #f1f1f1; color: var(--texto); }
th .flecha-orden { opacity: .55; font-size: 10px; margin-left: 4px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mini { font-size: 12px; color: var(--texto-suave); }

/* ---------- Badges de estado (tonos del admin de Shopify) ---------- */
.badge { display: inline-block; padding: 2px 9px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.45; }
.b-gris   { background: #e3e3e3; color: #303030; }
.b-azul   { background: #e0f0ff; color: #00527c; }
.b-morado { background: #ede4fb; color: #5c3f96; }
.b-verde  { background: #cdfee1; color: #0c5132; }
.b-teal   { background: #d8f3f0; color: #1a6b63; }
.b-ambar  { background: #ffe7c7; color: #5e4200; }
.b-lima   { background: #e8f3cf; color: #4a6416; }
.b-rojo   { background: #fedad9; color: #8e1f0b; }
.b-naranja{ background: #ffe0c2; color: #7a3d00; }

/* Desplegable-píldora: el selector de estado ES el badge (un solo elemento, desliza y cambia) */
select.sel-estado, select.sel-tipo {
  appearance: none; -webkit-appearance: none;
  border: 1px solid rgba(0,0,0,.08); box-shadow: none;
  border-radius: 999px;
  padding: 5px 30px 5px 14px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; width: auto;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%23555' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center;
}
select.sel-estado:hover, select.sel-tipo:hover { filter: brightness(.97); }
select.sel-estado:focus, select.sel-tipo:focus { box-shadow: 0 0 0 3px rgba(16,16,16,.12); }
select.sel-tipo { font-size: 12px; padding: 4px 26px 4px 12px; }

/* Celdas editables estilo Notion: invisibles hasta que las tocas */
input.celda, textarea.celda { border: 1px solid transparent; background: transparent; padding: 4px 6px; border-radius: 6px; font: inherit; box-shadow: none; }
input.celda:hover, textarea.celda:hover { background: #f3f3f3; }
input.celda:focus, textarea.celda:focus { background: var(--blanco); border-color: var(--tinta); outline: none; box-shadow: 0 0 0 3px rgba(16,16,16,.10); }
input.celda.celda-ok, textarea.celda.celda-ok { border-color: #1f6b45; box-shadow: 0 0 0 3px rgba(31,107,69,.15); }
input.celda.celda-error, textarea.celda.celda-error { border-color: #a12b1f; }
textarea.celda { resize: none; overflow: hidden; display: block; line-height: 1.45; white-space: pre-wrap; word-break: break-word; min-height: 30px; }
textarea.celda-area { field-sizing: content; }   /* el alto sigue al contenido sin JavaScript (Chrome, Edge, Safari recientes) */
.texto-envuelto { white-space: pre-wrap; word-break: break-word; display: block; max-width: 360px; line-height: 1.45; }
.espejo { display: none; }

/* Cajita de sugerencias de clientes (aparece recién al escribir) */
.sug-caja { position: absolute; z-index: 1200; background: var(--blanco); border: 1px solid var(--linea); border-radius: 10px; box-shadow: var(--sombra-alta); max-height: 260px; overflow: auto; padding: 4px; }
.sug-item { padding: 7px 12px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.sug-item:hover, .sug-item.activo { background: #f3f3f3; }

/* Chips de fotos adjuntas */
.chip-foto { display: inline-block; background: #f3f3f3; border: 1px solid var(--linea); border-radius: 8px; padding: 2px 8px; margin: 3px 4px 0 0; font-size: 12px; white-space: nowrap; }
a.chip-foto:hover { background: #e3e3e3; }

/* Mango para mover columnas */
.col-mango { cursor: grab; opacity: .30; margin-right: 5px; user-select: none; font-size: 11px; }
th:hover .col-mango { opacity: .85; }
th.col-arrastrando { opacity: .55; }
th.col-destino-izq { box-shadow: inset 4px 0 0 var(--tinta); }
th.col-destino-der { box-shadow: inset -4px 0 0 var(--tinta); }

/* Insignia de pendientes en el menú (estilo notificación) */
.aviso-menu { margin-left: auto; background: #303030; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 7px; min-width: 22px; text-align: center; }   /* contador de pendientes, como el «257» junto a Pedidos en Shopify */
.sidebar nav a.on .aviso-menu { background: #3a3a3a; }
body.ordenando .aviso-menu { display: none; }

/* ---------- Barra de progreso (producción) ---------- */
.progreso { background: #e3e3e3; border-radius: 20px; height: 10px; overflow: hidden; min-width: 120px; }
.progreso > i { display: block; height: 100%; background: linear-gradient(90deg, #303030, #8a8a8a); }

/* ---------- Flash ---------- */
.flash { padding: 11px 16px; border-radius: 10px; margin-bottom: 16px; font-weight: 500; font-size: 13.5px; }
.flash-ok { background: #cdfee1; color: #0c5132; border: 1px solid #a8ebc4; }
.flash-error { background: #fedad9; color: #8e1f0b; border: 1px solid #f7b9b5; }

.aviso { background: #f7f7f7; border: 1px solid var(--linea); border-radius: 10px; padding: 11px 16px; margin-bottom: 16px; font-size: 13.5px; }

/* ---------- Login ---------- */
.login-fondo {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--marco);
  padding: 20px;
}
.login-caja { background: var(--blanco); border-radius: 16px; padding: 34px 32px; width: 100%; max-width: 380px; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 30px 60px -24px rgba(0,0,0,.7); }
.login-caja .marca-gema { width: 40px; height: 40px; display: block; }
.login-caja .marca-wordmark { width: 220px; height: auto; display: block; margin: 0 auto 6px; }
.login-caja .marca-texto { color: var(--tinta); font-size: 20px; display: block; margin-top: 4px; }
.login-caja .marca-sub { display: block; margin: 0 0 10px; color: var(--texto-suave); }

/* ---------- Cotizador ---------- */
.panel-resultado { background: var(--tinta); color: #e3e3e3; border-radius: var(--radio); padding: 20px; position: sticky; top: calc(var(--sup) + 16px); box-shadow: var(--sombra-alta); }
.panel-resultado h2 { color: #fff; border-bottom: 1px solid rgba(255,255,255,.18); padding-bottom: 8px; }
.panel-resultado .linea-r { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,.14); font-size: 13.5px; }
.panel-resultado .linea-r b { font-variant-numeric: tabular-nums; }
.panel-resultado .total-r { font-size: 26px; color: #ffffff; font-weight: 700; margin-top: 10px; }
.panel-resultado .gan-r { color: #9fd8b4; }

/* ---------- Documento de cotización (vista cliente) ---------- */
.doc { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 34px 38px; max-width: 760px; box-shadow: var(--sombra); }
.doc-cab { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--tinta); padding-bottom: 14px; margin-bottom: 20px; }
.doc-empresa { font-size: 22px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.doc-empresa small { display: block; font-size: 11px; letter-spacing: .2em; color: var(--texto-suave); }
.doc-folio { text-align: right; font-size: 13px; color: var(--texto-suave); }
.doc-folio b { display: block; font-size: 17px; color: var(--texto); }
.doc table td, .doc table th { padding: 8px 10px; }
.doc-total { text-align: right; font-size: 22px; font-weight: 800; margin-top: 12px; }
.doc-nota { font-size: 12px; color: var(--texto-suave); margin-top: 18px; border-top: 1px solid var(--linea); padding-top: 10px; white-space: pre-line; }

/* ---------- Seguimiento público ---------- */
.pub-fondo { min-height: 100vh; background: var(--fondo); padding: 30px 16px; }
.pub-caja { max-width: 640px; margin: 0 auto; }
.pasos { list-style: none; margin: 20px 0; padding: 0; }
.pasos li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--linea); }
.pasos .punto { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; background: #e3e3e3; color: #8a8a8a; }
.pasos li.hecho .punto { background: var(--verde); color: #fff; }
.pasos li.actual .punto { background: var(--tinta); color: #fff; box-shadow: 0 0 0 4px rgba(16,16,16,.12); }
.pasos li.actual { font-weight: 700; }
.pasos li.pendiente { color: var(--texto-suave); }

/* ---------- Chat IA ---------- */
.chat { max-width: 760px; }
.msj { padding: 12px 16px; border-radius: 12px; margin-bottom: 10px; max-width: 85%; white-space: pre-wrap; }
.msj-yo { background: var(--tinta); color: #fff; margin-left: auto; border-bottom-right-radius: 3px; }
.msj-ia { background: #fff; border: 1px solid var(--linea); border-bottom-left-radius: 3px; box-shadow: var(--sombra); }
.msj-ia::before { content: "✦ Asistente"; display: block; font-size: 11.5px; font-weight: 600; color: var(--texto-suave); margin-bottom: 4px; }

/* ---------- Miniaturas catálogo ---------- */
.foto-mini { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; border: 1px solid var(--linea); background: #f1f1f1; }

/* ---------- Utilidades ---------- */
.derecha { text-align: right; }
/* La última columna (acciones) se encoge a su contenido: el espacio sobrante
   fluye a las columnas de texto, donde se ve natural */
th:last-child, td:last-child { width: 1%; }

/* Ajuste automático de columnas (estilo Excel): cada columna ciñe su contenido,
   el espacio sobrante se reparte parejo — nada se infla */
table.ajustada th, table.ajustada td { width: 1px; }

/* La cotización (.doc) es un DOCUMENTO: el texto envuelve con elegancia, nada sobresale */
.doc table { width: 100%; min-width: 0; }
.doc th, .doc td { white-space: normal; overflow-wrap: anywhere; }
.doc td.num, .doc th.num { white-space: nowrap; }
.doc th:last-child, .doc td:last-child { width: auto; }

.acciones-fila { text-align: right; }
.acciones-fila form { display: inline-block; }
.acciones-fila .btn { margin: 2px 0 2px 6px; }
.link-copiar { display: flex; gap: 6px; }
.link-copiar input { font-size: 12px; }
hr { border: 0; border-top: 1px solid var(--linea); margin: 18px 0; }

/* ---------- Impresión (cotización → PDF) ---------- */
@media print {
  .sidebar, .no-print, .flash { display: none !important; }
  .app { display: block; height: auto; }
  .contenido { padding: 0; max-width: none; margin: 0; border-radius: 0; overflow: visible; height: auto; }
  .doc { border: 0; box-shadow: none; padding: 10px; }
  body { background: #fff; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  /* En pantallas angostas el menú queda arriba (negro) y el panel claro debajo; la página se desplaza normal */
  .app, body.vercomo .app { display: block; height: auto; }
  body.vercomo { display: block; height: auto; }
  .sidebar { width: 100%; height: auto; }
  .marca { padding: 12px 14px 6px; }
  .sidebar nav { display: flex; flex-wrap: wrap; padding: 4px 8px 6px; gap: 2px; overflow: visible; }
  .sidebar nav a { padding: 6px 10px; margin: 0; }
  .sidebar-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px 10px; }
  .sidebar-pie p { margin: 0; }
  .contenido { margin: 0 var(--marco-gap) var(--marco-gap); overflow: visible; min-height: calc(100vh - 120px); padding: 16px 14px 48px; }
  .grid2, .grid3, .grid4 { grid-template-columns: 1fr; }
  .panel-resultado { position: static; }
  .card table { margin: 0; width: 100%; display: block; overflow-x: auto; }
}

/* Confirmaciones del sistema con «No volver a preguntar» (08-10-2026) */
.cfm-fondo { position: fixed; inset: 0; background: rgba(10, 10, 10, .55); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; }
dialog.cfm-fondo { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; box-sizing: border-box; color: inherit; overflow: auto; } dialog.cfm-fondo::backdrop { background: transparent; } dialog.cfm-fondo:not([open]) { display: none; }
.cfm-caja { background: #fff; border-radius: 14px; max-width: 520px; width: 100%; padding: 22px 24px; box-shadow: var(--sombra-flotante); font-size: 14px; color: var(--texto); }
.cfm-tit { font-weight: 600; font-size: 16px; margin: 0 0 6px; }
.cfm-txt { white-space: pre-wrap; line-height: 1.5; }
.cfm-nomas { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 13px; color: var(--texto-suave); cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; }
.cfm-nomas input { margin: 0; accent-color: var(--tinta); }
.cfm-botones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.cfm-botones .btn { min-width: 110px; }
.cfm-botones .cfm-si, .cfm-botones .cfm-ok { background: var(--tinta); color: #fff; }
.cfm-lista { max-height: 50vh; overflow: auto; }
.cfm-item { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--linea); font-size: 13px; }
.cfm-item > div { flex: 1; white-space: pre-wrap; }

/* ---------- (11-11-2026, pedido del dueño) Asistente IA: la conversación (pantalla «Asistente IA» y panel ✦ IA) ----------
   «Elimina el botón Chat, no lo ocultes, elimínalo. Y en su reemplazo crea un botón/chat IA que pueda leer y escribir según los
   privilegios de cada usuario.» El antiguo chat del equipo (botón «Chat», sus estilos y su guion) se eliminó; en su lugar, el botón
   ✦ IA abre el Asistente en un panel a la derecha (como el panel lateral de un navegador), en todas las pantallas. */
.asis { display: flex; flex-direction: column; }
.asis-permisos { font-size: 12.5px; color: #77746c; margin: 2px 0 14px; }
.asis-lista { flex: 1; display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
.asis-msj { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere; }
.asis-msj p { margin: 0 0 4px; } .asis-msj p:last-child { margin-bottom: 0; }
.asis-msj ul, .asis-msj ol { margin: 4px 0 6px; padding-left: 20px; } .asis-msj li { margin: 2px 0; }
.asis-msj code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 5px; font-size: 13px; }
.asis-msj a { word-break: break-all; }
.asis-sep { height: 6px; }
.asis-yo { align-self: flex-end; background: #16161d; color: #fff; border-bottom-right-radius: 6px; }
.asis-ia { align-self: flex-start; background: #fff; border: 1px solid #e6e3dc; border-bottom-left-radius: 6px; }
.asis-quien { font-size: 12px; font-weight: 600; color: #8a8579; margin-bottom: 4px; }
.asis-accion { align-self: flex-start; width: min(88%, 520px); border: 1.5px solid #d9b45a; background: #fffaf0; border-radius: 14px; padding: 12px 14px; font-size: 14.5px; }
.asis-accion.asis-borra { border-color: #d98a8a; background: #fff6f6; }
.asis-accion:not(.asis-pendiente) { border-color: #e2dfd8; background: #faf9f6; }
.asis-acc-tit { font-weight: 700; margin-bottom: 6px; }
.asis-acc-res { line-height: 1.45; color: #2b2a27; white-space: pre-line; }
.asis-botones { display: flex; gap: 8px; margin-top: 10px; } .asis-botones .btn { flex: 1; min-height: 42px; }
.asis-estado { margin-top: 8px; font-size: 13.5px; } .asis-estado.ok { color: #1f7a3d; } .asis-estado.mal { color: #b42318; } .asis-estado.gris { color: #77746c; }
.asis-vacio { color: #77746c; font-size: 14px; }
.asis-sug { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.asis-sug button { border: 1px solid #e2dfd8; background: #fff; border-radius: 999px; padding: 8px 12px; font-size: 13.5px; cursor: pointer; text-align: left; color: inherit; }
.asis-sug button:hover { border-color: #b9b4a8; }
.asis-pensando { align-self: flex-start; color: #8a8579; font-size: 14px; padding: 6px 4px; }
.asis-pensando i { display: inline-block; width: 6px; height: 6px; margin-left: 3px; border-radius: 50%; background: #b9b4a8; animation: asisPunto 1.2s infinite ease-in-out; }
.asis-pensando i:nth-child(2) { animation-delay: .15s; } .asis-pensando i:nth-child(3) { animation-delay: .3s; }
@keyframes asisPunto { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.asis-error { align-self: stretch; background: #fdeceb; color: #8c1d18; border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.asis-form { display: flex; gap: 8px; align-items: flex-end; }
.asis-form textarea { flex: 1; resize: none; min-height: 46px; max-height: 160px; border-radius: 22px; padding: 12px 16px; font-size: 16px; line-height: 1.35; border: 1px solid #dcd8cf; background: #fff; }
.asis-form .btn { border-radius: 22px; min-height: 46px; padding: 0 18px; }
.asis-pie { font-size: 12px; color: #8a8579; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.asis-pie button { background: none; border: 0; color: #8a8579; text-decoration: underline; cursor: pointer; padding: 0; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .asis-pensando i { animation: none; } }

/* El botón ✦ IA (donde estaba «Chat») y su panel a la derecha */
.bzia-boton {
  position: fixed; right: 18px; bottom: 18px; z-index: 9000;
  display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 17px 0 14px; border-radius: 999px; border: 2px solid #fff;
  background: #101010; color: #fff; font: 600 13.5px/1 Inter, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .02em; cursor: pointer;
  box-shadow: 0 3px 12px rgba(0,0,0,.26); transition: transform .12s, background .12s;
}
.bzia-boton:hover { background: #262626; transform: translateY(-1px); }
.bzia-boton:focus-visible, .bzia-ic:focus-visible { outline: 2px solid #d9b45a; outline-offset: 2px; }
.bzia-boton[hidden] { display: none; }
.bzia-ico { font-size: 15px; color: #e8c766; line-height: 1; }
.bzia-panel {
  position: fixed; top: var(--marco-gap, 10px); right: var(--marco-gap, 10px); bottom: var(--marco-gap, 10px); width: 410px; max-width: calc(100vw - 20px); z-index: 9500;
  display: flex; flex-direction: column; background: var(--fondo, #f6f5f1); border-radius: var(--radio-ventana, 14px); overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,.28);
}
.bzia-panel[hidden] { display: none; }
.bzia-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 58px; padding: 0 10px 0 20px; background: #fff; border-bottom: 1px solid var(--linea, #e6e3dc); flex-shrink: 0; }
.bzia-cab b { font-size: 17px; font-weight: 650; }
.bzia-acc { display: flex; gap: 4px; }
.bzia-ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 0; background: none; color: #3a3a3a; cursor: pointer; }
.bzia-ic:hover { background: #f1efe9; }
.bzia-ic svg { width: 20px; height: 20px; }
.bzia-panel .asis { flex: 1; min-height: 0; }
.bzia-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 4px; }
.bzia-panel .asis-msj, .bzia-panel .asis-accion { max-width: 94%; font-size: 14.5px; }
.bzia-panel .asis-accion { width: 94%; }
.bzia-panel .asis-form { padding: 10px 12px 6px; background: var(--fondo, #f6f5f1); }
.bzia-panel .asis-form textarea { font-size: 15px; min-height: 44px; }
.bzia-panel .asis-pie { padding: 0 14px 10px; }
.bzia-falta { background: #fff; border: 1px solid #e6e3dc; border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.45; }
/* Pantalla ancha: el panel queda al lado del contenido (lo empuja, no lo tapa), como el panel lateral de un navegador */
@media (min-width: 1180px) { html.bzia-abierto .contenido { margin-right: calc(410px + 2 * var(--marco-gap, 10px)); } .bzia-panel { box-shadow: none; } }
/* Celular: el panel ocupa toda la pantalla */
@media (max-width: 860px) {
  .bzia-boton { right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  .bzia-panel { top: 0; right: 0; bottom: 0; left: 0; width: auto; max-width: none; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); }
}
html.en-app .bzia-boton, html.en-app .bzia-panel { display: none !important; }   /* la app del celular tiene su propia pestaña «Asistente» */
@media print { .bzia-boton, .bzia-panel { display: none !important; } }

/* ---------- Todo el texto cae dentro de su recuadro (10-10-2026) ----------
   Una URL, un SKU, un correo o un nombre largo sin espacios ya no se sale de la tarjeta: la palabra se corta donde haga falta.
   Las celdas de tabla no cambian (siguen en una línea, con el desplazamiento de la tabla). */
.card, .stat, .cn-canal, .es-card, .pp-kpi, .pc-op, .pos-prod, .aviso, .flash, .ped-caja, .pv-caja,
.grid2 > *, .grid3 > *, .grid4 > *, .cn-grid > *, .pp-grid > * { min-width: 0; max-width: 100%; }
.card, .stat, .cn-canal, .es-card, .pp-kpi, .pc-op, .aviso, .flash, .ped-caja, .pv-caja,
.card h1, .card h2, .card h3, .card p, .card li, .card label, .card .mini, .card .sub, .card dd, .card dt, .card summary, .card small,
.cn-canal b.n, .cn-canal .p, .cn-canal .st, .cn-canal .res, .stat .n, .stat .l, .es-card .r, .es-card .d, .es-card .q, .pp-kpi .t, .pp-kpi .n, .pp-kpi .c, .pp-linea .txt,
h1, h2, h3, p.sub { overflow-wrap: anywhere; word-break: break-word; }
.card img, .card video, .card iframe, .card svg { max-width: 100%; }
.card pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Pestañas del módulo Pedidos: Pedidos · Clientes · Post Venta (11-10-2026) */
.ped-tabs{display:flex;gap:4px;margin:0 0 14px;border-bottom:1px solid var(--linea);align-items:center;flex-wrap:wrap}
.ped-tabs a{padding:8px 14px;font-weight:600;color:var(--texto-suave);border-bottom:2px solid transparent;margin-bottom:-1px}
.ped-tabs a.on{color:var(--texto);border-bottom-color:var(--tinta)}
.ped-tabs a:hover{text-decoration:none;color:var(--texto)}
.ped-tabs a .aviso-menu{position:static;display:inline-block;margin-left:4px;vertical-align:1px}

/* Contenidos: la tira de vistas (Tablero · Lista · Mis tareas · Calendario · Turnos · Nube), también en Nube (12-10-2026) */
.ct-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ct-vistas{display:flex;gap:4px;flex-wrap:wrap;background:#ebebeb;border-radius:10px;padding:4px}
.ct-vistas a{padding:7px 12px;border-radius:8px;text-decoration:none;color:#616161;font-weight:600;font-size:13px}
.ct-vistas a.on{background:#101010;color:#fff}

/* La caja «Entrega» de la ventana del pedido, campo por campo (24-10-2026) */
.pv-ent{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:13px;line-height:1.4;margin-top:2px}
.pv-ent .k{color:var(--texto-suave);white-space:nowrap}
.pv-ent .v{overflow-wrap:anywhere}
.pv-copiar{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;margin-left:6px;padding:2px 4px;border:0;background:transparent;color:#8a8a8a;cursor:pointer;border-radius:5px;font:inherit;font-size:11.5px;line-height:1}
.pv-copiar:hover{background:#efefef;color:#1a1a1a}
.pv-copiar.ok{color:#1f6f3a}
.pv-copiar-todo{margin-left:0;border:1px solid var(--linea);padding:5px 9px;color:#1a1a1a;font-weight:600;font-size:12px}