/* ============================================================================
   Gestionar reserva — flujo de autogestión (CORE, multi-marca).
   Diseño portado del mock de Parking Naranja, pero brand-neutral: el acento
   sale de variables (--gr-accent…) que cada marca puede sobreescribir; el
   header/footer los pone el CDN por company_id (no van aquí).
   Ver nws_contracts#13 (contrato storefront/manage/*).
   ============================================================================ */

/* ── Chrome de marca (header/footer del dominio) ─────────────────────────────
   Cuando esta pantalla se sirve bajo el layout del CORE, ese layout trae en su
   <style> global una regla de ELEMENTO desnuda `header{height:70px}` (pensada
   para su header dinámico #site-header). El header de marca (.new-header /
   .hp-header) NO declara height, así que esa regla lo APLASTA a 70px cuando su
   contenido real (barra superior + logo + nav) mide ~110px → "no se ve bien".

   El index de cada marca no sufre esto porque tiene su propio <!DOCTYPE> y no
   pasa por el layout del core. Aquí lo liberamos con un selector de clase (gana
   por especificidad a `header`). Sólo afecta a esta pantalla en modo chrome:
   las clases sólo existen aquí; el resto del sitio no carga este CSS.
   Al sumar una marca nueva con partials, añade su clase de header aquí. */
.new-header,
.hp-header {
   height: auto;
}

:root {
   --gr-accent:    #fe3a00;   /* acento de marca (default: naranja del core) */
   --gr-accent-2:  #ff8c00;
   --gr-accent-dk: #e04e00;
   --gr-ink:       #1a1a1a;
   --gr-muted:     #888;
   --gr-line:      #ececec;
   --gr-danger:    #e24b4a;
   --gr-ok:        #0f6e56;
   --gr-radius:    16px;
   --gr-font:      'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.gr-page { font-family: var(--gr-font); background: #f5f5f5; min-height: 60vh;
   padding: clamp(30px,5vw,60px) clamp(16px,4vw,20px) clamp(60px,8vw,90px); }
.gr-wrap { max-width: 860px; margin: 0 auto; }

.gr-breadcrumb { font-size: 14px; color: var(--gr-muted); margin-bottom: 24px; }
.gr-breadcrumb a { color: var(--gr-accent); text-decoration: none; }
.gr-breadcrumb a:hover { text-decoration: underline; }
.gr-breadcrumb span { margin: 0 6px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.gr-hero { text-align: center; margin-bottom: clamp(28px,5vw,44px); }
.gr-hero-icon { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 20px;
   background: linear-gradient(135deg, var(--gr-accent), var(--gr-accent-2));
   display: flex; align-items: center; justify-content: center;
   box-shadow: 0 10px 30px rgba(254,58,0,.28); }
.gr-hero-icon svg { width: 32px; height: 32px; fill: #fff; }
.gr-hero h1 { font-size: clamp(26px,4vw,38px); font-weight: 800; color: var(--gr-ink); margin: 0 0 12px; }
.gr-hero h1 span { color: var(--gr-accent); }
.gr-hero p { font-size: clamp(15px,1.8vw,17px); color: #666; margin: 0; line-height: 1.6; }

/* ── Card contenedora ─────────────────────────────────────────────────── */
.gr-card { background: #fff; border-radius: 20px; padding: clamp(24px,4vw,40px);
   box-shadow: 0 2px 16px rgba(0,0,0,.06); margin-bottom: 16px; }
.gr-form-title { font-size: 17px; font-weight: 700; color: var(--gr-ink); margin: 0 0 6px; }
.gr-form-sub   { font-size: 14px; color: var(--gr-muted); margin: 0 0 24px; }

/* ── Campos ───────────────────────────────────────────────────────────── */
.gr-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.gr-field label { display: block; font-size: 12px; font-weight: 600; color: #555;
   text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.gr-field input, .gr-field select, .gr-field textarea { width: 100%; padding: 12px 14px;
   border: 1.5px solid #e5e5e5; border-radius: 10px; font-family: var(--gr-font);
   font-size: 15px; color: var(--gr-ink); background: #fafafa; transition: all .2s; outline: none; }
.gr-field input:focus, .gr-field select:focus, .gr-field textarea:focus {
   border-color: var(--gr-accent); background: #fff; box-shadow: 0 0 0 3px rgba(254,58,0,.1); }
.gr-field input::placeholder { color: #bbb; }

/* ── Botones ──────────────────────────────────────────────────────────── */
.gr-btn { width: 100%; border: none; border-radius: 12px; padding: 14px 20px;
   font-family: var(--gr-font); font-size: 16px; font-weight: 700; cursor: pointer;
   display: flex; align-items: center; justify-content: center; gap: 10px;
   transition: all .25s; min-height: 50px; }
.gr-btn-primary { color: #fff; background: linear-gradient(135deg, var(--gr-accent), var(--gr-accent-2));
   box-shadow: 0 6px 20px rgba(254,58,0,.3); }
.gr-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(254,58,0,.4); }
.gr-btn-primary:disabled { opacity: .6; cursor: default; transform: none; }
.gr-btn svg { width: 20px; height: 20px; fill: currentColor; }
.gr-btn .spinner { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.4);
   border-top-color: #fff; border-radius: 50%; animation: gr-spin .7s linear infinite; }
@keyframes gr-spin { to { transform: rotate(360deg); } }
.is-hidden { display: none !important; }

/* ── Error inline ─────────────────────────────────────────────────────── */
.gr-error { display: none; background: #fff3f3; border: 1.5px solid #f09595; border-radius: 10px;
   padding: 12px 16px; font-size: 14px; color: #a32d2d; margin-top: 16px; align-items: center; gap: 10px; }
.gr-error.show { display: flex; }
.gr-error svg { width: 18px; height: 18px; fill: #a32d2d; flex-shrink: 0; }

/* ── Paso OTP ─────────────────────────────────────────────────────────── */
.gr-otp-dest { background: #eff7ff; border-left: 3px solid #185fa5; border-radius: 8px;
   padding: 12px 16px; font-size: 14px; color: #185fa5; margin-bottom: 20px; }
.gr-otp-dest b { color: #12477d; }
.gr-otp-input { letter-spacing: .5em; text-align: center; font-size: 22px !important;
   font-weight: 700; font-variant-numeric: tabular-nums; }
.gr-otp-meta { display: flex; justify-content: space-between; align-items: center;
   margin-top: 14px; font-size: 13px; color: var(--gr-muted); }
.gr-otp-resend { background: none; border: none; color: var(--gr-accent); font-weight: 600;
   font-family: var(--gr-font); font-size: 13px; cursor: pointer; padding: 0; }
.gr-otp-resend:disabled { color: #bbb; cursor: default; }

/* ── Resultado / ficha ────────────────────────────────────────────────── */
.gr-result-header { display: flex; align-items: center; justify-content: space-between;
   flex-wrap: wrap; gap: 12px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1.5px solid #f0f0f0; }
.gr-result-header h2 { font-size: 18px; font-weight: 700; color: var(--gr-ink); margin: 0; }
.gr-result-header h2 span { color: var(--gr-accent); }
.gr-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
   border-radius: 30px; font-size: 13px; font-weight: 700; }
.gr-badge.confirmada, .gr-badge.recogida, .gr-badge.esperando { background: #e1f5ee; color: var(--gr-ok); }
.gr-badge.cancelada, .gr-badge.anulada { background: #fcebeb; color: #a32d2d; }
.gr-badge.modificada, .gr-badge.devolucion { background: #e6f1fb; color: #185fa5; }
.gr-badge svg { width: 14px; height: 14px; fill: currentColor; }

.gr-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.gr-info-item .lbl { font-size: 11px; font-weight: 600; color: #aaa; text-transform: uppercase;
   letter-spacing: .06em; margin-bottom: 4px; }
.gr-info-item .val { font-size: 15px; font-weight: 600; color: var(--gr-ink); }
.gr-info-item .val.accent { color: var(--gr-accent); }
.gr-info-item.full { grid-column: 1 / -1; }

/* ── Acciones ─────────────────────────────────────────────────────────── */
.gr-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px;
   padding-top: 20px; border-top: 1.5px solid #f0f0f0; }
.gr-action-btn { display: flex; flex-direction: column; align-items: center; justify-content: center;
   gap: 7px; padding: 14px 8px; border: 1.5px solid #e5e5e5; border-radius: 12px; background: #fafafa;
   cursor: pointer; font-family: var(--gr-font); font-size: 12px; font-weight: 600; color: #444;
   transition: all .2s; text-align: center; line-height: 1.25; }
.gr-action-btn svg { width: 20px; height: 20px; fill: var(--gr-accent); flex-shrink: 0; }
.gr-action-btn:hover { border-color: var(--gr-accent); background: #fff8f5; color: var(--gr-accent);
   transform: translateY(-2px); box-shadow: 0 6px 18px rgba(254,58,0,.12); }
.gr-action-btn.danger svg { fill: var(--gr-danger); }
.gr-action-btn.danger:hover { border-color: var(--gr-danger); background: #fff3f3; color: var(--gr-danger);
   box-shadow: 0 6px 18px rgba(226,75,74,.12); }
.gr-action-btn:disabled { opacity: .4; cursor: default; transform: none; box-shadow: none;
   border-color: #e5e5e5; background: #fafafa; color: #444; }
.gr-action-btn:disabled svg { fill: #bbb; }

/* ── Panel editar ─────────────────────────────────────────────────────── */
.gr-panel { display: none; background: #f9f9f9; border-radius: 14px; padding: 20px;
   margin-top: 16px; border: 1.5px solid #ebebeb; }
.gr-panel.open { display: block; }
.gr-panel h3 { font-size: 15px; font-weight: 700; color: var(--gr-ink); margin: 0 0 16px;
   display: flex; align-items: center; gap: 8px; }
.gr-panel h3 svg { width: 18px; height: 18px; fill: var(--gr-accent); }
.gr-panel .group-label { font-size: 12px; font-weight: 600; color: #aaa; text-transform: uppercase;
   letter-spacing: .05em; margin: 0 0 10px; }
.gr-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.gr-panel-actions { display: flex; gap: 10px; margin-top: 4px; }
.gr-btn-save { background: var(--gr-accent); color: #fff; border: none; border-radius: 10px;
   padding: 11px 24px; font-family: var(--gr-font); font-size: 14px; font-weight: 700; cursor: pointer;
   transition: background .2s; display: flex; align-items: center; gap: 7px; }
.gr-btn-save svg { width: 16px; height: 16px; fill: #fff; }
.gr-btn-save:hover { background: var(--gr-accent-dk); }
.gr-btn-ghost { background: transparent; color: var(--gr-muted); border: 1.5px solid #ddd;
   border-radius: 10px; padding: 11px 18px; font-family: var(--gr-font); font-size: 14px; cursor: pointer;
   transition: all .2s; }
.gr-btn-ghost:hover { border-color: #aaa; color: #555; }

/* Aviso "solo hora de regreso" cuando can_edit_return_only */
.gr-note { display: flex; align-items: flex-start; gap: 9px; background: #fff8ec;
   border-left: 3px solid var(--gr-accent-2); border-radius: 8px; padding: 10px 14px;
   font-size: 13px; color: #8a5a00; margin-bottom: 14px; }
.gr-note svg { width: 16px; height: 16px; fill: var(--gr-accent-2); flex-shrink: 0; margin-top: 1px; }

/* ── Volver ───────────────────────────────────────────────────────────── */
.gr-btn-volver { display: inline-flex; align-items: center; gap: 8px; background: transparent;
   border: none; color: var(--gr-accent); font-family: var(--gr-font); font-size: 14px; font-weight: 600;
   cursor: pointer; padding: 0; margin-bottom: 20px; }
.gr-btn-volver svg { width: 18px; height: 18px; fill: var(--gr-accent); }
.gr-btn-volver:hover { text-decoration: underline; }

/* ── Modal genérico (cancelar / producto) ─────────────────────────────── */
.gr-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55);
   z-index: 9999; align-items: center; justify-content: center; padding: 20px; }
.gr-modal-overlay.open { display: flex; }
.gr-modal { background: #fff; border-radius: 20px; padding: 32px 28px; max-width: 400px; width: 100%;
   text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.2); animation: gr-modal-in .25s ease; }
.gr-modal.wide { max-width: 720px; text-align: left; }
@keyframes gr-modal-in { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.gr-modal-icon { width: 64px; height: 64px; background: #fcebeb; border-radius: 50%; display: flex;
   align-items: center; justify-content: center; margin: 0 auto 18px; }
.gr-modal-icon svg { width: 30px; height: 30px; fill: var(--gr-danger); }
.gr-modal h3 { font-size: 20px; font-weight: 700; color: var(--gr-ink); margin: 0 0 10px; }
.gr-modal p { font-size: 14px; color: #666; line-height: 1.6; margin: 0 0 24px; }
.gr-modal-btns { display: flex; gap: 10px; }
.gr-modal-btns button { flex: 1; padding: 12px; border-radius: 10px; font-family: var(--gr-font);
   font-size: 14px; font-weight: 700; cursor: pointer; border: none; transition: all .2s; }
.btn-modal-back { background: #f3f3f3; color: #555; }
.btn-modal-back:hover { background: #e8e8e8; }
.btn-modal-confirm { background: var(--gr-danger); color: #fff; }
.btn-modal-confirm:hover { background: #c73c3b; }

/* ── Modal de producto (grid de cards de disponibilidad real) ─────────── */
.gr-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
   margin-bottom: 6px; }
.gr-modal-head h3 { font-size: 18px; font-weight: 700; color: var(--gr-ink); margin: 0; }
.gr-modal-close { background: none; border: none; font-size: 22px; color: #aaa; cursor: pointer;
   line-height: 1; padding: 0; }
.gr-modal-sub { font-size: 13px; color: var(--gr-muted); margin: 0 0 18px; }
.gr-products { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-height: 56vh; overflow-y: auto;
   padding: 2px; }
.gr-product { border: 1.5px solid #e5e5e5; border-radius: 14px; padding: 16px; background: #fafafa;
   transition: all .2s; display: flex; flex-direction: column; gap: 8px; }
.gr-product:hover { border-color: var(--gr-accent); background: #fff8f5; }
.gr-product.current { border-color: var(--gr-ok); background: #f0faf6; }
.gr-product-company { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--gr-muted); }
.gr-product-name { font-size: 15px; font-weight: 700; color: var(--gr-ink); margin-top: 1px; }
.gr-product-type { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 600; color: var(--gr-accent-dk, var(--gr-accent)); background: rgba(0,0,0,.04); border-radius: 6px; padding: 2px 7px; margin-top: 2px; }
.gr-product-desc { font-size: 12px; color: var(--gr-muted); line-height: 1.35; margin-top: 4px;
   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gr-product-plazas { font-size: 12px; color: var(--gr-ok); font-weight: 600; margin-top: 4px; }
.gr-product-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.gr-product-price { font-size: 18px; font-weight: 800; color: var(--gr-accent); }
.gr-product-pick { border: none; border-radius: 9px; padding: 9px 16px; font-family: var(--gr-font);
   font-size: 13px; font-weight: 700; color: #fff; background: var(--gr-accent); cursor: pointer; }
.gr-product-pick:hover { background: var(--gr-accent-dk); }
.gr-product .current-tag { display: inline-block; font-size: 11px; font-weight: 700; color: var(--gr-ok);
   border: 1px solid var(--gr-ok); border-radius: 20px; padding: 3px 10px; }
.gr-products-empty, .gr-products-loading { grid-column: 1 / -1; text-align: center; color: var(--gr-muted);
   font-size: 14px; padding: 30px 0; }

/* ── Ayuda ────────────────────────────────────────────────────────────── */
.gr-ayuda { background: linear-gradient(135deg, #1a1a2e, #0f0f1a); border-radius: 16px; padding: 24px 28px;
   display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 4px; }
.gr-ayuda-text h3 { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.gr-ayuda-text p { font-size: 13px; color: rgba(255,255,255,.6); margin: 0; }
.gr-ayuda-links { display: flex; gap: 10px; flex-wrap: wrap; }
.gr-ayuda-link { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 30px;
   font-family: var(--gr-font); font-size: 13px; font-weight: 600; text-decoration: none; transition: all .2s; }
.gr-ayuda-link svg { width: 16px; height: 16px; fill: currentColor; }
.gr-ayuda-link.solid { background: var(--gr-accent); color: #fff; box-shadow: 0 4px 14px rgba(254,58,0,.3); }
.gr-ayuda-link.solid:hover { background: var(--gr-accent-dk); color: #fff; }
.gr-ayuda-link.ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.15); }
.gr-ayuda-link.ghost:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
   .gr-fields, .gr-info-grid, .gr-edit-grid, .gr-products { grid-template-columns: 1fr; }
   .gr-panel-actions, .gr-modal-btns { flex-direction: column; }
   .gr-ayuda { flex-direction: column; align-items: flex-start; }
}

/* ── Velo de carga a pantalla completa ─────────────────────────────────────
   Para las esperas que además repintan la pantalla (verificar código, cambiar
   producto, cancelar). Por encima de los modales (9999) porque puede dispararse
   desde dentro de uno. */
.gr-overlay {
   position: fixed; inset: 0; z-index: 10000;
   display: none; align-items: center; justify-content: center;
   background: rgba(255, 255, 255, .82);
   backdrop-filter: blur(2px);
}
.gr-overlay.open { display: flex; }

.gr-overlay-box { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.gr-overlay-spinner {
   width: 44px; height: 44px; border-radius: 50%;
   border: 3px solid rgba(0, 0, 0, .12);
   border-top-color: var(--gr-accent);
   animation: gr-spin .7s linear infinite;
}
@keyframes gr-spin { to { transform: rotate(360deg); } }

.gr-overlay-txt {
   font-family: var(--gr-font);
   font-size: 15px; font-weight: 600; color: var(--gr-ink);
}

/* Respeta a quien pide menos animación */
@media (prefers-reduced-motion: reduce) {
   .gr-overlay-spinner { animation-duration: 2s; }
}

/* ── Servicio contratado dentro del formulario ────────────────────────────── */
.gr-servicio-box {
   display: flex; align-items: center; justify-content: space-between; gap: 14px;
   flex-wrap: wrap;
   padding: 14px 16px; margin-bottom: 12px;
   border: 1px solid rgba(0, 0, 0, .10); border-radius: 12px;
   background: rgba(0, 0, 0, .015);
}
.gr-servicio-nom { font-family: var(--gr-font); font-weight: 700; font-size: 15px; color: var(--gr-ink); }
.gr-servicio-sub { font-family: var(--gr-font); font-size: 13px; color: var(--gr-muted); margin-top: 2px; }

/* Aviso fuerte (cambio de servicio = recrear la reserva) */
.gr-note.gr-note-warn {
   border-color: rgba(220, 130, 0, .35);
   background: rgba(255, 176, 32, .10);
}
.gr-note.gr-note-warn svg { fill: #b26a00; }

/* ── Resumen de precio ────────────────────────────────────────────────────── */
.gr-precio {
   margin: 4px 0 18px; padding: 14px 16px;
   border: 1px solid rgba(0, 0, 0, .10); border-radius: 12px;
   font-family: var(--gr-font);
}
.gr-precio-row {
   display: flex; align-items: baseline; justify-content: space-between;
   font-size: 14px; color: var(--gr-muted); padding: 3px 0;
}
.gr-precio-row.nuevo { color: var(--gr-ink); font-weight: 700; font-size: 18px; }
.gr-precio-delta { margin-top: 8px; font-size: 13px; font-weight: 600; }
.gr-precio-delta.sube  { color: var(--gr-danger); }
.gr-precio-delta.baja  { color: var(--gr-ok); }
.gr-precio-calc { margin-top: 6px; font-size: 13px; color: var(--gr-muted); }

/* Hint del máximo de pasajeros (réplica del alta) */
.gr-pax-hint {
   font-family: var(--gr-font); font-size: 12.5px; color: var(--gr-muted);
   background: rgba(0,0,0,.03); border-radius: 8px; padding: 7px 11px; margin-bottom: 10px;
}