/* Botánica Supplier Network
   Piedra caliza + tinta henequén; el habanero solo marca lo pendiente.
   Lo desconocido se dibuja rayado: nunca se confunde con cero. */

:root {
  --piedra: #f4f6f3;
  --papel: #ffffff;
  --tinta: #17201b;
  --tenue: #5a665e;
  --linea: #dbe1db;
  --linea-suave: #e9ede8;
  --henequen: #1f3b2d;
  --henequen-claro: #e3ece5;
  --hoja: #2f7a47;
  --hoja-claro: #e2f1e6;
  --flete: #8db89a;
  --habanero: #c9500c;
  --habanero-claro: #fbeadf;
  --mal: #b42318;
  --mal-claro: #fbe4e2;
  --info: #2d5f8b;
  --info-claro: #e3edf6;
  --demo: #6b4f96;
  --demo-claro: #efe8f7;
  --radio: 10px;
  --radio-chico: 6px;
  --sombra: 0 1px 2px rgba(23, 32, 27, .06), 0 8px 24px -16px rgba(23, 32, 27, .18);
  --letra: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --letra-titulo: "Avenir Next Condensed", "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--piedra); color: var(--tinta);
  font: 15px/1.5 var(--letra); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--henequen); text-underline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--letra-titulo); line-height: 1.2; margin: 0 0 .5rem; letter-spacing: -.005em; }
h1 { font-size: 1.75rem; font-weight: 600; }
h2 { font-size: 1.12rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; margin-top: 1rem; }
h4 { font-size: .92rem; font-weight: 600; color: var(--tenue); }
p { margin: 0 0 .6rem; }
code { font-size: .86em; background: var(--linea-suave); padding: .05em .35em; border-radius: 4px; }
:focus-visible { outline: 3px solid var(--info); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--papel); padding: .5rem 1rem; z-index: 50; }
.saltar:focus { left: 8px; }
.tenue { color: var(--tenue); }
.bloque { display: block; }
.cifra-ok { color: var(--hoja); }
.cifra-alerta { color: var(--habanero); }

/* ── Marco ─────────────────────────────────────────── */
.app { min-height: 100vh; display: grid; grid-template-columns: 236px minmax(0, 1fr); }
.lateral {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 1.5rem;
  padding: 1.25rem .9rem; background: var(--henequen); color: #e8efe9;
}
.marca { display: flex; align-items: center; gap: .65rem; }
.marca__sello {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px;
  background: #f4f6f3; color: var(--henequen); font: 700 1.15rem/1 var(--letra-titulo);
}
.marca__texto { font: 600 1.05rem/1.1 var(--letra-titulo); }
.marca__texto small { display: block; font: 500 .78rem/1.3 var(--letra); opacity: .75; }
.marca--grande .marca__sello { background: var(--henequen); color: #f4f6f3; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav__item {
  display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: 8px;
  color: #d6e2d9; text-decoration: none; font-weight: 500;
}
.nav__item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav__item.activo { background: #f4f6f3; color: var(--henequen); }
.icono { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lateral__pie { margin-top: auto; font-size: .86rem; }
.lateral__pie .boton { color: #e8efe9; border-color: rgba(255, 255, 255, .25); }
.usuario small { display: block; opacity: .7; }
.marca-demo { background: var(--demo); color: #fff; padding: .35rem .55rem; border-radius: 6px; font-size: .78rem; font-weight: 600; }
.contenido { padding: 1.75rem 2rem 4rem; max-width: 1280px; width: 100%; min-width: 0; outline: none; }
.cargando { color: var(--tenue); padding: 2rem 0; }

/* ── Cabecera de página ─────────────────────────────── */
.cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.cabeza p { margin: .15rem 0 0; }
.cabeza__acciones, .fila-botones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.fila-botones { margin-top: .75rem; }
.migas { font-size: .88rem; margin-bottom: .4rem; color: var(--tenue); }

/* ── Botones ───────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 40px;
  padding: .5rem .95rem; border-radius: 8px; border: 1px solid var(--linea); background: var(--papel);
  color: var(--tinta); font: 600 .92rem/1.2 var(--letra); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.boton:hover { border-color: #b9c4bb; }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.boton--primario { background: var(--henequen); border-color: var(--henequen); color: #fff; }
.boton--primario:hover { background: #2a4d3b; border-color: #2a4d3b; }
.boton--fantasma { background: transparent; border-color: transparent; color: var(--henequen); }
.boton--fantasma:hover { background: var(--henequen-claro); border-color: transparent; }
.boton--chico { min-height: 32px; padding: .3rem .65rem; font-size: .84rem; }
.boton--ancho { width: 100%; }

/* ── Paneles y rejillas ────────────────────────────── */
.panel { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.15rem 1.25rem; margin-bottom: 1rem; }
.panel .sep { margin-top: 1.4rem; }
.panel--accion { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-color: var(--henequen); }
.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.rejilla-2 > .panel { margin-bottom: 0; }
.rejilla-2 + .panel, .rejilla-2 + .rejilla-2 { margin-top: 1rem; }
.tarjetas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }

/* ── Cifras del resumen: una banda continua, no tarjetas sueltas ── */
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); margin-bottom: 1rem; overflow: hidden; }
.cifra { padding: 1rem 1.15rem; text-decoration: none; color: inherit; border-left: 1px solid var(--linea); display: flex; flex-direction: column; }
.cifra:first-child { border-left: 0; }
.cifra:hover { background: #fafbf9; }
.cifra__valor { font: 600 2rem/1 var(--letra-titulo); color: var(--henequen); }
.cifra__nombre { font-weight: 600; margin-top: .3rem; }
.cifra__detalle { font-size: .82rem; color: var(--tenue); }

/* ── Listas ────────────────────────────────────────── */
.lista-simple { list-style: none; margin: 0 0 .5rem; padding: 0; }
.lista-simple li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--linea-suave); align-items: center; }
.lista-simple li:last-child { border-bottom: 0; }
.lista-simple li > span:last-child { text-align: right; }
.lista-simple li > span:first-child { min-width: 0; }
.alertas { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.alerta a { display: block; padding: .6rem .8rem; border-radius: 8px; text-decoration: none; color: var(--tinta); border-left: 4px solid; }
.alerta span { display: block; font-size: .85rem; color: var(--tenue); }
.alerta--mal a { background: var(--mal-claro); border-color: var(--mal); }
.alerta--alerta a { background: var(--habanero-claro); border-color: var(--habanero); }
.alerta--info a { background: var(--info-claro); border-color: var(--info); }
.actividad { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.actividad li { display: grid; grid-template-columns: 9.5rem 1fr; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid var(--linea-suave); }
.actividad time { color: var(--tenue); }
.mini { margin: .25rem 0; padding-left: 1.1rem; font-size: .85rem; }
.fuentes { padding-left: 1.1rem; font-size: .88rem; word-break: break-all; }
.notas { white-space: pre-line; color: var(--tenue); font-size: .92rem; }
.datos { display: grid; grid-template-columns: 9.5rem 1fr; gap: .35rem 1rem; margin: 0; }
.datos dt { color: var(--tenue); }
.datos dd { margin: 0; overflow-wrap: anywhere; }

/* ── Insignias y notas ─────────────────────────────── */
.insignia { display: inline-block; padding: .08rem .5rem; border-radius: 999px; font-size: .76rem; font-weight: 600; line-height: 1.6; white-space: nowrap; vertical-align: middle; }
.insignia--ok { background: var(--hoja-claro); color: var(--hoja); }
.insignia--info { background: var(--info-claro); color: var(--info); }
.insignia--alerta { background: var(--habanero-claro); color: var(--habanero); }
.insignia--mal { background: var(--mal-claro); color: var(--mal); }
.insignia--neutro { background: var(--linea-suave); color: var(--tenue); }
.insignia--demo { background: var(--demo-claro); color: var(--demo); margin-left: .35rem; }
.nota { background: var(--linea-suave); border-radius: 8px; padding: .6rem .8rem; font-size: .9rem; }
.nota--alerta { background: var(--habanero-claro); color: #7a3207; }
.nota--info { background: var(--info-claro); }
.nota ul { margin: .3rem 0; }
.vacio { text-align: left; padding: 1.5rem 0; color: var(--tenue); }
.vacio__titulo { color: var(--tinta); font-weight: 600; margin-bottom: .2rem; }
.vacio--chico { padding: .5rem 0; }

/* ── Tablas ────────────────────────────────────────── */
.tabla { width: 100%; border-collapse: collapse; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; font-size: .92rem; }
.panel .tabla { border: 0; }
.tabla th { text-align: left; font-weight: 600; font-size: .8rem; color: var(--tenue); padding: .6rem .75rem; border-bottom: 1px solid var(--linea); background: #fafbf9; }
.tabla td { padding: .65rem .75rem; border-bottom: 1px solid var(--linea-suave); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; }
.tabla--compacta td, .tabla--compacta th { padding: .45rem .55rem; font-size: .84rem; }
.tabla .detalle { color: var(--tenue); max-width: 360px; overflow-wrap: anywhere; }
.enlace-fuerte { font-weight: 600; text-decoration: none; }
.enlace-fuerte:hover { text-decoration: underline; }
.desplazable { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -1.25rem; padding: 0 1.25rem; }
.fila--pendiente td { background: #fffaf6; }
.fila--duplicada td { color: var(--tenue); }

/* ── Formularios ───────────────────────────────────── */
.formulario { display: block; }
.formulario h2 { margin-top: .5rem; }
.formulario h2 ~ h2 { margin-top: 1.4rem; }
.rejilla-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .75rem 1rem; margin-bottom: .75rem; }
.campo { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .6rem; min-width: 0; }
.rejilla-campos .campo { margin-bottom: 0; }
.campo--doble { grid-column: span 2; }
.campo label { font-size: .84rem; font-weight: 600; }
.req { color: var(--habanero); }
.campo input, .campo select, .campo textarea {
  font: inherit; color: inherit; min-height: 42px; padding: .5rem .65rem; border: 1px solid #c9d1ca; border-radius: 8px; background: #fff; width: 100%;
}
.campo input[type="file"] { padding: .4rem; }
.campo textarea { min-height: 84px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--henequen); outline: 2px solid var(--henequen-claro); outline-offset: 0; }
.campo input:disabled, .campo select:disabled { background: var(--linea-suave); }
.campo__ayuda { font-size: .8rem; color: var(--tenue); margin: 0; }
.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--mal); }
.campo__error { color: var(--mal); font-size: .82rem; margin: 0; }
.filtros { display: grid; grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.filtros .campo { margin: 0; }
.filtros--linea { display: flex; }
.formulario--linea { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.formulario--linea .campo { margin: 0; flex: 1 1 240px; }
.casillas { border: 0; padding: 0; margin: .5rem 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.casillas legend { font-size: .84rem; font-weight: 600; margin-bottom: .35rem; padding: 0; }
.casilla { display: inline-flex; gap: .4rem; align-items: center; min-height: 32px; }
.casilla input { width: 18px; height: 18px; accent-color: var(--henequen); }
.casillas--lista { flex-direction: column; gap: 0; }
.casilla--fila { align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--linea-suave); gap: .65rem; }
.casilla--fila input { margin-top: .2rem; flex: none; }
.respuesta-linea { border: 1px solid var(--linea); border-radius: 8px; margin: 0 0 .75rem; padding: .6rem .8rem; }
.respuesta-linea legend { font-weight: 600; padding: 0 .3rem; }

/* Renglones de necesidad */
.lineas { display: grid; gap: .65rem; margin-bottom: 1rem; }
.linea { border: 1px solid var(--linea); border-radius: 8px; padding: .7rem .8rem .3rem; }
.linea--duda { border-color: var(--habanero); background: #fffaf6; }
.linea__original { font-size: .86rem; color: var(--tenue); margin-bottom: .4rem; }
.rejilla-campos--linea { grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); }
.rejilla-campos--linea .campo--doble { grid-column: auto; }

/* ── Pestañas ──────────────────────────────────────── */
.pestanas { display: flex; gap: .25rem; border-bottom: 1px solid var(--linea); margin-bottom: 1.1rem; overflow-x: auto; scrollbar-width: none; }
.pestanas a { padding: .6rem .9rem; text-decoration: none; color: var(--tenue); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.pestanas a.activa { color: var(--henequen); border-color: var(--henequen); }

/* ── Comparador ────────────────────────────────────── */
.comparacion { margin: 1.25rem 0; }
.comparacion__cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.comparacion__cabeza .campo { margin: 0; min-width: 260px; }
.leyenda { font-size: .84rem; color: var(--tenue); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: .6rem 0 1rem; }
.muestra { display: inline-block; width: 22px; height: 10px; border-radius: 3px; vertical-align: middle; }
.muestra--mercancia, .barra__seg--mercancia { background: var(--henequen); }
.muestra--flete, .barra__seg--flete { background: var(--flete); }
.muestra--desconocido, .barra__seg--desconocido { background: repeating-linear-gradient(135deg, var(--habanero) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1px var(--habanero); }
.comparacion__linea { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.comparacion__linea > header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--linea-suave); padding-bottom: .5rem; margin-bottom: .25rem; }
.comparacion__linea > header h3 { margin: 0; font-size: 1.12rem; }
.comparacion__linea > header p { margin: 0; font-size: .88rem; }
.grupo h4 { margin-top: .9rem; }
.opciones { list-style: none; margin: 0; padding: 0; }
.opcion {
  display: grid; grid-template-columns: 28px minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, 2fr) minmax(0, .9fr);
  gap: .4rem 1rem; align-items: start; padding: .8rem .5rem; border-bottom: 1px solid var(--linea-suave); border-radius: 8px;
}
.opcion:last-child { border-bottom: 0; }
.opcion--equilibrada { background: var(--hoja-claro); border-bottom-color: transparent; box-shadow: inset 4px 0 0 var(--hoja); }
.opcion__elegir input { width: 20px; height: 20px; margin: .1rem 0 0; accent-color: var(--henequen); }
.opcion__quien, .opcion__compra, .opcion__entrega { display: flex; flex-direction: column; font-size: .88rem; min-width: 0; }
.opcion__proveedor { font-weight: 600; font-size: .96rem; cursor: pointer; }
.opcion__etiquetas { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.opcion__compra strong, .opcion__entrega strong { font-size: .96rem; }
.barra { height: 10px; background: var(--linea-suave); border-radius: 5px; overflow: hidden; display: flex; }
.barra__seg { display: block; height: 100%; }
.costos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; margin: .45rem 0 0; font-size: .84rem; }
.costos dt { color: var(--tenue); font-size: .76rem; }
.costos dd { margin: 0; }
.opcion__notas { grid-column: 2 / -1; list-style: none; margin: 0; padding: 0; font-size: .82rem; color: var(--tenue); display: flex; flex-wrap: wrap; gap: .15rem 1rem; }
.opcion__notas .pendiente { color: var(--habanero); font-weight: 600; }
.opcion__notas .pendiente::before { content: "Pendiente: "; font-weight: 500; }
.opcion--incompleta .opcion__proveedor { color: var(--tinta); }
.grupo .nota { margin-top: .6rem; }

.escenarios { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.escenario { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.15rem; }
.escenario--principal { border-color: var(--henequen); }
.escenario--ahorro { background: var(--hoja-claro); border-color: var(--hoja); }
.escenario__total { font: 600 1.9rem/1.1 var(--letra-titulo); margin: .2rem 0 .3rem; color: var(--henequen); }

.texto-plano { white-space: pre-wrap; background: #fafbf9; border: 1px solid var(--linea); border-radius: 8px; padding: .8rem; font: .86rem/1.5 ui-monospace, "SF Mono", Menlo, monospace; max-height: 420px; overflow: auto; margin: 0; }
.invitados { list-style: none; padding: 0; margin: 0 0 .5rem; }
.invitados li { padding: .7rem 0; border-bottom: 1px solid var(--linea-suave); }
.invitados .fila-botones { margin-top: .4rem; }

/* Evaluación */
.metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .5rem 0; }
.metrica { background: #fafbf9; border: 1px solid var(--linea-suave); border-radius: 8px; padding: .5rem .6rem; display: flex; flex-direction: column; font-size: .8rem; color: var(--tenue); }
.metrica strong { font-size: 1.15rem; }
.evaluacion__estado { font-weight: 600; }

/* ── Entrada ───────────────────────────────────────── */
.entrada { grid-column: 1 / -1; min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.entrada__tarjeta { width: min(420px, 100%); background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 2rem 1.75rem; box-shadow: var(--sombra); }
.entrada__tarjeta h1 { margin-top: 1.5rem; font-size: 1.5rem; }

/* ── Portal ────────────────────────────────────────── */
.portal { grid-column: 1 / -1; min-width: 0; }
.portal__barra { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.5rem; background: var(--henequen); color: #e8efe9; }
.portal__barra .marca__sello { background: #f4f6f3; color: var(--henequen); }
.portal__barra .boton { color: #e8efe9; }
.portal__quien { margin: 0 0 0 auto; text-align: right; font-weight: 600; }
.portal__quien small { display: block; font-weight: 400; opacity: .75; }
.pestanas--portal { padding: 0 1.5rem; background: var(--papel); }
.contenido--portal { margin: 0 auto; }

/* ── Avisos y diálogos ─────────────────────────────── */
.avisos { position: fixed; right: 1rem; bottom: 1rem; display: grid; gap: .5rem; z-index: 100; max-width: min(420px, calc(100vw - 2rem)); }
.aviso { padding: .7rem 1rem; border-radius: 8px; background: var(--henequen); color: #fff; box-shadow: var(--sombra); font-weight: 500; transition: opacity .3s, transform .3s; }
.aviso--mal { background: var(--mal); }
.aviso--alerta { background: var(--habanero); }
.aviso--sale { opacity: 0; transform: translateY(6px); }
.dialogo { border: 0; border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .4); color: var(--tinta); }
.dialogo--amplio { width: min(900px, calc(100vw - 2rem)); }
.dialogo::backdrop { background: rgba(23, 32, 27, .45); }
.dialogo__cabeza { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1.25rem; border-bottom: 1px solid var(--linea); position: sticky; top: 0; background: var(--papel); z-index: 1; }
.dialogo__cabeza h2 { margin: 0; }
.dialogo__cuerpo { padding: 1rem 1.25rem 1.25rem; }

/* ── Tableta ───────────────────────────────────────── */
/* Bandeja de pendientes y abasto */
.bandeja { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bandeja__item a { display: grid; gap: .2rem; padding: .7rem .9rem; border-radius: 8px; text-decoration: none; color: var(--tinta); border-left: 4px solid var(--linea); background: #fafbf9; }
.bandeja__item a:hover { background: var(--linea-suave); }
.bandeja__item--alta a { border-color: var(--mal); background: var(--mal-claro); }
.bandeja__item--media a { border-color: var(--habanero); }
.bandeja__item .tenue { font-size: .86rem; }
.bandeja__cabeza { display: flex; gap: .5rem; align-items: center; }
.alerta-linea { background: var(--habanero-claro); border-left: 4px solid var(--habanero); padding: .55rem .8rem; border-radius: 8px; }
.entrada-num { width: 6.5rem; text-align: right; }
.tabla--abasto { min-width: 860px; }
.tabla--abasto td:nth-child(2) { min-width: 15rem; }
.exportar { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
.cabeza--seccion { margin-bottom: .5rem; align-items: center; }
.cabeza--seccion h2 { margin: 0; }

@media (max-width: 1100px) {
  .filtros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filtros .campo:first-child { grid-column: 1 / -1; }
  .opcion { grid-template-columns: 28px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
  .opcion__costos { grid-column: 2 / -1; grid-row: 2; }
  .escenarios { grid-template-columns: 1fr 1fr; }
  .escenario--principal { grid-column: 1 / -1; }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifra:nth-child(3) { border-left: 0; }
  .cifra:nth-child(n+3) { border-top: 1px solid var(--linea); }
}

/* ── Teléfono ──────────────────────────────────────── */
@media (max-width: 820px) {
  body { font-size: 16px; }
  .app { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .lateral {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; z-index: 40;
    flex-direction: row; padding: 0 .25rem env(safe-area-inset-bottom); gap: 0;
  }
  .lateral .marca, .lateral__pie { display: none; }
  .nav { flex-direction: row; width: 100%; justify-content: space-around; }
  .nav__item { flex-direction: column; gap: .15rem; padding: .5rem .1rem; font-size: .64rem; letter-spacing: -.01em; flex: 1 1 0; min-width: 0; text-align: center; border-radius: 0; }
  .nav__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav__item.activo { background: transparent; color: #fff; box-shadow: inset 0 3px 0 #f4f6f3; }
  .contenido { padding: 1rem 1rem 2rem; }
  h1 { font-size: 1.45rem; }
  .rejilla-2, .escenarios { grid-template-columns: 1fr; }
  .filtros { grid-template-columns: 1fr 1fr; }
  .rejilla-campos, .rejilla-campos--linea { grid-template-columns: 1fr 1fr; }
  .rejilla-campos--linea .campo:first-child, .campo--doble { grid-column: 1 / -1; }
  .metricas { grid-template-columns: 1fr 1fr; }
  .datos { grid-template-columns: 1fr; gap: 0; }
  .datos dd { margin-bottom: .45rem; }
  .actividad li { grid-template-columns: 1fr; gap: 0; }
  .panel { padding: 1rem; }
  .desplazable { margin: 0 -1rem; padding: 0 1rem; }
  .avisos { left: 1rem; right: 1rem; bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* Tablas como fichas */
  .tabla--tarjetas, .tabla--tarjetas tbody, .tabla--tarjetas tr, .tabla--tarjetas td { display: block; width: 100%; }
  .tabla--tarjetas { border: 0; background: transparent; }
  .tabla--abasto { min-width: 0; }
  .tabla--tarjetas thead { display: none; }
  .tabla--tarjetas tr { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: .6rem; padding: .35rem .2rem; }
  .tabla--tarjetas td { border: 0; padding: .3rem .75rem; text-align: left !important; }
  .tabla--tarjetas td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; font-size: .74rem; color: var(--tenue); font-weight: 600; }
  .tabla--tarjetas td:first-child::before { display: none; }
  .tabla--tarjetas td:first-child { font-size: 1.02rem; padding-top: .55rem; }
  .comparacion__linea { padding: .8rem; }
  .opcion { grid-template-columns: 28px 1fr 1fr; padding: .8rem .35rem; }
  .opcion__elegir { grid-row: 1; }
  .opcion__quien { grid-column: 2 / -1; grid-row: 1; }
  .opcion__compra { grid-column: 2; grid-row: 2; }
  .opcion__entrega { grid-column: 3; grid-row: 2; }
  .opcion__costos { grid-column: 1 / -1; grid-row: 3; }
  .opcion__notas { grid-column: 1 / -1; grid-row: 4; }
  .costos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal__barra { padding: .7rem 1rem; flex-wrap: wrap; }
  .pestanas--portal { padding: 0 .5rem; }
  .boton { min-height: 44px; }
  .boton--chico { min-height: 38px; }
}

@media (max-width: 420px) {
  .filtros, .rejilla-campos, .rejilla-campos--linea { grid-template-columns: 1fr; }
  .cifras { grid-template-columns: 1fr 1fr; }
  .cifra__valor { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

@media print {
  .lateral, .cabeza__acciones, .fila-botones, .pestanas, .avisos { display: none !important; }
  .app { display: block; }
  .panel, .escenario { break-inside: avoid; }
}
.cant { white-space: nowrap; }
.paginador { display: flex; align-items: center; gap: .75rem; justify-content: flex-end; margin: .75rem 0; font-size: .88rem; flex-wrap: wrap; }
.pestanas--chicas a { padding: .45rem .7rem; font-size: .9rem; }
.celda--recomendada { background: var(--hoja-claro); }
.matriz th[scope="row"] { text-align: left; background: #fafbf9; min-width: 160px; }
.matriz td { min-width: 130px; }
.recomendacion { margin-top: .6rem; }
.recomendacion summary { cursor: pointer; font-weight: 600; color: var(--henequen); padding: .3rem 0; }
.lote input { width: 7.5rem; min-height: 36px; padding: .3rem .45rem; border: 1px solid #c9d1ca; border-radius: 6px; font: inherit; }
.lote input[type="date"] { width: 9.5rem; }
.entrada__enlace { margin-top: 1rem; text-align: center; }
.entrada__tarjeta--amplia { width: min(760px, 100%); }

/* Volver a Botánica OS (17 oct 2026): siempre arriba del menú, sin cerrar la sesión. */
.volver-os { display: flex; align-items: center; min-height: 44px; margin: .9rem 0 .4rem; padding: 0 .8rem; border-radius: 8px;
  background: #f4f6f3; color: var(--henequen) !important; font-weight: 700; text-decoration: none; }
.volver-os:hover, .volver-os:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* «← Volver a Módulos» en el teléfono (17 oct 2026): renglón fijo arriba, fuera de la barra
   inferior de áreas, para que se lea completo y las áreas conserven su espacio. */
@media (max-width: 820px) {
  .lateral .volver-os { position: fixed; top: 0; left: 0; right: 0; z-index: 41; margin: 0; border-radius: 0; justify-content: center;
    min-height: 44px; padding: env(safe-area-inset-top) 1rem 0; border-bottom: 1px solid var(--linea); }
  .app { padding-top: calc(44px + env(safe-area-inset-top)); }
}
@media print { .volver-os { display: none !important; } }