/* ==========================================================================
   MERCADO CAO · mercado.css — lo propio de la app del socio.

   marca.css trae la marca de la CAO (colores, tipografías, botones, campos,
   chips). Acá va lo que Mercado CAO agrega: la banda de búsqueda, la tira de
   rubros, la grilla de avisos, la ficha y la barra inferior.

   Tres criterios mandan sobre todos los tamaños de este archivo:

     1. Esto lo abre un señor de 70 desde el celular, parado en un corral, con
        sol de frente. De ahí salen los blancos táctiles de 48 px y el
        contraste AA.
     2. Pero también se abre desde una notebook. Un teléfono estirado a 1440 px
        no se ve serio, así que en escritorio la app CAMBIA de forma: la
        navegación sube a la cabecera, la ficha se parte en dos columnas y la
        barra inferior desaparece.
     3. Nada de emoji. Los iconos son SVG de una línea (ver iconos.js).
   ========================================================================== */

:root{
  --cab-alto:58px;
  --barra-alto:62px;
  --corte:900px;            /* de acá para arriba, es una app de escritorio */
}

html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--fondo); color:var(--t1);
  font-family:var(--sans); font-size:16px; line-height:var(--lh);
  margin:0; padding:0;
  /* Columna flexible para que el pie quede SIEMPRE abajo. Sin esto, una
     pantalla corta —la puerta, un resultado vacío— deja una franja de fondo
     colgando debajo del pie, que es el detalle que delata una plantilla. */
  min-height:100dvh; display:flex; flex-direction:column;
  padding-bottom:calc(var(--barra-alto) + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media (min-width:900px){ body{ padding-bottom:0; } }

main{ flex:1 0 auto; }
.app{ max-width:var(--env); margin:0 auto; width:100%; padding:0 var(--s4) var(--s7); }
.cargando{ padding:var(--s7) 0; text-align:center; color:var(--t2); }

/* ── Iconos ────────────────────────────────────────────────────────────────
   Un solo bloque gobierna todo el juego: toman el color del texto, el trazo
   no se escala con el tamaño (vector-effect) y nunca se encogen en un flex. */
.ico{
  width:1.3em; height:1.3em; flex:none; display:block;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.ico-relleno{ fill:currentColor; stroke:none; }
.ico-sm{ width:1.05em; height:1.05em; }
.ico-lg{ width:1.7em; height:1.7em; }

/* ══ CABECERA ═════════════════════════════════════════════════════════════ */
.cab{
  position:sticky; top:0; z-index:40;
  background:var(--papel); border-bottom:1px solid var(--linea);
}
.cab-env{
  max-width:var(--env); margin:0 auto; padding:0 var(--s4);
  height:var(--cab-alto);
  display:flex; align-items:center; gap:var(--s4);
}
.cab-logo{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--tinta); flex:none;
}
.cab-logo img{ height:30px; width:auto; }
.cab-marca{ display:flex; flex-direction:column; line-height:1.05; }
.cab-marca b{
  font-family:var(--disp); font-weight:700; font-size:1.0625rem;
  letter-spacing:-.015em; color:var(--tinta);
}
.cab-marca span{
  font-size:.5625rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--t2); margin-top:2px;
}
@media (max-width:420px){ .cab-marca span{ display:none; } }

/* Navegación de escritorio: aparece cuando la barra inferior se va. */
.cab-nav{ display:none; margin-left:auto; gap:2px; }
.cab-nav a{
  display:flex; align-items:center; gap:7px; padding:8px 13px;
  border-radius:var(--r-pill); text-decoration:none;
  color:var(--t2); font-size:.875rem; font-weight:500;
  transition:background var(--d-rapido), color var(--d-rapido);
}
.cab-nav a:hover{ background:var(--verde-wash); color:var(--verde); }
.cab-nav a.activo{ background:var(--verde-wash); color:var(--verde); font-weight:600; }
.cab-der{ display:flex; align-items:center; gap:var(--s2); margin-left:auto; }
.cab-nav + .cab-der{ margin-left:var(--s3); }
@media (min-width:900px){ .cab-nav{ display:flex; } }

.cab-yo{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  padding:5px 12px 5px 5px; border-radius:var(--r-pill);
  border:1px solid var(--linea); background:var(--papel);
}
.cab-yo:hover{ border-color:var(--verde); }
.cab-yo-ini{
  width:30px; height:30px; border-radius:50%; flex:none;
  background:var(--verde); color:#fff;
  display:grid; place-items:center;
  font-family:var(--disp); font-weight:700; font-size:.8125rem;
}
.cab-yo-tx{ line-height:1.15; }
.cab-yo-tx b{ display:block; font-size:.8125rem; color:var(--tinta); font-weight:600; }
.cab-yo-tx span{ font-size:.6875rem; color:var(--t2); }
@media (max-width:520px){ .cab-yo-tx{ display:none; } .cab-yo{ padding:4px; border:0; } }

/* ══ BANDA DE BÚSQUEDA ════════════════════════════════════════════════════
   El verde no es decoración: es lo que hace que la primera pantalla se lea
   como "la CAO" y no como "una web". Y da el fondo sobre el que la tira de
   rubros se monta media altura, que es lo que hace que el conjunto se vea
   compuesto y no apilado. */
.banda{
  background:
    radial-gradient(120% 140% at 88% -20%, rgba(201,162,75,.20), transparent 60%),
    linear-gradient(168deg, #0E5B3F 0%, #0A4530 100%);
  color:#fff; padding:var(--s5) 0 var(--s8);
  margin-bottom:var(--s5);
}
.banda-env{ max-width:var(--env); margin:0 auto; padding:0 var(--s4); }
.banda-eyebrow{
  font-size:.6875rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--oro-2); margin:0 0 6px;
}
.banda h1{
  font-family:var(--disp); font-weight:600;
  font-size:clamp(1.3rem, 4.6vw, 1.75rem); line-height:1.18;
  margin:0 0 var(--s4); color:#fff; letter-spacing:-.01em; max-width:22ch;
}
@media (min-width:900px){ .banda{ padding:var(--s6) 0 var(--s8); } .banda h1{ max-width:34ch; } }

.buscador{ display:flex; gap:var(--s2); max-width:660px; }
.buscador-caja{
  position:relative; flex:1;
  display:flex; align-items:center; gap:10px;
  height:52px; padding:0 6px 0 16px;
  background:var(--papel); border-radius:var(--r-pill);
  box-shadow:0 10px 26px rgba(4,26,18,.22);
}
.buscador-caja > .ico{ color:var(--t2); }
.buscador input{
  flex:1; min-width:0; height:100%;
  border:0; background:transparent; font-size:1rem; font-family:var(--sans);
  color:var(--t1);
}
.buscador input::placeholder{ color:var(--t2); opacity:.85; }
.buscador input:focus{ outline:none; }
.buscador-caja:focus-within{ box-shadow:0 10px 26px rgba(4,26,18,.22), var(--foco); }
.buscador-mic{
  width:40px; height:40px; flex:none;
  border:0; border-radius:50%; background:var(--verde-wash); color:var(--verde);
  cursor:pointer; display:grid; place-items:center;
  transition:background var(--d-rapido), transform var(--d-rapido);
}
.buscador-mic:hover{ background:var(--verde-wash-2); }
.buscador-mic.grabando{ background:var(--rojo); color:#fff; animation:latir 1.2s infinite; }
@keyframes latir{ 50%{ transform:scale(1.07); } }
.buscador-dicho{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:var(--s3); padding:8px 14px;
  background:rgba(255,255,255,.14); border-radius:var(--r-pill);
  font-size:.875rem; color:#fff;
}

/* ── Tira de rubros: montada sobre la banda ───────────────────────────── */
.rubros-env{ max-width:var(--env); margin:calc(var(--s7) * -1) auto var(--s5); padding:0 var(--s4); }
.rubros{
  display:flex; gap:10px; overflow-x:auto;
  padding:2px 4px 4px; margin:0 -4px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.rubros::-webkit-scrollbar{ display:none; }
.rubro{
  flex:0 0 auto; scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  width:78px; text-decoration:none; color:var(--t2);
  font-size:.75rem; font-weight:500; text-align:center; line-height:1.2;
}
.rubro-ic{
  width:62px; height:62px; display:grid; place-items:center;
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r-lg);
  color:var(--verde); box-shadow:var(--sh-1);
  transition:transform var(--d), border-color var(--d), background var(--d), color var(--d);
}
.rubro-ic .ico{ width:28px; height:28px; }
.rubro:hover .rubro-ic{ border-color:var(--verde); transform:translateY(-2px); }
.rubro.activo .rubro-ic{ background:var(--verde); border-color:var(--verde); color:#fff; }
.rubro.activo{ color:var(--verde); font-weight:700; }
@media (min-width:900px){
  .rubros{ justify-content:flex-start; gap:var(--s3); }
  .rubro{ width:92px; }
  .rubro-ic{ width:68px; height:68px; }
}

/* ══ FILTROS Y RESULTADOS ═════════════════════════════════════════════════ */
.barra-res{
  display:flex; align-items:center; gap:var(--s3);
  margin:0 0 var(--s4); flex-wrap:wrap;
}
.res-n{ font-size:.875rem; color:var(--t2); }
.res-n b{ color:var(--t1); font-weight:600; }
.chips{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:2px;
  scrollbar-width:none; margin-right:auto;
}
.chips::-webkit-scrollbar{ display:none; }
.chip-f{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  padding:0 14px; height:38px;
  border:1px solid var(--linea); border-radius:var(--r-pill);
  background:var(--papel); color:var(--t2);
  font-size:.8125rem; font-weight:500; font-family:var(--sans);
  cursor:pointer; white-space:nowrap;
  transition:border-color var(--d-rapido), color var(--d-rapido), background var(--d-rapido);
}
.chip-f:hover{ border-color:var(--verde); color:var(--verde); }
.chip-f.activo{ background:var(--verde); border-color:var(--verde); color:#fff; font-weight:600; }
.chip-f.cargando{ opacity:.6; pointer-events:none; }
.chip-f .ico{ width:15px; height:15px; }

.orden{
  height:38px; padding:0 34px 0 13px;
  border:1px solid var(--linea); border-radius:var(--r-pill);
  background:var(--papel)
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23445C50' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 11px center / 14px;
  font-size:.8125rem; color:var(--t2); -webkit-appearance:none; appearance:none;
  cursor:pointer;
}
.orden:focus{ outline:none; border-color:var(--oro-2); box-shadow:var(--foco); }

/* ── Grilla ──────────────────────────────────────────────────────────────
   Dos columnas en el celular, como todo marketplace real. Una sola columna
   deja un aviso por pantalla y obliga a scrollear a ciegas: se ve grande,
   pero se busca peor. */
.grilla{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:600px){ .grilla{ grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:var(--s4); } }

.tarj-av{
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  text-decoration:none; color:inherit; position:relative;
  transition:box-shadow var(--d), transform var(--d), border-color var(--d);
}
.tarj-av:hover{ box-shadow:var(--sh-2); transform:translateY(-3px); border-color:rgba(14,91,63,.45); }
.tarj-foto{
  aspect-ratio:4/3; background:var(--crema); position:relative;
  display:grid; place-items:center; overflow:hidden;
}
.tarj-foto img{ width:100%; height:100%; object-fit:cover; }
/* Sin foto: el ícono del rubro centrado sobre un fondo de marca. Mantiene el
   4:3 a propósito — en una grilla, una tarjeta más baja estira la fila entera
   y deja un hueco blanco que se lee como "algo se rompió". Un lugar vacío bien
   hecho se ve deliberado; uno improvisado se ve roto. */
.tarj-foto:has(> .ico){
  background:
    repeating-linear-gradient(135deg, rgba(14,91,63,.035) 0 10px, transparent 10px 20px),
    var(--crema);
}
.tarj-foto > .ico{ width:40px; height:40px; color:rgba(14,91,63,.34); stroke-width:1.4; }
.tarj-destacado{
  position:absolute; top:8px; left:8px;
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(7,36,26,.82); color:var(--oro-2); backdrop-filter:blur(4px);
  font-size:.625rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 9px; border-radius:var(--r-pill);
}
.tarj-destacado .ico{ width:11px; height:11px; color:var(--oro-2); }
.tarj-fotos-n{
  position:absolute; right:8px; bottom:8px;
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(7,36,26,.7); color:#fff; backdrop-filter:blur(4px);
  font-size:.6875rem; font-weight:600; padding:3px 8px; border-radius:var(--r-pill);
}
.tarj-fotos-n .ico{ width:12px; height:12px; }
.tarj-cuerpo{ padding:11px 12px 12px; display:flex; flex-direction:column; gap:3px; flex:1; }
@media (min-width:600px){ .tarj-cuerpo{ padding:13px 14px 14px; } }
.tarj-precio{
  font-family:var(--disp); font-weight:700; font-size:1.125rem; color:var(--verde);
  line-height:1.15; letter-spacing:-.015em; font-variant-numeric:tabular-nums;
}
@media (min-width:600px){ .tarj-precio{ font-size:1.1875rem; } }
.tarj-precio small{ font-size:.75rem; font-weight:500; color:var(--t2); letter-spacing:0; }
.tarj-titulo{
  font-weight:500; font-size:.8125rem; line-height:1.35; color:var(--t1);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
@media (min-width:600px){ .tarj-titulo{ font-size:.875rem; } }
/* Una sola línea, siempre. Si el municipio es largo se corta con puntos
   suspensivos: dos líneas de metadatos desalinean toda la fila de tarjetas. */
.tarj-meta{
  display:flex; align-items:center; gap:4px; flex-wrap:nowrap;
  font-size:.6875rem; color:var(--t2); margin-top:auto; padding-top:7px;
  white-space:nowrap; overflow:hidden;
}
.tarj-meta .lugar{ overflow:hidden; text-overflow:ellipsis; }
.tarj-meta .ico{ width:12px; height:12px; opacity:.75; }
.tarj-meta .sep{ opacity:.45; }
.tarj-km{ color:var(--verde); font-weight:600; }

/* ══ FICHA ════════════════════════════════════════════════════════════════ */
.ficha{ padding-top:var(--s4); }
@media (max-width:899px){ .ficha{ padding-bottom:78px; } }
.migas{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.8125rem; color:var(--t2); text-decoration:none;
  margin-bottom:var(--s3);
}
.migas:hover{ color:var(--verde); }

@media (min-width:900px){
  .ficha-cols{
    display:grid; grid-template-columns:minmax(0,1.5fr) minmax(330px,1fr);
    column-gap:var(--s6); row-gap:var(--s5); align-items:start;
  }
  .ficha-media  { grid-column:1; grid-row:1; }
  .ficha-detalle{ grid-column:1; grid-row:2; }
  .ficha-panel  { grid-column:2; grid-row:1 / span 2; align-self:start;
                  position:sticky; top:calc(var(--cab-alto) + var(--s4)); }
}
.ficha-detalle{ margin-top:var(--s5); }

/* Galería: en celular es un carrusel; en escritorio, una foto grande con
   miniaturas debajo. La misma foto a 1.150 px de ancho se ve amateur. */
.galeria{
  display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory;
  margin:0 calc(var(--s4) * -1) var(--s3); padding:0 var(--s4);
  scrollbar-width:none;
}
.galeria::-webkit-scrollbar{ display:none; }
.galeria img{
  flex:0 0 90%; scroll-snap-align:center; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r); background:var(--crema);
}
.galeria-vacia{
  display:grid; place-items:center; gap:8px;
  aspect-ratio:16/7; background:var(--crema); border-radius:var(--r);
  color:var(--t2); font-size:.875rem; margin-bottom:var(--s3);
}
.galeria-vacia .ico{ width:30px; height:30px; opacity:.5; }
@media (min-width:900px){
  .galeria{ display:block; margin:0 0 10px; padding:0; overflow:visible; }
  .galeria img{ width:100%; aspect-ratio:4/3; border-radius:var(--r-lg); }
  .galeria img:not(:first-child){ display:none; }
  .miniaturas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; }
  .miniaturas img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-sm);
                   cursor:pointer; border:2px solid transparent; background:var(--crema); }
  .miniaturas img.activa{ border-color:var(--verde); }
}
.miniaturas{ display:none; }

.ficha-precio{
  font-family:var(--disp); font-weight:700; font-size:1.875rem;
  color:var(--verde); margin:var(--s4) 0 2px; line-height:1.05;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
@media (min-width:900px){ .ficha-precio{ margin-top:0; font-size:2rem; } }
.ficha-precio small{ font-size:.9375rem; font-weight:500; color:var(--t2); letter-spacing:0; }
.ficha-cuenta{ font-size:.875rem; color:var(--t2); margin:0 0 var(--s3); }
.ficha h1{
  font-family:var(--disp); font-weight:600; font-size:1.375rem; line-height:1.25;
  margin:0 0 var(--s2); letter-spacing:-.01em;
}
@media (min-width:900px){ .ficha h1{ font-size:1.5rem; } }
.ficha-meta{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:.8125rem; color:var(--t2); margin:0 0 var(--s4);
}
.ficha-meta .ico{ width:13px; height:13px; opacity:.8; }
.ficha-meta .sep{ opacity:.4; }
.ficha-desc{ font-size:.9375rem; line-height:var(--lh-lee); color:var(--t1); margin:0 0 var(--s4); }

.ficha-tabla{ width:100%; border-collapse:collapse; margin:0 0 var(--s5); font-size:.875rem; }
.ficha-tabla th, .ficha-tabla td{
  text-align:left; padding:10px 0; border-bottom:1px solid var(--linea-2); vertical-align:top;
}
.ficha-tabla tr:last-child th, .ficha-tabla tr:last-child td{ border-bottom:0; }
.ficha-tabla th{ color:var(--t2); font-weight:400; width:48%; }
.ficha-tabla td{ font-weight:600; }

.vendedor{
  display:flex; align-items:center; gap:12px;
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r);
  padding:var(--s3) var(--s4); margin-bottom:var(--s4);
}
.vendedor-ini{
  width:42px; height:42px; border-radius:50%; flex:none;
  background:var(--verde-wash); color:var(--verde);
  display:grid; place-items:center; font-family:var(--disp); font-weight:700;
}
.vendedor b{ display:block; font-size:.9375rem; }
.vendedor span{ font-size:.75rem; color:var(--t2); }

/* La barra de contacto no se mueve de abajo en el celular: es a lo que vino
   el comprador. En escritorio vive dentro del panel lateral. */
.contacto{ display:flex; flex-direction:column; gap:var(--s2); }
.contacto .btn{ min-height:50px; }
.contacto-barra{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  display:flex; gap:var(--s2); padding:10px var(--s4);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:var(--papel); border-top:1px solid var(--linea);
  box-shadow:0 -6px 22px rgba(7,36,26,.09);
}
.contacto-barra .btn{ min-height:50px; }
.contacto-barra .btn-wa{ flex:1; }
@media (min-width:900px){
  .contacto-barra{ position:static; padding:0; border:0; box-shadow:none; margin-top:var(--s4); }
}

/* ══ PUBLICAR ═════════════════════════════════════════════════════════════ */
.form-env{ max-width:var(--env-lee); margin:0 auto; padding-bottom:96px; }
.form-env h1{ font-family:var(--disp); font-weight:600; font-size:1.375rem; margin:0 0 var(--s4); }
.pasos{ display:flex; gap:5px; margin:var(--s5) 0 var(--s5); }
@media (min-width:900px){
  /* En escritorio el formulario es una tarjeta, no una pantalla. Y el botón
     deja de estar pegado abajo: una barra fija a lo ancho de 1.440 px sobre
     el contenido es un patrón de celular puesto donde no va. */
  .form-env{
    background:var(--papel); border:1px solid var(--linea); border-radius:var(--r-lg);
    padding:var(--s6) var(--s6) var(--s5); margin-top:var(--s5); padding-bottom:var(--s5);
  }
  .form-env .pasos{ margin-top:0; }
}
.paso-p{ flex:1; height:3px; border-radius:2px; background:var(--linea); }
.paso-p.hecho{ background:var(--verde); }
.paso-p.ahora{ background:var(--oro-2); }

.mic-grande{
  width:104px; height:104px; margin:var(--s6) auto var(--s4); display:grid; place-items:center;
  border:0; border-radius:50%; background:var(--verde); color:#fff;
  cursor:pointer; box-shadow:var(--sh-sello);
  transition:transform var(--d), background var(--d-rapido);
}
.mic-grande .ico{ width:40px; height:40px; }
.mic-grande:hover{ background:var(--verde-3); transform:scale(1.03); }
.mic-grande.grabando{ background:var(--rojo); animation:latir 1.2s infinite; }
.mic-ayuda{ text-align:center; color:var(--t2); font-size:.9375rem; margin:0 0 var(--s3); }
.mic-ejemplo{
  text-align:center; color:var(--t2); font-style:italic;
  font-size:.875rem; margin:0 auto var(--s5); max-width:34ch; opacity:.85;
}

/* Lo que falta va primero y en dorado. No es un error: es una pregunta. */
.campo.falta{
  background:var(--oro-wash); border-radius:var(--r-sm);
  padding:var(--s3); margin:0 calc(var(--s3) * -1) var(--s3);
}
.campo.falta label{ color:var(--oro); font-weight:600; }
.campo.falta input, .campo.falta select, .campo.falta textarea{ border-color:var(--oro-2); }
.campo label{ display:block; font-size:.875rem; font-weight:500; color:var(--t1); margin-bottom:6px; }
.campo label small{ color:var(--t2); font-weight:400; }
.faltan-aviso{
  display:flex; align-items:center; gap:9px;
  background:var(--oro-wash); border:1px solid rgba(154,114,31,.38);
  border-radius:var(--r-sm); padding:11px var(--s4); margin-bottom:var(--s4);
  color:var(--oro); font-weight:600; font-size:.875rem;
}

.fotos-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:var(--s4) 0; }
.foto-mini{ aspect-ratio:1; border-radius:var(--r-sm); object-fit:cover; background:var(--crema); width:100%; }
.foto-add{
  aspect-ratio:1; border:2px dashed var(--linea); border-radius:var(--r-sm);
  display:grid; place-items:center; gap:4px; color:var(--t2);
  background:var(--papel-2); cursor:pointer; font-size:.75rem;
  transition:border-color var(--d-rapido), color var(--d-rapido);
}
.foto-add .ico{ width:24px; height:24px; }
.foto-add:hover{ border-color:var(--verde); color:var(--verde); }
.foto-envoltorio{ position:relative; }
.foto-x{
  position:absolute; top:-6px; right:-6px; width:26px; height:26px; border-radius:50%;
  border:2px solid var(--papel); background:var(--rojo); color:#fff; cursor:pointer;
  display:grid; place-items:center; padding:0;
}
.foto-x .ico{ width:13px; height:13px; stroke-width:2.4; }

.pie-fijo{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  padding:10px var(--s4);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:var(--papel); border-top:1px solid var(--linea);
  box-shadow:0 -6px 22px rgba(7,36,26,.09);
}
.pie-fijo-env{ max-width:var(--env-lee); margin:0 auto; }
.pie-fijo .btn{ min-height:52px; font-size:1rem; }
@media (min-width:900px){
  .pie-fijo{ position:static; background:transparent; border:0; box-shadow:none;
             padding:0 var(--s4) var(--s8); }
  .pie-fijo-env{ max-width:var(--env-lee); padding:0 var(--s6); }
}
.pie-falta{
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:.8125rem; color:var(--oro); margin:0 0 7px; font-weight:600;
}

/* El festejo. Ese instante es la demo. */
.festejo{ text-align:center; padding:var(--s7) var(--s4); max-width:var(--env-angosto); margin:0 auto; }
.festejo-ic{
  width:76px; height:76px; margin:0 auto var(--s4); border-radius:50%;
  background:var(--verde); color:#fff; display:grid; place-items:center;
  box-shadow:var(--sh-sello);
}
.festejo-ic .ico{ width:38px; height:38px; stroke-width:2.2; }
.festejo h2{ font-family:var(--disp); font-weight:600; font-size:1.5rem; margin:0 0 var(--s2); }
.festejo p{ color:var(--t2); margin:0 0 var(--s5); }

/* ══ LA PUERTA ════════════════════════════════════════════════════════════ */
.puerta{
  max-width:400px; margin:var(--s6) auto; padding:var(--s6) var(--s5) var(--s5);
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); text-align:center;
}
@media (max-width:480px){ .puerta{ margin:var(--s4) 0; padding:var(--s5) var(--s4); border-radius:var(--r); } }
.puerta-logo{ height:44px; width:auto; margin:0 auto var(--s4); }
.puerta h1{ font-family:var(--disp); font-weight:600; font-size:1.25rem; margin:0 0 6px; }
.puerta > p{ color:var(--t2); font-size:.875rem; margin:0 0 var(--s5); }
.puerta-codigo{
  width:100%; height:64px; text-align:center;
  font-family:var(--disp); font-size:1.75rem; font-weight:700;
  letter-spacing:.08em; border:1.5px solid var(--linea); border-radius:var(--r);
  background:var(--papel-2);
}
.puerta-codigo:focus{ outline:none; border-color:var(--oro-2); box-shadow:var(--foco); background:var(--papel); }
.puerta-hola{
  font-family:var(--disp); font-weight:600; font-size:1.25rem; color:var(--verde);
  margin:0 0 4px;
}
.pin{ display:flex; gap:10px; justify-content:center; margin:var(--s5) 0; }
.pin input{
  width:58px; height:70px; text-align:center;
  font-family:var(--disp); font-size:1.75rem; font-weight:700;
  border:1.5px solid var(--linea); border-radius:var(--r); background:var(--papel-2);
}
.pin input:focus{ outline:none; border-color:var(--oro-2); box-shadow:var(--foco); background:var(--papel); }
.pin input.lleno{ border-color:var(--verde); color:var(--verde); background:var(--papel); }
.puerta-error{
  display:flex; align-items:flex-start; gap:8px; text-align:left;
  color:var(--rojo); background:var(--rojo-bg); border:1px solid var(--rojo-linea);
  border-radius:var(--r-sm); padding:10px 12px; margin:var(--s3) 0; font-size:.8125rem;
}
.puerta-error .ico{ width:16px; height:16px; margin-top:1px; }
.puerta-pie{ margin:var(--s5) 0 0; }

/* ══ BARRA INFERIOR (solo celular) ════════════════════════════════════════ */
.barra{
  position:fixed; left:0; right:0; bottom:0; z-index:44;
  display:flex; align-items:flex-end; justify-content:space-around;
  height:calc(var(--barra-alto) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--papel); border-top:1px solid var(--linea);
}
@media (min-width:900px){ .barra{ display:none !important; } }
.barra-it{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 0; text-decoration:none; color:var(--t2); font-size:.625rem;
  min-height:48px; font-weight:500;
}
.barra-it .ico{ width:21px; height:21px; }
.barra-it.activo{ color:var(--verde); font-weight:700; }
.barra-pub{
  flex:0 0 auto; width:58px; height:58px; margin-bottom:14px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--verde); color:#fff; text-decoration:none;
  box-shadow:var(--sh-sello);
  transition:background var(--d-rapido), transform var(--d-rapido);
}
.barra-pub .ico{ width:26px; height:26px; stroke-width:2.2; }
.barra-pub:hover{ background:var(--verde-3); transform:scale(1.04); }

/* ══ PIE ══════════════════════════════════════════════════════════════════ */
.pie{
  background:var(--tinta); color:rgba(255,255,255,.62);
  margin-top:var(--s8); padding:var(--s6) 0 var(--s5);
  font-size:.8125rem; line-height:var(--lh-lee);
}
.pie-env{
  max-width:var(--env); margin:0 auto; padding:0 var(--s4);
  display:grid; gap:var(--s5);
}
@media (min-width:700px){ .pie-env{ grid-template-columns:1.4fr 1fr 1fr; gap:var(--s6); } }
.pie-logo{ display:flex; align-items:center; gap:10px; margin-bottom:var(--s3); }
/* Nada de `filter:invert` sobre el logo: aplasta el emblema de la CAO en una
   mancha blanca sin las letras adentro. Va tal cual, sobre un chip claro. */
.pie-logo img{ height:30px; background:var(--papel-2); border-radius:var(--r-sm);
               padding:5px 8px; }
.pie-logo b{ font-family:var(--disp); font-size:1rem; color:#fff; }
.pie h4{
  font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--oro-2); margin:0 0 10px;
}
.pie a{ color:rgba(255,255,255,.78); text-decoration:none; display:block; padding:3px 0; }
.pie a:hover{ color:#fff; }
.pie-legal{
  max-width:var(--env); margin:var(--s5) auto 0; padding:var(--s4) var(--s4) 0;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.75rem; color:rgba(255,255,255,.45);
}
@media (max-width:899px){ .pie{ margin-bottom:0; } }

/* ══ ALERTAS ══════════════════════════════════════════════════════════════
   «Avisame cuando aparezca esto». El contador de la barra es el único canal:
   no hay email ni push, así que tiene que verse. */
.alerta{
  background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--r-lg); padding:var(--s4); margin:0 0 var(--s4);
  box-shadow:var(--sh-0);
}
.alerta-cab{ display:flex; gap:var(--s3); align-items:flex-start; }
.alerta-cab > div{ flex:1; min-width:0; }
.alerta h2{
  font-family:var(--disp); font-weight:600; font-size:var(--fs-md);
  color:var(--t1); margin:0 0 var(--s1); line-height:var(--lh-disp);
}
.alerta-meta{ margin:0; font-size:var(--fs-sm); color:var(--t2); }
.alerta-meta b{ color:var(--verde); }
.alerta .grilla{ margin-top:var(--s4); }

/* La marca de novedades sobre el destino «Alertas». */
.nav-n{
  display:inline-grid; place-items:center; min-width:18px; height:18px;
  padding:0 5px; border-radius:var(--r-pill); background:var(--verde);
  color:#fff; font-size:var(--fs-3xs); font-weight:700; font-style:normal;
  line-height:1;
}
.cab-nav .nav-n{ margin-left:6px; }
/* En la barra de celular el icono es lo único que se ve completo, así que la
   marca se monta encima en vez de empujar el texto. */
.barra-it{ position:relative; }
.barra-it .nav-n{ position:absolute; top:2px; left:50%; margin-left:4px; }

/* ══ DETALLES ═════════════════════════════════════════════════════════════ */
/* .vacio vive en marca.css, para las dos pantallas. Acá sólo lo que es propio
   de la app del socio: el ancho de lectura y el cuerpo más chico. */
.vacio p{ max-width:40ch; font-size:var(--fs-sm); }

.seccion-t{
  font-family:var(--disp); font-weight:600; font-size:1.0625rem;
  margin:var(--s6) 0 var(--s3); letter-spacing:-.01em;
}
.pagina-t{ font-family:var(--disp); font-weight:600; font-size:1.375rem; margin:var(--s5) 0 var(--s4); }

.mi-aviso{
  display:grid; grid-template-columns:84px 1fr; gap:var(--s3);
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r);
  padding:12px; margin-bottom:12px;
}
.mi-aviso-foto{ width:84px; height:84px; border-radius:var(--r-sm); object-fit:cover; background:var(--crema); }
.mi-aviso-cuerpo{ min-width:0; }
.mios-nums{ display:flex; gap:var(--s5); margin:8px 0; }
.mios-num b{ font-family:var(--disp); font-weight:700; font-size:1.125rem; color:var(--verde); display:block; line-height:1; }
.mios-num span{ font-size:.6875rem; color:var(--t2); }
.acciones{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.acciones .btn{ min-height:40px; }

.aviso-nota{
  display:flex; align-items:flex-start; gap:9px;
  background:var(--papel-2); border:1px solid var(--linea); border-radius:var(--r);
  padding:12px var(--s4); font-size:.8125rem; color:var(--t2); line-height:var(--lh-lee);
}
.aviso-nota .ico{ width:17px; height:17px; flex:none; margin-top:1px; color:var(--oro); }
.aviso-nota b{ color:var(--t1); }

.ficha-servida{ padding-bottom:var(--s7); }
.ficha-servida .env-lee{ max-width:var(--env-lee); margin:0 auto; padding:var(--s4); }

.rot{ margin:0 0 var(--s3); }

/* ───────────────────────────────────────────────────────────────────────────
   PUBLICAR SIN CARNET DE PRODUCTOR

   Lo que esta parte tiene que lograr, en una frase: que nadie confunda un
   aviso avalado por la CAO con uno que pagó un particular, y que la vía
   gratuita —renovar el carnet— se vea primero y se vea mejor.
   ─────────────────────────────────────────────────────────────────────────── */

/* El rótulo sobre la foto, abajo a la izquierda, para no pelear con el chip de
   «Destacado» que vive arriba. Los dos niveles sin carnet llevan rótulo: el
   silencio, al lado del logo de la CAO, se lee como aval. */
.tarj-aval{
  position:absolute; left:8px; bottom:8px;
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(7,36,26,.72); color:var(--crema); backdrop-filter:blur(4px);
  font-size:.625rem; font-weight:600; letter-spacing:.02em;
  padding:3px 8px; border-radius:var(--r-pill); max-width:calc(100% - 16px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tarj-aval.avalado{ background:rgba(14,91,63,.9); color:#fff; }
.tarj-aval .ico{ width:11px; height:11px; flex:none; }

/* En la ficha no alcanza un chip: acá el comprador decide si llama. */
.aval-banda{
  display:flex; align-items:flex-start; gap:8px;
  margin:12px 0 4px; padding:10px 12px;
  border:1px solid var(--linea); border-left:3px solid var(--oro-2);
  border-radius:var(--r-sm); background:var(--papel-2);
  font-size:var(--fs-sm); color:var(--t2); line-height:1.45;
}
.aval-banda.ok{ border-left-color:var(--verde); background:var(--verde-wash); color:var(--t1); }
.aval-banda .ico{ width:16px; height:16px; flex:none; margin-top:1px; color:var(--oro); }
.aval-banda.ok .ico{ color:var(--verde); }

/* La pantalla de «puede publicar de dos maneras». El orden y el peso visual
   son la decisión: la vía gratis va primera, en verde y con sello. */
.como-publicar{ max-width:34rem; margin:0 auto; padding:var(--s4) 0 var(--s6); }
.via{
  border:1px solid var(--linea); border-radius:var(--r);
  padding:var(--s5); background:var(--papel); margin-bottom:var(--s3);
}
.via-gratis{ border:1.5px solid var(--verde); background:var(--verde-wash); }
.via h2{ font-family:var(--disp); font-size:var(--fs-xl); margin:0 0 6px; color:var(--verde); }
.via p{ margin:0 0 6px; color:var(--t1); }
.via .menudo{ font-size:var(--fs-sm); color:var(--t2); }
.via-sello{
  display:inline-block; background:var(--verde); color:#fff;
  font-size:.625rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:3px 9px; border-radius:var(--r-pill); margin-bottom:8px;
}
.via-o{ text-align:center; color:var(--t2); font-size:var(--fs-sm); margin:var(--s3) 0; }
.tarifas{ list-style:none; margin:var(--s3) 0; padding:0; }
.tarifas li{
  display:flex; align-items:baseline; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--linea-2);
}
.tarifas li:last-child{ border-bottom:0; }
.tarifa-monto{
  font-family:var(--disp); font-weight:700; font-size:var(--fs-lg);
  color:var(--tinta); min-width:5.5rem; flex:none;
}
.tarifa-que{ display:flex; flex-direction:column; gap:1px; }
.tarifa-que span{ font-size:var(--fs-sm); color:var(--t2); }
.via-botones{ display:flex; flex-wrap:wrap; gap:8px; margin:var(--s3) 0; }
.via-botones .btn{ flex:1 1 auto; }

/* El código del cobro: es lo único que el socio tiene que mencionar cuando
   paga, así que se muestra como se muestra un número de trámite. */
.aviso-pago{ max-width:30rem; margin:0 auto; text-align:center; padding:var(--s6) 0; }
.pago-codigo{
  font-family:var(--mono); font-size:var(--fs-2xl); font-weight:700;
  letter-spacing:.06em; color:var(--verde); background:var(--crema);
  border-radius:var(--r-sm); padding:10px 16px; display:inline-block;
  margin:var(--s3) 0; user-select:all;
}

/* El saldo, en el pie del formulario, antes del botón. */
.pie-saldo{
  display:flex; align-items:flex-start; gap:7px;
  margin:0 0 10px; font-size:var(--fs-sm); color:var(--t2); line-height:1.4;
}
.pie-saldo .ico{ width:14px; height:14px; flex:none; margin-top:2px; color:var(--verde); }

/* El registro. Hereda de .puerta y sólo agrega los campos. */
.puerta-registro{ text-align:left; max-width:26rem; }
.puerta-registro h1, .puerta-registro > p:first-of-type{ text-align:center; }
.puerta-registro label{
  display:block; margin-bottom:var(--s3);
  font-size:var(--fs-sm); font-weight:600; color:var(--t1);
}
.puerta-registro label input:not([type="checkbox"]){
  display:block; width:100%; margin-top:5px; padding:11px 12px;
  border:1px solid var(--linea); border-radius:var(--r-sm);
  font-size:1rem; font-family:inherit; background:var(--papel);
}
.puerta-registro label input:focus{ outline:0; box-shadow:var(--foco); border-color:var(--verde); }
.puerta-registro .menudo{ display:block; margin-top:3px; font-weight:400; color:var(--t2); font-size:var(--fs-xs); }
.puerta-registro .acepto{
  display:flex; align-items:flex-start; gap:8px; font-weight:400;
  color:var(--t2); line-height:1.4;
}
.puerta-registro .acepto input{ margin-top:3px; flex:none; }

/* ───────────────────────────────────────────────────────────────────────────
   PRECIOS DE MERCADO
   Una tabla, no un gráfico: el socio quiere el número y si subió o bajó.
   ─────────────────────────────────────────────────────────────────────────── */
.pagina-bajada{ color:var(--t2); font-size:var(--fs-sm); margin:-8px 0 var(--s4); }
.grupo-precios{ margin-bottom:var(--s5); }
.precios-tabla{
  width:100%; border-collapse:collapse; background:var(--papel);
  border:1px solid var(--linea); border-radius:var(--r); overflow:hidden;
}
.precios-tabla th, .precios-tabla td{
  padding:10px 12px; border-bottom:1px solid var(--linea-2);
  font-size:var(--fs-sm); vertical-align:baseline;
}
.precios-tabla th{ text-align:left; font-weight:500; color:var(--t1); }
.precios-tabla tr:last-child th, .precios-tabla tr:last-child td{ border-bottom:0; }
.precios-tabla .der{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.precios-tabla .uni{ color:var(--t2); font-size:var(--fs-xs); white-space:nowrap; }
.var{ font-size:var(--fs-xs); font-weight:600; white-space:nowrap; }
.var.sube{ color:var(--rojo); }          /* para el que compra, subir es malo */
.var.baja{ color:var(--verde); }
.var.igual, .var.nuevo{ color:var(--t2); font-weight:400; }
.grupo-ver{ margin:8px 0 0; font-size:var(--fs-sm); }

/* La cinta de precios sobre la vitrina. Discreta: informa, no interrumpe. */
.cinta{ margin:var(--s4) 0 0; }
.cinta a{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  padding:11px 14px; border:1px solid var(--linea); border-radius:var(--r);
  background:var(--papel); color:var(--t1); font-size:var(--fs-sm);
}
.cinta a:hover{ border-color:var(--verde); background:var(--verde-wash); }
.cinta .ico{ width:17px; height:17px; flex:none; color:var(--verde); }
.cinta-ir{ margin-left:auto; color:var(--verde); font-weight:600; white-space:nowrap; }