/* Estilo deeagonal (como finanzas y deeagonal.com; guía en deeagonal_nuxt_PORTFOLIO/design-system/guide.md).
   Mosaico: losetas de 8 px separadas por juntas lima de 4 px. Panel = loseta gris oscuro; mapa = otra loseta.
   Solo lima + neutros, salvo el código de los pines (decisión de Daniel): estancia = naranja, de paso = amarillo,
   por visitar = verde, favorito = corazón rojo. Títulos, etiquetas y botones en minúscula. Sin degradados ni emojis. */
:root {
  --frame: #ddfaa7;      /* junta / fondo de página (lime-200/90 sobre blanco) */
  --lime-50: #f7fee7;
  --lime-100: #ecfccb;
  --lime-200: #d9f99d;   /* el lima de la marca: acento sobre oscuro */
  --lime-300: #bef264;   /* foco, hover */
  --lime-500: #84cc16;   /* puntos y marcadores */
  --lime-600: #65a30d;   /* acento sobre claro */
  --white: #ffffff;
  --slate-50: #f8fafc;
  --slate-200: #e2e8f0;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-600: #525252;
  --tile-dark: #404040;  /* neutral-700 */
  --ink: #111827;        /* gray-900 */
  /* Código de los pines (paleta de Tailwind) */
  --stay: #f97316;       /* orange-500: estancia (naranja, para no confundirse con el corazón rojo) */
  --transit: #facc15;    /* yellow-400: de paso */
  --wish: #22c55e;       /* green-500: por visitar */
  --fav: #dc2626;        /* red-600: corazón de favorito */
  --veil: rgba(255, 255, 255, .08);
  --veil-line: rgba(255, 255, 255, .14);
  --seam: 4px;
  --r-tile: 8px;
  --r-card: 12px;
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);
  --f-display: "Comfortaa", ui-rounded, system-ui, sans-serif;
  --f-body: "Nunito Sans", system-ui, -apple-system, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* que ningún display (p. ej. .row) pise el atributo hidden */
html, body { height: 100%; margin: 0; }
body { font: 15px/1.5 var(--f-body); background: var(--frame); color: var(--slate-800); overflow: hidden; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Voz de la marca: todo lo que se pulsa o se etiqueta va en Comfortaa y en minúscula. */
h1, h2, h3, button, label, .btn, #tabs, #stats span { font-family: var(--f-display); text-transform: lowercase; }
#editName { text-transform: none; } /* nombre propio del lugar */
.mono { font-family: var(--f-mono); font-size: .85em; }
:focus-visible { outline: 2px solid var(--lime-300); outline-offset: 2px; }

/* ---------- Mosaico ---------- */
#app { position: fixed; inset: 0; }
#map { position: absolute; inset: var(--seam); border-radius: var(--r-tile); overflow: hidden; background: var(--slate-200); }
/* Mapa en gris (Esri Light Gray, más gris todavía): los pines son el único color. */
#map .leaflet-tile-pane { filter: grayscale(1); }
.leaflet-container { font-family: var(--f-body); }
.leaflet-bar { border: 0 !important; box-shadow: var(--shadow-md) !important; border-radius: var(--r-tile) !important; overflow: hidden; }
.leaflet-bar a { color: var(--slate-800) !important; font-family: var(--f-display); }
.leaflet-bar a:hover { background: var(--lime-100) !important; }
.leaflet-control-attribution { font-size: 10px; border-radius: 4px 0 0 0; }

/* ---------- Búsqueda (loseta blanca flotante) ---------- */
#topbar {
  position: absolute; z-index: 1100; /* por encima de los controles de Leaflet (1000): los resultados tapan el zoom */
  top: calc(var(--seam) + max(10px, env(safe-area-inset-top))); left: 14px; right: 14px;
  max-width: 460px;
}
/* El zoom va justo debajo de la barra de búsqueda (≈50 px de alto) para no taparla. */
.leaflet-top .leaflet-control-zoom { margin-top: calc(max(10px, env(safe-area-inset-top)) + 58px); }
#searchForm { display: flex; gap: 6px; background: var(--white); border-radius: var(--r-tile); padding: 5px; box-shadow: var(--shadow-md); }
#searchInput { flex: 1; min-width: 0; border: 0; background: transparent; padding: 9px 10px; outline: none; color: var(--slate-800); }
#searchInput::placeholder { color: var(--slate-400); }
#searchForm button { border: 0; background: var(--slate-900); color: var(--white); border-radius: 6px; padding: 0 16px; font-weight: 700; cursor: pointer; transition: background .3s, color .3s; }
#searchForm button:hover { background: var(--ink); color: var(--lime-200); }
#searchResults { list-style: none; margin: 6px 0 0; padding: 4px; background: var(--white); border-radius: var(--r-tile); box-shadow: var(--shadow-md); max-height: 40vh; overflow: auto; }
#searchResults li { padding: 9px 10px; border-radius: 6px; cursor: pointer; font-weight: 600; }
#searchResults li:hover, #searchResults li:focus { background: var(--lime-50); outline: none; }
#searchResults small { display: block; color: var(--slate-500); font-weight: 400; }
#searchResults .none { cursor: default; color: var(--slate-500); font-weight: 400; }

/* ---------- Panel (loseta gris oscuro) ---------- */
#panel {
  position: absolute; z-index: 700; background: var(--tile-dark); color: var(--neutral-200);
  display: flex; flex-direction: column; overflow: hidden;
  left: var(--seam); right: var(--seam); bottom: var(--seam);
  height: 46vh; max-height: calc(100% - 84px);
  border-radius: var(--r-tile); padding-bottom: env(safe-area-inset-bottom);
  transition: height .2s ease;
}
#panel.tall { height: 86vh; }
#grip { border: 0; background: none; padding: 8px; cursor: pointer; display: grid; place-items: center; }
#grip span { width: 40px; height: 4px; border-radius: 2px; background: var(--veil-line); }
@media (min-width: 760px) {
  #panel { top: var(--seam); right: auto; width: 380px; height: auto; max-height: none; padding-top: env(safe-area-inset-top); }
  #panel.tall { height: auto; }
  #grip { display: none; }
  #map { left: calc(380px + 2 * var(--seam)); }
  #topbar { left: calc(380px + 2 * var(--seam) + 10px); }
}

/* Marca: logo dp + logotipo en lima, como la barra lateral de finanzas */
#brand { display: flex; align-items: center; gap: 10px; padding: 6px 16px 12px; }
@media (min-width: 760px) { #brand { padding-top: 18px; } }
#brand img { width: 30px; height: 30px; border-radius: 4px; }
#brand .word { font: 700 19px/1 var(--f-display); color: var(--lime-200); letter-spacing: -.01em; }
#brand .path { font: 12px/1 var(--f-mono); color: var(--neutral-400); margin-left: auto; }

/* Cifras: tarjetas internas en gris medio, como "tu mes" de finanzas */
#stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--seam); padding: 0 12px 12px; }
#stats div { background: var(--neutral-600); border-radius: var(--r-card); padding: 10px 8px 8px; min-width: 0; }
#stats b { display: block; font: 700 22px/1 var(--f-display); color: var(--lime-200); }
#stats b small { font-size: 12px; font-weight: 700; color: var(--neutral-400); margin-left: 1px; }
#stats b span { display: inline; margin: 0; font: inherit; color: inherit; letter-spacing: 0; text-transform: none; }
#stats span { display: block; margin-top: 5px; font-size: 10.5px; letter-spacing: .02em; color: var(--neutral-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--veil-line); }
#tabs button { border: 0; background: none; padding: 10px 8px; cursor: pointer; color: var(--neutral-400); font-weight: 700; font-size: 13px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s; }
#tabs button:hover { color: var(--neutral-200); }
#tabs button[aria-selected="true"] { color: var(--lime-200); border-bottom-color: var(--lime-200); }

#listView, #toolsView { flex: 1; overflow: auto; padding: 8px 12px 16px; -webkit-overflow-scrolling: touch; }
#placeList { list-style: none; margin: 0; padding: 0; }
.place { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--veil-line); cursor: pointer; border-radius: 6px; }
.place:hover { background: var(--veil); }
.place .txt { flex: 1; min-width: 0; }
.place .name { font-weight: 700; color: var(--neutral-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place .sub { font-size: 12.5px; color: var(--neutral-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place .edit { border: 1px solid var(--veil-line); background: none; border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--neutral-300); transition: color .2s, border-color .2s; }
.place .edit:hover { color: var(--lime-200); border-color: var(--lime-200); }
#emptyMsg { color: var(--neutral-300); padding: 20px 6px; }

/* Punto de la lista y de la leyenda: mismo código que los marcadores del mapa */
.dot { flex: none; width: 14px; height: 14px; margin: 0 3px; border-radius: 50%; background: var(--stay); } /* 3 px a cada lado: mismo ancho que el corazón (20 px) */
.dot.transit { background: var(--transit); }
.dot.wish { background: var(--wish); }
.dot.fav { width: 20px; height: 20px; margin: 0; background: none; display: grid; place-items: center; font-size: 20px; color: var(--fav); }
.dot svg, .pin svg, .heart svg { display: block; }

/* Mundo recorrido (como el contador de TripAdvisor): barra lima sobre la loseta oscura */
#world { margin: 0 12px 12px; background: var(--neutral-600); border-radius: var(--r-card); padding: 10px 12px 12px; cursor: help; }
#world .head { display: flex; align-items: baseline; gap: 8px; font-family: var(--f-display); }
#world b { font-size: 22px; line-height: 1; color: var(--lime-200); }
#world span { font-size: 12px; font-weight: 700; color: var(--neutral-300); text-transform: lowercase; }
#world .bar { margin-top: 8px; height: 6px; border-radius: 3px; background: var(--veil-line); overflow: hidden; }
#world .bar i { display: block; height: 100%; width: 0; background: var(--lime-200); border-radius: 3px; transition: width .6s cubic-bezier(.16, 1, .3, 1); }
@media (prefers-reduced-motion: reduce) { #world .bar i { transition: none; } }

#legend { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 0; padding: 0 16px 10px; font: 700 11px/1 var(--f-display); color: var(--neutral-300); }
#legend li { display: flex; align-items: center; gap: 4px; }
#legend .dot { width: 10px; height: 10px; margin: 0; }
#legend .dot.fav { width: 14px; height: 14px; font-size: 14px; }

/* Herramientas (sobre la loseta oscura) */
#toolsView h2 { font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--lime-200); margin: 18px 0 6px; }
#toolsView h2:first-child { margin-top: 8px; }
.hint { color: var(--neutral-300); font-size: 13px; margin: 4px 0 10px; }
#panel .mono { color: var(--lime-200); }
/* Los campos mantienen fondo claro: texto en tinta, nunca heredado de la loseta. */
textarea, input[type="text"], select { width: 100%; padding: 9px 10px; border: 1px solid var(--slate-200); border-radius: 6px; background: var(--slate-50); color: var(--slate-800); }
textarea::placeholder, input::placeholder { color: var(--slate-400); }
.row { display: flex; gap: 8px; margin: 8px 0; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

/* Botones. Sobre claro: primario slate-900. Sobre la loseta oscura: primario lima. */
button.primary, .btn, #toolsView button, dialog button, .leaflet-popup button { border: 1px solid var(--slate-200); background: var(--white); color: var(--slate-800); border-radius: 6px; padding: 9px 13px; cursor: pointer; font-weight: 700; font-size: 13px; white-space: nowrap; transition: background .3s, color .3s, border-color .3s; }
button.primary { background: var(--slate-900); border-color: var(--slate-900); color: var(--white); }
button.primary:hover { background: var(--ink); color: var(--lime-200); }
#panel .btn, #panel button:not(.primary):not(.edit):not([role="tab"]):not(#grip) { background: var(--veil); border-color: var(--veil-line); color: var(--neutral-100); }
#panel .btn:hover, #panel button:not(.primary):not(.edit):not([role="tab"]):not(#grip):hover { border-color: var(--lime-200); color: var(--lime-200); }
#panel button.primary, #login button.primary { background: var(--lime-200); border-color: var(--lime-200); color: var(--ink); }
#panel button.primary:hover, #login button.primary:hover { background: var(--lime-300); border-color: var(--lime-300); color: var(--ink); }
button.danger { color: var(--slate-800); }
button.danger[data-armed="1"] { background: var(--ink); border-color: var(--ink); color: var(--lime-200); }
.btn { display: inline-block; }
button:disabled { opacity: .5; cursor: progress; }

#importResults { list-style: none; margin: 8px 0 0; padding: 0; }
#importResults li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 4px; border-bottom: 1px solid var(--veil-line); font-size: 13.5px; color: var(--neutral-100); }
#importResults li.miss { color: var(--neutral-400); }
#importResults small { display: block; color: var(--neutral-400); }
#importResults input { margin-top: 3px; accent-color: var(--lime-500); }
#account { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------- Marcadores ---------- */
.pin { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--white); background: var(--stay); box-shadow: 0 1px 4px rgb(0 0 0 / .45); }
.pin.transit { background: var(--transit); }
.pin.wish { background: var(--wish); }
.pin.fav { width: 26px; height: 26px; border: 0; background: none; box-shadow: none; display: grid; place-items: center; font-size: 26px; color: var(--fav); filter: drop-shadow(0 1px 2px rgb(0 0 0 / .5)); }
.leaflet-tooltip { font-family: var(--f-body); font-weight: 700; border-radius: 6px; border: 0; box-shadow: var(--shadow-md); color: var(--slate-800); }
.leaflet-popup-content-wrapper { border-radius: var(--r-tile); box-shadow: var(--shadow-md); }
.leaflet-popup-content { font-family: var(--f-body); }
.leaflet-popup-content strong { font-family: var(--f-display); }
.leaflet-popup-content .sub { color: var(--slate-500); }

/* ---------- Diálogo (tarjeta flotante, como la de contacto) ---------- */
dialog { border: 0; border-radius: 16px; padding: 22px; width: min(420px, calc(100% - 28px)); background: var(--white); color: var(--slate-800); box-shadow: var(--shadow-2xl); }
dialog::backdrop { background: rgb(17 24 39 / .55); }
dialog h3 { font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; }
dialog label { display: block; margin-top: 14px; font-size: 12px; font-weight: 700; color: var(--slate-500); }
dialog label > * { margin-top: 4px; font-family: var(--f-body); }
dialog label.check { display: flex; align-items: center; gap: 8px; color: var(--slate-800); font-size: 14px; cursor: pointer; }
dialog label.check > input { margin: 0; width: 18px; height: 18px; accent-color: var(--lime-500); }
dialog .heart { color: var(--fav); font-size: 18px; }
/* Botones del popup al tocar el mapa: uno por tipo, con su color */
.leaflet-popup .kind-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; }
.leaflet-popup .kind-btn .dot { width: 10px; height: 10px; margin: 0; }
.leaflet-popup .row { flex-wrap: wrap; gap: 6px; }
dialog #editCoords { color: var(--lime-600); margin: 4px 0 0; }

#toast { position: absolute; z-index: 1200; left: 50%; transform: translateX(-50%); top: calc(var(--seam) + max(10px, env(safe-area-inset-top)) + 62px); background: var(--ink); color: var(--lime-200); padding: 9px 14px; border-radius: var(--r-tile); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-md); max-width: calc(100% - 24px); }

/* ---------- Login: loseta oscura sobre el lima ---------- */
#login { position: absolute; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; background: var(--frame); }
#login[hidden] { display: none; }
#login .card { width: min(360px, 100%); background: var(--tile-dark); color: var(--neutral-200); border-radius: var(--r-tile); padding: 32px 24px; text-align: center; }
#login img { width: 64px; height: 64px; border-radius: 6px; }
#login .word { font: 700 15px/1 var(--f-display); color: var(--lime-200); margin: 14px 0 0; }
#login h1 { font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--neutral-100); margin: 10px 0 6px; }
#login .hint { margin-bottom: 18px; }
#login button { width: 100%; padding: 12px; font-size: 14px; }
#loginMsg { color: var(--lime-200); font-size: 13.5px; margin: 12px 0 0; min-height: 1em; }

@media (prefers-reduced-motion: reduce) { #panel, button, #tabs button, .place .edit { transition: none; } }