/* Cáscara de la app (Encargo 2). Estilo del mapa de Mi Perfil. */
:root{
  --fondo:#F5F1E7; --papel:#FFFFFF; --papel-suave:#F0EDE4;
  --texto:#1C1A17; --texto-suave:#7A756B; --texto-tenue:#A8A399;
  --borde:#D9D4C7; --borde-suave:#EDE8DC;
  --naranja:#E8940C; --naranja-oscuro:#C0790A; --amarillo:#EED202;
  --barra:#2B2724; --barra-activa:#4C4222; --verde:#2E7D52; --rojo:#B3261E;
  --titulos:"Archivo","Arial Narrow",Arial,sans-serif;
  --texto-fuente:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",Consolas,"Courier New",monospace;
  --alto-barra:76px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100vh;min-height:100dvh;overflow:visible}
#app{transform:none;filter:none;will-change:auto;overflow:visible}
/* Encargo 6D (arreglo): la app es un marco quieto del tamaño de la pantalla (solo index.html, que lleva class="marco").
   La página no se desplaza nunca ni rebota. Dentro, en columna: la zona de contenido (#app), que es lo único que se
   desplaza, y debajo la barra, como una pieza más del marco. Sin position:fixed en la barra y sin JavaScript. */
html.marco,html.marco body{height:100%;min-height:0;overflow:hidden;overscroll-behavior:none}
html.marco body{position:fixed;inset:0;display:flex;flex-direction:column}
html.marco #cargando{flex:1 1 auto}
html.marco #app{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;-webkit-overflow-scrolling:touch}
html.marco .barra{position:static;flex:none;width:auto}
html.marco .contenido{padding-bottom:28px}
body{background:var(--fondo);color:var(--texto);font-family:var(--texto-fuente);font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2{font-family:var(--titulos);margin:0;line-height:1.1}
p{margin:0}

.cargando{padding:40vh 24px 0;text-align:center;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave)}

/* Relleno inferior = altura de la barra (+ hueco del iPhone) para que nada quede escondido debajo */
.contenido{max-width:640px;margin:0 auto;padding:28px 20px;padding-bottom:var(--alto-barra);padding-bottom:calc(var(--alto-barra) + env(safe-area-inset-bottom))}
.pantalla h1{font-size:34px;font-weight:700;margin-bottom:18px}
.proximamente{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave);margin-top:8px}

/* Bloque Mi ficha */
.bloque{background:var(--fondo);border:1.5px solid var(--borde);border-radius:16px;padding:22px 18px 18px;margin:4px 0 28px}
.bloque h2{font-size:24px;font-weight:700}
.bloque .sub{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--texto-suave);margin:6px 0 16px}

.tarjeta-persona{position:relative;display:flex;align-items:center;gap:16px;background:var(--papel);border:1px solid var(--borde-suave);padding:16px 18px;margin-bottom:14px}
.tarjeta-persona::before,.tarjeta-persona::after{content:"";position:absolute;width:16px;height:16px;border:2.5px solid var(--naranja)}
.tarjeta-persona::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.tarjeta-persona::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.avatar{flex:none;width:56px;height:56px;border-radius:50%;background:var(--amarillo);color:var(--texto);display:flex;align-items:center;justify-content:center;font-family:var(--titulos);font-weight:700;font-size:20px;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.nombre{font-family:var(--titulos);font-weight:700;font-size:20px}
.nota{font-family:var(--mono);font-size:11px;color:var(--texto-suave);margin-top:4px}

.dato{position:relative;display:flex;flex-direction:column;gap:2px;background:var(--papel);border:1px solid var(--borde-suave);padding:12px 16px;margin-bottom:10px;min-height:60px;justify-content:center}
.dato.identidad{background:var(--papel-suave);border-color:var(--borde)}
.etiqueta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave)}
.valor{font-size:19px;color:var(--texto);word-break:break-word}
.dato:not(.identidad) .valor:empty::before{content:"—"}
.marca-identidad{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-suave)}
.dato.identidad .valor{padding-right:108px}

.suscripcion{margin-top:14px;padding:12px 14px;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;background:var(--papel);border:1px solid var(--borde-suave);color:var(--texto-suave)}
.suscripcion.activa{background:#FCF1D8;border-color:#F3DDAE;color:var(--naranja-oscuro)}

.salir{margin-top:48px;text-align:center}
.salir a{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave);text-decoration:underline;text-underline-offset:4px;padding:12px;display:inline-block}

/* Barra fija al borde inferior de la ventana, respetando el hueco del iPhone (Safari) */
.barra{position:fixed;left:0;right:0;bottom:0;width:100%;box-sizing:border-box;
  min-height:var(--alto-barra);padding:8px 12px;padding-bottom:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom));
  background:var(--barra);border-radius:18px 18px 0 0;display:flex;align-items:center;justify-content:space-around;
  box-shadow:0 10px 30px rgba(28,26,23,.35);z-index:30}
.barra .pestana{appearance:none;border:0;background:transparent;cursor:pointer;flex:1;min-height:56px;border-radius:12px;padding:6px 4px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--texto-tenue);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;transition:background .15s,color .15s}
.barra .pestana .icono{font-size:22px;line-height:1;font-family:var(--mono)}
.barra .pestana.activa{background:var(--barra-activa);color:var(--amarillo)}
.barra .pestana:focus-visible{outline:2px solid var(--amarillo);outline-offset:2px}

@media (min-width:480px){
  .barra .pestana{font-size:11px}
}
@media (max-width:479px){
  .barra .pestana{font-size:9px;letter-spacing:.04em}
  .marca-identidad{position:static;transform:none;order:-1;margin-bottom:2px}
  .dato.identidad .valor{padding-right:0}
}

/* Encargo 6C: interruptor "Avisos en el móvil" en Mi Perfil */
.fila-interruptor{display:flex;justify-content:space-between;align-items:center;gap:16px}
.fila-interruptor h2{margin:0}
.fila-interruptor .sub{margin-top:6px}