/* =====================================================================
   Rías Baixas Buceo — hoja de estilos común
   Se carga después de Bootstrap 5.3 y redefine lo justo.
   ===================================================================== */

:root{
  --abisal:#0F2427;
  --abisal-2:#1A3336;
  --ria:#1D4E4B;
  --ria-medio:#2E6F69;
  --ria-claro:#5B968F;
  --granito:#8A8981;
  --granito-claro:#B4B3AB;
  --bretema:#DDE0DA;
  --carta:#F5F6F2;
  --tinta:#14211F;
  --linea:#C8CCC4;

  --tag-solicitada:#E3B23C;
  --tag-solicitada-tinta:#453206;
  --tag-confirmada:#2F7D4F;
  --tag-espera:#C55E1B;
  --tag-neutro:#8A8981;
  --alerta:#A83232;

  --display:'Archivo',system-ui,sans-serif;
  --texto:'IBM Plex Sans',system-ui,sans-serif;
  --cifra:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}

body{
  background:var(--carta);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:16px;
  line-height:1.6;
  margin:0;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--ria)}
:focus-visible{outline:2px solid var(--ria-medio);outline-offset:2px}

/* ---- Tipografía ---- */
.rotulo{font-family:var(--display);font-weight:600;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--granito);line-height:1.4}
.rotulo-claro{color:var(--ria-claro)}
.titular{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.15;color:var(--abisal)}
.cifra{font-family:var(--cifra);font-variant-numeric:tabular-nums}

/* ---- Barra superior del cliente ---- */
.barra{background:var(--abisal);color:var(--bretema);border-bottom:3px solid var(--ria-medio)}
.barra .marca{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;color:#fff;text-decoration:none}
.barra .marca span{color:var(--ria-claro);font-weight:400}
.barra a{color:var(--bretema);text-decoration:none;font-size:.875rem}
.barra a:hover{color:#fff;text-decoration:underline}
.barra .sep{color:#3D4C49;margin:0 .6rem}

/* ---- Cajetín de la semana ---- */
.cajetin{background:#fff;border:1px solid var(--linea);border-top:4px solid var(--abisal);padding:1.5rem 1.75rem}
.cajetin .semana-num{font-family:var(--cifra);font-size:3.5rem;font-weight:500;line-height:.9;color:var(--abisal);letter-spacing:-.04em}
.cajetin .rango{font-family:var(--display);font-size:1.375rem;font-weight:600;letter-spacing:-.02em;color:var(--abisal)}
.cajetin .resumen{border-top:1px solid var(--linea);margin-top:1.25rem;padding-top:.875rem;font-size:.875rem;color:var(--granito)}

/* ---- Tarjeta de salida ---- */
.salida{background:#fff;border:1px solid var(--linea);display:flex;margin-top:-1px;position:relative;transition:border-color .15s}
.salida:hover{border-color:var(--ria-medio);z-index:2}
.salida.reservada{background:#FBFBF8}
.salida.reservada .cuerpo{opacity:.72}
.salida.reservada .cuerpo .accion{opacity:1}
.salida .cuerpo{flex:1 1 auto;padding:1.25rem 1.5rem;display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center}
.salida .cuando{flex:0 0 auto;min-width:110px}
.salida .cuando .dia{font-family:var(--display);font-weight:600;font-size:1.125rem;letter-spacing:-.01em;color:var(--abisal)}
.salida .cuando .hora{font-family:var(--cifra);font-size:1.5rem;font-weight:500;letter-spacing:-.03em;color:var(--ria);display:block}
.salida .donde{flex:1 1 200px;min-width:0}
.salida .donde .lugar{font-family:var(--display);font-weight:600;font-size:1.0625rem;letter-spacing:-.015em;color:var(--abisal);margin:0}
.salida .donde .nota{font-size:.8125rem;color:var(--granito);margin:.15rem 0 0}
.salida .accion{flex:0 0 auto;margin-left:auto}

/* ---- Franja batimétrica: tintas de profundidad de la carta náutica ---- */
.sonda{width:60px;flex:0 0 60px;background:var(--bretema);display:flex;flex-direction:column;border-right:1px solid var(--linea)}
.sonda .banda{flex:1;border-bottom:1px solid rgba(255,255,255,.55)}
.sonda .banda:last-of-type{border-bottom:0}
.sonda .b1{background:#C3D2CD}
.sonda .b2{background:#93B3AD}
.sonda .b3{background:#5B968F}
.sonda .b4{background:#2E6F69}
.sonda .b5{background:#1D4E4B}
.sonda .vacia{background:var(--bretema)}
.sonda .valor{font-family:var(--cifra);font-size:.75rem;font-weight:500;text-align:center;padding:.3rem 0;background:var(--abisal);color:var(--bretema);flex:0 0 auto;letter-spacing:-.02em}

/* ---- Tags de estado: el único color saturado de la interfaz ---- */
.tag{font-family:var(--display);font-size:.6875rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;padding:.4rem .7rem;display:inline-block;white-space:nowrap}
.tag-solicitada{background:var(--tag-solicitada);color:var(--tag-solicitada-tinta)}
.tag-confirmada{background:var(--tag-confirmada);color:#fff}
.tag-espera{background:var(--tag-espera);color:#fff}
.tag-neutro{background:var(--tag-neutro);color:#fff}
.tag-borrador{background:var(--bretema);color:#4A5654}
.tag-publicada{background:var(--ria-medio);color:#fff}
.tag-cerrada{background:var(--abisal);color:var(--bretema)}

/* ---- Botones ---- */
.btn-ria,.btn-linea,.btn-alerta{border-radius:0;font-family:var(--display);font-weight:600;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;padding:.6rem 1.15rem}
.btn-ria{background:var(--ria);color:#fff;border:1px solid var(--ria)}
.btn-ria:hover,.btn-ria:focus{background:var(--abisal);border-color:var(--abisal);color:#fff}
.btn-linea{background:transparent;color:var(--ria);border:1px solid var(--linea)}
.btn-linea:hover,.btn-linea:focus{border-color:var(--ria);color:var(--abisal);background:transparent}
.btn-alerta{background:transparent;color:var(--alerta);border:1px solid var(--linea)}
.btn-alerta:hover,.btn-alerta:focus{border-color:var(--alerta);color:var(--alerta);background:transparent}
.btn-mini{font-size:.6875rem;padding:.32rem .62rem}
.btn:disabled{opacity:.45}

/* ---- Formularios ---- */
.panel{background:#fff;border:1px solid var(--linea);padding:2rem}
.panel-t{padding-bottom:.65rem;border-bottom:1px solid var(--linea);margin-bottom:1.15rem}
.form-label{font-family:var(--display);font-size:.6875rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--granito);margin-bottom:.35rem}
.form-control,.form-select{border-radius:0;border:1px solid var(--linea);padding:.6rem .75rem;font-family:var(--texto);font-size:.9375rem;background:#fff}
.form-control:focus,.form-select:focus{border-color:var(--ria-medio);box-shadow:0 0 0 3px rgba(46,111,105,.16)}
.form-control.mal,.form-select.mal{border-color:var(--alerta)}
.form-check-input{border-radius:0;border-color:var(--granito)}
.form-check-input:checked{background-color:var(--ria);border-color:var(--ria)}
.ayuda{font-size:.8125rem;color:var(--granito);margin-top:.3rem}
.error-campo{font-size:.8125rem;color:var(--alerta);margin-top:.3rem}

/* ---- Notas y avisos ---- */
.nota{padding:.85rem 1.1rem;border:1px solid var(--linea);background:#fff;font-size:.9375rem}
.nota-error{border-left:4px solid var(--alerta);color:#6E2020}
.nota-exito{border-left:4px solid var(--tag-confirmada)}
.nota-info{border-left:4px solid var(--ria-medio)}
.aviso{background:#fff;border:1px solid var(--linea);border-left:4px solid var(--ria-medio);padding:2.25rem 2rem}

/* ---- Texto legal ---- */
.legal{background:var(--carta);border:1px solid var(--linea);padding:1.25rem;max-height:230px;overflow-y:auto;font-size:.8438rem;line-height:1.65;color:#3A4644}
.legal h4{font-family:var(--display);font-size:.6875rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--granito);margin:0 0 .6rem}
.legal p{margin:0 0 .7rem}
.legal p:last-child{margin-bottom:0}
.legal strong{color:var(--abisal);font-weight:500}

/* ---- Modales ---- */
.modal-content{border-radius:0;border:1px solid var(--linea);border-top:4px solid var(--abisal)}
.modal-header,.modal-footer{border-color:var(--linea)}

/* =====================================================================
   PANEL DE ADMINISTRACIÓN
   ===================================================================== */

.marco{display:flex;min-height:100vh}
.lateral{width:216px;flex:0 0 216px;background:var(--abisal);color:var(--bretema);padding:1.4rem 0;display:flex;flex-direction:column}
.lateral .marca{font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.02em;color:#fff;padding:0 1.25rem 1.25rem;border-bottom:1px solid #24393C;margin-bottom:1rem;text-decoration:none;display:block}
.lateral .marca small{display:block;font-family:var(--display);font-size:.625rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ria-claro);margin-top:.25rem}
.lateral nav a{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.6rem 1.25rem;color:#A9B6B3;text-decoration:none;font-family:var(--display);font-size:.8125rem;font-weight:500;border-left:3px solid transparent}
.lateral nav a:hover{color:#fff;background:var(--abisal-2)}
.lateral nav a.on{color:#fff;background:var(--abisal-2);border-left-color:var(--ria-claro)}
.lateral nav .grupo{padding:1.1rem 1.25rem .4rem;font-family:var(--display);font-size:.625rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#576966}
.pastilla{background:var(--tag-solicitada);color:var(--tag-solicitada-tinta);font-family:var(--cifra);font-size:.6875rem;font-weight:500;padding:.05rem .38rem}

.contenido{flex:1 1 auto;min-width:0;padding:2rem 2.25rem 4rem}
.cabecera{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.75rem;padding-bottom:1rem;border-bottom:1px solid var(--linea)}

.aviso-altas{background:#fff;border:1px solid var(--linea);border-left:4px solid var(--tag-solicitada);padding:1.1rem 1.35rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}

/* ---- Tablas ---- */
.tabla{width:100%;background:#fff;border:1px solid var(--linea);border-collapse:collapse}
.tabla th{font-family:var(--display);font-size:.6563rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--granito);text-align:left;padding:.7rem .85rem;border-bottom:1px solid var(--linea);white-space:nowrap}
.tabla td{padding:.75rem .85rem;border-bottom:1px solid #E8EAE5;font-size:.9063rem;vertical-align:middle}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla tbody tr:hover{background:#FAFBF8}
.tabla .num{font-family:var(--cifra);font-variant-numeric:tabular-nums}
.tabla .vacia td{color:var(--granito);text-align:center;padding:2.5rem 1rem}

/* ---- Indicador de nivel: eco de la franja batimétrica ---- */
.nivel{display:inline-flex;gap:2px;vertical-align:middle}
.nivel i{width:7px;height:13px;background:var(--bretema);display:block}
.nivel.n1 i:nth-child(1){background:var(--ria-claro)}
.nivel.n2 i:nth-child(-n+2){background:var(--ria-medio)}
.nivel.n3 i{background:var(--ria)}

/* ---- Reparto de plazas ---- */
.reparto{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;align-items:start}
.columna{background:#fff;border:1px solid var(--linea);display:flex;flex-direction:column;min-height:340px}
.columna > header{padding:.8rem .9rem;border-bottom:1px solid var(--linea);background:#FAFBF8}
.columna > header .n{font-family:var(--display);font-size:.6875rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--abisal)}
.columna > header .c{font-family:var(--cifra);font-size:.8125rem;font-weight:500;color:var(--granito);float:right}
.columna.confirmados > header{background:#EFF6F1;border-bottom-color:#BFD9C8}
.columna.espera > header{background:#FBF0E7;border-bottom-color:#EBCDB3}
.columna.sinvalidar > header{background:#F2F2EE}
.columna.confirmados.excedido > header{background:#FBECEC;border-bottom-color:#E6BEBE}
.columna.confirmados.excedido > header .c{color:var(--alerta);font-weight:500}
.lista{padding:.6rem;flex:1 1 auto;min-height:200px}
.lista:empty::after{content:attr(data-vacio);display:block;text-align:center;color:var(--granito-claro);font-size:.8125rem;padding:2rem .5rem;border:1px dashed var(--linea)}

.buzo{background:#fff;border:1px solid var(--linea);border-left:3px solid var(--granito-claro);padding:.6rem .7rem;margin-bottom:.5rem;cursor:grab}
.buzo:active{cursor:grabbing}
.buzo:hover{border-color:var(--ria-medio);border-left-color:var(--ria-medio)}
.buzo.apto{border-left-color:var(--ria-medio)}
.buzo.novalidado{border-left-color:var(--tag-solicitada);background:#FEFCF6}
.buzo .nom{font-family:var(--display);font-weight:600;font-size:.8438rem;letter-spacing:-.01em;color:var(--abisal);line-height:1.3}
.buzo .datos{display:flex;justify-content:space-between;align-items:center;margin-top:.45rem;gap:.4rem}
.buzo .pts{font-family:var(--cifra);font-size:.9375rem;font-weight:500;color:var(--ria);letter-spacing:-.02em}
.buzo .inm{font-family:var(--cifra);font-size:.6875rem;color:var(--granito)}
.buzo .marca-nv{font-family:var(--display);font-size:.5938rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:#8A6A16;margin-top:.35rem;display:block}
.fantasma{opacity:.4}
.arrastrando{border-color:var(--ria-medio)!important;box-shadow:0 3px 10px rgba(15,36,39,.16)}

.leyenda{display:flex;gap:1.4rem;flex-wrap:wrap;font-size:.8125rem;color:var(--granito);margin-top:1.1rem}
.leyenda span{display:flex;align-items:center;gap:.4rem}
.leyenda i{width:3px;height:15px;display:block}

/* ---- Tabla de cambios del pop-up de la ficha ---- */
.cambios{width:100%;border-collapse:collapse;font-size:.875rem}
.cambios th{font-family:var(--display);font-size:.625rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--granito);text-align:left;padding:.45rem .5rem;border-bottom:1px solid var(--linea)}
.cambios td{padding:.55rem .5rem;border-bottom:1px solid #EDEFEA;vertical-align:top}
.cambios .antes{color:var(--granito);text-decoration:line-through}
.cambios .ahora{color:var(--abisal);font-weight:500}

/* ---- Responsive ---- */
@media (max-width:1100px){ .reparto{grid-template-columns:repeat(2,1fr)} }
@media (max-width:820px){
  .marco{flex-direction:column}
  .lateral{width:100%;flex:0 0 auto;padding:1rem 0}
  .lateral nav{display:flex;flex-wrap:wrap}
  .lateral nav .grupo{display:none}
  .contenido{padding:1.5rem 1.15rem 3rem}
  .reparto{grid-template-columns:1fr}
}
@media (max-width:576px){
  .cajetin .semana-num{font-size:2.75rem}
  .salida .cuerpo{padding:1rem 1.1rem;gap:.85rem}
  .salida .accion{margin-left:0;width:100%}
  .sonda{width:44px;flex:0 0 44px}
  .panel{padding:1.35rem}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* ---- Cabeceras de tabla ordenables ---- */
.tabla th.ordenable{padding:0}
.tabla th.ordenable a{
  display:block;padding:.7rem .85rem;color:var(--granito);
  text-decoration:none;white-space:nowrap;
}
.tabla th.ordenable a:hover{color:var(--ria);background:#F2F4F0}
.tabla th.ordenable.activa a{color:var(--abisal)}
.tabla th .flecha{opacity:.3;margin-left:.15rem;font-size:.75rem}
.tabla th .flecha.on{opacity:1;color:var(--ria-medio)}

/* =====================================================================
   PORTADA DE LA PANTALLA DE ACCESO
   El nombre del centro es el titular, sobre banda a todo ancho.
   ===================================================================== */

.portada{
  background:var(--abisal);
  border-bottom:3px solid var(--ria-medio);
  padding:2.75rem 0 2.5rem;
  text-align:center;
}
.portada-nombre{
  font-family:var(--display);
  font-weight:700;
  font-size:2.125rem;
  letter-spacing:-.03em;
  line-height:1.1;
  color:#fff;
  margin:0;
}

@media (max-width:576px){
  .portada{padding:2rem 0 1.85rem}
  .portada-nombre{font-size:1.625rem}
}


/* =====================================================================
   AVISO DE COOKIES
   Banda inferior, no ventana emergente: se lee sin tapar la pagina y
   funciona con el JavaScript desactivado.
   ===================================================================== */

.cookies{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:1040;
  background:#fff;
  border-top:3px solid var(--abisal);
  box-shadow:0 -2px 12px rgba(20,33,31,.12);
  padding:1rem 1.25rem;
  display:flex;
  align-items:center;
  gap:1.25rem;
  flex-wrap:wrap;
}
.cookies-texto{flex:1 1 22rem;min-width:0;font-size:.875rem;line-height:1.5}
.cookies-texto a{color:var(--ria)}
.cookies-botones{display:flex;gap:.5rem;flex:0 0 auto;margin-left:auto}

@media (max-width:576px){
  .cookies{padding:.9rem 1rem;gap:.75rem}
  .cookies-botones{width:100%;margin-left:0}
  .cookies-botones .btn{flex:1 1 0}
}


/* =====================================================================
   PIE DE LISTADO PAGINADO
   La cuenta a la izquierda, las paginas en el centro y el tamano a la
   derecha. En movil se apila y las paginas quedan las primeras, que es
   lo que se usa.
   ===================================================================== */

.paginador{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1rem;
  padding-top:.875rem;
  border-top:1px solid var(--linea);
  font-size:.875rem;
}
.paginador-cuenta{margin:0;color:var(--granito);flex:1 1 auto}
.paginador-cuenta strong{color:var(--abisal);font-weight:500;font-family:var(--cifra)}

.paginador-paginas{display:flex;gap:.125rem;order:0}
.paginador-paginas a,
.paginador-paginas span{
  font-family:var(--cifra);
  min-width:2rem;
  padding:.3rem .5rem;
  text-align:center;
  border:1px solid var(--linea);
  margin-left:-1px;
  text-decoration:none;
  color:var(--ria);
  background:#fff;
}
.paginador-paginas a:hover{background:var(--bretema);border-color:var(--ria-medio);position:relative;z-index:2}
.paginador-paginas .actual{background:var(--abisal);border-color:var(--abisal);color:#fff;font-weight:500}
.paginador-paginas .off{color:var(--granito-claro);border-color:var(--linea)}

.paginador-tamano{display:flex;align-items:center;gap:.5rem;color:var(--granito)}
.paginador-tamano label{margin:0;white-space:nowrap}
.paginador-tamano .form-select{width:auto;padding:.25rem 1.75rem .25rem .5rem;font-size:.875rem}

@media (max-width:576px){
  .paginador{gap:.75rem}
  .paginador-paginas{order:-1;width:100%;justify-content:center}
  .paginador-cuenta{flex:1 1 100%;text-align:center}
  .paginador-tamano{margin:0 auto}
}