/* BURROS DE COMBATE — diseño «carta y campaña»: grafito, caqui y ocre; números en JetBrains Mono. */
:root{
  --fondo:#14150f; --panel:#1c1e16; --panel2:#24271c; --linea:#353a29; --texto:#ece8d8; --suave:#a3a28c; --tenue:#6f705e;
  --ocre:#e3a63a; --ocre2:#f2c46b; --verde:#8fbf5a; --rojo:#e86a4c; --azul:#6fb3d9;
  --mono:'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --r:10px; color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--sans);font-size:15px;-webkit-text-size-adjust:100%}
body{min-height:100vh;padding-bottom:calc(70px + env(safe-area-inset-bottom))}
button,input,select,textarea{font:inherit;color:inherit}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* barra superior y pestañas */
.barra-sup{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top)) 14px 8px;
  background:#14150f;border-bottom:1px solid var(--linea)}
.logo{width:34px;height:34px;border-radius:8px}
.titulos{min-width:0;flex:1}
.marca{font-family:var(--mono);font-weight:700;letter-spacing:.08em;font-size:14px;color:var(--ocre)}
.sub{font-size:12px;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pestanas{position:fixed;left:0;right:0;bottom:0;display:flex;background:#171812;box-shadow:0 -6px 14px #000a;border-top:1px solid var(--linea);padding-bottom:env(safe-area-inset-bottom);z-index:30}
.pestanas button{flex:1;background:none;border:0;padding:8px 0 7px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--tenue);cursor:pointer}
.pestanas button.on{color:var(--ocre)}
@media (min-width:900px){
  body{padding-bottom:0}
  .pestanas{position:static;background:none;border:0;padding:0;gap:4px;flex:0 0 auto}
  .pestanas button{flex-direction:row;gap:6px;padding:8px 12px;border-radius:8px;font-size:14px}
  .pestanas button.on{background:var(--panel2)}
}

main{max-width:1100px;margin:0 auto;padding:14px}
h2{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--suave);text-transform:uppercase;margin:22px 0 10px;font-weight:700}
h2::before{content:'// ';color:var(--ocre)}
h2:first-child{margin-top:4px}
.tarjeta{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);padding:14px;margin-bottom:12px}
.nota{font-size:13px;color:var(--suave);line-height:1.45}
.nota b{color:var(--texto)}
.alerta{border-left:3px solid var(--rojo);background:#2a1a14;padding:10px 12px;border-radius:6px;font-size:13px;margin:10px 0}
.info{border-left:3px solid var(--azul);background:#152028;padding:10px 12px;border-radius:6px;font-size:13px;margin:10px 0;line-height:1.45}
.mono{font-family:var(--mono)}
.vacio{text-align:center;color:var(--suave);padding:30px 10px}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--linea);background:var(--panel2);border-radius:8px;padding:9px 14px;cursor:pointer;font-size:14px;text-decoration:none;color:var(--texto)}
.btn:hover{border-color:var(--tenue)}
.btn.pri{background:var(--ocre);border-color:var(--ocre);color:#1a1405;font-weight:700}
.btn.peligro{color:var(--rojo)}
.btn.mini{padding:5px 9px;font-size:13px}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* formularios */
.campos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
label.c{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--suave)}
label.c.ancho{grid-column:1/-1}
input,select,textarea{background:#11120d;border:1px solid var(--linea);border-radius:7px;padding:9px 10px;font-size:15px;width:100%;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ocre);outline-offset:-1px;border-color:transparent}
input.num{font-family:var(--mono)}
input.mal{border-color:var(--rojo);background:#2a1712}
textarea{min-height:80px;font-family:var(--mono);font-size:12px}
.seg{display:inline-flex;border:1px solid var(--linea);border-radius:8px;overflow:hidden}
.seg button{background:none;border:0;padding:7px 12px;cursor:pointer;color:var(--suave);font-size:13px}
.seg button.on{background:var(--ocre);color:#1a1405;font-weight:700}
details.tarjeta>summary{cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:8px}
details.tarjeta>summary::-webkit-details-marker{display:none}
details.tarjeta>summary::before{content:'▸';color:var(--ocre);transition:transform .15s}
details.tarjeta[open]>summary::before{transform:rotate(90deg)}
details.tarjeta>summary .res{margin-left:auto;font-size:12px;color:var(--suave);font-weight:400;text-align:right}
details.tarjeta[open]>summary{margin-bottom:12px}

/* lista de marchas */
.marcha{display:flex;gap:12px;align-items:center;cursor:pointer}
.marcha .n{font-weight:700}
.marcha .d{font-size:12px;color:var(--suave);font-family:var(--mono);margin-top:3px}
.marcha.on{border-color:var(--ocre)}
.marcha .flecha{margin-left:auto;color:var(--tenue)}

/* puntos de la ruta */
.punto{position:relative;padding:12px 12px 12px 46px}
.punto .ord{position:absolute;left:10px;top:12px;width:26px;height:26px;border-radius:50%;background:var(--panel2);border:1px solid var(--ocre);color:var(--ocre);
  font-family:var(--mono);font-size:12px;display:flex;align-items:center;justify-content:center}
.punto .fila{display:grid;grid-template-columns:1.3fr auto;gap:8px;align-items:end;margin-bottom:8px}
.punto .coords{display:grid;grid-template-columns:70px 1fr 1fr 90px;gap:8px}
.punto .coords.geo{grid-template-columns:1fr 1fr 90px}
.punto .extra{display:grid;grid-template-columns:1fr 90px;gap:8px;margin-top:8px}
.punto .acc{display:flex;gap:4px;margin-top:8px;justify-content:flex-end}
.punto .estado{font-size:11px;font-family:var(--mono);color:var(--tenue);margin-top:6px}
.punto .estado.mal{color:var(--rojo)}
.tramo-entre{font-family:var(--mono);font-size:12px;color:var(--suave);margin:-6px 0 6px 46px;padding:2px 0;display:flex;gap:12px;flex-wrap:wrap}
.tramo-entre b{color:var(--ocre2);font-weight:500}
@media (max-width:520px){
  .punto .coords{grid-template-columns:60px 1fr 1fr}
  .punto .coords .cota{grid-column:1/-1}
  .punto .coords.geo{grid-template-columns:1fr 1fr}
}

/* resumen */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.kpi{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);padding:12px}
.kpi .k{font-size:11px;color:var(--suave);text-transform:uppercase;letter-spacing:.05em}
.kpi .v{font-family:var(--mono);font-size:22px;font-weight:700;margin-top:4px}
.kpi .v small{font-size:13px;color:var(--suave);font-weight:500}
.kpi.ocre{border-color:var(--ocre)} .kpi.ocre .v{color:var(--ocre)}
.desglose{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--mono);font-size:12px;color:var(--suave);margin:-2px 0 12px}
.desglose b{color:var(--texto);font-weight:500}

/* tablas */
.tabla-env{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--r);background:var(--panel)}
table.t{border-collapse:collapse;width:100%;font-size:13px}
table.t th{font-size:11px;color:var(--suave);text-align:right;padding:8px;border-bottom:1px solid var(--linea);font-weight:600;white-space:nowrap;vertical-align:bottom;background:var(--panel2)}
table.t td{padding:7px 8px;border-bottom:1px solid #2a2e20;text-align:right;font-family:var(--mono);white-space:nowrap}
table.t td.tx,table.t th.tx{text-align:left;font-family:var(--sans)}
table.t td.obs{white-space:normal;min-width:140px;color:var(--suave)}
table.t tr.tot td{font-weight:700;border-top:2px solid var(--linea);background:var(--panel2)}
table.t .sube{color:var(--rojo)} table.t .baja{color:var(--azul)}
table.t .fuerte{color:var(--ocre2);font-weight:700}
table.t td .s{display:block;font-size:10px;color:var(--tenue)}
/* tarjetas del cuadro en teléfono */
.tramos-cel{display:none}
@media (max-width:700px){
  .solo-ancho{display:none}
  .tramos-cel{display:block}
}
.tc{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);padding:10px 12px;margin-bottom:8px}
.tc .cab{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tc .cab b{font-size:15px}
.tc .cab .hora{font-family:var(--mono);color:var(--ocre);font-weight:700;font-size:16px}
.tc .datos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px;font-family:var(--mono);font-size:13px}
.tc .datos span{display:block;font-family:var(--sans);font-size:10px;color:var(--tenue);text-transform:uppercase}
.tc .rumbo{font-size:18px;color:var(--ocre2)}

/* perfil */
.perfil-env{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);padding:8px;overflow-x:auto}
.perfil-env svg{display:block;width:100%;min-width:640px;height:auto}
.perfil-env text{font-family:var(--mono)}

/* enviar */
.mensaje{white-space:pre-wrap;word-break:break-all;font-family:var(--mono);font-size:12px;background:#11120d;border:1px solid var(--linea);border-radius:8px;padding:10px;max-height:180px;overflow:auto}
.qr{background:#fff;padding:12px;border-radius:8px;display:inline-block;margin-top:10px}
.qr svg,.qr img{display:block;width:min(70vw,300px);height:auto}
.formatos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.formatos .btn{flex-direction:column;align-items:flex-start;padding:12px;text-align:left}
.formatos .btn small{color:var(--suave);font-size:12px;font-weight:400}

/* avisos y diálogo */
.aviso{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ocre);color:#1a1405;font-weight:700;
  padding:10px 16px;border-radius:999px;z-index:50;box-shadow:0 6px 24px #0008;max-width:90vw;text-align:center;font-size:14px}
dialog{background:var(--panel);color:var(--texto);border:1px solid var(--linea);border-radius:14px;padding:18px;max-width:min(560px,94vw);width:100%}
dialog::backdrop{background:#000a}
dialog h3{margin:0 0 10px;font-size:17px}
video.lector{width:100%;border-radius:8px;background:#000}

/* impresión (cuadro de marcha y ficha de navegación para anexar a la OPORD) */
.solo-imp{display:none}
@media print{
  :root{--fondo:#fff;--panel:#fff;--panel2:#eee;--linea:#999;--texto:#000;--suave:#333;--tenue:#555;--ocre:#000;--ocre2:#000;color-scheme:light}
  body{padding:0;font-size:11px;background:#fff}
  .barra-sup,.pestanas,.btns,.no-imp,.tramos-cel,.aviso{display:none!important}
  .solo-ancho{display:block!important} .solo-imp{display:block}
  main{max-width:none;padding:0}
  .tabla-env{overflow:visible;border:0}
  table.t{font-size:9.5px} table.t th,table.t td{padding:3px 4px;border:1px solid #999}
  .kpi{border:1px solid #999} .kpi .v{font-size:15px}
  .perfil-env{border:0;padding:0} .perfil-env svg{min-width:0}
  h2{color:#000;margin:10px 0 6px} h2::before{content:''}
  .salto{break-before:page}
}

/* lista de verificación */
.lista{padding:4px 14px}
.lista .item{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid #2a2e20;cursor:pointer;line-height:1.4;font-size:14px}
.lista .item:last-child{border-bottom:0}
.lista .item input{width:20px;height:20px;flex:0 0 auto;margin-top:1px;accent-color:var(--ocre)}
.lista .item small{font-family:var(--mono);font-size:10px;color:var(--tenue);white-space:nowrap}
.lista .item input:checked+span{color:var(--tenue);text-decoration:line-through}
@media (max-width:420px){ .pestanas button{font-size:10px;min-width:0;overflow:hidden;white-space:nowrap;letter-spacing:-.2px} .pestanas button .ico{width:21px;height:21px} }

/* mapa */
.ruta-modo{margin-bottom:12px}
body.con-mapa main{max-width:none;padding:0}
body.con-mapa .ruta-modo{position:absolute;z-index:1001;left:50%;transform:translateX(-50%);margin:8px 0 0;background:var(--panel);box-shadow:0 2px 10px #0008}
#mapaCont{position:relative}
.mapa-env{position:relative;height:calc(100dvh - 58px - 62px - env(safe-area-inset-bottom) - env(safe-area-inset-top))}
@media (min-width:900px){ .mapa-env{height:calc(100dvh - 58px)} }
#mapa{position:absolute;inset:0;background:#d8d4c4}
.mapa-env.agregando #mapa{cursor:crosshair}
.m-sup{position:absolute;z-index:1000;top:52px;left:56px;right:10px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.m-sup .seg{background:var(--panel);box-shadow:0 2px 10px #0008}
.m-sup .seg button{padding:6px 9px;font-size:12px}
.m-sup .btn{box-shadow:0 2px 10px #0008}
.m-sup .btn.on{border-color:var(--ocre);color:var(--ocre)}
.m-lectura{position:absolute;z-index:1000;top:8px;right:10px;background:#14150fdd;color:var(--texto);font-size:11px;padding:5px 8px;border-radius:6px;pointer-events:none;max-width:calc(100% - 20px)}
body.con-mapa .m-lectura{top:auto;bottom:118px;right:10px}
.m-cruz{position:absolute;z-index:999;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;pointer-events:none;opacity:.55;
  background:linear-gradient(#14150f,#14150f) center/2px 100% no-repeat,linear-gradient(#14150f,#14150f) center/100% 2px no-repeat}
.m-inf{position:absolute;z-index:1000;left:10px;right:10px;bottom:10px;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.m-inf>*{pointer-events:auto}
.m-res{background:#14150fe6;border:1px solid var(--linea);border-radius:8px;padding:7px 10px;font-size:12px;align-self:flex-start;max-width:100%}
.m-res b{color:var(--ocre)}
.m-acc{display:flex;gap:6px}
.m-acc .btn{box-shadow:0 2px 10px #0008}
.m-acc #mAgregar{flex:1}
@media (min-width:700px){ .m-acc #mAgregar{flex:0 0 auto} }
.m-hoja{position:absolute;z-index:1002;left:10px;right:10px;bottom:10px;max-width:420px;background:var(--panel);border:1px solid var(--ocre);border-radius:12px;padding:12px;box-shadow:0 6px 24px #000a;max-height:70%;overflow:auto}
.m-hoja .cab{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.m-hoja .cab .ord{width:26px;height:26px;border-radius:50%;border:1px solid var(--ocre);color:var(--ocre);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;flex:0 0 auto}
.m-hoja .cab input{font-weight:700}
.m-hoja .nota{margin:4px 0 8px;font-size:11.5px}
.m-pto{background:none;border:0}
.m-pto .n{position:absolute;inset:0;border-radius:50%;background:#14150f;border:2px solid var(--ocre);color:var(--ocre);font:700 12px var(--mono);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 6px #0009}
.m-pto.ini .n{background:var(--ocre);color:#14150f}
.m-pto.sel .n{background:#fff;color:#14150f;border-color:#fff;transform:scale(1.2)}
.m-pto .et{position:absolute;left:30px;top:3px;white-space:nowrap;background:#14150fd9;color:var(--texto);font:11px var(--sans);padding:2px 6px;border-radius:4px;pointer-events:none}
.m-pto .et b{color:var(--ocre2)}
.m-gridlab{background:none;border:0;color:#1d3b8a;font:700 12px var(--mono);text-shadow:0 0 3px #fff,0 0 3px #fff;white-space:nowrap}
.m-gridlab small{font-size:9px}
.m-gridlab.v{transform:translateX(-50%)}
.m-gridlab.h{transform:translateY(-50%)}
.leaflet-container{font-family:var(--sans)}
.leaflet-tooltip{font-size:12px}
.calce{position:relative;max-height:50vh;overflow:auto;border:1px solid var(--linea);border-radius:8px;margin:8px 0}
.calce-in{position:relative;display:inline-block;min-width:100%}
.calce img{display:block;max-width:100%;cursor:crosshair}
.calce .mk{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--rojo);color:#fff;font:700 12px var(--mono);display:flex;align-items:center;justify-content:center;pointer-events:none}
.m-pto.multi .n{border-radius:13px;width:auto;min-width:26px;padding:0 6px;right:auto;font-size:11px}
@media (max-width:520px){ .ruta-modo .largo{display:none} }

/* subpestañas del cuadro */
.subv{margin-bottom:12px;display:flex;width:fit-content;max-width:100%}
/* aviso de versión nueva */
.nueva-version{position:fixed;z-index:60;left:50%;top:calc(64px + env(safe-area-inset-top));transform:translateX(-50%);background:var(--azul);color:#0b1a24;border:0;border-radius:999px;
  padding:10px 16px;font-weight:700;box-shadow:0 6px 24px #0008;cursor:pointer;max-width:92vw}

/* seguir la marcha */
.btn.grande{width:100%;padding:16px;font-size:18px;margin:6px 0 10px}
.s-estado{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:13px;color:var(--suave);flex-wrap:wrap}
.s-estado .mal{color:var(--rojo);font-weight:700} .s-estado .bien{color:var(--verde);font-weight:700}
.s-prox{margin-top:10px;font-size:13px;color:var(--suave);letter-spacing:.05em}
.s-prox b{font-size:24px;color:var(--texto);letter-spacing:0;margin-left:4px}
.s-prox small{display:block;font-size:13px;letter-spacing:0;margin-top:2px}
.s-grande{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:center;margin:10px 0 4px}
.s-grande span{display:block;font-size:11px;color:var(--suave);text-transform:uppercase}
.s-grande b{font-family:var(--mono);font-size:30px;line-height:1.1}
.s-grande b.ocre{color:var(--ocre)}
.s-grande small{display:block;font-family:var(--mono);color:var(--suave);font-size:13px}
.s-flecha{width:64px;height:64px;border-radius:50%;border:2px solid var(--ocre);display:flex;align-items:center;justify-content:center;font-size:34px;color:var(--ocre);transition:transform .3s}
.s-mapa{height:230px;border-radius:var(--r);overflow:hidden;border:1px solid var(--linea);margin:0 0 12px;background:#d8d4c4}
.s-acc{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.s-acc #sLleg{grid-column:1/-1;padding:14px;font-size:16px}
@media (min-width:700px){ .s-acc{grid-template-columns:repeat(6,1fr)} }
/* perfil bajo el mapa */
.m-perfil{background:#14150fee;border:1px solid var(--linea);border-radius:10px;padding:4px 6px 2px;max-height:42vh;overflow:hidden}
.m-perfil svg{display:block;width:100%;height:auto;max-height:200px;touch-action:none;cursor:crosshair}
.m-perfil svg text{font-family:var(--mono)}
.m-perfil-txt{font-size:11px;padding:0 4px 4px}
.m-acc .btn.on{border-color:var(--ocre);color:var(--ocre)}
/* seguir: carta a pantalla completa */
.s-carta #sMapa{position:absolute;inset:0;background:#d8d4c4}
.s-modos{position:absolute;z-index:1001;top:8px;left:50%;transform:translateX(-50%);background:var(--panel);box-shadow:0 2px 10px #0008;white-space:nowrap}
.s-modos button{padding:7px 10px;font-size:12.5px}
#seguir>.s-modos{position:static;transform:none;margin-bottom:12px;display:flex;width:fit-content;max-width:100%}
.s-hud{position:absolute;z-index:1000;top:52px;left:10px;right:10px;max-width:520px;background:#14150fee;border:1px solid var(--linea);border-radius:12px;padding:10px 12px;box-shadow:0 4px 16px #0009}
.s-hud .hud1{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--suave);align-items:baseline}
.s-hud .hud1 b{font-size:20px;color:var(--texto);margin-left:4px}
.s-hud .hud1 small{color:var(--suave)}
.s-hud .hud1 .mal{color:var(--rojo);font-weight:700} .s-hud .hud1 .bien{color:var(--verde);font-weight:700}
.s-hud .hud2{display:flex;align-items:center;gap:14px;margin:4px 0}
.s-hud .hud2 b{font-family:var(--mono);font-size:26px}
.s-hud .hud2 b.ocre{color:var(--ocre)}
.s-hud .hud2 small{font-family:var(--mono);color:var(--suave);font-size:13px}
.s-hud .hud3{font-size:11px;color:var(--suave)}
.s-hud .alerta,.s-hud .info{margin:6px 0 2px;padding:6px 8px}
.s-flecha.mini{width:42px;height:42px;font-size:22px;margin-left:auto}
.s-centrar{position:absolute;z-index:1000;right:10px;bottom:132px;box-shadow:0 2px 10px #0008;font-size:18px}
.s-pie{position:absolute;z-index:1000;left:10px;right:10px;bottom:10px}
.s-pie .s-acc{grid-template-columns:repeat(5,1fr);gap:5px}
.s-pie .s-acc #sFin{grid-column:auto}
.s-pie .s-acc .btn{box-shadow:0 2px 10px #0008;padding:8px 2px;font-size:12px;line-height:1.2}
.s-pie .s-acc #sLleg{padding:13px;font-size:16px}
.s-etq{background:#14150fd9;color:#ece8d8;border:0;font-weight:700;font-size:11px;padding:1px 5px;box-shadow:none}
.s-etq::before{display:none}
/* nombres clave */
.clave-et{display:inline-block;margin-left:6px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#14150f;background:var(--ocre);border-radius:4px;padding:1px 5px;vertical-align:1px}
.clave-tx{font-family:var(--mono);color:var(--ocre);letter-spacing:.05em}
input.clave{text-transform:uppercase;letter-spacing:.05em}
@media print{ .clave-et{background:none;border:1px solid #000;color:#000} }
.m-pto .et i.clave{font-style:normal;font-family:var(--mono);font-weight:700;color:#14150f;background:var(--ocre);border-radius:3px;padding:0 4px;margin-right:2px}
/* matriz de eventos */
table.matriz tr.pend td{color:var(--tenue)}
table.matriz tr.pend td b{font-weight:500}
table.matriz tr.alto td b{color:var(--azul)} table.matriz tr.nov td b{color:var(--rojo)}
table.matriz tr.ini td b,table.matriz tr.fin td b{color:var(--ocre)}
.s-prox small{display:block}
.mapa-env:has(#mPerfil:not([hidden])) .m-lectura{display:none}
table.matriz td.ev{white-space:normal;min-width:150px}
table.matriz tr.alto td.ev{color:var(--azul)} table.matriz tr.nov td.ev{color:var(--rojo)}
table.matriz tr.ini td.ev,table.matriz tr.fin td.ev{color:var(--ocre);font-weight:700}
table.matriz tr.pend td.ev{color:var(--tenue)}
.clave-ev{font-family:var(--mono);font-size:12px;color:var(--suave);white-space:nowrap}
.clave-ev b{color:#14150f;background:var(--ocre);border-radius:4px;padding:1px 5px;letter-spacing:.05em}
.tc-ev{margin-top:8px}
@media print{ .clave-ev b{background:none;color:#000;border:1px solid #000} }
/* puntos de ruta (quiebres) y eventos */
.m-ruta{background:#fff;border:3px solid #14150f;border-radius:50%;box-shadow:0 1px 4px #0008}
.m-ruta.sel{background:var(--ocre);transform:scale(1.3)}
.mapa-env.agregando .m-ruta{cursor:move}
.h-ev{display:flex;gap:8px;align-items:center;font-size:13px;margin:4px 0 8px;color:var(--suave)}
.h-ev input{width:20px;height:20px;accent-color:var(--ocre)}
.h-ev b{color:var(--ocre)}
.punto.ruta{opacity:.8;border-style:dashed}
.punto .h-ev{margin:-2px 0 8px}
table.t tr.sub td{color:var(--tenue);font-size:12px;padding-top:4px;padding-bottom:4px;background:#191b14}
table.t tr.sub td.sube,table.t tr.sub td.baja,table.t tr.sub td.fuerte{opacity:.8}
/* quiebres plegados en el cuadro */
table.t tr.sub[data-g]{display:none}
table.t tr.sub[data-g].ver{display:table-row}
table.t tr.conq{cursor:pointer}
table.t tr.conq:hover td{background:#22251b}
.plie{display:inline-block;width:14px;color:var(--ocre);transition:transform .15s}
tr.abierto .plie{transform:rotate(90deg)}
@media print{ .solo-imp table.t tr.sub{display:table-row} .plie{display:none} }
.subv{flex-wrap:wrap}
/* cuadro de marcha y navegación: columnas «al siguiente» levemente destacadas */
table.cmn th.sig{background:#2a2d20}
table.cmn td.sig{background:#ffffff05}
table.cmn tr.sub td.sig{background:#ffffff03}
.tc.quiebre{padding:6px 12px;font-size:12px;color:var(--tenue);font-family:var(--mono);border-style:dashed;background:transparent}
.tc.quiebre b{color:var(--suave)}

/* pestaña Luz */
.luz-cab{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.luz-cab .k{font-size:11px;color:var(--suave);text-transform:uppercase;letter-spacing:.05em}
.luz-cab .v{font-size:20px;font-weight:700}
.luz-graf svg{min-width:640px}
.luz-ley{display:flex;flex-wrap:wrap;gap:6px 14px;margin:6px 0 12px}
.luz-ley i,.pz{display:inline-block;width:12px;height:12px;border-radius:2px;vertical-align:-1px;margin-right:5px;border:1px solid #444}
.luz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.tarjeta h3{margin:0 0 8px;font-size:15px;display:flex;align-items:center;gap:8px}
table.luz-t td{padding:6px 4px}
table.t tr.noct td{background:#161a2b}
.luzico{margin-left:4px;font-size:12px;color:var(--suave)}
table.luz-crep td.obs{min-width:280px}
/* seguir: antes de partir */
.prev-datos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 10px;margin:8px 0 6px}
.prev-datos span{display:block;font-size:10px;color:var(--suave);text-transform:uppercase;letter-spacing:.04em}
.prev-datos b{font-family:var(--mono);font-size:19px}
.prev-datos b.ocre{color:var(--ocre)} .prev-datos small{color:var(--suave);font-size:11px}
.s-hud .bien{color:var(--verde)} .s-hud .ocre{color:var(--ocre)}
.s-pie .btn.grande{margin:0;box-shadow:0 4px 18px #000a}
.s-ayuda{margin:6px 2px 0;font-size:11px;color:var(--texto);text-shadow:0 1px 3px #000,0 0 6px #000;text-align:center}
/* esquema de crepúsculos */
.luz-esq{background:#101109;margin-bottom:8px}
.luz-esq svg{min-width:680px}
.luz-barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 8px}
.luz-barra input[type=range]{flex:1;min-width:200px;accent-color:var(--ocre);padding:0;border:0;background:none}
.luz-barra #lHora{font-size:20px;font-weight:700;color:var(--ocre);min-width:58px}
.luz-barra #lTxt{flex-basis:100%;margin:0}

/* ===== documento / orden gráfica (vista previa en hojas blancas e impresión) ===== */
#docVista{position:fixed;inset:0;z-index:2000;background:#3a3c34;overflow:auto;padding:0 0 40px}
body.con-doc{overflow:hidden}
.doc-barra{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;background:var(--fondo);border-bottom:1px solid var(--linea)}
.doc-barra .nota{flex:1;min-width:160px}
.doc-config{max-width:900px;margin:12px auto}
.doc-secs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px 14px}
.doc-secs label{display:flex;gap:8px;align-items:center;font-size:14px;cursor:pointer}
.doc-secs input{width:18px;height:18px;accent-color:var(--ocre)}
.doc-paginas{margin:0 auto;padding:0 10px}
.doc-paginas.vertical{max-width:210mm} .doc-paginas.apaisado{max-width:297mm}
.doc-hoja{position:relative;background:#fff;color:#111;font-family:Helvetica,Arial,sans-serif;font-size:11px;line-height:1.35;padding:14mm 12mm;box-shadow:0 6px 30px #0008;margin:14px 0}
.doc-hoja .doc-clasif{position:absolute;left:0;right:0;text-align:center;font-weight:700;font-size:12px;letter-spacing:.12em;color:#000}
.doc-hoja .doc-clasif.arriba{top:5mm} .doc-hoja .doc-clasif.abajo{bottom:5mm}
.doc-cab{display:flex;justify-content:space-between;gap:20px;font-size:10.5px;text-transform:uppercase;margin-bottom:8px}
.doc-cab .der{text-align:right;font-weight:700;max-width:50%}
.doc-cab.civ{text-transform:none;color:#555}
.doc-tit{text-align:center;font-size:16px;margin:10px 0 2px;letter-spacing:.04em;text-decoration:underline}
.doc-tit.civ{text-decoration:none;font-size:20px;letter-spacing:0}
.doc-sub{text-align:center;font-size:12px;font-weight:700;margin-bottom:8px}
.doc-ref{font-size:10.5px;margin:6px 0}
.doc-ref.civ{color:#777;text-align:center;margin-top:14px}
.doc-res{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0 14px}
.doc-res .dr{display:flex;gap:8px;align-items:flex-start;border:1px solid #bbb;border-radius:6px;padding:7px 8px;background:#fafafa}
.doc-res .dr svg{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:#333;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.doc-res span{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.06em;color:#555}
.doc-res b{display:block;font-size:15px;line-height:1.15;color:#111;font-variant-numeric:tabular-nums}
.doc-res small{display:block;font-size:8.5px;color:#666;margin-top:1px}
.doc-res .dr.dest{border:1.5px solid #111;background:#fff} .doc-res .dr.dest b{font-size:18px}
/* civil: con color */
.doc-hoja.civil .doc-res .dr{border:0;border-top:3px solid #c98a1f;background:#fbf6ec;border-radius:4px}
.doc-hoja.civil .doc-res .dr.dest{border-top-color:#8a5d17;background:#f6ecd6} .doc-hoja.civil .doc-res .dr svg{stroke:#8a5d17}
.doc-hoja.civil .doc-res .dr.dest b{color:#5a3c0b}
.doc-hoja.civil .doc-h2{border-bottom-color:#c98a1f;color:#5a3c0b}
.doc-hoja.civil .doc-tit{color:#5a3c0b}
@media (max-width:640px){ .doc-res{grid-template-columns:repeat(2,1fr)} }
.doc-hoja .doc-res .dr,.doc-hoja .doc-res .dr svg{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.doc-sec{margin-top:12px}
.doc-sec.salto{break-before:page;page-break-before:always;padding-top:4mm}
.doc-h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1.5px solid #111;margin:0 0 6px;padding-bottom:2px;color:#111}
.doc-h2::before{content:none}
.doc-h3{font-size:11.5px;margin:10px 0 4px}
.doc-nota{font-size:10px;color:#333;margin:5px 0}
.doc-hoja .tabla-env{overflow:visible;border:0;background:none}
.doc-hoja table.t{font-size:9.2px;width:100%;border-collapse:collapse;color:#111}
.doc-hoja table.t th,.doc-hoja table.t td{border:1px solid #888;padding:2px 4px;background:#fff;color:#111;font-family:Helvetica,Arial,sans-serif}
.doc-hoja table.t th{background:#eee;font-weight:700;color:#111}
.doc-hoja table.t tr.sub td{color:#555;background:#fafafa}
.doc-hoja table.t td .s{color:#666;font-size:8px}
.doc-hoja table.t .sube{color:#a01818} .doc-hoja table.t .baja{color:#1a4f8a} .doc-hoja table.t .fuerte{color:#000;font-weight:700}
.doc-hoja table.t tr.tot td{background:#eee;font-weight:700}
.doc-hoja .clave-ev{color:#111} .doc-hoja .clave-ev b{background:none;color:#000;border:1px solid #000}
.doc-hoja .luzico{color:#333}
.doc-hoja .kpis{grid-template-columns:repeat(4,1fr)} .doc-hoja .kpi{background:#fff;border:1px solid #999;color:#111;padding:6px} .doc-hoja .kpi .v{font-size:14px;color:#111} .doc-hoja .kpi .k{color:#555}
.doc-hoja .nota{color:#333} .doc-hoja .alerta{background:#fff3f0;color:#111}
.doc-hoja h2:not(.doc-h2){color:#111;font-size:11px} .doc-hoja h2:not(.doc-h2)::before{content:none}
.doc-osc{background:#14150f;border-radius:4px;padding:4px;margin:6px 0;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.doc-osc svg{display:block;width:100%;height:auto}
.doc-mapa{height:150mm;border:1px solid #333;background:#ddd}
.apaisado .doc-mapa{height:120mm}
.doc-mapa-pie{font-size:9.5px;margin:3px 0 6px;color:#222}
.doc-mapa-pie .norte{font-weight:700}
.doc-ev{background:#b3261e;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #000}
.doc-ev span{position:absolute;left:14px;top:-3px;white-space:nowrap;background:#fff;color:#000;font:700 10px Helvetica,Arial,sans-serif;padding:0 3px;border:1px solid #000}
.doc-grid{background:none;border:0;color:#1d3b8a;font:700 10px Helvetica,Arial,sans-serif;text-shadow:0 0 2px #fff,0 0 2px #fff}
.doc-firmas{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:16px 40px;margin:28px 0 10px}
.doc-firmas>div{min-width:200px;text-align:center;font-size:10.5px;text-transform:uppercase}
.doc-firmas .linea{border-top:1px solid #000;margin:30px 0 3px}
.doc-distr{font-size:10px;margin-top:10px}
.doc-lista{margin:0 0 6px 16px;padding:0;font-size:10.5px} .doc-lista li{list-style:none;margin:2px 0}
.doc-hoja .leaflet-control-attribution{font-size:8px}
@media print{
  body.doc-imprimir{background:#fff}
  body.doc-imprimir>*:not(#docVista){display:none!important}
  body.doc-imprimir #docVista{position:static;overflow:visible;background:#fff;padding:0}
  body.doc-imprimir .doc-barra,body.doc-imprimir .doc-config{display:none!important}
  body.doc-imprimir .doc-paginas{max-width:none;padding:0}
  body.doc-imprimir .doc-hoja{box-shadow:none;margin:0;padding:6mm 0 0}
  body.doc-imprimir .doc-hoja .doc-clasif.arriba{position:fixed;top:-8mm} body.doc-imprimir .doc-hoja .doc-clasif.abajo{position:fixed;bottom:-10mm}
  body.doc-imprimir .doc-mapa,body.doc-imprimir .doc-ev,body.doc-imprimir .doc-osc{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* documento: la tabla del cuadro debe caber en el ancho de la hoja */
.doc-hoja table.t{table-layout:auto}
.doc-hoja table.t th,.doc-hoja table.t td{white-space:normal;word-break:normal}
.doc-hoja table.cmn{font-size:8px} .doc-hoja table.cmn th{font-size:7.5px}
.doc-hoja table.cmn td .s{display:none}
.doc-hoja table.cmn td.obs{min-width:0;max-width:90px}
.doc-hoja .clave-ev{font-size:8px;white-space:nowrap} .doc-hoja .clave-ev b{padding:0 2px}
.doc-hoja table.cmn .luzico{font-size:8px;margin-left:1px}
.doc-blq{position:relative}
.doc-mapa{position:relative;overflow:hidden}
.doc-mapa-img{display:block;width:100%;height:100%;object-fit:cover}

/* documento: paletas de color (títulos, tarjetas, encabezados de tabla, nombres clave) */
.doc-hoja.pal-oliva{--pa:#4b5d2a;--pb:#f1f4e8;--pc:#2f3d17;--pt:#e3e9d3}
.doc-hoja.pal-azul{--pa:#1f4e8c;--pb:#edf3fb;--pc:#12325c;--pt:#dce8f6}
.doc-hoja.pal-gris{--pa:#333333;--pb:#f4f4f4;--pc:#111111;--pt:#e6e6e6}
.doc-hoja.pal-arena{--pa:#a8741f;--pb:#fbf6ec;--pc:#5a3c0b;--pt:#f2e6cc}
.doc-hoja[class*="pal-"] .doc-tit{color:var(--pc)}
.doc-hoja[class*="pal-"] .doc-sub{color:var(--pa)}
.doc-hoja[class*="pal-"] .doc-h2{color:var(--pc);border-bottom:2px solid var(--pa)}
.doc-hoja[class*="pal-"] .doc-res .dr{border:0;border-top:3px solid var(--pa);background:var(--pb);border-radius:4px}
.doc-hoja[class*="pal-"] .doc-res .dr.dest{border-top-width:4px;background:var(--pt)}
.doc-hoja[class*="pal-"] .doc-res .dr svg{stroke:var(--pa)}
.doc-hoja[class*="pal-"] .doc-res .dr b{color:var(--pc)}
.doc-hoja[class*="pal-"] table.t th{background:var(--pt);color:var(--pc);border-color:#999}
.doc-hoja[class*="pal-"] table.t tr.tot td{background:var(--pt)}
.doc-hoja[class*="pal-"] .clave-ev b{border-color:var(--pa);color:var(--pc);background:var(--pb)}
.doc-hoja[class*="pal-"] .doc-firmas .linea{border-top-color:var(--pc)}
.doc-fig{border:1px solid #bbb;border-radius:4px;padding:4px;margin:6px 0;background:#fff}
.doc-fig svg{display:block;width:100%;height:auto}
.doc-hoja table.t th,.doc-hoja .doc-res .dr,.doc-hoja .clave-ev b{-webkit-print-color-adjust:exact;print-color-adjust:exact}
/* material para la marcha */
.mat-g{font-size:13px;color:var(--ocre);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.05em}
.mat-g:first-child{margin-top:0}
table.mat td{vertical-align:middle}
table.mat td.ck{width:34px} table.mat td.ck input{width:20px;height:20px;accent-color:var(--ocre)}
table.mat td.cant{width:150px} table.mat td.cant input{padding:5px 8px;font-size:14px;text-align:right}
table.mat td .s{display:block;font-size:11px;color:var(--tenue);font-weight:400;font-family:var(--sans)}
table.mat tr.hecho td b{color:var(--tenue);text-decoration:line-through}
.doc-hoja table.mat td.ck{width:18px;text-align:center} .doc-hoja table.mat td.cant{width:90px}
table.mat td.kg{width:120px} table.mat td.kg input{padding:5px 8px;font-size:13px;text-align:right}
.tarjeta.carga h3{margin:0 0 10px}
.doc-hoja table.mat td.kg{width:60px;text-align:right}
.doc-res.doc-carga{grid-template-columns:repeat(4,1fr)} .doc-res.doc-carga .dr{display:block}
table.glosario td{white-space:normal;padding:6px 8px} table.glosario td:first-child{width:160px;color:var(--ocre)}
details.avanzado{margin:8px 0 2px;border-top:1px dashed var(--linea);padding-top:6px}
details.avanzado>summary{cursor:pointer;font-size:12.5px;color:var(--suave)}
details.avanzado[open]>summary{margin-bottom:8px}
/* cronómetro de intervalos (carrera de combate) */
.s-intervalo{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:8px 0 4px;padding:8px 12px;border-radius:10px;border:2px solid var(--ocre);background:#e3a63a22}
.s-intervalo b{font-family:var(--mono);font-size:30px;letter-spacing:1px;color:var(--ocre)}
.s-intervalo span{font-family:var(--mono);font-size:18px;font-weight:700}
.s-intervalo small{flex-basis:100%;font-family:var(--mono);font-size:12px;color:var(--suave)}
.s-intervalo.lento{border-color:var(--verde);background:#7bbf6a1f} .s-intervalo.lento b{color:var(--verde)}
.s-intervalo.pausa{border-color:var(--linea);background:none} .s-intervalo.pausa b{color:var(--suave)}
/* línea de equipo de cada elemento y texto bajo los totales por línea */
table.mat td.lin{width:64px} table.mat td.lin select{padding:5px 6px;font-size:13px}
.doc-hoja table.mat td.lin{width:60px;font-size:11px}
.kpi .s{font-size:11px;color:var(--tenue);margin-top:3px;line-height:1.3}
/* material en pantalla: una ficha por elemento, del ancho del teléfono */
.mat-lista{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.mf-grupo{border:1px solid var(--ocre);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:8px}
.mf-grupo-t{font-size:13px}.mf-grupo-t small{color:var(--tenue)}
.mf-dentro{display:flex;flex-direction:column;gap:8px;margin-left:10px;padding-left:10px;border-left:3px solid var(--ocre)}
.mf-dentro-t{font-size:12.5px;color:var(--tenue);cursor:pointer;padding:4px 0}.mf-dentro-d[open] .mf-dentro{margin-top:8px}
.mf{border:1px solid var(--linea);border-radius:10px;padding:9px 10px;background:var(--panel2,#1d1f17);min-width:0}
.mf1{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.mf1 input{width:22px;height:22px;flex:0 0 auto;margin-top:1px;accent-color:var(--ocre)}
.mf-n{flex:1;min-width:0;overflow-wrap:anywhere} .mf-n b{display:block;font-size:15px}
.mf-n small{display:block;font-size:12px;color:var(--tenue);line-height:1.3;margin-top:2px}
.mf-kg{flex:0 0 auto;text-align:right;font-family:var(--mono)} .mf-kg b{display:block;color:var(--ocre);font-size:15px} .mf-kg small{font-size:10px;color:var(--tenue)}
.mf-nc{font-size:11px;color:var(--tenue)}
.mf-op{display:inline-flex;gap:4px;flex-wrap:wrap}.mf-no{opacity:.6}.mf-no .mf1{display:flex;align-items:center;gap:8px;justify-content:space-between}.mf-no .mf-n b{text-decoration:line-through}
.mf2{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 0 32px}
.mf-c{display:inline-flex;align-items:center;gap:4px} .mf-c input{width:64px;padding:6px 7px;font-size:15px;text-align:right}
.mf-c em{font-style:normal;font-size:12px;color:var(--suave);white-space:nowrap}
.mf-x{color:var(--tenue)} .mf-t{font-family:var(--mono);font-weight:700;white-space:nowrap}
.mf2 select{width:auto;padding:5px 6px;font-size:13px;margin-left:auto}
.mf-s{margin:6px 0 0 32px;font-size:11.5px;color:var(--tenue)}
.mf.hecho .mf-n b{color:var(--tenue);text-decoration:line-through}
.mf-t small{font-weight:400;font-size:11px;color:var(--tenue)}
/* selector de uso (militar o civil) */
.tarjeta.uso{display:flex;flex-direction:column;gap:8px}
.uso-t{font-weight:700;font-size:15px}
.tarjeta.uso .seg button{flex:1;font-size:15px;padding:10px}
.tarjeta.uso .nota{margin:0}
/* menú del botón derecho del mapa (en el teléfono: mantener presionado) */
.m-menu{position:fixed;z-index:6000;min-width:240px;max-width:min(330px,calc(100vw - 12px));max-height:calc(100vh - 12px);overflow:auto;background:var(--panel);border:1px solid var(--linea);border-radius:10px;box-shadow:0 8px 24px #000b;padding:4px 0;font-size:13.5px}
.mm-tit{padding:8px 12px 6px;border-bottom:1px solid var(--linea);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.mm-tit small{flex-basis:100%;color:var(--tenue);font-size:11px}
.mm-tit .clave{font-style:normal;background:var(--ocre);color:#14150f;font-weight:700;border-radius:4px;padding:0 5px;font-size:11.5px}
.m-menu button{display:flex;width:100%;text-align:left;background:none;border:0;color:var(--texto);cursor:pointer;padding:6px 12px;gap:8px;align-items:baseline}
.m-menu button:hover:not(:disabled){background:var(--panel2)}
.m-menu button:disabled{opacity:.45;cursor:default}
.mm-dato{justify-content:space-between;font-size:12px} .mm-dato span{color:var(--tenue);white-space:nowrap} .mm-dato b{font-weight:500;text-align:right}
.mm-acc{flex-wrap:wrap;padding:8px 12px!important} .mm-ico{width:18px;text-align:center;color:var(--ocre)}
.mm-acc small{flex-basis:100%;padding-left:26px;font-size:11px;color:var(--tenue)}
.mm-acc.peligro{color:var(--rojo)} .mm-acc.peligro .mm-ico{color:var(--rojo)}
.mm-sep{height:1px;background:var(--linea);margin:4px 0}
/* pestaña «Datos de la marcha» (en el teléfono, «Datos») */
.t-corta{display:none}
@media (max-width:1100px){ .t-larga{display:none} .t-corta{display:inline} }
/* barra de botones de los puntos, arriba y abajo de la lista */
.barra-puntos{margin:10px 0}
/* aviso para ubicar un punto tocando la carta */
.m-ubicar{position:absolute;z-index:1003;top:56px;left:50%;transform:translateX(-50%);max-width:calc(100% - 20px);display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  background:var(--panel);border:2px solid var(--ocre);border-radius:12px;padding:8px 12px;box-shadow:0 6px 20px #000a;font-size:14px}
.pestanas button>span{white-space:nowrap}
/* material por línea: kg de la línea en el título, tipo de cada elemento y fila para agregar */
.mat-kg{font-family:var(--mono);font-size:12px;color:var(--suave);font-weight:500;margin-left:8px;letter-spacing:0;text-transform:none}
.mf-tipo{font-style:italic}
.mf-nuevo{border-style:dashed;background:none}
.mf-nuevo input[data-an]{flex:1 1 180px;min-width:140px;padding:6px 8px}
.mf-nuevo select{margin-left:0!important}
/* carga de cada puesto (equipo especial de la patrulla) */
.carga-h{margin:14px 0 6px;font-size:14px}
table.puestos td small{display:block;font-size:11px;color:var(--tenue);font-weight:400;white-space:normal}
table.puestos tr.mas td{background:#e3a63a1c} .mas-tag{background:var(--ocre);color:#14150f;border-radius:4px;padding:0 5px;font-size:10.5px;margin-left:4px}
.mf-port{margin-top:6px} .mf-port label{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--suave)} .mf-port select{margin-left:0!important}
/* puestos (OME) */
details.ome{border-top:1px solid var(--linea);padding:6px 0}
details.ome>summary{display:flex;justify-content:space-between;align-items:baseline;gap:10px;cursor:pointer;font-weight:600;padding:4px 0}
details.ome>summary .res{font-weight:400;font-size:12.5px;color:var(--suave);font-family:var(--mono);text-align:right}
details.ome .mf>.mf-n{display:block}
details.ome .mf>.mf-n small{color:var(--tenue)}
table.puestos{font-size:12px} table.puestos th,table.puestos td{padding:5px 4px} table.puestos td.tx{max-width:140px;white-space:normal}
.mat-parte{margin:18px 0 8px;font-size:15px;color:var(--ocre);text-transform:none;letter-spacing:0}
.mat-pl{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 8px;font-size:12.5px;color:var(--suave)}
.mat-pl label{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .mat-pl small{color:var(--tenue)}
table.sop{font-size:12.5px} table.sop td input{width:50px;padding:5px 4px;text-align:right;font-size:13px} table.sop th,table.sop td{padding:4px 3px} table.sop td.tx{white-space:normal;min-width:120px}
table.sop tr.mas td{background:#e3a63a1c}
table.sop td.sop-x{color:var(--suave);font-family:var(--mono)}
.tarjeta.cual{display:flex;justify-content:space-between;align-items:center;gap:10px;border-color:var(--ocre)}
.tarjeta.cual b{display:block;font-size:17px;color:var(--ocre)} .tarjeta.cual small{display:block;color:var(--suave);font-size:12.5px}
/* enviar en tres pasos */
.env-lista{display:flex;flex-direction:column;gap:6px}
.env-m{display:flex;align-items:center;gap:10px;padding:6px 4px;border-bottom:1px solid var(--linea);cursor:pointer}
.env-m:last-child{border-bottom:0} .env-m input{width:20px;height:20px;accent-color:var(--ocre);flex:0 0 auto}
.env-m span{flex:1;min-width:0} .env-m b{display:block} .env-m small{display:block;color:var(--suave);font-size:12px} .env-m.no{opacity:.5}
.env-dest .btn.on{border-color:var(--ocre);background:#e3a63a26}
.btn.grande{font-size:17px;padding:12px 26px}
/* puesto de cada integrante */
.integ-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px;margin:8px 0}
.integ-f{display:flex;align-items:center;gap:8px} .integ-f span{font-family:var(--mono);color:var(--suave);min-width:26px;text-align:right} .integ-f select{flex:1}

.velb{cursor:pointer;border-bottom:1px dotted var(--tenue);white-space:nowrap}.velb.propia{color:var(--ocre);font-weight:600}
.s-vel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}.s-vel>div{border:1px solid var(--linea);border-radius:10px;padding:8px 10px;min-width:0}
.s-vel span{display:block;font-size:11.5px;color:var(--tenue)}.s-vel b{font-family:'JetBrains Mono',monospace;font-size:16px;line-height:1.35;display:block}.s-vel b small{font-size:11px;color:var(--tenue)}.s-vel>div>small{display:block;font-size:11.5px;color:var(--tenue)}
.s-vel .bien,.hud3 .bien{color:var(--verde)}.s-vel .ojo,.hud3 .ojo{color:var(--ocre)}.s-vel .mal,.hud3 .mal{color:var(--rojo)}
.s-hud .hud-est{font-size:13px;font-weight:700;white-space:nowrap}.s-hud .hud-est.mal{color:var(--rojo)}.s-hud .hud-est.bien{color:var(--verde)}
.s-hud .hud2 .hd span,.s-hud .hud-g span{display:block;font-size:10.5px;color:var(--suave);text-transform:uppercase;letter-spacing:.04em}
.s-hud .hud2 .hd small{margin-left:6px}
.s-hud .hud-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:6px 0}
@media (min-width:900px){.s-hud{max-width:720px}.s-hud .hud-g{grid-template-columns:repeat(4,minmax(0,1fr))}}
.s-hud .hud1>span:first-child small{display:block;margin-top:1px}
.s-hud .hud-g>div{background:#ffffff0a;border:1px solid var(--linea);border-radius:8px;padding:5px 8px;min-width:0}
.s-hud .hud-g b{display:block;font-family:var(--mono);font-size:16px;white-space:nowrap}.s-hud .hud-g small{display:block;font-family:var(--mono);font-size:11px;color:var(--suave);white-space:nowrap}
.s-hud .hud-g .bien{color:var(--verde)}.s-hud .hud-g .ojo{color:var(--ocre)}.s-hud .hud-g .mal{color:var(--rojo)}
.s-hud .hud3{margin-top:3px}
.s-hud .hud-g p.vr{margin:0;font-family:var(--mono);font-size:14px;white-space:nowrap}.s-hud .hud-g p.vr i,.s-vel b i{font-style:normal;font-family:var(--sans,inherit);font-size:10.5px;color:var(--suave);display:inline-block;min-width:58px}
.s-hud .hud-g p.vr.bien{color:var(--verde)}.s-hud .hud-g p.vr.ojo{color:var(--ocre)}.s-hud .hud-g p.vr.mal{color:var(--rojo)}
.s-hud .hud-g p.vr{font-size:13px;overflow:hidden;text-overflow:ellipsis}.s-hud .hud-g p.vr i{min-width:50px}
.s-vel b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-vel b i{min-width:58px}
.s-hud .hud-g p.vr small,.s-vel b small{display:inline;font-size:9.5px;color:var(--suave)}.s-hud .hud-g p.vr i{min-width:54px}.s-vel b i{min-width:56px}
.s-vel>div{padding:7px 8px}.s-vel b{font-size:13px}.s-vel b i{min-width:50px;font-size:10px}
.s-vel span{text-transform:uppercase;letter-spacing:.04em;font-size:10.5px}.s-vel b.hora{font-size:20px}.s-vel>div{background:#ffffff08}
.s-estado .hud-est{font-weight:700}.s-estado .hud-est.mal{color:var(--rojo)}.s-estado .hud-est.bien{color:var(--verde)}
.s-vel b i{min-width:62px}.s-hud .hud-g p.vr i{min-width:60px}
.vg{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:baseline}.vg i{font-style:normal;font-size:10.5px;color:var(--suave)}
.vg b{font-family:var(--mono);font-size:14px;white-space:nowrap;display:block}.vg b small{display:inline;font-size:10px;color:var(--suave)}
.vg.bien b{color:var(--verde)}.vg.ojo b{color:var(--ocre)}.vg.mal b{color:var(--rojo)}
.s-hud .hud-g .vg b,.s-vel .vg b{display:block;font-size:14px;white-space:nowrap;overflow:visible;line-height:1.3}.s-hud .hud-g .vg b small,.s-vel .vg b small{display:inline;font-size:10px;color:var(--suave)}.s-hud .hud-g .vg i,.s-vel .vg i{min-width:0;display:inline}
.barra{height:10px;border-radius:6px;background:var(--linea);overflow:hidden;margin:8px 0 4px}.barra i{display:block;height:100%;background:var(--ocre);transition:width .2s}
#dialogo .mal{color:var(--rojo)}
.horiz-env{overflow-x:auto;border:1px solid var(--linea);border-radius:8px;margin:8px 0;-webkit-overflow-scrolling:touch}.horiz-env svg{display:block}
.m-obs{font-size:18px;line-height:22px;text-align:center;filter:drop-shadow(0 0 2px #000)}
.m-pr{white-space:nowrap;font:600 11px Inter,sans-serif;color:#e3a63a;text-shadow:0 0 3px #000,0 0 3px #000}.m-pr b{color:#fff}
.doc-horiz svg{display:block;width:100%;height:auto;margin:0 0 4px}

/* Seguir, carta con dos barras (v0.97): datos pegados arriba, botones pegados abajo, la ruta libre al centro y la flecha grande */
.s-dos .s-bsup{position:absolute;z-index:1001;top:0;left:0;right:0;background:#14150ff2;border-bottom:1px solid var(--linea);box-shadow:0 3px 12px #0008;cursor:pointer}
.s-bsup .bcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.s-bsup .bc{padding:5px 8px;border-right:1px solid #2c2d24;border-bottom:1px solid #2c2d24;min-width:0}
.s-bsup .bc:nth-child(3n){border-right:0}
.s-bsup .bc span{display:block;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--suave)}
.s-bsup .bc b{display:block;font-family:var(--mono);font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-bsup .bc small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-bsup .bc b.ocre{color:var(--ocre)} .s-bsup .bc b.desv{color:#6fb3d9;font-size:14px}
.s-bsup .bien{color:var(--verde)} .s-bsup .ojo{color:var(--ocre)} .s-bsup .mal{color:var(--rojo)}
.s-bsup .b1{padding:8px 12px;font-family:var(--mono);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-bsup .b1 .ocre{color:var(--ocre)} .s-bsup .bmas{float:right;color:var(--suave)}
.s-bsup .bx{padding:3px 10px;font-size:11.5px;color:var(--suave)}
.s-bsup .info,.s-bsup .alerta{margin:4px 8px;padding:5px 8px;font-size:12px}
.s-dos .s-modos{display:none}
.s-flecha-g{position:absolute;z-index:1000;left:12px;bottom:calc(64px + env(safe-area-inset-bottom));width:92px;height:92px;font-size:58px;border:4px solid var(--ocre);background:#14150fee;box-shadow:0 3px 14px #000a;font-weight:700}
.s-flecha-g.desvio{border-color:#6fb3d9;color:#6fb3d9}
.s-dos .s-centrar{bottom:calc(70px + env(safe-area-inset-bottom))}
.s-binf{position:absolute;z-index:1001;left:0;right:0;bottom:0;display:flex;gap:5px;padding:6px;background:#14150ff2;border-top:1px solid var(--linea)}
.s-binf .btn{flex:1;margin:0;padding:9px 2px;font-size:12px;line-height:1.15;min-width:0}
.s-binf #sLleg,.s-binf #sSoloFin{flex:2.2;font-size:13px}
.s-mas{display:flex;flex-direction:column;gap:6px;margin:4px 0 10px}.s-mas .btn{text-align:left;margin:0}
.s-ini{display:flex;gap:8px}.s-ini #sIni{flex:2}.s-ini #sIrSolo{flex:1;margin:0;box-shadow:0 4px 18px #000a}
/* teléfono horizontal: cabecera y pestañas más bajas; los datos en una sola fila */
@media (orientation:landscape) and (max-height:520px){
  .barra-sup{padding-top:calc(3px + env(safe-area-inset-top));padding-bottom:3px}.barra-sup .logo{width:24px;height:24px}.barra-sup .sub{display:none}
  .pestanas button{padding:3px 0 2px;font-size:10px}.pestanas .ico{width:18px;height:18px}
  body{padding-bottom:calc(44px + env(safe-area-inset-bottom))}
  .mapa-env{height:calc(100dvh - 36px - 44px - env(safe-area-inset-bottom) - env(safe-area-inset-top))}
  .s-bsup .bcs{grid-template-columns:repeat(6,minmax(0,1fr))}
  .s-bsup .bc{border-bottom:0}.s-bsup .bc:nth-child(3n){border-right:1px solid #2c2d24}.s-bsup .bc:last-child{border-right:0}
  .s-flecha-g{width:72px;height:72px;font-size:44px;bottom:calc(56px + env(safe-area-inset-bottom))}
  .s-binf{padding:4px}.s-binf .btn{padding:6px 2px}
}
@media (orientation:landscape) and (max-height:520px) and (min-width:900px){ .pestanas button{padding:4px 8px} }
.s-bsup .bc small span{display:inline;text-transform:none;letter-spacing:0;font-size:inherit}
.s-binf .btn{font-size:11.5px}

/* v0.99: controles de la carta de Seguir (orientación, capa, centrar) y márgenes seguros (la «isla» del iPhone en horizontal) */
.s-ctrl{position:absolute;z-index:1000;right:calc(10px + env(safe-area-inset-right));bottom:calc(66px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}
.s-ctrl .btn{margin:0;min-width:48px;height:44px;padding:0 8px;font-size:15px;box-shadow:0 2px 10px #0008}
.s-ctrl .btn.on{border-color:#6fb3d9;color:#6fb3d9}
.s-flecha-g{left:calc(12px + env(safe-area-inset-left))}
.s-binf{padding-left:calc(6px + env(safe-area-inset-left));padding-right:calc(6px + env(safe-area-inset-right))}
.s-bsup{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.mapa-env{height:var(--alto-libre, calc(100dvh - 58px - 62px - env(safe-area-inset-bottom) - env(safe-area-inset-top)))}
@media (orientation:landscape) and (max-height:520px){ .s-ctrl{flex-direction:row;bottom:calc(52px + env(safe-area-inset-bottom))} .s-ctrl .btn{height:38px} }
/* v0.99.1: la carta girada (más grande que la pantalla) no debe salirse ni correr la página */
.mapa-env{overflow:hidden}
body.con-mapa{overflow:hidden}

/* v0.99.2: botones que se sienten bien al tocarlos (pedido del usuario): sin el retardo del doble toque, sin el destello gris del iPhone,
   respuesta visual al presionar; en Seguir, íconos de línea parejos (no emoji) con el texto debajo */
.btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:transform .08s ease,filter .08s ease,background-color .12s}
.btn:active{transform:scale(.95);filter:brightness(1.3)}
.s-ico{width:20px;height:20px;flex:0 0 auto}
.s-binf .btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:50px;padding:5px 2px;font-size:11px;font-weight:600;border-radius:10px}
.s-binf .btn span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-binf #sLleg,.s-binf #sSoloFin{flex-direction:row;gap:6px;font-size:14px;font-weight:700}
.s-binf #sLleg .s-ico,.s-binf #sSoloFin .s-ico{width:22px;height:22px;stroke-width:2.4}
.s-binf .btn.peligro{color:var(--rojo)}
.s-ctrl .btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:54px;height:52px;padding:3px 6px;font-size:10px;font-weight:600;border-radius:12px}
.s-ctrl .btn .s-ico{width:22px;height:22px}
.s-ctrl .btn.pri{color:#14150f}
.s-acc .btn{display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px}
.s-mas .btn{display:flex;align-items:center;gap:10px;justify-content:flex-start;min-height:46px}
@media (orientation:landscape) and (max-height:520px){ .s-binf .btn{min-height:42px;flex-direction:row;gap:5px;font-size:12px} .s-ctrl .btn{height:44px;min-width:50px} }
/* en vertical, la barra de botones de Seguir en dos filas: PASANDO a todo el ancho y los otros cinco debajo, sin cortar textos */
@media (orientation:portrait){
  .s-binf{flex-wrap:wrap}
  .s-binf #sLleg{flex:1 1 100%;min-height:52px;font-size:16px}
  .s-binf .btn:not(#sLleg):not(#sSoloFin){flex:1 1 0;font-size:11.5px}
  .s-dos .s-flecha-g{bottom:calc(126px + env(safe-area-inset-bottom))}
  .s-dos .s-ctrl{bottom:calc(126px + env(safe-area-inset-bottom))}
  body.con-mapa .aviso{bottom:calc(190px + env(safe-area-inset-bottom))}
}
@media (orientation:landscape){ body.con-mapa .aviso{bottom:calc(110px + env(safe-area-inset-bottom))} }
.s-binf #sIrSolo2{flex:1 1 100%;flex-direction:row;gap:6px;font-size:15px;font-weight:700;min-height:52px}.s-binf #sIrSolo2 .s-ico{width:22px;height:22px}
/* v0.99.6: en el teléfono, campos y selectores con letra de 16 px (con menos, el iPhone agranda la página al tocarlos y la deja corrida) */
@media (max-width:899px){ input,select,textarea{font-size:16px} }
/* v0.99.6: avisos de la carta de Seguir en una línea de fichas pequeñas (antes eran cajas grandes que tapaban la ruta) */
.s-bsup .bchips{display:flex;gap:6px;overflow-x:auto;padding:4px 8px;scrollbar-width:none}
.s-bsup .bchips::-webkit-scrollbar{display:none}
.s-bsup .ch{flex:0 0 auto;white-space:nowrap;font-size:12.5px;padding:3px 9px;border-radius:999px;background:#2a2b22;border:1px solid var(--linea);font-family:var(--mono)}
.s-bsup .ch.rapido{background:#3a2e12;border-color:var(--ocre);color:var(--ocre)} .s-bsup .ch.lento{background:#1c2a1c;border-color:#5f9a5f;color:#9fd19f}
.s-bsup .ch.mal{background:#3a1a14;border-color:var(--rojo);color:#ff9b8a} .s-bsup .ch.pausa{color:var(--suave)}
.s-bsup .ch b{font-family:var(--sans,inherit)}
@media (orientation:portrait){ .s-bsup .bchips{flex-wrap:wrap;overflow:visible} }

/* v0.99.7: pantalla tipo ATAK — carta completa; panel de datos a la derecha que se oculta con la pestaña; PASANDO siempre a la vista */
.s-atak{--pw:min(44vw,190px)}
.s-atak .s-panel{position:absolute;z-index:1001;top:0;right:0;bottom:0;width:var(--pw);box-sizing:border-box;background:#14150ff2;border-left:1px solid var(--linea);
  display:flex;flex-direction:column;gap:6px;padding:6px calc(6px + env(safe-area-inset-right)) calc(66px + env(safe-area-inset-bottom)) 6px;transition:transform .25s ease}
.s-atak.oculto .s-panel{transform:translateX(100%)}
.s-pcab{flex:1 1 auto;min-height:0;overflow:auto}
.s-pcab .pcs{display:flex;flex-direction:column;gap:5px}
.s-pcab .bc{background:#22231b;border:1px solid #2f3027;border-radius:9px;padding:4px 8px;min-width:0}
.s-pcab .bc span{display:block;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--suave)}
.s-pcab .bc b{display:block;font-family:var(--mono);font-size:17px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-pcab .bc small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-pcab .bc small span{display:inline;text-transform:none;letter-spacing:0;font-size:inherit}
.s-pcab .bc b.ocre{color:var(--ocre)} .s-pcab .bc b.desv{color:#6fb3d9;font-size:14px} .s-pcab .bc b.clave-tx{color:var(--ocre)}
.s-pcab .bien{color:var(--verde)} .s-pcab .ojo{color:var(--ocre)} .s-pcab .mal{color:var(--rojo)}
.s-pcab .bc:nth-child(5){display:none}   /* «plan del tramo» solo en horizontal, donde hay espacio */
.s-pcab .bchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.s-pcab .ch{font-size:11.5px;padding:2px 7px;border-radius:999px;background:#2a2b22;border:1px solid var(--linea);font-family:var(--mono)}
.s-pcab .ch.rapido{border-color:var(--ocre);color:var(--ocre)} .s-pcab .ch.lento{border-color:#5f9a5f;color:#9fd19f} .s-pcab .ch.mal{border-color:var(--rojo);color:#ff9b8a}
.s-pbtn{display:grid;grid-template-columns:1fr 1fr;gap:5px;flex:0 0 auto}
.s-pbtn .btn{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;padding:4px 2px;font-size:11px;font-weight:600;border-radius:10px}
.s-pbtn .btn.peligro{color:var(--rojo)}
.s-atak .s-pasando{position:absolute;z-index:1002;right:calc(6px + env(safe-area-inset-right));bottom:calc(8px + env(safe-area-inset-bottom));width:calc(var(--pw) - 12px - env(safe-area-inset-right));
  margin:0;min-height:50px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:700;border-radius:12px;box-shadow:0 3px 14px #000a}
.s-atak .s-pasando span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-atak.oculto .s-pasando{width:auto;max-width:60vw;padding:0 16px}
.s-pest{position:absolute;z-index:1002;top:42%;right:var(--pw);width:26px;height:60px;border:1px solid var(--linea);border-right:0;border-radius:10px 0 0 10px;background:#14150ff2;color:var(--ocre);font-size:22px;font-weight:700;padding:0;cursor:pointer;transition:right .25s ease}
.s-atak.oculto .s-pest{right:env(safe-area-inset-right)}
.s-atak .s-franja{display:none}
.s-atak.oculto .s-franja{display:flex;position:absolute;z-index:1001;top:8px;left:calc(8px + env(safe-area-inset-left));right:calc(8px + env(safe-area-inset-right));justify-content:space-between;gap:10px;
  background:#14150ff2;border:1px solid var(--linea);border-radius:10px;padding:6px 12px;font-family:var(--mono);font-size:15px}
.s-atak.oculto .s-franja .ocre{color:var(--ocre)}
.s-atak .s-ctrl{right:calc(var(--pw) + 34px);bottom:calc(12px + env(safe-area-inset-bottom));transition:right .25s ease}
.s-atak.oculto .s-ctrl{right:calc(10px + env(safe-area-inset-right));bottom:calc(70px + env(safe-area-inset-bottom))}
.s-atak .s-flecha-g{bottom:calc(14px + env(safe-area-inset-bottom))}
@media (orientation:landscape) and (max-height:520px){
  .s-atak{--pw:min(38vw,330px)}
  .s-pcab .pcs{display:grid;grid-template-columns:1fr 1fr;gap:5px}
  .s-pcab .bc:nth-child(5){display:block}
  .s-pbtn{grid-template-columns:repeat(4,1fr)}
  .s-pbtn .btn{min-height:42px}
  .s-atak .s-panel{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  .s-atak .s-pasando{min-height:44px}
  .s-atak .s-ctrl{flex-direction:column}
  .s-atak.oculto .s-ctrl{flex-direction:row;bottom:calc(60px + env(safe-area-inset-bottom))}
}
/* solo datos en horizontal: a la izquierda próximo, distancia, rumbo y flecha; a la derecha los cuadros de velocidad */
@media (orientation:landscape) and (max-height:520px){
  #seguir .tarjeta#sCab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:14px;align-items:start}
  #seguir .tarjeta#sCab>*{grid-column:1}
  #seguir .tarjeta#sCab>.s-vel{grid-column:2;grid-row:1 / span 6;margin:0}
}
.s-atak:not(.oculto) .s-pasando span{white-space:normal;line-height:1.15;text-align:center;font-size:13px}