/* ============================================================================
   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}
/* `text-decoration:none` va acá dentro y no en una regla aparte: los del menú
   son enlaces, y en las páginas públicas la regla general de los `<a>` los
   subrayaba —el menú de la portada salía con todo subrayado y el de adentro no,
   una de las tres diferencias que los hacían ver como dos menús distintos—.
   Estuvo un rato como una segunda regla `.s-item{}` suelta debajo: funcionaba,
   pero el mismo selector dos veces es exactamente lo que se acaba pisando. */
.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;
}
.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}


/* ---------------------------------------------- la caja del ancho y el pie
   🔴 Estas cinco reglas vivían sólo en `estilo.css`, y los DOS paneles —el de
   admin y el del negocio— no cargan esa hoja. Medido en el navegador con una
   sesión puesta: el pie salía con 0 de separación, sin su línea de arriba y
   pegado al borde izquierdo de la pantalla, mientras que en la portada estaba
   perfecto. Nadie lo veía porque no rompe nada: sólo queda feo, y justo en la
   pantalla que Juanjo y Renzo usan en la calle.
   Es el error número 5 de la lista, por quinta vez. Ahora hay un guardián que
   compara, página por página, las clases que usa contra las hojas que carga. */
.wrap{max-width:1320px;margin:0 auto;padding:0 26px}
@media(max-width:370px){
  .wrap{padding:0 16px}
}
.pie-simple{padding:22px 0 28px;margin-top:30px;border-top:1px solid var(--line);
  text-align:center}
.pie-simple span{color:var(--ink-3);font-size:13px}
.pie-simple a{color:var(--ink-2);font-weight:600}


/* ------------------------------- seis cosas que estaban escritas DOS veces
   Las mismas seis clases vivían en `estilo.css` y en `panel.css` con valores
   que se diferenciaban en unos píxeles: 48 contra 44 de relleno, 340 contra
   420 de alto. No se notaba porque casi ninguna página carga las dos hojas —
   pero `mi-cuenta.html` sí, y ahí ganaba una por el orden de carga. Y el día
   que alguien retoque el color de un "Cargando…" tiene que acordarse de los
   dos sitios.
   Se unifica con el valor MÁS COMPACTO de los dos, porque quien decide es el
   celular: es donde 8 px de relleno de más empujan el contenido fuera de la
   pantalla. Cada hoja se queda con sus reglas hijas, que sí son suyas
   (`.campo input` del panel no es el de la ficha pública).
   ⚠️ El `.hilo` público pasa de 340 a 420 no: se queda en 340, el más
   prudente. En un teléfono de 800 px de alto, 420 es más de media pantalla
   de mensajes antes de poder hacer nada. */
.solo-lectores{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.cargando{text-align:center;padding:44px 20px;color:var(--ink-3);font-size:15px}
.vacio{text-align:center;padding:40px 24px;color:var(--ink-2)}
.hilo{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;max-height:340px;overflow-y:auto}
.ubicacion{display:flex;align-items:center;gap:12px;flex-wrap:wrap}


/* ---------------------------------------------------------------------------
   🔴 EL MAPA VIVE EN LA HOJA COMÚN desde el 18-09-2026, no en `estilo.css`.
   El panel de admin dibuja el mapa de las visitas —dónde hay que ir a dar de
   alta un negocio que pidió un promotor— y esa pantalla NO carga `estilo.css`.
   Con las reglas allá, el mapa salía como una caja sin alto, las teselas en el
   flujo una debajo de otra y los pines en cualquier parte.
   Se movió el bloque ENTERO y de una vez, comprobando antes que dentro no
   hubiera ninguna regla ajena: es la lección de cuando corté "de la primera a
   la última" y me llevé media hoja por delante. */
/* =========================================================================
   EL MAPA DE VERDAD
   -------------------------------------------------------------------------
   Las teselas de OpenStreetMap se pegan una al lado de la otra dentro de una
   caja con overflow oculto. Todo va en posición absoluta: si las teselas
   estuvieran en el flujo, la caja crecería con ellas y el mapa se saldría.
   ========================================================================= */
.mapa{position:relative;overflow:hidden;background:#E8E3DA;
  height:440px;touch-action:none;
  -webkit-user-select:none;user-select:none}
.mapa.agarrando{cursor:grabbing}
.mapa-vivo{cursor:grab}
.mapa-capa{position:absolute;inset:0}
.mapa-tesela{position:absolute;width:256px;height:256px;max-width:none;
  display:block;pointer-events:none}
.mapa-pines{position:absolute;inset:0}

/* El pin va anclado por su PUNTA, no por su centro: si se centrara, el lugar
   quedaría marcado unos metros más al sur de donde está. */
.mapa-pin{position:absolute;transform:translate(-50%,-100%);
  display:block;text-decoration:none;z-index:2}
.mapa-gota{display:block;width:20px;height:20px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);border:2.5px solid #fff;
  box-shadow:0 2px 6px rgba(22,34,28,.35)}
.pin-negocio .mapa-gota{background:var(--green)}
.pin-turismo .mapa-gota{background:var(--moss-tx)}
.mapa-pin .mapa-nombre{display:none}
.mapa-pin.elegido{z-index:5}
.mapa-pin.elegido .mapa-gota{width:24px;height:24px;margin:-2px 0 0 -2px}
.mapa-pin.elegido .mapa-nombre{display:block;position:absolute;left:50%;
  bottom:calc(100% + 6px);transform:translateX(-50%);
  background:var(--surface);color:var(--ink);font-size:13px;font-weight:700;
  padding:5px 10px;border-radius:999px;white-space:nowrap;
  box-shadow:0 3px 10px rgba(22,34,28,.22)}

.mapa-mando{position:absolute;right:10px;top:10px;display:flex;
  flex-direction:column;gap:6px;z-index:6}
.mapa-boton{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:19px;font-weight:700;
  line-height:1;cursor:pointer;box-shadow:0 2px 6px rgba(22,34,28,.15)}
.mapa-boton:hover{background:var(--green-lt)}

/* Esto NO es un adorno: es la condición de la licencia de OpenStreetMap. */
.mapa-credito{position:absolute;right:6px;bottom:6px;z-index:6;
  background:rgba(255,255,255,.82);color:var(--ink-2);font-size:10.5px;
  padding:2px 6px;border-radius:6px;text-decoration:none}

.mapa-filtros{display:flex;gap:8px;padding:12px;background:var(--surface);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.mf{flex:1 1 90px;padding:9px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);font-size:14px;font-weight:600;
  cursor:pointer;font-family:inherit}
.mf.on{background:var(--green);border-color:var(--green);color:#fff}

@media (max-width:900px){ .mapa{height:340px} }
@media (max-width:560px){ .mapa{height:300px} }