/* Portada: el mapa de convocatorias ocupa la pantalla. Se apoya en web.css. */
:root {
  --t-piquete: #111;
  --t-mani: #f04e23;
  --t-conc: #3b5bdb;
  --t-asamblea: #14965a;
  --t-accion: #8e44c9;
}
html, body.app { height: 100%; }
body.app { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100dvh; overflow: hidden; font-size: 16px; }
[hidden] { display: none !important; }

.cab2 { display: flex; align-items: center; gap: 14px; padding: 6px 14px; border-bottom: var(--bd); }
.cab2 .marca { display: flex; align-items: center; gap: 10px; line-height: 0; text-decoration: none; }
.cab2 .marca .sim { height: 46px; }
.cab2 .marca .logo { height: 38px; }
.cab2 h1 { margin: 0; line-height: 0; font-size: 0; }
.lema { margin: 0; flex: 1; min-width: 0; font: 400 24px/1 var(--bt); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lema b { font-weight: 400; background: var(--neon); color: #fff; padding: 3px 8px 1px; border-radius: 5px; margin-right: 6px; }
.lema .cuenta { color: #555; font: 15px/1 var(--txt); letter-spacing: 0; text-transform: none; margin-left: 6px; }
.cab2 .idiomas { font-size: 18px; }
.cab2 .idiomas summary svg { width: 20px; height: 20px; }
.bt2 { font: 400 20px/1 var(--bt); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; cursor: pointer; background: var(--fg); color: var(--bg); border: var(--bd); border-radius: 8px; padding: 9px 14px 6px; box-shadow: 3px 3px 0 var(--neon); white-space: nowrap; }
.bt2:hover, .bt2:focus-visible { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--neon); }
.bt2.claro { background: var(--bg); color: var(--fg); box-shadow: 3px 3px 0 var(--fg); }
html:not(.js) .solo-js { display: none; }

.app-m { display: grid; grid-template-columns: 370px minmax(0, 1fr); min-height: 0; position: relative; }
.panel2 { display: flex; flex-direction: column; min-height: 0; border-right: var(--bd); background: var(--bg); }
.asa { display: none; }
.buscador { display: flex; gap: 8px; padding: 10px 12px 6px; }
.buscador input { flex: 1; min-width: 0; font: 16px/1.2 var(--txt); padding: 9px 10px; border: var(--bd); border-radius: 8px; background: var(--bg); color: var(--fg); }
.buscador button { font: 400 18px/1 var(--bt); letter-spacing: .04em; text-transform: uppercase; background: var(--bg); color: var(--fg); border: var(--bd); border-radius: 8px; padding: 8px 10px 5px; cursor: pointer; white-space: nowrap; }
.buscador button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 10px; border-bottom: 1px dashed var(--fg); }
.chips button { display: inline-flex; align-items: center; gap: 6px; font: 14px/1 var(--txt); background: var(--bg); color: var(--fg); border: 2px solid var(--fg); border-radius: 99px; padding: 6px 10px; cursor: pointer; }
.chips button[aria-pressed="false"] { opacity: .45; border-style: dashed; }
.pt { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c, #999); flex: none; }
.pt-piquete { --c: var(--t-piquete); } .pt-mani { --c: var(--t-mani); } .pt-conc { --c: var(--t-conc); }
.pt-asamblea { --c: var(--t-asamblea); } .pt-accion { --c: var(--t-accion); }
.pt-acampada { background: #ffc21a; box-shadow: inset 0 0 0 2px #111; }

.lista { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 16px; overscroll-behavior: contain; }
.lista h2 { position: sticky; top: 0; z-index: 1; margin: 0 -12px; padding: 10px 12px 6px; background: var(--bg); font: 400 24px/1 var(--bt); letter-spacing: .03em; border-bottom: 1px solid #ddd; }
.lista h2 small { font: 13px/1 var(--txt); color: #666; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.lista ul { list-style: none; margin: 0; padding: 0; }
.lug { border-bottom: 1px solid #eee; }
.lug > button { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; text-align: left; font: 700 16px/1.3 var(--txt); background: none; color: inherit; border: 0; padding: 9px 0 2px; cursor: pointer; }
.lug > button:hover, .lug > button:focus-visible { color: var(--neon); }
.lug > button span { font-weight: 400; font-size: 13px; color: #666; white-space: nowrap; }
.citas li { display: grid; grid-template-columns: 12px 3.2em minmax(0, 1fr); gap: 0 7px; align-items: baseline; padding: 2px 0 3px; font-size: 14.5px; line-height: 1.35; }
.citas li .pt { align-self: center; }
.citas li b { font-variant-numeric: tabular-nums; }
.citas li em { font-style: normal; color: #555; }
.lug .citas { padding-bottom: 8px; }
.vacio { padding: 18px 0; color: #555; }
.fuente { margin: 0; padding: 8px 12px; border-top: 1px dashed var(--fg); font-size: 12.5px; line-height: 1.4; color: #444; }

.mapa2 { position: relative; z-index: 0; min-height: 0; background: #cfe3ea; }
.mapa2.leaflet-container { background: #cfe3ea; }
.rot { background: none; border: 0; box-shadow: none; padding: 0; font: 700 12.5px/1 var(--txt); color: #111; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 3px #fff; white-space: nowrap; }
.rot::before { display: none; }
.mapa2:not(.con-rotulos) .rot { display: none; }
.bt-calles { font: 400 17px/1 var(--bt); letter-spacing: .04em; text-transform: uppercase; background: var(--bg); color: var(--fg); border: 2px solid var(--fg); border-radius: 7px; padding: 7px 10px 4px; box-shadow: 3px 3px 0 var(--fg); cursor: pointer; }
.bt-calles[aria-pressed="true"] { background: var(--fg); color: var(--bg); box-shadow: 3px 3px 0 var(--neon); }
.mapa2 .sin-js { padding: 24px; max-width: 520px; }
.leaflet-container { font: 14px/1.4 var(--txt); }
.pto span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: var(--c); color: #fff; border: 2.5px solid #fff; box-shadow: 0 0 0 1.5px #111, 0 2px 5px rgba(0, 0, 0, .35); font: 700 12px/1 var(--txt); }
.pto-piquete { --c: var(--t-piquete); } .pto-mani { --c: var(--t-mani); } .pto-conc { --c: var(--t-conc); }
.pto-asamblea { --c: var(--t-asamblea); } .pto-accion { --c: var(--t-accion); }
.pto-piquete span { border-color: var(--neon); }
.pto-yo span { background: #1a73e8; box-shadow: 0 0 0 6px rgba(26, 115, 232, .25); }
.pto-nuevo span { background: #fff; border: 3px dashed var(--neon); box-shadow: none; color: var(--neon); font-size: 18px; }
.pp-n { display: block; font: 400 26px/1 var(--bt); text-transform: uppercase; letter-spacing: .02em; }
.pp-r { display: block; font-size: 12.5px; color: #666; margin-bottom: 6px; }
.pp-c { list-style: none; margin: 0 0 8px; padding: 0; }
.pp-c li { padding: 5px 0; border-top: 1px solid #eee; }
.pp-c li .pt { margin-right: 6px; }
.pp-c a, .pp-mas a { color: #b3350f; }
.pp-mas { margin: 0; padding-top: 6px; border-top: 1px solid #eee; font-size: 13px; }
.leaflet-popup-content { margin: 12px 14px; min-width: 210px; }
.leaflet-popup-content-wrapper { border-radius: 10px; border: 2px solid #111; box-shadow: 4px 4px 0 #111; }

.aviso { position: absolute; z-index: 600; left: 50%; top: 12px; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; width: max-content; max-width: calc(100% - 24px); background: var(--fg); color: var(--bg); border-radius: 10px; padding: 9px 12px; font-size: 15px; box-shadow: 4px 4px 0 var(--neon); }
.aviso button { font: inherit; background: none; color: inherit; border: 1px solid currentColor; border-radius: 6px; padding: 3px 8px; cursor: pointer; }
body.poniendo .leaflet-container { cursor: crosshair; }

.pie2 { display: flex; align-items: center; gap: 4px 14px; padding: 7px 14px; border-top: var(--bd); font-size: 14px; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.pie2 a { text-decoration: none; padding: 3px 0; }
.pie2 a:hover, .pie2 a:focus-visible { text-decoration: underline; text-decoration-color: var(--neon); text-decoration-thickness: 2px; }
.pie2 a.fuerte { font: 400 19px/1 var(--bt); letter-spacing: .04em; text-transform: uppercase; border: 2px solid var(--fg); border-radius: 6px; padding: 5px 9px 3px; }
.pie2 .lic { margin-left: auto; color: #555; font-size: 12.5px; }

dialog.hoja { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 0; border: var(--bd); border-radius: 12px; box-shadow: 6px 6px 0 var(--fg); background: var(--bg); color: var(--fg); }
dialog.hoja::backdrop { background: rgba(0, 0, 0, .45); }
.hoja header { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px 8px; background: var(--bg); border-bottom: 1px dashed var(--fg); }
.hoja h2 { margin: 0; font: 400 30px/1 var(--bt); text-transform: uppercase; }
.hoja .x { font: 400 20px/1 var(--bt); background: none; border: 2px solid var(--fg); border-radius: 6px; padding: 5px 9px 3px; cursor: pointer; color: inherit; }
.hoja .cuerpo { padding: 12px 16px 18px; }
.hoja .cuerpo p, .hoja .cuerpo li { font-size: 15.5px; line-height: 1.5; }
.hoja .cuerpo ul { padding-left: 20px; }
.hoja .nota { font-size: 13.5px; color: #555; }
.f { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.f label { display: grid; gap: 3px; font-size: 13.5px; font-weight: 700; }
.f label.ancho, .f .ancho { grid-column: 1 / -1; }
.f input, .f select, .f textarea { font: 16px/1.3 var(--txt); padding: 8px 9px; border: 2px solid var(--fg); border-radius: 7px; background: var(--bg); color: var(--fg); width: 100%; }
.f textarea { font: 13px/1.4 ui-monospace, monospace; min-height: 130px; background: #f6f6f6; }
.f .botones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.f .ok { font-size: 14px; color: #14965a; font-weight: 700; }

@media (max-width: 760px) {
  .cab2 { gap: 8px; padding: 5px 8px; }
  .cab2 .marca .sim { height: 36px; }
  .cab2 .marca .logo { display: none; }
  .lema { font-size: 21px; }
  .lema .cuenta { display: none; }
  .cab2 .idiomas { grid-column: auto; }
  .cab2 .idiomas summary { padding: 5px 8px 3px 6px; box-shadow: none; }
  .cab2 .idiomas ul { left: auto; right: 0; transform: none; }
  .bt2 { font-size: 18px; padding: 8px 9px 5px; box-shadow: none; }
  .bt2 .largo { display: none; }
  .app-m { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .mapa2 { grid-row: 1; }
  .panel2 { grid-row: 2; border-right: 0; border-top: var(--bd); max-height: 74dvh; }
  .asa { display: flex; justify-content: space-between; align-items: center; width: 100%; font: 400 20px/1 var(--bt); letter-spacing: .04em; text-transform: uppercase; background: var(--fg); color: var(--bg); border: 0; padding: 9px 12px 6px; cursor: pointer; }
  .asa::after { content: ""; border: 6px solid transparent; border-bottom-color: currentColor; margin-top: -6px; }
  body.lista-abierta .asa::after { border-bottom-color: transparent; border-top-color: currentColor; margin-top: 6px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-bottom: 0; padding-bottom: 8px; }
  .chips button { white-space: nowrap; }
  html.js body:not(.lista-abierta) .lista, html.js body:not(.lista-abierta) .fuente { display: none; }
  html:not(.js) .panel2 { max-height: none; }
  html:not(.js) body.app { height: auto; overflow: auto; display: block; }
  html:not(.js) .mapa2 { display: none; }
  .lista { height: 46dvh; flex: none; }
  .pie2 { padding: 6px 10px; font-size: 13.5px; }
  .pie2 .lic { display: none; }
  .f { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .bt2:hover { transform: none; }
}