/* ==========================================================================
   YARVIS Compras — hoja de estilos base
   Colores muestreados del logo: naranja #FF7F00, carbón #323232, claro #F7F7F7.
   Tipografías del manual de marca: Montserrat (principal) y Roboto (datos).
   ========================================================================== */

:root {
  /* marca */
  --naranja:     #FF7F00;
  --naranja-600: #E67200;
  --naranja-800: #CC6600;
  --naranja-100: #FFE7CC;
  --naranja-tenue: rgba(255, 127, 0, .12);
  /* El naranja de rellenar. No cambia con el tema: es el de la marca, y el
     texto que va encima es oscuro en los dos. `--naranja` sí cambia, porque
     como color de TEXTO sobre blanco el vivo encandila. */
  --naranja-relleno: #FF7F00;

  --carbon:      #323232;
  --carbon-900:  #1C1C1C;
  --carbon-800:  #262626;
  --carbon-700:  #3A3A3A;
  --carbon-600:  #464646;
  --carbon-500:  #5A5A5A;

  --claro:       #F7F7F7;
  --gris-300:    #C8C8C8;
  --gris-400:    #9A9A9A;
  --gris-500:    #7A7A7A;

  /* estados — los mismos colores de la leyenda del formato Excel */
  --ok:          #2E9E5B;   /* verde  = ya pedido */
  --alerta:      #E0A800;   /* ámbar  = se pide por contenedor */
  --info:        #2F80ED;   /* azul   = pendiente autorización */
  --morado:      #7C4DFF;   /* morado = producto traslado */
  --peligro:     #D64545;

  --fuente:   'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-2: 'Roboto', system-ui, sans-serif;
  --mono:     'JetBrains Mono', 'Roboto Mono', ui-monospace, Consolas, monospace;

  /* Texto de los chips y de las celdas de color. Van aparte del color base
     porque un verde que se lee sobre carbón no se lee sobre blanco: en el tema
     claro estos se oscurecen y los de arriba no. */
  --ok-texto:      #7BD9A2;
  --alerta-texto:  #FFD466;
  --info-texto:    #8FBBF7;
  --morado-texto:  #BFA5FF;
  --peligro-texto: #FF9C9C;
  --cl-texto:      #E7C878;   /* franja del centro logístico */
  --cr-texto:      #C4B0F5;   /* franja de referencia cruzada */
  --alerta-velo:   rgba(224, 168, 0, .16);   /* fondo de un aviso de cuidado */

  /* Velos para resaltar una fila o una celda sobre el fondo. En oscuro se
     aclara, en claro se oscurece: por eso son tokens y no un blanco fijo. */
  --velo:        rgba(255, 255, 255, .035);
  --velo-suave:  rgba(255, 255, 255, .022);
  --velo-fuerte: rgba(255, 255, 255, .09);

  --radio:    10px;
  --radio-sm: 6px;
  --sombra:   0 4px 20px rgba(0, 0, 0, .35);
  --sombra-barra: 0 2px 12px rgba(0, 0, 0, .4);
  --sombra-menu:  0 10px 30px rgba(0, 0, 0, .45);
  --borde:    1px solid var(--carbon-600);

  --barra-alto: 58px;
}

/* ----------------------------------------------------------- tema claro --
   Los nombres siguen diciendo «carbón» y «claro» porque son los de la marca y
   los usa todo el CSS; lo que cambia es a qué apuntan. Redefinir los tokens
   evita tocar las setecientas reglas que ya los usan. */
:root[data-tema="claro"] {
  --carbon:      #E8E6E3;
  --carbon-900:  #F4F2EF;   /* fondo de la página */
  --carbon-800:  #FFFFFF;   /* tarjetas y superficies */
  --carbon-700:  #EDEAE6;   /* cabeceras y realces */
  --carbon-600:  #D8D3CC;   /* bordes */
  --carbon-500:  #B9B2A8;

  --claro:       #24211E;   /* el texto principal */
  --gris-300:    #4A443D;
  --gris-400:    #6B645A;
  --gris-500:    #8A8279;

  /* El naranja de la marca sobre blanco encandila: se baja un punto para el
     texto y los bordes, y se deja el vivo para los rellenos. */
  --naranja:     #C86A00;
  --naranja-600: #B35F00;
  --naranja-800: #8F4C00;
  --naranja-100: #7A4100;
  --naranja-tenue: rgba(255, 127, 0, .14);

  --ok:          #1F7A45;
  --alerta:      #9A6C00;
  --info:        #1F63C4;
  --morado:      #5B32D6;
  --peligro:     #B33636;

  --ok-texto:      #146034;
  --alerta-texto:  #7A5500;
  --info-texto:    #174E9E;
  --morado-texto:  #4726B0;
  --peligro-texto: #962626;
  --cl-texto:      #7A5500;
  --cr-texto:      #4726B0;
  --alerta-velo:   rgba(154, 108, 0, .12);

  --velo:        rgba(0, 0, 0, .035);
  --velo-suave:  rgba(0, 0, 0, .02);
  --velo-fuerte: rgba(0, 0, 0, .07);

  --sombra: 0 4px 16px rgba(36, 33, 30, .10);
  --sombra-barra: 0 1px 6px rgba(36, 33, 30, .12);
  --sombra-menu:  0 10px 30px rgba(36, 33, 30, .18);
}

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

/* Oculto es oculto, aunque el elemento tenga un display propio (.btn es
   inline-flex y le ganaba al atributo: un botón «escondido» seguía a la vista
   y no hacía nada al pulsarlo). */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--carbon-900);
  color: var(--claro);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--naranja); text-decoration: none; }
a:hover { color: var(--naranja-100); text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 700; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

p { margin: 0 0 1rem; }

code, .mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------ barra superior */
.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--barra-alto);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 1.25rem;
  background: var(--carbon);
  border-bottom: 2px solid var(--naranja);
  box-shadow: var(--sombra-barra);
}

.barra .marca {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--claro);
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
.barra .marca:hover { text-decoration: none; }

/* 30px deja legible el isotipo sin que la barra crezca. */
.barra .marca .logo { height: 30px; width: auto; display: block; }

/* El logo de la marca es claro y se pierde sobre un fondo claro: hay una
   versión oscura y cada tema muestra la suya. */
.barra .marca .logo-claro  { display: none; }
:root[data-tema="claro"] .barra .marca .logo-oscuro { display: none; }
:root[data-tema="claro"] .barra .marca .logo-claro  { display: block; }

/* «Compras» nombra el módulo: va pegado al logo como una etiqueta de
   producto —pequeña, en mayúsculas espaciadas y en el naranja de la marca—
   para que no se confunda con el primer botón del menú. La raya que lo
   separaba del logo se movió al arranque del menú, que es donde de verdad
   cambia de cosa. */
.barra .marca .modulo {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--naranja);
  line-height: 1;
  /* Centrado con el logo. El isotipo tiene más peso abajo que arriba, así que
     el centro óptico queda un pelo por encima del geométrico. */
  position: relative;
  top: -1px;
}

@media (max-width: 900px) {
  .barra .marca .modulo { display: none; }
}

.barra nav {
  display: flex; gap: .25rem; flex: 1; overflow-x: auto;
  padding-left: 1.25rem;
  border-left: 1px solid var(--carbon-600);
}

.barra nav a {
  padding: .45rem .85rem;
  border-radius: var(--radio-sm);
  color: var(--gris-300);
  font-size: .9rem;
  font-weight: 500;
  white-space: nowrap;
}
.barra nav a:hover  { background: var(--carbon-700); color: var(--claro); text-decoration: none; }
.barra nav a.activo { background: var(--naranja-tenue); color: var(--naranja); }

/* Semanas y pedidos siguen a un clic, pero no compiten con «Surtir». */
.barra nav .separador {
  width: 1px; align-self: center; height: 1.2rem;
  background: var(--carbon-600); margin: 0 .5rem; flex: 0 0 auto;
}
.barra nav a.secundario { color: var(--gris-500); font-weight: 400; font-size: .85rem; }
.barra nav a.secundario:hover { color: var(--gris-300); }

/* ------------------------------------------------------ menú de la cuenta */
/* Un solo botón redondo con las iniciales, como el de la cuenta de Google.
   Al abrirlo: quién está dentro y las tres cosas que antes iban sueltas en la
   barra —configuración, tema y salir—, una debajo de otra. */
.perfil { position: relative; flex: 0 0 auto; }
.perfil > summary { list-style: none; cursor: pointer; display: block; line-height: 0; }
.perfil > summary::-webkit-details-marker { display: none; }

.avatar {
  display: inline-grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--naranja-relleno); color: #1C1C1C;
  font-family: var(--fuente); font-weight: 800; font-size: .82rem; letter-spacing: .02em;
  line-height: 1; user-select: none;
  border: 2px solid transparent;
  transition: border-color .12s, box-shadow .12s;
}
.perfil > summary:hover .avatar,
.perfil[open] > summary .avatar { border-color: var(--claro); box-shadow: 0 0 0 3px var(--naranja-tenue); }
.perfil > summary:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; border-radius: 50%; }

.perfil .caja {
  position: absolute; right: 0; top: calc(100% + .6rem); z-index: 60;
  width: 300px; max-width: calc(100vw - 2rem);
  background: var(--carbon-800); border: var(--borde); border-radius: 14px;
  box-shadow: var(--sombra-menu); overflow: hidden;
}

.perfil .quien {
  display: flex; gap: .85rem; align-items: center;
  padding: 1rem 1rem .9rem; border-bottom: var(--borde);
}
.perfil .quien .avatar.grande { width: 2.9rem; height: 2.9rem; font-size: 1.05rem; flex: 0 0 auto; }
.perfil .quien strong { display: block; line-height: 1.2; }
.perfil .quien .detalle { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; margin-top: .25rem; }

.perfil .opciones { padding: .4rem; display: grid; gap: .1rem; }
.perfil .opcion {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .6rem .75rem; border-radius: 8px;
  border: 0; background: transparent;
  color: var(--gris-300); font-family: var(--fuente); font-size: .9rem; font-weight: 500;
  text-align: left; cursor: pointer; text-decoration: none;
}
.perfil .opcion:hover { background: var(--carbon-700); color: var(--claro); text-decoration: none; }
.perfil .opcion.activa { color: var(--naranja); }
.perfil .opcion svg { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; color: var(--gris-400); }
.perfil .opcion:hover svg, .perfil .opcion.activa svg { color: var(--naranja); }
.perfil .opcion.salir, .perfil .opcion.salir svg { color: var(--peligro-texto); }
.perfil .opcion.salir:hover { background: rgba(214, 69, 69, .12); }

/* Sol o luna según el tema, dentro de la opción. */
.perfil .opcion .icono-luna { display: none; }
:root[data-tema="claro"] .perfil .opcion .icono-sol  { display: none; }
:root[data-tema="claro"] .perfil .opcion .icono-luna { display: block; }

/* ------------------------------------------------------ cambio de tema */
/* Redondo y solo con el icono, igual que la ruedita: sol cuando se está en
   oscuro (lo que se ofrece es pasar a claro), luna cuando se está en claro. */
.boton-tema {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 2.1rem; height: 2.1rem; padding: 0;
  background: transparent;
  border: 1px solid var(--carbon-600); border-radius: 50%;
  color: var(--gris-300);
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.boton-tema svg { width: 1.05rem; height: 1.05rem; }
.boton-tema:hover { border-color: var(--naranja); color: var(--naranja); background: var(--naranja-tenue); }
.boton-tema:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }

.boton-tema .icono-luna { display: none; }
:root[data-tema="claro"] .boton-tema .icono-sol  { display: none; }
:root[data-tema="claro"] .boton-tema .icono-luna { display: block; }

@media (max-width: 900px) {
  .boton-tema .texto { display: none; }
}

/* ------------------------------------------ pasos numerados de una tarjeta */
.pasos-simples { margin: 0 0 1.25rem; padding-left: 1.25rem; display: grid; gap: .8rem; }
.pasos-simples li { padding-left: .25rem; font-size: .9rem; line-height: 1.55; }
.pasos-simples li::marker { color: var(--naranja); font-weight: 700; }

/* ------------------------------------------------- alcance de un pedido */
/* Plegado cuando no hay nada raro que mirar; abierto cuando el pedido está
   filtrado, porque entonces sí importa saber qué quedó fuera. */
.alcance > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.alcance > summary::-webkit-details-marker { display: none; }
.alcance > summary::before {
  content: '▸'; color: var(--gris-500); font-size: .8rem; transition: transform .12s ease;
}
.alcance[open] > summary::before { transform: rotate(90deg); }
.alcance > summary .titulo { font-weight: 700; font-size: 1.02rem; }
.alcance > form { margin-top: 1rem; }

.pastillas { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.pastilla {
  display: flex; gap: .6rem; align-items: flex-start; cursor: pointer;
  background: var(--carbon-900); border: 1px solid var(--carbon-600);
  border-radius: var(--radio-sm); padding: .7rem .8rem;
  transition: border-color .12s ease, background .12s ease;
}
.pastilla:hover  { border-color: var(--carbon-500); }
.pastilla.activa { border-color: var(--naranja); background: var(--naranja-tenue); }
/* La clase la pone el servidor al pintar; esto la mantiene al día cuando el
   usuario marca o desmarca, sin una línea de JavaScript. */
.pastilla:has(input:checked)     { border-color: var(--naranja); background: var(--naranja-tenue); }
.pastilla:not(:has(input:checked)) { border-color: var(--carbon-600); background: var(--carbon-900); }
.pastilla input  { margin-top: .2rem; accent-color: var(--naranja); flex: 0 0 auto; }
.pastilla span   { display: block; }
.pastilla.ancha  { margin-top: .6rem; }

/* ---------------------------------------------------- tarjetas de destino */
/* Cada una es un formulario: la tarjeta entera es la acción de surtir. */
.destinos .destino {
  display: flex; flex-direction: column; gap: .9rem; justify-content: space-between;
  background: var(--carbon-900); border: var(--borde); border-radius: var(--radio);
  padding: 1rem 1.1rem;
  transition: border-color .12s ease, transform .12s ease;
}
.destinos .destino:hover { border-color: var(--naranja); transform: translateY(-1px); }
.destinos .destino.listo { opacity: .65; }
.destinos .destino.listo:hover { opacity: 1; }
.destinos .destino .cabeza {
  display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem;
}
.destinos .destino .nombre { font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.destinos .destino .btn { width: 100%; justify-content: center; }

.barra .usuario {
  display: flex; align-items: center; gap: .6rem;
  font-size: .85rem; color: var(--gris-400); white-space: nowrap;
}
.barra .usuario strong { color: var(--claro); font-weight: 600; }

/* ------------------------------------------------------------ contenido */
.contenido { padding: 1.5rem 1.25rem 3rem; max-width: 1600px; margin: 0 auto; }
.contenido.ancho-completo { max-width: none; padding-left: .75rem; padding-right: .75rem; }

/* La flecha de volver al paso a paso, arriba del encabezado de las pantallas
   que cuelgan de un pedido. Discreta, y al pasar el ratón se mueve un poco. */
.volver {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-bottom: .6rem;
  color: var(--gris-400); font-size: .84rem; font-weight: 600;
}
.volver svg { width: 1rem; height: 1rem; transition: transform .12s ease; }
.volver:hover { color: var(--naranja); text-decoration: none; }
.volver:hover svg { transform: translateX(-3px); }

.encabezado-pagina {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.encabezado-pagina .subtitulo { color: var(--gris-400); font-size: .9rem; margin: 0; }

/* ------------------------------------------------- tarjetas e indicadores */
.tarjeta {
  background: var(--carbon-800);
  border: var(--borde);
  border-radius: var(--radio);
  padding: 1.15rem 1.25rem;
}
.tarjeta + .tarjeta { margin-top: 1rem; }
.tarjeta h2 { display: flex; align-items: center; gap: .5rem; }

.rejilla { display: grid; gap: 1rem; }
.rejilla.c2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rejilla.c3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rejilla.c4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ------------------------------------------------------------ paso a paso */
/* Una columna de pasos numerados, de arriba abajo. Cada paso es una tarjeta
   con su círculo: gris si falta, naranja el que toca ahora, verde el hecho.
   Lo usan el asistente y el detalle del pedido. */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.paso {
  display: grid; grid-template-columns: 2.25rem 1fr; gap: 1rem; align-items: start;
  background: var(--carbon-800); border: var(--borde); border-radius: var(--radio);
  padding: 1.1rem 1.25rem;
}
.paso .marca {
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .95rem;
  background: var(--carbon-700); color: var(--gris-400);
  border: 1px solid var(--carbon-600);
}
.paso.hecho  .marca { background: rgba(46, 158, 91, .18); color: var(--ok-texto); border-color: transparent; }
.paso.actual { border-color: var(--naranja); box-shadow: 0 0 0 1px var(--naranja-tenue); }
.paso.actual .marca { background: var(--naranja-relleno); color: #1C1C1C; border-color: transparent; }
.paso .titulo { font-weight: 700; font-size: 1.02rem; }
.paso .cuerpo { min-width: 0; }
.paso:not(.actual):not(.hecho) .cuerpo { opacity: .6; }

.paso .accion {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: .75rem 0 .35rem;
}
.paso input[type=file] {
  background: var(--carbon-900); border: 1px solid var(--carbon-600);
  border-radius: var(--radio-sm); padding: .45rem .6rem; color: var(--gris-300);
  font-family: var(--fuente-2); font-size: .85rem; max-width: 22rem;
}

.indicador { text-align: left; }
.indicador .valor {
  font-family: var(--mono); font-size: 1.75rem; font-weight: 700;
  color: var(--claro); line-height: 1.1;
}
.indicador .valor.acento { color: var(--naranja); }
.indicador .etiqueta {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--gris-400); font-weight: 600; margin-top: .2rem;
}
.indicador .nota { font-size: .8rem; color: var(--gris-500); margin-top: .35rem; }

/* Indicadores compactos: valor, etiqueta y nota en un solo renglón, con la
   mitad del relleno. Para las cabeceras donde lo que importa está más abajo
   (la grilla) y las cifras solo tienen que estar a la vista, no lucirse. */
.rejilla.compacta { gap: .5rem; }
.rejilla.compacta .indicador {
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
  padding: .5rem .9rem;
}
.rejilla.compacta .indicador .valor    { font-size: 1.2rem; }
.rejilla.compacta .indicador .etiqueta { margin-top: 0; }
.rejilla.compacta .indicador .nota     { margin-top: 0; font-size: .75rem; }
.rejilla.compacta .indicador .nota:not(:empty)::before { content: '· '; }

/* -------------------------------------------------------------- botones */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radio-sm);
  background: var(--carbon-700);
  color: var(--claro);
  font-family: var(--fuente); font-size: .88rem; font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, opacity .12s;
  text-decoration: none;
}
.btn:hover { background: var(--carbon-600); color: var(--claro); text-decoration: none; }

.btn.primario { background: var(--naranja-relleno); color: #1C1C1C; }
.btn.primario:hover { background: var(--naranja-600); }

.btn.contorno { background: transparent; border-color: var(--carbon-500); color: var(--gris-300); }
.btn.contorno:hover { border-color: var(--naranja); color: var(--naranja); background: var(--naranja-tenue); }

.btn.peligro { background: transparent; border-color: var(--peligro); color: var(--peligro-texto); }
.btn.peligro:hover { background: rgba(214, 69, 69, .15); }

.btn.pequeno { padding: .3rem .6rem; font-size: .8rem; }

.btn[disabled], .btn.desactivado { opacity: .45; pointer-events: none; }

/* El botón que abre WhatsApp: con el logo y el verde de la marca. Sin número
   se queda apagado pero con su explicación al pasar el ratón. */
.btn.whatsapp { border-color: #25D366; color: #25D366; }
.btn.whatsapp:hover { background: rgba(37, 211, 102, .12); border-color: #25D366; color: #25D366; }
.btn.whatsapp svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
/* Sin número no se puede escribir, pero el botón sigue vivo: lleva a ponerlo.
   Va en ámbar, que es el color de «falta algo». */
.btn.whatsapp.sin-numero { border-color: var(--alerta); color: var(--alerta-texto); }
.btn.whatsapp.sin-numero:hover { background: rgba(224, 168, 0, .12); border-color: var(--alerta); color: var(--alerta-texto); }

.acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------ formularios */
.campo { margin-bottom: 1rem; }
.campo label {
  display: block; margin-bottom: .3rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gris-400);
}
.campo .ayuda { font-size: .8rem; color: var(--gris-500); margin-top: .3rem; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=file], select, textarea {
  width: 100%;
  padding: .55rem .7rem;
  background: var(--carbon-900);
  border: 1px solid var(--carbon-600);
  border-radius: var(--radio-sm);
  color: var(--claro);
  font-family: var(--fuente-2);
  font-size: .92rem;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px var(--naranja-tenue);
}
input[type=number] { font-family: var(--mono); text-align: right; }

.fila-campos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Una casilla con su explicación al lado. */
.marcar { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1rem; font-size: .9rem; }
.marcar input { margin-top: .25rem; accent-color: var(--naranja); flex: 0 0 auto; }
.marcar span span { display: block; }

/* ---------------------------------------------------------------- modal */
/* <dialog> nativo: el navegador pone el foco, la tecla Esc y la capa de
   fondo; aquí solo va el aspecto. Los campos van por bloques con un título
   pequeño en naranja, y el pie con los botones queda siempre a la vista. */
dialog.modal {
  width: min(720px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0; margin: auto;
  background: var(--carbon-800); color: var(--claro);
  border: var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-menu);
}
dialog.modal::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); }

.modal-cabeza {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem .9rem;
  border-bottom: var(--borde);
}
.modal-cabeza h2 { margin: 0 0 .15rem; }
.modal-cabeza .cerrar {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid var(--carbon-600); background: transparent; color: var(--gris-400);
  font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.modal-cabeza .cerrar:hover { color: var(--claro); border-color: var(--gris-500); }

.modal-seccion { padding: 1rem 1.25rem 1.1rem; }
.modal-seccion + .modal-seccion { border-top: 1px solid var(--carbon-700); }
.modal-seccion h3 {
  margin: 0 0 .8rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--naranja);
}
.modal-seccion .campo { margin-bottom: 0; }
.modal-seccion .fila-campos { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.modal-seccion .campo.ancho { grid-column: span 2; }

.modal-pie {
  display: flex; justify-content: flex-end; gap: .6rem;
  padding: .9rem 1.25rem 1.1rem;
  border-top: var(--borde); background: var(--carbon-900);
  border-radius: 0 0 var(--radio) var(--radio);
}

@media (max-width: 640px) {
  .modal-seccion .campo.ancho { grid-column: auto; }
}

/* --------------------------------------------------------------- avisos */
.aviso {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .8rem 1rem;
  border-radius: var(--radio-sm);
  border-left: 3px solid var(--gris-500);
  background: var(--carbon-800);
  margin-bottom: 1rem;
  font-size: .9rem;
}
.aviso.ok      { border-left-color: var(--ok);      background: rgba(46, 158, 91, .1); }
.aviso.alerta  { border-left-color: var(--alerta);  background: rgba(224, 168, 0, .1); }
.aviso.error   { border-left-color: var(--peligro); background: rgba(214, 69, 69, .1); }
.aviso.info    { border-left-color: var(--info);    background: rgba(47, 128, 237, .1); }

/* --------------------------------------------------------------- tablas */
.tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla th {
  position: sticky; top: 0; z-index: 2;
  padding: .55rem .7rem;
  background: var(--carbon-700);
  color: var(--gris-300);
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  text-align: left;
  border-bottom: 2px solid var(--carbon-600);
  white-space: nowrap;
}
.tabla td { padding: .5rem .7rem; border-bottom: 1px solid var(--carbon-700); vertical-align: middle; }
.tabla tbody tr:hover { background: var(--carbon-800); }
.tabla .num { text-align: right; font-family: var(--mono); }
.tabla .vacia { text-align: center; padding: 2.5rem 1rem; color: var(--gris-500); }

/* Una fila que encabeza un bloque dentro de la tabla (una línea, una semana). */
.tabla tr.grupo td { background: var(--velo); font-weight: 600; padding-top: .55rem; padding-bottom: .55rem; }
.tabla tr.grupo .chip { margin-left: .4rem; vertical-align: middle; }

/* Una tabla ancha se desliza dentro de su tarjeta; la página no. */
.desliza { overflow-x: auto; }

/* ------------------------------------------------- cuadrícula del inicio */
/* La misma cuadrícula que el comprador llevaba en Excel: cada centro logístico
   con sus sedes debajo y, a la derecha, traslados y compras con su «hace N
   días». Las rayas verticales separan los tres bloques como las columnas de
   la hoja; el renglón vacío entre centros también viene de allá. */
.tabla.inicio th.grupo { text-align: center; }
.tabla.inicio .ini     { border-left: 1px solid var(--carbon-600); }

.tabla.inicio td.hace,
.tabla.inicio td.accion { text-align: center; white-space: nowrap; }
.tabla.inicio td.hace   { width: 9.5rem; color: var(--gris-300); font-variant-numeric: tabular-nums; }

/* Semáforo del «hace N días»: hasta 7 verde, hasta 15 ámbar, de ahí rojo.
   Los mismos tonos de los chips, que ya están afinados para los dos temas. */
.tabla.inicio td.hace .reciente { color: var(--ok-texto);      font-weight: 600; }
.tabla.inicio td.hace .medio    { color: var(--alerta-texto);  font-weight: 600; }
.tabla.inicio td.hace .tarde    { color: var(--peligro-texto); font-weight: 700; }
.tabla.inicio td.accion { width: 12rem; }
.tabla.inicio td.accion form { display: inline; margin: 0; }
.tabla.inicio td.accion .btn { min-width: 6.5rem; justify-content: center; }

/* Un centro logístico elige en el mismo botón desde qué otro centro se surte. */
.tabla.inicio td.accion form.con-origen { display: inline-flex; gap: .3rem; align-items: center; }
.tabla.inicio td.accion form.con-origen .btn { min-width: 0; }
.tabla.inicio select.origen {
  width: auto; max-width: 8.5rem; padding: .2rem .4rem;
  background: var(--carbon-800); border: 1px solid var(--carbon-600); border-radius: var(--radio-sm);
  color: var(--claro); font-family: var(--fuente-2); font-size: .78rem;
}
.tabla.inicio select.origen:focus { outline: none; border-color: var(--naranja); }

/* Continuar y Reiniciar van juntos; el segundo deshace trabajo, así que se
   queda en gris y solo enseña el rojo al acercarse. */
.tabla.inicio td.accion .par { display: inline-flex; gap: .3rem; align-items: center; }
.tabla.inicio td.accion .par .btn { min-width: 0; }
.tabla.inicio .btn.reiniciar { color: var(--gris-400); border-color: var(--carbon-600); }
.tabla.inicio .btn.reiniciar:hover { color: var(--peligro); border-color: var(--peligro); background: transparent; }
/* Si el pedido ya tiene algo enviado, el botón lo anticipa en ámbar. */
.tabla.inicio .btn.reiniciar.riesgo { color: var(--alerta-texto); border-color: var(--alerta); }

.tabla.inicio td.nombre .pequeno { margin-left: .35rem; }
.tabla.inicio td.nombre .chip    { margin-left: .35rem; vertical-align: middle; }

/* El centro logístico encabeza su grupo: un poco más de peso y un velo. */
.tabla.inicio tr.cl td        { background: var(--velo); font-weight: 600; }
.tabla.inicio tr.cl td.nombre { font-size: .95rem; }
.tabla.inicio tr.sin-cl td    { font-weight: 500; color: var(--gris-400); }
.tabla.inicio tr.sede td.nombre { padding-left: 1.75rem; }

.tabla.inicio tr.espacio td    { height: .9rem; padding: 0; border-bottom: 0; }
.tabla.inicio tr.espacio:hover { background: transparent; }

@media (max-width: 700px) {
  .tabla.inicio td.nombre .pequeno { display: block; margin-left: 0; }
}

/* --------------------------------------------------------------- chips */
.chip {
  display: inline-block;
  padding: .16rem .55rem;
  border-radius: 999px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}
.chip.gris     { background: var(--carbon-600);            color: var(--gris-300); }
.chip.naranja  { background: var(--naranja-tenue);         color: var(--naranja); }
.chip.ok       { background: rgba(46, 158, 91, .18);       color: var(--ok-texto); }
.chip.alerta   { background: rgba(224, 168, 0, .18);       color: var(--alerta-texto); }
.chip.info     { background: rgba(47, 128, 237, .18);      color: var(--info-texto); }
.chip.morado   { background: rgba(124, 77, 255, .18);      color: var(--morado-texto); }
.chip.peligro  { background: rgba(214, 69, 69, .18);       color: var(--peligro-texto); }

/* --------------------------------------------------------------- historial */
.filtros-historial {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 1rem; margin-bottom: .75rem;
}
.filtros-historial label {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .84rem; color: var(--gris-400); white-space: nowrap;
}
.filtros-historial select,
.filtros-historial input[type=date] { width: auto; padding: .3rem .5rem; font-size: .84rem; }
.filtros-historial .marcar { margin-top: 0; font-size: .84rem; }
.filtros-historial .marcar input { margin-top: 0; }
.filtros-historial .conteo { margin-left: auto; font-family: var(--mono); }

/* La ventana de confirmación del seguimiento: una lista de casillas, todas
   marcadas al abrir; lo que se desmarca queda en rojo suave. */
dialog.modal.recepcion { width: min(760px, calc(100vw - 2rem)); }
.rc-barra { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }

/* Esta ventana es de todo o nada. Cuando de un renglón entró solo una parte hay
   que ir a la página del documento, y desde aquí no había cómo llegar. */
.rc-parcial { margin: 0 0 .6rem; }
.rc-atajos a { color: var(--naranja); }
.rc-lista { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow: auto; border: var(--borde); border-radius: var(--radio-sm); }
.rc-lista li + li { border-top: 1px solid var(--carbon-700); }
.rc-lista label {
  display: grid; grid-template-columns: auto 8rem 1fr auto; gap: .7rem; align-items: center;
  padding: .5rem .7rem; cursor: pointer; font-size: .88rem;
}
.rc-lista label:hover { background: var(--velo); }
.rc-lista input[type=checkbox] { width: 1.05rem; height: 1.05rem; accent-color: var(--ok); margin: 0; }
.rc-lista .rc-sku { font-size: .8rem; color: var(--gris-300); }
.rc-lista .rc-nombre .chip { margin-left: .35rem; vertical-align: middle; }
.rc-lista .rc-cant { white-space: nowrap; color: var(--gris-300); }
.rc-lista .rc-cant small { color: var(--gris-500); }
.rc-lista li.no-llego label { background: rgba(214, 69, 69, .08); }
.rc-lista li.no-llego .rc-nombre { color: var(--peligro-texto); }

/* Cuando algo queda sin marcar, la nota deja de explicar y pasa a advertir:
   dice cuántos son y qué va a pasar con ellos. Se lee ahí mismo, antes de
   confirmar, en vez de en una ventana que haya que aceptar cada vez. */
#rc-nota.alerta { color: var(--alerta-texto); font-weight: 600; }
.modal-pie .rc-conteo { margin-right: auto; font-family: var(--mono); }
@media (max-width: 640px) {
  .rc-lista label { grid-template-columns: auto 1fr auto; }
  .rc-lista .rc-sku { display: none; }
}

/* La barrita de cuánto ha llegado de un documento, en el seguimiento. */
.barra-recepcion { width: 6.5rem; height: 4px; margin-top: .3rem; }
.barra-recepcion > i { background: var(--ok); }

/* Un documento al que algo no le llegó: en rojo, y se queda a la vista. */
.tabla.historial tr.incompleta td { background: rgba(214, 69, 69, .07); }
.tabla.historial tr.incompleta td:first-child { box-shadow: inset 3px 0 0 var(--peligro); }
.tabla.historial tr.incompleta .barra-recepcion > i { background: var(--peligro); }

/* Cada semana encabeza su bloque, como el centro logístico en el inicio. */
.tabla.historial tr.semana td { background: var(--velo); font-weight: 600; padding-top: .55rem; padding-bottom: .55rem; }
.tabla.historial tr.semana .chip { margin-left: .4rem; vertical-align: middle; }
.tabla.historial tr.anulada td { opacity: .5; }

/* --------------------------------------------------------- acceso (login) */
/* Dos paneles, como en YARVIS Taller: a la izquierda el formulario, a la
   derecha la portada con qué hace la plataforma. En pantallas angostas la
   portada pasa debajo. */
.acceso {
  min-height: 100vh;
  display: grid; grid-template-columns: minmax(340px, 34%) 1fr;
  background: var(--carbon-900);
}
.acceso-panel {
  display: grid; place-items: center;
  padding: 2.5rem 1.5rem;
  border-right: var(--borde);
}
.acceso-form { width: 100%; max-width: 400px; }

.acceso .logo { text-align: center; margin-bottom: 2rem; }
.acceso .logo img { width: 210px; max-width: 80%; height: auto; }
.acceso .logo .logo-claro { display: none; }
:root[data-tema="claro"] .acceso .logo .logo-oscuro { display: none; }
:root[data-tema="claro"] .acceso .logo .logo-claro  { display: inline; }
.acceso .logo .modulo {
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gris-500); margin-top: .8rem;
}

.acceso h1 { text-align: center; font-size: 1.45rem; margin-bottom: .25rem; }
.acceso .saludo { text-align: center; color: var(--gris-400); margin-bottom: 1.75rem; }

/* El icono va dentro de la caja, a la izquierda del texto. */
.acceso .con-icono { position: relative; }
.acceso .con-icono svg {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  width: 1rem; height: 1rem; color: var(--gris-500); pointer-events: none;
}
.acceso .con-icono input { padding-left: 2.5rem; }

.acceso .nota-acceso { display: flex; gap: .45rem; align-items: flex-start; margin: -.25rem 0 1.25rem; }
.acceso .nota-acceso svg { flex: 0 0 auto; width: .95rem; height: .95rem; color: var(--naranja); margin-top: .15rem; }

.acceso .btn.grande {
  width: 100%; justify-content: center; gap: .6rem;
  padding: .85rem 1rem; font-size: 1rem; font-weight: 700;
}
.acceso .pie { text-align: center; margin-top: 2.25rem; margin-bottom: 0; }
.acceso .pie strong { color: var(--naranja); }

/* La portada: siempre oscura, con foto si la hay (variable --portada puesta
   desde la plantilla) y si no un fondo con el isotipo apenas visible. El
   texto va en blanco sobre un velo que oscurece hacia abajo. */
.acceso-portada {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 3rem;
  color: #F7F7F7;
  background:
    var(--portada, none) center / cover no-repeat,
    radial-gradient(900px 520px at 78% 18%, rgba(255, 127, 0, .22), transparent 60%),
    linear-gradient(160deg, #272727, #121212);
}
.acceso-portada .velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .74));
}
.acceso-portada .marca-agua {
  position: absolute; right: -6%; top: -6%; width: 60%; max-width: none;
  opacity: .07; pointer-events: none;
}
.acceso-portada .texto { position: relative; max-width: 640px; }
.acceso-portada .raya {
  display: block; width: 56px; height: 4px; border-radius: 2px;
  background: var(--naranja-relleno); margin-bottom: 1.25rem;
}
.acceso-portada h2 {
  font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.15;
  color: #FFFFFF; margin-bottom: .75rem;
}
.acceso-portada p { font-size: 1.05rem; line-height: 1.5; color: rgba(247, 247, 247, .86); max-width: 560px; }
.acceso-portada .rasgos {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem;
}
.acceso-portada .rasgos li {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .95rem; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  font-size: .86rem; font-weight: 600; color: #F7F7F7;
}
.acceso-portada .rasgos svg { width: 1rem; height: 1rem; color: var(--naranja-relleno); }

@media (max-width: 900px) {
  .acceso { grid-template-columns: 1fr; }
  .acceso-panel { border-right: 0; border-bottom: var(--borde); }
  .acceso-portada { padding: 2rem 1.5rem; min-height: 46vh; }
}

/* ------------------------------------------------------------- utilidades */
.oculto { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tenue   { color: var(--gris-500); }
.suave   { color: var(--gris-400); }
.pequeno { font-size: .82rem; }
.derecha { text-align: right; }
.centro  { text-align: center; }
.nowrap  { white-space: nowrap; }
.mt-1 { margin-top: .5rem; }  .mt-2 { margin-top: 1rem; }  .mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; }   .mb-2 { margin-bottom: 1rem; }

.barra-progreso {
  height: 6px; border-radius: 3px; background: var(--carbon-700); overflow: hidden;
}
.barra-progreso > i {
  display: block; height: 100%; background: var(--naranja);
  transition: width .3s ease;
}

/* ------------------------------------------------------------- informes --
   Las gráficas son SVG que escriben las plantillas: sin librerías. Dos series
   —traslado y compra— con dos tonos que se distinguen también en daltonismo
   (validados en los dos temas); los estados de recepción usan los colores de
   estado de siempre, con su texto al lado, nunca el color solo. */
:root {
  --graf-traslado: #8F6BFF;
  --graf-compra:   #CC6600;
  --graf-rejilla:  rgba(255, 255, 255, .08);
}
:root[data-tema="claro"] {
  --graf-traslado: #5B32D6;
  --graf-compra:   #C86A00;
  --graf-rejilla:  rgba(0, 0, 0, .08);
}

.filtros-tablero { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.filtros-tablero select { padding: .35rem .5rem; font-size: .9rem; }

.grafico { display: block; width: 100%; height: auto; font-family: var(--fuente-2); }
.grafico .rejilla-linea { stroke: var(--graf-rejilla); stroke-width: 1; }
.grafico .eje           { stroke: var(--carbon-600);  stroke-width: 1; }
.grafico .rotulo        { fill: var(--gris-500); font-size: 11px; }
.grafico .rotulo.dato   { fill: var(--gris-300); font-size: 10px; font-variant-numeric: tabular-nums; }
.grafico .barra          { opacity: .95; }
.grafico .barra:hover    { opacity: 1; filter: brightness(1.15); }
.grafico .barra.traslado, .relleno.traslado, .muestra.traslado { fill: var(--graf-traslado); background: var(--graf-traslado); }
.grafico .barra.compra,   .relleno.compra,   .muestra.compra   { fill: var(--graf-compra);   background: var(--graf-compra); }
.relleno.ok,      .muestra.ok      { background: var(--ok); }
.relleno.alerta,  .muestra.alerta  { background: var(--alerta); }
.relleno.peligro, .muestra.peligro { background: var(--peligro); }
.relleno.morado,  .muestra.morado  { background: var(--morado); }
.relleno.gris,    .muestra.gris    { background: var(--carbon-500); }

.leyenda { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .5rem; font-size: .82rem; color: var(--gris-400); }
.leyenda span { display: inline-flex; align-items: center; gap: .4rem; }
.leyenda strong { color: var(--claro); font-weight: 600; }
.muestra { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }

.pista { display: flex; height: 10px; border-radius: 5px; background: var(--carbon-700); overflow: hidden; gap: 2px; }
.pista .relleno { display: block; height: 100%; border-radius: 5px; min-width: 2px; }
.apilada + .apilada { margin-top: 1rem; }
.titulo-apilada { font-size: .9rem; font-weight: 600; margin-bottom: .4rem; }
.apilada-pista { height: 14px; border-radius: 7px; }
.apilada-pista .relleno { border-radius: 0; }
.apilada-pista .relleno:first-child { border-radius: 7px 0 0 7px; }
.apilada-pista .relleno:last-child  { border-radius: 0 7px 7px 0; }

.barras { display: flex; flex-direction: column; gap: .45rem; }
.fila-barra {
  display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; align-items: center; gap: .6rem;
  font-size: .85rem;
}
.fila-barra .texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-barra .cifra { font-family: var(--fuente-2); font-variant-numeric: tabular-nums; color: var(--gris-300); min-width: 5.5em; text-align: right; }
.barras.dobles { gap: 1rem; }
.grupo-barras .cabeza { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; font-weight: 600; }
.grupo-barras .fila-barra { grid-template-columns: 110px 1fr auto; }
.grupo-barras .fila-barra .texto { color: var(--gris-400); font-weight: 400; }

.medidor { display: inline-grid; grid-template-columns: 90px auto; align-items: center; gap: .5rem; }
.medidor .cifra { font-family: var(--fuente-2); font-variant-numeric: tabular-nums; }
.tabla-proveedores td { vertical-align: middle; }
.peligro-texto { color: var(--peligro-texto); }
.tabla-desplazable { overflow-x: auto; }
details.tarjeta > summary { cursor: pointer; color: var(--gris-400); }
details.tarjeta > summary:hover { color: var(--naranja); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 720px) {
  .barra { gap: .75rem; padding: 0 .75rem; }
  .barra .usuario strong { display: none; }
  .contenido { padding: 1rem .75rem 2.5rem; }
  .indicador .valor { font-size: 1.4rem; }
}

/* ---------------------------------------------------------------- print */
@media print {
  .barra, .acciones, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .tarjeta { border: 1px solid #ccc; }
}