/* L4F Arena — cara de cliente (ficha del campo, asistente y área privada).
 *
 * Todo lleva el prefijo .ar- porque common.css se carga DESPUÉS de los
 * estilos de página (viene del footer), así que cualquier clase genérica
 * acabaría pisada. Con el prefijo no hay colisión posible.
 *
 * Paleta: la del resto de la app — fondo oscuro, acento naranja L4F. El
 * turquesa se reserva para la identidad de alquiler, igual que las tarjetas
 * de "ALQUILER DE CAMPO" del calendario de Reservas (§35).
 */
.ar-wrap {
  --ar-bg: #0c0d14;
  --ar-panel: #14151f;
  --ar-panel-2: #1b1d29;
  --ar-line: #2a2e3f;
  --ar-text: #e8eaf2;
  --ar-dim: #9aa3b8;
  --ar-accent: #f0801a;
  --ar-accent-soft: rgba(240, 128, 26, .14);
  --ar-arena: #2dd4bf;
  --ar-arena-soft: rgba(45, 212, 191, .12);
  --ar-ok: #34d399;
  --ar-warn: #fbbf24;
  --ar-bad: #f87171;
  max-width: 960px;
  margin: 0 auto;
  padding: 1.2rem 1rem 4rem;
  color: var(--ar-text);
  font-size: 15px;
  line-height: 1.55;
}

.ar-wrap * { box-sizing: border-box; }

/* ── Cabecera ──────────────────────────────────────────────────────── */
.ar-hero {
  background: linear-gradient(140deg, #101827 0%, #14202e 55%, #10241f 100%);
  border: 1px solid var(--ar-line);
  border-radius: 18px;
  padding: 1.8rem 1.5rem;
  margin-bottom: 1.4rem;
  position: relative;
  overflow: hidden;
}
.ar-hero::after {
  content: "";
  position: absolute; inset: auto -60px -80px auto;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, var(--ar-arena-soft), transparent 70%);
  pointer-events: none;
}
.ar-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ar-arena);
  background: var(--ar-arena-soft); border: 1px solid rgba(45, 212, 191, .3);
  border-radius: 999px; padding: .3rem .75rem; margin-bottom: .8rem;
}
.ar-hero h1 { margin: 0 0 .5rem; font-size: 1.85rem; line-height: 1.15; color: #fff; text-wrap: balance; }
.ar-hero p { margin: .35rem 0; color: #c5ccdb; max-width: 62ch; }

/* ── Tarjetas ──────────────────────────────────────────────────────── */
.ar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: .9rem; }
.ar-card {
  background: var(--ar-panel); border: 1px solid var(--ar-line);
  border-radius: 14px; padding: 1.05rem 1.15rem;
}
.ar-card h3 {
  margin: 0 0 .55rem; font-size: .92rem; color: #fff;
  display: flex; align-items: center; gap: .5rem;
}
.ar-card h3 i { color: var(--ar-accent); width: 1.1em; text-align: center; }
.ar-card p, .ar-card li { color: #c2c9d8; font-size: .88rem; margin: .25rem 0; }
.ar-card ul { margin: .2rem 0 0; padding-left: 1.05rem; }
.ar-card strong { color: #fff; }

.ar-section { margin-top: 1.8rem; }
.ar-section > h2 {
  font-size: 1.15rem; color: #fff; margin: 0 0 .8rem;
  display: flex; align-items: center; gap: .55rem;
}
.ar-section > h2 i { color: var(--ar-accent); }

/* ── Avisos ────────────────────────────────────────────────────────── */
.ar-note {
  border-radius: 11px; padding: .85rem 1rem; margin: .9rem 0;
  font-size: .89rem; border-left: 4px solid var(--ar-warn);
  background: rgba(251, 191, 36, .09); color: #fde9b4;
}
.ar-note.ar-info { border-left-color: var(--ar-arena); background: var(--ar-arena-soft); color: #b5f2e8; }
.ar-note.ar-bad { border-left-color: var(--ar-bad); background: rgba(248, 113, 113, .1); color: #fecaca; }
.ar-note.ar-ok { border-left-color: var(--ar-ok); background: rgba(52, 211, 153, .1); color: #bbf7dc; }
.ar-note strong { color: inherit; filter: brightness(1.25); }

/* ── Botones ───────────────────────────────────────────────────────── */
.ar-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--ar-accent); color: #17100a; border: 1px solid transparent;
  border-radius: 10px; padding: .78rem 1.3rem; font-weight: 700; font-size: .95rem;
  cursor: pointer; text-decoration: none; transition: filter .15s, transform .1s;
  font-family: inherit;
}
.ar-btn:hover { filter: brightness(1.08); }
.ar-btn:active { transform: translateY(1px); }
.ar-btn:disabled { opacity: .45; cursor: not-allowed; }
.ar-btn.ar-ghost { background: transparent; color: var(--ar-text); border-color: var(--ar-line); }
.ar-btn.ar-ghost:hover { border-color: var(--ar-accent); color: var(--ar-accent); }
.ar-btn.ar-wa { background: #25d366; color: #062d16; }
.ar-btn.ar-block { width: 100%; }
.ar-btn:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }

/* ── Formularios ───────────────────────────────────────────────────── */
.ar-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .85rem; }
.ar-field > span { font-size: .78rem; font-weight: 700; color: var(--ar-dim); letter-spacing: .02em; }
.ar-input, .ar-wrap select.ar-input, .ar-wrap textarea.ar-input {
  background: #0a0b12; border: 1px solid var(--ar-line); border-radius: 9px;
  padding: .65rem .75rem; color: var(--ar-text); font-size: .95rem;
  width: 100%; font-family: inherit;
}
.ar-input:focus { outline: none; border-color: var(--ar-accent); }
.ar-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
@media (max-width: 560px) { .ar-row { grid-template-columns: 1fr; } }
.ar-check {
  display: flex; gap: .65rem; align-items: flex-start;
  background: var(--ar-panel-2); border: 1px solid var(--ar-line);
  border-radius: 10px; padding: .85rem 1rem; cursor: pointer; font-size: .88rem;
}
.ar-check input { margin-top: .2rem; accent-color: var(--ar-accent); flex: none; }

/* ── Pasos del asistente ───────────────────────────────────────────── */
.ar-steps { display: flex; gap: .35rem; margin-bottom: 1.3rem; flex-wrap: wrap; }
.ar-step {
  flex: 1 1 90px; min-width: 74px; text-align: center;
  font-size: .68rem; color: var(--ar-dim); padding-top: .45rem;
  border-top: 3px solid var(--ar-line); transition: color .2s, border-color .2s;
}
.ar-step.is-done { border-top-color: var(--ar-arena); color: var(--ar-arena); }
.ar-step.is-now { border-top-color: var(--ar-accent); color: var(--ar-accent); font-weight: 700; }

.ar-panel { background: var(--ar-panel); border: 1px solid var(--ar-line); border-radius: 16px; padding: 1.4rem; }
.ar-panel h2 { margin: 0 0 .35rem; font-size: 1.25rem; color: #fff; }
.ar-panel > p.ar-lead { margin: 0 0 1.1rem; color: var(--ar-dim); font-size: .9rem; }

.ar-stage { display: none; }
.ar-stage.is-active { display: block; }

.ar-nav { display: flex; gap: .7rem; margin-top: 1.4rem; }
.ar-nav .ar-btn { flex: 1; }

/* ── Calendario ────────────────────────────────────────────────────── */
.ar-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.ar-cal-head strong { font-size: 1rem; color: #fff; text-transform: capitalize; }
.ar-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.ar-cal-dow { text-align: center; font-size: .68rem; color: var(--ar-dim); font-weight: 700; padding-bottom: .3rem; text-transform: uppercase; }
.ar-day {
  aspect-ratio: 1; border: 1px solid var(--ar-line); border-radius: 9px;
  background: var(--ar-panel-2); color: var(--ar-text);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: .9rem; cursor: pointer; font-family: inherit; padding: 0;
}
.ar-day .ar-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ar-ok); }
.ar-day[data-estado="cerrado"], .ar-day[data-estado="pasado"], .ar-day[data-estado="completo"] {
  opacity: .34; cursor: not-allowed; background: transparent;
}
.ar-day[data-estado="completo"] .ar-dot { background: var(--ar-bad); }
.ar-day.is-sel { background: var(--ar-accent); color: #17100a; border-color: var(--ar-accent); font-weight: 800; }
.ar-day.is-sel .ar-dot { background: #17100a; }
.ar-day.is-empty { border: none; background: none; cursor: default; }

.ar-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .74rem; color: var(--ar-dim); margin-top: .7rem; }
.ar-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.ar-legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

/* ── Opciones (horas, duraciones, elecciones) ──────────────────────── */
.ar-opts { display: flex; flex-wrap: wrap; gap: .45rem; }
.ar-opt {
  background: var(--ar-panel-2); border: 1px solid var(--ar-line); color: var(--ar-text);
  border-radius: 9px; padding: .58rem .85rem; font-size: .9rem; cursor: pointer;
  font-family: inherit; font-variant-numeric: tabular-nums;
}
.ar-opt:hover { border-color: var(--ar-accent); }
.ar-opt.is-sel { background: var(--ar-accent); color: #17100a; border-color: var(--ar-accent); font-weight: 700; }
.ar-opt small { display: block; font-size: .72rem; opacity: .75; font-weight: 500; }
.ar-opt.is-sel small { opacity: .8; }

.ar-choices { display: grid; gap: .5rem; }
.ar-choice {
  display: flex; align-items: center; gap: .75rem; text-align: left;
  background: var(--ar-panel-2); border: 1px solid var(--ar-line); color: var(--ar-text);
  border-radius: 11px; padding: .85rem 1rem; cursor: pointer; font-family: inherit; font-size: .93rem;
}
.ar-choice:hover { border-color: var(--ar-accent); }
.ar-choice.is-sel { border-color: var(--ar-accent); background: var(--ar-accent-soft); }
.ar-choice i { color: var(--ar-accent); width: 1.2em; text-align: center; }

/* ── Resumen económico ─────────────────────────────────────────────── */
.ar-summary { background: var(--ar-panel-2); border: 1px solid var(--ar-line); border-radius: 12px; padding: 1rem 1.1rem; }
.ar-summary h4 { margin: 0 0 .7rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ar-dim); }
.ar-line { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; font-size: .9rem; }
.ar-line span:last-child { font-variant-numeric: tabular-nums; }
.ar-line.ar-muted { color: var(--ar-dim); }
.ar-line.ar-disc { color: var(--ar-ok); }
.ar-line.ar-total {
  border-top: 1px solid var(--ar-line); margin-top: .5rem; padding-top: .65rem;
  font-size: 1.12rem; font-weight: 800; color: #fff;
}
.ar-strike { text-decoration: line-through; opacity: .5; margin-right: .4rem; }

.ar-badge-disc {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(52, 211, 153, .13); border: 1px solid rgba(52, 211, 153, .35);
  color: var(--ar-ok); border-radius: 999px; padding: .3rem .75rem;
  font-size: .76rem; font-weight: 700;
}

/* ── Tabla de tarifas ──────────────────────────────────────────────── */
.ar-table-wrap { overflow-x: auto; }
.ar-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 320px; }
.ar-table th, .ar-table td { padding: .55rem .7rem; text-align: right; border-bottom: 1px solid var(--ar-line); }
.ar-table th:first-child, .ar-table td:first-child { text-align: left; }
.ar-table th { color: var(--ar-dim); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.ar-table td { font-variant-numeric: tabular-nums; }
.ar-table td.ar-final { color: var(--ar-ok); font-weight: 700; }

/* ── Fichas de reserva del cliente ─────────────────────────────────── */
.ar-book {
  background: var(--ar-panel); border: 1px solid var(--ar-line);
  border-left: 4px solid var(--ar-line);
  border-radius: 13px; padding: 1.05rem 1.15rem; margin-bottom: .8rem;
}
.ar-book[data-grupo="confirmadas"] { border-left-color: var(--ar-ok); }
.ar-book[data-grupo="pago"] { border-left-color: var(--ar-accent); }
.ar-book[data-grupo="nuevas"], .ar-book[data-grupo="revision"] { border-left-color: var(--ar-warn); }
.ar-book[data-grupo="respuesta"] { border-left-color: var(--ar-arena); }
.ar-book[data-grupo="canceladas"] { border-left-color: var(--ar-bad); opacity: .72; }
.ar-book-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.ar-book h3 { margin: 0; font-size: 1.02rem; color: #fff; text-transform: capitalize; }
.ar-book-meta { color: var(--ar-dim); font-size: .85rem; margin: .2rem 0 .7rem; font-variant-numeric: tabular-nums; }
.ar-book-ref { font-size: .72rem; color: var(--ar-dim); letter-spacing: .06em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ar-pill {
  font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .28rem .7rem;
  background: var(--ar-panel-2); border: 1px solid var(--ar-line); color: var(--ar-dim);
  white-space: nowrap;
}
.ar-pill[data-grupo="confirmadas"] { color: var(--ar-ok); border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.1); }
.ar-pill[data-grupo="pago"] { color: var(--ar-accent); border-color: rgba(240,128,26,.4); background: var(--ar-accent-soft); }
.ar-pill[data-grupo="nuevas"], .ar-pill[data-grupo="revision"] { color: var(--ar-warn); border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.1); }
.ar-pill[data-grupo="respuesta"] { color: var(--ar-arena); border-color: rgba(45,212,191,.4); background: var(--ar-arena-soft); }
.ar-pill[data-grupo="canceladas"] { color: var(--ar-bad); border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.1); }
.ar-book-acts { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .85rem; }
.ar-book-acts .ar-btn { padding: .55rem .95rem; font-size: .85rem; }

/* ── Datos bancarios ───────────────────────────────────────────────── */
.ar-bank { background: #0a0b12; border: 1px dashed var(--ar-accent); border-radius: 11px; padding: 1rem; margin: .8rem 0; }
.ar-bank-row { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .45rem 0; flex-wrap: wrap; }
.ar-bank-row .ar-k { font-size: .74rem; color: var(--ar-dim); text-transform: uppercase; letter-spacing: .06em; }
.ar-bank-row .ar-v { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; color: #fff; word-break: break-all; }
.ar-copy { background: none; border: 1px solid var(--ar-line); color: var(--ar-dim); border-radius: 7px; padding: .3rem .6rem; font-size: .75rem; cursor: pointer; font-family: inherit; flex: none; }
.ar-copy:hover { border-color: var(--ar-accent); color: var(--ar-accent); }

.ar-empty { text-align: center; color: var(--ar-dim); padding: 2.2rem 1rem; font-size: .92rem; }
.ar-tabs { display: flex; gap: .4rem; border-bottom: 1px solid var(--ar-line); margin-bottom: 1.1rem; overflow-x: auto; }
.ar-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--ar-dim); padding: .6rem .9rem; font-size: .9rem; cursor: pointer; font-family: inherit; white-space: nowrap; }
.ar-tab.is-sel { color: var(--ar-accent); border-bottom-color: var(--ar-accent); font-weight: 700; }

.ar-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #11131c; border: 1px solid var(--ar-line); color: var(--ar-text);
  padding: .75rem 1.15rem; border-radius: 10px; font-size: .9rem; z-index: 9999;
  box-shadow: 0 12px 34px rgba(0,0,0,.55); max-width: 90vw;
}
.ar-toast.is-bad { border-color: var(--ar-bad); color: #fecaca; }

@media (prefers-reduced-motion: reduce) {
  .ar-wrap *, .ar-wrap *::before, .ar-wrap *::after { transition: none !important; animation: none !important; }
}

/* ── Normas de uso y convivencia ───────────────────────────────────── */
.ar-normas {
  background: var(--ar-panel-2); border: 1px solid var(--ar-line);
  border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.ar-normas-tit { font-size: 1.05rem; margin: 0 0 .4rem; display: flex; align-items: center; gap: .5rem; }
.ar-normas-tit i { color: var(--ar-accent); }
.ar-normas-intro { font-size: .88rem; color: var(--ar-dim); margin: 0 0 .8rem; }
.ar-norma { padding: .65rem 0; border-top: 1px solid var(--ar-line); }
.ar-norma h4 { font-size: .92rem; margin: 0 0 .3rem; }
.ar-norma p { font-size: .86rem; margin: 0 0 .35rem; line-height: 1.5; color: var(--ar-text); }
.ar-norma p:last-child { margin-bottom: 0; }