/* ================================================================================================
   ABASTO SELECTO — CLIENTE V1 · SISTEMA VISUAL
   ================================================================================================

   Este NO es el ERP interno con menos botones. Es otro producto, y tiene su propio lenguaje.

   La sensación premium no viene de decoración: viene de claridad, jerarquía, espacio deliberado,
   alineación y consistencia. Por eso aquí no hay gradientes, ni sombras dramáticas, ni animaciones
   gratuitas. Hay una escala tipográfica, una escala de espaciado, un radio, dos sombras y un color
   por significado.

   El sistema es DELIBERADAMENTE PEQUEÑO: si hace falta un componente nuevo, se añade aquí y se
   reutiliza — Slice 2, 3 y 4 no pueden traer cada uno su propio estilo.
   ================================================================================================ */

.as-portal {
  /* ---- Color. Cada uno significa algo; ninguno decora. ---- */
  --as-tinta:        #0d1117;   /* texto principal */
  --as-tinta-media:  #4a5568;   /* texto secundario */
  /* Metadatos. MEDIDO EN EL NAVEGADOR, no elegido a ojo: el gris anterior (#8a94a6) daba 2.9:1
     sobre blanco y aquí se usa a 13 px — por debajo de los 4.5:1 que hacen legible un texto
     pequeño. Un gris demasiado claro no es sobriedad: es un dato que el cliente no puede leer.
     Este da 4.8:1 y conserva el mismo papel visual: secundario, nunca protagonista. */
  --as-tinta-suave:  #6b7280;   /* metadatos */
  --as-fondo:        #f7f8fa;   /* lienzo */
  --as-superficie:   #ffffff;   /* tarjetas y filas */
  --as-linea:        #e6e9ef;   /* divisores */
  --as-linea-fuerte: #d3d8e2;

  --as-marca:        #1a4d3a;   /* verde Abasto: sobrio, no decorativo */
  --as-marca-clara:  #ecf3ef;
  --as-marca-tinta:  #123528;

  --as-critico:      #b42318;   /* FALTANTE */
  --as-critico-suave:#fef3f2;
  --as-atencion:     #b54708;   /* ATENCIÓN / dato viejo */
  --as-atencion-suave:#fffaeb;
  --as-ok:           #067647;   /* SALUDABLE */
  --as-ok-suave:     #ecfdf3;
  --as-info:         #175cd3;   /* SOBRESTOCK: información, no error */
  --as-info-suave:   #eff8ff;

  /* ---- Espaciado: una sola escala, sin números sueltos. ---- */
  --as-1: 4px;  --as-2: 8px;  --as-3: 12px; --as-4: 16px;
  --as-5: 24px; --as-6: 32px; --as-7: 48px; --as-8: 64px;

  /* ---- Forma: un radio, dos sombras. Más que eso es ruido. ---- */
  --as-radio: 10px;
  --as-radio-sm: 6px;
  --as-sombra: 0 1px 2px rgba(16, 24, 40, .05);
  --as-sombra-flotante: 0 8px 24px -6px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .04);
  --as-anillo: 0 0 0 3px rgba(26, 77, 58, .18);

  /* ---- Tipografía: una escala, sin tamaños improvisados. ---- */
  --as-display: 700 1.75rem/1.2 var(--as-familia);
  --as-titulo:  650 1.25rem/1.3 var(--as-familia);
  --as-sub:     600 1rem/1.4 var(--as-familia);
  --as-cuerpo:  400 .9375rem/1.55 var(--as-familia);
  --as-etiqueta:600 .8125rem/1.4 var(--as-familia);
  --as-meta:    400 .8125rem/1.4 var(--as-familia);
  --as-familia: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --as-transicion: 140ms cubic-bezier(.2, 0, .2, 1);

  font: var(--as-cuerpo);
  color: var(--as-tinta);
  background: var(--as-fondo);
  min-height: 100vh;
  /* Los números se leen en columna: importes, cantidades y folios alineados de verdad. */
  font-variant-numeric: tabular-nums;
}

/* Cuando el portal está activo, el shell interno no existe. No se "oculta": no se monta. */
body.as-portal-activo > .app-shell,
body.as-portal-activo > #appShell,
body.as-portal-activo > #loginScreen { display: none !important; }

/* ================================================================================================
   CABECERA
   ================================================================================================ */

.as-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--as-4);
  padding: var(--as-3) var(--as-5);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--as-linea);
}
.as-marca { display: flex; flex-direction: column; gap: 1px; margin-right: auto; }
.as-marca-nombre {
  font: var(--as-etiqueta); letter-spacing: .14em; text-transform: uppercase;
  color: var(--as-marca); font-weight: 700;
}
/* La promesa aparece UNA vez, en la cabecera. No se repite por toda la aplicación. */
.as-marca-lema { font: var(--as-meta); color: var(--as-tinta-suave); }

.as-header-acciones { display: flex; align-items: center; gap: var(--as-2); }

.as-campana {
  position: relative; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--as-radio-sm);
  border: 1px solid transparent; background: transparent; cursor: pointer;
  color: var(--as-tinta-media); transition: background var(--as-transicion), color var(--as-transicion);
}
.as-campana:hover:not(:disabled) { background: var(--as-fondo); color: var(--as-tinta); }
.as-campana:disabled { cursor: default; opacity: .45; }

.as-perfil {
  display: flex; align-items: center; gap: var(--as-2);
  padding: var(--as-1) var(--as-2) var(--as-1) var(--as-1);
  border: 1px solid var(--as-linea); border-radius: 999px; background: var(--as-superficie);
}
.as-avatar {
  width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center;
  background: var(--as-marca-clara); color: var(--as-marca-tinta);
  font: var(--as-etiqueta); font-weight: 700;
}
.as-perfil-datos { display: none; flex-direction: column; line-height: 1.15; }
.as-perfil-nombre { font: var(--as-etiqueta); color: var(--as-tinta); }
.as-perfil-rol { font: var(--as-meta); color: var(--as-tinta-suave); font-size: .75rem; }

/* ================================================================================================
   NAVEGACIÓN — escritorio arriba, móvil abajo. No es la misma barra comprimida.
   ================================================================================================ */

.as-nav { display: none; gap: var(--as-1); padding: 0 var(--as-5); border-bottom: 1px solid var(--as-linea);
  background: var(--as-superficie); }
.as-nav-item {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: var(--as-3) var(--as-3) calc(var(--as-3) - 2px);
  font: var(--as-etiqueta); color: var(--as-tinta-media);
  border-bottom: 2px solid transparent;
  transition: color var(--as-transicion), border-color var(--as-transicion);
}
.as-nav-item:hover { color: var(--as-tinta); }
.as-nav-item[aria-current="page"] { color: var(--as-marca); border-bottom-color: var(--as-marca); }
.as-nav-item:focus-visible { outline: none; box-shadow: var(--as-anillo); border-radius: var(--as-radio-sm); }

.as-tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  /* Se adapta al NUMERO de destinos en vez de cablear uno. Estuvo fijada a 5 columnas y al
     pasar a 6 destinos el sexto se salia de la barra: un numero magico que hay que acordarse de
     cambiar es un fallo esperando su turno. */
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--as-linea);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.as-tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: var(--as-2) var(--as-1) var(--as-3);
  min-height: 56px;                      /* objetivo táctil cómodo */
  font-size: .6875rem; font-weight: 600; color: var(--as-tinta-suave);
  transition: color var(--as-transicion);
}
.as-tab-icono { font-size: 1.15rem; line-height: 1; }
.as-tab[aria-current="page"] { color: var(--as-marca); }
.as-tab:focus-visible { outline: none; box-shadow: inset var(--as-anillo); }

/* ================================================================================================
   LIENZO
   ================================================================================================ */

.as-main { max-width: 1080px; margin: 0 auto; padding: var(--as-5) var(--as-4) var(--as-8); }
.as-saludo { font: var(--as-display); letter-spacing: -.02em; margin: 0 0 var(--as-1); }
.as-saludo-sub { font: var(--as-cuerpo); color: var(--as-tinta-media); margin: 0 0 var(--as-6); }

.as-seccion { margin-bottom: var(--as-6); }
.as-seccion-titulo {
  font: var(--as-etiqueta); letter-spacing: .08em; text-transform: uppercase;
  color: var(--as-tinta-suave); margin: 0 0 var(--as-3);
}

/* Rejilla preparada para recibir "TU OPERACIÓN HOY" sin rediseñar nada. */
.as-metricas { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--as-3); }
.as-metrica {
  background: var(--as-superficie); border: 1px solid var(--as-linea);
  border-radius: var(--as-radio); padding: var(--as-4); box-shadow: var(--as-sombra);
}
.as-metrica-valor { font: var(--as-titulo); font-size: 1.5rem; letter-spacing: -.02em; }
.as-metrica-etiqueta { font: var(--as-meta); color: var(--as-tinta-suave); margin-top: 2px; }

/* Las tarjetas se usan cuando AGRUPAN contexto, no para todo. */
.as-tarjeta {
  background: var(--as-superficie); border: 1px solid var(--as-linea);
  border-radius: var(--as-radio); box-shadow: var(--as-sombra);
}
.as-tarjeta-cuerpo { padding: var(--as-5); }

/* ================================================================================================
   ESTADOS VACÍOS — "Disponible próximamente" y "Todo al día" son resultados, no huecos.
   ================================================================================================ */

.as-vacio {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--as-2); padding: var(--as-7) var(--as-5);
}
.as-vacio-icono {
  width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center;
  background: var(--as-marca-clara); color: var(--as-marca); font-size: 1.25rem;
  margin-bottom: var(--as-1);
}
.as-vacio-titulo { font: var(--as-sub); margin: 0; }
.as-vacio-texto { font: var(--as-cuerpo); color: var(--as-tinta-media); margin: 0; max-width: 42ch; }

.as-todo-al-dia .as-vacio-icono { background: var(--as-ok-suave); color: var(--as-ok); }

/* ================================================================================================
   ESTADOS SEMÁNTICOS — color + texto + icono. NUNCA solo color.
   ================================================================================================ */

.as-estado {
  display: inline-flex; align-items: center; gap: var(--as-1);
  padding: 2px var(--as-2); border-radius: 999px;
  font: var(--as-meta); font-weight: 600; border: 1px solid transparent;
}
.as-estado::before { font-size: .7em; }
.as-estado--faltante   { background: var(--as-critico-suave); color: var(--as-critico); border-color: #fecdca; }
.as-estado--faltante::before   { content: "●"; }
.as-estado--atencion   { background: var(--as-atencion-suave); color: var(--as-atencion); border-color: #fedf89; }
.as-estado--atencion::before   { content: "▲"; }
.as-estado--saludable  { background: var(--as-ok-suave); color: var(--as-ok); border-color: #abefc6; }
.as-estado--saludable::before  { content: "●"; }
.as-estado--sobrestock { background: var(--as-info-suave); color: var(--as-info); border-color: #b2ddff; }
.as-estado--sobrestock::before { content: "■"; }

/* ================================================================================================
   BOTONES — un clic importante SIEMPRE responde.
   ================================================================================================ */

.as-boton {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--as-2);
  min-height: 40px; padding: 0 var(--as-4);
  border-radius: var(--as-radio-sm); border: 1px solid transparent;
  font: var(--as-etiqueta);
  transition: background var(--as-transicion), border-color var(--as-transicion),
              transform var(--as-transicion), box-shadow var(--as-transicion);
}
.as-boton--primario { background: var(--as-marca); color: #fff; }
.as-boton--primario:hover:not(:disabled) { background: var(--as-marca-tinta); }
.as-boton--secundario { background: var(--as-superficie); color: var(--as-tinta); border-color: var(--as-linea-fuerte); }
.as-boton--secundario:hover:not(:disabled) { background: var(--as-fondo); }
.as-boton:active:not(:disabled) { transform: translateY(1px); }   /* respuesta inmediata al pulsar */
.as-boton:focus-visible { outline: none; box-shadow: var(--as-anillo); }
/* Un botón deshabilitado dice POR QUÉ (title), no se queda mudo. */
.as-boton:disabled { opacity: .5; cursor: not-allowed; }

/* ================================================================================================
   CARGA — esqueleto local, no un velo sobre toda la pantalla.
   ================================================================================================ */

.as-skeleton {
  background: linear-gradient(90deg, var(--as-linea) 25%, #f0f2f6 37%, var(--as-linea) 63%);
  background-size: 400% 100%; border-radius: var(--as-radio-sm);
  animation: as-brillo 1.2s ease-in-out infinite;
}
.as-skeleton--linea { height: 12px; margin-bottom: var(--as-2); }
.as-skeleton--titulo { height: 26px; width: 44%; margin-bottom: var(--as-3); }
@keyframes as-brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* MOVIMIENTO REDUCIDO SIGNIFICA NO MOVERSE, NO MOVERSE MUY DEPRISA.
 *
 * Acortar la duracion a .01ms parece equivalente y NO lo es: una animacion que arranca desplazada
 * -`from { transform: translateY(24px) }`- y no rellena su estado final deja al elemento congelado
 * en el PRIMER fotograma. Medido en el navegador con la preferencia activa: la hoja de detalle se
 * quedaba 24 px por debajo del viewport en movil y sus botones de descarga quedaban CORTADOS. El
 * fallo le tocaba exactamente a quien pide menos movimiento.
 *
 * Se retira la animacion entera. Sin animacion, cada elemento se pinta en su posicion natural.
 * `.as-aviso` se nombra aparte porque vive colgado de <body>, fuera de `.as-portal`. */
@media (prefers-reduced-motion: reduce) {
  .as-portal *, .as-portal *::before, .as-portal *::after, .as-aviso {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/* ================================================================================================
   ACCESO DENEGADO — controlado y sin datos.
   ================================================================================================ */

.as-denegado { display: grid; place-items: center; min-height: 100vh; padding: var(--as-5); background: var(--as-fondo); }
.as-denegado .as-tarjeta { max-width: 460px; width: 100%; }
.as-denegado-titulo { font: var(--as-titulo); margin: 0 0 var(--as-2); }
.as-denegado-texto { font: var(--as-cuerpo); color: var(--as-tinta-media); margin: 0; }

/* ================================================================================================
   RESPONSIVE — 375 es de primera clase; el escritorio respira, no se estira.
   ================================================================================================ */

@media (min-width: 768px) {
  .as-nav { display: flex; }
  .as-tabbar { display: none; }
  .as-perfil-datos { display: flex; }
  .as-main { padding: var(--as-6) var(--as-5) var(--as-8); }
  .as-metricas { grid-template-columns: repeat(4, 1fr); }
  .as-saludo { font-size: 2rem; }
}
@media (max-width: 767px) {
  /* Shorthand a proposito: la regla base tambien usa `padding`, y una sobreescritura por longhand
     dejaba el valor de la base en pie —medido en el navegador: computaba 64px, no 88px—. Una regla
     que parece actuar y no actua es peor que no tenerla. 88px dejan holgura sobre la barra
     inferior (59px) incluso con indicador de inicio. */
  .as-main { padding: var(--as-5) var(--as-4) 88px; }
  .as-header { padding: var(--as-3) var(--as-4); }
}

/* ================================================================================================
   DOCUMENTOS (Slice 2)
   ================================================================================================

   El objetivo de esta pantalla es medible: encontrar un documento en menos de 5 segundos. Todo lo
   que sigue existe para eso, y nada más.

     - CADA FILA SE LEE EN UN BARRIDO. Tipo e icono a la izquierda, folio grande, fecha y pedido
       debajo, importe alineado a la derecha con cifras tabulares, estado y acciones al final. Es
       una rejilla, no una tabla: las tablas obligan a que todo tenga la misma altura y en móvil
       colapsan mal.
     - LAS ACCIONES SE VEN. Nada de un menú que esconda PDF y XML tras un clic extra: con tres
       acciones como mucho, enseñarlas cuesta menos que explicarlas.
     - EL COLOR NUNCA VA SOLO. Cada estado lleva color, texto e icono.
   ================================================================================================ */

/* ---- Franja de resumen: cuenta lo que hay. No es un tablero ni inventa indicadores. ---- */
.as-resumen {
  display: flex; gap: var(--as-5); align-items: baseline;
  padding: 0 0 var(--as-4); margin: 0 0 var(--as-4);
  border-bottom: 1px solid var(--as-linea);
}
.as-resumen-dato { display: flex; align-items: baseline; gap: var(--as-2); }
.as-resumen-num { font: var(--as-titulo); color: var(--as-tinta); }
.as-resumen-etiqueta { font: var(--as-meta); color: var(--as-tinta-suave); }

/* ---- Barra de búsqueda y filtros ---- */
.as-barra {
  display: flex; flex-wrap: wrap; gap: var(--as-3);
  align-items: center; margin-bottom: var(--as-4);
}
.as-buscador {
  flex: 1 1 260px; min-width: 0; min-height: 44px;
  padding: 0 var(--as-4);
  font: var(--as-cuerpo); color: var(--as-tinta);
  background: var(--as-superficie);
  border: 1px solid var(--as-linea-fuerte); border-radius: var(--as-radio-sm);
  transition: border-color var(--as-transicion), box-shadow var(--as-transicion);
}
.as-buscador::placeholder { color: var(--as-tinta-suave); }
.as-buscador:focus { outline: none; border-color: var(--as-marca); box-shadow: var(--as-anillo); }

.as-chips { display: flex; gap: var(--as-1); flex-shrink: 0; }
.as-chip {
  appearance: none; cursor: pointer;
  min-height: 44px; padding: 0 var(--as-4);
  font: var(--as-etiqueta); color: var(--as-tinta-media);
  background: transparent; border: 1px solid transparent; border-radius: var(--as-radio-sm);
  transition: background var(--as-transicion), color var(--as-transicion);
}
.as-chip:hover { background: var(--as-superficie); color: var(--as-tinta); }
.as-chip:focus-visible { outline: none; box-shadow: var(--as-anillo); }
.as-chip[aria-pressed="true"] {
  background: var(--as-marca-clara); color: var(--as-marca-tinta);
  border-color: #cfe3d8; font-weight: 650;
}

/* ---- La lista ---- */
.as-lista {
  background: var(--as-superficie);
  border: 1px solid var(--as-linea); border-radius: var(--as-radio);
  box-shadow: var(--as-sombra); overflow: hidden;
}
.as-doc + .as-doc { border-top: 1px solid var(--as-linea); }
.as-doc {
  display: grid; align-items: center; gap: var(--as-2) var(--as-4);
  grid-template-columns: auto minmax(140px, 1fr) minmax(160px, 1.2fr) auto auto auto;
  padding: var(--as-4) var(--as-5);
  cursor: pointer;
  transition: background var(--as-transicion);
}
.as-doc:hover { background: var(--as-fondo); }
.as-doc:focus-visible { outline: none; box-shadow: inset var(--as-anillo); }
.as-doc.es-no-entregable { background: #fcfcfd; }

.as-doc-icono {
  width: 36px; height: 36px; border-radius: var(--as-radio-sm);
  display: grid; place-items: center;
  background: var(--as-marca-clara); color: var(--as-marca); font-size: 1rem;
}
.as-doc.es-no-entregable .as-doc-icono { background: var(--as-linea); color: var(--as-tinta-suave); }

.as-doc-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.as-doc-tipo { font: var(--as-meta); color: var(--as-tinta-suave); text-transform: uppercase; letter-spacing: .04em; }
.as-doc-folio { font: var(--as-sub); color: var(--as-tinta); overflow-wrap: anywhere; }

.as-doc-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.as-doc-fecha { font: var(--as-cuerpo); color: var(--as-tinta); }
.as-doc-pedido { font: var(--as-meta); color: var(--as-tinta-suave); }

.as-doc-total { font: var(--as-sub); color: var(--as-tinta); text-align: right; white-space: nowrap; }
.as-doc-estado { display: flex; justify-content: flex-end; }

.as-doc-acciones { display: flex; gap: var(--as-2); align-items: center; justify-content: flex-end; }
.as-doc-nota { font: var(--as-meta); color: var(--as-tinta-media); margin: 0; max-width: 32ch; text-align: right; }

.as-boton--sm { min-height: 36px; padding: 0 var(--as-3); }

.as-sin-resultados { font: var(--as-cuerpo); color: var(--as-tinta-media); margin: 0; padding: var(--as-7) var(--as-5); text-align: center; }
.as-pie-lista { font: var(--as-meta); color: var(--as-tinta-suave); margin: var(--as-3) 0 0; }
.as-skeleton--fila { height: 44px; margin: var(--as-3) var(--as-5); }

/* ---- Estados del documento. Mismo componente .as-estado; el icono lo pone el JS. ---- */
.as-estado--timbrada,
.as-estado--emitida    { background: var(--as-ok-suave); color: var(--as-ok); border-color: #abefc6; }
.as-estado--en_proceso { background: var(--as-info-suave); color: var(--as-info); border-color: #b2ddff; }
.as-estado--en_revision{ background: var(--as-atencion-suave); color: var(--as-atencion); border-color: #fedf89; }
.as-estado--cancelada,
.as-estado--anulada    { background: var(--as-critico-suave); color: var(--as-critico); border-color: #fecdca; }
.as-estado-icono { font-size: .75em; }

/* ================================================================================================
   HOJA DE DETALLE — abre sobre el contexto, no lo abandona.
   ================================================================================================ */

.as-velo {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(16, 24, 40, .32);
  display: flex; justify-content: flex-end;
  animation: as-aparece 140ms ease-out;
}
@keyframes as-aparece { from { opacity: 0; } to { opacity: 1; } }

.as-hoja {
  background: var(--as-superficie);
  width: min(440px, 100%); height: 100%;
  display: flex; flex-direction: column;
  box-shadow: var(--as-sombra-flotante);
  animation: as-entra 180ms cubic-bezier(.2, 0, .2, 1);
}
@keyframes as-entra { from { transform: translateX(24px); } to { transform: none; } }

.as-hoja-cab {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--as-4);
  padding: var(--as-5); border-bottom: 1px solid var(--as-linea);
}
.as-hoja-titulo { font: var(--as-titulo); margin: 2px 0 0; overflow-wrap: anywhere; }
.as-hoja-cerrar {
  appearance: none; cursor: pointer; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: var(--as-radio-sm);
  background: transparent; border: 1px solid transparent; color: var(--as-tinta-media);
  font-size: 1rem; transition: background var(--as-transicion);
}
.as-hoja-cerrar:hover { background: var(--as-fondo); color: var(--as-tinta); }
.as-hoja-cerrar:focus-visible { outline: none; box-shadow: var(--as-anillo); }

.as-hoja-cuerpo { flex: 1; overflow-y: auto; padding: var(--as-5); }
.as-hoja-error { font: var(--as-cuerpo); color: var(--as-critico); margin: 0; }
.as-hoja-sub { font: var(--as-etiqueta); color: var(--as-tinta-suave); text-transform: uppercase;
  letter-spacing: .04em; margin: var(--as-5) 0 var(--as-3); }

.as-datos { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--as-2) var(--as-4); margin: var(--as-4) 0 0; }
.as-datos dt { font: var(--as-meta); color: var(--as-tinta-suave); }
.as-datos dd { font: var(--as-cuerpo); color: var(--as-tinta); margin: 0; text-align: right; overflow-wrap: anywhere; }

.as-partidas { list-style: none; margin: 0; padding: 0; }
.as-partida {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--as-3);
  align-items: baseline; padding: var(--as-3) 0; border-bottom: 1px solid var(--as-linea);
}
.as-partida-nombre { font: var(--as-cuerpo); overflow-wrap: anywhere; }
.as-partida-cant { font: var(--as-meta); color: var(--as-tinta-suave); white-space: nowrap; }
.as-partida-importe { font: var(--as-etiqueta); white-space: nowrap; }

.as-hoja-pie {
  display: flex; gap: var(--as-3); padding: var(--as-4) var(--as-5);
  border-top: 1px solid var(--as-linea); background: var(--as-fondo);
}
.as-hoja-pie .as-boton { flex: 1; }

/* ================================================================================================
   AVISO — confirmación discreta. Una descarga que funcionó no merece un cartel.
   ================================================================================================ */

.as-aviso {
  position: fixed; z-index: 60; left: 50%; bottom: var(--as-5);
  transform: translate(-50%, 12px);
  max-width: min(90vw, 420px);
  padding: var(--as-3) var(--as-4);
  background: var(--as-tinta); color: #fff;
  font: var(--as-etiqueta); border-radius: var(--as-radio-sm);
  box-shadow: var(--as-sombra-flotante);
  opacity: 0; pointer-events: none;
  transition: opacity var(--as-transicion), transform var(--as-transicion);
}
.as-aviso.es-visible { opacity: 1; transform: translate(-50%, 0); }

/* ================================================================================================
   DOCUMENTOS EN MÓVIL — bloque compacto, NO una tabla estrujada.
   ================================================================================================ */

@media (max-width: 767px) {
  .as-doc {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "icono id     estado"
      "icono meta   total"
      "acciones acciones acciones";
    padding: var(--as-4);
    row-gap: var(--as-2);
  }
  .as-doc-icono   { grid-area: icono; align-self: start; }
  .as-doc-id      { grid-area: id; }
  .as-doc-meta    { grid-area: meta; }
  .as-doc-estado  { grid-area: estado; align-self: start; }
  .as-doc-total   { grid-area: total; }
  .as-doc-acciones{ grid-area: acciones; justify-content: stretch; margin-top: var(--as-1); }
  /* Objetivo táctil cómodo y descargable con una mano: los botones ocupan el ancho, no son migas. */
  .as-doc-acciones .as-boton { flex: 1; min-height: 44px; }
  /* La accion principal de la hoja tambien: era de 36 px y es el boton que el cliente vino a
     pulsar. Medido en el navegador, no supuesto. */
  .as-hoja-pie .as-boton { min-height: 44px; }
  .as-doc-nota { max-width: none; text-align: left; }

  /* La hoja entra desde abajo, que es de donde el pulgar la espera. */
  .as-velo { align-items: flex-end; }
  .as-hoja {
    width: 100%; height: auto; max-height: 88vh;
    border-radius: var(--as-radio) var(--as-radio) 0 0;
    animation: as-sube 200ms cubic-bezier(.2, 0, .2, 1);
  }
  .as-hoja-pie { padding-bottom: calc(var(--as-4) + env(safe-area-inset-bottom, 0px)); }
  /* Por encima de la barra inferior (59px), no debajo de ella. */
  .as-aviso { bottom: 96px; }
  .as-resumen { gap: var(--as-4); }
}
@keyframes as-sube { from { transform: translateY(24px); } to { transform: none; } }

/* ================================================================================================
   HACER PEDIDO (Slice 3)
   ================================================================================================

   El objetivo es medible: hacer un pedido completo tiene que ser más fácil que mandar una lista por
   WhatsApp. Todo lo que sigue existe para eso.

     - LA BÚSQUEDA MANDA. Es el elemento dominante y lo primero que se ve. No hay catálogo paginado
       ni árbol de categorías: se escribe y aparece.
     - EL CARRITO ESTÁ SIEMPRE A LA VISTA. En escritorio va pegado al lado; en móvil se convierte en
       una barra inferior que dice qué llevas y cuánto, sin tapar la búsqueda.
     - "POR CONFIRMAR" NO ES UN ERROR. Es un estado legítimo y se pinta con el mismo cuidado que un
       precio: en tono secundario, nunca en rojo, nunca como $0.
   ================================================================================================ */

.as-pedido {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--as-5);
  align-items: start;
}

.as-buscador--grande {
  width: 100%;
  min-height: 56px;
  font-size: 1.0625rem;
  margin-bottom: var(--as-4);
}

/* ---- Resultados ---- */
.as-resultados {
  background: var(--as-superficie);
  border: 1px solid var(--as-linea); border-radius: var(--as-radio);
  box-shadow: var(--as-sombra); overflow: hidden;
}
.as-opcion + .as-opcion { border-top: 1px solid var(--as-linea); }
.as-opcion {
  display: grid; align-items: center; gap: var(--as-2) var(--as-4);
  grid-template-columns: auto minmax(140px, 1fr) auto auto;
  padding: var(--as-4) var(--as-5);
}
.as-opcion-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.as-opcion-nombre { font: var(--as-sub); color: var(--as-tinta); overflow-wrap: anywhere; }
.as-opcion-sub { display: flex; gap: var(--as-2); align-items: center; flex-wrap: wrap;
  font: var(--as-meta); color: var(--as-tinta-suave); }
.as-opcion-categoria {
  padding: 1px var(--as-2); border-radius: 999px;
  background: var(--as-fondo); border: 1px solid var(--as-linea);
}

.as-opcion-precio { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
.as-precio { font: var(--as-sub); color: var(--as-tinta); white-space: nowrap; }
/* Sin precio NO es un error: es información. Tono secundario, jamás rojo y jamás $0. */
.as-precio--pendiente { font: var(--as-etiqueta); color: var(--as-tinta-media); font-style: italic; }
.as-precio-unidad { font: var(--as-meta); color: var(--as-tinta-suave); white-space: nowrap; }

.as-opcion-acciones { display: flex; gap: var(--as-2); align-items: center; }
.as-cantidad {
  width: 72px; min-height: 40px; padding: 0 var(--as-2); text-align: center;
  font: var(--as-cuerpo); color: var(--as-tinta); font-variant-numeric: tabular-nums;
  background: var(--as-superficie);
  border: 1px solid var(--as-linea-fuerte); border-radius: var(--as-radio-sm);
}
.as-cantidad:focus { outline: none; border-color: var(--as-marca); box-shadow: var(--as-anillo); }
.as-cantidad--sm { width: 64px; min-height: 36px; }

/* ---- Carrito ---- */
.as-carrito {
  background: var(--as-superficie);
  border: 1px solid var(--as-linea); border-radius: var(--as-radio);
  box-shadow: var(--as-sombra);
  padding: var(--as-5);
}
.as-carrito-titulo { font: var(--as-sub); margin: 0 0 var(--as-4); }
.as-carrito-vacio { font: var(--as-cuerpo); color: var(--as-tinta-media); margin: 0; }
.as-carrito-lineas { display: flex; flex-direction: column; }

.as-linea {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: var(--as-3); align-items: center;
  padding: var(--as-3) 0; border-bottom: 1px solid var(--as-linea);
}
.as-linea-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.as-linea-nombre { font: var(--as-cuerpo); color: var(--as-tinta); overflow-wrap: anywhere; }
.as-linea-sub { font: var(--as-meta); color: var(--as-tinta-suave); }
.as-linea-cant { font: var(--as-meta); color: var(--as-tinta-suave); white-space: nowrap; }
.as-linea-importe { font: var(--as-etiqueta); white-space: nowrap; text-align: right; }
.as-linea-quitar {
  appearance: none; cursor: pointer; width: 32px; height: 32px; border-radius: var(--as-radio-sm);
  background: transparent; border: 1px solid transparent; color: var(--as-tinta-suave);
  transition: background var(--as-transicion), color var(--as-transicion);
}
.as-linea-quitar:hover { background: var(--as-critico-suave); color: var(--as-critico); }
.as-linea-quitar:focus-visible { outline: none; box-shadow: var(--as-anillo); }

.as-carrito-pie { margin-top: var(--as-4); display: flex; flex-direction: column; gap: var(--as-3); }
.as-carrito-total {
  display: flex; justify-content: space-between; align-items: baseline;
  font: var(--as-etiqueta); color: var(--as-tinta-media);
}
.as-carrito-cifra { font: var(--as-titulo); color: var(--as-tinta); }
.as-carrito-nota { font: var(--as-meta); color: var(--as-tinta-media); margin: 0; }
.as-carrito-pie .as-boton { width: 100%; }

/* ---- Revisar ---- */
.as-revision { padding: var(--as-5); }
.as-revision-lineas { display: flex; flex-direction: column; }
.as-revision-pie { margin-top: var(--as-4); display: flex; flex-direction: column; gap: var(--as-2); }
.as-notas {
  width: 100%; margin-top: var(--as-5); min-height: 84px; resize: vertical;
  padding: var(--as-3) var(--as-4);
  font: var(--as-cuerpo); color: var(--as-tinta);
  background: var(--as-superficie);
  border: 1px solid var(--as-linea-fuerte); border-radius: var(--as-radio-sm);
}
.as-notas::placeholder { color: var(--as-tinta-suave); }
.as-notas:focus { outline: none; border-color: var(--as-marca); box-shadow: var(--as-anillo); }

.as-acciones-finales { display: flex; gap: var(--as-3); margin-top: var(--as-5); }
.as-acciones-finales .as-boton { flex: 1; min-height: 52px; }
.as-boton--enviar { font-size: 1rem; }

.as-alerta {
  display: flex; gap: var(--as-3); align-items: flex-start;
  padding: var(--as-3) var(--as-4); margin: 0 0 var(--as-4);
  background: var(--as-atencion-suave); border: 1px solid #fedf89; border-radius: var(--as-radio-sm);
  color: var(--as-atencion); font: var(--as-cuerpo);
}
.as-alerta p { margin: 0; }
.as-alerta-icono { font-size: .8em; line-height: 1.6; }
.as-alerta--error { background: var(--as-critico-suave); border-color: #fecdca; color: var(--as-critico); }

/* ---- Pedido recibido ---- */
.as-exito {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--as-3); padding: var(--as-8) var(--as-5);
  max-width: 520px; margin: var(--as-6) auto 0;
}
.as-exito-marca {
  width: 56px; height: 56px; border-radius: 999px; display: grid; place-items: center;
  background: var(--as-ok-suave); color: var(--as-ok); font-size: 1.5rem;
}
.as-exito-titulo { font: var(--as-display); font-size: 1.5rem; margin: 0; }
.as-exito-referencia {
  display: flex; flex-direction: column; gap: 2px; margin: var(--as-2) 0 0;
  padding: var(--as-3) var(--as-5);
  background: var(--as-fondo); border: 1px solid var(--as-linea); border-radius: var(--as-radio-sm);
}
.as-exito-referencia-etiqueta {
  font: var(--as-meta); color: var(--as-tinta-suave);
  text-transform: uppercase; letter-spacing: .08em;
}
.as-exito-referencia-valor {
  font: var(--as-titulo); letter-spacing: .1em; color: var(--as-tinta);
}
.as-exito-texto { font: var(--as-cuerpo); color: var(--as-tinta-media); margin: 0; }
.as-exito-acciones { display: flex; gap: var(--as-3); margin-top: var(--as-3); flex-wrap: wrap; justify-content: center; }
.as-exito-acciones .as-boton { min-height: 44px; text-decoration: none; }
.as-enlace {
  appearance: none; background: none; border: 0; cursor: pointer;
  font: var(--as-etiqueta); color: var(--as-marca); text-decoration: underline;
  padding: var(--as-2); border-radius: var(--as-radio-sm);
}
.as-enlace:focus-visible { outline: none; box-shadow: var(--as-anillo); }

.as-hoja-nota { font: var(--as-cuerpo); color: var(--as-tinta-media); margin: var(--as-3) 0 0; }
.as-hoja-texto { font: var(--as-cuerpo); color: var(--as-tinta); margin: 0; overflow-wrap: anywhere; }

/* ---- Estados del pedido. Mismo componente .as-estado; el icono lo pone el JS. ---- */
.as-estado--recibido   { background: var(--as-info-suave); color: var(--as-info); border-color: #b2ddff; }
.as-estado--confirmado { background: var(--as-ok-suave); color: var(--as-ok); border-color: #abefc6; }
.as-estado--facturado  { background: var(--as-marca-clara); color: var(--as-marca-tinta); border-color: #cfe3d8; }
.as-estado--desconocido{ background: var(--as-atencion-suave); color: var(--as-atencion); border-color: #fedf89; }

/* ================================================================================================
   ESCRITORIO — el carrito acompaña, no interrumpe.
   ================================================================================================ */
@media (min-width: 900px) {
  .as-pedido { grid-template-columns: minmax(0, 1fr) 340px; }
  .as-carrito { position: sticky; top: calc(var(--as-8) + var(--as-3)); }
}

/* ================================================================================================
   MÓVIL — el carrito es una barra inferior, no una columna estrujada.
   ================================================================================================ */
@media (max-width: 899px) {
  .as-carrito {
    position: sticky; bottom: 0; z-index: 25;
    margin: var(--as-4) calc(var(--as-4) * -1) 0;
    border-radius: var(--as-radio) var(--as-radio) 0 0;
    border-bottom: 0;
    box-shadow: var(--as-sombra-flotante);
    padding-bottom: calc(var(--as-4) + env(safe-area-inset-bottom, 0px));
  }
  /* Con el carrito pegado abajo, la barra de secciones estorbaría: el carrito la sustituye
     mientras se arma el pedido. */
  .as-carrito-lineas { max-height: 34vh; overflow-y: auto; }
}
@media (max-width: 767px) {
  .as-opcion {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "icono id"
      "icono precio"
      "acciones acciones";
    row-gap: var(--as-2);
    padding: var(--as-4);
  }
  .as-opcion > .as-doc-icono { grid-area: icono; align-self: start; }
  .as-opcion-id       { grid-area: id; }
  .as-opcion-precio   { grid-area: precio; align-items: flex-start; text-align: left; }
  .as-opcion-acciones { grid-area: acciones; }
  .as-opcion-acciones .as-boton { flex: 1; min-height: 44px; }
  .as-cantidad { min-height: 44px; width: 84px; }
  /* La accion principal del carrito y el boton de quitar tambien. Medido en el navegador: se
     quedaban en 40 y 32 px — y el de quitar BORRA una linea, asi que un roce accidental cuesta. */
  .as-carrito-pie .as-boton { min-height: 44px; }
  .as-linea-quitar { width: 44px; height: 44px; }
  /* column, no column-reverse: invertir hacia que el orden VISUAL y el de teclado se
     contradijeran — quien ve la pantalla leia "Enviar" primero y quien navega con teclado lo
     encontraba el ultimo. Con el orden natural, la accion principal queda ademas abajo, que es
     donde llega el pulgar. */
  .as-acciones-finales { flex-direction: column; }
  .as-acciones-finales .as-boton { width: 100%; }
  .as-exito { padding: var(--as-7) var(--as-4); margin-top: var(--as-3); }
  .as-exito-acciones { flex-direction: column; width: 100%; }
  .as-exito-acciones .as-boton { width: 100%; }
}

/* ================================================================================================
   MI INVENTARIO (Slice 4) — existencias registradas por el cliente. Mobile-first: la fila es una
   tarjeta apilada en movil y una rejilla en escritorio. El estado se lee por icono + texto, no
   solo por color.
   ================================================================================================ */
.as-inv {
  background: var(--as-blanco, #fff);
  border: 1px solid var(--as-borde, #e4e7ec);
  border-radius: var(--as-radio, 12px);
  padding: var(--as-4, 16px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--as-3, 12px);
}
.as-inv.es-bajo { border-left: 4px solid var(--as-atencion, #b54708); }
.as-inv-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.as-inv-nombre { font-weight: 600; overflow-wrap: anywhere; }
.as-inv-sub { color: var(--as-tinta-suave, #667085); font-size: 0.82rem; }
.as-inv-etiqueta {
  display: block; color: var(--as-tinta-suave, #667085); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px;
}
.as-inv-valor { font-weight: 600; }
.as-inv-unidad { color: var(--as-tinta-suave, #667085); font-size: 0.82rem; margin-left: 6px; }
.as-inv-existencia, .as-inv-nivel { min-width: 0; }
.as-inv-nivel { display: block; }
.as-inv-nivel .as-inv-cantidad { margin-right: 6px; }
.as-inv-stepper { display: inline-flex; align-items: stretch; gap: 0; }
.as-inv-paso {
  min-width: 44px; min-height: 44px;
  border: 1px solid var(--as-borde, #e4e7ec); background: var(--as-fondo, #f8fafb);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.as-inv-paso:first-child { border-radius: 10px 0 0 10px; }
.as-inv-stepper .as-inv-paso:last-of-type { border-radius: 0 10px 10px 0; }
.as-inv-cantidad {
  width: 84px; min-height: 44px; text-align: center;
  border: 1px solid var(--as-borde, #e4e7ec); border-left: 0; border-right: 0;
}
.as-inv-guardar { margin-left: 8px; min-height: 44px; }
.as-inv-editar-nivel { margin-left: 8px; }
.as-inv-estadocaja { align-self: start; }
.as-inv-estado--bajo_nivel { background: var(--as-atencion-suave, #fef0c7); color: var(--as-atencion, #b54708); border-color: #fedf89; }
.as-inv-estado--bien { background: var(--as-ok-suave, #d1fadf); color: var(--as-ok, #027a48); border-color: #abefc6; }
.as-inv-estado--sin_conteo { background: var(--as-fondo, #f2f4f7); color: var(--as-tinta-suave, #667085); }
.as-inv-estado--sin_nivel { background: var(--as-fondo, #f2f4f7); color: var(--as-tinta-suave, #667085); }
.as-inv-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.as-inv-acciones .as-boton { min-height: 44px; }
.as-inv-retirar {
  min-width: 44px; min-height: 44px; border: 1px solid var(--as-borde, #e4e7ec);
  border-radius: 10px; background: transparent; color: var(--as-tinta-suave, #667085);
  cursor: pointer;
}
.as-inv-retirar.es-confirmando { color: #b42318; border-color: #fda29b; font-size: 0.82rem; padding: 0 10px; }
.as-inv-agregar-cab { display: flex; justify-content: space-between; align-items: center; }
.as-inv-agregar .as-buscador { width: 100%; margin: var(--as-3, 12px) 0; }
.as-inv-ya { color: var(--as-tinta-suave, #667085); font-size: 0.82rem; }

/* Señal de faltantes en Inicio: solo aparece con faltantes reales. */
.as-senal { display: flex; align-items: center; gap: var(--as-3, 12px); flex-wrap: wrap; }
.as-senal-icono {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--as-atencion-suave, #fef0c7); color: var(--as-atencion, #b54708);
}
.as-senal-texto { flex: 1 1 200px; min-width: 0; }
.as-senal-titulo { margin: 0; font-weight: 600; }
.as-senal-sub { margin: 2px 0 0; color: var(--as-tinta-suave, #667085); font-size: 0.85rem; }

@media (min-width: 768px) {
  .as-inv {
    grid-template-columns: minmax(180px, 1.4fr) auto auto auto minmax(0, 1fr);
    align-items: center;
  }
  .as-inv-acciones { justify-content: flex-end; }
}
/* El atributo hidden pierde contra cualquier display explicito del boton: se reafirma. El
   "Guardar" del conteo solo aparece cuando el valor difiere del guardado. */
.as-inv-guardar[hidden] { display: none; }

/* ================================================================================================
   SLICE 5 — COTIZACIONES, MI EMPRESA Y LAS SENALES DEL INICIO
   ================================================================================================

   MOVIL PRIMERO, y no de boquilla: las tres senales del Inicio son UNA COLUMNA hasta 768 px. En un
   telefono de 390 px, tres tarjetas en fila serian tres columnas de 110 px, que es donde el titulo
   de una cotizacion se parte en cinco lineas. A partir de tablet se reparten en rejilla.
   ================================================================================================ */

.as-rejilla-senales { display: grid; gap: var(--as-4, 16px); grid-template-columns: 1fr; }

.as-senal-tarjeta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--as-2, 8px); }
.as-senal-tarjeta .as-vacio-icono { margin: 0; }
/* El tono NO es lo unico que distingue una senal: el titulo ya dice que pasa. El color acompana. */
.as-senal-tarjeta.es-atencion { border-left: 3px solid var(--as-atencion, #b54708); }
.as-senal-tarjeta.es-activa   { border-left: 3px solid var(--as-info, #175cd3); }

/* La accion del Inicio y la de Pedidos ocupan el ancho completo en telefono: es el objetivo tactil
   mas grande posible, y en un movil se pulsa con el pulgar. */
.as-acciones-inicio { display: flex; gap: var(--as-3, 12px); margin: var(--as-5, 20px) 0; }
.as-acciones-inicio .as-boton { flex: 1 1 auto; justify-content: center; }

/* ---- Estados de una cotizacion. Mismo componente .as-estado que el resto del portal. ---- */
.as-estado--vigente    { background: var(--as-ok-suave); color: var(--as-ok); border-color: #abefc6; }
.as-estado--aceptada   { background: var(--as-ok-suave); color: var(--as-ok); border-color: #abefc6; }
.as-estado--convertida { background: var(--as-info-suave); color: var(--as-info); border-color: #b2ddff; }
.as-estado--enviada    { background: var(--as-info-suave); color: var(--as-info); border-color: #b2ddff; }
.as-estado--vencida    { background: var(--as-atencion-suave); color: var(--as-atencion); border-color: #fedf89; }

/* ---- Hoja de detalle: notas y textos largos ---- */
.as-hoja-nota  { margin: var(--as-3, 12px) 0 0; color: var(--as-tinta-media, #475467); font-size: 0.9rem; }
.as-hoja-texto { margin: 0 0 var(--as-4, 16px); color: var(--as-tinta-media, #475467); }

/* El nombre de un producto puede tener 130 caracteres. Se envuelve, y su presentacion baja debajo
   en vez de empujar la fila a lo ancho: el scroll horizontal en un telefono es el fallo. */
.as-partida-nombre { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.as-partida-nombre > span { overflow-wrap: anywhere; }
.as-partida-presentacion { color: var(--as-tinta-suave, #667085); font-size: 0.8rem; }

@media (min-width: 768px) {
  .as-rejilla-senales { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .as-acciones-inicio { justify-content: flex-start; }
  .as-acciones-inicio .as-boton { flex: 0 0 auto; }
}

/* Con seis destinos, la etiqueta mas larga ("Cotizaciones") tiene que caber en 1/6 de un telefono
   de 390 px. Se baja el cuerpo de letra en lugar de recortar la palabra con puntos suspensivos:
   "Cotizacio…" no es mas legible que once puntos mas pequenos, y ademas miente sobre el destino.
   El objetivo tactil NO se toca: sigue en 56 px de alto. */
@media (max-width: 430px) {
  .as-tab { font-size: .625rem; padding-left: 2px; padding-right: 2px; }
}

/* Cerrar sesión. En teléfono no cabe junto al nombre, así que el nombre se oculta y queda el botón:
   entre saber cómo te llamas -que ya lo sabes- y poder salir, sale ganando poder salir. */
.as-salir {
  appearance: none; cursor: pointer; flex: 0 0 auto;
  min-height: 44px; padding: 0 var(--as-4, 16px);
  border: 1px solid var(--as-linea); border-radius: var(--as-radio-2, 10px);
  background: transparent; color: var(--as-tinta-media);
  font: var(--as-boton); font-weight: 600;
}
.as-salir:hover  { background: var(--as-lienzo-2, #f9fafb); color: var(--as-tinta); }
.as-salir:disabled { opacity: .6; cursor: default; }
.as-salir:focus-visible { outline: none; box-shadow: var(--as-anillo); }
.as-velo--salida {
  display: flex; align-items: center; justify-content: center;
  background: var(--as-lienzo, #fff); color: var(--as-tinta);
}

/* DOCUMENTOS — una puerta, dos categorías. Conmutador interno (no son destinos globales). */
.as-doc-conmutador { display: flex; gap: 8px; margin: 4px 0 14px; }
.as-doc-tipo {
  font: inherit; font-weight: 650; cursor: pointer;
  min-height: 44px; padding: 10px 18px; border-radius: 10px;
  border: 1.5px solid var(--as-linea, #d8dee4); background: transparent; color: inherit;
}
.as-doc-tipo--activo {
  border-color: var(--as-acento, #0f6a5a);
  background: var(--as-acento-suave, rgba(15, 106, 90, 0.08));
}

/* SOLICITAR COTIZACIÓN — formulario sencillo, sin precios. */
.as-solicitud-partida {
  display: grid; grid-template-columns: 2fr 1.4fr 0.8fr 1fr auto;
  gap: 10px; align-items: end; padding: 10px 0; border-bottom: 1px dashed var(--as-linea, #d8dee4);
}
.as-solicitud-partida .as-campo input { min-height: 44px; }
.as-solicitud-pie { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 14px; flex-wrap: wrap; }
.as-solicitud-nota { margin: 0; color: var(--as-suave, #5b6570); }
.as-error { color: var(--as-alerta, #a33); margin: 8px 0 0; }
@media (max-width: 640px) {
  .as-solicitud-partida { grid-template-columns: 1fr 1fr; }
}
/* El botón de agregar y la nota son BLOQUES: la etiqueta no fluye alrededor del botón. */
.as-solicitud > .as-boton { display: block; margin-top: 12px; }
.as-solicitud > .as-campo { display: block; margin-top: 14px; }
.as-solicitud > .as-campo > span { display: block; margin-bottom: 6px; font-weight: 650; }
.as-solicitud > .as-campo textarea { width: 100%; box-sizing: border-box; font: inherit; }