/* =====================================================================
   Nutrimos y Servimos — Sistema de diseño (tokens + base + componentes)
   Compartido por el portal público y la plataforma privada.
   ===================================================================== */

:root {
  /* Color de marca (manual de imagen corporativa: Pantone 1797 C y 429 C) */
  --rojo: #de1f26;          /* Pantone 1797 C · RGB 222, 31, 38 */
  --rojo-600: #de1f26;      /* el rojo oficial cumple contraste AA sobre blanco (4,85:1) */
  --rojo-700: #b5181e;      /* solo para estados presionados y la trama */
  --rojo-50: #fdf0f0;
  --rojo-100: #fce9e9;      /* tinte 10 % del rojo */
  --rojo-200: #f8d2d4;      /* tinte 20 % */
  --gris-marca: #bcbec0;    /* Pantone 429 C · RGB 188, 190, 192 */
  --gris-logo: #939598;     /* gris de «servimos» en el logosímbolo */

  /* Neutros funcionales derivados del gris 429 C (frío y sin tinte cálido). */
  --grafito: #2e2f31;
  --gris-950: #212224;
  --gris-900: #2e2f31;
  --gris-800: #3d3e40;
  --gris-700: #4e4f52;
  --gris-600: #636467;
  --gris-500: #727477;
  --gris-400: #939598;
  --gris-300: #bcbec0;
  --gris-200: #d9dadc;
  --gris-150: #e6e7e8;
  --gris-100: #f0f1f1;
  --gris-50: #f7f7f8;
  --gris-institucional: #bcbec0;
  --blanco: #ffffff;

  /* Estados */
  --exito: #157a4a;
  --exito-50: #e8f6ef;
  --aviso: #9a5b00;
  --aviso-50: #fff5e0;
  --error: #b42318;
  --error-50: #fef0ee;
  --info: #1f5fa8;
  --info-50: #ebf3fc;

  /* Semánticos */
  --texto: var(--grafito);
  --texto-suave: var(--gris-700);
  --texto-tenue: var(--gris-600);
  --fondo: var(--blanco);
  --fondo-suave: var(--gris-50);
  --borde: var(--gris-200);
  --foco: 0 0 0 3px rgba(222, 31, 38, .28);

  /* Tipografía */
  /* Tipografía del manual: Helvetica Neue (variantes Condensed). No se incluyen archivos de
     fuente (licencia comercial): se usa si el equipo la tiene y, si no, Arial / Arial Narrow,
     la alternativa que el propio manual indica para computadores. */
  --fuente-titulos: "Helvetica Neue Condensed", "HelveticaNeue-CondensedBold", "Helvetica Neue", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, Arial, sans-serif;
  --fuente-acento: var(--fuente-titulos);
  --fuente: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --t-xs: .78rem;
  --t-sm: .875rem;
  --t-base: 1rem;
  --t-md: 1.125rem;
  --t-lg: clamp(1.2rem, 1.1rem + .4vw, 1.35rem);
  --t-xl: clamp(1.4rem, 1.2rem + .9vw, 1.75rem);
  --t-2xl: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
  --t-3xl: clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem);
  --t-4xl: clamp(2.1rem, 1.5rem + 3.8vw, 4.3rem);

  /* Espaciado (base 4 px) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem;
  --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem;
  --s-20: 5rem; --s-24: 6rem;
  --seccion: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);

  /* Forma y profundidad */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-full: 999px;
  --sombra-xs: 0 1px 2px rgba(33, 34, 36, .06);
  --sombra-sm: 0 1px 2px rgba(33, 34, 36, .05), 0 2px 8px rgba(33, 34, 36, .05);
  --sombra: 0 2px 4px rgba(33, 34, 36, .04), 0 10px 28px rgba(33, 34, 36, .08);
  --sombra-lg: 0 6px 12px rgba(33, 34, 36, .05), 0 24px 56px rgba(33, 34, 36, .12);

  --ancho: 1200px;
  --transicion: 180ms cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video, picture { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3, h4, h5 {
  font-family: var(--fuente-titulos);
  font-stretch: condensed;
  line-height: 1.08;
  margin: 0 0 var(--s-3);
  letter-spacing: 0;
  color: var(--grafito);
  font-weight: 700;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); font-weight: 700; }
h4 { font-size: var(--t-md); font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 var(--s-4); }
a { color: var(--rojo-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rojo-700); }
strong { font-weight: 650; }
small { font-size: var(--t-sm); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
/* Énfasis de marca: la palabra destacada va en rojo corporativo, misma familia y peso */
h1 em, h2 em, h3 em, .acento { font-style: normal; font-weight: inherit; }
h1 em, h2 em { color: var(--rojo); }
.indice { font-family: var(--fuente-titulos); font-stretch: condensed; font-weight: 700; letter-spacing: 0; text-transform: none; font-size: 1.15em; }
hr { border: 0; border-top: 1px solid var(--borde); margin: var(--s-8) 0; }
ul, ol { padding-left: 1.2rem; }
::selection { background: var(--rojo-100); color: var(--grafito); }

:focus-visible { outline: 3px solid rgba(222, 31, 38, .55); outline-offset: 2px; border-radius: 4px; }

.icono { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.icono-lg { width: 1.6rem; height: 1.6rem; }
.icono-xl { width: 2rem; height: 2rem; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: var(--s-4); top: -100px; z-index: 1000;
  background: var(--grafito); color: #fff; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
}
.saltar:focus { top: var(--s-4); color: #fff; }
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contenedor { width: min(100% - 2rem, var(--ancho)); margin-inline: auto; }
.contenedor-estrecho { width: min(100% - 2rem, 820px); margin-inline: auto; }

/* ---------- Elementos gráficos del manual ---------- */
/* Trama «mantel»: cuadros sobre rojo, como en las portadas y piezas del manual */
.trama-roja {
  background-color: var(--rojo);
  background-image:
    repeating-linear-gradient(90deg, rgba(110, 6, 12, .13) 0 26px, transparent 26px 52px),
    repeating-linear-gradient(0deg, rgba(110, 6, 12, .13) 0 26px, transparent 26px 52px);
  color: #fff;
}
/* Pestaña de sección: banda roja con texto claro condensado en minúsculas */
.pestana {
  display: inline-block; margin: 0; padding: .32rem 1.05rem .36rem;
  font: 300 1.08rem/1.15 var(--fuente-titulos); font-stretch: condensed;
  letter-spacing: .02em; text-transform: lowercase; color: #fff;
}
.pestana.trama-blanca { background: #fff; color: var(--rojo); font-weight: 400; }

/* ---------- Botones ---------- */
.btn {
  --btn-bg: var(--grafito); --btn-color: #fff; --btn-borde: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 46px; padding: .7rem 1.25rem;
  font: 700 var(--t-sm)/1.2 var(--fuente); letter-spacing: .01em;
  color: var(--btn-color); background: var(--btn-bg);
  border: 1.5px solid var(--btn-borde); border-radius: 8px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.btn:hover { color: var(--btn-color); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: var(--foco); }
.btn[disabled], .btn.is-deshabilitado { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primario { --btn-bg: var(--rojo); --btn-color: #fff; box-shadow: 0 6px 18px rgba(222, 31, 38, .25); }
.btn-primario:hover { --btn-bg: var(--rojo-600); }
.btn-oscuro { --btn-bg: var(--grafito); }
.btn-oscuro:hover { --btn-bg: var(--gris-950); }
.btn-borde { --btn-bg: transparent; --btn-color: var(--grafito); --btn-borde: var(--gris-300); }
.btn-borde:hover { --btn-borde: var(--grafito); --btn-color: var(--grafito); }
.btn-claro { --btn-bg: #fff; --btn-color: var(--grafito); }
.btn-claro:hover { --btn-bg: var(--gris-100); }
.btn-vidrio { --btn-bg: rgba(255, 255, 255, .12); --btn-color: #fff; --btn-borde: rgba(255, 255, 255, .45); backdrop-filter: blur(6px); }
.btn-vidrio:hover { --btn-bg: rgba(255, 255, 255, .22); }
.btn-texto { --btn-bg: transparent; --btn-color: var(--rojo-600); padding-inline: .25rem; min-height: auto; }
.btn-texto:hover { --btn-color: var(--rojo-700); }
.btn-peligro { --btn-bg: var(--error); }
.btn-exito { --btn-bg: var(--exito); }
.btn-sm { min-height: 36px; padding: .45rem .9rem; font-size: var(--t-xs); }
.btn-lg { min-height: 54px; padding: .9rem 1.6rem; font-size: var(--t-base); }
.btn-bloque { width: 100%; }
.btn .icono { width: 1.1em; height: 1.1em; }
.btn.is-cargando { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-cargando::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-color: #fff #fff transparent transparent;
  animation: giro .7s linear infinite;
}
.btn-borde.is-cargando::after, .btn-claro.is-cargando::after { border-color: var(--grafito) var(--grafito) transparent transparent; }
@keyframes giro { to { transform: rotate(360deg); } }

/* ---------- Etiquetas y estados ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .75rem; border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em;
  background: var(--gris-100); color: var(--gris-800);
}
.chip-rojo { background: var(--rojo-50); color: var(--rojo-700); }
.estado { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .65rem; border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 650; white-space: nowrap; }
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.estado-pendiente { background: var(--aviso-50); color: var(--aviso); }
.estado-entregado { background: var(--exito-50); color: var(--exito); }
.estado-cancelado { background: var(--gris-100); color: var(--gris-600); }
.estado-activo { background: var(--exito-50); color: var(--exito); }
.estado-inactivo { background: var(--gris-100); color: var(--gris-600); }

.antetitulo {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 700 var(--t-xs)/1 var(--fuente); letter-spacing: .14em; text-transform: uppercase;
  color: var(--rojo-600); margin-bottom: var(--s-4);
}
.antetitulo::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }

/* ---------- Tarjetas ---------- */
.tarjeta {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--r-lg);
  padding: var(--s-6); box-shadow: var(--sombra-xs);
}
.tarjeta-elevada { border-color: transparent; box-shadow: var(--sombra); }

/* ---------- Formularios ---------- */
.campo { display: grid; gap: .4rem; margin-bottom: var(--s-4); }
.campo > label, .etiqueta { font-size: var(--t-sm); font-weight: 600; color: var(--gris-800); }
.campo .opcional { font-weight: 400; color: var(--texto-tenue); }
.ayuda { font-size: var(--t-xs); color: var(--texto-tenue); margin: 0; }
.control {
  width: 100%; min-height: 46px; padding: .65rem .9rem;
  font: 400 var(--t-base)/1.4 var(--fuente); color: var(--texto);
  background: #fff; border: 1.5px solid var(--gris-200); border-radius: var(--r-sm);
  transition: border-color var(--transicion), box-shadow var(--transicion);
  appearance: none;
}
.control:hover { border-color: var(--gris-300); }
.control:focus { outline: none; border-color: var(--rojo); box-shadow: var(--foco); }
.control::placeholder { color: var(--gris-400); }
textarea.control { min-height: 120px; resize: vertical; }
select.control {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4f55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 18px;
}
.control[aria-invalid="true"], .control.is-invalido { border-color: var(--error); }
.control[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .2); }
.error-campo { font-size: var(--t-xs); color: var(--error); font-weight: 600; }
.casilla { display: flex; gap: .65rem; align-items: flex-start; font-size: var(--t-sm); color: var(--texto-suave); cursor: pointer; }
.casilla input { width: 20px; height: 20px; margin: .1rem 0 0; accent-color: var(--rojo); flex: none; }
.rejilla-form { display: grid; gap: 0 var(--s-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; }

/* ---------- Alertas ---------- */
.alerta {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: var(--s-4) var(--s-5); border-radius: var(--r);
  border: 1px solid transparent; font-size: var(--t-sm); margin-bottom: var(--s-4);
}
.alerta .icono { margin-top: .1rem; }
.alerta p:last-child { margin-bottom: 0; }
.alerta-info { background: var(--info-50); color: #174a83; border-color: #cfe1f5; }
.alerta-exito { background: var(--exito-50); color: #0f5c37; border-color: #c7e9d7; }
.alerta-aviso { background: var(--aviso-50); color: #7a4700; border-color: #f7e0b3; }
.alerta-error { background: var(--error-50); color: #8f1c13; border-color: #f6d2cd; }

/* ---------- Notificaciones flotantes ---------- */
.avisos { position: fixed; z-index: 2000; right: 1rem; bottom: 1rem; display: grid; gap: .6rem; width: min(380px, calc(100% - 2rem)); }
.aviso-flotante {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .9rem 1rem; border-radius: var(--r); background: var(--grafito); color: #fff;
  box-shadow: var(--sombra-lg); font-size: var(--t-sm); animation: entrarAviso .25s ease-out;
}
.aviso-flotante.exito .icono { color: #6fdca5; }
.aviso-flotante.error .icono { color: #ff9b94; }
.aviso-flotante.aviso .icono { color: #ffd27a; }
@keyframes entrarAviso { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Diálogo ---------- */
dialog.dialogo {
  width: min(480px, calc(100% - 2rem)); padding: 0; border: 0; border-radius: var(--r-lg);
  box-shadow: var(--sombra-lg); color: var(--texto);
}
dialog.dialogo::backdrop { background: rgba(33, 34, 36, .55); backdrop-filter: blur(2px); }
.dialogo-cuerpo { padding: var(--s-6); }
.dialogo-pie { display: flex; gap: .6rem; justify-content: flex-end; padding: var(--s-4) var(--s-6); background: var(--gris-50); border-top: 1px solid var(--borde); flex-wrap: wrap; }

/* ---------- Tablas ---------- */
.tabla-envoltura { width: 100%; overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--r); background: #fff; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabla th {
  position: sticky; top: 0; z-index: 1; text-align: left; white-space: nowrap;
  font-size: var(--t-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--texto-tenue); background: var(--gris-50); padding: .8rem 1rem; border-bottom: 1px solid var(--borde);
}
.tabla td { padding: .8rem 1rem; border-bottom: 1px solid var(--gris-150); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: #fcfcfd; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .acciones { text-align: right; white-space: nowrap; }
.tabla-vacia { padding: var(--s-10) var(--s-4); text-align: center; color: var(--texto-tenue); }

@media (max-width: 760px) {
  .tabla-responsiva thead { display: none; }
  .tabla-responsiva, .tabla-responsiva tbody, .tabla-responsiva tr, .tabla-responsiva td { display: block; width: 100%; }
  .tabla-responsiva tr { padding: .75rem 1rem; border-bottom: 1px solid var(--borde); }
  .tabla-responsiva td { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border: 0; text-align: right; }
  .tabla-responsiva td::before { content: attr(data-etiqueta); font-weight: 600; color: var(--texto-tenue); text-align: left; }
  .tabla-responsiva td.acciones { justify-content: flex-end; padding-top: .6rem; }
  .tabla-responsiva td.acciones::before { content: none; }
}

/* ---------- Piezas compartidas (marca, íconos, estados vacíos) ---------- */
.marca-placa {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rojo); border-radius: 12px; padding: 9px 14px;
  box-shadow: 0 6px 16px rgba(222, 31, 38, .22);
}
.marca-placa img { width: 150px; height: auto; }
.acceso-icono { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--rojo-50); color: var(--rojo); }
.velo { position: fixed; inset: 0; background: rgba(33, 34, 36, .45); z-index: 890; opacity: 0; visibility: hidden; transition: opacity .25s; }
.velo.is-visible { opacity: 1; visibility: visible; }
.h3 { font-size: var(--t-lg); }
.estado-vacio { text-align: center; padding: clamp(3rem, 2rem + 4vw, 6rem) 1rem; }
.estado-vacio picture img, .estado-vacio > img { width: 180px; height: auto; margin: 0 auto 1.5rem; }
.estado-vacio h1, .estado-vacio h2 { margin-bottom: .75rem; }
.estado-vacio p { color: var(--texto-suave); max-width: 520px; margin: 0 auto 1.75rem; }
.sin-resultados { padding: 3rem 1rem; text-align: center; color: var(--texto-tenue); border: 1px dashed var(--gris-300); border-radius: var(--r-lg); }
.opcion-tarjeta { position: relative; }
.opcion-tarjeta input { position: absolute; opacity: 0; }
.opcion-tarjeta label { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.1rem; border: 1.5px solid var(--gris-200); border-radius: var(--r); cursor: pointer; font-weight: 600; background: #fff; transition: all var(--transicion); }
.opcion-tarjeta label:hover { border-color: var(--gris-400); }
.opcion-tarjeta input:checked + label { border-color: var(--rojo); background: var(--rojo-50); box-shadow: inset 0 0 0 1px var(--rojo); }
.opcion-tarjeta input:focus-visible + label { box-shadow: var(--foco); }
.opcion-tarjeta .icono { color: var(--rojo); }
.texto-derecha { text-align: right; }

/* ---------- Utilidades ---------- */
.texto-centro { text-align: center; }
.texto-suave { color: var(--texto-suave); }
.texto-tenue { color: var(--texto-tenue); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--s-2); } .mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); }
.fila { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.fila-entre { display: flex; gap: var(--s-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.oculto, [hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}