/* Sistema de diseño 4d3 · componentes
 *
 * Las piezas del backoffice: cabecera, tarjetas, tablas, formularios, botones,
 * avisos y distintivos. Todas heredan --acento de la rotación de la tríada, de
 * modo que una lista de tarjetas alterna verde → azul → coral sin que la
 * plantilla tenga que decir nada.
 *
 * El botón lleva el efecto de firma del sistema: el relleno de líneas pastel
 * entra desde la izquierda al pasar por encima.
 */

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

.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--papel);
  border-bottom: var(--borde) solid var(--linea);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e3) var(--e5);
  max-width: var(--ancho-rejilla);
  margin: 0 auto;
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--fuente-mono);
  font-weight: var(--peso-medio);
  font-size: var(--texto-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  text-decoration: none;
  color: var(--tinta);
}

.marca__rombo {
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: var(--triada);
}

.navegacion {
  display: flex;
  align-items: center;
  gap: var(--e4);
  flex-wrap: wrap;
}

.navegacion a {
  font-family: var(--fuente-mono);
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  text-decoration: none;
  color: var(--tinta-suave);
  padding: var(--e1) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--micro), border-color var(--micro);
}

.navegacion a:hover { color: var(--tinta); }

/* La página actual no se marca solo con color: lleva subrayado. */
.navegacion a[aria-current="page"] {
  color: var(--tinta);
  border-bottom-color: var(--acento, var(--pastel-blue));
}

/* --- Tarjetas ------------------------------------------------------------ */

.tarjeta {
  position: relative;
  background: var(--papel);
  border: var(--borde) solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e4);
  transition: box-shadow var(--micro), transform var(--micro);
}

/* La barra de color crece desde el borde izquierdo al pasar por encima */
.tarjeta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--barra);
  height: 0;
  background: var(--acento, var(--pastel-green));
  transition: height var(--micro);
}

.tarjeta:hover::before { height: 100%; }
.tarjeta--enlace:hover { box-shadow: var(--sombra-carta); transform: translateY(-3px); }

.tarjeta__valor {
  font-family: var(--fuente-mono);
  font-size: var(--texto-2xl);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  display: block;
  margin-top: var(--e1);
}

.tarjeta__pie {
  font-size: var(--texto-xs);
  color: var(--tinta-suave);
  margin-top: var(--e1);
}

.panel {
  border: var(--borde) solid var(--linea);
  padding: var(--e4);
  background: var(--papel);
}

.panel--alt { background: var(--papel-alt); }

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

.tabla-envoltura {
  /* El listado del feed es ancho; que desborde la tabla, nunca la página. */
  overflow-x: auto;
  border: var(--borde) solid var(--linea);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-sm);
}

thead th {
  position: sticky;
  top: 0;
  background: var(--papel-alt);
  font-family: var(--fuente-mono);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--tinta-suave);
  text-align: left;
  padding: var(--e3);
  border-bottom: var(--borde) solid var(--linea);
  white-space: nowrap;
}

tbody td {
  padding: var(--e3);
  border-bottom: var(--borde) solid var(--linea);
  vertical-align: top;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--papel-alt); }

td.cifra, th.cifra { text-align: right; }

/* --- Botones ------------------------------------------------------------- */

.boton {
  --relleno: var(--acento, var(--pastel-blue));
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: var(--e2) var(--e5);
  border: var(--borde-boton) solid var(--tinta);
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
  font-family: var(--fuente-mono);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: color var(--micro), border-color var(--micro);
}

/* El efecto de firma: líneas pastel que entran desde la izquierda */
.boton::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: repeating-linear-gradient(
    0deg,
    var(--relleno) 0 3px,
    color-mix(in srgb, var(--relleno) 55%, var(--white)) 3px 6px
  );
  transition: transform var(--micro);
  z-index: 0;
}

.boton > * { position: relative; z-index: 1; }
.boton:hover::before { transform: translateX(0); }
.boton:hover { border-color: var(--relleno); }

.boton--primario { --relleno: var(--pastel-green); }
.boton--peligro  { --relleno: var(--pastel-coral); border-color: var(--error); color: var(--error); }
.boton--fino     { padding: var(--e1) var(--e3); }

.boton:disabled,
.boton[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Formularios --------------------------------------------------------- */

.campo { margin-bottom: var(--e4); }

.campo label {
  display: block;
  font-family: var(--fuente-mono);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--tinta-suave);
  margin-bottom: var(--e1);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: var(--e2) var(--e3);
  border: var(--borde) solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: var(--texto-base);
  transition: border-color var(--micro);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus { border-color: var(--dark-blue); }

.campo textarea { min-height: 6rem; resize: vertical; font-weight: var(--peso-ligero); }

/* Los importes y porcentajes se escriben en mono: se leen como cifras */
.campo input[inputmode="numeric"],
.campo input[type="number"] {
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
}

.campo--error input,
.campo--error select,
.campo--error textarea { border-color: var(--error); }

.campo .ayuda {
  font-size: var(--texto-xs);
  color: var(--tinta-suave);
  margin: var(--e1) 0 0;
}

.campo .error {
  font-size: var(--texto-xs);
  color: var(--error);
  margin: var(--e1) 0 0;
}

.requerido { color: var(--error); }

.campo--linea {
  display: flex;
  align-items: center;
  gap: var(--e2);
}
.campo--linea label { margin: 0; }
.campo--linea input { width: auto; }

.sufijo {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
}
.sufijo input { max-width: 8rem; }
.sufijo .unidad {
  font-family: var(--fuente-mono);
  font-size: var(--texto-xs);
  color: var(--tinta-suave);
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  align-items: flex-end;
  margin-bottom: var(--e4);
}
.filtros .campo { margin-bottom: 0; }
.filtros .campo input,
.filtros .campo select { min-width: 10rem; }

/* --- Avisos -------------------------------------------------------------- */

.avisos { margin-bottom: var(--e4); }

.aviso {
  border-left: var(--barra) solid var(--tinta-suave);
  background: var(--papel-alt);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e2);
  font-size: var(--texto-sm);
}

.aviso--exito { border-left-color: var(--exito); background: var(--exito-fondo); }
.aviso--error { border-left-color: var(--error); background: var(--error-fondo); }
.aviso--atencion { border-left-color: var(--aviso); background: var(--aviso-fondo); }

/* --- Distintivos --------------------------------------------------------- */

/* Nunca solo color: cada distintivo lleva su texto. */
.distintivo {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: 2px var(--e2);
  border: var(--borde) solid var(--linea);
  border-radius: var(--radio-pieza);
  font-family: var(--fuente-mono);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--tinta);
}

.distintivo--borrador  { border-color: var(--gray-mid); }
.distintivo--publicado { border-color: var(--dark-green); }
.distintivo--retirado  { border-color: var(--tinta-suave); color: var(--tinta-suave); }
.distintivo--huerfano  { border-color: var(--dark-coral); color: var(--error); }
.distintivo--completada { border-color: var(--dark-green); }
.distintivo--fallida   { border-color: var(--dark-coral); color: var(--error); }
.distintivo--en_curso  { border-color: var(--dark-blue); }
.distintivo--sin-stock { border-color: var(--aviso); color: var(--aviso); }

/* --- Precios ------------------------------------------------------------- */

/* El par sin IVA / con IVA va siempre junto: es la regla de la casa. */
.par-precio {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.25;
}

.par-precio__sin {
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--peso-medio);
}

.par-precio__con {
  font-family: var(--fuente-mono);
  font-size: var(--texto-xs);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
}

.desglose {
  font-family: var(--fuente-mono);
  font-size: var(--texto-xs);
  color: var(--tinta-suave);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

/* --- Paginador ----------------------------------------------------------- */

.paginador {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  margin-top: var(--e4);
  font-family: var(--fuente-mono);
  font-size: var(--texto-xs);
  color: var(--tinta-suave);
  flex-wrap: wrap;
}

.paginador__botones { display: flex; gap: var(--e2); }

/* --- Estados de carga de htmx -------------------------------------------- */

.indicador { display: none; }
.htmx-request .indicador,
.htmx-request.indicador { display: inline-flex; }

/* El rombo giratorio del sistema */
.girando {
  width: 12px;
  height: 12px;
  background: var(--acento, var(--pastel-blue));
  animation: girar-rombo 1.2s linear infinite;
}

@keyframes girar-rombo {
  from { transform: rotate(45deg); }
  to   { transform: rotate(405deg); }
}

.htmx-request .oculto-al-cargar { opacity: 0.4; }

/* --- Acceso -------------------------------------------------------------- */

.acceso {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--e5);
}

.acceso__caja {
  width: 100%;
  max-width: 26rem;
  border: var(--borde) solid var(--linea);
  padding: var(--e6);
}

/* --- Ficha en dos columnas ----------------------------------------------- */

.dos-columnas {
  display: grid;
  gap: var(--e6);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 900px) {
  .dos-columnas { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .contenedor { padding: 0 var(--e4); }
  .cabecera__interior { padding: var(--e3) var(--e4); flex-wrap: wrap; }
  .navegacion { gap: var(--e3); }
  main { padding: var(--e5) 0 var(--e7); }
}

/* --- Portal de cliente ---------------------------------------------------- */

/* La rejilla del catálogo. Las tarjetas son la primera superficie que ven
   terceros, así que la prioridad es que el par de precios se lea antes que la
   foto: es la propuesta de valor, no la imagen del mayorista. */

.tarjeta-producto {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  border: var(--borde) solid var(--linea);
  padding: var(--e4);
  background: var(--papel);
}

.tarjeta-producto__imagen {
  width: 100%;
  height: 10rem;
  object-fit: contain;
  background: var(--papel-alt);
}

.tarjeta-producto__nombre {
  font-size: var(--texto-base);
  font-weight: var(--peso-ligero);
  margin: 0;
}

.tarjeta-producto form { margin-top: auto; }

.ficha {
  display: grid;
  gap: var(--e6);
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  align-items: start;
}

.ficha__imagen {
  width: 100%;
  object-fit: contain;
  background: var(--papel-alt);
}

.ficha__cuerpo { display: flex; flex-direction: column; gap: var(--e4); }

/* El portal se usa desde el móvil de quien compra, no desde un escritorio de
   oficina: por debajo de 720 px la ficha se apila entera. */
@media (max-width: 720px) {
  .ficha { grid-template-columns: minmax(0, 1fr); }
  .tarjeta-producto__imagen { height: 12rem; }
}