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

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

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