/* expediciones.css — /expediciones (lista + crear) y /expedicion (ficha con mapa y hoja). Renglón 13, 25-oct-2026.
   Piel A «pergamino», teléfono primero (390×844): texto ≥ 17 px, toques ≥ 44 px, una hoja inferior y nada de popups.
   Se apoya en aventura.css (tokens, .campo, .grande, .pill3, .chip, [hidden]) y pantalla.css (pantalla completa). */

/* ───────── lista y formulario (/expediciones) ───────── */
body.expediciones{overflow:auto;height:auto;min-height:100%}
.exp-cab{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  padding:calc(8px + env(safe-area-inset-top,0px)) 14px 8px;background:linear-gradient(#eadfc3 88%,rgba(234,223,195,0))}
.exp-cab h1{flex:1;margin:0;font-size:24px}
.exp-cab .atras{text-decoration:none}
.exp-lienzo{padding:0 16px calc(110px + env(safe-area-inset-bottom,0px));max-width:640px;margin:0 auto}
.exp-sello{display:inline-block;font:600 12px/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#7a4b1f;
  background:#f6e3b4;border:1px solid #c9a96a;border-radius:999px;padding:5px 9px;vertical-align:middle}
.exp-sello.ok{color:#2e5e2a;background:#dcebc9;border-color:#8fb57a}
.exp-sello.alerta{color:#8a2a1a;background:#f6d2c2;border-color:#d08a70}

/* una línea por expedición: medalla · título + dato · acción (regla del renglón 14c) */
.exp-lista{list-style:none;margin:0;padding:0}
.exp-lista li{margin:0 0 10px}
.exp-lista a{display:flex;align-items:center;gap:12px;min-height:72px;padding:10px 12px;text-decoration:none;color:inherit;
  background:var(--panel-solid);border:2px solid #4a2e14;border-radius:16px;box-shadow:var(--shadow)}
.exp-lista a:active{transform:translateY(2px)}
.exp-lista .med{flex:0 0 48px;line-height:0}
.exp-lista .tx{flex:1;min-width:0;display:grid;gap:2px}
.exp-lista .tx b{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:18px;line-height:1.2;min-width:0}
.exp-lista .tx b .nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exp-lista .tx b .exp-sello{flex:0 0 auto}
.exp-lista .tx span{font-size:16px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exp-lista .cta{flex:0 0 auto;font-family:var(--font-display);font-size:15px;color:var(--accent);white-space:nowrap}
.exp-vacio{padding:16px;border:2px dashed #b8a076;border-radius:16px;color:var(--muted);text-align:center}

/* formulario de crear */
#crear{margin-top:8px}
.exp-chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.exp-chips::-webkit-scrollbar{display:none}
.exp-chips .chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px}
.exp-chips .chip svg{width:24px;height:24px}
.exp-dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.exp-lugar{display:flex;gap:8px;align-items:center}
.exp-lugar .campo{flex:1;min-width:0}
.exp-lugar .pill3{flex:0 0 auto;min-height:52px}
.exp-nota{font-size:15px;color:var(--muted);margin:6px 0 0}
#crear .grande{margin-top:22px}

/* ───────── ficha (/expedicion) ───────── */
body.expedicion{overflow:hidden;height:100%;background:#0a1030}
body.expedicion #mapa{position:fixed;inset:0}
#narra{position:fixed;left:0;right:0;top:calc(14px + env(safe-area-inset-top,0px));z-index:11;text-align:center;pointer-events:none}
#narra span{display:inline-block;background:rgba(30,20,8,.78);color:#fff6e0;font-size:17px;padding:9px 16px;border-radius:14px;max-width:88vw;backdrop-filter:blur(3px)}
/* `bottom:auto` porque ver-aventura.css fija a #saltar por abajo: con top y bottom a la vez el botón se estiraba de arriba abajo (medido 25-oct). */
#saltar{position:fixed;right:max(12px,env(safe-area-inset-right,0px));top:calc(64px + env(safe-area-inset-top,0px));bottom:auto;z-index:13;
  appearance:none;border:2px solid #4a2e14;background:rgba(247,238,217,.92);color:#33230f;font:inherit;font-size:16px;border-radius:12px;min-height:44px;padding:0 14px;cursor:pointer}

/* Etiquetas sobre el relieve: campamentos, días, fotos de muestra */
.exp-camp{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff6e0;border:2px solid #4a2e14;box-shadow:0 4px 10px rgba(0,0,0,.4);transition:transform .4s cubic-bezier(.2,1.5,.4,1)}
.exp-camp svg{width:28px;height:28px}
.exp-camp.cae{transform:scale(.2);opacity:0}
.exp-etq{font:600 13px/1 system-ui,sans-serif;background:rgba(51,35,15,.85);color:#fff6e0;padding:5px 8px;border-radius:8px;white-space:nowrap;pointer-events:none}
.exp-viajero{width:42px;height:42px;filter:drop-shadow(0 4px 5px rgba(0,0,0,.45))}
.exp-pol{width:84px;background:#fffdf5;padding:5px 5px 16px;border-radius:3px;box-shadow:0 6px 14px rgba(0,0,0,.45);transform:rotate(-5deg)}
.exp-pol i{display:block;aspect-ratio:1;background:repeating-linear-gradient(45deg,#e6d3a8 0 8px,#d9c39a 8px 16px);border-radius:2px}
.exp-pol b{display:block;font:11px/1.1 var(--font-body);color:#5a3a1c;margin-top:3px;text-align:center}

/* La hoja: tres alturas (min · medio · alto), asa con blanco de toque, el único menú de la pantalla. */
#hoja{position:fixed;left:0;right:0;bottom:0;z-index:14;background:var(--panel-solid);border-top:3px solid #4a2e14;border-radius:20px 20px 0 0;
  box-shadow:0 -10px 34px rgba(0,0,0,.4);max-height:56vh;display:flex;flex-direction:column;transition:max-height .28s ease;padding-bottom:env(safe-area-inset-bottom,0px)}
#hoja.alto{max-height:calc(100vh - 52px - env(safe-area-inset-top,0px));max-height:calc(var(--vvh,100vh) - 52px - env(safe-area-inset-top,0px))}
#hoja.min{max-height:128px}
/* el asa es el único control de la hoja: blanco de toque de 44 px (la de ver-aventura.css mide 30 y en una columna flex se encogía a 18) */
#hoja .asa{flex:0 0 44px;height:44px}
#hoja .asa::before{margin-top:19px}
#hoja.min .hoja-nav,#hoja.min .hoja-cuerpo{display:none}
.hoja-enc{display:flex;align-items:center;gap:10px;padding:0 14px 6px}
/* Botón único de salir/regresar: redondo, 48 px, al inicio de la hoja. TODO(14): cambiar por el componente
   de botón único del renglón 14 cuando exista (zona del pulgar, 56 px, menú radial al mantener). */
.volver{flex:0 0 48px;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;border:2px solid #4a2e14;background:var(--panel);
  color:var(--fg);text-decoration:none;font-size:28px;line-height:1;box-shadow:0 2px 0 #4a2e14}
.hoja-enc .tt{flex:1;min-width:0}
.hoja-enc h1{margin:0;font-size:21px;line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hoja-enc p{margin:2px 0 0;font-size:15px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cuenta{flex:0 0 auto;text-align:center;border:2px solid #4a2e14;border-radius:12px;background:#fff6e0;padding:4px 10px;min-width:58px}
.cuenta b{display:block;font-family:var(--font-display);font-size:20px;line-height:1}
.cuenta span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hoja-nav{display:flex;gap:6px;overflow-x:auto;padding:4px 14px 10px;scrollbar-width:none;flex:0 0 auto;border-bottom:1px solid var(--line)}
.hoja-nav::-webkit-scrollbar{display:none}
.hoja-nav .chip{flex:0 0 auto;min-height:44px;font-size:16px;padding:0 13px}
.hoja-cuerpo{overflow:auto;padding:12px 14px 22px;-webkit-overflow-scrolling:touch}
.hoja-cuerpo>section{max-width:640px;margin:0 auto}
.hoja-cuerpo h2{margin:14px 0 8px;font-size:19px}
.hoja-cuerpo h2:first-child{margin-top:2px}

/* piezas de la ficha */
.exp-tarj{border:2px solid #4a2e14;background:#fff6e0;border-radius:16px;padding:12px 14px;margin:0 0 10px;box-shadow:var(--shadow)}
.exp-tarj.suave{background:var(--panel-solid);box-shadow:none}
.exp-tarj p{margin:6px 0 0}
.exp-datos{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:8px 0 0}
.exp-datos li{background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:16px}
.exp-lin{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 0;border-bottom:1px solid var(--line)}
.exp-lin:last-child{border-bottom:0}
.exp-lin .tx{flex:1;min-width:0}
.exp-lin .tx b{display:block;font-size:17px;line-height:1.2}
.exp-lin .tx span{display:block;font-size:15px;color:var(--muted);line-height:1.25}
.exp-lin .acc{flex:0 0 auto;display:flex;gap:6px}
.exp-av{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c,#e6d3a8);border:2px solid #4a2e14;flex:0 0 40px}
.exp-av svg{filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
.exp-avs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.exp-avs .exp-av{width:46px;height:46px;flex-basis:46px}
.exp-avs .exp-av.paso{opacity:.35}
.exp-avs .exp-av.duda{outline:3px dashed #c9a96a;outline-offset:2px}
.mini{appearance:none;border:2px solid #4a2e14;background:var(--panel);color:var(--fg);font:inherit;font-size:15px;border-radius:999px;min-height:44px;min-width:44px;padding:0 12px;cursor:pointer}
.mini[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg)}
.mini.ok[aria-pressed="true"]{background:var(--ok)}
.mini.no[aria-pressed="true"]{background:#8a3a2a}
.exp-copia{width:100%;min-height:118px;font:inherit;font-size:16px;color:var(--fg);background:#fffaec;border:2px solid #4a2e14;border-radius:12px;padding:10px 12px;resize:vertical}

/* ensayo: tabla de días */
.exp-dia{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.exp-dia:last-child{border-bottom:0}
.exp-dia .num{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-size:18px;color:#fff6e0;border:2px solid #4a2e14}
.exp-dia b{font-family:var(--font-display);font-size:17px}
.exp-dia .d{font-size:15px;color:var(--muted);margin:2px 0 0}
.exp-dia .stats{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.exp-dia .stats span{background:var(--chip);border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-size:15px}
.exp-dia .cielo{margin-top:6px;font-size:15px}
.exp-dia .cielo i{font-style:normal;color:var(--muted)}

/* preparar */
.exp-kit .exp-lin .quien{display:flex;gap:4px;flex:0 0 auto}
.exp-kit .exp-lin .quien .exp-av{width:32px;height:32px;flex-basis:32px}
.exp-kit .exp-lin .quien .exp-av svg{width:22px;height:22px}
.falta{color:#8a2a1a;font-weight:600}
.exp-tarea{display:flex;align-items:center;gap:10px;min-height:52px;border-bottom:1px solid var(--line)}
.exp-tarea:last-child{border-bottom:0}
/* La casilla nativa mide 20 px; se esconde y la etiqueta entera (≥ 52 px de alto) es el blanco de toque, con una casilla dibujada. */
.exp-tarea{position:relative}
.exp-tarea input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.exp-tarea label{display:flex;align-items:center;gap:10px;min-height:52px;cursor:pointer}
.exp-tarea label::before{content:"";flex:0 0 28px;width:28px;height:28px;border:2px solid #4a2e14;border-radius:8px;background:#fffaec}
.exp-tarea input:checked+label::before{background:var(--accent);box-shadow:inset 0 0 0 4px #fffaec}
.exp-tarea input:focus-visible+label::before{outline:2px solid var(--accent);outline-offset:2px}
.exp-tarea label{flex:1;min-width:0;font-size:17px}
.exp-tarea label span{flex:1;min-width:0}
.exp-tarea label small{display:block;font-size:14px;color:#8a2a1a}
/* ligas dentro del texto: alto de toque de 44 px sin cambiar cómo se ven */
.hoja-cuerpo p a{display:inline-block;padding:12px 0;margin:-12px 0;color:var(--accent)}
/* el botón de pantalla completa de pantalla.css mide 40 px en teléfono; en estas dos páginas se sube a 44 (sólo aquí, sin tocar el CSS compartido) */
body.expedicion #pc-btn.flotante,body.expediciones #pc-btn.flotante{height:44px;min-width:44px}
.exp-tarea select{font:inherit;font-size:15px;min-height:44px;border:2px solid #4a2e14;border-radius:10px;background:#fffaec;color:var(--fg);padding:0 6px;max-width:124px}
.exp-tarea.hecha label{text-decoration:line-through;color:var(--muted)}
.exp-pres{width:100%;border-collapse:collapse}
.exp-pres td{padding:6px 4px;border-bottom:1px solid var(--line);font-size:16px;vertical-align:middle}
.exp-pres td:last-child{text-align:right;width:118px}
.exp-pres input{width:112px;font:inherit;font-size:17px;text-align:right;border:2px solid #4a2e14;border-radius:10px;background:#fffaec;color:var(--fg);padding:8px 8px;min-height:44px}
.exp-pres .ref{display:block;font-size:13px;color:var(--muted)}
.exp-pres tfoot td{font-family:var(--font-display);border-bottom:0;padding-top:10px}
.exp-chat{display:grid;gap:8px;margin:0 0 10px}
.exp-msg{display:flex;gap:8px;align-items:flex-end}
.exp-msg .exp-av{width:32px;height:32px;flex-basis:32px}
.exp-msg .exp-av svg{width:22px;height:22px}
.exp-msg .glob{background:#fff6e0;border:2px solid #4a2e14;border-radius:14px 14px 14px 4px;padding:8px 12px;font-size:16px;max-width:82%}
.exp-msg .glob small{display:block;font-size:13px;color:var(--muted);margin-bottom:2px}
.exp-msg.mio{flex-direction:row-reverse}
.exp-msg.mio .glob{border-radius:14px 14px 4px 14px;background:#e9d9ad}
.exp-escribe{display:flex;gap:8px}
.exp-escribe .campo{flex:1;min-width:0;min-height:48px;padding:8px 12px}
.exp-escribe .pill3{flex:0 0 auto;min-height:48px}

/* vivir / volver */
.exp-cont{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0}
.exp-cont div{text-align:center;background:#fff6e0;border:2px solid #4a2e14;border-radius:14px;padding:10px 4px}
.exp-cont b{display:block;font-family:var(--font-display);font-size:22px;line-height:1.1}
.exp-cont span{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.exp-ins{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.exp-ins:last-child{border-bottom:0}
.exp-ins svg{flex:0 0 44px;width:44px;height:44px}
.exp-ins.apagada{opacity:.45;filter:grayscale(1)}
.exp-ins b{display:block;font-size:17px}
.exp-ins span{font-size:15px;color:var(--muted)}

.exp-acciones{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}

@media (min-width:900px){
  /* en escritorio la hoja es un panel a la derecha, con el mapa libre a la izquierda */
  #hoja,#hoja.alto,#hoja.min{left:auto;right:16px;bottom:16px;top:calc(16px + env(safe-area-inset-top,0px));width:440px;max-height:none;border:3px solid #4a2e14;border-radius:20px}
  #hoja.min .hoja-nav,#hoja.min .hoja-cuerpo{display:flex}
  #hoja.min .hoja-cuerpo{display:block}
  .asa{display:none}
  .hoja-enc{padding-top:14px}
  #narra{left:0;right:472px}
  #saltar{right:488px}
  body.expedicion .maplibregl-ctrl-bottom-right{right:472px}
  body.expedicion #pc-btn.flotante{right:488px}
}

/* ══ UX familiar (renglón 18, 25-oct-2026) ══ la lista de expediciones y la ficha como listas de iOS: celdas de 1 px
   con chevron a la derecha, cápsulas grises, cabecera con chevron «atrás» sin caja, Cinzel solo en el <h1>. */
body.expediciones,body.expedicion{font-family:var(--ux-font,system-ui)}
.exp-cab h1,.hoja-enc h1{font-family:var(--font-display)}           /* el título de pantalla: Cinzel */
.exp-cab{background:linear-gradient(var(--ux-bg,#eadfc3) 88%,rgba(234,223,195,0))}
.exp-lista a{border:1px solid var(--ux-sep,var(--line));background:var(--ux-card,var(--panel-solid));border-radius:var(--ux-radio,12px);box-shadow:none;min-height:64px}
.exp-lista a:active{transform:none}
.exp-lista .tx b{font-family:var(--ux-font,system-ui);font-weight:600;font-size:17px}
.exp-lista .tx span{font-family:var(--ux-font,system-ui);font-size:15px}
.exp-lista .cta{font:0/0 a;width:12px;height:21px;background:var(--ux-fg2,var(--muted));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 21' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l8 8.5L2 19'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 21' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l8 8.5L2 19'/%3E%3C/svg%3E") center/contain no-repeat}
.exp-sello{font-size:13px;border-width:1px}
.exp-vacio{border:1px dashed var(--ux-borde,#b8a076);border-radius:var(--ux-radio,12px);font-family:var(--ux-font,system-ui)}
.exp-nota{font-family:var(--ux-font,system-ui)}
/* la ficha */
#hoja{border-top:1px solid var(--ux-borde,#4a2e14);box-shadow:0 -2px 10px rgba(40,24,8,.10),0 -10px 30px rgba(40,24,8,.16);background:var(--ux-bg,var(--panel-solid))}
#hoja .asa::before{width:36px;height:5px;background:var(--ux-grabber,#c9b48c)}
.volver{border:0;background:transparent;box-shadow:none;color:var(--ux-acento,var(--accent));font:28px/1 var(--ux-font,system-ui);width:44px;height:44px;flex-basis:44px}
.hoja-enc p{font-family:var(--ux-font,system-ui);font-size:15px}
.cuenta{border:1px solid var(--ux-sep,var(--line));background:var(--ux-card,#fff6e0);border-radius:10px}
.cuenta b{font-family:var(--ux-font,system-ui);font-weight:700}
.cuenta span{font-family:var(--ux-font,system-ui);font-size:12px}
.hoja-nav .chip{font-size:17px}
.hoja-cuerpo h2{font-family:var(--ux-font,system-ui);font-weight:700;font-size:20px}
.exp-tarj{border:1px solid var(--ux-sep,var(--line));background:var(--ux-card,#fff6e0);border-radius:var(--ux-radio,12px);box-shadow:none}
.exp-tarj.suave{background:var(--ux-card,var(--panel-solid))}
.exp-datos li,.exp-dia .stats span{border:1px solid var(--ux-sep,var(--line));background:var(--ux-card,var(--chip));font:17px/1.2 var(--ux-font,system-ui)}
.exp-lin .tx b{font-family:var(--ux-font,system-ui);font-weight:600}
.exp-lin .tx span,.exp-dia .d,.exp-dia .cielo,.exp-ins span{font-family:var(--ux-font,system-ui);font-size:15px}
.exp-av{border-width:1px}
.mini{border:0;background:var(--ux-press,rgba(74,46,20,.08));color:var(--ux-acento,var(--accent));font:600 15px/1 var(--ux-font,system-ui);min-height:36px;padding:0 12px}
.mini[aria-pressed="true"]{color:var(--ux-acento-fg,var(--accent-fg))}
.exp-copia,.exp-pres input,.exp-tarea select{border:1px solid var(--ux-borde,#4a2e14);background:var(--ux-card,#fffaec);border-radius:10px;font-family:var(--ux-font,system-ui)}
.exp-dia .num{font-family:var(--ux-font,system-ui);font-weight:700}
.exp-dia b{font-family:var(--ux-font,system-ui);font-weight:600}
.exp-tarea label::before{border:1.5px solid var(--ux-borde,#4a2e14);border-radius:50%;width:26px;height:26px;flex-basis:26px;background:var(--ux-card,#fffaec)}
.exp-tarea input:checked+label::before{background:var(--ux-acento,var(--accent));border-color:var(--ux-acento,var(--accent));box-shadow:inset 0 0 0 4px var(--ux-card,#fffaec)}
.exp-pres tfoot td{font-family:var(--ux-font,system-ui);font-weight:700}
.exp-pres td,.exp-pres .ref{font-family:var(--ux-font,system-ui)}
.exp-msg .glob{border:1px solid var(--ux-sep,var(--line));background:var(--ux-card,#fff6e0);font:17px/1.3 var(--ux-font,system-ui)}
.exp-msg.mio .glob{background:var(--ux-press,#e9d9ad)}
.exp-msg .glob small{font-size:13px}
.exp-cont div{border:1px solid var(--ux-sep,var(--line));background:var(--ux-card,#fff6e0);border-radius:var(--ux-radio,12px)}
.exp-cont b{font-family:var(--ux-font,system-ui);font-weight:700}
.exp-cont span{font-family:var(--ux-font,system-ui);font-size:12px}
.exp-ins b{font-family:var(--ux-font,system-ui)}
.exp-camp{border-width:1px}
.exp-pol b{font-family:var(--ux-font,system-ui)}