/* ============================================================
   Costa Dorada — style.css
   Los colores y tamanos vienen del diseno aprobado.
   Colors and sizes come from the approved design.
   ============================================================ */

:root {
  --deep:   #0B3C49;   /* titulos y texto / headings and text */
  --teal:   #14707A;   /* enlaces / links                     */
  --aqua:   #2AA9B5;   /* solo foco / focus ring only         */
  --shal:   #9FD8DC;   /* linea del horizonte / horizon line  */
  --brass:  #B8925E;   /* acento calido / warm accent         */

  --sand:   #FFFDF9;   /* tarjetas y campos / cards, fields   */
  --foam:   #F5EFE6;   /* paneles suaves / soft fill panels   */
  --pale:   #FAF6EF;   /* fondo al pasar / hover tint         */

  --edge:   #E8E0D4;   /* borde exterior / outer border   */
  --rule:   #E8E0D4;   /* lineas entre filas / row rules  */
  --field:  #DCD2C4;   /* borde de campos / field border  */
  --hair:   #E8E0D4;   /* linea del pie / footer hairline */

  --ink:    #0B3C49;
  --mid:    #44606A;
  --mute:   #6E7C7C;
  --faint:  #94908A;

  --sans:  'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --col: 720px;
  --pad: 24px;

  /* ----------------------------------------------------------
     EL FONDO DE LA PAGINA SE DEFINE AQUI Y EN NINGUN OTRO SITIO.
     THE PAGE BACKGROUND IS DEFINED HERE AND NOWHERE ELSE.

     La foto del dron (fondo.jpg) ya esta puesta. Vive en la misma
     carpeta que index.php, al lado de logo.png.
     El velo calido (--page-scrim) va encima y mantiene el texto
     legible. Para aclarar u oscurecer el fondo, suba o baje los
     tres numeros del scrim. No hace falta tocar nada mas.

     The drone photo (fondo.jpg) is now in place. It lives in the
     same folder as index.php, next to logo.png.
     The warm scrim (--page-scrim) sits on top and keeps text
     readable. To lighten or darken the background, raise or lower
     the three scrim numbers. Nothing else needs touching.
     ---------------------------------------------------------- */
  --page-image: url('fondo.jpg') center / cover no-repeat fixed;
  --page-scrim: linear-gradient(180deg, rgba(253,251,247,.56) 0%, rgba(253,251,247,.72) 45%, rgba(253,251,247,.84) 100%);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--page-scrim), var(--page-image);
  background-attachment: fixed;
  background-color: #FDFBF7;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Los telefonos no manejan bien un fondo fijo: se traba al desplazar.
   Phones handle a fixed background badly: it stutters while scrolling. */
@media (max-width: 760px) {
  body { background-attachment: scroll; }
}

a { color: var(--teal); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--brass); }

:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ---------- la linea del horizonte / the horizon line ---------- */

.horizon {
  height: 3px;
  flex: 0 0 3px;
  background: linear-gradient(90deg, var(--shal), var(--aqua), var(--teal), var(--deep));
}

/* ---------- aviso de vista previa / preview banner ---------- */

.previewbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 10px var(--pad);
  background: var(--deep);
  color: #F3EBDD;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}
.previewbar a {
  color: #F3EBDD;
  text-decoration: underline;
  white-space: nowrap;
}
.previewbar a:hover { color: var(--brass); }

/* ---------- encabezado / header ---------- */

.bar {
  background: rgba(253,251,247,.90);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bar-in {
  max-width: var(--col);
  margin: 0 auto;
  padding: 20px var(--pad) 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  color: var(--deep);
  letter-spacing: .07em;
}
.wordmark:hover { color: var(--brass); }

.bar-links { display: flex; align-items: center; gap: 18px; }
.bar-links .lang  { font-size: 15px; color: var(--teal); }
.bar-links .quiet { font-size: 15px; color: var(--mute); }
.bar-links .quiet:hover { color: var(--deep); }

.bar-cover .bar-in { padding-bottom: 14px; }
.bar-cover .lang { font-size: 15px; color: var(--teal); }

/* ---------- el area de contenido / the content area ---------- */

/* La tarjeta crece con su contenido; ya no se estira hasta el pie.
   The card grows with its contents; it no longer stretches to the footer. */
.sheet {
  flex: 0 1 auto;
  width: 100%;
  max-width: var(--col);
  margin: 16px auto;
  padding: 28px var(--pad) 40px;
  background: var(--sand);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(120,96,64,.04), 0 10px 34px rgba(120,96,64,.06);
}
.sheet-wide { max-width: 1000px; }

/* la portada centra su contenido verticalmente y no lleva el panel blanco
   the cover page centres content and has no white card */
.sheet-cover {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 56px;
  padding-bottom: 80px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* sobre el agua, la barra tampoco lleva fondo propio
   over the water, the bar on the cover has no background */
body.is-cover .bar { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.is-cover .bar-cover .lang { color: var(--deep); }
body.is-cover .horizon { opacity: .5; }

/* ---------- titulos de pagina / page headings ---------- */

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.page-head-l { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }

.page-head h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(28px, 7.5vw, 35px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--deep);
}

.back {
  font-size: 26px;
  line-height: 1.1;
  color: var(--teal);
  padding: 0 4px 0 0;
  flex: 0 0 auto;
}

.head-action {
  font-size: 17px;
  font-weight: 500;
  color: var(--teal);
  white-space: nowrap;
  padding: 6px 2px;
}

/* ---------- portada / cover ---------- */

.cover-head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cover-name {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(38px, 12vw, 52px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: .06em;
  color: var(--deep);
}
.cover-sub {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass);
}
.cover-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 280px;
}

/* los botones de la portada: mas pequenos y discretos
   the cover buttons: smaller and quieter */
.cover-actions .btn {
  padding: 15px 26px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .08em;
  border-radius: 999px;
  box-shadow: none;
}
/* "Crear cuenta" lleva el contorno de laton sobre el fondo claro:
   se ve, sin competir con el boton lleno.
   "Create account" gets the brass outline over the light background:
   it reads clearly without fighting the filled button. */
.cover-actions .btn-ghost {
  background: rgba(255,253,249,.55);
  border: 1px solid var(--brass);
  color: var(--deep);
}
.cover-actions .btn-ghost:hover {
  background: rgba(184,146,94,.16);
  color: var(--deep);
}

/* ---------- botones / buttons ---------- */

.btn, button.btn, a.btn {
  display: block;
  width: 100%;
  appearance: none;
  border: none;
  cursor: pointer;
  background: var(--deep);
  color: var(--sand);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .06em;
  text-align: center;
  padding: 15px 22px;
  border-radius: 8px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { background: var(--teal); color: var(--sand); }

/* el secundario: contorno de laton, sin relleno
   the secondary: brass outline, no fill */
.btn-ghost {
  background: transparent;
  color: var(--teal);
  border: 1px solid var(--brass);
}
.btn-ghost:hover { background: rgba(184,146,94,.10); color: var(--deep); }

.btn-small { font-size: 16px; padding: 13px 18px; border-radius: 8px; }

/* En el telefono, cada boton ocupa su propia fila: mas facil de tocar.
   On the phone, each button gets its own row: easier to tap. */
.btn-row { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.btn-row form { margin: 0; }
.btn-row .btn { padding: 13px 18px; font-size: 16px; }

/* enlace discreto debajo de un formulario
   quiet link under a form */
.under {
  display: block;
  margin-top: 20px;
  font-size: 16px;
  color: var(--mute);
  text-align: center;
}
.under:hover { color: var(--teal); }

/* ---------- formularios / forms ---------- */

.form { display: flex; flex-direction: column; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 15px; color: var(--mid); }

input[type=text], input[type=email], input[type=password],
input[type=tel], input[type=date], input[type=time],
select, textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 19px;
  color: var(--ink);
  background: var(--sand);
  border: 1.5px solid var(--field);
  border-radius: 8px;
  padding: 16px;
}
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(20, 112, 122, .14);
}

/* El navegador pinta los campos autocompletados de amarillo.
   Esto los devuelve al crema de la tarjeta.
   The browser paints autofilled fields yellow.
   This puts them back to the card cream. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--sand) inset;
  box-shadow: 0 0 0 1000px var(--sand) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 600000s 0s;
}

.proof-privacy {
  margin: 8px 0 14px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mid);
  background: var(--foam);
  border-left: 2px solid var(--brass);
  border-radius: 0 8px 8px 0;
}

.proof-list {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mid);
}
.proof-list li { margin: 0; }

.hint { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--mute); }

/* zona de subir archivo / file drop zone */
.drop { position: relative; }
.drop input[type=file] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.drop-face {
  display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--shal);
  background: var(--pale);
  border-radius: 8px;
  padding: 26px;
  font-size: 18px;
  font-weight: 500;
  color: var(--teal);
  text-align: center;
  word-break: break-word;
}
.drop input[type=file]:focus-visible + .drop-face { border-color: var(--aqua); border-style: solid; }

.check { display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--mid); }
.check input { width: 22px; height: 22px; accent-color: var(--teal); }
.field .check { margin-top: 4px; }

/* ---------- avisos / flash messages ---------- */

.flash {
  margin: 0 0 22px;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 17px;
  line-height: 1.5;
  background: var(--foam);
  border-left: 3px solid var(--aqua);
  color: var(--deep);
}
.flash-err { background: #FCEEEC; border-left-color: #C0563F; color: #7A2E1E; }

/* ---------- proxima asamblea / next assembly ---------- */

.next {
  background: var(--foam);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.next .eyebrow {
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
}
.next .when {
  font-family: var(--serif);
  font-size: 33px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--deep);
}
.next .detail { font-size: 19px; color: var(--deep); }
.next .detail.soft { color: var(--mid); }

/* Boton solido, para que no se confunda con los enlaces a documentos
   de mas abajo (esos son texto subrayado con un icono de hoja).
   Solid button, so it doesn't get mistaken for the document links
   further down (those are underlined text with a page icon). */
.ics-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--sand);
  background: var(--brass);
  border: 1px solid var(--brass);
  border-radius: 999px;
  padding: 7px 16px 7px 12px;
  transition: background .25s ease, border-color .25s ease;
}
.ics-link:hover { background: #A17E4E; border-color: #A17E4E; }
/* 1em = exactamente el tamano del texto del enlace / 1em = exactly the link's text size */
.ics-icon { width: 1em; height: 1em; flex: 0 0 auto; }

.tl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.tl-head .ics-link { margin-top: 0; }

/* Los enlaces a documentos: texto subrayado con icono de hoja, para que
   se lean claramente como archivos y no como un boton de accion.
   Document links: underlined text with a page icon, so they read
   clearly as files rather than an action button. */
.tl-files a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: underline;
  text-decoration-color: var(--edge);
  text-underline-offset: 3px;
}
.tl-files a:hover { text-decoration-color: var(--teal); }
.tl-file-icon { width: 1em; height: 1em; flex: 0 0 auto; color: var(--faint); }

/* ---------- menu principal / main menu ---------- */

.menu { display: flex; flex-direction: column; margin-top: 26px; }

.menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 20px 4px;
  border-top: 1px solid var(--rule);
  color: var(--deep);
  transition: background .25s ease;
}
.menu a:last-child { border-bottom: 1px solid var(--rule); }
.menu a:hover { background: var(--pale); }
.menu .label { font-family: var(--serif); font-size: 28px; font-weight: 500; }
.menu .chev  { font-size: 24px; color: var(--brass); transition: color .25s ease; }
.menu a:hover .chev { color: var(--deep); }

/* ---------- linea de tiempo de asambleas / assembly timeline ---------- */

.tl { display: flex; flex-direction: column; }
.tl-item { display: flex; gap: 16px; }
.tl-gutter { display: flex; flex-direction: column; align-items: center; width: 14px; flex: 0 0 14px; }
.tl-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--shal);
  margin-top: 8px;
}
.tl-item.is-next .tl-dot { background: var(--teal); }
.tl-line { flex: 1; width: 2px; background: var(--edge); }
.tl-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-bottom: 32px; min-width: 0; }
.tl-item:last-child .tl-body { padding-bottom: 0; }
.tl-date { font-size: 15px; letter-spacing: .04em; color: var(--mute); }
.tl-item.is-next .tl-date { color: var(--teal); }
.tl-title { font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1.25; color: var(--deep); }
.tl-where { display: block; margin-top: 3px; font-size: 16px; color: var(--mute); }
.tl-files { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.tl-files a { font-size: 17px; }

/* ---------- listas de documentos / document lists ---------- */

.group { margin-bottom: 24px; }
.group:last-child { margin-bottom: 0; }
.group-title {
  display: block;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  padding-bottom: 10px;
}

.rows { display: flex; flex-direction: column; }

.rows .row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  color: var(--deep);
}
.rows .row:last-child { border-bottom: 1px solid var(--rule); }
a.row:hover { background: var(--pale); }
.row .title { font-size: 19px; line-height: 1.35; color: var(--deep); }
.row .meta  { font-size: 15px; color: var(--mute); }

/* ---------- foro / forum ---------- */

.threads { display: flex; flex-direction: column; }
.threads a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}
.threads a:last-child { border-bottom: 1px solid var(--rule); }
.threads a:hover { background: var(--pale); }
.threads .subject {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--deep);
}
.threads .meta { font-size: 15px; color: var(--mute); }

.thread-title {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
}

.posts { display: flex; flex-direction: column; gap: 26px; margin-bottom: 30px; }
.post { display: flex; flex-direction: column; gap: 8px; }
.post .who { font-size: 15px; color: var(--mute); }
.post .said { margin: 0; font-size: 18px; line-height: 1.6; color: var(--deep); }
.post .said.gone { color: var(--faint); font-style: italic; }
.post-edited { font-size: 13px; color: var(--faint); }
.post-tools { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.post-tools form { margin: 0; }
.post-tools a { font-size: 13px; color: var(--mute); text-decoration: underline; }
.post-tools a:hover { color: var(--brass); }
.post-tools .linkbtn { font-size: 13px; }
.divider { height: 1px; background: var(--rule); }

.composer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--pale);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px;
}
.composer textarea { background: var(--sand); font-size: 18px; padding: 14px; }

/* ---------- servicios / services ---------- */

.vendors { display: flex; flex-direction: column; }
.vendor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.vendor:last-child { border-bottom: 1px solid var(--rule); }
.vendor .who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vendor .name  { font-size: 19px; color: var(--deep); }
.vendor .trade { font-size: 16px; color: var(--mute); }
.vendor .tel   { font-size: 18px; font-weight: 500; color: var(--teal); white-space: nowrap; }
.vendor-edit   { font-size: 15px; color: var(--brass); white-space: nowrap; }
.vendor-edit:hover { color: var(--deep); }
.vendor-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.vendor-actions form { margin: 0; }
.flagged { font-size: 14px; color: var(--faint); }

/* un boton que parece enlace / a button that reads as a link */
.linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--mute);
  text-decoration: underline;
  cursor: pointer;
  transition: color .25s ease;
}
.linkbtn:hover { color: var(--brass); }
.linkbtn-brass { color: var(--brass); font-weight: 500; font-size: 13px; }
.linkbtn-brass:hover { color: var(--deep); }

.endorse-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.endorse-row form { margin: 0; }
.endorsed-count { font-size: 13px; color: var(--faint); }

/* ---------- preguntar / ask ---------- */

.talk { display: flex; flex-direction: column; gap: 24px; margin-bottom: 26px; }
.ask-disclaimer, .notice {
  font-size: 14px;
  line-height: 1.5;
  color: var(--mute);
  background: var(--sand);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 18px;
}
.mine {
  align-self: flex-end;
  max-width: 82%;
  background: var(--foam);
  border-radius: 12px;
  padding: 16px 18px;
}
.mine p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--deep); }
.theirs { display: flex; flex-direction: column; gap: 10px; padding-right: 8px; }
.theirs p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--deep); }
.theirs .cites { font-size: 15px; color: var(--mute); }

.asker { display: flex; gap: 10px; align-items: center; }
.asker input { flex: 1; min-width: 0; font-size: 18px; }
.asker .btn { width: auto; font-size: 18px; padding: 16px 20px; border-radius: 8px; }

.empty { font-size: 18px; line-height: 1.6; color: var(--mute); }

/* linea callada al pie de una lista corta / quiet line under a short list */
.list-note {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--faint);
}

/* ---------- administrar / manage ---------- */

.panel {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 24px;
}
.panel h2 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--deep);
}
.panel summary {
  cursor: pointer;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--deep);
  list-style: none;
}
.panel summary::-webkit-details-marker { display: none; }
.panel summary::after { content: ' +'; color: var(--brass); }
.panel[open] summary::after { content: ' −'; }
.panel[open] summary { margin-bottom: 18px; }

.applicant {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.applicant:last-child { border-bottom: 1px solid var(--rule); }
.applicant .who { display: flex; flex-direction: column; gap: 3px; }
.applicant .name { font-size: 19px; color: var(--deep); }
.applicant .meta { font-size: 15px; color: var(--mute); }
.ai-summary {
  font-size: 15px;
  line-height: 1.5;
  color: var(--mid);
  background: var(--foam);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 6px;
}
.doc-flags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.doc-flag {
  font-size: 13px;
  color: #7A4E12;
  background: rgba(184,146,94,.20);
  border-radius: 999px;
  padding: 3px 10px;
}

.reset-link { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.reset-link .btn-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
.reset-link-field {
  flex: 1;
  min-width: 220px;
  font-size: 15px;
  padding: 10px 12px;
  background: var(--sand);
  color: var(--mute);
}

/* ---------- pie / footer ---------- */

/* el pie se queda abajo aunque la tarjeta sea corta
   the footer stays at the bottom even when the card is short */
.foot { background: transparent; margin-top: auto; }
.foot-in {
  max-width: var(--col);
  margin: 0 auto;
  padding: 14px var(--pad) 24px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(11,60,73,.55);
  text-align: center;
}

/* ============================================================
   Escritorio: la misma columna, centrada y un poco mas grande.
   Desktop: the same column, centred and slightly larger.
   ============================================================ */

@media (min-width: 820px) {
  :root { --pad: 48px; }

  .bar-in     { padding: 22px var(--pad) 18px; }
  .wordmark   { font-size: 22px; }
  .bar-links  { gap: 28px; }
  .bar-links .lang, .bar-links .quiet { font-size: 16px; }

  .sheet      { margin: 24px auto; padding: 48px var(--pad) 64px; border-radius: 18px; }
  .foot-in    { padding: 18px var(--pad) 28px; font-size: 13px; }

  .page-head h1  { font-size: 34px; }
  .cover-name    { font-size: 60px; }
  .cover-sub     { font-size: 15px; }
  .sheet-cover   { gap: 60px; }
  .cover-actions { max-width: 300px; }

  .menu .label   { font-size: 26px; }
  .menu a        { padding: 24px 6px; }
  .next          { padding: 40px; border-radius: 14px; }
  .next .when    { font-size: 40px; }
  .next .detail  { font-size: 22px; }

  .row .title    { font-size: 20px; }
  .tl-title      { font-size: 24px; }
  .threads .subject { font-size: 23px; }
  .thread-title  { font-size: 30px; }

  .btn-row      { flex-direction: row; width: auto; }
  .btn-row .btn { width: auto; padding: 14px 20px; font-size: 17px; }

  .applicant {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

/* El inicio con sesion es la unica pantalla de dos columnas.
   The logged-in home is the only two-column screen. */
@media (min-width: 900px) {
  .home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
  }
  .home-grid .menu { margin-top: 0; }
}

/* ============================================================
   Telefonos estrechos (~390px): la tarjeta casi a lo ancho.
   Narrow phones (~390px): the card goes nearly full width.
   ============================================================ */

@media (max-width: 430px) {
  :root { --pad: 20px; }

  .sheet      { margin: 10px auto; border-radius: 12px; padding: 24px var(--pad) 34px; }
  .bar-in     { padding: 16px var(--pad) 12px; gap: 12px; }
  .wordmark   { font-size: 20px; letter-spacing: .05em; }
  .bar-links  { gap: 14px; }

  .sheet-cover   { gap: 40px; padding-bottom: 56px; }
  .cover-sub     { font-size: 13px; letter-spacing: .18em; }
  .cover-actions { max-width: 100%; }

  .menu .label   { font-size: 24px; }
  .next          { padding: 20px; }
  .next .when    { font-size: 28px; }
  .thread-title  { font-size: 26px; }
  .panel         { padding: 16px; }

  .reset-link-field { min-width: 0; }
}


/* ============================================================
   Propiedades en venta o alquiler / Homes for sale & rent
   ============================================================ */

/* pestanas / tabs */
.lst-tabs { display: flex; gap: 8px; margin: 4px 0 22px; flex-wrap: wrap; }
.lst-tabs a {
  padding: 8px 16px; border-radius: 999px; font-size: 15px; font-weight: 500;
  color: var(--mid); border: 1px solid var(--edge); background: var(--sand);
}
.lst-tabs a:hover { color: var(--deep); background: var(--pale); }
.lst-tabs a.on { background: var(--deep); border-color: var(--deep); color: #FFFDF9; }

/* la nota sobre alquileres a corto plazo / the short-term rentals note */
.notice + .lst-tabs { margin-top: 18px; }

/* rejilla de tarjetas / card grid */
.lst-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.lst-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--edge); border-radius: 14px; background: var(--sand);
  color: var(--ink); text-decoration: none;
  box-shadow: 0 1px 2px rgba(120,96,64,.04);
  transition: box-shadow .25s ease, transform .25s ease;
}
.lst-card:hover { color: var(--ink); box-shadow: 0 10px 26px rgba(120,96,64,.10); transform: translateY(-2px); }
.lst-cover { display: block; aspect-ratio: 4 / 3; background: var(--foam); }
.lst-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lst-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.lst-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lst-price { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--deep); }
.lst-badge {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.lst-badge-sale { background: rgba(184,146,94,.14); color: var(--brass); }
.lst-badge-rent { background: rgba(20,112,122,.10); color: var(--teal); }
.lst-meta  { font-size: 14px; color: var(--mid); }
.lst-avail { font-size: 13px; color: var(--faint); }
.lst-line  { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -6px 0 4px; }
.lst-desc  { white-space: pre-wrap; }

/* galeria / gallery */
.gal { margin: 18px 0 6px; }
.gal-main img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; display: block; background: var(--foam); }
.gal-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.gal-th {
  padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden;
  background: none; cursor: pointer; line-height: 0;
}
.gal-th img { width: 76px; height: 57px; object-fit: cover; display: block; }
.gal-th.on { border-color: var(--brass); }

/* contacto / contact */
.lst-contact { margin-top: 26px; }
.lst-trap { position: absolute; left: -9999px; top: -9999px; }

/* mis propiedades / my listings */
.lst-mine {
  display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule);
  align-items: flex-start;
}
.lst-mine-cover { flex: 0 0 96px; }
.lst-mine-cover img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; display: block; background: var(--foam); }
.lst-mine-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.lst-mine-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.lst-state {
  font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.lst-state-active  { background: rgba(20,112,122,.10); color: var(--teal); }
.lst-state-paused  { background: var(--foam); color: var(--mid); }
.lst-state-expired { background: rgba(184,146,94,.14); color: var(--brass); }
.lst-state-hidden  { background: rgba(11,60,73,.10); color: var(--deep); }

/* administrador de fotos / photo manager */
.ph-rows { margin-bottom: 18px; }
.ph-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.ph-row img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; display: block; background: var(--foam); }
.ph-tools { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* mensajes / messages */
.msg-item { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.msg-item.msg-new { border-left: 3px solid var(--brass); padding-left: 14px; }
.msg-meta { font-size: 14px; color: var(--mid); margin: 0 0 6px; }
.msg-body { margin: 0; white-space: pre-wrap; }

/* insignia de mensajes sin leer / unread badge */
.mbadge {
  display: inline-block; background: var(--brass); color: #FFFDF9;
  font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px;
  margin-left: 10px; letter-spacing: .03em; vertical-align: 2px;
}

/* Un respiro antes del boton de propiedades: entrar y crear cuenta son una
   cosa, mirar las propiedades es otra.
   A breath before the homes button: logging in and creating an account are
   one thing, browsing the homes is another. */
.cover-actions .btn-apart { margin-top: 28px; }

/* la portada: contador y adelanto / the cover: count line and preview strip */
.cover-count { margin: 2px 0 0; font-size: 14px; color: var(--mid); text-align: center; }
.peek { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
.peek img {
  width: 84px; height: 63px; object-fit: cover; border-radius: 10px; display: block;
  border: 1px solid rgba(232,224,212,.9); box-shadow: 0 2px 10px rgba(120,96,64,.10);
}
.peek:hover img { box-shadow: 0 4px 14px rgba(120,96,64,.16); }

@media (max-width: 430px) {
  .lst-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .lst-price { font-size: 20px; }
  .lst-mine { flex-direction: column; }
}

/* borrador / draft */
.lst-state-draft { background: var(--foam); color: var(--mid); border: 1px dashed var(--edge); }
.lst-draftbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: rgba(184,146,94,.08); border: 1px solid rgba(184,146,94,.35);
  border-radius: 12px; padding: 14px 18px; margin: 0 0 22px;
}
.lst-draftbar p { margin: 0; font-size: 15px; }