/* =========================================================================
 * BOAT DREAMS · hoja de estilo de la pantalla
 * -------------------------------------------------------------------------
 * Una sola pantalla. El mapa manda, las capas van SOBRE el mapa y todo lo
 * demas son cajas del mismo alto. Sin pestanas de datos, sin acordeones.
 * ========================================================================= */

.bdm{
  --f0:#0b1a2b;      /* fondo   */
  --f1:#122840;      /* caja    */
  --f2:#1a3550;      /* borde   */
  --tx:#e8f1f8;      /* texto   */
  --tx2:#93aec6;     /* texto flojo */
  --az:#2f9be0;      /* azul marca */
  --bien:#4fc38c;
  --ojo:#e8b13a;
  --mal:#e05a4f;
  --r:14px;

  background:var(--f0); color:var(--tx);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:14px; border-radius:var(--r);
  max-width:1480px; margin:0 auto;
  -webkit-font-smoothing:antialiased;
}
.bdm *{box-sizing:border-box}
.bdm h2{font-size:14px; letter-spacing:.04em; text-transform:uppercase;
        color:var(--tx2); margin:0 0 10px; font-weight:700}
.bdm b{font-weight:700}

/* ---------- cabecera ---------- */
.bdm-cab{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:12px}
.bdm-marca{display:flex; align-items:center; gap:10px; color:var(--az)}
.bdm-marca b{display:block; color:var(--tx); font-size:18px; line-height:1.1}
.bdm-marca span{display:block; color:var(--tx2); font-size:11.5px}
.bdm-nav{display:flex; gap:6px; flex-wrap:wrap; margin-left:auto}
.bdm-nav button{
  background:var(--f1); color:var(--tx2); border:1px solid var(--f2);
  border-radius:999px; padding:7px 14px; font-size:13px; cursor:pointer}
.bdm-nav button.on{background:var(--az); border-color:var(--az); color:#fff; font-weight:600}
.bdm-nav button[disabled]{opacity:.42; cursor:not-allowed}

/* ---------- aviso de la clave ---------- */
.bdm-aviso-clave{
  background:#3a2f10; border:1px solid #6b571d; color:#ffe9a8;
  border-radius:10px; padding:10px 14px; margin-bottom:12px; font-size:13.5px}
.bdm-aviso-clave.rojo{background:#3d1c1a; border-color:#7a2f2a; color:#ffd6d2}

/* ---------- rejilla ---------- */
.bdm-fila{display:grid; gap:12px; margin-bottom:12px}
.bdm-arriba{grid-template-columns:1.75fr 1fr}
.bdm-tres{grid-template-columns:1.6fr 1fr 1fr}
.bdm-dos{grid-template-columns:1fr 1fr}
.bdm-caja{background:var(--f1); border:1px solid var(--f2);
          border-radius:var(--r); padding:14px; margin-bottom:12px; position:relative}
.bdm-fila .bdm-caja{margin-bottom:0}
.bdm-cuerpo{font-size:14px}

/* ---------- mapa ---------- */
.bdm-mapa-caja{padding:0; overflow:hidden}
.bdm-mapa{height:470px; width:100%; background:#08131f; border-radius:var(--r)}
.bdm-mapa .leaflet-container{background:#08131f}
.bdm .leaflet-control-attribution{background:rgba(11,26,43,.72); color:var(--tx2)}
.bdm .leaflet-control-attribution a{color:var(--az)}

.bdm-buscador{position:absolute; top:12px; left:12px; z-index:600; width:min(320px,58%)}
.bdm-buscador input{
  width:100%; background:rgba(11,26,43,.94); border:1px solid var(--f2); color:var(--tx);
  border-radius:10px; padding:10px 12px; font-size:14px; outline:0;
  box-shadow:0 6px 18px rgba(0,0,0,.35)}
.bdm-buscador input:focus{border-color:var(--az)}
.bdm-res{margin-top:6px; background:rgba(11,26,43,.97); border:1px solid var(--f2);
         border-radius:10px; overflow:hidden; display:none}
.bdm-res.on{display:block}
.bdm-res button{display:block; width:100%; text-align:left; background:0; border:0;
  color:var(--tx); padding:9px 12px; font-size:13.5px; cursor:pointer; border-bottom:1px solid var(--f2)}
.bdm-res button:last-child{border-bottom:0}
.bdm-res button:hover{background:var(--az); color:#fff}
.bdm-res small{color:var(--tx2); display:block; font-size:11.5px}
.bdm-res button:hover small{color:#dceeff}

.bdm-capas{position:absolute; top:12px; right:12px; z-index:600;
           display:flex; flex-direction:column; gap:5px}
.bdm-capas button{
  background:rgba(11,26,43,.92); border:1px solid var(--f2); color:var(--tx2);
  border-radius:9px; padding:6px 11px; font-size:12.5px; cursor:pointer;
  text-align:left; min-width:104px; box-shadow:0 4px 12px rgba(0,0,0,.3)}
.bdm-capas button.on{background:var(--az); border-color:var(--az); color:#fff; font-weight:600}
.bdm-capas button[disabled]{opacity:.35; cursor:not-allowed}

.bdm-escala{position:absolute; left:12px; bottom:34px; z-index:600;
  background:rgba(11,26,43,.92); border:1px solid var(--f2); border-radius:9px;
  padding:7px 10px; display:none; font-size:11px; color:var(--tx2)}
.bdm-escala.on{display:block}
.bdm-escala b{display:block; color:var(--tx); font-size:11.5px; margin-bottom:5px}
.bdm-barra{height:9px; width:190px; border-radius:5px; margin-bottom:3px}
.bdm-escala .nums{display:flex; justify-content:space-between; width:190px}

.bdm-carta{position:absolute; right:12px; bottom:92px; z-index:600;
  background:rgba(11,26,43,.92); border:1px solid var(--f2); color:var(--tx2);
  border-radius:9px; padding:6px 11px; font-size:12px; cursor:pointer}

.bdm-etiqueta{background:rgba(11,26,43,.9); border:1px solid var(--az); color:#fff;
  border-radius:8px; padding:2px 8px; font-size:11.5px; font-weight:700; white-space:nowrap}

/* ---------- resumen actual ---------- */
.bdm-resumen .sitio{font-size:19px; font-weight:700}
.bdm-resumen .sitio small{display:block; color:var(--tx2); font-size:12px; font-weight:400}
.bdm-veredicto{display:flex; align-items:center; gap:11px; margin:12px 0;
  padding:11px 13px; border-radius:11px; background:#0e2237; border-left:5px solid var(--tx2)}
.bdm-veredicto.bien{border-color:var(--bien)} .bdm-veredicto.ojo{border-color:var(--ojo)}
.bdm-veredicto.mal{border-color:var(--mal)}
.bdm-veredicto .cara{font-size:26px; line-height:1}
.bdm-veredicto b{display:block; font-size:15.5px}
.bdm-veredicto span{color:var(--tx2); font-size:12.5px}
.bdm-cifras{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.bdm-cifras div{background:#0e2237; border-radius:10px; padding:9px 10px}
.bdm-cifras small{display:block; color:var(--tx2); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.04em}
.bdm-cifras b{font-size:19px; font-weight:700}
/* iconos del cielo, mas grandes: se leen antes que un numero */
.bdm-tabla td.ic{font-size:21px; line-height:1}
.bdm-cifras b i{font-style:normal; font-size:11px; color:var(--tx2); font-weight:400; margin-left:3px}
.bdm-nota{margin-top:10px; font-size:12.5px; color:var(--tx2); line-height:1.4}
.bdm-nota.ojo{color:#ffdc95}

/* ---------- linea de tiempo ---------- */
.bdm-linea[hidden]{display:none}
.bdm-linea{display:flex; align-items:center; gap:14px; padding:11px 14px}
.bdm-linea button{background:var(--az); border:0; color:#fff; width:38px; height:38px;
  border-radius:50%; font-size:14px; cursor:pointer; flex:0 0 auto}
.bdm-cuando{min-width:128px; line-height:1.15}
.bdm-cuando b{display:block; font-size:15px}
.bdm-cuando span{color:var(--tx2); font-size:11.5px}
.bdm-linea input[type=range]{flex:1; accent-color:var(--az)}

/* ---------- tarjetas por horas ---------- */
.bdm-tarjetas{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px}
.bdm-tarjeta{flex:0 0 96px; background:#0e2237; border-radius:11px; padding:10px 8px;
  text-align:center; border-top:3px solid var(--tx2)}
.bdm-tarjeta.bien{border-color:var(--bien)} .bdm-tarjeta.ojo{border-color:var(--ojo)}
.bdm-tarjeta.mal{border-color:var(--mal)}
.bdm-tarjeta.ahora{outline:2px solid var(--az)}
.bdm-tarjeta .hh{font-size:12.5px; color:var(--tx2)}
.bdm-tarjeta .ic{font-size:30px; margin:4px 0; line-height:1}
.bdm-tarjeta .tt{font-size:17px; font-weight:700}
.bdm-tarjeta .vv{font-size:12px; color:var(--tx2); margin-top:3px}
.bdm-tarjeta .fl{display:inline-block; color:var(--az)}

/* ---------- graficas ---------- */
.bdm-leyenda-graf{display:flex; gap:14px; font-size:11.5px; color:var(--tx2); margin-bottom:6px}
.bdm-leyenda-graf i{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px}
#bdm-graf{width:100%; display:block}
.bdm-graf-dir{display:flex; justify-content:space-between; margin-top:5px; color:var(--az); font-size:13px}

/* ---------- luna y sol ---------- */
.bdm-luna .cara{display:flex; align-items:center; gap:13px}
.bdm-luna canvas{flex:0 0 auto}
.bdm-luna .txt b{display:block; font-size:15px}
.bdm-luna .txt span{color:var(--tx2); font-size:12.5px}
.bdm-astro{display:flex; justify-content:space-between; margin-top:9px;
  background:#0e2237; border-radius:9px; padding:8px 10px; font-size:13px}
.bdm-astro span{color:var(--tx2)}
.bdm-arco{width:100%; height:74px; display:block}

/* ---------- tabla ---------- */
.bdm-tabla-marco{max-height:430px; overflow:auto; border-radius:10px; border:1px solid var(--f2)}
.bdm-tabla{width:100%; border-collapse:collapse; font-size:13px; min-width:660px}
.bdm-tabla th,.bdm-tabla td{padding:7px 9px; text-align:center; white-space:nowrap}
.bdm-tabla tr.cab td{position:sticky; top:0; z-index:3; background:#12395c; color:#cfe6f7;
  font-size:11px; text-transform:uppercase; letter-spacing:.04em; font-weight:700}
.bdm-tabla tr.dia td{position:sticky; top:29px; z-index:2; background:var(--az); color:#fff;
  text-align:left; font-weight:700; font-size:12.5px; letter-spacing:.03em}
.bdm-tabla tbody tr:nth-child(odd) td{background:#0e2237}
.bdm-tabla tbody tr:nth-child(even) td{background:#102a44}
.bdm-tabla tr.dia td,.bdm-tabla tr.cab td{background-clip:padding-box}
.bdm-tabla td.h{font-weight:700}
.bdm-tabla tr.ahora td{background:#17456e !important; box-shadow:inset 0 0 0 1px rgba(47,155,224,.55)}
.bdm-tabla tr.ahora td.h:before{content:'ahora '; color:#7fd0ff; font-size:10px}
.bdm-tabla td.v i{color:var(--az); font-style:normal; display:inline-block; margin-right:3px}
/* El punto de "salir": vale en cualquier tabla, no solo en la de previsión */
.pun{display:inline-block; width:11px; height:11px; border-radius:50%; background:var(--tx2)}
.pun.bien{background:var(--bien)} .pun.ojo{background:var(--ojo)} .pun.mal{background:var(--mal)}
.bdm-unidades{display:flex; align-items:center; gap:8px; margin-top:10px;
  font-size:12px; color:var(--tx2)}
.bdm-unidades select{background:#0e2237; color:var(--tx); border:1px solid var(--f2);
  border-radius:7px; padding:5px 8px; font-size:12.5px}

/* ---------- alertas, indices, barco ---------- */
.bdm-alerta{display:flex; gap:10px; align-items:flex-start; background:#0e2237;
  border-left:4px solid var(--ojo); border-radius:9px; padding:9px 11px; margin-bottom:7px}
.bdm-alerta.alto{border-color:var(--mal)}
.bdm-alerta.aviso{border-color:var(--az)}
.bdm-alerta b{display:block; font-size:13.5px}
.bdm-alerta span{display:block; color:var(--tx2); font-size:12px; margin-top:2px}
.bdm-indice{display:flex; justify-content:space-between; padding:6px 0;
  border-bottom:1px solid var(--f2); font-size:13.5px}
.bdm-indice:last-child{border-bottom:0}
.bdm-indice span{color:var(--tx2)}
.bdm-barco label{display:block; font-size:12px; color:var(--tx2); margin-bottom:9px}
.bdm-barco input[type=text],.bdm-barco select{
  width:100%; margin-top:4px; background:#0e2237; color:var(--tx);
  border:1px solid var(--f2); border-radius:8px; padding:7px 9px; font-size:13.5px}
.bdm-barco input[type=range]{width:100%; margin-top:4px; accent-color:var(--az)}
.bdm-barco label b{color:var(--tx); float:right}
.bdm-leyenda-barco{margin-top:6px; font-size:11.5px; color:var(--tx2)}
.bdm-leyenda-barco span{display:block; margin-bottom:3px}
.bdm-leyenda-barco i{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px}
.bdm-leyenda-barco i.bien{background:var(--bien)} .bdm-leyenda-barco i.ojo{background:var(--ojo)}
.bdm-leyenda-barco i.mal{background:var(--mal)}

/* ---------- pie ---------- */
.bdm-pie{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  color:var(--tx2); font-size:11.5px; padding:2px 4px}
.bdm-taller{margin-top:8px; font-size:12px}
.bdm-taller a{color:var(--az)}
.bdm-taller b{color:var(--ojo); margin-left:10px}
.bdm-cargando{color:var(--tx2); font-size:13px}
.bdm-fallo{color:#ffb0a8; font-size:13px}

/* ---------- pantallas pequenas ---------- */
@media (max-width:1080px){
  .bdm-arriba{grid-template-columns:1fr}
  .bdm-tres{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){ .bdm-dos{grid-template-columns:1fr} }
@media (max-width:720px){
  .bdm{padding:8px}
  .bdm-tres{grid-template-columns:1fr}
  .bdm-mapa{height:360px}
  .bdm-nav{margin-left:0; width:100%; overflow-x:auto; flex-wrap:nowrap}
  .bdm-buscador{width:calc(100% - 130px)}
  .bdm-capas button{min-width:0; padding:6px 8px; font-size:11.5px}
}

/* =========================================================================
 * RUTAS · la carta náutica
 * ========================================================================= */
.bdm-panel[hidden]{display:none}

.bdm-ab{position:absolute; top:12px; left:12px; z-index:600; display:flex; gap:8px;
  align-items:flex-end; width:calc(100% - 24px); flex-wrap:wrap}
.bdm-ab label{position:relative; flex:1 1 190px; min-width:150px}
.bdm-ab label>span{display:block; font-size:10px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:3px; text-shadow:0 1px 3px rgba(0,0,0,.8)}
.bdm-ab label.a>span{color:var(--bien)}
.bdm-ab label.b>span{color:var(--mal)}
.bdm-ab input{width:100%; background:rgba(11,26,43,.94); border:1px solid var(--f2);
  color:var(--tx); border-radius:10px; padding:9px 12px; font-size:13.5px; outline:0;
  box-shadow:0 6px 18px rgba(0,0,0,.35)}
.bdm-ab input:focus{border-color:var(--az)}
.bdm-ab label.a input:focus{border-color:var(--bien)}
.bdm-ab label.b input:focus{border-color:var(--mal)}
.bdm-ab .bdm-res{position:absolute; left:0; right:0; z-index:700}
.bdm-ab button{background:rgba(11,26,43,.92); border:1px solid var(--f2); color:var(--tx2);
  border-radius:10px; padding:9px 13px; font-size:12.5px; cursor:pointer; flex:0 0 auto}

.bdm-modo{position:absolute; left:12px; bottom:34px; z-index:600; display:flex; align-items:center;
  gap:7px; background:rgba(11,26,43,.92); border:1px solid var(--f2); border-radius:9px;
  padding:6px 11px; font-size:12px; color:var(--tx2)}
.bdm-modo i{width:8px; height:8px; border-radius:50%; background:var(--bien);
  animation:bdmlat 1.5s ease infinite}
.bdm-modo.b i{background:var(--mal)}
.bdm-modo.fin i{background:var(--tx2); animation:none}
@keyframes bdmlat{0%,100%{opacity:1}50%{opacity:.2}}

.bdm-marca-a,.bdm-marca-b,.bdm-marca-w,.bdm-marca-p{
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:rgba(11,26,43,.92); border:2px solid var(--az); font-size:12px; font-weight:800}
.bdm-marca-a{border-color:var(--bien); color:var(--bien)}
.bdm-marca-b{border-color:var(--mal); color:var(--mal)}
.bdm-marca-w{border-color:var(--az); background:rgba(47,155,224,.25); cursor:grab; font-size:9px}
.bdm-marca-p{border-color:rgba(47,155,224,.65); font-size:13px; cursor:pointer}
.bdm-marca-p.cerrado{border-color:var(--mal); opacity:.8}

.bdm-gordo{background:#0e2237; border-radius:11px; padding:12px; text-align:center; margin-bottom:10px}
.bdm-gordo b{display:block; font-size:30px; font-weight:800; color:var(--az); line-height:1}
.bdm-gordo span{display:block; font-size:11px; color:var(--tx2); margin-top:3px}
.bdm-llegada{display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:11px;
  background:#0e2237; border-left:5px solid var(--bien); margin-bottom:10px}
.bdm-llegada.noche{border-color:var(--mal)}
.bdm-llegada .cara{font-size:24px}
.bdm-llegada b{display:block; font-size:15px}
.bdm-llegada span{color:var(--tx2); font-size:12.5px}
.bdm-casco{margin-top:8px; font-size:12px; color:var(--tx2); line-height:1.45}
.bdm-casco b{color:var(--ojo)}
.bdm-puerto .cab{font-size:16px; font-weight:700}
.bdm-puerto .sub{color:var(--tx2); font-size:11.5px; margin-bottom:8px; font-family:monospace}
.bdm-srv{display:flex; flex-wrap:wrap; gap:4px; margin:7px 0}
.bdm-srv span{font-size:10.5px; background:rgba(79,195,140,.1); border:1px solid rgba(79,195,140,.25);
  border-radius:5px; padding:2px 7px; color:var(--bien)}
.bdm-ref{background:#0e2237; border-left:4px solid var(--bien); border-radius:9px;
  padding:9px 11px; margin-bottom:7px}
.bdm-ref.ojo{border-color:var(--ojo)}
.bdm-ref b{display:block; font-size:13.5px}
.bdm-ref span{display:block; color:var(--tx2); font-size:12px; margin-top:2px}

/* La carta de noche: el mismo mapa de OpenStreetMap, dado la vuelta con un
   filtro. Sin clave, sin coste y sin que nadie nos escriba encima. El filtro
   va solo sobre la carta base: las boyas y faros de OpenSeaMap quedan fuera. */
.bdm-mapa.noche .bdm-teselas{
  filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.95) saturate(.8)}
.bdm-mapa.noche{background:#08131f}

/* Las ocho noches que vienen. Quietas: se miran y se elige noche. */
.bdm-lunas{display:flex; gap:5px; margin-top:10px; overflow-x:auto; padding-bottom:4px}
.bdm-luna-min{flex:0 0 auto; background:#0e2237; border:1px solid var(--f2); border-radius:9px;
  padding:5px 4px 6px; cursor:pointer; text-align:center; line-height:1}
.bdm-luna-min:hover{border-color:var(--az)}
.bdm-luna-min.on{border-color:var(--az); background:#123350}
.bdm-luna-min.llena{box-shadow:inset 0 0 0 1px rgba(242,233,201,.45)}
.bdm-luna-min canvas{display:block}
.bdm-luna-min i{display:block; font-style:normal; font-size:10px; color:var(--tx2); margin-top:3px}
.bdm-luna-min u{display:block; text-decoration:none; font-size:10.5px; color:var(--tx); font-weight:700}
.bdm-luna-min.on i,.bdm-luna-min.on u{color:#fff}

/* EL SOL sobre la foto. La imagen lleva el amanecer a la izquierda y el ocaso a
   la derecha; el sol camina de uno al otro por donde de verdad va. */
.bdm-sol-foto{position:relative; width:100%; border-radius:11px; overflow:hidden;
  background:#1a2b3d url(sol.jpg) center/cover no-repeat; aspect-ratio:1000/340; min-height:110px}
.bdm-sol-foto:before{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(6,14,24,.30) 0%,rgba(6,14,24,0) 45%,rgba(6,14,24,.72) 100%)}
.bdm-sol-foto.noche{filter:saturate(.5) brightness(.55)}
.bdm-sol-foto canvas{position:absolute; inset:0; z-index:2}
.bdm-sol-hora{position:absolute; bottom:7px; z-index:3; line-height:1.15;
  text-shadow:0 1px 4px rgba(0,0,0,.85)}
.bdm-sol-hora.izq{left:10px} .bdm-sol-hora.der{right:10px; text-align:right}
.bdm-sol-hora b{display:block; font-size:17px; color:#fff}
.bdm-sol-hora span{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#ffe6bd}
.bdm-sol-luz{position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:3;
  background:rgba(6,14,24,.55); border:1px solid rgba(255,255,255,.18); border-radius:20px;
  padding:4px 12px; font-size:12px; color:#fff; white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.8)}
.bdm-sol-luz.roja{background:rgba(120,30,24,.72); border-color:rgba(255,140,120,.5)}

/* Los siete días de sol, debajo de la foto */
.bdm-soles{display:flex; gap:4px; margin-top:9px; overflow-x:auto; padding-bottom:4px}
.bdm-sol-dia{flex:1 1 0; min-width:56px; background:#0e2237; border:1px solid var(--f2);
  border-radius:8px; padding:5px 4px 6px; text-align:center; line-height:1.35}
.bdm-sol-dia.on{border-color:var(--az); background:#123350}
.bdm-sol-dia i{display:block; font-style:normal; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tx2)}
.bdm-sol-dia.on i{color:#fff}
.bdm-sol-dia b{display:block; font-size:11.5px; color:#ffd98a; font-weight:700; white-space:nowrap}
.bdm-sol-dia u{display:block; text-decoration:none; font-size:11.5px; color:#9fc6e8; white-space:nowrap}

/* La luz que queda, fuera de la foto: encima tapaba el sol */
.bdm-luz-linea{margin-top:8px; text-align:center; font-size:12.5px; color:var(--tx2);
  background:#0e2237; border:1px solid var(--f2); border-radius:9px; padding:6px 10px}
.bdm-luz-linea.roja{background:#3d1c1a; border-color:#7a2f2a; color:#ffd6d2; font-weight:600}

/* Tierra adentro */
.bdm-veredicto.interior{border-color:#6f7f92}
.bdm-etiqueta.tierra{border-color:#93aec6; opacity:.9}
.bdm-ir-puerto{width:100%; margin-bottom:10px; background:var(--az); border:0; color:#fff;
  border-radius:9px; padding:9px 12px; font-size:13px; font-weight:600; cursor:pointer}
.bdm-ir-puerto:hover{filter:brightness(1.1)}

/* Las dos clases de alertas */
.bdm-sub{display:flex; gap:5px; margin:-4px 0 10px}
.bdm-sub button{background:#0e2237; border:1px solid var(--f2); color:var(--tx2);
  border-radius:999px; padding:5px 12px; font-size:12px; cursor:pointer}
.bdm-sub button.on{background:var(--az); border-color:var(--az); color:#fff; font-weight:600}
.bdm-cuerpo[hidden]{display:none}
.bdm-alerta.oficial{border-left-width:5px}
.bdm-alerta.oficial.rojo{border-color:var(--mal); background:#2a1513}
.bdm-alerta.oficial.naranja{border-color:#e07a2f}
.bdm-alerta.oficial.amarillo{border-color:var(--ojo)}
.bdm-tabla td.marea{font-variant-numeric:tabular-nums; color:#9fd8e8}

/* =========================================================================
 * HORAS PRÓXIMAS
 * ========================================================================= */
.bdm-hcab{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:12px}
.bdm-hcab h2{margin:0 0 2px}
.bdm-hcab b{font-size:21px; color:var(--az); letter-spacing:.01em}
.bdm-rejilla-marco{overflow-x:auto; border-radius:11px; border:1px solid var(--f2)}
.bdm-rejilla{width:100%; border-collapse:separate; border-spacing:2px; min-width:720px;
  background:#0b1a2b; padding:2px}
.bdm-rejilla td{padding:10px 8px; text-align:center; vertical-align:middle}
.bdm-rejilla tr.cab td{font-size:12px; color:var(--tx2); padding:6px 8px; font-weight:600}
.bdm-rejilla td.eti{text-align:left; min-width:118px; background:#0e2237; border-radius:8px}
.bdm-rejilla td.eti b{display:block; font-size:13px; color:var(--tx); letter-spacing:.02em}
.bdm-rejilla td.eti span,.bdm-rejilla .pq{display:block; font-size:10.5px; color:var(--tx2)}
.bdm-rejilla td.dato{border-radius:8px; background:#0e2237; min-width:74px}
.bdm-rejilla td.centro{vertical-align:middle}
.bdm-rejilla .gr{font-size:21px; font-weight:700; line-height:1.15}
.bdm-rejilla .gr i{font-style:normal; color:var(--tx)}
.bdm-rejilla .ic{font-size:26px; line-height:1.05; margin-bottom:1px}

.bdm-tiras{display:flex; flex-direction:column; gap:10px}
.bdm-tira{background:#0e2237; border:1px solid var(--f2); border-radius:11px; padding:9px 10px 4px}
.bdm-tira .tit{font-size:12px; color:var(--tx2); margin-bottom:2px}
.bdm-tira .tit b{font-size:13px; letter-spacing:.03em}
.bdm-tira canvas{display:block; width:100%}

.bdm-rapido{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.bdm-rap{display:flex; gap:11px; align-items:flex-start; background:#0e2237;
  border:1px solid var(--f2); border-left:4px solid var(--tx2); border-radius:11px; padding:12px 13px}
.bdm-rap.buena{border-left-color:var(--bien)}
.bdm-rap.mala{border-left-color:var(--ojo)}
.bdm-rap.gen{border-left-color:var(--az)}
.bdm-rap .ic{font-size:24px; line-height:1}
.bdm-rap small{display:block; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--tx2)}
.bdm-rap b{display:block; font-size:19px; margin:2px 0 3px}
.bdm-rap.buena b{color:var(--bien)} .bdm-rap.mala b{color:var(--ojo)} .bdm-rap.gen b{color:var(--az)}
.bdm-rap span{font-size:12.5px; color:var(--tx2); line-height:1.4}
@media (max-width:900px){ .bdm-rapido{grid-template-columns:1fr} }

/* =========================================================================
 * SAFE · el cartel manda
 * ========================================================================= */
.bdm-safe{padding:14px; text-align:center}
.bdm-safe-cartel{display:block; max-width:760px; margin:0 auto; border-radius:12px; overflow:hidden;
  border:1px solid var(--f2); line-height:0}
.bdm-safe-cartel img{width:100%; height:auto; display:block}
.bdm-safe-pie{max-width:760px; margin:14px auto 0}
.bdm-safe-boton{display:inline-block; background:#e03b26; color:#fff; text-decoration:none;
  font-weight:700; font-size:15px; border-radius:10px; padding:12px 26px}
.bdm-safe-boton:hover{filter:brightness(1.1)}
.bdm-safe-pie span{display:block; margin-top:11px; font-size:12px; color:var(--tx2); line-height:1.5}
.bdm-safe-pie b{color:var(--tx)}

/* La cuadrícula de avisos oficiales */
.bdm-cuenta{display:flex; gap:8px; margin-bottom:12px}
.bdm-cuenta-c{flex:1; background:#0e2237; border:1px solid var(--f2); border-radius:10px;
  padding:8px 10px; text-align:center; border-top:3px solid var(--tx2)}
.bdm-cuenta-c.rojo{border-top-color:var(--mal)}
.bdm-cuenta-c.naranja{border-top-color:#e07a2f}
.bdm-cuenta-c.amarillo{border-top-color:var(--ojo)}
.bdm-cuenta-c b{display:block; font-size:22px; font-weight:800}
.bdm-cuenta-c span{font-size:10.5px; color:var(--tx2); text-transform:uppercase; letter-spacing:.06em}
.bdm-zona{margin-bottom:12px}
.bdm-zona-t{display:flex; align-items:baseline; gap:8px; margin-bottom:6px}
.bdm-zona-t b{font-size:13px; letter-spacing:.02em}
.bdm-zona-t span{font-size:11px; color:var(--tx2)}
.bdm-rej-avisos{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:7px}
.bdm-av{background:#0e2237; border:1px solid var(--f2); border-left:4px solid var(--ojo);
  border-radius:9px; padding:8px 10px}
.bdm-av.rojo{border-left-color:var(--mal); background:#2a1513}
.bdm-av.naranja{border-left-color:#e07a2f}
.bdm-av.amarillo{border-left-color:var(--ojo)}
.bdm-av-t{display:flex; align-items:center; gap:6px}
.bdm-av-t i{font-style:normal; font-size:11px}
.bdm-av-t b{font-size:13px; line-height:1.2}
.bdm-av .z{display:block; font-size:11.5px; color:var(--tx2); margin-top:3px; line-height:1.35}
.bdm-av .h{display:block; font-size:11px; color:var(--az); margin-top:3px; font-variant-numeric:tabular-nums}

/* =========================================================================
 * TABLAS · la larga
 * ========================================================================= */
.bdm-larga-marco{overflow:auto; max-height:640px; border-radius:11px; border:1px solid var(--f2)}
.bdm-larga{border-collapse:collapse; font-size:12.5px; white-space:nowrap}
.bdm-larga td{padding:6px 9px; text-align:center; border-bottom:1px solid rgba(26,53,80,.55)}
.bdm-larga td.eti{position:sticky; left:0; z-index:3; text-align:left; background:#0e2237;
  min-width:172px; border-right:1px solid var(--f2)}
.bdm-larga td.eti b{display:block; font-size:12.5px; color:var(--tx); font-weight:600}
.bdm-larga td.eti span{display:block; font-size:10px; color:var(--tx2)}
.bdm-larga tr.dias td{position:sticky; top:0; z-index:4; background:var(--az); color:#fff;
  font-weight:700; font-size:11.5px; letter-spacing:.04em; text-align:left; padding:5px 10px}
.bdm-larga tr.dias td.eti{z-index:6; background:#12395c}
.bdm-larga tr.cab td{position:sticky; top:26px; z-index:4; background:#12395c; color:#cfe6f7;
  font-size:11px; font-weight:700; padding:4px 9px}
.bdm-larga tr.cab td.eti{z-index:6}
.bdm-larga tr:nth-child(odd) td{background:#0b1a2b}
.bdm-larga tr:nth-child(even) td{background:#0e2237}
.bdm-larga tr:nth-child(odd) td.eti{background:#0e2237}
.bdm-larga tr:hover td{background:#143454}
.bdm-larga .ra{color:#e8913a; font-weight:600}
.bdm-larga .te{color:#ffbe6b; font-weight:600}
.bdm-larga .ol{color:#7fc4e8; font-weight:600}
.bdm-larga .ma{color:#9fd8e8; font-weight:600}
.bdm-larga .ic{font-size:17px}
.bdm-larga .p{font-weight:700}
.bdm-larga .p.bien{color:var(--bien)} .bdm-larga .p.ojo{color:var(--ojo)} .bdm-larga .p.mal{color:var(--mal)}
.bdm-larga .baja{color:var(--mal)}
.bdm-larga td i{font-style:normal; color:var(--az)}
.bdm-larga .ca{font-weight:600; color:var(--tx2)}
.bdm-larga .ca.sube{color:#ff9d7a} .bdm-larga .ca.baja{color:#7fc4e8}
.bdm-larga .fi{font-size:11.5px}
.bdm-larga .fi.ojo{color:var(--ojo); font-weight:600}

/* ---------- las cuatro gráficas de las tablas ---------- */
.bdm-rejilla-graf{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px}
@media (max-width:760px){ .bdm-rejilla-graf{grid-template-columns:1fr} }
.bdm-gcard{background:#0e2237; border:1px solid var(--f2); border-radius:12px;
	padding:10px 12px 8px; overflow:hidden}
.bdm-gcard[hidden]{display:none}
.bdm-gcab{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px}
.bdm-gcab b{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:#cfe6f7}
.bdm-gval{font-size:16px; font-weight:700; color:var(--tx)}
.bdm-gval small{font-size:11px; font-weight:500; color:var(--tx2); margin-left:4px}
.bdm-glienzo{position:relative; height:148px}
.bdm-glienzo canvas{display:block; width:100%; height:148px}
.bdm-gflechas{display:flex; justify-content:space-between; padding:2px 30px 0; color:var(--az);
	font-size:13px; line-height:1}
.bdm-gpie{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:6px;
	font-size:10.5px; color:var(--tx2)}
.bdm-gpie .pt{display:inline-block; width:10px; height:3px; border-radius:2px; margin-right:2px}
.bdm-gpie .pt.raya{width:13px; height:0; border-top:2px dashed var(--c,#9fd8e8); background:none!important}
.bdm-gnota{margin-left:auto; opacity:.75}
.bdm-gexp{margin:10px 2px 0; font-size:11.5px; color:var(--tx2); line-height:1.5}

/* ---------- el logo de la casa ---------- */
.bdm-logo{max-height:40px; max-width:200px; width:auto; height:auto; display:block; object-fit:contain}
.bdm-marca-txt span{font-size:11px; letter-spacing:.02em}
@media (max-width:520px){ .bdm-logo{max-height:32px; max-width:150px} }
/* ESTO SE PONE UNA VEZ Y NO SE TOCA MAS.
   Nos ha mordido tres veces el mismo bicho: pones hidden en algo y se sigue
   viendo, porque un display:block nuestro le gana, y porque dentro de un <svg>
   el navegador ni siquiera mira el hidden. Aqui se zanja para todo el plugin. */
.bdm [hidden], .bdm[hidden]{display:none !important}
/* Una pestaña que aún no se puede llenar se ve apagada y no se puede pulsar:
   mejor que enseñe que falta a que finja que está. */
.bdm-sub button[disabled]{opacity:.42; cursor:not-allowed}
.bdm-sub button[disabled]:hover{background:#0e2237}

/* ---------- pantalla de alertas ---------- */
.bdm-cuenta.grande{gap:14px; margin-bottom:14px}
.bdm-cuenta.grande .bdm-cuenta-c b{font-size:26px}
.bdm-cuenta-c.mar{border-color:var(--az); color:var(--az)}
.bdm-al-pie{margin:14px 2px 0; font-size:11.5px; color:var(--tx2); line-height:1.55}
#bdm-al-cuerpo .bdm-zona{margin-bottom:14px}
#bdm-al-cuerpo .bdm-rej-avisos{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

/* ---------- pantalla de dónde sale ---------- */
.bdm-fu-cab h2{margin:0 0 6px}
.bdm-fu-lead{margin:0; font-size:14.5px; line-height:1.65; color:var(--tx); max-width:70ch}
.bdm-fu-rej{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; margin-top:12px}
.bdm-fu{display:flex; flex-direction:column}
.bdm-fu-t{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.bdm-fu-t h3{margin:0; font-size:16px; color:var(--tx)}
.bdm-fu-n{display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
	background:var(--az); color:#fff; font-weight:700; font-size:13px; flex:0 0 auto}
.bdm-fu p{margin:8px 0 2px; font-size:13px; color:var(--az); font-weight:600}
.bdm-fu ul{margin:2px 0 0 16px; padding:0; font-size:12.5px; color:var(--tx2); line-height:1.6}
.bdm-fu-p{margin-top:auto!important; padding-top:10px; font-size:12px!important;
	color:var(--tx2)!important; font-weight:400!important; font-style:italic}
.bdm-fu-nuestro{margin-top:12px}
.bdm-fu-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-top:12px}
.bdm-fu-cols h4{margin:0 0 8px; font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--az)}
.bdm-fu-cols ul{margin:0 0 0 16px; padding:0; font-size:12.5px; color:var(--tx2); line-height:1.65}
.bdm-fu-cols li{margin-bottom:8px}
.bdm-fu-cols li b{color:var(--tx)}
.bdm-fu-cols li i{font-style:normal; color:#9fd8e8; font-family:ui-monospace,monospace; font-size:12px}
.bdm-fu-ojo{margin-top:12px; border:1px solid var(--ojo); background:linear-gradient(180deg,rgba(232,177,58,.09),transparent 60%)}
.bdm-fu-ojo h2{color:var(--ojo)}
.bdm-fu-grande{font-size:17px!important; line-height:1.5; color:var(--tx)!important; font-weight:600; max-width:60ch}
.bdm-fu-ojo p{font-size:13px; line-height:1.65; color:var(--tx2); max-width:80ch}
.bdm-fu-ojo ul{margin:10px 0 0 18px; padding:0; font-size:12.5px; color:var(--tx2); line-height:1.7}
.bdm-fu-tel{margin-top:14px!important; padding-top:12px; border-top:1px solid var(--f2);
	font-size:13px!important; color:var(--tx)!important}
.bdm-fu-tel b{color:var(--ojo)}
.bdm-pie a{color:var(--az); text-decoration:none; border-bottom:1px dotted var(--az)}
.bdm-balance{margin:8px 0 4px; padding:9px 11px; border-radius:9px; background:#0e2237;
	border:1px solid var(--f2)}
.bdm-balance b{display:block; font-size:13.5px; color:var(--az)}
.bdm-balance span{display:block; margin-top:3px; font-size:11px; color:var(--tx2); line-height:1.5}

/* ---------- filtros de alertas, con el color del aviso ---------- */
.bdm-filtros{display:flex; gap:7px; flex-wrap:wrap}
.bdm-filtros button{display:inline-flex; align-items:center; gap:7px; background:#0e2237;
	border:1px solid var(--f2); color:var(--tx2); border-radius:999px;
	padding:6px 13px; font-size:12.5px; cursor:pointer; transition:.12s}
.bdm-filtros button i{width:11px; height:11px; border-radius:50%; background:currentColor; flex:0 0 auto}
.bdm-filtros button.todas i{background:linear-gradient(135deg,var(--mal) 0 33%,var(--ojo) 33% 66%,#e8d44a 66%)}
.bdm-filtros button.rojo i{background:var(--mal)}
.bdm-filtros button.naranja i{background:#e8913a}
.bdm-filtros button.amarillo i{background:#e8d44a}
.bdm-filtros button.mar i{background:var(--az)}
.bdm-filtros button:hover{border-color:var(--az); color:var(--tx)}
.bdm-filtros button.on{color:#fff; font-weight:600}
.bdm-filtros button.rojo.on{background:rgba(224,90,79,.22); border-color:var(--mal)}
.bdm-filtros button.naranja.on{background:rgba(232,145,58,.22); border-color:#e8913a}
.bdm-filtros button.amarillo.on{background:rgba(232,212,74,.18); border-color:#e8d44a}
.bdm-filtros button.mar.on{background:rgba(47,155,224,.22); border-color:var(--az)}
.bdm-filtros button.todas.on{background:var(--f2); border-color:var(--az)}
.bdm-flechas{pointer-events:none}

/* ---------- el mapa en su propia pestaña ---------- */
.bdm-mapa-grande{padding:0; overflow:hidden}
#bdm-mapa-hueco{height:min(78vh,860px)}
#bdm-mapa-hueco .bdm-mapa{height:100%}
#bdm-mapa-sitio{height:100%}

/* ---------- check list ---------- */
.bdm-cl-mandos{display:flex; align-items:center; gap:10px}
.bdm-cl-cuenta{font-size:13px; color:var(--tx2)}
.bdm-cl-b{background:#0e2237; border:1px solid var(--f2); color:var(--tx2);
	border-radius:999px; padding:6px 13px; font-size:12px; cursor:pointer}
.bdm-cl-b:hover{border-color:var(--az); color:var(--tx)}
.bdm-cl-barra{height:6px; border-radius:99px; background:#0e2237; overflow:hidden; margin:4px 0 16px}
.bdm-cl-barra i{display:block; height:100%; width:0; background:var(--az); border-radius:99px;
	transition:width .25s}
.bdm-cl-barra i.lleno{background:var(--bien)}
.bdm-cl-bloque{margin-bottom:18px}
.bdm-cl-bloque h3{margin:0 0 8px; font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--az)}
.bdm-cl-p{display:flex; gap:11px; align-items:flex-start; padding:10px 12px; border-radius:10px;
	background:#0e2237; border:1px solid var(--f2); margin-bottom:7px; cursor:pointer; transition:.12s}
.bdm-cl-p:hover{border-color:var(--az)}
.bdm-cl-p.si{opacity:.6; border-color:rgba(79,195,140,.5)}
.bdm-cl-p.si b{text-decoration:line-through}
.bdm-cl-p input{margin-top:2px; width:17px; height:17px; accent-color:var(--bien); flex:0 0 auto; cursor:pointer}
.bdm-cl-p b{display:block; font-size:13.5px; color:var(--tx); font-weight:600; line-height:1.35}
.bdm-cl-p span{display:block; margin-top:3px; font-size:11.5px; color:var(--tx2); line-height:1.5}
.bdm-cl-p span.auto{color:var(--az); font-weight:600}
.bdm-cl-pie{margin:6px 2px 0; font-size:11.5px; color:var(--tx2); line-height:1.55}

/* ---------- rayos ---------- */
.bdm-rayos{margin-top:12px}
.bdm-ry-t{margin:0 0 10px; font-size:12.5px; color:var(--tx2); line-height:1.6; max-width:75ch}
.bdm-ry-t b{color:var(--ojo)}
.bdm-ry-img{display:block; width:100%; max-width:760px; border-radius:10px; border:1px solid var(--f2)}
#bdm-ry-cuando{color:var(--tx2); font-weight:500; font-size:12.5px}
/* el cuadro del mapa, ya en su pestaña, ocupa todo lo alto que se le da */
#bdm-mapa-hueco{height:auto}
#bdm-mapa-hueco .bdm-mapa-caja{height:min(72vh,780px); margin-bottom:10px}
#bdm-mapa-hueco .bdm-mapa{height:100%}

/* ---------- avisos agrupados por comunidad ---------- */
.bdm-com{margin-bottom:20px; border-left:3px solid var(--f2); padding-left:13px}
.bdm-com-t{display:flex; align-items:center; gap:10px; margin:0 0 10px}
.bdm-com-t b{font-size:15px; color:var(--tx); letter-spacing:.01em}
.bdm-com-pun{display:flex; gap:5px}
.bdm-com-pun i{display:grid; place-items:center; min-width:20px; height:20px; padding:0 5px;
	border-radius:999px; font-style:normal; font-size:11px; font-weight:700; color:#0b1a2b}
.bdm-com-pun i.rojo{background:var(--mal); color:#fff}
.bdm-com-pun i.naranja{background:#e8913a}
.bdm-com-pun i.amarillo{background:#e8d44a}
.bdm-com .bdm-zona{margin-bottom:10px}
.bdm-com .bdm-zona-t b{font-size:13px; color:var(--tx2); font-weight:600}
.bdm-larga .seco{color:var(--tx2); opacity:.6}
.bdm-larga .cae{font-weight:600}
.bdm-larga .cae.algo{color:#9fd8e8}
.bdm-larga .cae.ojo{color:var(--az)}
.bdm-larga .cae.mal{color:#7fb3ff}

/* ---------- rissaga ---------- */
.bdm-ris{margin-bottom:12px; border-left:4px solid var(--f2)}
.bdm-ris.n1{border-left-color:var(--az)}
.bdm-ris.n2{border-left-color:var(--ojo); background:linear-gradient(180deg,rgba(232,177,58,.07),transparent 60%)}
.bdm-ris.n3{border-left-color:var(--mal); background:linear-gradient(180deg,rgba(224,90,79,.10),transparent 60%)}
.bdm-ris-nivel{font-size:11px; letter-spacing:.08em; text-transform:uppercase;
	padding:5px 11px; border-radius:999px; background:#0e2237; border:1px solid var(--f2); color:var(--tx2)}
.bdm-ris.n2 .bdm-ris-nivel{color:var(--ojo); border-color:var(--ojo)}
.bdm-ris.n3 .bdm-ris-nivel{color:#fff; background:var(--mal); border-color:var(--mal)}
#bdm-ris-d{margin:2px 0 10px; font-size:13.5px; line-height:1.6; color:var(--tx); max-width:80ch}
.bdm-ris-f{padding:9px 11px; border-radius:9px; background:#0e2237; border:1px solid var(--f2); margin-bottom:7px}
.bdm-ris-f b{display:block; font-size:12.5px; color:var(--az)}
.bdm-ris-f span{display:block; margin-top:3px; font-size:11.5px; color:var(--tx2); line-height:1.55}
.bdm-ris-q{margin-top:10px}
.bdm-ris-q summary{cursor:pointer; font-size:12px; color:var(--tx2)}
.bdm-ris-q p{font-size:12px; color:var(--tx2); line-height:1.65; max-width:80ch; margin:8px 0 0}
.bdm-ris-q b{color:var(--ojo)}

/* ---------- leer el mapa con el ratón ---------- */
/* por encima de los botones de capa: es lo que estás mirando ahora mismo
   y se va solo en cuanto sacas el ratón */
.bdm-lectura{position:absolute; z-index:900; pointer-events:none;
	background:rgba(9,22,36,.92); border:1px solid var(--f2); border-radius:9px;
	padding:6px 10px; color:var(--tx); backdrop-filter:blur(3px);
	box-shadow:0 6px 18px rgba(0,0,0,.35); white-space:nowrap}
.bdm-lectura b{display:block; font-size:15px; font-weight:700; line-height:1.15;
	font-variant-numeric:tabular-nums}
.bdm-lectura span{display:block; margin-top:1px; font-size:11px; color:var(--tx2)}

/* ---------- check list · material de seguridad ---------- */
#bdm-p-lista .bdm-cl-intro{margin:0; font-size:13.5px; line-height:1.6; color:var(--tx2); max-width:75ch}
.bdm-cl-paso{margin-top:12px}
.bdm-cl-t{display:flex; align-items:center; gap:11px; margin-bottom:6px}
.bdm-cl-t h3{margin:0; font-size:17px; color:var(--tx)}
.bdm-cl-n{display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
	background:var(--az); color:#fff; font-weight:700; font-size:14px; flex:0 0 auto}
.bdm-cl-l{display:block; margin:16px 0 7px; font-size:12px; letter-spacing:.06em;
	text-transform:uppercase; color:var(--az); font-weight:600}
.bdm-cl-l small{text-transform:none; letter-spacing:0; color:var(--tx2); font-weight:400; margin-left:6px}
#bdm-p-lista .bdm-cl-p{margin:0 0 8px; font-size:12.5px; color:var(--tx2); line-height:1.55; max-width:75ch}
.bdm-cl-rej{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:11px; margin-top:10px}
.bdm-cl-c{display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--tx2)}
.bdm-cl-c small{color:var(--tx2); opacity:.75}
.bdm-cl-c input{background:#0e2237; border:1px solid var(--f2); color:var(--tx); border-radius:9px;
	padding:9px 11px; font-size:14px; font-family:inherit}
.bdm-cl-c input:focus{outline:none; border-color:var(--az)}
.bdm-chips{display:flex; flex-wrap:wrap; gap:7px}
.bdm-chip{background:#0e2237; border:1px solid var(--f2); color:var(--tx2); border-radius:999px;
	padding:8px 14px; font-size:12.5px; cursor:pointer; font-family:inherit; transition:.12s}
.bdm-chip:hover{border-color:var(--az); color:var(--tx)}
.bdm-chip.on{background:var(--az); border-color:var(--az); color:#fff; font-weight:600}
.bdm-zonas{display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:7px; margin-bottom:4px}
.bdm-zb{background:#0e2237; border:1px solid var(--f2); color:var(--tx2); border-radius:11px;
	padding:11px 6px; cursor:pointer; font-family:inherit; font-size:15px; font-weight:700; transition:.12s}
.bdm-zb small{display:block; font-size:10.5px; font-weight:400; color:var(--tx2); margin-top:2px}
.bdm-zb:hover{border-color:var(--az)}
.bdm-zb.on{background:var(--az); border-color:var(--az); color:#fff}
.bdm-zb.on small{color:rgba(255,255,255,.85)}
.bdm-cl-aviso{margin:14px 0 0; padding:10px 13px; border-radius:9px; font-size:13px;
	background:rgba(232,177,58,.12); border:1px solid var(--ojo); color:var(--tx)}
.bdm-cl-ver{margin-top:14px; background:var(--az); border:none; color:#fff; border-radius:10px;
	padding:12px 22px; font-size:14.5px; font-weight:600; cursor:pointer; font-family:inherit}
.bdm-cl-ver:hover{filter:brightness(1.12)}
.bdm-cl-lista{margin-top:12px}
.bdm-cl-pie{margin:12px 2px 0; font-size:11.5px; color:var(--tx2); line-height:1.6; max-width:80ch}

/* lo que pinta el motor legal */
#bdm-cl-out .cabe{display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding-bottom:12px; border-bottom:1px solid var(--f2); margin-bottom:14px}
#bdm-cl-out .cabe .t{font-size:16px; font-weight:600; color:var(--tx)}
#bdm-cl-out .cabe .t small{display:block; font-size:12px; color:var(--tx2); font-weight:400; margin-top:2px}
#bdm-cl-out .pct{font-size:24px; font-weight:700; color:var(--az); font-variant-numeric:tabular-nums}
#bdm-cl-out .btn.ghost{background:#0e2237; border:1px solid var(--f2); color:var(--tx2);
	border-radius:999px; padding:7px 15px; font-size:12px; cursor:pointer; font-family:inherit}
#bdm-cl-out .grp{margin-bottom:18px}
#bdm-cl-out .grp-h{font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--az);
	font-weight:600; margin-bottom:8px}
#bdm-cl-out .it{display:flex; gap:11px; align-items:flex-start; padding:11px 13px; border-radius:10px;
	background:#0e2237; border:1px solid var(--f2); margin-bottom:7px; cursor:pointer; transition:.12s}
#bdm-cl-out .it:hover{border-color:var(--az)}
#bdm-cl-out .it.ok{opacity:.55; border-color:rgba(79,195,140,.5)}
#bdm-cl-out .it input{margin-top:3px; width:17px; height:17px; accent-color:var(--bien); flex:0 0 auto; cursor:pointer}
#bdm-cl-out .it .info{flex:1; font-size:13.5px; color:var(--tx); line-height:1.45}
#bdm-cl-out .it .q{font-weight:700; color:var(--az)}
#bdm-cl-out .it .n{display:block; margin-top:3px; font-size:11.5px; color:var(--tx2); line-height:1.5}
#bdm-cl-out .it .cr{flex:0 0 auto; align-self:flex-start; font-size:9.5px; font-weight:700;
	letter-spacing:.08em; color:var(--mal); border:1px solid var(--mal); border-radius:99px; padding:2px 7px}
#bdm-cl-out .verlink{display:inline-block; margin-top:5px; font-size:11.5px; color:var(--az); cursor:pointer}
#bdm-cl-out .expand{display:none; margin:-3px 0 8px 40px; padding:12px 14px; border-radius:10px;
	background:#0b1a2b; border:1px solid var(--f2)}
#bdm-cl-out .expand.open{display:block}
#bdm-cl-out .expand b{font-size:13px; color:var(--tx)}
#bdm-cl-out .expand table{width:100%; border-collapse:collapse; margin:8px 0; font-size:12.5px}
#bdm-cl-out .expand td{padding:5px 8px; border-bottom:1px solid rgba(26,53,80,.6); color:var(--tx2)}
#bdm-cl-out .expand td:last-child{text-align:right; color:var(--tx); font-weight:600}
#bdm-cl-out .expand .note{font-size:12px; color:var(--tx2); line-height:1.6; margin-top:6px}
#bdm-cl-out .expand ul{margin:6px 0 0 17px}
#bdm-cl-out .expand li{margin-bottom:4px}
#bdm-cl-out .tip{margin-top:14px; padding:11px 14px; border-radius:10px; font-size:12.5px;
	background:rgba(47,155,224,.10); border:1px solid rgba(47,155,224,.4); color:var(--tx2); line-height:1.6}
#bdm-cl-out .sos{margin-top:9px; padding:11px 14px; border-radius:10px; font-size:12.5px;
	background:rgba(224,90,79,.10); border:1px solid rgba(224,90,79,.45); color:var(--tx); line-height:1.6}

/* EL DESCARGO DE LA RISSAGA.
   Se ve, pero no compite con el aviso. Ni tan flojo que no se lea ni tan
   fuerte que tape lo importante, que es el aviso de arriba. No se quita:
   sin esto el aviso no se publica. */
.bdm .bdm-ris-legal{
  margin-top:12px; padding:11px 13px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--f2); border-left:3px solid var(--tx2);
  border-radius:8px;
  color:var(--tx2); font-size:11.5px; line-height:1.6;
}
.bdm .bdm-ris-legal b{color:var(--tx)}

/* Cuando una tabla no tiene nada que decir, lo dice. Antes se quedaba muda y
   parecia rota. */
.bdm .bdm-larga-vacia td{
  padding:20px 16px; text-align:center; color:var(--tx2);
  font-size:12.5px; line-height:1.7; background:rgba(255,255,255,.02);
}
.bdm .bdm-larga-vacia b{color:var(--tx)}