:root {
  --bg: #F5F4EF;
  --surface: #FFFFFF;
  --ink: #1C231F;
  --ink-soft: #566259;
  --line: #DEDCD2;

  --teal-900: #12312E;
  --teal-700: #1E4F49;
  --teal-500: #2E6E63;
  --sage-100: #E4EFE7;

  --amber: #C98A2C;
  --alert: #B4402A;
  --alert-100: #F7E3DE;

  --radius-s: 8px;
  --radius-m: 14px;

  --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Escala tipográfica (punto 5 de la propuesta de diseño) -- antes había
     tamaños sueltos por todos lados (12px, 12.5px, 13px, 14px, 14.5px,
     15.5px...) sin ningún criterio, cada uno puesto a ojo en su momento.
     Estos 4 son los únicos que se usan de acá en más para texto de la
     interfaz: chico (metadatos, ayudas), normal (cuerpo, botones,
     campos), sección (títulos de bloque) y grande (marca/títulos
     principales). Los números realmente grandes (el código de invitación,
     el título de la portada) quedan afuera a propósito -- son elementos
     de exhibición puntuales, no texto de la interfaz. El modo accesible
     (más abajo) tiene su propia escala ampliada aparte; no se toca acá. */
  --fs-s: 13.5px;
  --fs-m: 15px;
  --fs-l: 17px;
  --fs-xl: 19px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
}

a { color: var(--teal-700); }

#app {
  min-height: 100vh;
}

/* ---------- Encabezado ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 10px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--teal-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--fs-m);
  font-weight: 600;
}

.brand-name {
  font-size: var(--fs-xl);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.brand-tagline {
  color: var(--ink-soft);
  font-size: var(--fs-s);
}

.identity-pill {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  font-size: var(--fs-s);
  color: var(--ink-soft);
}

.identity-pill strong { color: var(--ink); font-weight: 600; }

.identity-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.identity-actions .ghost-btn { text-align: center; }

.ghost-btn {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: var(--radius-s);
  padding: 7px 12px;
  font-size: var(--fs-s);
  color: var(--ink);
  cursor: pointer;
}
.ghost-btn:hover { border-color: var(--teal-500); }

/* Menú colapsado del encabezado (punto 4): idioma / modo accesible /
   sonido / notificaciones ya no van sueltos junto al nombre -- quedan
   adentro de este <details>, cerrado por defecto, para que arriba solo
   se vea la marca y quién es la persona. Mismo patrón <details>/<summary>
   que ya usa la app en otras partes (ej. los campos de coordenadas a
   mano) por accesibilidad y porque no depende de JS para abrir/cerrar. */
.header-menu summary {
  list-style: none;
  cursor: pointer;
}
.header-menu summary::-webkit-details-marker { display: none; }
.header-menu[open] summary { border-color: var(--teal-500); }
.header-menu .row { margin-top: 8px; }

/* ---------- Layout general ---------- */

.shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px;
}

.hero {
  max-width: 640px;
  margin: 10vh auto 0;
  padding: 0 20px;
  text-align: left;
}

.hero h1 {
  font-size: 34px;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}

.hero p {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 30px;
  max-width: 46ch;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 22px;
  /* Sombra sutil (punto 5): que se sientan "elevadas" en vez de solo
     delimitadas por la línea gris de arriba, que queda igual. */
  box-shadow: 0 1px 2px rgba(28, 35, 31, 0.07), 0 4px 12px rgba(28, 35, 31, 0.05);
}

.field-group { margin-bottom: 16px; }

label {
  display: block;
  font-size: var(--fs-s);
  color: var(--ink-soft);
  margin-bottom: 6px;
}

/* Corrección 2026-09-27 -- los campos de teléfono (type="tel") y correo no
   estaban en esta lista y se veían "crudos" (borde fino, sin relleno, el
   texto de ejemplo desbordado) en "Invitar a alguien" y "Mi teléfono". */
input[type="text"], input[type="number"], input[type="tel"], input[type="email"], select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-size: var(--fs-m);
  background: var(--bg);
  color: var(--ink);
}
input:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--teal-500);
  outline-offset: 1px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-s);
  padding: 11px 18px;
  font-size: var(--fs-m);
  font-weight: 600;
  cursor: pointer;
}
.btn-primary { background: var(--teal-700); color: white; }
.btn-primary:hover { background: var(--teal-900); }
.btn-secondary { background: var(--sage-100); color: var(--teal-900); }
.btn-alert { background: var(--alert); color: white; }
.btn-alert:hover { background: #93321F; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.row { display: flex; gap: 12px; }
.row > * { flex: 1; }

.small-link {
  background: none;
  border: none;
  color: var(--teal-700);
  cursor: pointer;
  font-size: var(--fs-s);
  padding: 0;
  text-decoration: underline;
}

/* ---------- Dashboard ---------- */

.grid {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr; }
}

.section-title {
  /* Antes estaba al mismo tamaño que el texto normal (15px) -- un
     "título de sección" que no se distinguía de una etiqueta cualquiera.
     Ahora usa el escalón de sección de la escala tipográfica (punto 5). */
  font-size: var(--fs-l);
  font-weight: 650;
  margin: 0 0 14px;
}

.status-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.status-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-s);
  background: var(--bg);
  font-size: var(--fs-m);
}

.status-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink-soft);
  flex-shrink: 0;
}
.status-dot.ok { background: var(--teal-500); }
.status-dot.sos { background: var(--alert); }
.status-dot.idle { background: #B9B6A8; }

.sos-button {
  width: 100%;
  padding: 22px;
  border-radius: var(--radius-m);
  border: none;
  background: var(--alert);
  color: white;
  font-size: var(--fs-xl);
  font-weight: 700;
  cursor: pointer;
  margin: 6px 0 4px;
}
.sos-button:active { background: #8E301E; }

.hint {
  font-size: var(--fs-s);
  color: var(--ink-soft);
  text-align: center;
  margin: 0 0 18px;
}

/* ---------- resultados del buscador de direcciones ---------- */
.address-search-results {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  margin: 6px 0 0;
  overflow: hidden;
}
.address-search-results:empty { display: none; border: none; margin-top: 0; }
.address-search-result {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  font-size: var(--fs-s);
  color: var(--ink);
  cursor: pointer;
}
.address-search-result:last-child { border-bottom: none; }
.address-search-result:hover, .address-search-result:focus-visible { background: var(--sage-100); }
.address-search-status { font-size: var(--fs-s); color: var(--ink-soft); margin: 6px 0 0; }

.simulate-box {
  border-top: 1px dashed var(--line);
  margin-top: 18px;
  padding-top: 16px;
}
.simulate-box .section-title { font-size: var(--fs-s); color: var(--ink-soft); font-weight: 600; }

.progress-track {
  height: 8px;
  border-radius: 5px;
  background: var(--bg);
  border: 1px solid var(--line);
  overflow: hidden;
  margin: 10px 0 14px;
}
.progress-fill {
  height: 100%;
  background: var(--teal-500);
  transition: width .3s ease;
}

/* ---------- Feed de alertas ---------- */

.feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 560px;
  overflow-y: auto;
}

.feed-item {
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal-500);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  background: var(--bg);
}
.feed-item.sos { border-left-color: var(--alert); background: var(--alert-100); }

.feed-item .meta {
  font-size: var(--fs-s);
  color: var(--ink-soft);
  margin-top: 4px;
}

.feed-item-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.feed-share-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--sage-100);
  font-size: var(--fs-s);
  line-height: 1;
  cursor: pointer;
}
.feed-share-btn:hover { background: var(--teal-500); }

.feed-share-panel {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.chip-btn {
  display: inline-flex;
  align-items: center;
  border: none;
  background: var(--sage-100);
  border-radius: 20px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: var(--fs-s);
  color: var(--ink);
  cursor: pointer;
}
.chip-btn:hover { background: var(--teal-500); color: #fff; }

.feed-empty {
  color: var(--ink-soft);
  font-size: var(--fs-s);
  padding: 20px 0;
  text-align: center;
}

/* ---------- Círculo ---------- */

.member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-m);
}
.member-row:last-child { border-bottom: none; }
.role-tag {
  font-size: var(--fs-s);
  color: var(--ink-soft);
  background: var(--sage-100);
  padding: 2px 8px;
  border-radius: 20px;
}
.contact-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sage-100);
  text-decoration: none;
  font-size: var(--fs-s);
  line-height: 1;
}
.contact-icon-btn:hover { background: var(--teal-500); }

.saved-contacts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
/* Cada chip es dos <button> hermanos (nombre + borrar) adentro de un
   contenedor -- NO un <button> anidado dentro de otro, que es HTML
   inválido y rompe el click en varios navegadores. */
.contact-chip {
  display: inline-flex;
  align-items: center;
  background: var(--sage-100);
  border-radius: 20px;
  overflow: hidden;
}
.contact-chip-name {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-s);
  color: var(--ink);
  padding: 6px 4px 6px 14px;
}
.contact-chip-name:hover { text-decoration: underline; }
.contact-chip-remove {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: var(--fs-m);
  line-height: 1;
  color: var(--ink-soft);
  padding: 6px 12px 6px 4px;
}
.contact-chip-remove:hover { color: var(--alert); }
.add-contact-form {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* ---------- Enlace de acceso personal ("Mi acceso") ---------- */

.my-access-link-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.my-access-link-row .btn {
  flex: none;
  white-space: nowrap;
}
input[type="text"].my-access-link-input {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-s);
  color: var(--ink-soft);
  text-overflow: ellipsis;
  background: var(--sage-100);
}

/* ---------- Aviso de navegador embebido / instalar app ---------- */

.env-banner {
  padding: 12px 28px;
  background: #FBF3E7;
  border-bottom: 1px solid var(--amber);
  font-size: var(--fs-s);
  line-height: 1.45;
}
.env-banner p { margin: 0 0 6px; }
.env-banner-urgent {
  background: var(--alert-100);
  border-bottom-color: var(--alert);
}
.env-banner details { margin-top: 4px; }
.env-banner summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--teal-700);
}
.env-banner details p { margin: 8px 0 0; color: var(--ink-soft); }
.env-banner .small-link { margin-top: 8px; }

.token-callout {
  background: var(--sage-100);
  border-radius: var(--radius-s);
  padding: 12px;
  font-size: var(--fs-s);
  margin-top: 10px;
  /* Corrección 2026-09-27 -- antes era "word-break: break-all" para todo el
     recuadro, y en celulares chicos cortaba cualquier palabra por la mitad
     ("Compartir p / or WhatsAp / p"). Ahora solo se corta lo que no entra
     de ninguna forma (el enlace largo de invitación); las palabras normales
     y los botones pasan de línea entre palabras. */
  overflow-wrap: anywhere;
}
.token-callout a { word-break: break-all; }
.token-callout .btn { overflow-wrap: normal; word-break: normal; text-align: center; line-height: 1.25; }
/* Los botones "Compartir por WhatsApp" / "Enviar por correo" eran del mismo
   verde que el recuadro y no parecían botones. */
.token-callout .btn-secondary { background: var(--surface); border: 1px solid var(--line); }

.join-code-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 14px;
  text-align: center;
}
.join-code-value {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--teal-900);
  margin: 2px 0 8px;
}
body.accessible-mode .join-code-value { font-size: 38px; }

.env-steps {
  background: rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-s);
  padding: 14px 16px;
  margin: 12px 0;
}
.env-steps-title {
  font-weight: 650;
  font-size: var(--fs-l);
  margin: 0 0 8px;
}
.env-step {
  font-size: var(--fs-m);
  line-height: 1.4;
  margin: 8px 0;
}
body.accessible-mode .env-steps-title { font-size: 19px; }
body.accessible-mode .env-step { font-size: 18px; }

.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.tab-btn {
  border: none;
  background: none;
  padding: 10px 4px;
  margin-right: 18px;
  font-size: var(--fs-m);
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
/* Corrección 2026-09-27 -- en celulares de 360 px la fila de pestañas
   (Círculo / Ubicación en vivo / Alertas / Historial) se pasaba 8 px del
   ancho de la pantalla y la página se podía mover de costado. */
.tab-btn:last-child { margin-right: 0; }
@media (max-width: 380px) { .tab-btn { margin-right: 8px; } }
.tab-btn.active {
  color: var(--teal-900);
  font-weight: 650;
  border-bottom-color: var(--teal-700);
}

.stack { display: flex; flex-direction: column; gap: 18px; }
.muted { color: var(--ink-soft); font-size: var(--fs-s); }

/* ---------- Mapa del trayecto ---------- */

.trip-map {
  height: 220px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  margin: 14px 0;
  z-index: 0;
}
.map-pin { font-size: 22px; line-height: 1; text-align: center; }
/* Corrección 2026-09-19 -- 🏠/📍 pasaron a ser SVG propios (ver ICONS en
   app.js); estas reglas los centran, les dan sombra para que se distingan
   de cualquier fondo de mapa, y los pintan de un color distinto según sean
   el destino (fijo) o la posición en vivo (la que se mueve). */
.map-pin svg { display: block; margin: 0 auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.map-pin-dest svg { color: var(--teal-900); }
.map-pin-me svg { color: var(--teal-500); }
/* Corrección 2026-09-21 -- pedido de Charles: en la vista satélite el verde
   de los pines de arriba se pierde contra el verde de la vegetación real de
   la imagen satelital (cuesta verlos). Acá SÍ conviene un color que no se
   confunda con el paisaje -- se reusa --alert (el mismo rojo del botón SOS)
   en vez de un color nuevo. La clase "map-style-satellite" la pone
   addBaseTileLayer() en app.js sobre el contenedor de cada mapa cuando el
   estilo activo es "satellite" (y la saca cuando se vuelve a "street"). */
.map-style-satellite .map-pin-dest svg,
.map-style-satellite .map-pin-me svg { color: var(--alert); }

/* Íconos SVG propios del feed de alertas y de las tarjetas de estado
   (eventIconHtml en app.js) -- alinearlos con el texto que los acompaña. */
.event-icon svg, .status-line svg { vertical-align: -3px; margin-right: 2px; }

/* ---------- Modo accesible (texto y controles más grandes) ---------- */

body.accessible-mode { font-size: 19px; }
body.accessible-mode .hero h1 { font-size: 42px; }
body.accessible-mode .hero p { font-size: 19px; }
body.accessible-mode .btn { font-size: 19px; padding: 16px 22px; }
body.accessible-mode .sos-button { font-size: 26px; padding: 32px; }
body.accessible-mode .ghost-btn { font-size: 16px; padding: 10px 16px; }
body.accessible-mode .small-link { font-size: 17px; }
body.accessible-mode .tab-btn { font-size: 19px; padding: 14px 4px; }
body.accessible-mode input[type="text"],
body.accessible-mode input[type="number"],
body.accessible-mode input[type="tel"],
body.accessible-mode input[type="email"],
body.accessible-mode select { font-size: 19px; padding: 14px 14px; }
body.accessible-mode label { font-size: 16px; }
body.accessible-mode .status-line { font-size: 18px; padding: 16px 16px; }
body.accessible-mode .feed-item { font-size: 17px; }
body.accessible-mode .feed-share-btn { width: 38px; height: 38px; font-size: 18px; }
body.accessible-mode .identity-pill { font-size: 16px; }
body.accessible-mode .brand-name { font-size: 22px; }

/* ---------- pantalla de carga (index.html) ----------
   Corrección 2026-09-25 -- se ve apenas se abre la app, hasta que app.js
   reemplaza el contenido de #app con la primera pantalla real. Mismo diseño
   que las imágenes de inicio de iPhone (icons/splash/). */
.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 20vh;
  background: var(--teal-700);
  color: #FFFFFF;
  font-family: var(--font);
  text-align: center;
}
.boot-splash-mark {
  width: 30vw;
  max-width: 140px;
  aspect-ratio: 1 / 1;
  border-radius: 22%;
  background: var(--teal-500);
  color: var(--sage-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: min(12.6vw, 59px);
}
.boot-splash-name {
  margin-top: 7vw;
  font-weight: 700;
  font-size: min(7.5vw, 34px);
}
.boot-splash-tagline {
  margin-top: 2.5vw;
  font-size: min(4.2vw, 19px);
  color: var(--sage-100);
}