/* ==========================================================================
   Plataforma B2B
   Para adaptar los colores a tu marca, cambia las variables de :root.
   ========================================================================== */

/* Paleta tomada del logo: naranja de marca, grises y blanco. */
:root {
  --color-marca: #f0561d;            /* naranja del logo, para acentos */
  --color-primario: #cc4a10;         /* naranja oscuro: botones, enlaces y foco */
  --color-primario-hover: #a63b0c;
  --color-primario-suave: #fdeee7;
  --color-acento: var(--color-marca);
  --color-texto: #2b2b2b;            /* gris oscuro del logo */
  --color-texto-suave: #6b6b6b;
  --color-borde: #e4e4e4;
  --color-fondo: #f7f7f6;
  --color-superficie: #fff;
  --color-exito: #2f7d32;
  --color-exito-suave: #edf6ee;
  --color-error: #c0392b;
  --color-error-suave: #fceeec;
  --color-alerta-suave: #fff3e6;
  --color-alerta-texto: #8a4b12;
  --color-exito-borde: #bcdcbd;
  --color-error-borde: #eec5c0;
  --color-alerta-borde: #f3d3ae;
  --color-neutro-suave: #eef1f4;     /* etiquetas grises y estado «en preparación» */
  --color-neutro-texto: #4a5560;
  --color-info-suave: #e9f0fb;       /* recuadro de la nota de venta */
  --color-info-texto: #1f4f8b;
  --color-tenue: #fafafa;            /* encabezados de tabla y filas al pasar */
  --color-apagado: #f2f2f2;
  --color-texto-medio: #454545;
  --color-borde-fuerte: #c5cedb;
  --color-flotante: #2b2b2b;         /* aviso que aparece abajo al agregar */
  /* Las fotos y los planos vienen con fondo blanco: su marco sigue blanco
     también de noche, o se vería el borde del recorte. */
  --color-foto: #fff;
  /* Las ilustraciones de categoría traen su propio círculo durazno: el fondo
     detrás es el mismo, de día y de noche, para que no se vea el recorte. */
  --color-icono-categoria: #fcefe5;
  --color-barra-precio: #f3c7b3;
  --color-barra-precio-fuera: #e8e8e8;
  --radio: 10px;
  --radio-chico: 6px;
  --sombra: 0 1px 2px rgb(43 43 43 / 5%), 0 2px 6px rgb(43 43 43 / 5%);
  --sombra-flotante: 0 12px 32px rgb(43 43 43 / 16%);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --ancho-maximo: 1240px;
  --alto-cabecera: 68px;
}

/* Modo nocturno ----------------------------------------------------------
   Solo cambia la paleta: el resto de la hoja ya pide sus colores a estas
   variables. Lo activa el atributo que pone el script de la cabecera de
   base.html, según lo que eligió la persona o, si nunca eligió, según su
   equipo. El naranja se aclara para que los enlaces se lean sobre fondo oscuro. */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --color-primario: #e8672e;
  --color-primario-hover: #f2804d;
  --color-primario-suave: #3a2418;
  --color-texto: #e6e6e4;
  --color-texto-suave: #a3a3a0;
  --color-texto-medio: #cfcfcc;
  --color-borde: #3a3a38;
  --color-borde-fuerte: #55554f;
  --color-fondo: #161615;
  --color-superficie: #212120;
  --color-tenue: #2a2a28;
  --color-apagado: #2e2e2c;
  --color-exito: #6cc070;
  --color-exito-suave: #1c2e1d;
  --color-exito-borde: #2f5a31;
  --color-error: #f07a6c;
  --color-error-suave: #3a1f1c;
  --color-error-borde: #6b322b;
  --color-alerta-suave: #362818;
  --color-alerta-borde: #6a4a22;
  --color-alerta-texto: #f0b474;
  --color-neutro-suave: #2c3036;
  --color-neutro-texto: #b8c2cc;
  --color-info-suave: #1d2a3d;
  --color-info-texto: #8db8f0;
  --color-flotante: #3a3a38;
  --color-barra-precio: #7a4128;
  --color-barra-precio-fuera: #3a3a38;
  --sombra: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 6px rgb(0 0 0 / 30%);
  --sombra-flotante: 0 12px 32px rgb(0 0 0 / 55%);
}
/* El logo trae letras gris oscuro que de noche no se leerían: va sobre su
   propio recuadro claro, como una placa. */
:root[data-tema="oscuro"] .marca__imagen,
:root[data-tema="oscuro"] .ingreso__logo { padding: 4px 8px; border-radius: var(--radio-chico); background: #f7f7f6; }

/* Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-texto);
  background: var(--color-fondo);
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-primario); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.25; }
p { margin: 0 0 1em; }
code { font-family: var(--fuente-mono); font-size: .92em; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primario) 45%, transparent);
  outline-offset: 2px;
}

.contenedor { width: 100%; max-width: var(--ancho-maximo); margin-inline: auto; padding-inline: 16px; }
.principal { flex: 1; padding-block: 24px 48px; }
.texto-suave { color: var(--color-texto-suave); }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.saltar { position: absolute; left: 8px; top: -48px; z-index: 100; padding: 8px 12px; background: var(--color-foto); border-radius: var(--radio-chico); }
.saltar:focus { top: 8px; }

.icono { width: 20px; height: 20px; flex: none; }
.icono--chico { width: 14px; height: 14px; }
.icono--vacio { width: 44px; height: 44px; margin: 0 auto 12px; color: #c2c2c2; }

/* Botones y formularios ------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
  background: var(--color-superficie);
  color: var(--color-texto);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.boton:hover { background: var(--color-fondo); text-decoration: none; }
.boton:disabled { opacity: .65; cursor: progress; }
.boton .icono { width: 18px; height: 18px; }
.boton--primario { background: var(--color-primario); border-color: var(--color-primario); color: #fff; }
.boton--primario:hover { background: var(--color-primario-hover); border-color: var(--color-primario-hover); }
.boton--grande { height: 48px; padding: 0 22px; font-size: 16px; }
.boton--bloque { width: 100%; }
.boton--texto { border-color: transparent; background: none; color: var(--color-texto-suave); }
.boton--texto:hover { color: var(--color-error); background: var(--color-error-suave); }
.boton--destacado { border-color: var(--color-primario); color: var(--color-primario); box-shadow: 0 0 0 3px var(--color-primario-suave); }

.boton-icono {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 0;
  border-radius: var(--radio-chico);
  background: none;
  color: var(--color-texto-suave);
  cursor: pointer;
}
.boton-icono:hover { background: var(--color-error-suave); color: var(--color-error); }
.boton-icono .icono { width: 18px; height: 18px; }

.campo { display: grid; gap: 6px; margin-bottom: 16px; }
.campo label { font-size: 14px; font-weight: 600; }
.campo input:not([type="checkbox"]), .campo textarea, .campo select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
  background: var(--color-superficie);
}
.campo textarea { min-height: 84px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .agregar__cantidad:focus, .carrito__cantidad:focus {
  outline: none;
  border-color: var(--color-primario);
  box-shadow: 0 0 0 3px var(--color-primario-suave);
}
.campo--casilla { grid-template-columns: auto minmax(0, 1fr); align-items: center; }

/* Contraseña con el ojo para verla. El relleno de la derecha deja sitio al
   botón, que va encima del campo para que el recuadro siga siendo uno solo. */
.campo__clave { position: relative; }
.campo .campo__clave input { padding-right: 46px; }
.campo__ver-clave {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--radio-chico);
  background: none;
  color: var(--color-texto-suave);
  cursor: pointer;
  transform: translateY(-50%);
}
.campo__ver-clave[hidden] { display: none; }
.campo__ver-clave:hover { color: var(--color-texto); }
.campo__ver-clave:focus-visible { outline: 2px solid var(--color-primario); outline-offset: -2px; }
.campo__ver-clave .icono--ojo-tachado,
.campo__ver-clave[aria-pressed="true"] .icono--ojo { display: none; }
.campo__ver-clave[aria-pressed="true"] .icono--ojo-tachado { display: block; }
.campo--casilla label { grid-column: 2; grid-row: 1; }
.campo--casilla input { grid-column: 1; grid-row: 1; width: 18px; height: 18px; }
.campo--casilla .campo__ayuda, .campo--casilla .campo__error { grid-column: 1 / -1; }
.formulario h2 { margin-bottom: 4px; font-size: 18px; }
.campo__ayuda { font-size: 13px; color: var(--color-texto-suave); }
.campo__ayuda ul { margin: 4px 0 0; padding-left: 18px; }
.campo__error { margin: 0; font-size: 13px; color: var(--color-error); }
/* La aclaración del método de entrega: un recuadro y no texto suelto, para que
   se lea como algo que dice la empresa y no como ayuda del formulario. */
.campo__aclaracion {
  margin: 2px 0 0;
  padding: 8px 12px;
  border-radius: var(--radio-chico);
  background: var(--color-info-suave);
  color: var(--color-info-texto);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.tarjeta {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.mensajes { display: grid; gap: 8px; margin-bottom: 20px; }
.mensaje { padding: 12px 16px; border: 1px solid var(--color-borde); border-radius: var(--radio-chico); background: var(--color-superficie); }
.mensaje--success { background: var(--color-exito-suave); border-color: var(--color-exito-borde); color: var(--color-exito); }
.mensaje--error { background: var(--color-error-suave); border-color: var(--color-error-borde); color: var(--color-error); }
.mensaje--warning { background: var(--color-alerta-suave); border-color: var(--color-alerta-borde); color: var(--color-alerta-texto); }

/* Cabecera ---------------------------------------------------------------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-superficie);
  border-bottom: 1px solid var(--color-borde);
}

.cabecera__interior {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "marca buscador navegacion";
  align-items: center;
  gap: 10px 24px;
  min-height: var(--alto-cabecera);
  padding-block: 10px;
}

.marca { grid-area: marca; display: flex; align-items: center; gap: 10px; color: var(--color-texto); font-size: 17px; font-weight: 700; }
.marca:hover { text-decoration: none; }
.marca__logo {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--color-primario);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
}
.marca__logo--grande { width: 60px; height: 60px; border-radius: 16px; font-size: 28px; }
.marca__imagen { height: 44px; width: auto; }
.ingreso__logo { width: 100%; max-width: 260px; height: auto; margin: 0 auto 6px; }

.buscador { grid-area: buscador; position: relative; display: flex; align-items: center; width: 100%; max-width: 640px; justify-self: center; }
.buscador__icono { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--color-texto-suave); pointer-events: none; }
/* Hijos directos: dentro del formulario también viven las sugerencias, con su
   propio campo y su propio botón, que no deben heredar la forma del buscador. */
.buscador > input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 12px 0 38px;
  border: 1px solid var(--color-borde);
  border-right: 0;
  border-radius: var(--radio-chico) 0 0 var(--radio-chico);
  background: var(--color-fondo);
}
.buscador > input:focus { outline: none; background: var(--color-superficie); border-color: var(--color-primario); box-shadow: 0 0 0 3px var(--color-primario-suave); }
.buscador > .boton { height: 42px; border-radius: 0 var(--radio-chico) var(--radio-chico) 0; }

.sugerencias {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 40;
  max-height: min(60vh, 460px);
  overflow-y: auto;
  padding: 6px;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-flotante);
}
/* En la cabecera el buscador puede quedar angosto según lo que haya a su lado;
   el desplegable no depende de eso y se abre con un ancho donde se alcanza a
   leer el nombre del producto, montándose sobre la navegación si hace falta.
   El tope con el ancho de la pantalla evita que se salga en un teléfono. */
.cabecera .sugerencias { min-width: min(680px, calc(100vw - 32px)); }
/* La fila envuelve el enlace y los controles de compra: el botón no puede ir
   dentro del enlace, así que el resaltado sube un nivel y se pinta aquí. */
.sugerencia-fila {
  display: flex;
  align-items: center;
  border-radius: var(--radio-chico);
}
.sugerencia-fila:hover, .sugerencia-fila.activa { background: var(--color-primario-suave); }
.sugerencia {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 8px;
  border-radius: var(--radio-chico);
  color: var(--color-texto);
}
.sugerencia:hover { text-decoration: none; }
.sugerencia__compra { display: flex; flex: none; align-items: center; gap: 6px; padding-right: 8px; }
.sugerencia__cantidad {
  width: 58px;
  height: 32px;
  padding: 0 4px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
  font-size: 13px;
  text-align: center;
}
.sugerencia__boton { padding: 6px 10px; font-size: 13px; }
/* En pantallas angostas la fila se reparte en tres lineas: nombre, precio y
   compra. Medido sobre el catalogo real: apretandolo todo en una sola linea se
   cortaban seis de cada ocho nombres, y en estos productos lo que distingue a
   uno de otro suele estar al final («AZ - IDS - APS DESMOPAN»), o sea justo en
   lo que se perdia. Mas alto, pero legible; el panel ya sabe desplazarse. */
@media (max-width: 560px) {
  .sugerencia-fila { flex-wrap: wrap; padding-bottom: 8px; }
  /* Con filas tan altas, sin una linea entre medio se funden unas con otras. */
  .sugerencia-fila + .sugerencia-fila { border-top: 1px solid var(--color-borde); }
  .sugerencia { flex-basis: 100%; grid-template-columns: 40px minmax(0, 1fr); padding-bottom: 2px; }
  .sugerencia__precio { grid-column: 2; }
  .sugerencia__compra { margin-left: auto; padding-right: 10px; }
}
.sugerencia img, .sugerencia__sinfoto {
  width: 40px; height: 40px;
  object-fit: contain;
  background: var(--color-foto);
  border: 1px solid var(--color-borde);
  border-radius: 6px;
}
.sugerencia__texto { display: grid; min-width: 0; font-size: 14px; }
.sugerencia__sku, .sugerencia__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugerencia__sku { font-family: var(--fuente-mono); font-size: 12px; color: var(--color-texto-suave); }
.sugerencia__precio { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sugerencias__todos {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  border: 0;
  border-top: 1px solid var(--color-borde);
  background: none;
  color: var(--color-primario);
  font-weight: 600;
  cursor: pointer;
}
.sugerencias__vacio { margin: 0; padding: 12px; font-size: 14px; color: var(--color-texto-suave); }

.navegacion { grid-area: navegacion; display: flex; align-items: center; gap: 2px; }
.navegacion__enlace {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: var(--radio-chico);
  color: var(--color-texto);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.navegacion__enlace:hover { background: var(--color-fondo); text-decoration: none; }

.contador {
  display: inline-grid;
  place-items: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-acento);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Botón de modo nocturno, en el menú del nombre: muestra la luna de día y el
   sol de noche, o sea el modo al que se pasa al pulsarlo. */
.menu-usuario__panel .boton-tema { display: flex; align-items: center; gap: 8px; }
.boton-tema .icono--sol, :root[data-tema="oscuro"] .boton-tema .icono--luna { display: none; }
:root[data-tema="oscuro"] .boton-tema .icono--sol { display: block; }

.menu-usuario { position: relative; }
.menu-usuario summary { list-style: none; }
.menu-usuario summary::-webkit-details-marker { display: none; }
/* Rótulo en dos líneas chicas, «Tu cuenta» sobre el nombre. El nombre tiene
   que ser de bloque: con el tope de ancho puesto sobre un texto en línea el
   navegador lo ignora, y una razón social larga crecía hasta dejar el buscador
   (y su desplegable) sin espacio. */
.menu-usuario__rotulo { display: grid; line-height: 1.2; text-align: left; }
.menu-usuario__etiqueta { font-size: 11px; font-weight: 400; color: var(--color-texto-suave); }
.menu-usuario__nombre { display: block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 600; }
.menu-usuario__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 240px;
  padding: 6px;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-flotante);
}
.menu-usuario__cuenta { margin: 0 0 6px; padding: 8px 10px 10px; border-bottom: 1px solid var(--color-borde); font-size: 13px; color: var(--color-texto-suave); }
.menu-usuario__usuario { display: block; margin-top: 2px; font-family: var(--fuente-mono); font-size: 12px; }
.menu-usuario__panel a, .menu-usuario__panel button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radio-chico);
  background: none;
  color: var(--color-texto);
  text-align: left;
  cursor: pointer;
}
.menu-usuario__panel a:hover, .menu-usuario__panel button:hover { background: var(--color-fondo); text-decoration: none; }
.menu-usuario__principal { font-weight: 700; color: var(--color-primario); }

/* Pantallas medianas: el buscador pasa a una segunda fila para no quedar angosto. */
@media (max-width: 1100px) {
  :root { --alto-cabecera: 120px; }
  .cabecera__interior { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marca navegacion" "buscador buscador"; }
  .buscador { max-width: none; }
}

/* Celulares: solo íconos en la navegación y cabecera no fija, para ganar espacio. */
@media (max-width: 640px) {
  .cabecera { position: static; }
  .navegacion__texto {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .marca { min-width: 0; }
  .marca__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .marca__imagen { height: 34px; }
}

/* Encabezados de página --------------------------------------------------- */

.barra-titulo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 20px; }
.barra-titulo p { margin: 4px 0 0; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.titulo-pagina { margin: 0; font-size: 26px; }
.migas { margin-bottom: 16px; font-size: 14px; color: var(--color-texto-suave); }
.migas a { color: var(--color-texto-suave); }

/* Fila de categorías: se desliza hacia el lado, como en las tiendas del teléfono. */
.fila-categorias {
  display: flex;
  gap: 4px;
  margin: 0 -4px 6px;
  padding: 4px 4px 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.fila-categorias__item {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 98px;
  padding: 8px 4px;
  border: 2px solid transparent;
  border-radius: var(--radio);
  color: var(--color-texto);
  font-size: 12.5px;
  line-height: 1.25;
  text-align: center;
  scroll-snap-align: start;
}
.fila-categorias__item:hover { background: var(--color-superficie); text-decoration: none; }
.fila-categorias__item[aria-current="page"] { border-color: var(--color-primario); background: var(--color-superficie); color: var(--color-primario); font-weight: 600; }
.fila-categorias__nombre { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fila-categorias__cuenta { color: var(--color-texto-suave); font-size: 12px; font-weight: 400; }

.icono-categoria {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--color-icono-categoria);
}
/* La ilustración trae esquinas blancas: se agranda un poco y el círculo las recorta. */
.icono-categoria img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
/* La inicial va sobre el durazno fijo, así que su naranja también queda fijo. */
.icono-categoria__inicial { color: #cc4a10; font-size: 26px; font-weight: 700; }
.icono-categoria--todas { background: var(--color-primario-suave); color: var(--color-primario); }
.icono-categoria--todas .icono { width: 26px; height: 26px; }

/* Barra de botones bajo la fila: precio, «Mostrar solo» y orden. */
.barra-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 10px 0;
  border-top: 1px solid var(--color-borde);
  border-bottom: 1px solid var(--color-borde);
}
.barra-filtros__quitar { font-size: 13px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--color-borde);
  border-radius: 999px;
  background: var(--color-superficie);
  color: var(--color-texto);
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
.chip:hover { border-color: var(--color-borde-fuerte); text-decoration: none; }
.chip--activo { border-color: var(--color-primario); background: var(--color-primario-suave); color: var(--color-primario); font-weight: 600; }

.pastilla { position: relative; }
.pastilla--derecha { margin-left: auto; }
.pastilla > summary { list-style: none; }
.pastilla > summary::-webkit-details-marker { display: none; }
.pastilla > summary::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.pastilla[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
/* Solo el recuadro que cuelga de una pastilla flota: «desplegable» también es el
   <details> de la ficha del pedido («Rechazar el pedido»…), que va dentro de su tarjeta. */
.pastilla > .desplegable {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: 320px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
  box-shadow: var(--sombra-flotante);
}
.pastilla--derecha .desplegable { left: auto; right: 0; width: 260px; }
.desplegable__opcion { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; cursor: pointer; }
.desplegable__opcion input { width: 18px; height: 18px; accent-color: var(--color-primario); }
.desplegable__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.pastilla > .desplegable--lista { padding: 6px; list-style: none; }
.desplegable--lista a { display: block; padding: 8px 10px; border-radius: var(--radio-chico); color: var(--color-texto); font-size: 14px; }
.desplegable--lista a:hover { background: var(--color-fondo); text-decoration: none; }
.desplegable--lista a[aria-current] { background: var(--color-primario-suave); color: var(--color-primario); font-weight: 600; }

.rango-precio__titulo { margin: 0 0 10px; color: var(--color-texto-suave); font-size: 13px; }
.rango-precio__barras { display: flex; align-items: flex-end; gap: 2px; height: 40px; }
.rango-precio__barras span { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--color-barra-precio); }
.rango-precio__barras span.fuera { background: var(--color-barra-precio-fuera); }
.rango-precio__deslizador { position: relative; height: 24px; margin-top: -2px; }
.rango-precio__deslizador::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 2px; background: var(--color-borde); }
.rango-precio__tramo { position: absolute; top: 10px; height: 4px; border-radius: 2px; background: var(--color-primario); }
.rango-precio__deslizador input {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  background: none;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}
.rango-precio__deslizador input::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-primario);
  border-radius: 50%;
  background: var(--color-superficie);
  cursor: pointer;
  pointer-events: all;
  -webkit-appearance: none;
}
.rango-precio__deslizador input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-primario);
  border-radius: 50%;
  background: var(--color-superficie);
  cursor: pointer;
  pointer-events: all;
}
.rango-precio__deslizador input::-moz-range-track { background: none; }
.rango-precio__deslizador input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--color-primario-suave); }
.rango-precio__montos { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.rango-precio__montos label { flex: 1; display: grid; gap: 4px; color: var(--color-texto-suave); font-size: 12px; }
.rango-precio__montos input {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
  background: var(--color-superficie);
  color: var(--color-texto);
  font: inherit;
  font-size: 14px;
}
.rango-precio__montos > span { padding-bottom: 9px; }
.rango-precio__atajos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rango-precio__atajos .chip { height: 30px; padding: 0 10px; font-size: 13px; }

.selector-vista { display: inline-flex; overflow: hidden; background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-chico); }
.selector-vista a { display: grid; place-items: center; width: 42px; height: 38px; color: var(--color-texto-suave); }
.selector-vista a + a { border-left: 1px solid var(--color-borde); }
.selector-vista a:hover { background: var(--color-fondo); }
.selector-vista a.activo { background: var(--color-primario-suave); color: var(--color-primario); }
.selector-vista .icono { width: 18px; height: 18px; }

/* Catálogo ---------------------------------------------------------------- */

.productos { margin: 0; padding: 0; list-style: none; }
.productos--cuadricula { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 16px; }

.producto {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  transition: border-color .15s, box-shadow .15s;
}
.producto:hover { border-color: var(--color-borde-fuerte); box-shadow: 0 4px 16px rgb(22 33 58 / 8%); }
.producto__imagen { display: block; aspect-ratio: 1; padding: 12px; background: var(--color-foto); border-bottom: 1px solid var(--color-borde); }
/* El cuadrado se lo fija la FOTO, no la caja. Puesto solo en la caja no basta:
   «height:100%» no se puede resolver contra una altura que sale del propio
   aspect-ratio, así que la foto se quedaba con su proporción original y
   estiraba la caja hacia abajo. Una sola foto vertical bastaba para desalinear
   su tarjeta de toda la fila. Con la proporción en la imagen, «contain» la
   encaja dentro del cuadrado y todas las tarjetas miden igual, venga la foto
   como venga. */
.producto__imagen img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.producto__info { flex: 1; padding: 12px 14px 0; }
.producto__sku { margin: 0 0 4px; font-family: var(--fuente-mono); font-size: 12px; letter-spacing: .02em; color: var(--color-texto-suave); }
.producto__nombre {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.producto__nombre a { color: var(--color-texto); }
.producto__unidad { margin: 4px 0 0; font-size: 13px; color: var(--color-texto-suave); }
.producto__compra { padding: 10px 14px 14px; }

.precio { margin: 0 0 10px; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.precio__nota { font-size: 12px; font-weight: 500; color: var(--color-texto-suave); }
.precio__lista { margin-left: 6px; font-size: 13px; font-weight: 500; color: var(--color-texto-suave); text-decoration: line-through; }
.precio--grande { font-size: 32px; }

.etiqueta { display: inline-block; margin: 0 0 8px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.etiqueta--descuento { background: var(--color-exito-suave); color: var(--color-exito); }
.etiqueta--oferta { background: var(--color-alerta-suave); color: var(--color-alerta-texto); }
.etiqueta--ajuste { background: var(--color-alerta-suave); color: var(--color-alerta-texto); }
.etiqueta--dato { background: var(--color-neutro-suave); color: var(--color-neutro-texto); }
.etiqueta--apagada { background: var(--color-apagado); color: var(--color-texto-suave); }
/* «Nuevo» va con el naranja de la marca: es lo que la empresa quiere que se vea. */
.etiqueta--nuevo { background: var(--color-primario-suave); color: var(--color-primario); }
/* El precio se apila sin flex: una celda con «display: flex» deja de medir el alto
   de su fila y las líneas separadoras quedan escalonadas entre columnas. */
.c-precio { text-align: right; }
.c-precio > * { display: block; width: fit-content; margin-left: auto; }
.c-precio > * + * { margin-top: 4px; }
.c-precio .precio__lista { margin-left: auto; }
/* El «auto» del final mantiene la etiqueta alineada con los montos. */
.c-precio .etiqueta { margin: 4px 0 0 auto; }

.tabla--tramos { margin-bottom: 24px; background: var(--color-superficie); }
.tabla--tramos caption { padding: 12px 14px; font-weight: 700; text-align: left; }
.tabla--tramos .num { white-space: nowrap; }
.tabla--tramos .etiqueta { margin: 0 8px 0 0; vertical-align: middle; }

.agregar { display: flex; gap: 8px; }
.agregar__cantidad {
  width: 72px;
  height: 40px;
  padding: 0 6px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.agregar__boton { flex: 1; }
.en-carrito { display: flex; align-items: center; gap: 4px; margin: 8px 0 0; font-size: 13px; color: var(--color-exito); }

.productos--lista { display: grid; gap: 8px; }
.productos--lista .producto { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 10px 14px; }
.productos--lista .producto__imagen { width: 72px; height: 72px; padding: 4px; border: 1px solid var(--color-borde); border-radius: var(--radio-chico); }
.productos--lista .producto__info { padding: 0; }
.productos--lista .producto__compra { display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 16px; padding: 0; }
.productos--lista .precio { margin: 0; text-align: right; font-size: 18px; }
.productos--lista .en-carrito { grid-column: 1 / -1; justify-content: flex-end; margin: 0; }

.paginacion { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }

/* Pie del catálogo cuando los productos se van cargando solos. */
.mas-productos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-top: 28px;
}
.mas-productos__cuenta { margin: 0; font-size: 13px; color: var(--color-texto-suave); }

.vacio { padding: 48px 24px; text-align: center; }
.vacio h2 { font-size: 20px; }
.vacio p { margin-bottom: 20px; color: var(--color-texto-suave); }

@media (max-width: 640px) {
  .productos--lista .producto { grid-template-columns: 64px minmax(0, 1fr); gap: 10px 12px; }
  .productos--lista .producto__imagen { width: 64px; height: 64px; }
  .productos--lista .producto__compra { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; }
  .productos--lista .precio { text-align: left; }
}

@media (max-width: 520px) {
  .titulo-pagina { font-size: 22px; }
  /* En el teléfono los recuadros se abren a lo ancho, bajo la barra. */
  .barra-filtros { position: relative; }
  .pastilla { position: static; }
  .pastilla--derecha { margin-left: 0; }
  .pastilla > .desplegable, .pastilla--derecha .desplegable { left: 0; right: 0; width: auto; }
  .fila-categorias__item { width: 84px; }
  .icono-categoria { width: 56px; height: 56px; }
  .productos--cuadricula { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .productos--cuadricula .producto__info { padding: 10px 10px 0; }
  .productos--cuadricula .producto__compra { padding: 8px 10px 10px; }
  .productos--cuadricula .producto__nombre { font-size: 14px; }
  .productos--cuadricula .precio { font-size: 17px; margin-bottom: 8px; }
  .productos--cuadricula .agregar { flex-direction: column; }
  .productos--cuadricula .agregar__cantidad { width: 100%; }
}

/* Ficha de producto ------------------------------------------------------- */

.ficha { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: 32px; }
.galeria__principal { aspect-ratio: 1; padding: 24px; background: var(--color-foto); border: 1px solid var(--color-borde); border-radius: var(--radio); }
/* La proporción va en la foto por lo mismo que en .producto__imagen. */
.galeria__principal img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.galeria__miniaturas { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.galeria__miniatura { width: 72px; height: 72px; padding: 4px; background: var(--color-foto); border: 2px solid var(--color-borde); border-radius: var(--radio-chico); cursor: pointer; }
.galeria__miniatura.activo { border-color: var(--color-primario); }
.galeria__miniatura img { width: 100%; height: 100%; object-fit: contain; }
.ficha__nombre { margin: 4px 0 8px; font-size: 28px; }
.ficha__compra { margin: 20px 0 24px; padding: 20px; }
.agregar--grande .agregar__cantidad { width: 96px; height: 48px; font-size: 16px; }
.agregar--grande .boton { height: 48px; font-size: 16px; }
.ficha__descripcion { color: var(--color-texto-medio); }

/* Lo que suele comprarse junto. Separado de la ficha con un borde arriba para
   que se lea como otra cosa y no como parte del producto que se está mirando. */
.tambien { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-borde); }
.tambien__titulo { margin: 0 0 16px; font-size: 19px; }
.ficha__descripcion h2 { font-size: 17px; }

@media (max-width: 800px) {
  .ficha { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ficha__nombre { font-size: 22px; }
  .precio--grande { font-size: 26px; }
}

/* Tablas ------------------------------------------------------------------ */

.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: 12px 14px; border-bottom: 1px solid var(--color-borde); text-align: left; vertical-align: middle; }
.tabla th { background: var(--color-tenue); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-texto-suave); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla__nombre { font-weight: 600; color: var(--color-texto); }
.tabla__acciones { text-align: right; white-space: nowrap; }
.tabla__acciones .boton { height: 34px; padding: 0 12px; }
/* «position: relative» porque los textos solo para lectores de pantalla
   (.visualmente-oculto) son absolutos: sin un ancestro posicionado se escapan
   de la zona que se desliza y ensanchan la página entera en el celular. */
.tabla-desplazable { position: relative; overflow-x: auto; }
.tabla-desplazable .tabla { min-width: 560px; }

/* Carrito y pedido -------------------------------------------------------- */

.carrito, .pedido, .equipo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 20px; }
.carrito__lineas { overflow: hidden; }
.c-foto { width: 72px; }
.c-nombre { min-width: 200px; }
.c-foto img { width: 56px; height: 56px; padding: 2px; object-fit: contain; background: var(--color-foto); border: 1px solid var(--color-borde); border-radius: var(--radio-chico); }
.c-acciones { width: 52px; text-align: right; }
.c-precio__valor { font-weight: 600; }
.tabla--pedido .c-cantidad { font-weight: 600; }
.carrito__cantidad {
  width: 84px;
  height: 38px;
  padding: 0 6px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.carrito__acciones { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--color-borde); }

.resumen { position: sticky; top: calc(var(--alto-cabecera) + 20px); padding: 20px; }
.resumen h2 { font-size: 18px; }
.resumen__nota { margin: 12px 0 0; font-size: 13px; color: var(--color-texto-suave); }
.aviso-permiso {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: var(--radio-chico);
  background: var(--color-alerta-suave);
  font-size: 14px;
  color: var(--color-alerta-texto);
}
.aviso-permiso .icono { flex: none; margin-top: 2px; }
.despiece__piezas .aviso-permiso { margin: 0; border-radius: 0; }

.aviso-cambios { margin: -8px 0 16px; padding: 8px 10px; border-radius: var(--radio-chico); background: var(--color-alerta-suave); font-size: 13px; color: var(--color-alerta-texto); }

.aviso-ajuste { background: var(--color-alerta-suave); border-radius: var(--radio-chico); padding: .75rem 1rem; margin-bottom: 1rem; }
.aviso-ajuste--rechazo { background: var(--color-error-suave); color: var(--color-error); }

.totales { display: grid; gap: 8px; margin: 0 0 20px; }
.totales div { display: flex; justify-content: space-between; gap: 12px; }
.totales dt { color: var(--color-texto-suave); }
.totales dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
/* El ahorro se lee de un vistazo y no se confunde con un cargo. */
.totales__descuento dd { color: var(--color-exito); }
.totales__total { padding-top: 10px; border-top: 1px solid var(--color-borde); font-size: 20px; }
.totales__total dt { font-weight: 700; color: var(--color-texto); }
.totales__total dd { font-weight: 800; }

.datos { display: grid; gap: 12px; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--color-borde); }
.datos div { display: grid; gap: 2px; }
.datos dt { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-texto-suave); }
.datos dd { margin: 0; overflow-wrap: anywhere; }

.confirmacion {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding: 28px;
  border-color: var(--color-exito-borde);
  background: linear-gradient(180deg, var(--color-exito-suave), var(--color-superficie));
}
.confirmacion h1 { margin-bottom: 6px; font-size: 24px; }
.confirmacion__icono { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--color-exito); color: #fff; }
.confirmacion__icono .icono { width: 28px; height: 28px; }
.confirmacion__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 8px; }

@media (max-width: 1024px) {
  .carrito, .pedido, .equipo { grid-template-columns: minmax(0, 1fr); }
  .gestion__filtros, .despieces-buscar { flex-wrap: wrap; }
  .resumen { position: static; }
}

@media (max-width: 860px) {
  .tabla--carrito thead { display: none; }
  .tabla--carrito tbody tr {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas: "foto nombre acciones" "foto precio acciones" "cantidad cantidad subtotal";
    gap: 4px 12px;
    padding: 14px;
    border-bottom: 1px solid var(--color-borde);
  }
  .tabla--carrito tbody tr:last-child { border-bottom: 0; }
  .tabla--carrito td { padding: 0; border: 0; }
  .tabla--carrito .c-foto { grid-area: foto; width: auto; }
  .tabla--carrito .c-nombre { grid-area: nombre; min-width: 0; }
  .tabla--carrito .c-precio { grid-area: precio; text-align: left; font-size: 14px; color: var(--color-texto-suave); }
  .tabla--carrito .c-precio > * { margin-left: 0; margin-right: auto; }
  .tabla--carrito .c-precio__valor::after { content: " c/u"; }
  .tabla--carrito .c-cantidad { grid-area: cantidad; margin-top: 8px; text-align: left; }
  .tabla--carrito .c-subtotal { grid-area: subtotal; align-self: end; padding-bottom: 8px; }
  .tabla--carrito .c-acciones { grid-area: acciones; width: auto; }

  /* El pedido se lee como fichas, igual que el carrito, pero sin controles. */
  .tabla-desplazable .tabla--pedido { min-width: 0; }
  .tabla--pedido thead { display: none; }
  .tabla--pedido tbody tr {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas: "foto nombre nombre" "foto precio subtotal" "foto cantidad subtotal";
    gap: 4px 12px;
    padding: 14px;
    border-bottom: 1px solid var(--color-borde);
  }
  .tabla--pedido tbody tr:last-child { border-bottom: 0; }
  .tabla--pedido td { padding: 0; border: 0; }
  .tabla--pedido .c-foto { grid-area: foto; width: auto; }
  .tabla--pedido .c-nombre { grid-area: nombre; min-width: 0; }
  .tabla--pedido .c-precio { grid-area: precio; text-align: left; font-size: 14px; }
  .tabla--pedido .c-precio > * { margin-left: 0; margin-right: auto; }
  .tabla--pedido .c-precio__valor::after { content: " c/u"; }
  .tabla--pedido .c-cantidad { grid-area: cantidad; text-align: left; color: var(--color-texto-suave); }
  .tabla--pedido .c-cantidad::before { content: "Cantidad: "; font-weight: 400; }
  .tabla--pedido .c-subtotal { grid-area: subtotal; align-self: end; }
}

@media (max-width: 560px) {
  .confirmacion { flex-direction: column; gap: 12px; padding: 20px; }
  .confirmacion__acciones .boton { width: 100%; }
}

/* Panel de pedidos del equipo --------------------------------------------- */

/* El buscador de los despieces tiene la misma forma: campo, botón y «Limpiar». */
.gestion__filtros, .despieces-buscar { display: flex; gap: 8px; margin-bottom: 12px; }
.gestion__filtros input, .despieces-buscar input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
  background: var(--color-superficie);
  font: inherit;
}
/* Pestañas de la bandeja (Pedidos / Faltantes): subrayadas y no con forma de
   píldora, para no confundirlas con los filtros de estado que van debajo. */
.pestanas { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--color-borde); }
.pestanas__pestana {
  padding: 8px 14px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--color-texto-suave);
  font-weight: 600;
}
.pestanas__pestana:hover { color: var(--color-texto); text-decoration: none; }
.pestanas__pestana[aria-current="page"] { color: var(--color-primario); border-bottom-color: var(--color-primario); }
.gestion__estados { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filtro {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--color-borde);
  border-radius: 999px;
  background: var(--color-superficie);
  font-size: 14px;
  color: var(--color-texto);
}
.filtro span { font-variant-numeric: tabular-nums; color: var(--color-texto-suave); }
.filtro:hover { border-color: var(--color-primario); text-decoration: none; }
.filtro--activo { border-color: var(--color-primario); background: var(--color-primario-suave); color: var(--color-primario); font-weight: 600; }
.filtro--activo span { color: inherit; }
/* Los carritos de la persona, sobre la tabla del carrito. */
.carritos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.carritos form { margin: 0; }
.carritos .filtro { cursor: pointer; font: inherit; }
.carritos__acciones { display: flex; gap: 4px; margin-left: auto; }
.carritos__opcion summary { list-style: none; cursor: pointer; }
.carritos__opcion summary::-webkit-details-marker { display: none; }
.carritos__form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.carritos__cliente { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -8px 0 16px; }
.carritos__cliente p { margin: 0; }
.carritos__cliente form { margin: 0; }
/* Abierto, el buscador ocupa su propia fila: al lado del «Para:» quedaba apretado. */
.carritos__cliente details[open] { flex-basis: 100%; order: 1; }
.carritos__candidatos { margin-top: 8px; }
.carritos__form input { min-height: 36px; padding: 6px 10px; border: 1px solid var(--color-borde); border-radius: var(--radio-chico); font: inherit; background: var(--color-superficie); color: var(--color-texto); }
/* «Mover a…» va bajo el nombre del producto, no en una columna propia que le quite ancho a la foto. */
.c-mover { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 6px; }
.c-mover .boton { padding: 4px 8px; font-size: 13px; }
.carrito-activo { display: block; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; color: var(--color-primario); }
.c-mover select { max-width: 150px; padding: 4px 6px; border: 1px solid var(--color-borde); border-radius: var(--radio-chico); font: inherit; font-size: 13px; background: var(--color-superficie); color: var(--color-texto); }

.estado { vertical-align: middle; }
.estado--nuevo { background: var(--color-alerta-suave); color: var(--color-alerta-texto); }
.estado--preparacion { background: var(--color-neutro-suave); color: var(--color-neutro-texto); }
.estado--aprobado { background: var(--color-exito-suave); color: var(--color-exito); }
.estado--rechazado { background: var(--color-error-suave); color: var(--color-error); }

.gestion__panel { display: grid; gap: 16px; }
.gestion__panel .tarjeta { padding: 16px; }
.gestion__panel h2 { margin: 0 0 8px; font-size: 16px; }
.gestion__panel .formulario { padding: 0; }
.linea--quitada td { text-decoration: line-through; color: var(--color-texto-suave); }
.linea--quitada td input, .linea--quitada td select { text-decoration: none; }
/* Los controles de la edición viven sueltos en la tabla, fuera de un .campo,
   así que se les da aquí el mismo aspecto que al resto de los formularios. */
.campo--cantidad,
.pedido select[form="editar-lineas"] {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
  background: var(--color-superficie);
  font: inherit;
  color: var(--color-texto);
}
.campo--cantidad { width: 6rem; text-align: right; }
.campo--cantidad:focus,
.pedido select[form="editar-lineas"]:focus {
  outline: none;
  border-color: var(--color-primario);
  box-shadow: 0 0 0 3px var(--color-primario-suave);
}
/* La línea varió y todavía no tiene motivo: se marca antes de que el
   servidor lo rechace al guardar o aprobar. */
.pedido select.campo--falta { border-color: var(--color-error); box-shadow: 0 0 0 3px var(--color-error-suave); }
.gestion__agregar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  padding: 14px;
  border-top: 1px solid var(--color-borde);
}
.gestion__agregar > .boton { height: 42px; }
/* El aviso de corrección va arriba, en su propia línea, y no entre los campos. */
.gestion__agregar .aviso-permiso { flex: 1 1 100%; margin: 0 0 4px; }

/* El buscador del pedido reutiliza el de la cabecera, sin su lugar en la
   grilla de la cabecera y sin el botón pegado a la derecha. El desplegable va
   en el flujo, bajo el campo: la tabla se desliza de lado y recortaría uno
   flotante. */
.buscador--pedido { grid-area: auto; flex: 1 1 320px; flex-wrap: wrap; max-width: none; justify-self: stretch; }
.buscador--pedido > input { border-right: 1px solid var(--color-borde); border-radius: var(--radio-chico); background: var(--color-superficie); }
.buscador--pedido .buscador__icono { top: 12px; }
.buscador--pedido .sugerencias { position: static; flex: 1 1 100%; margin-top: 6px; }
.gestion__vista-previa { margin: 0; padding: 0 14px 14px; font-size: 13px; color: var(--color-texto-suave); text-align: right; }
.gestion__acciones { display: grid; gap: 8px; }
.totales--pedido { margin: 0; padding: 14px; border-top: 1px solid var(--color-borde); }

/* Historial como línea de tiempo, sin números. */
.historial { display: grid; gap: 14px; margin: 0; padding: 0 0 0 18px; list-style: none; font-size: 14px; }
.historial li { position: relative; }
.historial li::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primario);
}
.historial li::after {
  content: "";
  position: absolute;
  left: -15px;
  top: 18px;
  bottom: -14px;
  width: 2px;
  background: var(--color-borde);
}
.historial li:last-child::after { display: none; }

.nota-venta { display: grid; gap: 2px; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radio-chico); background: var(--color-info-suave); }
.nota-venta__numero { font-size: 20px; font-weight: 700; color: var(--color-info-texto); font-variant-numeric: tabular-nums; }

.desplegable summary { cursor: pointer; font-size: 14px; color: var(--color-primario); }
.desplegable summary:hover { text-decoration: underline; }
.desplegable .formulario { padding: 12px 0 0; }

/* El listado de pedidos: columnas que no se parten en varias líneas. */
.tabla-desplazable .tabla--pedidos { min-width: 960px; }
.tabla--pedidos th, .tabla--pedidos td { padding: 10px 12px; }
.tabla--pedidos th, .tabla--pedidos .p-numero-pedido, .tabla--pedidos .p-fecha,
.tabla--pedidos .p-estado, .tabla--pedidos .num, .tabla--pedidos .tabla__acciones { white-space: nowrap; }
.tabla--pedidos td { vertical-align: top; }
.tabla--pedidos .p-cliente { min-width: 220px; }
.tabla--pedidos .texto-suave { font-size: 13px; }
.tabla--pedidos .p-nota-venta { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Títulos que ordenan: se ven como título, no como enlace, hasta que se pasa por encima. */
.orden { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-transform: inherit; }
.orden:hover { color: var(--color-primario); text-decoration: none; }
.orden__flecha { font-size: 10px; opacity: .35; }
.orden--activo { color: var(--color-texto); }
.orden--activo .orden__flecha { opacity: 1; color: var(--color-primario); }
.sin-cortar { white-space: nowrap; }

/* Despieces --------------------------------------------------------------- */

/* Cuatro pestañas no caben en un teléfono: se corren de lado, sin partirse en dos filas. */
/* «relative» para que app.js mida cada pestaña dentro de la fila y pueda centrar la elegida. */
.pestanas--despieces { position: relative; overflow-x: auto; scrollbar-width: none; }
.pestanas--despieces .pestanas__pestana { white-space: nowrap; }
.pestanas__pestana span { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--color-texto-suave); }
.despieces-buscar { max-width: 760px; }
/* En el teléfono el campo va en su propia fila: al lado de los botones no
   alcanzaba a leerse ni el ejemplo. */
@media (max-width: 600px) {
  .despieces-buscar input { flex-basis: 100%; }
}
.despieces-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.despieces-recuento { margin: 16px 0 0; font-size: 14px; }
.despieces-grupo { margin-top: 28px; }
.despieces-grupo__titulo { margin: 0; font-size: 20px; }
.despieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
.despiece-tarjeta { display: flex; flex-direction: column; overflow: hidden; }
.despiece-tarjeta__plano { display: block; height: 240px; padding: 8px; background: var(--color-foto); border-bottom: 1px solid var(--color-borde); }
.despiece-tarjeta__plano img { width: 100%; height: 100%; object-fit: contain; object-position: center top; }
.despiece-tarjeta__info { padding: 14px; }
.despiece-tarjeta__info h3 { margin: 0 0 4px; font-size: 16px; }
.despiece-tarjeta__info p { margin: 0; font-size: 13px; }
.despiece-tarjeta__info .despiece-tarjeta__relacion { margin-top: 6px; }
.despiece-tarjeta__piezas { margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--color-borde); list-style: none; font-size: 13px; }
.despiece-tarjeta__piezas li { margin-bottom: 4px; }
.despiece-tarjeta__piezas .texto-suave { margin-left: 4px; font-size: 12px; }
.despiece__equipos { margin: 4px 0 0; font-size: 14px; }
.p-nombre__despiece { display: inline-block; margin-top: 2px; font-size: 13px; font-weight: 600; }
/* Al llegar desde el buscador con «#pieza-21», la fila no queda bajo la barra fija. */
.tabla--piezas tr { scroll-margin-top: calc(var(--alto-cabecera) + 16px); }

.despiece { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 20px; }
/* Con varios dibujos, cada bloque lleva su título y se separa del anterior. */
.despiece__titulo-bloque { margin: 0 0 12px; font-size: 20px; }
.despiece + .despiece__titulo-bloque { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--color-borde); }
.despiece__plano { position: sticky; top: calc(var(--alto-cabecera) + 20px); margin: 0; padding: 12px; }
.despiece__barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.despiece__zoom { display: flex; align-items: center; gap: 4px; }
.despiece__zoom .boton-icono { width: 30px; height: 30px; font-size: 18px; line-height: 1; }
.despiece__nivel { min-width: 52px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--color-texto-suave); }
.despiece__visor {
  position: relative;
  height: min(74vh, 900px);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--color-foto);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
  cursor: grab;
  touch-action: pan-x pan-y;
}
.despiece__visor:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; }
.despiece__visor--arrastrando { cursor: grabbing; }
.despiece__lienzo { position: relative; width: 100%; margin: 0 auto; }
.despiece__lienzo img { display: block; width: 100%; height: auto; }
/* La marca se mide en % del plano: así queda sobre su número en cualquier zoom. */
.despiece__marca { position: absolute; width: 2.2%; aspect-ratio: 1; padding: 0; transform: translate(-50%, -50%); border: 2px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; }
.despiece__marca::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.despiece__marca:hover, .despiece__marca:focus-visible, .despiece__marca.activa { border-color: var(--color-marca); background: rgba(240, 86, 29, .18); }
.despiece__plano:fullscreen { padding: 16px; background: var(--color-superficie); }
.despiece__plano:fullscreen .despiece__visor { height: calc(100vh - 120px); }
/* Si el navegador no deja usar pantalla completa, el plano se agranda sobre la página. */
/* Con «.despiece» delante para ganarle al «position: static» del móvil. */
.despiece .despiece__plano--amplio { position: fixed; inset: 12px; z-index: 60; margin: 0; padding: 16px; box-shadow: 0 18px 48px rgba(0, 0, 0, .28); }
.despiece__plano--amplio .despiece__visor { height: calc(100vh - 150px); }
.sin-desplazar { overflow: hidden; }
.despiece__pie { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13px; color: var(--color-texto-suave); }
.despiece__piezas { padding: 0; overflow: hidden; }
.ficha__despieces { margin-bottom: 24px; padding: 14px; }
/* En la ficha de una máquina, el acceso a su plano: la miniatura ya dice qué es. */
.ficha__plano { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; padding: 12px; color: var(--color-texto); }
.ficha__plano:hover { border-color: var(--color-primario); text-decoration: none; }
.ficha__plano img { flex: none; width: 110px; height: 80px; object-fit: contain; background: var(--color-foto); border: 1px solid var(--color-borde); border-radius: var(--radio-chico); }
.ficha__plano-texto { display: grid; flex: 1; gap: 2px; min-width: 0; font-size: 14px; }
.ficha__plano-texto strong { font-size: 16px; }
.ficha__plano .boton { flex: none; }
@media (max-width: 480px) {
  .ficha__plano { flex-wrap: wrap; }
  .ficha__plano .boton { width: 100%; justify-content: center; }
}
.despiece__maquinas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ficha__despieces h2 { margin: 0 0 8px; font-size: 16px; }
.ficha__despieces ul { margin: 0; padding-left: 18px; }
.ficha__despieces li { margin-bottom: 4px; }

/* Compartir la ficha: el PDF que sí sale de la plataforma. */
.compartir { margin-bottom: 24px; padding: 14px; }
.compartir__titulo {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
  font-size: 16px;
}
/* La casilla arriba y los dos botones juntos abajo: así quedan siempre a la
   misma altura, sin que el más largo empuje al otro a la línea siguiente. */
.compartir__form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.compartir__botones { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.compartir__opcion {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 13.5px;
  cursor: pointer;
}
.compartir__form .boton { gap: 8px; }
.compartir__marca { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 13px; color: var(--color-texto-suave); }
.compartir__marca--propia { color: var(--color-exito); }

/* El logo de la empresa se muestra sobre blanco aun en modo nocturno: así
   queda en la ficha impresa, y un logo oscuro sin fondo no desaparece. */
.logo-empresa__muestra {
  display: grid;
  place-items: center;
  min-height: 120px;
  margin-bottom: 20px;
  padding: 20px;
  border: 1px dashed var(--color-borde-fuerte);
  border-radius: var(--radio-chico);
  background: #fff;
}
.logo-empresa__muestra img { max-width: 100%; max-height: 90px; }
.logo-empresa__vacio { font-size: 13px; color: #6b6b6b; }
.logo-empresa__quitar { margin-top: 12px; }
.logo-empresa__quitar .boton { gap: 8px; }
.despiece__notas { margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--color-borde); font-size: 13px; color: var(--color-texto-suave); }

.tabla--piezas td { vertical-align: top; }
.tabla--piezas .p-numero { width: 44px; }
.p-numero__boton {
  width: 30px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
  background: var(--color-superficie);
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-texto);
  cursor: zoom-in;
}
.p-numero__boton:hover, .p-numero__boton:focus-visible { border-color: var(--color-primario); color: var(--color-primario); }
.tabla--piezas .p-agregar { width: 180px; }
.tabla--piezas tr.resaltada { background: var(--color-alerta-suave); }
.tabla--piezas .en-carrito { margin-top: 6px; }
.agregar--fila .agregar__cantidad { width: 60px; height: 34px; }
.agregar--fila .agregar__boton { height: 34px; padding: 0 12px; }
/* En el despiece el carrito va como ícono: deja sitio a «Cotizar» al lado sin
   apretar la columna. No se estira, para que el ícono no quede perdido en un botón ancho. */
.agregar--fila .agregar__boton--icono { flex: 0 0 auto; width: 42px; padding: 0; }

@media (max-width: 1024px) {
  .despiece { grid-template-columns: minmax(0, 1fr); }
  .despiece__plano { position: static; }
  .despiece__visor { height: 56vh; }
}

@media (max-width: 640px) {
  .despiece__barra { flex-wrap: wrap; gap: 8px; }
  .despiece__barra .boton--texto { padding: 0; font-size: 13px; }

  /* Cada pieza se lee como una ficha: en el teléfono no cabe la tabla. */
  .tabla--piezas thead { display: none; }
  .tabla--piezas tbody tr {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    grid-template-areas: "numero nombre precio" "numero agregar agregar";
    gap: 8px 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-borde);
  }
  .tabla--piezas tbody tr:last-child { border-bottom: 0; }
  .tabla--piezas td { padding: 0; border: 0; }
  .tabla--piezas .p-numero { grid-area: numero; }
  .tabla--piezas .p-nombre { grid-area: nombre; }
  .tabla--piezas .c-precio { grid-area: precio; }
  .tabla--piezas .p-agregar { grid-area: agregar; width: auto; }
  .tabla--piezas .agregar--fila { flex-wrap: wrap; }
}

/* Ingreso y páginas simples ---------------------------------------------- */

.pagina-ingreso { background: linear-gradient(170deg, var(--color-primario-suave) 0%, var(--color-fondo) 60%); }
.ingreso { max-width: 400px; margin: 7vh auto 0; }
.ingreso__marca { margin-bottom: 24px; text-align: center; }
.ingreso__marca .marca__logo { margin: 0 auto 14px; }
.ingreso__marca h1 { margin: 0; font-size: 24px; }
.ingreso__marca p { margin: 4px 0 0; color: var(--color-texto-suave); }
.ingreso__formulario { padding: 28px; }
.ingreso__formulario .mensaje { margin-bottom: 16px; }
.ingreso__ayuda { margin: 16px 0 0; font-size: 13px; text-align: center; color: var(--color-texto-suave); }

.pagina-angosta { max-width: 520px; margin: 0 auto; }
.pagina-angosta .titulo-pagina { margin-bottom: 16px; }
.formulario { padding: 24px; }

/* Mi cuenta ---------------------------------------------------------------- */

.cuenta { display: grid; grid-template-columns: 224px minmax(0, 1fr); align-items: start; gap: 24px; }

.cuenta__menu {
  position: sticky;
  top: calc(var(--alto-cabecera) + 20px);
  display: grid;
  gap: 2px;
  padding: 10px;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.cuenta__enlace {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radio-chico);
  background: none;
  color: var(--color-texto);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.cuenta__enlace:hover { background: var(--color-fondo); text-decoration: none; }
.cuenta__enlace .icono { color: var(--color-texto-suave); }
.cuenta__enlace[aria-current="page"] {
  background: var(--color-primario-suave);
  color: var(--color-primario);
  font-weight: 700;
}
.cuenta__enlace[aria-current="page"] .icono { color: var(--color-primario); }
.cuenta__salir { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--color-borde); }

/* El panel separa sus secciones con el hueco de la rejilla, así que los
   márgenes de abajo de los títulos sobran. */
.cuenta__panel { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 20px; }
.cuenta__panel > .barra-titulo, .cuenta__panel > .migas { margin-bottom: 0; }
.cuenta__panel .pagina-angosta { margin-inline: 0; max-width: 560px; }
.cuenta__titulo { margin: 0; font-size: 20px; }

.cuenta__fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); align-items: start; gap: 16px; }
.cuenta__ficha { padding: 20px; }
.cuenta__ficha h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 16px; }
.cuenta__ficha h3 .icono { width: 18px; height: 18px; color: var(--color-texto-suave); }
.cuenta__datos { margin: 0 0 14px; font-size: 14px; }
.cuenta__datos dt { margin-top: 12px; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: var(--color-texto-suave); }
.cuenta__datos dt:first-child { margin-top: 0; }
.cuenta__datos dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.cuenta__nota { margin: 0; font-size: 13px; color: var(--color-texto-suave); }
.cuenta__acceso { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--color-borde); }
.cuenta__acceso + .cuenta__nota { margin-bottom: 16px; }
.cuenta__nota + .acciones { margin-top: 14px; }
.cuenta__cifra { margin: 0 0 6px; font-size: 34px; font-weight: 700; line-height: 1; }

/* La tabla llega hasta los bordes de la tarjeta; el título va en su propia barra. */
.cuenta__ultimos > .barra-titulo { margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--color-borde); }
.cuenta__ultimos > .barra-titulo h3 { margin: 0; font-size: 16px; }
.cuenta__ultimos > .cuenta__nota { padding: 20px; }

/* Con el menú al lado sobra menos ancho: la tabla se desplaza en vez de
   apretar las fechas en varias líneas. */
.tabla-desplazable .tabla--mis-pedidos { min-width: 740px; }

@media (max-width: 1180px) {
  /* Con el menú al lado, la columna de la derecha queda demasiado angosta. */
  .cuenta .equipo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .cuenta { grid-template-columns: minmax(0, 1fr); }
  .cuenta__menu { position: static; display: flex; gap: 4px; padding: 8px; overflow-x: auto; }
  .cuenta__enlace { width: auto; white-space: nowrap; }
  .cuenta__salir {
    margin: 0 0 0 2px;
    padding: 0 0 0 6px;
    border-top: 0;
    border-left: 1px solid var(--color-borde);
  }
}

/* Pie y avisos ------------------------------------------------------------ */

.pie { padding-block: 20px 28px; border-top: 1px solid var(--color-borde); font-size: 13px; color: var(--color-texto-suave); }
.pie p { margin: 0; }

.aviso-flotante {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 50;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  transform: translateX(-50%);
  border-radius: var(--radio);
  background: var(--color-flotante);
  color: #fff;
  font-weight: 500;
  box-shadow: var(--sombra-flotante);
}
.aviso-flotante--error { background: var(--color-error); }

/* El cartel de pedidos no se va solo, a diferencia del aviso corriente: si
   sonó mientras la persona estaba en otra ventana, tiene que seguir ahí
   cuando vuelva. Se cierra al ir al panel, que es lo que se quería. */
.aviso-pedidos { display: flex; gap: 14px; align-items: center; }
.aviso-pedidos a { color: #fff; font-weight: 700; text-decoration: underline; }
/* Pedidos y solicitudes web pueden avisar a la vez. Cada cartel suelto se fija
   en el mismo punto y el segundo taparía al primero: aquí los fija el
   contenedor, y ellos se apilan dentro. */
.avisos-flotantes {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 32px);
  transform: translateX(-50%);
}
.avisos-flotantes .aviso-flotante { position: static; max-width: none; transform: none; }

/* Lista de avisos al cliente: cada fila es un aviso, el no leído resalta. */
.avisos { list-style: none; padding: 0; }
.avisos li { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--color-borde); }
.avisos__nuevo a { font-weight: 600; }
/* Nuevos arriba y destacados; los anteriores, más tenues, para que lo que
   llegó desde la última visita se vea de un vistazo. */
.avisos-grupo + .avisos-grupo { margin-top: 20px; }
.avisos-grupo__titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 16px; }
.avisos--nuevos { border-left: 3px solid var(--color-acento); }
.avisos--anteriores a { color: var(--color-texto-suave); }

/* Pantalla de faltantes: filtros, las tres cifras, el gráfico de barras por
   mes y la lista de productos que se abre para ver cada cliente afectado. */
/* Los filtros copian el aspecto del buscador de la bandeja (misma altura,
   borde y radio), para que las dos pestañas se sientan una sola pantalla. */
.faltantes__filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.faltantes__filtros input[type="search"],
.faltantes__filtros input[type="date"] {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
  background: var(--color-superficie);
  font: inherit;
  color: var(--color-texto);
}
.faltantes__buscar { flex: 1 1 220px; min-width: 0; }
.faltantes__periodo { display: flex; align-items: center; gap: 6px; color: var(--color-texto-suave); }
.faltantes__casilla { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.faltantes__rotulo { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-texto-suave); }

.faltantes__cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 12px; margin-bottom: 16px; }
.faltantes__cifras .tarjeta { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; }
.faltantes__cifras strong { font-size: 28px; line-height: 1.2; font-variant-numeric: tabular-nums; }

.faltantes__meses { padding: 16px 18px 12px; margin-bottom: 16px; }
.faltantes__subtitulo { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
/* La línea base la dibuja el contenedor: un mes sin pérdida no necesita barra. */
/* El espacio de arriba es para el monto de la barra más alta; el de abajo,
   para el nombre del mes, que cuelga bajo la línea base. */
.faltantes__grafico { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--color-borde); }
.faltantes__barra { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.faltantes__columna { position: relative; width: 100%; max-width: 40px; background: var(--color-marca); border-radius: 4px 4px 0 0; min-height: 2px; }
.faltantes__monto { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.faltantes__barra small { position: absolute; top: 100%; margin-top: 4px; font-size: 12px; color: var(--color-texto-suave); }

/* La lista usa la misma grilla en el encabezado y en cada producto, para que
   las columnas calcen. La flecha avisa que cada producto se abre. */
.faltantes__lista { overflow: hidden; }
.faltantes__encabezado,
.faltantes__producto summary,
.faltantes__detalle li {
  display: grid;
  grid-template-columns: minmax(0, 3fr) 1fr 1fr 1.3fr .9fr 1.5fr;
  gap: 12px;
  align-items: center;
  padding: 12px 18px 12px 40px;
}
.faltantes__encabezado { background: var(--color-tenue); border-bottom: 1px solid var(--color-borde); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-texto-suave); }
.faltantes__producto { border-bottom: 1px solid var(--color-borde); }
.faltantes__producto:last-child { border-bottom: 0; }
.faltantes__producto summary { position: relative; list-style: none; cursor: pointer; }
.faltantes__producto summary::-webkit-details-marker { display: none; }
.faltantes__producto summary::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--color-texto-suave);
  border-bottom: 2px solid var(--color-texto-suave);
  transform: translateY(-70%) rotate(-45deg);
  transition: transform .15s;
}
.faltantes__producto[open] summary::before { transform: translateY(-70%) rotate(45deg); }
.faltantes__producto summary:hover { background: var(--color-tenue); }
.faltantes__nombre .producto__sku { display: block; margin: 2px 0 0; }
.faltantes__perdido { font-weight: 600; }
.faltantes__accion { text-align: right; }
.faltantes__accion .etiqueta { margin: 0; background: var(--color-neutro-suave); color: var(--color-neutro-texto); }
.faltantes__detalle { margin: 0; padding: 0; list-style: none; background: var(--color-tenue); border-top: 1px solid var(--color-borde); }
.faltantes__detalle li { padding-top: 10px; padding-bottom: 10px; font-size: 14px; }
.faltantes__detalle li + li { border-top: 1px solid var(--color-borde); }
.faltantes__motivo { grid-column: 3 / 5; color: var(--color-texto-suave); }
.faltantes__aviso { grid-column: 5 / -1; text-align: right; }
.faltantes__aviso .etiqueta { margin: 0; }
.faltantes__vacio { margin: 0; padding: 18px; }

/* En celular cada producto es una tarjeta: nombre arriba, cifras en una línea
   y el botón a lo ancho. El encabezado de columnas ya no tiene a qué alinearse. */
@media (max-width: 700px) {
  /* Las fechas no se encogen bajo cierto ancho: el rótulo baja a su propia
     línea para que las dos quepan lado a lado. */
  .faltantes__periodo { flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .faltantes__periodo .faltantes__rotulo { grid-column: 1 / -1; }
  .faltantes__periodo input[type="date"] { width: 100%; min-width: 0; padding: 0 8px; }
  .faltantes__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faltantes__cifras .tarjeta { padding: 12px 14px; }
  .faltantes__cifras strong { font-size: 22px; }
  .faltantes__encabezado { display: none; }
  .faltantes__producto summary { grid-template-columns: auto auto 1fr; gap: 6px 12px; padding: 14px 16px 14px 36px; }
  .faltantes__producto summary::before { left: 16px; top: 22px; transform: rotate(-45deg); }
  .faltantes__producto[open] summary::before { transform: rotate(45deg); }
  .faltantes__nombre, .faltantes__accion { grid-column: 1 / -1; }
  .faltantes__accion { text-align: left; }
  .faltantes__accion .boton { width: 100%; }
  .faltantes__producto summary .texto-suave { display: none; }
  .faltantes__monto { display: none; }
  .faltantes__detalle li { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 16px; }
  .faltantes__motivo, .faltantes__aviso { grid-column: auto; text-align: left; }
}

/* Portada ------------------------------------------------------------------
   Arriba lo de cada persona, después lo que la empresa publica y al final lo
   que se arma solo. Las filas de productos reutilizan la tarjeta del catálogo. */
.portada { display: grid; gap: 32px; }
.accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.acceso {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio);
  box-shadow: var(--sombra); color: var(--color-texto); text-decoration: none;
}
.acceso:hover { border-color: var(--color-primario); }
.acceso .icono { flex: none; color: var(--color-primario); }
.acceso__titulo { display: block; font-weight: 600; }
.acceso__detalle { display: block; font-size: 13px; color: var(--color-texto-suave); }
/* Novedades: un carrusel de láminas con la foto a todo el ancho en 16:9 y el
   texto debajo, para no tapar lo que ya viene escrito en la imagen. Sin la
   clase --activo (sin JavaScript) las láminas quedan una bajo la otra.
   Con 880 px de ancho como máximo, en una pantalla grande la foto de 16:9 y
   el texto de debajo caben juntos sin bajar; a todo el ancho, la foto sola
   llenaba la pantalla. */
.carrusel { max-width: 880px; margin-inline: auto; }
.carrusel__marco { position: relative; }
.carrusel__pista { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.carrusel--activo .carrusel__pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.carrusel--activo .carrusel__pista::-webkit-scrollbar { display: none; }
/* Todas del mismo alto (el flex las estira a la más alta): así el carrusel
   no salta de tamaño al pasar de un anuncio largo a uno corto. */
.carrusel--activo .novedad { flex: 0 0 100%; scroll-snap-align: start; }
.novedad {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
}
/* contain y no cover: una foto de producto cuadrada se ve entera, con su
   fondo blanco a los lados, en vez de salir recortada. */
.novedad__foto { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--color-foto); }
.novedad__foto--sin-imagen {
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--color-primario); color: #fff; text-align: center;
  font-size: clamp(22px, 4vw, 44px); font-weight: 800; line-height: 1.15;
}
.novedad__cuerpo { padding: 16px 20px 6px; }
.novedad__titulo { margin: 0 0 6px; font-size: 20px; }
.novedad__texto { margin: 0 0 14px; }
/* Las flechas van centradas sobre la foto: la capa mide lo mismo que ella. */
.carrusel__controles {
  position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: space-between; padding: 0 12px;
  pointer-events: none;
}
.carrusel__flecha {
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: 50%; background: rgb(255 255 255 / 92%); color: #2b2b2b;
  box-shadow: var(--sombra); cursor: pointer; pointer-events: auto;
}
.carrusel__flecha:hover { background: #fff; }
.carrusel__flecha--anterior .icono { transform: rotate(90deg); }
.carrusel__flecha--siguiente .icono { transform: rotate(-90deg); }
.carrusel__puntos { display: flex; justify-content: center; gap: 4px; margin-top: 10px; }
/* El botón mide 24 px para que se pueda tocar con el dedo; el punto se dibuja adentro. */
.carrusel__punto { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.carrusel__punto::before { content: ""; width: 9px; height: 9px; border-radius: 5px; background: var(--color-borde-fuerte); transition: width .2s; }
.carrusel__punto[aria-current="true"]::before { width: 22px; background: var(--color-primario); }
@media (prefers-reduced-motion: reduce) {
  .carrusel--activo .carrusel__pista { scroll-behavior: auto; }
  .carrusel__punto::before { transition: none; }
}

.anuncio { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 20px; align-items: start; padding: 16px; }
.anuncio--pagina { margin-bottom: 24px; padding: 0; }
.anuncio--sin-foto { grid-template-columns: minmax(0, 1fr); }
.anuncio__foto { width: 100%; border-radius: var(--radio-chico); background: var(--color-foto); }
.anuncio__texto { margin: 0 0 14px; }
.anuncio__botones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.seccion-portada__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.seccion-portada__titulo { margin: 0; font-size: 20px; }
@media (max-width: 640px) {
  .anuncio { grid-template-columns: minmax(0, 1fr); }
}

/* Cotizador: reutiliza el armado del carrito (.carrito, .resumen, .totales) y
   suma lo suyo. Solo variables de color: el modo nocturno las redefine. */
/* minmax(0, …): sin eso la columna crece hasta el ancho de la tabla de
   productos y, en un teléfono, toda la página se corre de lado en vez de
   desplazarse solo la tabla. */
.cotizador__principal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
.cotizador__principal > .tarjeta { padding: 20px; }
.cotizador__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
/* Los buscadores del cotizador son el de la cabecera fuera de ella: sin su
   lugar en la grilla ni su tope de ancho. */
.buscador--cotizador { grid-area: auto; max-width: none; justify-self: stretch; margin-bottom: 12px; }
.buscador--historial { grid-area: auto; flex: 1 1 280px; max-width: 460px; justify-self: auto; }
/* El encabezado de la cotización, igual al del PDF: emisor y folio arriba,
   el cliente en su cuadro debajo. En un teléfono el folio baja y el cuadro
   pasa a una columna. */
.membrete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 20px; padding-bottom: 12px; border-bottom: 2px solid var(--color-borde-fuerte); }
.membrete__emisor { display: grid; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.membrete__nombre { font-size: 17px; }
.membrete__folio { display: grid; gap: 1px; justify-items: center; padding: 8px 18px; border: 2px solid var(--color-texto); border-radius: var(--radio-chico); text-align: center; }
.membrete__numero { font-size: 20px; font-weight: 700; }
.senores { margin-top: 14px; border: 1px solid var(--color-borde); border-radius: var(--radio-chico); overflow: hidden; }
.senores__rotulo { padding: 5px 12px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-texto-suave); background: var(--color-tenue); border-bottom: 1px solid var(--color-borde); }
.senores__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 6px 16px; margin: 0; padding: 10px 12px; }
.senores__datos div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px; }
.senores__datos dt { font-size: 13px; color: var(--color-texto-suave); }
.senores__datos dd { margin: 0; overflow-wrap: anywhere; }
.membrete__preparada { margin: 8px 0 0; font-size: 14px; }
.cotizador__resultados { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-bottom: 4px; }
/* Un cliente no tiene foto: la fila es solo texto. */
.sugerencia--cliente { grid-template-columns: minmax(0, 1fr); }
.cotizador__precio { width: 110px; text-align: right; }
.cotizador__personalizado { margin-top: 16px; }
.cotizador__personalizado summary { cursor: pointer; font-weight: 600; color: var(--color-primario); }
.cotizador__filtros { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 16px; }
.cotizador__filtros .gestion__estados { margin-bottom: 0; }
.cotizador__acciones { display: grid; gap: 8px; margin-top: 12px; }
.estado--borrador { background: var(--color-neutro-suave); color: var(--color-neutro-texto); }
.estado--emitida { background: var(--color-alerta-suave); color: var(--color-alerta-texto); }
.estado--convertida, .estado--aprobada { background: var(--color-exito-suave); color: var(--color-exito); }
.estado--vencida, .estado--anulada { background: var(--color-apagado); color: var(--color-texto-suave); }
.cotizador__cliente { margin-bottom: 12px; }
.cotizador__candidato { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--color-borde); }

/* Ayuda ----------------------------------------------------------------- */
/* Angosta a propósito: es para leer, y una línea de 1200 px no se lee. */
.ayuda { max-width: 820px; }
.ayuda__filtro { margin-bottom: 20px; }
.ayuda__filtro input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-chico);
  background: var(--color-superficie);
  font: inherit;
  color: var(--color-texto);
}
.ayuda__sin-resultados { margin: 0 0 20px; padding: 14px 16px; border-radius: var(--radio); background: var(--color-alerta-suave); color: var(--color-alerta-texto); }
.ayuda__tema { margin-bottom: 28px; }
.ayuda__tema h2, .ayuda__contacto h2 { margin: 0 0 10px; font-size: 19px; }
.ayuda__pregunta { margin-bottom: 8px; border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--color-superficie); }
.ayuda__pregunta summary { padding: 12px 16px; font-weight: 600; cursor: pointer; }
.ayuda__pregunta[open] summary { border-bottom: 1px solid var(--color-borde); }
.ayuda__respuesta { padding: 2px 16px; line-height: 1.55; }
.ayuda__respuesta ul { padding-left: 20px; }
.ayuda__video { margin: 0 0 12px; }
.ayuda__video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radio); background: #000; }
.ayuda__video figcaption { margin-top: 6px; font-size: 14px; color: var(--color-texto-suave); }
.ayuda__contacto { padding: 16px 18px; border-radius: var(--radio); background: var(--color-primario-suave); }
.ayuda__contacto p { margin: 0; }
.ayuda__manuales { margin-bottom: 24px; padding: 16px 18px; border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--color-superficie); }
.ayuda__manuales h2 { margin: 0 0 6px; font-size: 19px; }
.ayuda__manuales p { margin: 0 0 12px; }
.ayuda__manuales-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.ayuda__manuales-tamano { font-weight: 400; opacity: .8; }