/* Expediciones — misma familia visual que AndesForecast (paleta, tipografía del sistema, oscuro automático). */
:root {
  --page: #f9f9f7; --surface-1: #fcfcfb; --surface-2: #f2f1ec; --text-primary: #0b0b0b; --text-secondary: #52514e;
  --muted: #898781; --grid: #e1e0d9; --baseline: #c3c2b7; --border: rgba(11,11,11,.10);
  --accent: #104281; --accent-soft: #e6eef8; --danger: #A32D2D; --danger-soft: #fbeaea;
  --ok: #2f7d32; --ok-soft: #e8f3e8; --warn: #a06200; --warn-soft: #fbf1dc;
  --cruz: #104281; --overland: #a35a1c;
  --s1: #2a78d6; --s2: #008300; --s3: #e87ba4; --s4: #7c5cd6; --s5: #e08c2f; --s6: #0f9aa8; --s7: #8a6d3b; --s8: #d946ef;
  --radius: 10px; --shadow: 0 1px 2px rgba(0,0,0,.05);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0d0d0d; --surface-1: #1a1a19; --surface-2: #232321; --text-primary: #fff; --text-secondary: #c3c2b7;
    --grid: #2c2c2a; --baseline: #383835; --border: rgba(255,255,255,.10);
    --accent: #86b6ef; --accent-soft: #16263a; --danger: #f09595; --danger-soft: #3a1c1c;
    --ok: #8fd18f; --ok-soft: #17301a; --warn: #f0c070; --warn-soft: #362a12;
    --cruz: #86b6ef; --overland: #f0a868;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); color: var(--text-primary); }
body { font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
h1 { font-size: 20px; font-weight: 650; margin: 0; }
h2 { font-size: 17px; font-weight: 650; margin: 0 0 10px; }
h3 { font-size: 14px; font-weight: 650; margin: 0 0 8px; }
.num, td.n, .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); } .sec { color: var(--text-secondary); }
.hidden { display: none !important; }

/* barra superior */
.top { position: sticky; top: 0; z-index: 900; display: flex; align-items: center; gap: 14px; padding: 10px 18px;
  background: var(--surface-1); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand svg { width: 34px; height: 26px; }
.brand small { display: block; color: var(--muted); font-size: 11.5px; }
.equipos { display: flex; gap: 4px; background: var(--surface-2); padding: 3px; border-radius: 999px; }
.equipos button { border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  color: var(--text-secondary); font: inherit; font-weight: 550; }
.equipos button.on { background: var(--surface-1); color: var(--text-primary); box-shadow: var(--shadow); }
.equipos button.on[data-eq="cruzdelsur"] { color: var(--cruz); }
.equipos button.on[data-eq="andesoverland"] { color: var(--overland); }
.top .sp { flex: 1; }
.usr { color: var(--text-secondary); font-size: 13px; display: flex; gap: 10px; align-items: center; }

main { max-width: 1240px; margin: 0 auto; padding: 18px; }
.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.kpi { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.kpi b { display: block; font-size: 22px; font-weight: 650; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.kpi span { color: var(--muted); font-size: 12px; }

/* botones y formularios */
button, .btn { font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-1);
  color: var(--text-primary); padding: 7px 12px; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
button:hover, .btn:hover { border-color: var(--baseline); }
button.pri, .btn.pri { background: var(--accent); color: var(--surface-1); border-color: var(--accent); font-weight: 600; }
button.del { color: var(--danger); }
button.sm { padding: 3px 8px; font-size: 12.5px; }
button:disabled { opacity: .55; cursor: default; }
input, select, textarea { font: inherit; color: var(--text-primary); background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 9px; width: 100%; }
textarea { min-height: 70px; resize: vertical; }
label { display: block; font-size: 12.5px; color: var(--text-secondary); margin: 8px 0 3px; font-weight: 550; }
.row { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 120px; }
.row > .fit { flex: 0 0 auto; min-width: 0; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* pestañas */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 14px 0 16px; overflow-x: auto; }
.tabs a { padding: 9px 13px; text-decoration: none; color: var(--text-secondary); border-bottom: 2px solid transparent;
  white-space: nowrap; font-weight: 550; }
.tabs a.on { color: var(--text-primary); border-bottom-color: var(--accent); }
.cab { display: flex; justify-content: space-between; align-items: start; gap: 12px; flex-wrap: wrap; }
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2);
  color: var(--text-secondary); }
.chip.cruzdelsur { background: var(--accent-soft); color: var(--cruz); }
.chip.andesoverland { background: var(--warn-soft); color: var(--overland); }
.chip.ok, .apto { background: var(--ok-soft); color: var(--ok); }
.chip.warn, .marginal { background: var(--warn-soft); color: var(--warn); }
.chip.bad, .no-apto { background: var(--danger-soft); color: var(--danger); }

/* tablas */
.tw { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--grid); vertical-align: top; }
th { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
td.n, th.n { text-align: right; white-space: nowrap; }
tr.grupo td { background: var(--surface-2); font-weight: 650; font-size: 12.5px; color: var(--text-secondary); }
td input, td select { padding: 4px 6px; }

/* lista de expediciones */
.exp { display: block; text-decoration: none; color: inherit; }
.exp:hover { border-color: var(--baseline); }
.exp .meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--text-secondary); font-size: 13px; margin-top: 6px; }

/* mapa y perfil */
#mapa { height: 460px; border-radius: var(--radius); border: 1px solid var(--border); }
.perfil svg { width: 100%; height: 170px; display: block; }
.perfil .ax { stroke: var(--grid); }
.perfil text { fill: var(--muted); font-size: 10px; font-family: ui-monospace, Menlo, monospace; }
.leyenda { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); }
.leyenda i { display: inline-block; width: 12px; height: 4px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.wp-ico { background: var(--surface-1); border: 2px solid var(--accent); border-radius: 50%; width: 12px !important; height: 12px !important; }
.wp-ico.camp { border-color: var(--ok); } .wp-ico.paso { border-color: var(--danger); } .wp-ico.ref { border-color: var(--s5); }

/* clima */
.cl td, .cl th { text-align: center; padding: 5px 4px; font-size: 12.5px; }
.cl th:first-child, .cl td:first-child { text-align: left; }
.cl .est { font-weight: 650; border-radius: 6px; padding: 3px 4px; }
.barra { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.barra > div { height: 100%; background: var(--accent); }
.barra.warn > div { background: var(--warn); } .barra.bad > div { background: var(--danger); }

/* login */
.login { max-width: 400px; margin: 9vh auto; }
.login .card { padding: 24px; }
.login h1 { margin-bottom: 4px; }
.err { color: var(--danger); background: var(--danger-soft); padding: 8px 10px; border-radius: 8px; margin-top: 10px; font-size: 13px; }
.okmsg { color: var(--ok); background: var(--ok-soft); padding: 8px 10px; border-radius: 8px; margin-top: 10px; font-size: 13px; }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1200; display: flex; align-items: start; justify-content: center;
  padding: 6vh 14px; overflow-y: auto; }
.modal .card { width: min(640px, 100%); }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--text-primary); color: var(--page);
  padding: 9px 16px; border-radius: 999px; z-index: 1300; font-size: 13px; }
.pie { text-align: center; color: var(--muted); font-size: 12px; padding: 26px 0 30px; }
.pie img { height: 34px; opacity: .85; display: block; margin: 0 auto 6px; }

/* hoja imprimible para el Parque */
.hoja { background: #fff; color: #000; max-width: 860px; margin: 0 auto; padding: 28px 34px; }
.hoja h1 { font-size: 20px; } .hoja h2 { font-size: 15px; border-bottom: 1px solid #999; padding-bottom: 3px; margin-top: 18px; }
.hoja table th, .hoja table td { border: 1px solid #bbb; color: #000; font-size: 12px; padding: 4px 6px; }
.hoja th { color: #333; background: #f1f1f1; }
@media print {
  .top, .tabs, .noprint, .pie { display: none !important; }
  main { padding: 0; max-width: none; } body { background: #fff; }
  .hoja { padding: 0; }
}
@media (max-width: 720px) {
  .top { flex-wrap: wrap; padding: 8px 12px; } main { padding: 12px; } #mapa { height: 340px; }
  .brand small { display: none; }
}