/* ============================================================
   TEMA RESCATE  ──  se carga DESPUÉS de estilos.css y editor.css
   Sobrescribe la paleta (naranja de urgencia) y añade las
   secciones propias del cartel de rescate.
   ============================================================ */

:root{
  --acento:        #e8590c;   /* naranja (urgencia) */
  --acento-2:      #1971c2;   /* azul (banda de contacto) */
  --primary:       #e8590c;
  --primary-tint:  #fd7e14;
  --primary-dark:  #c44a08;
  --primary-soft:  #fff0e6;
}

/* Foto del lugar más baja: la lista de necesidades es protagonista */
.foto-persona{ flex:0 0 520px; height:520px; }

/* ---------- Bloque de necesidades ---------- */
.necesidad__lista{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:4px;
}
.necesidad__item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:2px solid var(--acento);
  border-radius:12px;
  padding:8px 16px;
  font-family:var(--fuente);
  font-weight:700;
  font-size:30px;
  text-transform:uppercase;
  color:var(--tinta);
}
.necesidad__item .material-symbols-rounded{ color:var(--acento); font-size:34px; }
.necesidad__detalle{
  font-weight:400;
  font-size:30px;
  line-height:1.25;
  color:var(--tinta);
  margin-top:6px;
}
.necesidad__meta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; }
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--fuente);
  font-weight:700;
  font-size:26px;
  text-transform:uppercase;
  background:#fff;
  border:1px solid var(--linea);
  border-radius:999px;
  padding:6px 18px;
  color:var(--tinta);
}
.chip b{ color:var(--etiqueta); font-weight:500; }
.chip--urg{ color:#fff; background:var(--acento); border-color:var(--acento); }
.chip--urg b{ color:#ffe9dd; }

/* ---------- Ubicación + coordenadas ---------- */
.ubic__dir{
  font-weight:400;
  font-size:30px;
  line-height:1.25;
  color:var(--tinta);
}
.coordenadas{
  font-family:var(--fuente);
  font-weight:700;
  font-size:30px;
  letter-spacing:.5px;
  color:var(--acento);
  margin-top:8px;
}
.coordenadas b{ color:var(--etiqueta); font-weight:500; }

/* Título del cartel de rescate (texto más largo) */
.cartel__titulo{ font-size:58px; letter-spacing:4px; }

/* Campo <select> (urgencia) con el mismo look Ionic */
.field select{
  width:100%; min-width:0; height:58px;
  padding:22px 14px 8px 48px;
  font-family:var(--fuente); font-size:16px; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:12px;
  outline:none; -webkit-appearance:none; appearance:none; cursor:pointer;
}
.field select:focus{ border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); }
.field select:focus + label{ color:var(--primary); }
.field select:focus ~ .field__icon{ color:var(--primary); }

/* Selector de idioma del cartel (paso 3) */
.idioma-toggle{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:10px; max-width:600px; margin:18px auto 0;
}
.idioma-toggle__lbl{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:600; color:var(--muted);
}
.idioma-toggle__lbl .material-symbols-rounded{ font-size:18px; color:var(--primary); }
.idioma-btn{
  font-family:var(--fuente); font-size:14px; font-weight:600;
  padding:8px 18px; border:1.5px solid var(--line); border-radius:999px;
  background:#fff; color:var(--ink); cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.idioma-btn:hover{ border-color:var(--primary); color:var(--primary); }
.idioma-btn.activo{ background:var(--primary); border-color:var(--primary); color:#fff; }

/* Última señal de vida (cartel) */
.senal-vida{
  display:flex; align-items:center; gap:10px;
  font-family:var(--fuente); font-weight:700; font-size:30px;
  text-transform:uppercase; color:var(--acento); margin-top:10px;
}
.senal-vida .material-symbols-rounded{ font-size:34px; color:var(--acento); }
.senal-vida b{ color:var(--etiqueta); font-weight:500; }
.senal-vida span:last-child{ color:var(--tinta); }

/* "hace X" junto a la última señal de vida */
.senal-hace{ text-transform:none; font-weight:500; color:var(--tinta-suave); }