/* ==========================================================================
   Nautical · Aliados — estilos
   Colores tomados de nauticaleventos.com para que se sienta la misma marca.
   Pensado primero para celular: las agencias cotizan desde el teléfono.
   ========================================================================== */

:root {
  --line-suave: #eef1f3;
  --nautical:      #20a2a6;
  --nautical-dark: #17817f;
  --nautical-soft: #b2e4e6;
  --navy:          #075576;
  --navy-dark:     #001723;
  --offwhite:      #f7f5f0;
  --sand:          #f4efe6;
  --coral:         #f1918b;

  --ink:    #1a2a3a;
  --ink-2:  #3d5165;
  --muted:  #7a8794;
  --line:   #e2e6ea;
  --card:   #ffffff;

  --ok:     #1f7a63;
  --alerta: #a8631a;
  --error:  #c0392b;

  --radio:  12px;
  --sombra: 0 1px 2px rgba(7,85,118,.05), 0 8px 24px -12px rgba(7,85,118,.18);
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--offwhite);
  color: var(--ink);
  font-family: var(--fuente);
  font-size: 16px;           /* 16px evita que iOS haga zoom al enfocar inputs */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ── Estructura ─────────────────────────────────────────────────────────── */
.pantalla { display: none; min-height: 100vh; }
.pantalla.activa { display: block; }

.contenido {
  max-width: 32rem;
  margin: 0 auto;
  padding: 1.25rem 1.15rem 5rem;
}

.barra {
  background: var(--navy);
  color: #fff;
  padding: .85rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  position: sticky;
  top: 0;
  z-index: 20;
}
.barra .marca { font-weight: 700; letter-spacing: -.01em; font-size: 1.02rem; }
.barra .marca span { font-weight: 400; opacity: .75; }
.barra button {
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  border-radius: 8px;
  padding: .3rem .7rem;
  font-size: .8rem;
  cursor: pointer;
  font-family: inherit;
}
.barra button:hover { background: rgba(255,255,255,.12); }

/* ── Tipografía ─────────────────────────────────────────────────────────── */
h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 .3rem; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; margin: 0 0 .2rem; letter-spacing: -.01em; }
.sub { color: var(--muted); margin: 0 0 1.4rem; font-size: .95rem; }
.etiqueta {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: .4rem;
}

/* ── Formularios ────────────────────────────────────────────────────────── */
.campo { margin-bottom: 1.05rem; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], select {
  width: 100%;
  padding: .8rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  transition: border-color .15s;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--nautical);
  box-shadow: 0 0 0 3px rgba(32,162,166,.15);
}

.boton {
  width: 100%;
  padding: .95rem 1rem;
  border: none;
  border-radius: 10px;
  background: var(--nautical);
  color: #fff;
  font-size: 1rem;
  font-weight: 650;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, transform .05s;
}
.boton:hover:not(:disabled) { background: var(--nautical-dark); }
.boton:active:not(:disabled) { transform: translateY(1px); }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.boton.secundario {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--line);
}
.boton.secundario:hover:not(:disabled) { background: var(--sand); }
.boton.grande { padding: 1.15rem; font-size: 1.08rem; }

/* ── Tarjetas y opciones ────────────────────────────────────────────────── */
.tarjeta {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: 1.1rem;
  box-shadow: var(--sombra);
  margin-bottom: 1rem;
}

.opcion {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radio);
  padding: .95rem 1rem;
  margin-bottom: .6rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .15s, background .15s;
}
.opcion:hover { border-color: var(--nautical-soft); background: #fbfefe; }
.opcion.elegida { border-color: var(--nautical); background: rgba(32,162,166,.06); }
.opcion .titulo { font-weight: 650; display: block; }
.opcion .detalle { display: block; font-size: .85rem; color: var(--muted); margin-top: .12rem; line-height: 1.4; }

/* ── Pasos ──────────────────────────────────────────────────────────────── */
.paso-info {
  font-size: .8rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.progreso { display: flex; gap: 4px; margin-bottom: 1.5rem; }
.progreso i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  transition: background .25s;
}
.progreso i.hecho { background: var(--nautical); }

/* ── Resumen de precios ─────────────────────────────────────────────────── */
.linea {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .94rem;
}
.linea:last-of-type { border-bottom: none; }
.linea .valor { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }

/* Los tres números que la agencia necesita ver */
.numeros { margin-top: 1rem; }
.numeros .fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .7rem 0;
}
.numeros .fila + .fila { border-top: 1px solid var(--line); }
.numeros .concepto { font-size: .92rem; }
.numeros .concepto small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.numeros .monto { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.numeros .destacado { background: var(--sand); margin: 0 -1.1rem; padding: .85rem 1.1rem; }
.numeros .destacado .monto { font-size: 1.35rem; color: var(--navy); }
.numeros .comision .monto { color: var(--nautical-dark); }

/* ── Avisos ─────────────────────────────────────────────────────────────── */
.aviso {
  border-radius: 10px;
  padding: .8rem .95rem;
  font-size: .9rem;
  margin-bottom: 1rem;
  line-height: 1.45;
}
.aviso.error  { background: #fdeceb; color: var(--error); border: 1px solid #f5c6c2; }
.aviso.info   { background: #eef8f8; color: var(--nautical-dark); border: 1px solid var(--nautical-soft); }
.aviso.alerta { background: #fdf3e6; color: var(--alerta); border: 1px solid #f0d9b5; }
.aviso.oculto { display: none; }

/* ── Listado de cotizaciones ────────────────────────────────────────────── */
.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
.item:last-child { border-bottom: none; }
.item .info { min-width: 0; }
.item .info b { display: block; font-size: .95rem; }
.item .info small { color: var(--muted); font-size: .82rem; }
.item .monto { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; font-size: .95rem; }

.vacio { text-align: center; color: var(--muted); padding: 2rem 1rem; font-size: .93rem; }

/* ── Políticas ──────────────────────────────────────────────────────────── */
.politicas {
  margin-top: 1.5rem;
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.6;
}
.politicas h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); margin: 0 0 .4rem; }

/* ── Utilidades ─────────────────────────────────────────────────────────── */
.oculto { display: none !important; }
.centro { text-align: center; }
.cargando { text-align: center; color: var(--muted); padding: 2rem; font-size: .93rem; }

.pie-fijo {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--offwhite) 72%, transparent);
  padding: 1rem 0 .8rem;
  margin-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Disponibilidad — selector, vistas y calendario
   ========================================================================== */

/* Chips de embarcación (scroll horizontal en celular) */
.chips {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  margin-bottom: 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chips button {
  flex: 0 0 auto;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  border-radius: 999px;
  padding: .5rem .95rem;
  font-size: .92rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.chips button:hover { border-color: var(--nautical-soft); }
.chips button.activo {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* Mes / Semana / Día */
.segmentado {
  display: inline-flex;
  background: var(--sand);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  margin-bottom: 1rem;
}
.segmentado.ancho { display: flex; width: 100%; margin-bottom: 0; }
.segmentado button {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--ink-2);
  border-radius: 8px;
  padding: .5rem .9rem;
  font-size: .9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.segmentado button.activo {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 1px 3px rgba(7,85,118,.12);
}

/* Navegación de periodo */
.periodo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}
.periodo span {
  font-weight: 650;
  font-size: 1rem;
  text-transform: capitalize;
  color: var(--navy);
}
.periodo button {
  width: 2.1rem;
  height: 2.1rem;
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: 8px;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--navy);
  cursor: pointer;
  font-family: inherit;
}
.periodo button:hover { border-color: var(--nautical); }

/* Cuadrícula del mes */
.mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mes .cab {
  text-align: center;
  font-size: .7rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-bottom: .3rem;
}
.dia {
  aspect-ratio: 1;
  border: none;
  border-radius: 8px;
  background: var(--sand);
  color: var(--ink);
  font-size: .88rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform .1s;
}
.dia:active { transform: scale(.94); }
.dia.otro-mes { opacity: .3; }
.dia.libre   { background: #e3f5f0; color: #14705c; }
.dia.parcial { background: #fdf1dd; color: #8a5312; }
.dia.ocupado { background: #f7dedb; color: #9c3a30; }
.dia.sin_datos { background: #f1f3f4; color: var(--muted); }
.dia.hoy { box-shadow: inset 0 0 0 2px var(--navy); }
.dia.elegido { box-shadow: inset 0 0 0 2px var(--nautical); }

/* Lista de semana y día */
.fila-dia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.fila-dia:last-child { border-bottom: none; }
.fila-dia .fecha { font-weight: 600; text-transform: capitalize; }
.fila-dia .fecha small { display: block; color: var(--muted); font-weight: 400; font-size: .8rem; }
.marca-estado {
  font-size: .8rem;
  font-weight: 700;
  padding: .25rem .65rem;
  border-radius: 999px;
  white-space: nowrap;
}
.marca-estado.libre   { background: #e3f5f0; color: #14705c; }
.marca-estado.parcial { background: #fdf1dd; color: #8a5312; }
.marca-estado.ocupado { background: #f7dedb; color: #9c3a30; }
.marca-estado.sin_datos { background: #f1f3f4; color: var(--muted); }

/* Leyenda */
.leyenda {
  display: flex;
  gap: 1.1rem;
  justify-content: center;
  font-size: .8rem;
  color: var(--muted);
  margin: .3rem 0 1rem;
}
.leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.pt { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pt.libre { background: #a5dfd0; }
.pt.parcial { background: #f0cf9a; }
.pt.ocupado { background: #efb6ae; }

/* Rejilla del formulario de cotizar */
.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
.rejilla .campo:first-child { grid-column: 1 / -1; }
@media (max-width: 26rem) { .rejilla { grid-template-columns: 1fr; } }

/* ==========================================================================
   Vista SEMANA — lunes a domingo en horizontal
   ========================================================================== */
.semana-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -.35rem; }
.semana {
  display: grid;
  grid-template-columns: repeat(7, minmax(7.4rem, 1fr));
  gap: .4rem;
  padding: 0 .35rem .4rem;
  min-width: 52rem;              /* fuerza el scroll horizontal en celular */
}
.col-dia {
  background: var(--sand);
  border-radius: 10px;
  padding: .55rem .5rem .7rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.col-dia.es-hoy { box-shadow: inset 0 0 0 2px var(--navy); }
.col-dia > .tit {
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  padding-bottom: .3rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.col-dia > .tit b { display: block; font-size: 1.15rem; color: var(--navy); letter-spacing: -.02em; }

/* Bloque de franja u horario dentro de un día */
.bloque {
  border-radius: 7px;
  padding: .4rem .5rem;
  font-size: .74rem;
  line-height: 1.3;
  border: 1px solid transparent;
}
.bloque .rot { display: block; font-weight: 700; }
.bloque .hs { display: block; font-variant-numeric: tabular-nums; opacity: .85; font-size: .7rem; }
.bloque.libre   { background: #e3f5f0; border-color: #bfe8dc; color: #14705c; }
.bloque.ocupado { background: #f7dedb; border-color: #efc7c1; color: #9c3a30; }
.bloque.nada    { background: #f1f3f4; border-color: #e5e8ea; color: var(--muted); text-align: center; }
.bloque.clickable { cursor: pointer; }
.bloque.clickable:hover { filter: brightness(.97); }

/* ==========================================================================
   Vista DÍA — estilo Google Calendar
   ========================================================================== */
.dia-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}
.dia-cab h2 { text-transform: capitalize; margin: 0; }

/* Línea de tiempo (Maxicat) — compacta, el día entero sin scroll */
.linea-tiempo {
  display: flex;
  gap: .55rem;
  margin-top: .2rem;
}
.horas-col {
  width: 2.9rem;
  flex: 0 0 auto;
  position: relative;
}
/* Cada etiqueta se posiciona sobre su línea, no apilada. */
.horas-col span {
  position: absolute;
  right: .45rem;
  transform: translateY(-.42em);
  font-size: .68rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pista {
  position: relative;
  flex: 1;
  border-left: 1px solid var(--line);
  border-radius: 0 6px 6px 0;
  overflow: hidden;
  background: #fbfcfc;
}
/* Rayas por hora, más suaves para que no compitan con los bloques. */
.pista .raya {
  position: absolute;
  left: 0; right: 0;
  border-top: 1px solid var(--line-suave, #eef1f3);
}
.pista .raya.media { border-top-style: dotted; opacity: .6; }

.evento {
  position: absolute;
  left: .25rem;
  right: .25rem;
  border-radius: 6px;
  padding: .18rem .5rem;
  font-size: .74rem;
  line-height: 1.25;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
}
.evento .et { min-width: 0; overflow: hidden; }
.evento .rot { font-weight: 700; display: block; }
.evento .hs {
  display: block;
  font-weight: 400;
  font-size: .68rem;
  opacity: .85;
  font-variant-numeric: tabular-nums;
}
/* En bloques cortos, título y hora en una sola línea. */
.evento.corto { display: flex; align-items: center; }
.evento.corto .et { display: flex; gap: .4rem; align-items: baseline; }
.evento.corto .rot, .evento.corto .hs { display: inline; }

.evento.ocupado {
  background: repeating-linear-gradient(45deg, #f7dedb 0 6px, #f2d2ce 6px 12px);
  border: 1px solid #e3a9a0;
  color: #8f3428;
}
.evento.libre {
  background: #e3f5f0;
  border: 1px solid #a9ddcd;
  color: #12654f;
  cursor: pointer;
}
.evento.libre:hover { background: #d6efe7; }

/* Dos franjas grandes (Marfil y lanchas) */
.franjas-dia { display: flex; flex-direction: column; gap: .7rem; }
.franja-caja {
  border-radius: 10px;
  padding: .95rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1.5px solid transparent;
}
.franja-caja .nom { font-weight: 700; font-size: 1rem; }
.franja-caja .hs { font-size: .82rem; opacity: .8; font-variant-numeric: tabular-nums; }
.franja-caja.libre   { background: #e3f5f0; border-color: #bfe8dc; }
.franja-caja.libre .nom { color: #14705c; }
.franja-caja.ocupado { background: #f7dedb; border-color: #efc7c1; }
.franja-caja.ocupado .nom { color: #9c3a30; }

/* Botón + para crear cotización */
.btn-mas {
  border: none;
  background: var(--nautical);
  color: #fff;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  flex: 0 0 auto;
}
.btn-mas:hover { background: var(--nautical-dark); }
.btn-mas.chico { width: 1.5rem; height: 1.5rem; font-size: .95rem; }

/* El encabezado del día en la vista semana es un botón: entra a ese día */
.col-dia > .tit.ir-dia {
  background: transparent;
  border: none;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  border-radius: 6px;
  transition: background .12s;
}
.col-dia > .tit.ir-dia:hover { background: rgba(7,85,118,.06); }
.dia { }  /* los días del mes ya son <button> */

/* ==========================================================================
   FLOTA — embarcaciones con foto, y lista al costado
   ========================================================================== */
.contenido.ancho { max-width: 60rem; }

.tarjetas-flota {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
}
.tarjeta-emb {
  position: relative;
  border: none;
  padding: 0;
  border-radius: var(--radio);
  overflow: hidden;
  cursor: pointer;
  background: var(--navy-dark);
  box-shadow: var(--sombra);
  font-family: inherit;
  text-align: left;
  aspect-ratio: 3 / 2;
  transition: transform .12s, box-shadow .12s;
}
.tarjeta-emb:hover { transform: translateY(-2px); box-shadow: 0 6px 20px -8px rgba(7,85,118,.4); }
.tarjeta-emb.con-foto {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.tarjeta-emb:not(.con-foto) {
  background: linear-gradient(135deg, var(--navy) 0%, var(--nautical-dark) 100%);
}
.tarjeta-emb .sin-foto {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6);
  font-size: .85rem;
}
.tarjeta-emb .capa {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem .95rem .8rem;
  background: linear-gradient(to top, rgba(0,23,35,.92) 0%, rgba(0,23,35,.55) 55%, transparent 100%);
  color: #fff;
}
.tarjeta-emb .nom { display: block; font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; }
.tarjeta-emb .det { display: block; font-size: .8rem; opacity: .85; }
.tarjeta-emb .sellos { display: flex; gap: .35rem; margin-top: .45rem; flex-wrap: wrap; }
.sello {
  font-size: .68rem;
  font-weight: 700;
  padding: .12rem .45rem;
  border-radius: 999px;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.3);
}
.sello.cotiza  { background: var(--nautical); border-color: var(--nautical); }
.sello.licores { background: rgba(241,145,139,.85); border-color: transparent; }

/* Estructura con lista al costado */
.con-lado { display: flex; gap: 1.4rem; align-items: flex-start; }
.lado {
  flex: 0 0 12.5rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  position: sticky;
  top: 4.5rem;
}
.principal { flex: 1; min-width: 0; }

.lado button {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  border: none;
  background: transparent;
  border-radius: 9px;
  padding: .5rem .55rem;
  cursor: pointer;
  font-family: inherit;
  font-size: .92rem;
  color: var(--ink-2);
  text-align: left;
  transition: background .12s;
}
.lado button:hover { background: var(--sand); }
.lado button.activo { background: var(--navy); color: #fff; font-weight: 650; }
.lado button img {
  width: 2.1rem; height: 2.1rem;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 auto;
}
.lado button .ph {
  width: 2.1rem; height: 2.1rem;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--nautical-dark) 100%);
  flex: 0 0 auto;
}

.cabecera-emb { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: 1rem; }
.cabecera-emb .volver {
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: .35rem .6rem;
  font-size: .82rem;
  cursor: pointer;
  font-family: inherit;
  color: var(--navy);
  white-space: nowrap;
  margin-top: .2rem;
}
.cabecera-emb .volver:hover { background: var(--sand); }

/* En celular: sin columna lateral, se usan los chips */
@media (max-width: 46rem) {
  .con-lado { display: block; }
  .lado { display: none; }
}
@media (min-width: 46.01rem) {
  #chips-flota { display: none; }
}

/* ==========================================================================
   LICORES — Beach Corner
   ========================================================================== */
.lic-cat { margin-bottom: 1.4rem; }
.lic-cat > h3 {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin: 0 0 .55rem;
  font-weight: 700;
}
.lic-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: .5rem;
}
.lic-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .6rem .75rem;
  transition: border-color .12s, background .12s;
}
.lic-item.elegido { border-color: var(--nautical); background: rgba(32,162,166,.05); }
.lic-item .txt { min-width: 0; }
.lic-item .nom { display: block; font-size: .9rem; font-weight: 600; line-height: 1.25; }
.lic-item .pre {
  display: block;
  font-size: .82rem;
  color: var(--nautical-dark);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.contador { display: flex; align-items: center; gap: .3rem; flex: 0 0 auto; }
.contador button {
  width: 1.75rem; height: 1.75rem;
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: 7px;
  font-size: 1rem;
  line-height: 1;
  color: var(--navy);
  cursor: pointer;
  font-family: inherit;
}
.contador button:hover { border-color: var(--nautical); background: var(--sand); }
.contador button:disabled { opacity: .35; cursor: not-allowed; }
.contador .n {
  min-width: 1.6rem;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
}

/* Barra de total pegada abajo */
.barra-total {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .7rem .9rem;
  box-shadow: 0 -2px 16px -6px rgba(7,85,118,.25);
  margin: 1rem 0;
  z-index: 15;
}
.barra-total .info { display: flex; flex-direction: column; }
.barra-total .info span { font-size: .8rem; color: var(--muted); }
.barra-total .info b {
  font-size: 1.25rem;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* Domicilio */
.dom-caja {
  display: flex;
  align-items: center;
  gap: .7rem;
  background: var(--sand);
  border-radius: 10px;
  padding: .8rem .9rem;
  margin: 1rem 0;
  cursor: pointer;
}
.dom-caja input { width: 1.15rem; height: 1.15rem; accent-color: var(--nautical); flex: 0 0 auto; }
.dom-caja .txt { flex: 1; min-width: 0; }
.dom-caja .nom { display: block; font-weight: 650; font-size: .93rem; }
.dom-caja .det { display: block; font-size: .82rem; color: var(--muted); }
.dom-caja .val { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Botón "Hoy" — vuelve al día actual desde cualquier periodo */
.btn-hoy {
  width: auto !important;
  height: 2.1rem;
  padding: 0 .75rem !important;
  font-size: .82rem !important;
  font-weight: 650;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--navy);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
.btn-hoy:hover { border-color: var(--nautical); background: var(--sand); }

/* ==========================================================================
   SOLICITUDES DE ACCESO — pantalla de Alexandra
   ========================================================================== */
.sol-tarjeta {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--nautical);
  border-radius: var(--radio);
  padding: 1.1rem;
  margin-bottom: .9rem;
  box-shadow: var(--sombra);
}
.sol-tarjeta.aprobada  { border-left-color: var(--ok); }
.sol-tarjeta.rechazada { border-left-color: var(--muted); opacity: .75; }

.sol-tarjeta h3 { margin: 0 0 .1rem; font-size: 1.05rem; }
.sol-tarjeta .meta { font-size: .84rem; color: var(--muted); margin-bottom: .8rem; }

.sol-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .5rem 1.2rem;
  margin-bottom: 1rem;
}
.sol-datos div { font-size: .88rem; min-width: 0; }
.sol-datos .et {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 700;
}
.sol-datos .va { word-break: break-word; }

.sol-acciones { display: flex; gap: .5rem; flex-wrap: wrap; }
.sol-acciones button {
  border: none;
  border-radius: 9px;
  padding: .6rem 1.1rem;
  font-size: .92rem;
  font-weight: 650;
  cursor: pointer;
  font-family: inherit;
}
.sol-acciones .aprobar { background: var(--ok); color: #fff; }
.sol-acciones .aprobar:hover { filter: brightness(1.08); }
.sol-acciones .denegar {
  background: #fff; color: var(--error); border: 1.5px solid #f0c7c2;
}
.sol-acciones .denegar:hover { background: #fdeceb; }
.sol-acciones button:disabled { opacity: .5; cursor: not-allowed; }

/* Credenciales recién creadas — se ven UNA sola vez */
.credenciales {
  background: #e8f6f1;
  border: 1.5px solid var(--ok);
  border-radius: 10px;
  padding: 1rem;
  margin-top: .9rem;
}
.credenciales h4 { margin: 0 0 .6rem; font-size: .95rem; color: #14705c; }
.credenciales .par {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: .35rem 0;
}
.credenciales .par + .par { border-top: 1px solid rgba(20,112,92,.15); }
.credenciales .par span { font-size: .8rem; color: var(--muted); }
.credenciales .par code {
  font-family: ui-monospace, monospace;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
  background: rgba(255,255,255,.7);
  padding: .15rem .45rem;
  border-radius: 5px;
  user-select: all;
}
.credenciales .nota { font-size: .8rem; color: #14705c; margin: .7rem 0 0; }
.credenciales .wa {
  display: inline-block;
  margin-top: .8rem;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  padding: .55rem 1rem;
  border-radius: 9px;
  font-size: .9rem;
  font-weight: 650;
}

/* ==========================================================================
   USO DEL PORTAL — pantalla de Alexandra
   ========================================================================== */
.met-totales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .8rem;
  margin-bottom: 1.4rem;
}
.met-caja {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: .9rem 1rem;
  box-shadow: var(--sombra);
}
.met-caja .n {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.met-caja .et {
  display: block;
  font-size: .78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  margin-top: .15rem;
}

.met-agencia {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: 1rem 1.1rem;
  margin-bottom: .8rem;
  box-shadow: var(--sombra);
}
.met-agencia .cab {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: .6rem;
}
.met-agencia h3 { margin: 0; font-size: 1.02rem; }
.met-agencia .cuando { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.met-agencia .cifras { display: flex; gap: 1.4rem; margin-bottom: .7rem; }
.met-agencia .cifras div { font-size: .85rem; color: var(--ink-2); }
.met-agencia .cifras b {
  display: block; font-size: 1.15rem; color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* Barras por embarcación */
.barras { display: flex; flex-direction: column; gap: .3rem; }
.barra-emb { display: flex; align-items: center; gap: .6rem; font-size: .84rem; }
.barra-emb .nom { width: 7.5rem; flex: 0 0 auto; color: var(--ink-2); }
.barra-emb .pista2 {
  flex: 1; height: .55rem; background: var(--sand);
  border-radius: 999px; overflow: hidden;
}
.barra-emb .relleno { height: 100%; background: var(--nautical); border-radius: 999px; }
.barra-emb .n {
  width: 2rem; text-align: right; flex: 0 0 auto;
  font-variant-numeric: tabular-nums; font-weight: 650; color: var(--navy);
}

/* Bitácora */
.bitacora { overflow-x: auto; }
.bitacora table { min-width: 44rem; }
.bitacora td, .bitacora th { padding: .55rem .7rem; font-size: .86rem; }
.bitacora th {
  text-align: left; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); font-weight: 700;
  border-bottom: 1.5px solid var(--line); white-space: nowrap;
}
.bitacora td { border-bottom: 1px solid var(--line-suave); vertical-align: top; }
.bitacora tr:last-child td { border-bottom: none; }
.bitacora .hora { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.bitacora .ag { font-weight: 650; }
.etq {
  display: inline-block; font-size: .72rem; font-weight: 700;
  padding: .1rem .45rem; border-radius: 999px; white-space: nowrap;
}
.etq.ingreso { background: #e3f5f0; color: #14705c; }
.etq.vista   { background: #e8f1f7; color: var(--navy); }
.etq.dia     { background: #fdf1dd; color: #8a5312; }

/* ==========================================================================
   PRÓXIMAMENTE — adelanto de Beach Corner
   ========================================================================== */
.proximamente {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: linear-gradient(100deg, var(--navy) 0%, var(--nautical-dark) 100%);
  color: #fff;
  border-radius: var(--radio);
  padding: .9rem 1.1rem;
  margin: 1.2rem 0 .4rem;
  box-shadow: var(--sombra);
}
.proximamente .bc-logo {
  width: 2.8rem; height: 2.8rem;
  border-radius: 8px;
  object-fit: contain;
  background: rgba(255,255,255,.92);
  padding: .25rem;
  flex: 0 0 auto;
}
.proximamente .txt { flex: 1; min-width: 0; }
.proximamente .tit {
  display: block; font-weight: 700; font-size: 1rem; letter-spacing: -.01em;
}
.proximamente .det {
  display: block; font-size: .85rem; opacity: .82; line-height: 1.35;
}
.proximamente .pronto {
  flex: 0 0 auto;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  padding: .3rem .7rem;
  white-space: nowrap;
}
@media (max-width: 30rem) {
  .proximamente { flex-wrap: wrap; }
  .proximamente .pronto { margin-left: auto; }
}

/* Instrucción para que se entienda que hay que tocar el día */
.pista-toca {
  background: #eef8f8;
  border: 1px solid var(--nautical-soft);
  color: var(--nautical-dark);
  border-radius: 9px;
  padding: .55rem .8rem;
  font-size: .87rem;
  margin: 0 0 .8rem;
  text-align: center;
  font-weight: 600;
}
.pista-toca.oculto { display: none; }