/* ============================================================================
   LO QUE COMPARTEN LAS DOS HOJAS
   ----------------------------------------------------------------------------
   Estas 19 reglas estaban escritas DOS veces, palabra por palabra, en
   estilo.css (las páginas públicas) y en panel.css (los paneles). No se veían
   dos veces porque ninguna página carga las dos hojas, pero el día que se
   retocara el color de un aviso había que acordarse de tocarlo en las dos — y
   nadie se acuerda. Es la misma regla que ya vale para el JavaScript: lo que
   está en varias pantallas se escribe una sola vez.

   Esta hoja se carga ANTES que la otra en todas las páginas, así que cualquier
   regla de estilo.css o de panel.css le gana si hace falta afinar algo.
   Una prueba se pone roja si vuelve a aparecer una regla repetida.
   ============================================================================ */
*{margin:0;padding:0;box-sizing:border-box}
h1,h2,h3,h4{font-family:'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-.03em}
button{font-family:inherit;cursor:pointer}
a{color:inherit}
img{max-width:100%;display:block}
/* Lo que se marca como oculto tiene que quedar oculto, aunque su estilo
   defina "display". Sin esto, un botón escondido vuelve a aparecer. */
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.campo .pista{font-size:12.5px;color:var(--ink-3);font-weight:400}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--green);outline-offset:-1px;border-color:var(--green)}
.campos-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.aviso{border-radius:10px;padding:12px 15px;font-size:14.5px;margin-bottom:16px;line-height:1.5}
.aviso-error{background:var(--alerta-lt);color:var(--alerta);border-left:4px solid var(--alerta)}
.aviso-bien{background:var(--green-lt);color:var(--green-dk);border-left:4px solid var(--green)}
.aviso-info{background:var(--amber-lt);color:#6B4F0E;border-left:4px solid var(--amber)}
.msg{max-width:82%;padding:10px 13px;border-radius:12px}
.msg p{font-size:14.5px;line-height:1.5;color:var(--ink)}
.msg span{display:block;font-size:11.5px;color:var(--ink-2);margin-top:5px}
.msg-mio{align-self:flex-end;background:var(--green-lt)}
.msg-ellos{align-self:flex-start;background:var(--sunken);border:1px solid var(--line)}

/* 🔴 EL TEXTO LO ESCRIBEN VECINOS, y puede venir sin un solo espacio: el nombre
   de un negocio, una descripción, una dirección. Una palabra así no se puede
   partir, estira la caja que la contiene y arrastra media pantalla con ella. Sin
   esto, la ficha pública medía 908 px de ancho en un celular de 320 y se salía
   por el costado — justo la pantalla que ve el cliente y la que se comparte por
   WhatsApp. `overflow-wrap` se hereda, así que puesto acá vale para todo el
   sitio; `word-wrap` es su nombre viejo, el que entienden los Android de 2015.
   Sólo parte la palabra cuando NO entra: si entra, no cambia nada. */
body{word-wrap:break-word;overflow-wrap:break-word}

/* La ventana que se abre encima de todo. Estaba sólo en `panel.css`, que las
   páginas públicas no cargan; desde que Compra y Venta la usa para el detalle y
   para el formulario, vive acá con el resto de lo compartido. Su motor ya estaba
   en `tobati.js` por lo mismo. */
.telon{position:fixed;inset:0;background:rgba(14,42,32,.55);z-index:90;display:none;padding:20px;overflow-y:auto}
.telon.on{display:block}
.ventana{background:var(--surface);border-radius:16px;max-width:560px;margin:40px auto;padding:24px}
.ventana h2{font-size:21px;font-weight:800;margin-bottom:6px}
.ventana .bajada{font-size:14.5px;color:var(--ink-2);margin-bottom:18px;line-height:1.5}
.ventana-pie{display:flex;gap:9px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}

/* ------------------------------------------- EL MENÚ DE LA CUENTA
   Las clases `s-*` eran del menú lateral de los paneles. Ahora también las usa
   el cajón que se abre desde la cabecera en las páginas públicas: Juanjo pidió
   que el menú sea el MISMO en todos lados, y eligió éste. Viven acá porque las
   páginas públicas no cargan `panel.css`.
   ⚠️ NO se movió `.lado`: ese nombre está definido en `estilo.css` (la columna
   del directorio) Y en `panel.css` (el menú del panel), con cuerpos distintos.
   Hoy funciona porque `mi-cuenta.html` carga primero una y después la otra, así
   que gana la segunda — pero funciona por el ORDEN, no por diseño.
   ⚠️ Y al mudarlas la primera vez me llevé por delante media hoja: corté "desde
   la primera `.s-` hasta la última", y entre medias estaban `.principal`,
   `.barra`, `.buscador` y `.contenido`. El panel del negocio se desarmó entero a
   320 px. Se extraen regla por regla, comprobando que TODOS sus selectores
   empiecen por `.s-`. */
.s-marca{display:flex;align-items:center;gap:10px;padding:0 8px 18px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:16px;text-decoration:none}
.s-sello{width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,var(--green-br),var(--green));display:grid;place-items:center;flex:none}
.s-marca b{font-family:'Schibsted Grotesk';font-weight:900;font-size:16px;line-height:1.1;display:block}
.s-marca span{font-size:11.5px;color:rgba(255,255,255,.62);font-weight:600}
.s-rotulo{font-size:10.5px;font-weight:700;letter-spacing:.11em;color:rgba(255,255,255,.62);padding:14px 10px 7px}
.s-item{
  display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;
  padding:10px 11px;border-radius:9px;color:rgba(255,255,255,.82);
  font-size:14px;font-weight:600;text-align:left;transition:.15s;
}
/* `text-decoration:none` hace falta porque ahora son enlaces: en las páginas
   públicas, la regla general de los `<a>` los subrayaba y el menú de la portada
   salía con todo subrayado mientras el de adentro no. Era una de las tres
   diferencias que lo hacían ver como dos menús distintos. */
.s-item{text-decoration:none}
.s-item:hover{background:rgba(255,255,255,.09);color:#fff}
.s-item.on{background:var(--green);color:#fff}
.s-item .globo{margin-left:auto;background:var(--alerta);color:#fff;font-size:11px;font-weight:800;padding:2px 7px;border-radius:99px}
.s-item.on .globo{background:rgba(255,255,255,.28)}
.s-item[disabled]{opacity:.45;cursor:default}
.s-item[disabled]:hover{background:none;color:rgba(255,255,255,.82)}
.s-usuario{margin-top:20px;padding:12px;background:rgba(255,255,255,.07);border-radius:11px;display:flex;align-items:center;gap:10px}
.s-avatar{width:32px;height:32px;border-radius:50%;background:var(--moss);display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.s-usuario b{font-size:13.5px;display:block}
.s-usuario span{font-size:11.5px;color:rgba(255,255,255,.62)}
/* 🔴 Cerrar sesión es un BOTÓN ROJO, no un enlace subrayado perdido abajo. Lo
   pidió Juanjo: es la única acción del menú que te saca de donde estás, y tiene
   que verse como tal. Rojo apagado sobre el verde oscuro del menú, no rojo
   chillón: es una salida normal, no un peligro. */
.s-salir{
  display:block;width:100%;margin-top:14px;padding:12px;border:0;border-radius:10px;
  background:var(--alerta);color:#fff;font-family:inherit;font-size:14px;font-weight:700;
  text-align:center;text-decoration:none;cursor:pointer;
}
.s-salir:hover{filter:brightness(.92)}
/* El botón para salir del panel y volver al sitio. Va separado de las
   secciones: no es una sección más, es la puerta de salida. */
.s-volver{margin-top:14px;border-top:1px solid var(--line);padding-top:14px;text-decoration:none}

/* La cara de quien está adentro. En los paneles es una letra en un círculo
   (`.s-avatar`); en el cajón de la web es la foto de perfil de verdad, que es
   justo lo que confirma con qué cuenta estás en un teléfono compartido. */
.s-avatar-foto{width:36px;height:36px;border-radius:50%;object-fit:cover;
  background:rgba(255,255,255,.12);flex:none;display:block}

/* --------------------------------------- ELEGIR FOTOS, CON MINIATURAS
   El selector de archivos del navegador no muestra nada al elegir una foto:
   dice "Ningún archivo seleccionado" y después el nombre del archivo, y en un
   celular eso no le dice a nadie si su foto entró. Se esconde el de verdad —que
   es el que funciona— y se le pone delante un botón normal con las miniaturas
   debajo, que es la única señal clara de que la foto se cargó.
   ⚠️ El selector NO se oculta con `display:none` ni con `hidden`: así hay
   navegadores que no dejan abrirlo desde otro botón. Se saca de la vista. */
.archivo-escondido{
  position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;
  overflow:hidden;clip-path:inset(50%);
}
.miniaturas{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:10px}
.mini{position:relative;display:block;width:74px;height:74px;flex:none}
.mini img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block;
  border:1px solid var(--line)}
.mini-ok{display:grid;place-items:center;width:100%;height:100%;border-radius:10px;
  background:var(--green-lt);color:var(--green-dk);font-size:22px;font-weight:900}
.mini-quitar{
  position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;
  border:0;background:var(--ink);color:#fff;font-size:15px;line-height:1;
  cursor:pointer;display:grid;place-items:center;padding:0;
}
.mini-cuenta{font-size:13px;color:var(--ink-3);font-weight:700}

/* ------------------------------------------- LOS BOTONES Y LAS CASILLAS
   🔴 Vivían sólo en `panel.css`, que las páginas públicas NO cargan. Desde que
   Compra y Venta usa la ventana emergente en la portada, sus botones salían
   grises y cuadrados —el estilo de fábrica del navegador— y las dos casillas
   aparecían pegadas una detrás de otra, todo seguido. Lo vio Juanjo probando.
   Es el mismo motivo por el que ya se mudaron la ventana y el menú: lo que se
   usa en los dos lados vive acá. */
/* ---------- BOTONES ---------- */
.b{border:0;padding:11px 18px;border-radius:10px;font-size:14px;font-weight:700;transition:.15s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.b-p{background:var(--green);color:#fff}
.b-p:hover{background:var(--green-dk)}
.b-o{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.b-o:hover{border-color:var(--ink-3)}
.b-peligro{background:var(--alerta-lt);color:var(--alerta);border:1px solid var(--alerta-lt)}
.b-peligro:hover{background:var(--alerta);color:#fff}
.b-chico{padding:8px 13px;font-size:13px}
.casilla{display:flex;align-items:center;gap:10px;font-size:14.5px;padding:9px 0;cursor:pointer}
.casilla input{width:18px;height:18px;accent-color:var(--green);flex:none}
/* Un botón que ocupa el ancho de su caja. En un celular, un botón chiquito en
   medio de un formulario largo se pasa de largo sin verlo. */
.b-ancho{width:100%;justify-content:center}
/* Cada casilla en su renglón, con su aire y sin que el texto se pegue al
   cuadradito ni se monte con la de abajo. */
.casilla+.casilla{border-top:1px solid var(--line)}
/* 🔴 `[type="checkbox"]` no es un adorno: sin él, la regla de los campos de
   texto (`.campo input{width:100%}`) le gana a ésta —misma especificidad, va
   después— y el cuadradito se estira a TODO el ancho. El texto de al lado queda
   en 0 px y cae en vertical, una letra por línea. Así se publicó y así lo vio
   Juanjo: la casilla ocupaba la pantalla entera. */
.casilla input[type="checkbox"]{width:19px;height:19px;flex:none;accent-color:var(--green)}
/* 🔴 `min-width:0` A SECAS rompe esto. Dentro de un flex, una caja sin ancho
   mínimo y sin `flex` que la estire se encoge hasta cero, y como el sitio
   permite partir palabras largas, el texto cae EN VERTICAL, una letra por
   línea, y la casilla se come la pantalla entera. Lo vio Juanjo publicado.
   El `flex:1` es lo que le dice "ocupá el lugar que sobra"; el `min-width:0`
   sólo le permite bajar de su palabra más larga. Van juntos o no van. */
.casilla span{flex:1;min-width:0}