/* El Chile de las Familias: interfaz sobre el mapa 3D (maqueta cálida, crema + azul marino + dorado) */
:root { --crema: #f8efdc; --tinta: #1d2b4f; --oro: #e2a72e; --madera: #8a5a34; --sombra: 0 6px 24px rgba(60, 40, 10, .18); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #f4ead6; color: var(--tinta);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
#mapa3d { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
a { color: inherit; }
.nota { font-size: .85rem; opacity: .75; margin: .4rem 0; }
.btn, .btn-sec { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 1rem system-ui, sans-serif; padding: .7rem 1.2rem; text-decoration: none; transition: transform .16s ease-out, box-shadow .16s ease-out; }
.btn { background: var(--tinta); color: #fff; box-shadow: var(--sombra); }
.btn-sec { background: #fff; color: var(--tinta); border: 1.5px solid #e2d4b4; }
.btn:active, .btn-sec:active { transform: scale(.97); }

.m-top { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; width: min(560px, 94vw); }
.m-top h1 { margin: 0; font: 800 clamp(1.5rem, 5.5vw, 2.3rem)/1.1 Georgia, "Times New Roman", serif; color: var(--tinta);
  background: linear-gradient(#fbf3df, #f1dfb8); border: 3px solid #c9a46a; border-radius: 14px; padding: .35rem 1rem; box-shadow: var(--sombra); display: inline-block; }
.m-pill { pointer-events: auto; margin: .45rem auto 0; display: inline-block; background: #ffe7a6; border: 2px solid var(--oro); border-radius: 999px; padding: .2rem .9rem; font-weight: 700; font-size: .95rem; }
.m-logo { pointer-events: auto; position: fixed; left: 12px; top: max(12px, env(safe-area-inset-top)); font-weight: 800; text-decoration: none; font-size: .95rem;
  background: rgba(255, 255, 255, .85); padding: .3rem .7rem; border-radius: 999px; box-shadow: var(--sombra); }
.m-logo span:first-child { color: var(--oro); } .m-logo span:last-child { opacity: .6; }

.m-buscar { position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + 110px); left: 50%; transform: translateX(-50%); width: min(420px, 92vw); z-index: 3; }
#buscar { width: 100%; border: 2px solid #e2d4b4; border-radius: 999px; padding: .7rem 1.1rem; font-size: 1rem; background: rgba(255, 255, 255, .95); box-shadow: var(--sombra); color: var(--tinta); }
#buscar:focus { outline: 3px solid #ffd977; }
#resultados { list-style: none; margin: .4rem 0 0; padding: .35rem; background: #fff; border-radius: 16px; box-shadow: var(--sombra); max-height: 50vh; overflow: auto; }
#resultados button { width: 100%; text-align: left; border: 0; background: none; padding: .55rem .7rem; border-radius: 10px; font: 600 1rem system-ui, sans-serif; color: var(--tinta); cursor: pointer; }
#resultados button:hover, #resultados button:focus-visible { background: #fbf1d9; }
#resultados small { font-weight: 400; opacity: .7; }
#resultados .nota { padding: .5rem .7rem; }

#etiquetas { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.et { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; border: 2px solid #f0c75e; background: #fff3cf; color: var(--tinta);
  border-radius: 12px; padding: .2rem .6rem; text-align: center; box-shadow: 0 3px 10px rgba(60, 40, 10, .2); white-space: nowrap; font: inherit; line-height: 1.15; }
.et b { display: block; font-size: .85rem; } .et small { display: block; font-size: .7rem; opacity: .75; }
.et::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 2px; height: 6px; background: #c9a46a; }
.et-fund { background: #ffe39a; border-color: var(--oro); }
.et-sel { background: var(--tinta); color: #fff; border-color: var(--tinta); z-index: 2; } .et-sel small { opacity: .85; }
.et-mon { background: rgba(255, 255, 255, .9); border-color: #d9cdb3; cursor: default; }

.m-panel { position: fixed; z-index: 4; right: 14px; top: 170px; width: min(360px, 92vw); max-height: calc(100vh - 260px); overflow: auto; background: var(--crema);
  border: 3px solid #e2cfa4; border-radius: 20px; padding: 1rem 1.1rem; box-shadow: var(--sombra); animation: entra .22s cubic-bezier(.23, 1, .32, 1); }
@keyframes entra { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.m-panel h2 { margin: .1rem 0 0; font: 800 1.5rem/1.15 Georgia, serif; }
.f-pre { margin: 0; font-weight: 700; color: #a8761a; font-size: .9rem; } .f-com { margin: .1rem 0 .6rem; opacity: .75; }
.f-datos p { margin: .45rem 0; } .f-cuna { background: #fff7e1; border-radius: 12px; padding: .5rem .7rem; }
.f-barra { height: 14px; background: #eadbb9; border-radius: 99px; overflow: hidden; margin: .7rem 0 .3rem; } .f-barra span { display: block; height: 100%; background: var(--oro); border-radius: 99px; }
.f-acc { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 .3rem; }
.f-cerrar { float: right; border: 0; background: #fff; width: 34px; height: 34px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; color: var(--tinta); box-shadow: 0 2px 6px rgba(0, 0, 0, .1); }

.m-rank { position: fixed; z-index: 3; left: 14px; top: 170px; width: min(300px, 80vw); background: rgba(255, 255, 255, .94); border-radius: 18px; box-shadow: var(--sombra); padding: .5rem .9rem; }
.m-rank summary { cursor: pointer; font-weight: 700; padding: .2rem 0; }
.m-rank ol { margin: .3rem 0; padding-left: 1.4rem; }
.m-rank li button { border: 0; background: none; text-align: left; padding: .2rem 0; cursor: pointer; color: var(--tinta); font: inherit; }
.m-rank li span { font-weight: 700; display: block; } .m-rank li small { opacity: .7; }

.m-abajo { position: fixed; z-index: 3; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); text-align: center; width: min(520px, 94vw); }
.m-como { margin-top: .5rem; background: rgba(255, 255, 255, .94); border-radius: 16px; padding: .4rem .9rem; box-shadow: var(--sombra); text-align: left; }
.m-como summary { cursor: pointer; font-weight: 700; text-align: center; } .m-como p { margin: .45rem 0; font-size: .92rem; }

.m-dlg { border: 3px solid #e2cfa4; border-radius: 22px; background: var(--crema); color: var(--tinta); width: min(420px, 92vw); padding: 1.2rem 1.3rem; }
.m-dlg::backdrop { background: rgba(29, 43, 79, .35); }
.m-dlg h2 { margin: 0 0 .2rem; font: 800 1.45rem Georgia, serif; }
.m-dlg label { display: block; font-weight: 600; margin: .7rem 0; }
.m-dlg input, .m-dlg select { display: block; width: 100%; margin-top: .3rem; padding: .65rem .8rem; font-size: 1rem; border: 2px solid #e2d4b4; border-radius: 12px; background: #fff; color: var(--tinta); }
#p-google { margin: .8rem 0; } #p-msg { font-weight: 600; min-height: 1.2em; }

.m-cargando { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; background: #f4ead6; font: 700 1.3rem Georgia, serif; }

@media (max-width: 720px) {
  .m-top h1 { font-size: 1.35rem; } .m-buscar { top: calc(max(10px, env(safe-area-inset-top)) + 92px); }
  .m-logo { display: none; }
  .m-rank { top: auto; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 120px); left: 10px; width: auto; max-width: 70vw; }
  .m-rank:not([open]) { padding: .35rem .8rem; }
  .m-panel { left: 50%; right: auto; transform: translateX(-50%); top: auto; bottom: max(12px, env(safe-area-inset-bottom)); max-height: 58vh; width: 94vw; }
}
@media (prefers-reduced-motion: reduce) { .m-panel { animation: none; } }
.et-com { background: rgba(255, 255, 255, .92); border-color: #d9c7a0; }