/* ============================================================
   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.

     Para poner la foto del dron mas adelante, cambie solo
     --page-image por:
         url('fondo.jpg') center / cover no-repeat fixed
     El velo calido (--page-scrim) va encima y mantiene el texto
     legible. No hace falta tocar nada mas.

     To drop in the drone photo later, change only --page-image to:
         url('fondo.jpg') center / cover no-repeat fixed
     The warm scrim (--page-scrim) sits on top and keeps text
     readable. Nothing else needs touching.
     ---------------------------------------------------------- */
  --page-image: linear-gradient(178deg, #6FC3CD 0%, #9AD6DC 34%, #C6E7E8 66%, #EAF3EE 100%);
  --page-scrim: linear-gradient(180deg, rgba(253,251,247,.34) 0%, rgba(253,251,247,.58) 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;
}

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));
}

/* ---------- 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;
}

.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); }

/* ---------- 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); }

/* ---------- 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-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); }
.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); }

/* ---------- 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); }

.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; }
}