/* Tipografía corporativa (Manual Corporativo): Open Sans, incluida en el programa (funciona sin Internet). */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(fuentes/open-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(fuentes/open-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(fuentes/open-sans-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(fuentes/open-sans-latin-800-normal.woff2) format('woff2'); }
:root {
  --bg: #3B4955; --panel: #121B23; --card: #16212B; --line: #22303D; --text: #E8EEF3; --muted: #9AA9B6;
  --blue: #7DB4FF; --blue-bg: #13243A; --orange: #FFA65C; --orange-bg: #33200F; --green: #5FD39A; --green-bg: #10301F;
  --red: #FF8A8A; --red-bg: #2A1416; --yellow: #E9E07A;
  --mono: 'Open Sans', system-ui, sans-serif; --cond: 'Open Sans', sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.4 'Open Sans', system-ui, sans-serif; }
[hidden] { display: none !important; }
h1, h2 { margin: 0; }
h2 { font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin: 4px 0 10px; }
.muted { color: var(--muted); }
.error { color: var(--red); min-height: 1.4em; }
.mono { font-family: var(--mono); }

.btn { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid #2A3845; background: var(--card); color: var(--text); font: 600 15px 'Open Sans', sans-serif; cursor: pointer; }
.btn:hover { border-color: #3A4A58; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #08121D; }
.btn.pob { background: var(--orange); border-color: var(--orange); color: #1A0E04; }
.btn.ok { background: var(--green); border-color: var(--green); color: #07170F; }
.btn.danger { color: var(--red); border-color: #5A2A2E; background: transparent; }
.btn.ghost { background: transparent; }
.btn.small { min-height: 36px; padding: 0 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }
input, select, textarea { min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid #2A3845; background: #0F171E; color: var(--text); font: 15px 'Open Sans', sans-serif; }
textarea { padding: 10px 12px; min-height: 70px; width: 100%; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
label > input, label > select { color: var(--text); }
.grow { flex: 1; min-width: 180px; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; background: var(--panel); padding: 28px; border-radius: 18px; }
.login-card h1 { font-size: 28px; }

.top { position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
.brand { font-size: 18px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); font: 600 15px 'Open Sans', sans-serif; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--text); color: var(--bg); }
.pill { padding: 4px 10px; border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 600; }
.pill.ok { color: var(--green); background: var(--green-bg); } .pill.bad { color: var(--red); background: var(--red-bg); }
#yo { margin-left: auto; }

main { padding: 16px; max-width: 1500px; margin: 0 auto; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 14px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.list { display: flex; flex-direction: column; gap: 10px; }
.vacio { padding: 18px; border-radius: 12px; border: 1px dashed #2A3845; color: var(--muted); text-align: center; }

.card { border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--card); }
.card.entrada { background: var(--green-bg); } .card.salida, .card.cambio { background: var(--red-bg); }
.card.alerta { outline: 2px solid var(--red); }
.card .row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card .tag { font-size: 12px; font-weight: 700; letter-spacing: .6px; }
.card.entrada .tag { color: var(--green); } .card.salida .tag, .card.cambio .tag { color: var(--red); }
.card .buque { font: 600 22px var(--cond); }
.card .min { font: 700 22px var(--mono); color: var(--blue); }
.card .datos { display: flex; gap: 12px; flex-wrap: wrap; font: 13px var(--mono); color: var(--muted); }
.card .aviso-ais { font-size: 14px; font-weight: 600; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { min-height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid #3A4A58; background: transparent; color: var(--text); font: 600 14px 'Open Sans', sans-serif; cursor: pointer; }
.chip.hecho { background: var(--green-bg); border-color: var(--green-bg); color: var(--green); }
.acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.faltas { font-size: 13px; color: var(--orange); }

.table-wrap { overflow-x: auto; border-radius: 12px; background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; }
td.mono { font-family: var(--mono); }
.estado-cerrada { color: var(--green); } .estado-finalizada { color: var(--orange); } .estado-anulada { color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.stat { background: var(--card); border-radius: 14px; padding: 14px; }
.stat .num { font: 700 30px var(--mono); }
.stat .barra { height: 8px; border-radius: 4px; background: var(--blue); margin-top: 4px; }
.stat .fila { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 14px; }

.nota { background: var(--card); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.nota.aviso { background: #2B2A0E; } .nota .cat { font-size: 12px; font-weight: 700; letter-spacing: .6px; color: var(--muted); }

dialog { width: min(560px, calc(100vw - 32px)); border: 0; border-radius: 18px; padding: 0; background: var(--panel); color: var(--text); }
dialog::backdrop { background: rgba(0,0,0,.6); }
#dlgForm { padding: 20px; display: flex; flex-direction: column; gap: 12px; max-height: 85vh; overflow-y: auto; }
#dlgForm h3 { margin: 0; font-size: 20px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.radios { display: flex; gap: 6px; flex-wrap: wrap; }
.radios label { flex-direction: row; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid #2A3845; border-radius: 10px; color: var(--text); cursor: pointer; }
.radios input { min-height: auto; }
.check { flex-direction: row; align-items: center; gap: 10px; color: var(--text); font-size: 15px; }
.check input { min-height: auto; width: 20px; height: 20px; }
.resumen { background: var(--card); border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; font-size: 14px; }
.resumen .fila { display: flex; justify-content: space-between; }

#toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); padding: 12px 18px; border-radius: 12px; background: var(--text); color: var(--bg); font-weight: 600; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: calc(100vw - 32px); }
#toast.visible { opacity: 1; } #toast.error { background: var(--red); color: #2A0B0D; }
@media (max-width: 600px) { .grid2 { grid-template-columns: 1fr; } #yo { display: none; } }

/* ---------- Pantalla de maniobras (al estilo iPort Nexus) ---------- */
:root { --sal: #C8302E; --ent: #1E8F4E; --sal-osc: #6E1B1A; --ent-osc: #0F4A28; --fondeo: #33424F; }
.pantalla { display: grid; grid-template-columns: 230px minmax(340px, 1.7fr) minmax(240px, 1fr); max-width: 1640px; margin: 0 auto; gap: 20px; align-items: start; }
.p-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.p-titulo { font: 600 34px 'Open Sans', sans-serif; color: #E3EAF0; text-align: center; margin: 0 0 4px; }
.p-mensajes .p-titulo, .p-fondeo .p-titulo { font-size: 26px; }
.p-fondeo .p-titulo:not(:first-child) { margin-top: 14px; }
.p-reloj { display: flex; justify-content: space-between; align-items: center; font: 600 30px var(--mono); color: #C8D3DB; padding: 0 6px; }
.p-reloj .btn { min-height: 36px; width: 36px; padding: 0; font-size: 22px; border-radius: 50%; }
.p-lista { display: flex; flex-direction: column; gap: 6px; }
/* Observaciones de la factura: lo escrito aquí sale en su casilla del PDF. */
.fac-obs { margin-top: 8px; gap: 3px; font-size: 12.5px; }
.fac-obs input { width: 100%; }
.p-vacio { text-align: center; color: var(--muted); padding: 14px; border: 1px dashed var(--line); border-radius: 10px; }
/* Días plegados: del quinto día en adelante, para que el listado no se haga interminable. */
.dia-grupo > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 7px 10px; margin-top: 6px; border: 1px solid var(--line); border-radius: 9px; font-size: 13.5px; color: var(--muted); }
.dia-grupo > summary::-webkit-details-marker { display: none; }
.dia-grupo > summary::before { content: '▸'; font-size: 11px; opacity: .7; }
.dia-grupo[open] > summary::before { content: '▾'; }
.dia-grupo > summary:hover { border-color: var(--marca-azul, #0D1447); }
.dia-nombre { flex: 1; font-weight: 600; text-transform: capitalize; color: var(--text); }
.dia-cuenta { font-variant-numeric: tabular-nums; }
.dia-grupo[open] > summary { margin-bottom: 4px; }

.mc { position: relative; border-radius: 4px; padding: 10px 14px; color: #fff; cursor: pointer; display: grid; grid-template-columns: 1fr auto auto; gap: 2px 14px; align-items: center; text-align: left; border: 0; font: inherit; width: 100%; }
.mc.salida { background: var(--sal); } .mc.entrada { background: var(--ent); }
/* Las previstas de Cornelia se ven igual que las demás: fondo verde (entrada) o rojo (salida). */
.mc.en_curso { box-shadow: 0 0 0 3px #fff inset; }
.mc.alerta { box-shadow: 0 0 0 3px var(--red) inset; }
.mc .estado { grid-column: 1 / -1; justify-self: end; font-size: 12px; letter-spacing: .4px; text-transform: uppercase; opacity: .9; }
.mc .nombre { font: 500 20px 'Open Sans', sans-serif; text-transform: uppercase; line-height: 1.15; }
.mc .aviso { font: 400 40px 'Open Sans', sans-serif; line-height: 1; text-align: center; min-width: 1.6em; }
.mc .hora { font: 500 20px 'Open Sans', sans-serif; text-align: right; white-space: nowrap; }
.mc .hora small { font-size: 13px; opacity: .85; margin-right: 4px; }
.mc .ais { grid-column: 1 / 3; display: flex; gap: 0 min(26px, 4vw); flex-wrap: nowrap; white-space: nowrap; min-width: 0; font-size: min(24px, 5.2vw); }
.mc .minutos { font: 500 24px 'Open Sans', sans-serif; text-align: right; }
.mc .iconos { grid-column: 1 / 3; display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: center; font-size: 17px; min-height: 22px; }
.mc .frente { font: 500 20px 'Open Sans', sans-serif; text-align: right; white-space: nowrap; }
.ico { width: 20px; height: 20px; fill: currentColor; flex: none; vertical-align: middle; }
.mc .ico { width: 24px; height: 24px; }
.mc.pegada::before { content: ''; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); border: 12px solid transparent; border-bottom-color: #fff; border-top: 0; }

.fc { border-radius: 4px; padding: 8px 12px; background: var(--ent); color: #fff; display: flex; flex-direction: column; gap: 2px; cursor: default; }
.fc { cursor: pointer; } .fc.atracar { background: var(--ent); box-shadow: 0 0 0 3px #fff inset; }
.fc.garreo { box-shadow: 0 0 0 3px var(--red) inset; }
.fc .nombre { font: 500 18px 'Open Sans', sans-serif; text-transform: uppercase; }
.fc .linea { display: flex; gap: 6px 16px; align-items: center; font-size: 17px; flex-wrap: wrap; }
.fc .ico { width: 20px; height: 20px; fill: currentColor; }

.p-notas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.postit { position: relative; background: #F3EF3A; color: #5B5A12; padding: 10px 26px 10px 10px; min-height: 90px; font-size: 13px; text-transform: uppercase; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; cursor: pointer; }
.postit .borrar { position: absolute; top: 4px; right: 4px; background: none; border: 0; color: #8A8820; cursor: pointer; font-size: 16px; }
.p-nueva { background: none; border: 0; color: #F3EF3A; font: 700 20px 'Open Sans', sans-serif; text-align: left; cursor: pointer; padding: 6px 0; }

#movimientos { display: flex; flex-direction: column; gap: 6px; }
.dia { margin: 14px 0 4px; font: 600 13px 'Open Sans', sans-serif; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); display: flex; gap: 8px; align-items: baseline; }
.dia b { color: var(--text); font-size: 15px; }
.mov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 6px; }
.detalle dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 14px; }
.detalle dt { color: var(--muted); } .detalle dd { margin: 0; }

@media (max-width: 1000px) {
  .pantalla { grid-template-columns: 1fr; }
  .p-meteo { order: 2; }
  .p-maniobras { order: 1; } .p-fondeo { order: 2; } .p-mensajes { order: 3; }
  .p-titulo { font-size: 26px; }
}
.grupo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
/* Umbrales de los avisos (Cuenta): el número estrecho, y debajo para qué sirve. */
.umbral { display: grid; grid-template-columns: 22em 7em; gap: 2px 10px; align-items: center; }
.umbral input { grid-column: 2; text-align: right; }
.umbral .muted { grid-column: 1 / -1; font-size: 12px; }
@media (max-width: 700px) { .umbral { grid-template-columns: 1fr 7em; } }
.chips.grandes .chip { min-height: 52px; min-width: 72px; font-size: 20px; }
.mc .maquina { background: #F3EF3A; color: #3A3800; font-weight: 700; font-size: 13px; letter-spacing: .5px; padding: 2px 8px; border-radius: 3px; }
.pill.guardia { border: 0; cursor: pointer; background: #F3EF3A; color: #3A3800; font: 700 14px 'Open Sans', sans-serif; padding: 6px 12px; }
.pill.guardia.sin { background: var(--red-bg); color: var(--red); }
.cc { border-radius: 4px; padding: 8px 12px; background: #3A3F47; color: #fff; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; cursor: pointer; border: 0; width: 100%; text-align: left; font: inherit; }
.cc.entrada { border-left: 6px solid var(--ent); } .cc.salida { border-left: 6px solid var(--sal); }
.cc .nombre { font: 500 18px 'Open Sans', sans-serif; text-transform: uppercase; }
.cc .linea { grid-column: 1 / 2; font-size: 14px; opacity: .85; }
.cc .falta { grid-column: 1 / -1; font-size: 13px; color: var(--yellow); }
.cc .ok { background: var(--green); color: #07170F; border-radius: 6px; padding: 6px 10px; font-weight: 700; font-size: 14px; }
.btn.grande { width: 100%; min-height: 72px; font-size: 30px; letter-spacing: 1px; border-radius: 12px; }
.ficha-gt:empty { display: none; }
.ficha-gt { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--borde, #ccc); border-radius: 8px; font-size: 14px; }
.aviso-ficha { color: #8a5a00; background: #fff4cc; padding: 4px 8px; border-radius: 6px; font-weight: 600; }
.buscador { position: relative; }
.buscador input { width: 200px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line, #ccc); font-size: 14px; background: var(--card); color: inherit; }
.buscar-res { position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; width: min(440px, 92vw); max-height: 70vh; overflow: auto; background: var(--bg, #fff); border: 1px solid var(--line, #ccc); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.buscar-res .br { display: grid; gap: 2px; width: 100%; text-align: left; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line, #eee); background: transparent; color: inherit; cursor: pointer; font: inherit; border-left: 4px solid transparent; }
.buscar-res .br:hover { background: var(--card); }
.buscar-res .br.entrada { border-left-color: var(--ent); } .buscar-res .br.salida { border-left-color: var(--sal); }
@media (max-width: 700px) { .buscador input { width: 130px; } }
.mc .hora .pob { display: block; font-size: 18px; font-weight: 700; color: #fff7a8; }
.mc .hora .pob small { color: inherit; }

.mc .aviso.pob-grande { font: 700 40px 'Open Sans', sans-serif; letter-spacing: 1px; white-space: nowrap; background: rgba(255,255,255,.18); border-radius: 6px; padding: 2px 14px; }
#movimientos .pantalla { margin-top: 8px; width: 100%; }
@media (max-width: 900px) { #movimientos .pantalla > div:last-child { display: none; } }
.mc.pegada { margin-top: 4px; }
.mc.pegada .estado { font-weight: 700; opacity: 1; font-size: 14px; }

/* Correos nuevos: tarjetas amarillas como en iPort Nexus */
.ec { display: grid; gap: 3px; width: 100%; text-align: left; border: 0; border-radius: 4px; padding: 8px 12px; background: #E4D35A; color: #2E2A06; cursor: pointer; font: inherit; }
.ec .linea1 { display: flex; gap: 10px; font-size: 13px; opacity: .85; }
.ec .linea1 .de { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec .asunto { font: 600 16px 'Open Sans', sans-serif; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec .clip { font-size: 12px; opacity: .8; }
.ec.chico .asunto { font-size: 14px; }
.correo-cab { display: grid; gap: 2px; }
.correo-texto { white-space: pre-wrap; max-height: 38vh; overflow: auto; background: var(--card); border-radius: 8px; padding: 10px 12px; font-size: 14px; line-height: 1.45; }
.radios.intencion label { gap: 8px; }
.radios.intencion .ico { width: 22px; height: 22px; }
.radios label:has(input:checked) { border-color: var(--blue); background: var(--blue-bg); }

/* Fondo del tablero más claro (gris azulado) para leer mejor */
.p-vacio { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.25); color: #D5DEE5; }
.p-reloj { color: #EEF3F7; }
.dia, .dia b { color: #E3EAF0; }

/* Notas para todos: amarillas, arriba del tablero */
.p-notasbar { display: flex; gap: 10px; align-items: flex-start; max-width: 1400px; margin: 0 auto 14px; }
.p-notasbar .p-notas { flex: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.p-notasbar .p-notas:empty { display: none; }
.postit { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 220px; max-width: 420px; min-height: 0; padding: 12px 38px 10px 14px;
  background: #F6EE4A; color: #3B3700; font: 700 20px/1.25 'Open Sans', sans-serif; text-transform: none; box-shadow: 0 3px 10px rgba(0,0,0,.25); border-radius: 3px; -webkit-line-clamp: unset; overflow: visible; cursor: default; }
.postit .texto { white-space: pre-wrap; }
.postit .firma { font: 500 12px 'Open Sans', sans-serif; opacity: .7; }
.postit .borrar { top: 6px; right: 8px; font-size: 18px; color: #6B6600; font-weight: 700; }
.p-nueva { flex: none; background: #F6EE4A; color: #3B3700; border-radius: 8px; padding: 8px 14px; font: 700 17px 'Open Sans', sans-serif; margin-left: auto; }

/* Ventana del correo a pantalla completa */
dialog.grande { width: calc(100vw - 32px); max-width: 1700px; height: calc(100vh - 32px); max-height: none; }
dialog.grande #dlgForm { max-height: none; height: 100%; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
dialog.grande #dlgForm > h3 { font-size: 19px; }
dialog.grande #dlgForm > .acciones:last-child { grid-column: 1 / -1; }
.correo-izq { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.correo-der { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
dialog.grande .correo-cab { font-size: 17px; }
dialog.grande .correo-texto { flex: 1; max-height: none; font-size: 18px; line-height: 1.55; padding: 16px 18px; }
@media (max-width: 900px) {
  dialog.grande #dlgForm { display: flex; overflow-y: auto; }
  dialog.grande .correo-texto { max-height: 50vh; }
}

/* ===== Tema claro: fondo blanco roto, paneles blancos y texto oscuro ===== */
:root {
  --bg: #F2EDE4; --panel: #FFFFFF; --card: #FBF8F2; --line: #D8CFBF; --text: #1F2933; --muted: #67717B;
  --blue: #1F63C6; --blue-bg: #E2ECFA; --orange: #C2620E; --orange-bg: #FBEBDC; --green: #1E8F4E; --green-bg: #E0F2E7;
  --red: #C0302C; --red-bg: #FBE4E3; --yellow: #8A7A00; --fondeo: #5B6B78;
}
.btn { border-color: var(--line); }
.btn:hover { border-color: #B8AC97; }
.btn.primary, .btn.ok { color: #fff; }
.btn.danger { border-color: #E6B8B5; }
input, select, textarea { background: #fff; border-color: var(--line); }
.vacio, .chip, .radios label { border-color: var(--line); }
dialog { box-shadow: 0 20px 60px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(40,35,25,.45); }
.nota.aviso { background: #FFF6C2; }
.p-titulo { color: #2E3A45; }
.p-reloj { color: #2E3A45; }
.p-vacio { background: rgba(0,0,0,.025); border-color: #CDC3B2; color: var(--muted); }
.dia, .dia b { color: #2E3A45; }
.mc.pegada::before { border-bottom-color: #5B6B78; }
.cc { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.ec { box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.mc, .fc { box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.mc.en_curso { box-shadow: 0 0 0 3px #1F2933 inset, 0 1px 3px rgba(0,0,0,.18); }
.fc.atracar { box-shadow: 0 0 0 3px #1F2933 inset; }
.buscar-res { background: #fff; }
.correo-texto { background: #FBF8F2; border: 1px solid var(--line); }

/* Selector de fecha y hora (sin teclear) */
.dt { display: flex; flex-direction: column; gap: 6px; position: relative; }
.dt-real { position: absolute; left: 8px; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; min-height: 0; pointer-events: none; }
.dt-boton { min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--text); font: 16px 'Open Sans', sans-serif; text-align: left; cursor: pointer; }
.dt-boton b { font-size: 19px; margin-right: 6px; }
.dt.abierto .dt-boton { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-bg); }
label.dt-ancho { grid-column: 1 / -1; }
.dt-panel { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.dt-atajos { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-cuerpo { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(230px, 1fr); gap: 14px; }
.dt-mes { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; text-transform: capitalize; }
.dt-semana, .dt-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.dt-semana span { font-size: 12px; color: var(--muted); }
.dt-dia, .dt-n { min-height: 36px; border: 1px solid transparent; border-radius: 8px; background: var(--card); color: var(--text); font: 600 15px 'Open Sans', sans-serif; cursor: pointer; }
.dt-dia.hoy { border-color: var(--blue); }
.dt-dia.sel, .dt-n.sel { background: var(--blue); color: #fff; }
.dt-horas { display: flex; flex-direction: column; gap: 6px; }
.dt-rejilla { display: grid; gap: 3px; }
.dt-rejilla.h { grid-template-columns: repeat(6, 1fr); }
.dt-rejilla.m { grid-template-columns: repeat(6, 1fr); }
.dt-ajuste { display: flex; gap: 6px; }
.dt-pie { display: flex; justify-content: space-between; }
@media (max-width: 600px) { .dt-cuerpo { grid-template-columns: 1fr; } }
.dia-sep { margin: 14px 0 2px; padding: 4px 2px; border-bottom: 2px solid #CDC3B2; color: #2E3A45; font: 500 15px 'Open Sans', sans-serif; text-transform: capitalize; }
.dia-sep b { font-weight: 700; font-size: 17px; }
.p-cornelia { margin-top: 14px; justify-content: flex-start; font-size: 13px; }

/* Identidad corporativa: Royal Blue dark #0D1447 y Vermilion #E60C0C */
:root { --marca-azul: #0D1447; --marca-rojo: #E60C0C; }
body { font-variant-numeric: tabular-nums; }
.brand-logo { height: 46px; width: auto; display: block; }
.p-titulo { color: var(--marca-azul); font-weight: 700; }
.p-reloj { color: var(--marca-azul); font-weight: 700; }
.tabs button[aria-selected="true"] { background: var(--marca-azul); color: #fff; }
.login-card .brand-logo { height: 64px; margin: 0 auto 6px; }
.mc .nombre { font-weight: 600; letter-spacing: .2px; }
:root { --blue: #0D1447; --blue-bg: #E4E6F2; }
.btn.primary { background: var(--marca-azul); border-color: var(--marca-azul); color: #fff; }

/* ===== ALERTAS GRANDES (arriba del todo) ===== */
.alertas { z-index: 200; display: flex; flex-direction: column; gap: 4px; }
.alertas:empty { display: none; }
.alerta-grande { display: flex; align-items: center; gap: 18px; padding: 14px 22px; background: #E60C0C; color: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.35); animation: parpadeo 1s steps(2, start) infinite; }
.alerta-grande .icono { font-size: 46px; line-height: 1; }
.alerta-grande .cuerpo { display: flex; flex-direction: column; flex: 1; }
.alerta-grande strong { font: 800 32px/1.1 'Open Sans', sans-serif; letter-spacing: .5px; text-transform: uppercase; }
.alerta-grande .cuerpo span { font: 600 20px 'Open Sans', sans-serif; }
.alerta-grande .btn { background: #fff; color: #B00000; border-color: #fff; font-size: 18px; min-height: 52px; padding: 0 26px; }
.alerta-grande.vista { animation: none; background: #B3090A; }
.alerta-grande .visto { font-weight: 700; opacity: .85; }
@keyframes parpadeo { 0% { background: #E60C0C; } 50% { background: #8E0000; } }
.mc.alerta { box-shadow: 0 0 0 5px #E60C0C, 0 0 18px rgba(230,12,12,.8) !important; }

/* Incidencias anteriores del buque */
.mc .incid { background: #FFD43B; color: #3A2E00; font-weight: 800; font-size: 14px; padding: 2px 9px; border-radius: 4px; letter-spacing: .3px; }
.incid-caja { border: 2px solid #E0A800; background: #FFF6D6; border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; color: #3A2E00; }
.incid-caja > strong { font-size: 16px; }
.incid-grupo { display: grid; gap: 8px; }
.incid-lista { display: grid; gap: 8px; }
.incid-fila { border-top: 1px solid #EED48A; padding-top: 6px; font-size: 14px; }
.incid-fila:first-child { border-top: 0; padding-top: 0; }
.incid-tag { margin-left: 8px; background: #C0302C; color: #fff; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 3px; }
.incid-texto { margin-top: 3px; font-size: 15px; white-space: pre-wrap; }
.alerta-grande .cerrar { background: transparent; border: 2px solid rgba(255,255,255,.7); color: #fff; width: 52px; height: 52px; border-radius: 10px; font-size: 26px; font-weight: 800; cursor: pointer; }
.alerta-grande .cerrar:hover { background: rgba(255,255,255,.15); }

/* Particularidades de maniobra del buque */
.ico-p { width: 26px; height: 26px; flex: none; }
.mc .mas-info { order: 10; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 9px; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.55); cursor: pointer; }
.mc .mas-info:hover { background: rgba(255,255,255,.35); }
.mc .part-caja { order: 11; display: inline-flex; flex-wrap: wrap; max-width: 100%; box-sizing: border-box; align-items: center; gap: 4px; background: rgba(255,255,255,.94); border-radius: 6px; padding: 2px 6px; color: #1F2933; }
.mc .part-caja[hidden] { display: none; }
.mc .part { display: inline-flex; }
.mc .part .ico-p { width: 26px; height: 26px; }
.mc .part-nota { font-size: 13px; font-style: italic; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; }
.partic .fila-p { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.partic .sep-p { width: 1px; height: 34px; background: var(--line); margin: 0 4px; }
.btn-p { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 2px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; opacity: .45; }
.btn-p .ico-p { width: 40px; height: 40px; }
.btn-p:hover { opacity: .8; }
.btn-p.on { opacity: 1; border-color: var(--marca-azul); background: #E4E6F2; box-shadow: 0 0 0 1px var(--marca-azul) inset; }
.part-fila { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.part-fila .ico-p { width: 30px; height: 30px; }
.part-fila .part-nota { font-style: italic; }
.ico-p.ancho { width: auto; aspect-ratio: 1760 / 520; }
.btn-p:has(.ancho) { width: auto; padding: 0 8px; }
.btn-p .ico-p.ancho { height: 30px; }
.mc .part .ico-p.ancho, .part-fila .ico-p.ancho { width: auto; height: 20px; }
.btn.ok.guardar-abajo { width: 100%; min-height: 54px; font-size: 18px; font-weight: 700; background: #1E9E4A; border-color: #1E9E4A; color: #fff; }
.btn.ok.guardar-abajo:hover { background: #178A3F; }
/* POB / POFF en azul corporativo (el verde queda para Guardar) */
.btn.azul, .btn.pob { background: var(--marca-azul); border-color: var(--marca-azul); color: #fff; }
.btn.azul:hover, .btn.pob:hover { background: #1B2570; }
/* Escala de práctico (babor rojo / estribor verde) */
.ico-p.escala { width: auto; height: 26px; aspect-ratio: 880 / 1400; }
.mc .escala-tarjeta { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 6px; padding: 3px 6px; }
.mc .escala-tarjeta .ico-p.escala { height: 40px; }
.btn-escala { opacity: .5; }
.btn-escala .ico-p.escala { height: 24px; }
.btn-escala.on { opacity: 1; border-color: var(--marca-azul); box-shadow: 0 0 0 1px var(--marca-azul) inset; background: #E4E6F2; }

/* Colores del tablero (propios, no los de iPort): entrada y fondeados azul claro, salida amarillo.
   Así la escala de práctico (roja/verde) resalta. Texto en azul corporativo. */
:root { --ent: #9DC6EA; --sal: #F2C933; --ent-osc: #4F86B8; --sal-osc: #B8920F; }
.mc, .fc { color: var(--marca-azul); }
.mc .hora .pob { color: var(--marca-azul); }
.mc .aviso.pob-grande { background: rgba(255,255,255,.55); color: #E60C0C; } /* rojo del manual corporativo (KV 30/10) */
.mc .mas-info { background: rgba(255,255,255,.6); border-color: rgba(13,20,71,.35); }
.mc .mas-info:hover { background: #fff; }
.mc .maquina { background: var(--marca-azul); color: #fff; }
.mc .incid { background: #E60C0C; color: #fff; }
.mc.en_curso { box-shadow: 0 0 0 3px var(--marca-azul) inset, 0 1px 3px rgba(0,0,0,.18); }
.fc.atracar { box-shadow: 0 0 0 3px var(--marca-azul) inset; }
/* Atraque: costado y proa/popa al bolardo */
.ico-costado { width: 54px; height: 36px; }
.btn-costado { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; min-height: 48px; border: 2px solid var(--line); border-radius: 10px; background: #fff; font: 600 14px 'Open Sans', sans-serif; color: var(--text); cursor: pointer; opacity: .5; }
.btn-costado.on { opacity: 1; border-color: var(--marca-azul); background: #E4E6F2; box-shadow: 0 0 0 1px var(--marca-azul) inset; }
.aviso-costado { margin-top: 6px; color: #B3261E; font: 700 13px 'Open Sans', sans-serif; }
.atraque-dib { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.dib-atraque { width: 100%; max-width: 460px; height: auto; align-self: center; }
.atraque-dib .bolardos { display: flex; justify-content: space-between; gap: 10px; max-width: 460px; width: 100%; align-self: center; }
.atraque-dib .bol { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--muted); }
.atraque-dib .bol input { width: 110px; font-size: 20px; font-weight: 700; text-align: center; }
.atraque-dib .bol.on { color: var(--marca-azul); font-weight: 700; }
.atraque-dib .bol.on input { border-color: var(--marca-azul); background: #E4E6F2; }
.amarre-txt { align-self: center; font-size: 18px; font-weight: 800; color: var(--marca-azul); }
.mc .amarre-mini { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
.mc .amarre-mini .dib-atraque { width: 92px; height: auto; }
.mc .amarre-mini strong { font-size: 14px; white-space: nowrap; }
/* Últimos movimientos del buque */
.tabla-movs { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.tabla-movs th { font-weight: 700; text-align: center; padding: 7px 6px; border-bottom: 1px solid var(--line); }
.tabla-movs td { text-align: center; padding: 7px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tabla-movs tr:last-child td { border-bottom: 0; }
.tabla-movs .mov-tipo { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.tabla-movs .ico { width: 18px; height: 18px; }
/* Eslora × manga · calado: pequeño y discreto, para que quepa lo demás (KV, 28/10) */
.mc .part-caja .dim { font-weight: 500; font-size: 11px; color: #5A6573; white-space: nowrap; margin-right: 2px; }
.cambio-frente .fila-cf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
@media (max-width: 640px) { .cambio-frente .fila-cf { grid-template-columns: 1fr; } }
/* Cambio de frente: flecha hacia abajo y la entrada al nuevo frente pegada en azul */
.flecha-cambio { text-align: center; font-size: 26px; line-height: 1; color: var(--marca-azul); margin: -2px 0 -4px; }
.mc.tras-cambio.pegada::before { display: none; }
.mc.tras-cambio { margin-top: 0; }
/* Correos del buque en la tarjeta */
.correos-buque .ec-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.correos-buque .ec-lista[hidden] { display: none; }
.correos-buque .ec.propio { box-shadow: 0 0 0 2px var(--marca-azul) inset; }
.correos-buque .ec-nuevo { font-size: 11px; font-weight: 700; color: #8A6A00; background: #FFF3B0; padding: 1px 6px; border-radius: 3px; margin-left: 6px; }

/* Tarjeta de maniobra a lo ancho: tres columnas (maniobra · atraque · buque) sin tener que bajar */
dialog.ancha { width: calc(100vw - 32px); max-width: 1560px; }
dialog.ancha #dlgForm { max-height: calc(100vh - 32px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 26px; align-content: start; }
dialog.ancha #dlgForm > h3 { grid-column: 1 / -1; font-size: 22px; }
dialog.ancha #dlgForm > .acciones:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 12px; }
.col-tarjeta { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.col-titulo { font: 700 13px 'Open Sans', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--marca-azul); border-bottom: 2px solid var(--marca-azul); padding-bottom: 4px; }
dialog.ancha .btn.grande { min-height: 64px; font-size: 28px; }
@media (max-width: 1100px) {
  dialog.ancha #dlgForm { display: flex; flex-direction: column; }
}
dialog.ancha #dlgForm > .acciones-tarjeta { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 12px; }
dialog.ancha #dlgForm > .acciones:last-child { border-top: 0; padding-top: 0; margin-top: -8px; }
dialog.ancha .btn-p .ico-p { width: 34px; height: 34px; }
dialog.ancha .btn-p { width: 46px; height: 46px; }
dialog.ancha .btn-p:has(.ancho) { width: auto; }
dialog.ancha .btn-p .ico-p.ancho { height: 34px; }
/* Remolcadores junto al costado */
.fila-costado { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.fila-costado .grupo { gap: 4px; }
.remolc { display: inline-flex; align-items: center; gap: 6px; }
.remolc-acons { font-size: 13px; font-weight: 600; margin-top: 4px; cursor: pointer; color: #0D1447; }
.remolc-acons.corto { color: #B45309; }
.remolc-det { font-size: 12px; line-height: 1.4; margin-top: 4px; padding: 6px 8px; border-radius: 6px; background: rgba(13,20,71,.06); max-width: 420px; }
.remolc-det > div + div { margin-top: 3px; }
.acons-exp { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(13,20,71,.12); }
.acons-viento { font-weight: 600; }
.acons-viento.ok { color: #1E7E34; }
.acons-viento.mal { color: #C81E1E; }
.acons-viento.aviso { color: #9A6700; background: #FFF4CC; border-radius: 4px; padding: 0 4px; }
.acons-exp-mini { font-weight: 400; color: #6B7280; }
.acons-afinar { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(13,20,71,.12); }
.acons-afinar > .muted { flex-basis: 100%; }
.remolc-det .acons-campo { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; font-size: 12px; margin: 0; }
.remolc-det .acons-campo input { width: 72px; min-width: 0; padding: 3px 5px; font-size: 13px; margin: 0; }
.ico-remolc { width: 54px; height: 32px; }
.sel-remolc { font: 700 20px 'Open Sans', sans-serif; min-height: 48px; width: 84px; text-align: center; }
/* Remolcadores en la tarjeta del tablero: discreto, junto a la escala */
.mc .remolc-tarjeta { display: inline-flex; align-items: center; }
.quesitos { display: inline-flex; align-items: center; gap: 3px; }
.mc .remolc-tarjeta .ico-remolc { width: 42px; height: 25px; }
.mc .remolc-tarjeta .ico-quesitos { width: 26px; height: 26px; flex: none; fill: #fff; stroke: rgba(13,20,71,.55); stroke-width: .8; }
.ico-fondeado, .fc .ico.ico-fondeado, .mc .ico.ico-fondeado { width: 42px; height: 25px; }
.gt-falta { color: #B00000; font-weight: 700; }
.detalle.resumen dl { grid-template-columns: auto minmax(0, 1fr); }
/* MMPP abierto: la caja ocupa todo el ancho de la columna y no se sale encima de la de al lado (KV 30/10, NQ LAELIA). */
.detalle dd { min-width: 0; }
.detalle dd:has(> .mmpp-desp[open]) { grid-column: 1 / -1; }
.mmpp-caja { min-width: 0; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
.mmpp-pdfs .btn { white-space: normal; text-align: left; max-width: 100%; }
.sel-fondeadero { min-height: 44px; font-size: 16px; }
.fc.manual { background: var(--ent); }

/* Meteo: viento actual (estación APC) y previsión por horas (viento medio, rachas, ola). Rojo = límite de suspensión. */
.meteo-actual { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.meteo-actual .m-grande { font: 800 34px 'Open Sans', sans-serif; line-height: 1; color: var(--marca-azul); display: flex; align-items: baseline; gap: 6px; }
.meteo-actual .m-grande small { font-size: 15px; font-weight: 600; }
.meteo-actual .m-dir { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 15px; }
.meteo-actual .m-dir svg { width: 18px; height: 18px; }
.meteo-actual .m-racha { font-size: 15px; font-weight: 700; }
.meteo-actual .m-pie { font-size: 11px; color: var(--muted); }
.meteo-actual.rojo { background: #FFE1DF; border-color: #E60C0C; } .meteo-actual.rojo .m-grande, .meteo-actual.rojo .m-racha { color: #B00000; }
.meteo-actual.ambar { background: #FFF3C4; border-color: #D9A400; }
.meteo-actual.viejo { opacity: .7; }
.meteo-prev table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.meteo-prev th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 5px 4px; border-bottom: 1px solid var(--line); text-align: center; }
.meteo-prev td { padding: 3px 4px; text-align: center; border-bottom: 1px solid #EEE9DF; white-space: nowrap; }
.meteo-prev td:first-child { text-align: left; font-weight: 700; color: var(--marca-azul); }
.meteo-prev tr.dia td { background: #F2EFE8; font-weight: 700; color: var(--marca-azul); text-align: left; font-size: 12px; }
.meteo-prev td.rojo { background: #E60C0C; color: #fff; font-weight: 800; }
.meteo-prev td.ambar { background: #FFD43B; color: #3A2E00; font-weight: 700; }
.meteo-prev tr.ahora td { outline: 2px solid var(--marca-azul); outline-offset: -2px; }
.meteo-prev .m-pie { font-size: 11px; color: var(--muted); padding: 4px 2px; }
.meteo-prev .m-dir { display: inline-flex; align-items: center; gap: 2px; }
.meteo-prev .m-dir svg { width: 12px; height: 12px; }
.meteo-actual .m-aviso { font-size: 12px; font-weight: 700; color: #8A6A00; background: #FFF3B0; border-radius: 4px; padding: 3px 6px; margin-top: 4px; }
.meteo-actual .m-ola { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.meteo-actual .m-ola-linea { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; font-weight: 700; color: var(--marca-azul); }
.meteo-actual .m-ola-v { font-size: 20px; font-weight: 800; }
.meteo-actual .m-ola-linea small { font-size: 12px; font-weight: 600; color: var(--muted); margin-right: 4px; }
.meteo-actual .m-ola-v { font-size: 18px; }
.meteo-actual .m-ola.rojo .m-ola-v { color: #B00000; }
.meteo-actual .m-sol { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 5px; display: flex; gap: 14px; flex-wrap: wrap; font-weight: 700; color: var(--marca-azul); font-size: 14px; }
.meteo-actual .m-sol small { font-weight: 600; color: var(--muted); font-size: 12px; margin-right: 3px; }

/* Correo a la izquierda, tarjeta del buque a la derecha (misma tarjeta que en el tablero) */
dialog.grande .correo-der { display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow-y: auto; }
dialog.grande .correo-izq { overflow-y: auto; }
.tarjeta-en-correo { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 18px; align-content: start; }
.tarjeta-en-correo .tarjeta-titulo { grid-column: 1 / -1; margin: 0; font-size: 20px; }
.tarjeta-en-correo .acciones-tarjeta { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 10px; }
.tarjeta-en-correo .btn.grande { min-height: 56px; font-size: 24px; }
.tarjeta-en-correo .btn-p { width: 46px; height: 46px; } .tarjeta-en-correo .btn-p .ico-p { width: 34px; height: 34px; }
.tarjeta-en-correo .btn-p:has(.ancho) { width: auto; } .tarjeta-en-correo .btn-p .ico-p.ancho { height: 34px; }
/* Aviso suave (ha levado del fondeadero): sin parpadeo ni pitido, en azul */
.alerta-grande.suave { background: var(--marca-azul); animation: none; }
.alerta-grande.suave .btn { color: var(--marca-azul); }

/* ---- Pantalla compacta: cabecera en una línea, títulos pequeños, menos huecos (para ver más sin bajar) ---- */
.top { padding: 4px 12px; gap: 6px 10px; flex-wrap: nowrap; }
/* Encabezado en una sola fila: las pestañas no se parten en columna; lo que cede sitio es el buscador y el nombre del usuario. */
.top > * { flex-shrink: 0; }
.tabs { flex-wrap: nowrap; }
.tabs button { white-space: nowrap; }
.top #yo { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Letra y botones del encabezado proporcionales al ancho de la ventana: todo cabe en una fila sin desplazamiento lateral. */
.top { --tf: clamp(10px, 0.9vw, 14px); --tp: clamp(3px, 0.6vw, 11px); gap: 4px clamp(4px, 0.6vw, 10px); max-width: 100vw; overflow: hidden; }
.top .brand-logo { height: clamp(26px, 2.3vw, 34px); }
.tabs { gap: 2px; }
.tabs button { font-size: var(--tf); padding: 0 var(--tp); min-height: clamp(26px, 2.1vw, 32px); }
.top .pill, .top .pill.guardia { font-size: clamp(10px, 0.85vw, 13px); padding: 3px clamp(5px, 0.6vw, 9px); }
.top .p-nueva { font-size: clamp(11px, 0.9vw, 14px); padding: 3px clamp(5px, 0.6vw, 10px); }
.top #yo { font-size: clamp(10px, 0.8vw, 12px); }
.top #salir { font-size: clamp(11px, 0.85vw, 13px); padding: 0 clamp(6px, 0.6vw, 10px); }
/* Buscador compacto: solo la lupa; se despliega al pulsarla (o al escribir). Así "+ Nota" y el resto siempre se ven. */
.top .buscador { flex: 0 0 auto; width: 34px; max-width: 220px; transition: width .15s; }
.top .buscador:focus-within, .top .buscador.abierto { width: clamp(140px, 14vw, 220px); }
.top .buscador input { width: 100%; box-sizing: border-box; cursor: pointer; }
.top .buscador .lupa { position: absolute; left: 9px; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: var(--marca-azul, #0D1447); stroke-width: 2.4; stroke-linecap: round; pointer-events: none; }
.top .buscador input::placeholder { color: transparent; }
.top .buscador:focus-within input { cursor: text; }
.top .buscador:focus-within input::placeholder { color: var(--muted); }
.top .buscador input { font-size: clamp(11px, 0.9vw, 14px); min-height: clamp(26px, 2.1vw, 32px); padding: 0 8px 0 30px; }
.top .pill { flex: 0 1 auto; min-width: 48px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1300px) { .top #yo { display: none; } .top .brand-logo { height: 24px; } .tabs button { font-size: 11.5px; padding: 0 6px; } .top .pill, .top .pill.guardia { font-size: 11px; padding: 3px 6px; } .top .p-nueva { font-size: 11px; padding: 3px 6px; } }
html, body { overflow-x: hidden; }
.top .brand-logo { height: 34px; }

.top .buscador input { min-height: clamp(26px, 2.1vw, 32px); }
.top .pill { font-size: 12px; padding: 3px 9px; white-space: nowrap; }
.top #yo { font-size: 12px; white-space: nowrap; }
.top .p-nueva { padding: 4px 10px; font-size: 14px; margin-left: 0; }
.top #salir { min-height: 30px; }
main { padding: 6px 12px 12px; }
.p-notasbar { margin: 0 auto 6px; }
.p-notasbar:has(.p-notas:empty) { display: none; }
.pantalla { gap: 14px; max-width: none; }
.p-col { gap: 6px; }
.p-titulo { font-size: 20px; margin: 0; }
.p-mensajes .p-titulo, .p-fondeo .p-titulo { font-size: 17px; text-align: left; border-bottom: 2px solid var(--marca-azul); padding-bottom: 2px; }
.p-fondeo .p-titulo:not(:first-child) { margin-top: 8px; }
.p-meteo .p-titulo { font-size: 17px; text-align: left; border-bottom: 2px solid var(--marca-azul); padding-bottom: 2px; }
.p-reloj { font-size: 22px; padding: 0 4px; }
.p-reloj .p-titulo { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; }
.p-reloj .btn { min-height: 28px; width: 28px; font-size: 18px; }
.mc { padding: 6px 12px; gap: 0 12px; }
.mc .nombre { font-size: 18px; }
.mc .hora, .mc .frente { font-size: 18px; }
.mc .aviso.pob-grande { font-size: 30px; }
.mc .iconos { min-height: 20px; gap: 4px 12px; }
.mc .escala-tarjeta .ico-p.escala { height: 32px; }
.mc .remolc-tarjeta .ico-remolc { width: 36px; height: 22px; }
.p-lista { gap: 6px; }
.ec { padding: 5px 10px; }
.ec .asunto { font-size: 14px; }
.meteo-actual { padding: 6px 10px; }
.meteo-actual .m-grande { font-size: 28px; }
.meteo-actual .m-ola-v { font-size: 16px; }
.meteo-prev td { padding: 2px 4px; font-size: 12px; }
.meteo-prev th { padding: 3px 4px; }
@media (max-width: 1080px) { .top { flex-wrap: wrap; } }
/* Fecha y hora: campo del navegador con el icono del calendario grande */
input[type="datetime-local"] { font: 600 15px "Open Sans", sans-serif; min-height: 44px; padding: 0 4px; min-width: 0; }
input[type="datetime-local"]::-webkit-calendar-picker-indicator { width: 26px; height: 26px; margin-left: 2px; cursor: pointer; opacity: .85; }
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* Correo: cabecera mínima (remitente y hora) y cuerpo a toda la altura */
dialog.grande .correo-izq { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
dialog.grande .correo-cab { font-size: 14px; line-height: 1.2; }
dialog.grande .correo-cab .muted { font-size: 12px; }
dialog.grande .correo-texto { flex: 1 1 auto; min-height: 200px; max-height: none; overflow: auto; font-size: 13px; line-height: 1.3; padding: 8px 10px; white-space: pre-wrap; word-break: break-word; }
dialog.grande .correo-izq .acciones { flex: none; }
.mc .hora { white-space: nowrap; }

/* Ventana del correo: arriba correo (mitad) + lo principal de la tarjeta (mitad); debajo el resto a todo lo ancho */
.tc-arriba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 22px; height: 60vh; flex: none; }
.tc-arriba .correo-izq { min-height: 0; }
.tc-arriba .correo-der { min-height: 0; overflow-y: auto; }
.tc-principal { display: flex; flex-direction: column; gap: 10px; }
.tc-principal .atraque-dib { max-width: 520px; }
.tc-abajo { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.tc-resto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px 18px; align-items: start; }
.tc-abajo .acciones-tarjeta { border-top: 1px solid var(--line); padding-top: 8px; }
.tarjeta-titulo { margin: 0 0 4px; font-size: 18px; }
dialog.grande #dlgForm > .acciones:last-child { flex: none; }
@media (max-width: 900px) { .tc-arriba { grid-template-columns: 1fr; max-height: none; } }
/* Ventana del correo: dibujo del atraque más pequeño, que quepa sin bajar */
.tc-principal .atraque-dib { max-width: 420px; padding: 6px 8px; gap: 4px; }
.tc-principal .dib-atraque { max-width: 300px; }
.tc-principal .atraque-dib .bolardos { max-width: 300px; }
.tc-principal .atraque-dib .bol input { width: 80px; font-size: 16px; min-height: 36px; }
.tc-principal .amarre-txt { font-size: 15px; }
.tc-principal .fila-costado .grupo { gap: 2px; }
.tc-principal .btn-costado { min-height: 40px; padding: 2px 10px 2px 2px; }
.tc-principal .ico-costado { width: 44px; height: 30px; }
/* En el correo: dibujo y casillas de bolardo en una sola fila */
.tc-principal .atraque-dib { flex-direction: row; flex-wrap: wrap; align-items: center; max-width: none; gap: 4px 14px; }
.tc-principal .dib-atraque { width: 260px; max-width: 260px; align-self: center; }
.tc-principal .atraque-dib .bolardos { width: auto; max-width: none; flex-direction: column; gap: 4px; }
.tc-principal .atraque-dib .bol { flex-direction: row; align-items: center; gap: 8px; }
.tc-principal .atraque-dib .bol input { width: 70px; font-size: 15px; min-height: 32px; }
.tc-principal .amarre-txt { width: 100%; font-size: 14px; text-align: left; }
/* Ventana del correo: columna derecha compacta (todo a la vista sin bajar) */
.tc-arriba { height: auto; max-height: calc(100vh - 150px); }
.tc-arriba .correo-der { gap: 6px; }
.tc-principal { gap: 6px; }
.tc-principal .grid2 { gap: 6px 10px; }
.tc-principal label, .tc-principal .grupo { gap: 2px; font-size: 12px; }
.tc-principal input[type="datetime-local"] { min-height: 36px; font-size: 14px; }
.tc-principal input[type="datetime-local"]::-webkit-calendar-picker-indicator { width: 22px; height: 22px; }
.tc-principal select { min-height: 36px; font-size: 14px; }
.tc-principal .btn.small { min-height: 34px; font-size: 13px; }
.tc-principal .btn-costado { min-height: 36px; font-size: 13px; }
.tc-principal .ico-costado { width: 38px; height: 26px; }
.tc-principal .ico-remolc { width: 44px; height: 26px; } .tc-principal .sel-remolc { min-height: 36px; width: 70px; font-size: 16px; }
.tc-principal .dib-atraque { width: 220px; max-width: 220px; }
.tc-principal .atraque-dib { padding: 4px 8px; }
.tc-principal .atraque-dib .bol { font-size: 12px; } .tc-principal .atraque-dib .bol input { width: 64px; min-height: 30px; font-size: 14px; }
.tc-principal .amarre-txt { font-size: 13px; }
.tarjeta-titulo { font-size: 16px; }
.correo-der > .grupo .muted { font-size: 12px; }
.correo-der > .grupo select { min-height: 34px; font-size: 14px; }
.vinculados { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 12px; }
.vinculados .vinc { background: #dff5e6; color: #145a32; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.atraque-dib.solo-lectura { max-width: 360px; padding: 6px 8px; }
.atraque-dib.solo-lectura .dib-atraque { max-width: 320px; }
.atraque-dib.solo-lectura .amarre-txt { font-size: 14px; }
.btn.peligro { color: #B3261E; border-color: #E0A8A3; }

.vinc { display: inline-flex; align-items: center; gap: 4px; }
.vinc-x { border: 0; background: transparent; color: var(--red); font-weight: 700; cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1; }
.vinc-x:hover { background: var(--red-bg); border-radius: 4px; }

/* Sin correo vinculado: nombre en cursiva (se ve de un vistazo qué maniobra tiene ya su correo). */
.mc.sin-correo .nombre { font-style: italic; }

/* Frente orientativo (el de la última escala), mientras no llega la autorización. */
.mc .frente .frente-prev, .frente-prev { opacity: .7; font-style: italic; }

/* ---------- Mapa del puerto ---------- */
.mapa-pantalla { display: grid; grid-template-columns: 1fr 320px; gap: 8px; height: calc(100vh - 60px); min-height: 420px; }
.mapa-lienzo { width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background: #cfe6f2; }
.mapa-panel { overflow: auto; font-size: 13px; padding: 6px; }
body.mapa-sin-panel .mapa-pantalla { grid-template-columns: 1fr; grid-template-rows: 1fr; }
body.mapa-sin-panel .mapa-panel { display: none; }
.mapa-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.mapa-grupos { display: grid; gap: 3px; }
.mapa-grupo { text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 5px 8px; cursor: pointer; font: inherit; color: inherit; }
.mapa-grupo.on { border-color: var(--marca-azul, #0D1447); box-shadow: 0 0 0 2px #0D144733 inset; }
.mapa-grupo.sin b { color: var(--muted); font-style: italic; }
.mapa-asignar { display: grid; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.mapa-asignar label { display: grid; gap: 2px; font-size: 12px; color: var(--muted); }
.mapa-asignar label.fila { display: flex; align-items: center; gap: 6px; }
.mapa-asignar select { min-height: 32px; }
.peq { font-size: 12px; margin: 0 0 6px; }
.noray-num { font: 700 10px 'Open Sans', sans-serif; color: #7A3E00; text-shadow: 0 0 2px #fff, 0 0 2px #fff; white-space: nowrap; transform: translate(-50%, -170%); }
.ais-nombre, .plan-nombre { font: 700 11px 'Open Sans', sans-serif; color: #0D1447; text-shadow: 0 0 3px #fff, 0 0 3px #fff; white-space: nowrap; transform: translate(-50%, -140%); }
.plan-nombre { color: #1E6FD9; }
.hueco-txt { font: 600 12px 'Open Sans', sans-serif; color: #6B7785; padding: 0 3px; white-space: nowrap; transform: translate(-50%, -50%); cursor: help; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }
.hueco-txt.aviso { color: #B06A00; font-weight: 700; }
.hueco-txt.mal { color: #C62828; font-weight: 700; }
.hueco-txt.ok { color: #6B7785; font-weight: 600; }
@media (max-width: 900px) { .mapa-pantalla { grid-template-columns: 1fr; grid-template-rows: 1fr auto; height: calc(100vh - 110px); } .mapa-panel { max-height: 40vh; } }
.noray-mov { background: #E0892C; color: #fff; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 3px #000a; font: 700 9px/18px 'Open Sans', sans-serif; text-align: center; cursor: grab; }
.noray-mov.corr { background: #1E9E4A; }
.mapa-calib { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; }
.mapa-calib summary { cursor: pointer; }
.calib-plano { margin-top: 8px; }
.calib-punto { display: grid; grid-template-columns: 64px 1fr; gap: 4px 8px; align-items: center; padding: 4px 0; border-top: 1px solid var(--line); font-size: 12px; }
.calib-punto img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); grid-row: span 2; }
.calib-punto.ok .calib-txt b { color: #1E9E4A; }
.pc-marca { color: #C62828; font: 700 12px 'Open Sans', sans-serif; white-space: nowrap; text-shadow: 0 0 3px #fff; }
.pc-marca span { font-size: 18px; line-height: 18px; }
#mapaLienzo.marcando { cursor: crosshair; }
#mapaLienzo.marcando .leaflet-interactive { pointer-events: none; }
/* En la vista Mapa, todo el ancho de la ventana para el mapa. */
body.vista-mapa main { max-width: none; padding: 4px 8px 8px; }
body.vista-mapa .mapa-pantalla { height: calc(100vh - 56px); }
.calib-norays { font-size: 12px; margin: 4px 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.chip-res { padding: 1px 6px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.chip-res.ok, .ok { color: #1E9E4A; } .chip-res.aviso, .aviso { color: #E0892C; } .chip-res.mal, .mal { color: #C62828; }
.mapa-asignar .nuevo-noray { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--borde, #ccc); }
.mapa-asignar .nuevo-noray input { width: 5em; }
/* Ficha del frente (guía APC 2022) en la tarjeta y en el mapa */
.aviso-frente { margin: 4px 0 6px; padding: 6px 8px; border-left: 4px solid #E07B00; background: #FFF4E5; border-radius: 4px; font-size: 13px; color: #6B3A00; }
.aviso-frente summary { cursor: pointer; font-weight: 600; }
.aviso-frente p { margin: 4px 0; font-weight: 600; }
.aviso-frente-fotos { display: flex; gap: 6px; overflow-x: auto; }
.aviso-frente-foto { flex: 0 0 auto; width: 96px; height: 72px; padding: 0; border: 1px solid #E0C090; border-radius: 6px; overflow: hidden; background: #fff; cursor: zoom-in; }
.aviso-frente-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ficha-frente { font-size: 12.5px; margin: 4px 0 8px; padding: 4px 8px; border-left: 3px solid #0D1447; background: #f4f6fb; border-radius: 4px; }
.ficha-frente.mal { border-left-color: #c62828; background: #fdf0f0; }
.ficha-frente summary { cursor: pointer; }
.ficha-frente .aviso-ficha { color: #c62828; font-weight: 700; }
.ficha-frente p, .ficha-frente ul { margin: 4px 0; } .ficha-frente ul { padding-left: 18px; }
.ficha-pop .ficha table { border-collapse: collapse; margin: 4px 0; font-size: 12.5px; }
.ficha-pop .ficha th { text-align: left; font-weight: 600; padding: 1px 8px 1px 0; white-space: nowrap; }
.ficha-pop .ficha td { padding: 1px 0; }
.ficha-pop .ficha ul { padding-left: 16px; margin: 4px 0; font-size: 12px; }
.ficha-pop .ficha p { margin: 4px 0; font-size: 12px; } .ficha-pop .peq { font-size: 10.5px; }
/* Simulador de atraque: cuadro pequeño y movible por el mapa */
.mapa-pantalla { position: relative; }
.sim-boton { background: #fff; border: 2px solid rgba(0,0,0,.2); border-radius: 4px; padding: 4px 8px; font: 600 12px system-ui, sans-serif; cursor: pointer; color: #0D1447; }
.sim-boton.on { background: #C62828; color: #fff; }
/* Globo de un buque atracado: resumen de la ROM (OK en verde, o qué no cumple y por qué). */
.rom-globo { margin-top: 8px; padding-top: 8px; border-top: 1px solid #DDE1E6; display: grid; gap: 4px; font-size: 12px; }
.rom-cab { font-weight: 700; color: #0D1447; }
.rom-cab.rom-si { color: #fff; background: #1E8F4E; border-radius: 4px; padding: 3px 8px; }
.rom-cab.rom-no { color: #fff; background: #C62828; border-radius: 4px; padding: 3px 8px; }
.rom-l.mal { color: #C62828; font-weight: 700; } .rom-l.aviso { color: #B06A00; }
.rom-pie { font-size: 11px; color: #6B7785; }
.rom-globo .btn { justify-self: start; }
#mapaLienzo.midiendo-rom { cursor: crosshair; }
.sim-panel { position: absolute; left: 12px; bottom: 32px; z-index: 1000; width: 250px; background: rgba(255,255,255,.97); border: 1px solid #c9cfe0; border-left: 4px solid #7A3E9D; border-radius: 8px; padding: 6px 7px; font-size: 11.5px; box-shadow: 0 3px 12px rgba(0,0,0,.2); }
.sim-panel.moviendo { opacity: .85; }
.sim-cab { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; cursor: move; }
.sim-cab strong { flex: 1; font-size: 12px; }
.sim-cab .asa { color: #999; cursor: move; letter-spacing: -2px; }
.sim-cab { touch-action: none; } /* que en el iPhone/iPad el dedo arrastre el cuadro y no el mapa */
.sim-panel.minimizado > :not(.sim-cab):not(.sim-form), .sim-panel.minimizado .sim-form > :not(.sim-cab) { display: none; }
.sim-panel.minimizado { width: auto; min-width: 170px; }
.sim-panel.minimizado .sim-cab { margin-bottom: 0; }
.sim-fila { display: flex; gap: 4px; align-items: center; margin: 2px 0; }
.sim-fila label { display: flex; align-items: center; gap: 2px; color: #666; }
#simPanel input, #simPanel select { font-size: 11.5px; padding: 0 3px; min-width: 0; height: 22px; min-height: 0; line-height: 20px; border-radius: 4px; box-shadow: none; margin: 0; }
#simPanel input[type=number] { width: 4.3em; text-align: center; }
#simPanel input[type=datetime-local] { font-size: 10.5px; }
.sim-buscar { flex: 1; }
.sim-frente { flex: 1; } .sim-hora { flex: 1; } .sim-tarjeta { width: 5.5em; }
.btn.mini { padding: 1px 5px; font-size: 11.5px; line-height: 1.5; min-width: 0; }
.btn.mini.ancho { width: 100%; margin-top: 3px; }
.sim-bol { text-align: center; white-space: nowrap; margin: 6px 0 4px; font-size: 15px; }
.sim-bol b { font-size: 17px; color: #0D1447; }
/* Selector de posición: una tira de botones suaves (− / Centrar / +) en vez de flechas */
.sim-pos { display: flex; margin: 0 0 6px; border: 1px solid #D5DAE0; border-radius: 999px; overflow: hidden; background: #F4F6F8; }
.sim-pos button { flex: 1; min-height: 38px; touch-action: manipulation; user-select: none; -webkit-user-select: none; border: 0; border-right: 1px solid #D5DAE0; background: transparent; font-family: inherit; font-weight: 600; font-size: 15px; color: #0D1447; cursor: pointer; padding: 0 4px; }
.sim-pos button:last-child { border-right: 0; }
.sim-pos button:active { background: #DDE3EA; }
.sim-pos button.centrar { flex: 2; font-weight: 600; font-size: 13px; color: #1B5E20; white-space: nowrap; }
.sim-res { margin: 3px 0 0; padding: 0; list-style: none; max-height: 7.5em; overflow: auto; }
.sim-res li { padding: 0; line-height: 1.35; } .sim-res .nota { color: #55616D; font-size: .95em; } .sim-res .mal { color: #c62828; font-weight: 600; } .sim-res .ok { color: #1E9E4A; }
/* Simulador de atraque abajo y a lo ancho (KV 30/10: así se ve más mapa). Se queda fijo: no se arrastra. */
#simPanel { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto; border-radius: 10px 10px 0 0; border-left: 0; border-top: 4px solid #7A3E9D; padding: 4px 10px 6px; max-height: 46%; overflow: auto; }
#simPanel .sim-cab { cursor: default; margin-bottom: 2px; min-height: 0; } #simPanel .sim-cab .asa { display: none; }
/* Cabecera compacta (KV 30/10): título pequeño y botones − / × de 26 px, para dejar más sitio al mapa */
#simPanel .sim-cab strong { font-size: 13px; }
#simPanel .sim-cab .btn { min-height: 0 !important; min-width: 0 !important; height: 26px; width: 30px; padding: 0 !important; font-size: 13px; line-height: 24px; border-radius: 6px; }
#simPanel .sim-form { display: flex; flex-wrap: wrap; column-gap: 8px; align-items: center; }
#simPanel .sim-form > .sim-cab, #simPanel .sim-form > .sim-resultado { flex: 1 1 100%; }
#simPanel .sim-form > .sim-fila { flex: 1 1 160px; min-width: 0; }
#simPanel .sim-fila > * { min-width: 0; }
#simPanel .sim-resultado { display: flex; flex-wrap: wrap; column-gap: 10px; align-items: center; }
#simPanel .sim-bol { flex: 0 0 auto; margin: 2px 0; }
#simPanel .sim-pos { flex: 1 1 260px; margin: 2px 0; }
#simPanel .sim-res { flex: 1 1 100%; max-height: 4.2em; }
#simPanel.minimizado { width: auto; min-width: 0; }
.sim-asa { background: rgba(122,62,157,.92); color: #fff; border-radius: 6px; padding: 2px 6px; font-size: 11px; white-space: nowrap; cursor: grab; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.sim-asa span { font-size: 9px; opacity: .85; }
.ficha-frente .sim-ir { margin-left: 8px; }
/* Reproducción del track de una maniobra */
.rec-panel { border-left-color: #7A8C2E; width: 292px; }
/* Mirando un track: fuera los rótulos de los muelles y los números de noray, que tapan la carta. */
body.viendo-track .frente-eti, body.viendo-track .noray-num, body.viendo-track .pc-marca { display: none; }
#recPanel input, #recPanel select { font-size: 11.5px; padding: 0 3px; height: 22px; min-height: 0; line-height: 20px; border-radius: 4px; box-shadow: none; margin: 0; }
#recPanel input[type=number] { width: 4em; text-align: center; }
#recPanel input[type=range] { width: 100%; height: 18px; margin: 4px 0 2px; }
.rec-sub { color: #666; line-height: 1.35; }
.rec-reloj { font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700; margin-top: 4px; }
.rec-datos { font-variant-numeric: tabular-nums; color: #4C5A18; font-weight: 600; }
.rec-botones { display: flex; align-items: center; gap: 3px; }
.rec-botones select { margin-left: auto; }
.rec-fila { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: #666; white-space: nowrap; }
.rec-fila label { display: flex; flex-direction: row; align-items: center; gap: 4px; font-size: 11.5px; }
.rec-fila input[type=checkbox] { width: 13px; height: 13px; }
.rec-fila .btn { margin-left: auto; }
.rec-eti { background: rgba(76,90,24,.92); color: #fff; border-radius: 5px; padding: 2px 6px; font-size: 11px; font-weight: 600; white-space: nowrap; line-height: 1.25; }
.rec-eti small { display: block; font-weight: 400; opacity: .9; font-size: 10px; }
/* Plan de practicaje */
.plan-panel { border-left-color: #C62828; }
body.mapa-plan .mapa-pantalla { grid-template-columns: 1fr var(--plan-ancho, 560px); }
body.mapa-plan .mapa-panel { display: none; }
body.mapa-plan .plan-panel { position: relative; left: auto; bottom: auto; width: auto; max-height: none; grid-column: 2; overflow: hidden; box-shadow: none; padding: 0 0 0 12px; display: flex; min-width: 0; }
body.mapa-plan .plan-panel > .sim-form { flex: 1; min-width: 0; overflow: auto; padding: 6px 7px; }
body.mapa-plan .plan-panel .sim-cab { position: sticky; top: -6px; z-index: 3; background: #fff; padding: 4px 0; cursor: default; }
.plan-tirador { position: absolute; left: 0; top: 0; bottom: 0; width: 10px; cursor: col-resize; background: linear-gradient(90deg, #d5dbe6, #eef1f7); touch-action: none; z-index: 5; }
.plan-tirador::after { content: ''; position: absolute; left: 3px; top: 50%; width: 4px; height: 40px; margin-top: -20px; border-left: 1px solid #8a96a8; border-right: 1px solid #8a96a8; }
.plan-tabla .wp-acc { white-space: nowrap; }
.plan-tabla .wp-acc .btn { padding: 1px 5px; min-width: 0; }
.plan-tabla .wp-asa { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; white-space: nowrap; font-weight: 600; }
.plan-tabla .wp-asa .asa { color: #8a96a8; margin-right: 3px; }
.plan-tabla tr.wp-cogido { opacity: 0.45; }
.plan-tabla tr.wp-cogido .wp-asa { cursor: grabbing; }
.plan-tabla tr.wp-antes td { box-shadow: inset 0 3px 0 #C62828; }
.plan-tabla tr.wp-despues td { box-shadow: inset 0 -3px 0 #C62828; }
@media (max-width: 1100px) { body.mapa-plan .mapa-pantalla { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } body.mapa-plan .plan-panel { grid-column: 1; max-height: 55vh; } .plan-tirador { display: none; } body.mapa-plan .plan-panel { padding-left: 0; } }
/* Móvil: barra para minimizar el panel o darle la altura que se quiera */
.plan-tirador-v, .plan-mini-btn { display: none; }
@media (max-width: 1100px) {
  body.mapa-plan .plan-panel { flex-direction: column; height: var(--plan-alto, 45vh); max-height: 85vh; }
  .plan-tirador-v { display: block; flex: none; height: 22px; touch-action: none; cursor: row-resize; background: linear-gradient(#eef1f7, #d5dbe6); position: relative; }
  .plan-tirador-v::after { content: ''; position: absolute; left: 50%; top: 8px; width: 46px; height: 5px; margin-left: -23px; border-radius: 3px; background: #8a96a8; }
  .plan-mini-btn { display: inline-flex; }
  body.plan-mini.mapa-plan .plan-panel { height: auto; }
  body.plan-mini .plan-panel .sim-form > :not(.sim-cab) { display: none; }
}
.plan-tabla { border-collapse: collapse; width: 100%; font-size: 12px; margin: 6px 0; }
.plan-tabla th, .plan-tabla td { border: 1px solid #d5dbe6; padding: 2px 4px; text-align: center; }
.plan-tabla th { background: #eef1f7; font-weight: 600; }
.plan-tabla input { font-size: 12px; padding: 1px 4px; width: 6.5em; min-height: 28px; border-radius: 5px; }
@media (pointer: coarse) { .plan-tabla input { min-height: 34px; } }
.plan-panel input[type=checkbox] { width: 16px; height: 16px; margin: 0 4px 0 0; }
.plan-panel .sim-campo.fila { flex-direction: row; align-items: center; align-self: end; }
.plan-tabla .mono { font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; max-width: 9em; }
.plan-wp { background: #fff; border: 2px solid #C62828; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #C62828; position: relative; }
.plan-wp span { position: absolute; left: 22px; top: -1px; white-space: nowrap; font-size: 11px; font-weight: 700; color: #0D1447; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.plan-tramo { background: rgba(13,20,71,.85); color: #fff; border-radius: 4px; padding: 1px 5px; font-size: 10.5px; white-space: nowrap; transform: translate(-50%, -50%); }
.track-sog { font-size: 9px; color: #5A6B7A; white-space: nowrap; transform: translate(-50%, -50%); text-shadow: 0 0 2px #fff; }
.plan-tabla .wp-ll { display: block; margin: 1px 0; width: 9.2em; min-height: 24px; font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; }
.plan-linea { background: rgba(30,158,74,.9); color: #fff; border-radius: 3px; padding: 0 4px; font: 600 10px 'Open Sans', sans-serif; white-space: nowrap; transform: translate(-50%, -50%); cursor: help; }
/* Mapa sobrio, al estilo de la carta que había en iPort Nexus */
.frente-eti { color: #1E8A3C; font: 700 12px 'Open Sans', sans-serif; white-space: nowrap; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; transform: translate(-50%, -50%); text-align: center; }
.frente-eti span { display: block; font-weight: 600; font-size: 11px; }
.plan-nombre span, .ais-nombre span { font-weight: 400; opacity: .8; }
.sim-asa { background: none; color: #2b3740; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; padding: 0; }
.sim-asa span { font-size: 10px; opacity: .85; }

/* Brazos de carga de la guía 2024: en rojo, para que canten sobre el resto del mapa. */
.brazo-nombre { font: 700 11px 'Open Sans', sans-serif; color: #1B5E20; white-space: nowrap;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; transform: translate(-50%, -190%); }
/* Norayes de los planos de la guía 2024 (capa de comparación con los que tiene el mapa). */
.g24-nombre { font: 600 10px 'Open Sans', sans-serif; color: #1E8A3C; white-space: nowrap;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff; transform: translate(-50%, 60%); }

/* Histórico: la fila entera abre la maniobra (las acciones de columna se quedaron en una sola). */
.fila-abre { cursor: pointer; }
.fila-abre:hover td, .fila-abre:focus-visible td { background: var(--hover, #eef3f8); }
.fila-abre:focus-visible { outline: 2px solid var(--azul, #0D1447); outline-offset: -2px; }

/* ---------- Tarjeta compacta en el móvil ----------
   En una pantalla de teléfono cada etiqueta y cada hueco cuesta scroll, y la tarjeta se usa
   con el buque entrando. Las horas van de dos en dos y lo demás se aprieta. */
@media (max-width: 600px) {
  #dlgForm { padding: 14px; gap: 8px; }
  #dlgForm h3 { font-size: 18px; }
  /* Las horas (ETA, POB, ETD) y los campos cortos, dos por fila. */
  .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .grid2 > .campo-ancho, .grid2 > .ficha-gt { grid-column: 1 / -1; }
  #dlgForm label { gap: 2px; font-size: 13px; }
  #dlgForm input, #dlgForm select { min-height: 42px; padding: 6px 8px; }
  .grupo { gap: 4px; }
  .resumen { padding: 8px 10px; font-size: 13px; }
  .tc-principal .grid2 { gap: 6px 8px; }
}
/* Noray sin coordenada en el plano: puesto a ojo, hay que colocarlo sobre la ortofoto. */
.noray-mov.ubicar { background: #C62828; border-style: dashed; }
.aviso-ubicar { margin: 6px 0; padding: 7px 9px; border-left: 4px solid #C62828; background: #fdf0f0; border-radius: 6px; font-size: 12.5px; line-height: 1.4; }
.aviso-ubicar .btn { margin-left: 6px; }
/* Alertas grandes en el móvil: el texto ocupa el ancho y "Visto" baja a su propia fila, con la ✕ siempre a la vista. */
@media (max-width: 600px) {
  .alerta-grande { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icono cuerpo cerrar" "accion accion accion"; align-items: start; gap: 8px 10px; padding: 10px 12px; }
  .alerta-grande .icono { grid-area: icono; font-size: 28px; }
  .alerta-grande .cuerpo { grid-area: cuerpo; }
  .alerta-grande strong { font-size: 17px; letter-spacing: .2px; }
  .alerta-grande .cuerpo span { font-size: 14px; line-height: 1.3; }
  .alerta-grande .btn, .alerta-grande .visto { grid-area: accion; }
  .alerta-grande .btn { width: 100%; min-height: 44px; font-size: 16px; }
  .alerta-grande .visto { text-align: center; }
  .alerta-grande .cerrar { grid-area: cerrar; width: 40px; height: 40px; font-size: 20px; }
}
/* Pestañas en el móvil: en dos filas, para que "Cuenta" no se quede fuera de la pantalla. */
@media (max-width: 700px) {
  .top { flex-wrap: wrap; }
  .tabs { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; }
  .tabs button { font-size: 13px; padding: 0 9px; min-height: 32px; }
}
.fond-sel { font: 600 13px 'Open Sans', sans-serif; padding: 4px 6px; max-width: 220px; }
.fond-nombre { font: 800 14px 'Open Sans', sans-serif; color: #0B5394; text-shadow: 0 0 3px #fff, 0 0 3px #fff; transform: translate(-50%, -50%); }

/* Visor de PDF y hojas dentro de la app del iPhone (allí no hay pestañas). */
dialog.visor { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; border-radius: 0; display: flex; flex-direction: column; }
dialog.visor:not([open]) { display: none; }
.visor-barra { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line, #ddd); }
.visor-titulo { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-marco { flex: 1; width: 100%; border: 0; background: #fff; }
.visor-paginas { flex: 1; overflow: auto; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; padding: 8px; background: #525659; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.visor-paginas .muted { color: #ddd; }
.visor-pagina { width: 100%; max-width: none; height: auto; flex: none; margin: 0 auto; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }

/* La cabecera siempre fija: la página no se desplaza nunca, solo lo de debajo (main). Así en la app del
   iPhone no se esconde al mover el mapa ni se mete debajo de la hora (KV). */
html, body { height: 100%; overflow: hidden; }
#app:not([hidden]) { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
#app > .alertas, #app > .top { flex: 0 0 auto; }
#app > main { flex: 1 1 auto; min-height: 0; width: 100%; box-sizing: border-box; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
body.vista-mapa main > section[data-panel="mapa"] { height: 100%; }
body.vista-mapa .mapa-pantalla { height: 100%; min-height: 0; }
/* Cabecera en el móvil, aprovechando el sitio: logo, lupa, guardia, AIS y nota en una fila; debajo las
   pestañas con "Salir" al lado de "Cuenta". */
@media (max-width: 700px) {
  .top { flex-wrap: wrap; padding: 4px 8px; gap: 4px 6px; }
  .top .brand-logo { height: 24px; order: 1; }
  .top .buscador { order: 2; }
  .top #guardia { order: 3; flex: 1 1 0; max-width: max-content; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top #estadoAis { order: 4; flex: 1 1 0; max-width: max-content; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top .p-nueva { order: 5; margin-left: auto; flex-shrink: 0; white-space: nowrap; }
  .top::before { content: ''; order: 6; flex: 0 0 100%; height: 0; }
  .top .tabs { display: contents; }
  .top .tabs button { order: 7; font-size: 13px; padding: 0 9px; min-height: 30px; }
  .top #yo { display: none; }
  .top #salir { order: 8; min-height: 30px; font-size: 13px; }
}
/* Buscar el buque escribiendo, en la ventana del correo. */
.buscar-buque { width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line, #ccc); font-size: 16px; background: var(--card); color: inherit; }
.buscar-buque-res:empty { display: none; }
.buscar-buque-res { flex-wrap: wrap; gap: 6px; }
/* Estadísticas: secciones plegables y gráficas de barras. */
.est-seccion { background: var(--card); border-radius: 14px; margin: 10px 0; padding: 0 14px; }
.est-seccion > summary { cursor: pointer; padding: 14px 0; font: 700 16px 'Open Sans', sans-serif; color: var(--marca-azul, var(--text)); list-style: none; display: flex; align-items: center; gap: 8px; }
.est-seccion > summary::-webkit-details-marker { display: none; }
.est-seccion > summary::before { content: '▸'; transition: transform .15s; }
.est-seccion[open] > summary::before { transform: rotate(90deg); }
.est-seccion[open] { padding-bottom: 14px; }
.est-seccion .stat { background: var(--bg); border: 1px solid var(--line); }
.est-titulo { grid-column: 1 / -1; margin: 10px 0 0; font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.est-graficas { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.est-ancha { grid-column: 1 / -1; }
.grafica svg { display: block; overflow: visible; }
.graf-barra { fill: var(--marca-azul, #3D85C6); }
.barra-g.activa .graf-barra { fill: #3D85C6; }
.graf-rejilla { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.graf-base { stroke: var(--muted); stroke-width: 1; }
.graf-eti, .graf-eje { font: 10px 'Open Sans', sans-serif; fill: var(--muted); }
.graf-val { font: 600 11px 'Open Sans', sans-serif; fill: var(--text); }
.graf-nota { font-size: 13px; margin-top: 4px; min-height: 18px; }
.grafica.horiz svg { max-width: 560px; }
/* Reclamaciones y averías (pliego 16ª). */
.est-explica { font-size: 14px; line-height: 1.5; }
.est-explica ul { padding-left: 20px; margin: 6px 0; }
.est-explica li { margin-bottom: 6px; }
.reg-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 6px; flex-wrap: wrap; }
.reg-cab h3 { margin: 0; font-size: 15px; }
.reg-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.reg-vacio { padding: 8px 0; font-size: 14px; }
@media (max-width: 700px) { .reg-fila { grid-template-columns: 1fr; } }
/* Histórico: el aviso de 30' se corrige tocando la hora; no lleva marca para que no se toque sin querer. */
.aviso30-editable { cursor: text; }
.aviso30-input { font: inherit; padding: 2px 4px; max-width: 210px; }
.etd-entrada { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.etd-entrada input { max-width: 220px; }
/* Móvil y tableta: meteo y correos en cajones laterales, con pestañas en los bordes (KV). */
.tira, .cajon-fondo { display: none; }
@media (max-width: 1000px) {
  /* top bajo la cabecera: en iOS el main con scroll táctil queda por debajo de .top y tapaba la parte de arriba del cajón. */
  .p-meteo, .p-fondeo { position: fixed; top: var(--cab-alto, 0px); bottom: 0; z-index: 60; width: min(88vw, 380px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--bg); padding: 14px; box-sizing: border-box; box-shadow: 0 0 30px rgba(0,0,0,.3); transition: transform .22s ease; }
  .p-meteo { left: 0; transform: translateX(-105%); }
  .p-fondeo { right: 0; transform: translateX(105%); }
  body.cajon-meteo .p-meteo, body.cajon-correo .p-fondeo { transform: none; }
  .cajon-fondo { display: block; position: fixed; inset: var(--cab-alto, 0px) 0 0 0; z-index: 55; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.cajon-meteo .cajon-fondo, body.cajon-correo .cajon-fondo { opacity: 1; pointer-events: auto; }
  .tira { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: fixed; top: 46%; z-index: 40;
    width: 26px; height: 74px; border: 0; padding: 0; background: var(--marca-azul, #0D1447); color: #fff; font: 700 15px 'Open Sans', sans-serif; opacity: .85; cursor: pointer; }
  .tira span { font-size: 18px; line-height: 1; }
  .tira-izq { left: 0; border-radius: 0 12px 12px 0; }
  .tira-der { right: 0; border-radius: 12px 0 0 12px; }
  .tira-der.hay { background: var(--red, #C62828); opacity: 1; animation: tira-latido 1.6s ease-in-out infinite; }
  .tira-der.confirmar:not(.hay) { background: #E69500; opacity: 1; }
  .tira-der b { font-size: 12px; line-height: 1; }
  @keyframes tira-latido { 50% { transform: scale(1.08); } }
}
@media (max-width: 1000px) {
  /* KV 28/10: separadas, el correo más arriba y el ancla más abajo. */
  /* KV 28/10: tres pestañas separadas: confirmar (verde) arriba, correo en medio y el ancla abajo. */
  .tira-der { top: 46%; }
  .tira-confirmar { top: calc(46% - 140px); background: #2E7D32; animation: none; }
  .tira-confirmar.hay { background: #1B8A2E; opacity: 1; animation: none; }
  .tira-fondeo { top: calc(46% + 140px); background: #0B5394; animation: none; }
  /* Cada pestaña enseña solo lo suyo en el cajón. */
  body.cajon-fondeo .p-fondeo > :not(.p-fondeo-lista),
  body.cajon-emails .p-fondeo > :not([data-parte="correos"]),
  body.cajon-confirmar .p-fondeo > :not([data-parte="cierre"]) { display: none; }
  /* Icono: una tarjeta con ✓. */
  .ico-tarjeta-ok { display: block; width: 17px; height: 13px; border: 2px solid #fff; border-radius: 3px; position: relative; box-sizing: border-box; }
  .ico-tarjeta-ok::after { content: '✓'; position: absolute; inset: -3px 0 0 0; text-align: center; font: 900 11px/13px 'Open Sans', sans-serif; font-style: normal; color: #fff; }
  /* La columna de tarjetas nunca más ancha que la pantalla (si no, el iPhone agranda toda la página). */
  .pantalla { grid-template-columns: minmax(0, 1fr); }
  .p-col { min-width: 0; }
}
/* ---------- Screen (KV, 2026-10-26): todo en una pantalla, como el Screen de iPort ----------
   Mismo tablero en seis columnas: correos (y confirmar) · meteo · maniobras · fondeadero · Cartagena · Escombreras. */
.p-fondeo-lista { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.solo-screen { display: none !important; }
body.modo-screen .p-darsena { display: flex !important; }
body.modo-screen main { max-width: none; }
body.modo-screen .pantalla { grid-template-columns: minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 10px; }
body.modo-screen .p-fondeo { display: contents; }
body.modo-screen [data-parte="cierre"] { grid-column: 1; grid-row: 2; align-self: start; }
body.modo-screen [data-parte="correos"] { grid-column: 1; grid-row: 1; }
body.modo-screen .p-meteo { grid-column: 2; grid-row: 1 / 3; }
body.modo-screen .p-maniobras { grid-column: 3; grid-row: 1 / 3; }
body.modo-screen .p-fondeo-lista { grid-column: 4; grid-row: 1 / 3; margin-top: 0; }
body.modo-screen #colCartagena { grid-column: 5; grid-row: 1 / 3; }
body.modo-screen #colEscombreras { grid-column: 6; grid-row: 1 / 3; }
body.modo-screen .p-titulo { font-size: 17px; text-align: left; border-bottom: 2px solid var(--marca-azul); padding-bottom: 2px; }
body.modo-screen .p-reloj { font-size: 17px; }
body.modo-screen .p-reloj .p-titulo { border: 0; }
body.modo-screen .mc { padding: 5px 9px; gap: 0 8px; }
body.modo-screen .mc .nombre, body.modo-screen .mc .hora, body.modo-screen .mc .frente { font-size: 15px; }
body.modo-screen .mc .aviso.pob-grande { font-size: 22px; }
body.modo-screen .mc .ais { font-size: 19px; gap: 4px 16px; }
body.modo-screen .mc .minutos { font-size: 19px; }
body.modo-screen .mc .aviso { font-size: 30px; }
body.modo-screen .cc { grid-template-columns: minmax(0, 1fr); }
body.modo-screen .cc .nombre, body.modo-screen .fc .nombre { font-size: 15px; }
/* iPad y portátil: más apretado todavía, para que quepan las seis columnas. */
@media (max-width: 1500px) {
  body.modo-screen main { padding: 4px 6px 8px; }
  body.modo-screen .pantalla { gap: 6px; }
  body.modo-screen .mc { padding: 4px 7px; grid-template-columns: minmax(0, 1fr) auto; }
  body.modo-screen .mc .nombre, body.modo-screen .mc .hora, body.modo-screen .mc .frente { font-size: 13px; }
  body.modo-screen .mc .hora small { font-size: 10px; }
  body.modo-screen .mc .aviso { font-size: 22px; grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  body.modo-screen .mc .ais, body.modo-screen .mc .iconos { grid-column: 1 / -1; font-size: 14px; gap: 2px 10px; }
  body.modo-screen .mc .minutos { font-size: 14px; }
  body.modo-screen .p-titulo { font-size: 15px; }
  body.modo-screen .fc .linea { font-size: 13px; }
}
/* Tarjeta de la maniobra en la web: a toda la pantalla, dos columnas (maniobra · atraque y buque). */
@media (min-width: 1101px) {
  dialog.ancha { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  dialog.ancha #dlgForm { max-height: none; height: 100%; box-sizing: border-box; overflow-y: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 40px; }
}
.col-sub { margin-top: 14px; }
/* Tarjeta en el móvil y el iPad (KV, 28/10): también a pantalla completa, respetando la muesca del iPhone.
   iPad: dos columnas; iPhone: una. */
@media (max-width: 1100px) {
  dialog.ancha { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  dialog.ancha #dlgForm { max-height: none; height: 100%; box-sizing: border-box; overflow-y: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 24px;
    padding: calc(14px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left)); }
}
@media (max-width: 700px) {
  dialog.ancha #dlgForm { grid-template-columns: minmax(0, 1fr); }
  dialog.ancha #dlgForm > h3 { font-size: 18px; }
}
/* Tablero y Screen en pantalla grande: previsión y emails plegados; el título de emails se pulsa para verlos
   y parpadea en rojo si hay alguno. En el móvil van en los cajones, enteros. */
@media (min-width: 1001px) {
  #verPrevision { display: inline-flex !important; align-self: flex-start; }
  body:not(.prev-abierta) #meteoPrev { display: none; }
  #tituloCorreos { cursor: pointer; user-select: none; }
  #tituloCorreos::after { content: ' ▾'; font-size: .8em; }
  body.correos-abiertos #tituloCorreos::after { content: ' ▴'; }
  body:not(.correos-abiertos) #pCorreos { display: none; }
  #tituloCorreos.hay { background: var(--red, #C62828); color: #fff; border-radius: 4px; padding: 3px 8px; border-bottom: 0; animation: correo-parpadeo 1.2s ease-in-out infinite; }
}
@keyframes correo-parpadeo { 50% { opacity: .45; } }
.fond-sel.dist-sel { max-width: 270px; }
/* Screen en el móvil (KV, prueba 2026-10-26): las seis columnas una al lado de otra, a pantalla completa,
   y se pasa de una a otra deslizando con el dedo. Sin cajones: cada cosa en su columna. */
@media (max-width: 1000px) {
  body.modo-screen .tira, body.modo-screen .cajon-fondo { display: none !important; }
  body.modo-screen .p-meteo, body.modo-screen .p-fondeo { position: static; transform: none; width: auto; box-shadow: none; padding: 0; overflow: visible; background: none; z-index: auto; }
  body.modo-screen .pantalla { grid-template-columns: repeat(6, calc(100vw - 20px)); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 10px; padding-bottom: 6px; }
  body.modo-screen .pantalla > *, body.modo-screen .p-fondeo > * { scroll-snap-align: center; }
  body.modo-screen #verPrevision { display: inline-flex !important; align-self: flex-start; }
  body.modo-screen:not(.prev-abierta) #meteoPrev { display: none; }
  body.modo-screen #tituloCorreos { cursor: pointer; user-select: none; }
  body.modo-screen #tituloCorreos::after { content: ' ▾'; font-size: .8em; }
  body.modo-screen.correos-abiertos #tituloCorreos::after { content: ' ▴'; }
  body.modo-screen:not(.correos-abiertos) #pCorreos { display: none; }
  body.modo-screen #tituloCorreos.hay { background: var(--red, #C62828); color: #fff; border-radius: 4px; padding: 3px 8px; border-bottom: 0; animation: correo-parpadeo 1.2s ease-in-out infinite; }
}
/* iPad en vertical (lanchas): tres columnas a la vista y se desliza a las otras tres. */
@media (min-width: 700px) and (max-width: 1000px) {
  body.modo-screen .pantalla { grid-template-columns: repeat(6, calc((100vw - 36px) / 3)); gap: 8px; }
}
/* Ventana del correo en la web (KV, 2026-10-26): a toda la pantalla; el correo a la izquierda a toda la altura
   y la tarjeta entera a la derecha. Cada columna baja por su cuenta. */
@media (min-width: 1101px) {
  dialog.grande { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  dialog.grande #dlgForm { overflow: hidden; box-sizing: border-box; }
  dialog.grande .tc-arriba { flex: 1 1 auto; min-height: 0; height: auto; max-height: none; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  dialog.grande .tc-arriba .correo-izq { overflow: hidden; }
  dialog.grande .correo-texto { font-size: 15px; line-height: 1.4; padding: 12px 14px; }
}
dialog.grande .tc-arriba.solo-correo { grid-template-columns: minmax(0, 1fr); }
.tc-arriba.solo-correo .correo-izq { max-width: 1100px; width: 100%; margin: 0 auto; }
/* Screen en el móvil: "‹ 3/6 Maniobras ›" abajo, para saber en qué columna estás y pasar de una a otra. */
.nav-screen { display: none; }
@media (max-width: 1000px) {
  body.modo-screen .nav-screen { display: flex; align-items: center; gap: 4px; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 45;
    background: rgba(13, 20, 71, .88); color: #fff; border-radius: 999px; padding: 4px 6px; font: 700 14px 'Open Sans', sans-serif; box-shadow: 0 4px 14px rgba(0,0,0,.3); white-space: nowrap; }
  .nav-screen button { background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; width: 40px; height: 36px; cursor: pointer; }
  .nav-screen button:disabled { opacity: .3; }
  .nav-screen span { padding: 0 4px; }
  body.modo-screen main { padding-bottom: 64px; }
}
/* La tarjeta va dentro de la columna derecha del correo: que no se encoja (se quedaba en 0 de alto en el móvil). */
dialog.grande .correo-der > * { flex: none; }
dialog.grande .correo-der .correo-der { overflow: visible; }
/* Correo en el móvil: lo justo arriba, para ver el máximo de la tarjeta sin bajar. */
@media (max-width: 900px) {
  dialog.grande #dlgForm > h3 { font-size: 16px; line-height: 1.25; margin: 0; }
  dialog.grande .correo-texto { max-height: 32vh; min-height: 120px; font-size: 14px; }
  dialog.grande .correo-izq .muted { font-size: 12px; }
  dialog.grande .correo-izq .btn { min-height: 34px; font-size: 13px; padding: 4px 10px; }
  dialog.grande { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  dialog.grande .tc-arriba { height: auto; max-height: none; flex: none; }
  dialog.grande .tc-arriba .correo-der { overflow: visible; }
}
.pill.fichaje { border: 0; cursor: pointer; background: #DDE7F7; color: #0D1447; font: 700 14px 'Open Sans', sans-serif; padding: 6px 12px; text-decoration: none; white-space: nowrap; }
.top .pill.fichaje { font-size: clamp(10px, 0.85vw, 13px); padding: 3px clamp(5px, 0.6vw, 9px); }
#fichaje { flex-shrink: 0; min-width: 0; overflow: visible; }
@media (max-width: 700px) {
  .pill.fichaje .fichaje-txt { display: none; }
  .top #fichaje { order: 3; padding: 3px 7px; font-size: 14px; }
}
.aguas-eti { color: #8A939B; opacity: .6; font: 600 11px 'Open Sans', sans-serif; white-space: nowrap; text-shadow: 0 0 3px #fff, 0 0 3px #fff; transform: translate(8px, 4px); }
/* Mapa: ficha y documentos de un frente */
.frente-ficha table { width: 100%; border-collapse: collapse; margin: 4px 0; } .frente-ficha th { text-align: left; color: var(--muted); font-weight: 600; padding: 2px 6px 2px 0; } .frente-ficha td { padding: 2px 0; }
.frente-ficha ul { margin: 4px 0; padding-left: 18px; }
.frente-docs-tit { font-weight: 700; color: #0D1447; border-bottom: 2px solid #0D1447; margin: 8px 0 4px; padding-bottom: 2px; }
.frente-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.frente-docs li { display: flex; gap: 4px; }
.frente-doc { flex: 1; text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 7px 9px; font: 600 13px 'Open Sans', sans-serif; cursor: pointer; color: var(--text); }
.frente-borrar { border: 1px solid #E0A8A3; background: #fff; border-radius: 8px; cursor: pointer; padding: 0 9px; }
.frente-subir { margin-top: 8px; display: inline-flex; align-items: center; cursor: pointer; }
/* Visor: botones para ampliar el plano (en la app no se puede pellizcar) */
.visor-zoom { display: flex; gap: 4px; }
.doc-tit { font: 700 18px 'Open Sans', sans-serif; color: var(--marca-azul, #0D1447); border-bottom: 2px solid var(--marca-azul, #0D1447); margin: 18px 0 10px; padding-bottom: 3px; }
.doc-tit:first-child { margin-top: 4px; }
.doc-sel { width: 100%; max-width: 520px; font-size: 16px; }
.doc-panel { margin-top: 10px; max-width: 760px; display: flex; flex-direction: column; gap: 8px; }
.doc-panel .frente-ficha { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.doc-panel .frente-doc { font-size: 15px; padding: 10px 12px; }
/* Doc. Técnica: límites de practicaje de la Corporación */
.limites { margin: 10px 0; padding: 8px 12px; background: #FFF6E5; border-left: 4px solid #E0892C; border-radius: 0 8px 8px 0; }
.limites h3 { margin: 0 0 6px; font: 700 15px 'Open Sans', sans-serif; color: #0D1447; }
.limite { margin: 6px 0; } .limite b { color: #0D1447; } .limite ul { margin: 3px 0 0; padding-left: 18px; } .limite li { margin: 2px 0; }
.docs-buque { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.doc-buque { display: inline-flex; gap: 3px; align-items: stretch; }
/* Botón de cerrar/cancelar de las ventanas: en rojo, que se vea (Kevin, 26-10-2026) */
.btn.btn-cerrar { background: #C62828; border-color: #C62828; color: #fff; font-weight: 700; }
.btn.btn-cerrar:hover { background: #A61F1F; border-color: #A61F1F; }

/* Peso muerto fuera del admisible del frente (guía de Repsol): aviso rojo en la tarjeta del tablero. */
.mc.dwt-mal { box-shadow: 0 0 0 4px #E60C0C inset; }
.mc .dwt-excede { background: #E60C0C; color: #fff; font-weight: 800; font-size: 14px; padding: 2px 9px; border-radius: 4px; }
.dwt-aviso { color: #B00000; font-weight: 700; }

/* Desplegables largos con buscador en iPad y móvil (hacerBuscable en app.js). */
.buscable { position: relative; }
.buscable-txt { width: 100%; }
.buscable-oculto { position: absolute !important; opacity: 0; pointer-events: none; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; }
.buscable-lista { position: absolute; z-index: 50; left: 0; right: 0; top: 100%; max-height: 300px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fff; border: 1px solid #C9CDD8; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); margin-top: 2px; }
.buscable-op { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid #EEF0F4; padding: 11px 12px; font: inherit; font-size: 16px; color: #0D1447; }
.buscable-op.elegida { background: #E6EEFB; font-weight: 700; }
.buscable-nada { padding: 10px 12px; }

/* Cuenta → Usuarios: en línea (verde) o última vez (gris). */
.conexion { font-size: 14px; margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.conexion .punto { width: 10px; height: 10px; border-radius: 50%; background: #B8BCC8; flex: none; }
.conexion.en-linea { color: #1E8F4E; font-weight: 700; }
.conexion.en-linea .punto { background: #1EB85A; box-shadow: 0 0 0 3px rgba(30,184,90,.25); }
/* Screen: la previsión de la meteo cabe entera en su columna (KV, 2026-10-26: se cortaba la ola). */
body.modo-screen .meteo-prev { min-width: 0; overflow: hidden; }
body.modo-screen .meteo-prev table { table-layout: fixed; font-size: 12px; }
body.modo-screen .meteo-prev th { font-size: 9.5px; letter-spacing: 0; padding: 4px 1px; overflow: hidden; text-overflow: clip; }
body.modo-screen .meteo-prev td { padding: 2px 1px; overflow: hidden; }
body.modo-screen .meteo-prev th:first-child, body.modo-screen .meteo-prev td:first-child { width: 24%; padding-left: 4px; }
body.modo-screen .meteo-prev .m-dir { gap: 0; }
body.modo-screen .meteo-prev tr.dia td { overflow: visible; white-space: nowrap; }

/* Incompatibilidad de atraque (dos buques en el mismo sitio a la vez). */
.mc .nota-frente { background: #FFD600; color: #3a3000; font-weight: 900; font-size: 17px; line-height: 1; padding: 3px 7px 4px; border-radius: 5px; border: 1px solid #b89a00; }
.nota-frente-caja { background: #F4EC4B; color: #3a3500; border-radius: 8px; padding: 10px 12px; margin: 6px 0; display: grid; gap: 4px; font-size: 15px; font-weight: 700; }
.nota-frente-caja small { font-weight: 400; }
.nota-frente-caja .nota-en { font-weight: 400; font-size: 13px; margin-top: 2px; }
.nota-frente-caja .nota-en .btn { min-height: 24px; padding: 0 8px; font-size: 12px; }
.incompat-caja { background: #E60C0C; color: #fff; border-radius: 8px; padding: 10px 12px; margin: 6px 0; display: grid; gap: 4px; font-size: 14px; }
.incompat-caja strong { font-size: 16px; letter-spacing: .3px; }

/* Estado del servidor (Cuenta, solo administrador) */
.estado-servidor h3 { display: flex; align-items: center; margin: 4px 0 8px; }
.estado-servidor h4 { margin: 12px 0 4px; font-size: 13px; }
.es-fila { display: grid; grid-template-columns: minmax(0, 1fr) 120px 44px; gap: 8px; align-items: center; margin: 6px 0; font-size: 13px; }
.es-barra { height: 10px; background: #e3e7ee; border-radius: 6px; overflow: hidden; }
.es-barra i { display: block; height: 100%; background: #2e7d32; }
.es-barra.aviso i { background: #f9a825; } .es-barra.mal i { background: #c62828; }
.es-num { text-align: right; font-variant-numeric: tabular-nums; }
.es-dato { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px solid #eef0f4; font-size: 13px; }
.es-dato b { font-weight: 600; text-align: right; }
@media (max-width: 520px) { .es-fila { grid-template-columns: 1fr 80px 40px; } }
/* Tablero Buques de Repsol: ETD s/Repsol en la tarjeta (naranja Repsol); si la tarjeta lleva otro ETD a mano, en cursiva */
.repsol-etd { color: #C25E00; font-weight: 600; white-space: nowrap; }
.repsol-etd.distinto { opacity: .7; font-style: italic; }
.repsol-caja { border-left: 4px solid #F08A00; background: rgba(240, 138, 0, .08); border-radius: 6px; padding: 8px 10px; margin: 6px 0; display: grid; gap: 2px; font-size: 13px; }
.repsol-caja strong { color: #C25E00; }
.atajo-repsol .atajo-pasos { padding-left: 20px; display: grid; gap: 8px; font-size: 14px; }
.atajo-repsol .atajo-clave code { word-break: break-all; background: rgba(240, 138, 0, .12); padding: 2px 6px; border-radius: 4px; }
.repsol-marca { display: inline-block; font-size: 11px; font-weight: 600; color: #C25E00; border: 1px solid #E8B07A; background: #FFF4E8; border-radius: 10px; padding: 0 6px; line-height: 16px; white-space: nowrap; }
.repsol-marca.distinto { border-color: #C25E00; }
/* Comentario de Repsol: importante (KV), hasta dos líneas en la tarjeta; entero al abrirla */
.repsol-com { color: #C25E00; font-size: .85em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.dwt-buscar { font-size: 12px; font-weight: 600; white-space: nowrap; }

.kw-helices { flex-wrap: wrap; gap: 8px; align-items: center; }
.kw-helices .acons-campo { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; margin: 0; }
.kw-helices .acons-campo input { width: 80px; padding: 3px 5px; margin: 0; }
.kw-helices .kw-falta input { border-color: #C62828; background: #FFEBEE; }
.kw-aviso { color: #C62828; font-size: 12px; }
.remolc-det .kw-falta input { border-color: #C62828; background: #FFEBEE; }
.remolc-det .acons-sec { border-bottom: 1px solid rgba(13,20,71,.12); padding: 4px 0; }
.remolc-det .acons-sec:last-of-type { border-bottom: none; }
.remolc-det .acons-sec > summary { cursor: pointer; font-size: 13px; padding: 2px 0; list-style-position: inside; }
.remolc-det .acons-res { font-weight: 600; color: #374151; }
.remolc-det .acons-cuerpo { padding: 4px 0 2px 14px; }
.remolc-det .acons-cuerpo > div + div { margin-top: 3px; }
.remolc-det .acons-fuente { color: #6B7280; font-style: italic; }
.remolc-det .acons-sec .acons-afinar { border-top: none; margin-top: 2px; padding-top: 0; }
.remolc-det .acons-res.ok { color: #1E7E34; }
.remolc-det .acons-res.aviso { color: #9A6700; background: #FFF4CC; border-radius: 4px; padding: 0 4px; }
/* Mapa: flechas AIS, herramientas recogidas y pantalla completa */
.ais-flecha { background: none; border: 0; }
.ais-flecha svg { display: block; filter: drop-shadow(0 0 1.5px #fff); }
.ais-nombre.navega { color: #0D47A1; transform: translate(-50%, -170%); }
.herr-boton { width: 36px; height: 36px; background: #fff; border: 2px solid rgba(0,0,0,.2); border-radius: 6px; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; }
.herr-boton.on { background: #0D1447; }
.sin-herramientas .leaflet-left .sim-boton { display: none !important; }
body.mapa-completo .mapa-pantalla { position: fixed; inset: 0; z-index: 2000; height: auto; grid-template-columns: 1fr; grid-template-rows: 1fr; background: #fff; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
body.mapa-completo .mapa-panel, body.mapa-completo .plan-panel:not(:empty) ~ .mapa-panel { display: none; }
body.mapa-completo .completa-boton { background: #0D1447; color: #fff; }
/* Cuenta: cada apartado plegable */
.cuenta-sec { background: #fff; border: 1px solid #d5dbe6; border-radius: 10px; margin: 8px 0; padding: 0 12px; }
.cuenta-sec > summary { cursor: pointer; padding: 12px 0; font-weight: 700; color: #0D1447; font-size: 16px; list-style: none; display: flex; align-items: center; gap: 8px; }
.cuenta-sec > summary::-webkit-details-marker { display: none; }
.cuenta-sec > summary::before { content: '▸'; transition: transform .15s; }
.cuenta-sec[open] > summary::before { transform: rotate(90deg); }
.cuenta-sec[open] { padding-bottom: 12px; }
.cuenta-sec:not(:has(> :not(summary):not([hidden]))) { display: none; }
/* Registro de deficiencias (Doc. Técnica) */
.registro-def td.nat { min-width: 180px; max-width: 360px; white-space: pre-wrap; }
/* Mercancías peligrosas (Cornelia) */
.mc .mmpp-chip { background: #F5A300; color: #1a1a1a; font-weight: 800; font-size: 13px; padding: 2px 8px; border-radius: 4px; }
.mmpp-caja { background: #FFF4D6; border: 2px solid #F5A300; color: #3a2a00; border-radius: 8px; padding: 10px 12px; margin: 6px 0; display: grid; gap: 4px; font-size: 14px; }
.mmpp-caja.nitrato { background: #E60C0C; border-color: #E60C0C; color: #fff; }
.mmpp-caja strong { font-size: 16px; }
.mmpp-caja .mmpp-onu { padding-left: 10px; font-size: 13px; }
.mmpp-caja ul { margin: 4px 0 0; padding-left: 18px; font-weight: 700; }
.mmpp-desp > summary { cursor: pointer; list-style: none; display: inline-block; }
.mmpp-desp > summary::-webkit-details-marker { display: none; }
.mmpp-desp > summary::after { content: ' ▾'; color: var(--muted); }
.mmpp-desp[open] > summary::after { content: ' ▴'; }
.mmpp-desp .mmpp-chip, .mmpp-desp .dwt-excede { display: inline-block; padding: 2px 8px; border-radius: 4px; font-weight: 800; font-size: 13px; }
.mmpp-desp .mmpp-chip { background: #F5A300; color: #1a1a1a; }
.mmpp-desp .dwt-excede { background: #E60C0C; color: #fff; }

/* Firma a mano (dedo o lápiz) en la hoja MPX y en el informe de deficiencias */
.firma-dlg { max-width: min(720px, 96vw); width: 100%; border: 0; border-radius: 12px; padding: 16px; }
.firma-dlg h3 { margin: 0 0 6px; }
.firma-opciones { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.firma-opciones .btn { padding: 14px; font-size: 1.05em; }
.firma-nombre { font-weight: 700; text-transform: uppercase; color: #0D1447; margin: 0 0 6px; }
.firma-marco { position: relative; border: 2px dashed #9A9A9A; border-radius: 8px; background: #fff; }
.firma-lienzo { display: block; width: 100%; height: min(260px, 42vh); touch-action: none; cursor: crosshair; border-radius: 8px; }
.firma-raya { position: absolute; left: 6%; right: 6%; bottom: 22%; border-bottom: 1px solid #ccc; pointer-events: none; }
.firma-mini { height: 34px; vertical-align: middle; background: #fff; border: 1px solid #ccc; border-radius: 4px; }
.def-apc { background: #0D1447; color: #fff; border-radius: 4px; padding: 1px 6px; font-size: .85em; font-weight: 700; }
/* Ficha técnica del buque (desplegable dentro de las particularidades) */
.ficha-tec { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 6px 10px; margin-top: 4px; }
.ficha-tec > summary { cursor: pointer; font-weight: 700; color: var(--marca-azul); font-size: 14px; }
.ficha-tec .ft-grupo { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 8px 0 4px; border-top: 1px solid #EEE9DF; margin-top: 6px; }
.ficha-tec .ft-grupo > b { flex-basis: 100%; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.ficha-tec label.ft-campo { flex-direction: row; color: var(--text);
}
.ficha-tec .ft-campo { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ficha-tec .ft-campo > span:first-child { color: var(--muted); }
.ficha-tec .ft-val { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.ficha-tec input.ft-num { width: 64px; min-height: 34px; padding: 2px 6px; font-size: 15px; border-radius: 6px; }
.ficha-tec select { width: auto; min-height: 34px; padding: 2px 6px; font-size: 15px; max-width: 190px; border-radius: 6px; }
.ficha-tec .ft-check input { width: 22px; min-height: 22px; height: 22px; }
.ficha-tec .ft-kw-falta .ft-num { border-color: #E60C0C; background: #FFF0EE; }
.ficha-tec .ft-kw-falta > span:first-child { color: #B00000; font-weight: 700; }
.ft-dibujo { position: relative; width: 100%; max-width: 340px; aspect-ratio: 320 / 210; }
.ft-dibujo-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ficha-tec label.ft-cota { flex-direction: row; }
.ft-cota { position: absolute; display: grid; grid-template-columns: auto auto; justify-items: center; align-items: center; gap: 0 2px; font-size: 10px; font-weight: 700; color: #1E3A8A; background: rgba(255,255,255,.9); border-radius: 4px; padding: 0 2px; transform: translate(-50%, -50%); white-space: nowrap; }
.ft-cota > span:first-child { grid-column: 1 / 3; }
.ficha-tec .ft-cota input.ft-num { width: 50px; min-height: 26px; padding: 1px 4px; font-size: 13px; }
.ft-cota.c-pproa { left: 57%; top: 19%; }
.ft-cota.c-ppopa { left: 11%; top: 19%; }
.ft-dibujo { margin: 6px 0 4px; }
.ft-cota.c-mpopa { left: 27%; top: 83%; }
.ft-cota.c-mproa { left: 73%; top: 83%; }
.ft-cota.c-vel { left: 60%; top: 58%; }
.part-ficha { font-size: 12px; color: var(--marca-azul); background: #EEF1F8; border-radius: 4px; padding: 1px 5px; }
.ficha-tec .ft-val select { width: auto !important; max-width: 170px; flex: 0 1 auto; min-width: 0; }
.ficha-tec .ft-val { flex-wrap: nowrap; }
/* Guardar / Confirmar en verde resaltado en todo el programa (KV) */
.btn.verde, .btn.primary.verde, .btn.ok.verde { background: #1E9E4A; border-color: #1E9E4A; color: #fff; font-weight: 700; box-shadow: 0 2px 6px rgba(30,158,74,.35); }
.btn.verde:hover { background: #178A3F; border-color: #178A3F; }
.btn.verde:disabled { opacity: .5; box-shadow: none; }
/* Lo que impide guardar, en rojo donde está el error */
input.campo-error, select.campo-error, textarea.campo-error { border: 2px solid #E60C0C !important; background: #FFF0EE !important; }
label.campo-error { color: #B00000 !important; font-weight: 700; }
.radios.campo-error { outline: 2px solid #E60C0C; outline-offset: 3px; border-radius: 10px; background: #FFF0EE; }
.etd-sug { display: flex; flex-direction: column; gap: 6px; }
.etd-sug-fila { position: relative; display: flex; align-items: center; }
.etd-sug-fila input { flex: 1; padding-left: 48px !important; }
.etd-sug-btn { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 32px; border: 0; border-radius: 8px; background: #FFD43B; color: #3A2E00; font-size: 18px; font-weight: 800; cursor: pointer; }
.etd-sug-panel { background: #FFF8DB; border: 1px solid #D9A400; border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--text); display: flex; flex-direction: column; gap: 6px; }
.etd-sug-panel[hidden] { display: none; }
.etd-sug-cab { font-size: 15px; }
.etd-sug-tabla { width: 100%; border-collapse: collapse; font-size: 12px; } .etd-sug-tabla td { padding: 2px 4px; border-bottom: 1px solid #EEE3B0; }
.chip-temporal { background: #5B1A8C; color: #fff; font-weight: 800; border-radius: 4px; padding: 0 5px; }
.chip-ntm { background: #FFD43B; color: #3A2E00; font-weight: 800; border-radius: 4px; padding: 0 5px; }
.btn.btn-def-buque { background: #FBE3E1; border-color: #E9A9A3; color: #9E1F16; font-weight: 700; }
.def-buscar-lista { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.def-buscar-lista .br { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; font: inherit; }
.btn.btn-temporal { background: #5B1A8C; border-color: #5B1A8C; color: #fff; font-weight: 700; }
/* Avisos de AEMET: color del nivel (amarillo, naranja, rojo) */
.chip-temporal.nivel-amarillo { background: #F2C200; color: #1a1a1a; }
.chip-temporal.nivel-naranja { background: #F57C00; color: #fff; }
.chip-temporal.nivel-rojo { background: #D50000; color: #fff; }
.aviso-aemet { align-self: start; border-left: 5px solid #F2C200; background: rgba(242, 194, 0, .12); padding: 8px 10px; border-radius: 6px; margin: 6px 0; display: grid; gap: 4px; }
.aviso-aemet.nivel-naranja { border-color: #F57C00; background: rgba(245, 124, 0, .12); }
.aviso-aemet.nivel-rojo { border-color: #D50000; background: rgba(213, 0, 0, .12); }
/* Avisos a los Navegantes T/P en vigor dentro de la tarjeta: se despliega con la explicación */
.ntm-caja { border-left: 5px solid #E65100; background: rgba(230, 81, 0, .08); border-radius: 6px; padding: 6px 10px; margin: 6px 0; }
.ntm-caja summary { cursor: pointer; }
.ntm-aviso { margin-top: 8px; display: grid; gap: 4px; }
.ntm-texto { white-space: pre-wrap; font: inherit; font-size: .85em; background: rgba(0, 0, 0, .04); padding: 6px 8px; border-radius: 4px; margin: 0; max-height: 260px; overflow: auto; }
body.sin-dinero .col-dinero { display: none; }

/* Cintones peligrosos (ficha técnica) */
.ft-cintones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ft-cintones .ft-val { display: flex; flex: 1; align-items: center; gap: 6px; flex-wrap: wrap; }
.ft-cintones .ft-foto { font-size: 18px; padding: 2px 8px; cursor: pointer; }
.aviso-cintones { display: inline-block; background: #C62828; color: #fff; font-weight: 700; font-size: 12px; border-radius: 5px; padding: 1px 6px; margin-right: 6px; animation: none; }

/* Fondeaderos de emergencia en el mapa (KV 28/10) */
.emerg-marca { background: none; border: 0; }
.emerg-centro { display: inline-block; background: #fff; border: 1.5px solid #D9480F; color: #D9480F; font-weight: 700; font-size: 11px; padding: 1px 6px; border-radius: 10px; white-space: nowrap; transform: translate(-50%, -50%); width: max-content !important; }
.emerg-punto { display: block; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: transparent; cursor: move; } /* invisible: solo para arrastrar */
.aviso-emerg { background: #FFF1E8; border: 1px solid #D9480F; color: #8A2E06; padding: 6px 8px; border-radius: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Tabla de guardia frente a maniobra (estadísticas) */
.tabla-est { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
.tabla-est th, .tabla-est td { padding: 4px 6px; border-bottom: 1px solid #e3e6ea; text-align: right; }
.tabla-est th:first-child, .tabla-est td:first-child { text-align: left; }

/* Notas en la columna del meteo (KV 28/10): solo en pantalla grande, pequeñas, debajo de la previsión. */
.p-notas-meteo { display: none; }
@media (min-width: 1001px) {
  .p-notasbar .p-notas { display: none; }
  .p-notasbar:has(.p-notas) { margin-bottom: 0; }
  .p-notas-meteo:not(:empty):not([hidden]) { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
  .p-notas-meteo .postit { min-width: 0; max-width: none; font-size: 14px; padding: 8px 30px 8px 10px; gap: 3px; }
  .p-notas-meteo .postit .firma { font-size: 11px; }
  .p-notas-meteo .postit .borrar { top: 3px; right: 5px; font-size: 15px; }
}
/* En el móvil y el iPad vertical siguen arriba (el meteo va en un cajón), pero más pequeñas. */
@media (max-width: 1000px) {
  .p-notasbar .postit { font-size: 15px; padding: 8px 30px 8px 10px; gap: 3px; }
  .p-notasbar .postit .firma { font-size: 11px; }
  .p-notasbar .postit .borrar { top: 3px; right: 5px; font-size: 15px; }
}

/* Passage planning en el móvil en vertical (KV 28/10): cada waypoint es una ficha con sus casillas una debajo
   de otra, en vez de una tabla que no cabe y obliga a girar la pantalla. */
@media (max-width: 700px) {
  body.mapa-plan .plan-panel .sim-fila { flex-wrap: wrap; }
  body.mapa-plan .plan-panel .sim-fila .sim-campo { flex: 1 1 40%; min-width: 0; }
  body.mapa-plan .plan-panel .sim-fila .sim-campo select, body.mapa-plan .plan-panel .sim-fila .sim-campo input:not([type=checkbox]) { width: 100%; box-sizing: border-box; }
  .plan-tabla, .plan-tabla tbody { display: block; border: 0; }
  .plan-tabla tr.cab { display: none; }
  .plan-tabla tr[data-wp] { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px 8px; border: 1px solid #d5dbe6; border-radius: 10px; padding: 8px; margin: 0 0 8px; background: #fff; }
  .plan-tabla td { border: 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 2px; font-size: 14px; min-width: 0; grid-column: span 3; }
  .plan-tabla td[data-l]::before { content: attr(data-l); font-size: 11px; font-weight: 600; color: #5c6283; text-transform: uppercase; letter-spacing: .03em; }
  .plan-tabla td { order: 3; }
  .plan-tabla td.wp-asa { grid-column: span 1; flex-direction: row; align-items: center; gap: 4px; font-size: 16px; order: 0; }
  .plan-tabla td.wp-nombre { grid-column: span 3; order: 1; }
  .plan-tabla td.wp-acc { grid-column: span 2; order: 2; flex-direction: row; justify-content: flex-end; align-items: center; gap: 6px; }
  .plan-tabla tr[data-wp]:not(:has(.wp-acc)) td.wp-nombre { grid-column: span 5; }
  .plan-tabla td.wp-pos { grid-column: 1 / -1; max-width: none; }
  .plan-tabla td.wp-pos > span { display: flex; gap: 6px; }
  .plan-tabla td.wp-vacio { display: none; }
  .plan-tabla input, .plan-tabla .wp-ll { width: 100%; box-sizing: border-box; font-size: 15px; min-height: 38px; }
  .plan-tabla .wp-acc .btn { min-width: 38px; min-height: 38px; font-size: 16px; }
}

/* Cuadrante de guardias (KV 28/10): calendario del mes, cada práctico con su color. */
.cuad-nav { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.cuad-nav .doc-sel { flex: 1; max-width: 260px; }
.cuad-leyenda { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.cuad-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; max-width: 900px; }
.cuad-cab { text-align: center; font-weight: 700; font-size: 12px; color: var(--muted, #5c6283); }
.cuad-dia { background: #fff; border: 1px solid #d5dbe6; border-radius: 6px; padding: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cuad-dia.vacio { background: none; border: 0; }
.cuad-dia.hoy { border: 2px solid #E60C0C; }
.cuad-dia > b { font-size: 12px; }
.cuad-fila { display: flex; align-items: center; gap: 3px; }
.cuad-fila i { font-style: normal; font-size: 10px; color: #8a96a8; width: 1.5em; }
.cuad-chip { display: inline-block; color: #fff; font-weight: 700; font-size: 12px; border-radius: 4px; padding: 1px 5px; letter-spacing: .02em; }
.cuad-btn { border: 0; cursor: pointer; font-family: inherit; line-height: 1.4; }
.cuad-btn.cambiada { outline: 2px dashed #E5A800; outline-offset: 1px; }
.cuad-cambios { margin-top: 8px; font-size: 13px; }
.cuad-cambios ul { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 600px) { .cuad-dia { padding: 2px; } .cuad-fila i { display: none; } .cuad-chip { font-size: 11px; padding: 1px 3px; flex: 1; text-align: center; } .cuad-fila { gap: 0; } }

/* Protocolo de mal tiempo (KV 28/10): lista "esperando apertura" arriba de la columna de maniobras. */
.pmt-panel { margin: 0 0 8px; }
.pmt-caja { border: 2px solid #E65100; border-radius: 10px; background: #FFF3E0; padding: 6px 10px; color: #3E2723; }
.pmt-caja.activo { border-color: #C62828; background: #FFEBEE; }
.pmt-caja summary { font-weight: 800; cursor: pointer; color: #B71C1C; }
.pmt-lista { list-style: none; margin: 8px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pmt-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #fff; border-radius: 8px; padding: 4px 8px; border-left: 6px solid #0D1447; }
.pmt-fila.salida { border-left-color: #E65100; } .pmt-fila.entrada { border-left-color: #1565C0; }
.pmt-pos { font-size: 20px; min-width: 1.4em; text-align: center; color: #B71C1C; }
.pmt-buque { flex: 1 1 180px; font-weight: 700; cursor: pointer; }
.pmt-buque small { display: block; font-weight: 400; color: #5c6283; }
.pmt-prio { font-size: 12px; max-width: 13em; }
.pmt-mover { display: inline-flex; gap: 2px; }
.mc.en-pmt .estado { color: #fff; font-weight: 800; }
@media (max-width: 600px) {
  .pmt-fila { flex-wrap: nowrap; }
  .pmt-buque { flex: 1 1 0; min-width: 0; }
  .pmt-mover .btn { padding: 4px 7px; }
  .pmt-fila:has(.pmt-prio) { flex-wrap: wrap; }
}
.chk input { width: 22px; height: 22px; }

/* Verificación en dos pasos */
.login-codigo { display: flex; flex-direction: column; gap: 10px; }
.login-codigo input[name=codigo] { font-size: 22px; letter-spacing: 4px; text-align: center; }
.alta-dos-pasos { max-width: 460px; }
.qr { width: 200px; max-width: 70vw; margin: 10px 0; background: #fff; }
.qr svg { width: 100%; height: auto; display: block; }
.clave-totp { font-size: 13px; word-break: break-all; }
.dos-pasos-rescate .codigos { font-size: 17px; line-height: 1.6; background: #f4f6fa; border: 1px solid #d5dbe6; border-radius: 8px; padding: 10px 14px; user-select: all; }
.dos-pasos-rescate .acciones, #dosPasosCaja .acciones { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
#dosPasosCaja input[name=codigo], .alta-dos-pasos input[name=codigo] { width: 110px; font-size: 18px; letter-spacing: 2px; text-align: center; }
.etq-2p { margin-left: 8px; font-size: 12px; padding: 1px 7px; border-radius: 10px; background: #fdecea; color: #a12622; }
.etq-2p.si { background: #e6f4ea; color: #1e6b34; }
.alta-dos-pasos a.btn { text-decoration: none; display: inline-block; margin: 8px 0 2px; }
/* La página no se desliza (body overflow hidden): las pantallas de entrada se deslizan por dentro (iPhone, KV 28/10). */
#login, #altaDosPasos { height: 100vh; height: 100dvh; min-height: 0; box-sizing: border-box; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#altaDosPasos:not([hidden]) { display: block; padding: 12px 12px 40px; }
#altaDosPasos .login-card { margin: 0 auto; padding: 20px; }
.alta-dos-pasos .atajo-pasos { padding-left: 20px; }
@media (max-width: 600px) { .qr { width: 170px; } }
.por-que-2p { background: #eef4fb; border: 1px solid #cfdcec; border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 8px 0; }
.por-que-2p ul { margin: 6px 0 0; padding-left: 18px; }
.por-que-2p li { margin: 4px 0; }
/* KV 28/10: en el móvil, las ventanas ocupan toda la pantalla para ganar espacio. */
@media (max-width: 700px) {
  dialog, dialog.ancha, dialog.grande { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  dialog #dlgForm, dialog.ancha #dlgForm, dialog.grande #dlgForm { height: 100%; max-height: 100dvh; box-sizing: border-box;
    padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)); }
}
.recargos-conf { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.recargos-conf select { width: 100%; max-width: 100%; box-sizing: border-box; }
.recargos-conf label { white-space: normal; min-width: 0; }
.recargos-conf > summary { font-weight: 700; cursor: pointer; }

/* ---------- Cobros (KV 28/10) ---------- */
.cobros-resumen { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 4px 0 12px; }
.cob-tile { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--marca-azul, var(--blue)); transition: transform .12s, box-shadow .12s; }
.cob-tile:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.cob-tile.cob-mal { border-top-color: var(--red); } .cob-tile.cob-mal .cob-valor { color: var(--red); }
.cob-tile.cob-aviso { border-top-color: var(--orange); } .cob-tile.cob-aviso .cob-valor { color: var(--orange); }
.cob-tile.cob-ok { border-top-color: var(--green); }
.cob-titulo { font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.cob-valor { font-size: 24px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.cob-pie { font-size: 12.5px; color: var(--muted); }
.sec-cuenta { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); }
.sec-explica { margin: 0 0 10px; }
.cob-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.cob-cliente { background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--green); border-radius: 12px; margin: 8px 0; }
.cob-cliente.vencido { border-left-color: var(--red); } .cob-cliente.pronto { border-left-color: var(--orange); }
.cob-cliente > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.cob-cliente > summary::-webkit-details-marker { display: none; }
.cob-cliente[open] > summary { border-bottom: 1px solid var(--line); }
.cob-cliente > .table-wrap, .cob-cliente > .acciones { margin: 8px 14px; }
.cob-marca { width: 22px; height: 22px; flex: none; }
.cob-nombre { flex: 1; min-width: 0; font-weight: 700; display: flex; flex-direction: column; }
.cob-nombre small { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.cob-cifras { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.cob-cifras strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.cob-etq { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--green-bg); color: var(--green); white-space: nowrap; }
.cob-etq.mal { background: var(--red-bg); color: var(--red); font-weight: 700; }
.cob-etq.aviso { background: var(--orange-bg); color: var(--orange); font-weight: 700; }
.cob-tabla td, .cob-tabla th { white-space: nowrap; }
.cob-tabla tr.vencida td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.txt-mal { color: var(--red); font-weight: 600; }
.cob-barra-tramos { display: flex; height: 30px; border-radius: 10px; overflow: hidden; margin: 6px 0 8px; font-size: 12px; font-weight: 700; color: #fff; }
.cob-barra-tramos > span { display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; min-width: 3px; }
.cob-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; margin-bottom: 10px; }
.cob-leyenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.tr-corriente { background: #2E8B57; } .tr-t30 { background: #D4A72C; } .tr-t60 { background: #E07B24; } .tr-t90 { background: #D2482B; } .tr-mas90 { background: #9E1B1B; }
.cob-antig td.con { color: #fff; font-weight: 700; } .cob-antig td.cero { color: var(--muted); }
.cob-antig td, .cob-antig th { text-align: right; white-space: nowrap; } .cob-antig td:first-child, .cob-antig th:first-child { text-align: left; white-space: normal; }
.cob-antig tfoot th { border-top: 2px solid var(--line); }
.cob-aviso-caja { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: var(--orange-bg); color: var(--text); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.filtro-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chip-filtro { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 16px; padding: 5px 12px; font: inherit; font-size: 13.5px; cursor: pointer; }
.chip-filtro.activo { background: var(--marca-azul, var(--blue)); border-color: var(--marca-azul, var(--blue)); color: #fff; }
.asesoria-filas { display: grid; gap: 10px; }
.asesoria-filas > div { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 2px 14px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.asesoria-filas > div > .muted { grid-column: 1; font-size: 13px; }
.asesoria-filas > div > .acciones { grid-column: 2; grid-row: 1 / 3; display: flex; gap: 8px; align-items: center; }
@media (max-width: 600px) {
  .cobros-resumen { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cob-tile { padding: 10px 12px; } .cob-valor { font-size: 19px; }
  .asesoria-filas > div { grid-template-columns: 1fr; } .asesoria-filas > div > .acciones { grid-column: 1; grid-row: auto; margin-top: 6px; }
  .cob-cliente > summary { padding: 10px; gap: 8px; }
}
/* En el móvil, cada factura del cliente como una ficha y no como una tabla que se sale de la pantalla. */
@media (max-width: 600px) {
  .cob-cliente > .table-wrap { overflow: visible; }
  .cob-tabla, .cob-tabla tbody { display: block; width: 100%; }
  .cob-tabla thead { display: none; }
  .cob-tabla tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'cod pend' 'buq venc' 'bot bot'; gap: 2px 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
  .cob-tabla td { display: block; padding: 0; border: 0; white-space: normal; }
  .cob-tabla td:nth-child(1) { grid-area: cod; } .cob-tabla td:nth-child(2) { grid-area: buq; color: var(--muted); }
  .cob-tabla td:nth-child(3) { display: none; } .cob-tabla td:nth-child(4) { grid-area: venc; text-align: right; font-size: 13px; }
  .cob-tabla td:nth-child(5) { grid-area: pend; text-align: right; font-weight: 700; } .cob-tabla td:nth-child(6) { grid-area: bot; display: flex; gap: 8px; margin-top: 6px; }
  .cob-tabla tr.vencida td:first-child { box-shadow: none; } .cob-tabla tr.vencida { border-left: 3px solid var(--red); padding-left: 8px; }
}

/* Maniobras importadas de NemoPilots (KV 29/10) */
.etq-nemo { margin-left: 6px; padding: 1px 6px; border-radius: 8px; font-size: 11px; background: var(--line, #2a3550); color: var(--muted, #9aa); }
.importar-resumen { margin: 10px 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .importar-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
select.sin-asignar { border-color: var(--yellow, #e0b000); }

/* Tarifas y revisiones anuales (KV 29/10) */
.tarifas-tablas { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 12px 20px; margin: 8px 0; }
.tarifa-rev > :not(summary) { padding-left: 14px; padding-right: 14px; }
.tarifa-rev > summary { flex-wrap: wrap; row-gap: 4px; }
@media (max-width: 700px) { .tarifas-tablas { grid-template-columns: 1fr; } .tabla-tarifa { font-size: 13px; } }
.tarifa-bloque strong { display: block; margin-bottom: 4px; }
.tabla-tarifa { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-tarifa td { padding: 4px 6px; border-bottom: 1px solid var(--line, #e5e0d5); }
.tabla-tarifa td.mono { text-align: right; white-space: nowrap; }
.tarifa-rev.vigente { border-color: var(--green, #2e7d32); }
.fila-coef { display: grid; grid-template-columns: 1fr 110px 90px; gap: 6px; align-items: center; margin: 4px 0; font-size: 14px; }
.fila-coef input { width: 100%; }
@media (max-width: 700px) { .fila-coef { grid-template-columns: 1fr 1fr; } .fila-coef span { grid-column: 1 / -1; } }
.etq-vigente { background: var(--green, #2e7d32) !important; color: #fff !important; font-weight: 700; }

/* Al guardar o confirmar (KV 29/10): el botón se hunde y dice "Guardando…"; el aviso de abajo sale en verde. */
.btn:active:not(:disabled) { transform: scale(.97); filter: brightness(.88); }
.btn.guardando, .btn.guardado { pointer-events: none; transform: scale(.97); filter: brightness(.85); }
.btn.guardando::before { content: ''; display: inline-block; width: 1em; height: 1em; margin-right: 8px; vertical-align: -0.15em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar .7s linear infinite; }
.btn.guardado { filter: none; background: #1E9E4A; border-color: #1E9E4A; color: #fff; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.guardando::before { animation: none; } }
#toast.ok { background: #1E9E4A; color: #fff; font-size: 17px; padding: 14px 22px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.btn.guardando:disabled, .btn.guardado:disabled { opacity: 1; cursor: default; }
.btn.ok.guardando { background: #147A38; border-color: #147A38; color: #fff; filter: none; }
.acons-oblig { color: #B3261E; font-weight: 600; }
.mmpp-decl { margin: 4px 0 6px; } .mmpp-decl .btn.mini { margin-left: 6px; padding: 2px 8px; font-size: 12px; }
.mmpp-fila { font-size: 13px; }
.mmpp-oblig { margin-bottom: 6px; } .mmpp-oblig small { display: block; margin-top: 2px; }
.mmpp-no-oblig { color: #1E7A3C; font-weight: 600; }
.mmpp-motivos { font-size: 13px; margin: 4px 0; } .mmpp-motivos ol, ol.mmpp-motivos { margin: 2px 0 4px 18px; padding: 0; }
.mmpp-pdfs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
details.repsol-caja > summary { cursor: pointer; list-style-position: inside; }
details.repsol-caja:not([open]) { padding-top: 6px; padding-bottom: 6px; }

.ft-importante { color: #B3261E; font-weight: 600; font-size: 13px; }
.ft-dibujo .ft-cota input.ft-num { width: 3.4em !important; min-width: 0 !important; padding: 1px 4px !important; font-size: 12px !important; min-height: 0 !important; height: 22px !important; }

/* Todas las ventanas a todo el ancho de la pantalla, en PC y en el móvil (KV, 29-10-2026). */
dialog, dialog.ancha, dialog.grande { width: calc(100vw - 24px) !important; max-width: none !important; }
@media (max-width: 700px) { dialog, dialog.ancha, dialog.grande { width: 100vw !important; margin-left: 0; margin-right: 0; border-radius: 12px; } }

/* Mooring Plan de la tarjeta (KV 29/10) */
.mooring > summary { cursor: pointer; font-weight: 600; color: #0D1447; }
.mooring-dibujo { margin: 6px 0; background: #fff; border: 1px solid #d5dbe6; border-radius: 10px; padding: 6px; }
.mooring-dibujo svg { width: 100%; height: auto; margin: 0 auto; }
.mooring-pasos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 6px 0; }
.mooring-extremo { display: flex; flex-direction: column; gap: 4px; }
.mooring-paso { display: grid; grid-template-columns: 1fr 34px 2em 34px; align-items: center; gap: 4px; font-size: 14px; }
.mooring-paso .btn { min-height: 32px; padding: 0; font-size: 18px; line-height: 1; }
.mooring-n { text-align: center; font-size: 16px; }
.mooring-notas { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: #333; }
.mooring-largos { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 6px 0; font-size: 13px; }
.mooring-largos input { width: 4.5em; text-align: center; min-height: 30px; }
.largos-bolardo { color: #0D1447; font-weight: 600; }

/* Herramientas del mapa con símbolo (KV 30/10); el nombre, en la etiqueta .mapa-tip */
.leaflet-left .sim-boton.icono-boton { width: 38px; height: 38px; padding: 0; display: flex; align-items: center; justify-content: center; }
.mapa-tip { position: absolute; z-index: 1100; transform: translateY(-50%); background: #0D1447; color: #fff; font: 600 13px 'Open Sans', sans-serif; padding: 5px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.dist-icono { position: relative; }
.dist-icono.apagado svg { opacity: .35; }
.dist-modo { position: absolute; right: 2px; bottom: 1px; font: 700 10px 'Open Sans', sans-serif; line-height: 1; }
.dist-sel-oculto { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }

/* Barra de la calibración para bajarla y esconderla (KV 30/10): solo cuando va debajo del mapa. */
.calib-tirador { display: none; }
@media (max-width: 900px) {
  .mapa-panel { padding-top: 0; }
  .mapa-panel.con-alto { height: var(--calib-alto); max-height: 85vh; }
  .calib-tirador { display: block; position: sticky; top: 0; z-index: 5; height: 26px; margin: 0 -6px 6px; touch-action: none; cursor: row-resize; background: linear-gradient(#eef1f7, #d5dbe6); }
  .calib-tirador::after { content: ''; position: absolute; left: 50%; top: 10px; width: 46px; height: 5px; margin-left: -23px; border-radius: 3px; background: #8a96a8; }
}

/* Pantalla de arranque: logo y "Conectando…" en vez de blanco mientras responde el servidor. */
.arranque { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--bg); color: var(--muted); font-size: 15px; z-index: 50; }
.arranque[hidden] { display: none; }

.ais-girado { color: #B26A00; font-weight: 600; }

/* Herramientas del mapa en una fila arriba (KV 30/10) y con el mismo aspecto todas: botones blancos redondeados
   con sombra suave, el activo en azul marino. El nombre sale debajo del botón. */
#mapaLienzo .leaflet-top.leaflet-left { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; padding: 8px; right: 60px; pointer-events: none; }
#mapaLienzo .leaflet-top.leaflet-left > .leaflet-control { margin: 0; float: none; clear: none; pointer-events: auto; }
#mapaLienzo .leaflet-top.leaflet-right { padding: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#mapaLienzo .leaflet-top.leaflet-right > .leaflet-control { margin: 0; }
#mapaLienzo .leaflet-bar, #mapaLienzo .leaflet-control-layers { border: 0; border-radius: 10px; box-shadow: 0 1px 4px rgba(13,20,71,.28); overflow: hidden; }
#mapaLienzo .leaflet-control-zoom { display: flex; }
#mapaLienzo .leaflet-control-zoom a { width: 38px; height: 38px; line-height: 38px; font-size: 20px; border: 0; color: #0D1447; }
#mapaLienzo .leaflet-control-zoom a + a { border-left: 1px solid #E3E6EC; }
#mapaLienzo .herr-boton, #mapaLienzo .leaflet-left .sim-boton.icono-boton { width: 38px; height: 38px; border: 0; border-radius: 10px; background: rgba(255,255,255,.95); color: #0D1447; }
#mapaLienzo .herr-boton.on, #mapaLienzo .leaflet-left .sim-boton.icono-boton.on { background: #0D1447; color: #fff; }
#mapaLienzo .leaflet-left .sim-boton.icono-boton svg { width: 22px; height: 22px; }
#mapaLienzo .leaflet-control-layers-toggle { width: 38px; height: 38px; background-size: 22px 22px; }
#mapaLienzo .leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,.7); border-radius: 6px 0 0 0; }
#mapaLienzo .leaflet-control-scale-line { border-color: #55616D; background: rgba(255,255,255,.7); font-size: 11px; }
.mapa-tip { transform: translateX(-50%); }
/* En pantallas táctiles el zoom se hace con dos dedos: sin + y − cabe toda la fila en el iPhone. */
@media (pointer: coarse) { #mapaLienzo .leaflet-control-zoom { display: none; } }

.brazo-nombre small { font-size: 9px; font-weight: 600; opacity: .85; }

/* Falta por redactar en los informes (KV 30/10) */
.caja-redactar { position: relative; }
.caja-redactar > textarea { position: relative; background: transparent !important; color: transparent; caret-color: #1a1a1a; -webkit-text-fill-color: transparent; }
.capa-redactar { position: absolute; inset: 0; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; border-style: solid; border-color: transparent; background: #fff; color: #1a1a1a; pointer-events: none; }
.capa-redactar mark { background: none; color: #C62828; font-weight: inherit; }
.def-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.def-col > h4 { margin: 0; }
@media (min-width: 1101px) { #dlgForm:has(> .def-col) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.por-redactar { color: #C62828; font-weight: 700; font-size: 13px; margin: -4px 0 8px; }
/* Correo: lo leído para el buque elegido (IA o reglas), encima de su tarjeta. */
.leido-correo { background: #EEF4FB; border: 1px solid #C9DCF0; border-radius: 6px; padding: 8px 10px; margin: 6px 0; display: grid; gap: 3px; font-size: 14px; color: #0D1447; }
.leido-correo small { font-size: 12px; }
.pestana-buque { display: inline-flex; align-items: center; gap: 2px; }
/* Briefing de seguridad con IA (KV 31/10, de prueba). */
.briefing:empty { display: none; }
.briefing-caja { background: #EEF4FB; border: 1px solid #C9DCF0; border-radius: 8px; padding: 10px 12px; margin: 6px 0; color: #0D1447; font-size: 14px; display: grid; gap: 4px; }
.briefing-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.briefing-sem { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.briefing-sem i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.briefing-tit { font-weight: 600; }
.briefing-caja ul { list-style: none; margin: 0; padding: 0; }
.briefing-caja li { display: grid; grid-template-columns: 22px 1fr; gap: 4px; padding: 4px 0; border-bottom: 1px solid #DCE6F2; }
.briefing-caja li:last-child { border-bottom: 0; }
.briefing-caja li.vigilar { font-weight: 600; }
.briefing-fuente { font-size: 11px; font-weight: 400; color: #5B6178; background: #fff; border: 1px solid #DCE4EE; border-radius: 99px; padding: 0 7px; margin-left: 6px; white-space: nowrap; }
.briefing-en { background: #fff; border: 1px dashed #9FB7D3; border-radius: 6px; padding: 6px 8px; font-size: 13px; }
.mc .swl-chip { color: #C62828; font-size: 11px; font-weight: 700; border: 1px solid #F0B4B4; border-radius: 4px; padding: 0 5px; } /* SWL de amarre < tiro de remolcadores (KV 31/10): pequeño y discreto */
/* Revisión del tablero (KV 31/10): incoherencias tarjeta / Cornelia / AIS con su posible solución. */
.rev-barra { display: block; width: 100%; margin: 4px 0 6px; padding: 5px 10px; border-radius: 8px; border: 1px solid #B5DBC1; background: #E8F5EC; color: #1B6E3A; font: 600 13px 'Open Sans', sans-serif; text-align: left; cursor: pointer; }
.rev-barra.rev-hay { background: #FFF4D6; border-color: #EBD38E; color: #8A5A00; }
.rev-barra.rev-rojo { background: #FDECEC; border-color: #F3B9B9; color: #B71C1C; }
.rev-item { border-left: 4px solid #E0A100; background: #FFF8E6; border-radius: 6px; padding: 8px 10px; margin: 8px 0; color: #0D1447; display: grid; gap: 4px; font-size: 14px; }
.rev-item.rev-rojo { border-left-color: #C62828; background: #FDECEC; }
.rev-cab { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rev-quien { font-size: 12px; color: #5B6178; }
.rev-sol { font-weight: 600; }
.rev-grupo { margin: 10px 0; }
.rev-ia { margin-top: 14px; padding-top: 10px; border-top: 1px solid #D9DCE8; }
.rev-ia-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.rev-grupo > summary { cursor: pointer; font: 700 14px 'Open Sans', sans-serif; color: #0D1447; padding: 4px 0; }
.rev-n { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: #FFF4D6; color: #8A5A00; font-size: 12px; text-align: center; }
.rev-grupo-rojo .rev-n { background: #FDECEC; color: #B71C1C; }
.rev-item.rev-info { border-left-color: #5B8FD0; background: #EEF4FB; }
.tarifa-aplicar { margin: 6px 0 12px; padding: 8px 10px; border-radius: 8px; background: #F4F6FB; }
.tarifa-aplicar select { max-width: 100%; }

/* Envío de correo (MPX y facturas), KV 31/10: a pantalla completa, una columna y el mensaje a todo lo ancho y alto. */
dialog.envio { width: calc(100vw - 32px); max-width: none; height: calc(100dvh - 32px); max-height: none; }
dialog.envio #dlgForm { display: flex; flex-direction: column; height: 100%; max-height: none; box-sizing: border-box; overflow-y: auto; }
dialog.envio #dlgForm > label:has(textarea) { flex: 1 0 auto; display: flex; flex-direction: column; }
dialog.envio #dlgForm textarea[name="texto"] { flex: 1; width: 100%; min-height: 9em; box-sizing: border-box; font-size: 17px; line-height: 1.5; resize: vertical; }