/* ═══════════════════════════════════════════════════════════════════════════
   CeibeBOOKING — hoja de estilo única.

   Basalto y agua: la costa de Adeje. Fondo de arena clarísima, tinta casi negra
   con un punto de verde, y un turquesa atlántico como único acento.

   Todas las correcciones de iOS están aquí y comentadas: si algo se deforma en
   un iPhone, la causa está en este fichero, no repartida por las páginas.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ink:       #10201f;
  --ink-2:     #3f5250;
  --ink-3:     #71827f;
  --ground:    #fbfcfb;
  --surface:   #ffffff;
  --surface-2: #f1f5f3;
  --line:      #dde5e2;
  --line-2:    #c6d3cf;
  --sea:       #0e7c7b;
  --sea-deep:  #0a5b5a;
  --sea-soft:  #e2f1f0;
  --sand:      #b98b4a;
  --sand-soft: #f6edde;
  --alert:     #b4543c;
  --alert-soft:#f8e7e2;
  --ok:        #4f7a52;
  --ok-soft:   #e6efe4;

  --f: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-cjk: 'Noto Sans SC', var(--f);
  --r: 12px;
  --r-lg: 18px;
  --sombra: 0 1px 2px rgba(16,32,31,.04), 0 10px 28px rgba(16,32,31,.07);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* iOS: sin esto, al girar el móvil el texto se agranda solo. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--f);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  /* iOS: el arrastre elástico despega las cabeceras fijas. */
  overscroll-behavior-y: none;
}

body[lang="zh"] { font-family: var(--f-cjk); }

/* ── Armazón ───────────────────────────────────────────────────────────────
   100dvh en vez de 100vh: en Safari, 100vh cuenta la barra del navegador que
   luego se retrae, y el botón de abajo queda fuera de la pantalla. */
.cb-app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  padding-top: env(safe-area-inset-top);
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  max-width: 520px;
  margin: 0 auto;
}

.cb-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0 10px;
  min-height: 60px;
}

.cb-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cb-marca img { height: 34px; width: auto; max-width: 140px; object-fit: contain; display: block; }
.cb-marca span {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Selector de idioma ────────────────────────────────────────────────────
   Un <select> nativo hereda el estilo del sistema en iOS y no admite altura.
   Se le quita la apariencia y se le dibuja la flecha; el desplegable que abre
   sigue siendo el nativo, que es lo que la gente sabe usar. */
.cb-idioma { position: relative; flex: none; }
.cb-idioma select {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 16px;          /* por debajo de 16 Safari hace zoom al enfocar */
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 34px 8px 14px;
  min-height: 42px;
  line-height: 1.2;
  cursor: pointer;
}
.cb-idioma::after {
  content: '';
  position: absolute;
  right: 14px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* ── Contenido ─────────────────────────────────────────────────────────────*/
.cb-main { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 8px 0 24px; }

.cb-titulo {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
.cb-sub { color: var(--ink-2); margin: 0; font-size: 15px; }

/* ── El resguardo ──────────────────────────────────────────────────────────
   La pieza que acompaña todo el recorrido y acaba siendo el comprobante. */
.cb-resguardo {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.cb-resguardo-cab {
  background: var(--sea-soft);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}
.cb-localizador {
  font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', monospace;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--sea-deep);
}
.cb-localizador-et {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--sea);
  font-weight: 700;
  margin-bottom: 1px;
}
.cb-resguardo-cuerpo { padding: 6px 20px 18px; }

.cb-linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.cb-linea:last-child { border-bottom: 0; }
.cb-linea dt { color: var(--ink-3); font-size: 14px; flex: none; }
.cb-linea dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
  font-size: 15.5px;
  font-variant-numeric: tabular-nums;
}

/* ── Distintivos de estado ─────────────────────────────────────────────────*/
.cb-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
}
.cb-estado.ok   { background: var(--ok-soft);    color: var(--ok); }
.cb-estado.gris { background: var(--surface-2);  color: var(--ink-3); }
.cb-estado.mal  { background: var(--alert-soft); color: var(--alert); }

/* ── Botones ───────────────────────────────────────────────────────────────
   Alto mínimo 52px: un dedo no acierta en menos de 44, y con guantes de playa,
   menos. */
.cb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  border: 0;
  border-radius: var(--r);
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}
.cb-btn:active { transform: translateY(1px); }

.cb-btn-principal { background: var(--sea); color: #fff; box-shadow: 0 4px 14px rgba(14,124,123,.26); }
.cb-btn-principal:hover { background: var(--sea-deep); }

.cb-btn-suave { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-2); }
.cb-btn-suave:hover { background: var(--surface-2); }

.cb-btn-peligro { background: var(--surface); color: var(--alert); border: 1px solid var(--alert); }
.cb-btn-peligro:hover { background: var(--alert-soft); }

.cb-acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

/* Foco visible siempre: se navega con teclado y con lector de pantalla. */
:where(a, button, select, input, textarea):focus-visible {
  outline: 3px solid var(--sea);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Avisos ────────────────────────────────────────────────────────────────*/
.cb-nota {
  border-radius: var(--r);
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.5;
}
.cb-nota.info { background: var(--sea-soft);   color: var(--sea-deep); }
.cb-nota.aviso{ background: var(--sand-soft);  color: #7a5c30; }
.cb-nota.mal  { background: var(--alert-soft); color: #8d3f2c; }

/* ── Estado vacío / error ──────────────────────────────────────────────────*/
.cb-vacio { text-align: center; padding: 40px 0 28px; }
.cb-vacio .icono {
  width: 68px; height: 68px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  font-size: 30px;
}
.cb-vacio .icono.gris { background: var(--surface-2);  color: var(--ink-3); }
.cb-vacio .icono.ok   { background: var(--ok-soft);    color: var(--ok); }
.cb-vacio .icono.mal  { background: var(--alert-soft); color: var(--alert); }

/* ── Pie ───────────────────────────────────────────────────────────────────*/
.cb-pie {
  padding: 22px 0 4px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.cb-pie-tel {
  color: var(--sea);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  min-height: 44px;              /* sigue siendo un enlace que se pulsa con el dedo */
  display: flex;
  align-items: center;
}
.cb-pie-marca {
  margin: 0;
  font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Roboto Mono', monospace;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--ink-2);
}
.cb-pie-copy {
  margin: 0;
  font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Roboto Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--ink-3);
}

/* ── El recorrido ──────────────────────────────────────────────────────────*/
.cb-paso { display: flex; flex-direction: column; gap: 12px; margin: 0; }

/* Resguardo: lo ya elegido, siempre a la vista */
.cb-ticket {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  background: var(--sea-soft); border-radius: 10px;
  padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--sea-deep);
}

/* Contador de comensales. Nada de input[type=number]: en iOS saca el teclado
   numérico con flechas y descuadra la caja. */
.cb-contador {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  padding: 18px 0 10px;
}
.cb-cont-n {
  font-size: 52px; font-weight: 800; letter-spacing: -.04em;
  min-width: 74px; text-align: center; font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cb-cont-btn {
  width: 54px; height: 54px; border-radius: 50%;
  border: 1.5px solid var(--line-2); background: var(--surface);
  color: var(--sea); font-size: 26px; font-weight: 400; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-family: inherit; transition: background .15s, border-color .15s;
}
.cb-cont-btn:hover:not(:disabled) { background: var(--sea-soft); border-color: var(--sea); }
.cb-cont-btn:disabled { opacity: .3; cursor: default; }

/* Calendario propio. `input[type=date]` en Safari abre una rueda que tapa media
   pantalla y no admite altura ni estilo. */
.cb-cal {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 14px; margin: 0;
}
.cb-cal-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.cb-cal-mes { font-weight: 700; font-size: 16px; text-transform: capitalize; }
.cb-cal-nav {
  width: 44px; height: 44px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font-size: 20px; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.cb-cal-nav:hover:not(:disabled) { background: var(--surface-2); }
.cb-cal-nav:disabled { opacity: .28; cursor: default; }

.cb-cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cb-cal-cab-dia {
  text-align: center; font-size: 11px; color: var(--ink-3);
  padding-bottom: 4px; text-transform: uppercase; letter-spacing: .04em;
}
.cb-cal-hueco { aspect-ratio: 1; }
.cb-cal-dia {
  aspect-ratio: 1; min-height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; font-variant-numeric: tabular-nums;
  transition: background .13s, border-color .13s, color .13s;
}
.cb-cal-dia:hover { background: var(--sea); border-color: var(--sea); color: #fff; }
.cb-cal-dia-no {
  background: var(--surface-2); color: var(--ink-3);
  border-color: transparent; cursor: default; font-weight: 400;
  text-decoration: line-through; text-decoration-thickness: 1px;
}

/* Horas: botones, no un desplegable de hora nativo */
.cb-turno {
  margin: 6px 0 0; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3);
}
.cb-horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.cb-hora {
  min-height: 50px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font-family: inherit; font-size: 16px; font-weight: 700;
  cursor: pointer; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
  transition: background .13s, border-color .13s, color .13s;
}
.cb-hora:hover { background: var(--sea); border-color: var(--sea); color: #fff; }
.cb-hora-no {
  background: var(--surface-2); color: var(--ink-3); border-color: transparent;
  cursor: default; font-weight: 500; text-decoration: line-through;
}

/* Zonas */
.cb-zona {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 62px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); font-family: inherit; cursor: pointer;
  text-align: left; transition: border-color .13s, background .13s;
}
.cb-zona:hover { border-color: var(--sea); background: var(--sea-soft); }
.cb-zona-n { font-size: 16px; font-weight: 700; color: var(--ink); }
.cb-zona-e { font-size: 12.5px; font-weight: 600; color: var(--sea); flex: none; }
.cb-zona-no { cursor: default; opacity: .55; }
.cb-zona-no:hover { border-color: var(--line); background: var(--surface); }
.cb-zona-no .cb-zona-e { color: var(--ink-3); }

/* Campos. 16px exactos: por debajo, Safari amplía la página al enfocar. */
.cb-campo { display: flex; flex-direction: column; gap: 5px; }
.cb-campo-et { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.cb-campo input, .cb-campo textarea {
  width: 100%; padding: 13px 14px;
  border: 1.5px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface); resize: vertical;
  -webkit-appearance: none; appearance: none;
}
.cb-campo input:focus, .cb-campo textarea:focus { outline: none; border-color: var(--sea); }

/* Campo trampa: fuera de la vista pero alcanzable por un robot que rellena todo.
   No se usa `display:none` porque algunos lo detectan. */
.cb-trampa {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.cb-atras { margin: 4px 0 0; }
.cb-btn-atras {
  border: 0; background: none; color: var(--ink-3);
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer; padding: 12px 4px; min-height: 44px;
}
.cb-btn-atras:hover { color: var(--sea); }

.cb-pie-nota { font-size: 13px; color: var(--ink-3); margin: 2px 0 0; text-align: center; }

/* Rejilla de restaurantes de la portada */
.cb-locales { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cb-local {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 108px; padding: 14px 12px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); text-decoration: none;
  transition: border-color .15s, transform .1s, box-shadow .15s;
}
.cb-local:hover { border-color: var(--sea); box-shadow: var(--sombra); }
.cb-local:active { transform: translateY(1px); }
.cb-local img { max-width: 100%; max-height: 46px; object-fit: contain; }
.cb-local span {
  font-size: 12.5px; font-weight: 700; color: var(--ink-2);
  text-align: center; line-height: 1.25;
}

/* ── Movimiento ────────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media (min-width: 560px) {
  .cb-titulo { font-size: 30px; }
  .cb-app { padding-top: calc(12px + env(safe-area-inset-top)); }
}