/* ============================================================
   Páginas interiores · Mi Casa Colibrí
   Componentes sobre el design system de landing.css (tokens
   OKLCH, tipografías, focus, modo oscuro). Sustituye a Bootstrap
   en checkout, gestión de reserva, reseñas, legales y errores.
   ============================================================ */

/* ---- layout ---- */
.pub-main{padding-top:clamp(24px,4vw,44px)}
.pub-narrow{max-width:680px;margin:0 auto}
.pub-center{text-align:center}

/* ---- tipografía ---- */
.pub-h1{font:600 clamp(26px,4vw,36px)/1.12 'Cormorant Garamond',serif;color:var(--ink);margin:0 0 10px}
.pub-h2{font:600 19px/1.25 'Cormorant Garamond',serif;color:var(--ink);margin:0 0 10px}
.pub-lead{font:400 17px/1.65 'Hanken Grotesk';color:var(--ink);margin:0 0 8px}
.pub-text{font:400 15px/1.7 'Hanken Grotesk';color:var(--ink)}
.pub-text p{margin:0 0 12px}
.pub-muted{color:var(--muted)}
.pub-small{font-size:13px}
/* nota de correo: dos frases, dos renglones, como un solo bloque */
.pub-note{margin:0 0 6px}

/* ---- referencia de reserva destacada (gracias / detalle) ---- */
.pub-ref{display:inline-flex;flex-direction:column;align-items:center;gap:7px;margin:24px auto 0;padding:14px clamp(22px,5vw,34px);border-radius:16px;border:1px dashed color-mix(in oklab,var(--teal-text) 55%,var(--line));background:color-mix(in oklab,var(--teal-text) 10%,var(--surface))}
.pub-ref-label{font:600 11px/1 'Hanken Grotesk';letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
.pub-ref-code{font:700 clamp(21px,3.6vw,28px)/1.15 'Hanken Grotesk';letter-spacing:0.09em;color:var(--teal-text)}
.pub-ref-code:hover{text-decoration:underline}

/* ---- alertas ---- */
.pub-alert{padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font:500 14px/1.55 'Hanken Grotesk';color:var(--ink);margin:0 0 16px}
.pub-alert.is-ok{border-color:color-mix(in oklab,var(--ok) 45%,transparent);background:color-mix(in oklab,var(--ok) 10%,var(--surface))}
.pub-alert.is-warn{border-color:color-mix(in oklab,var(--warn) 55%,transparent);background:color-mix(in oklab,var(--warn) 12%,var(--surface))}
.pub-alert.is-err{border-color:color-mix(in oklab,var(--err) 45%,transparent);background:color-mix(in oklab,var(--err) 10%,var(--surface))}

/* ---- badges de estado ---- */
.pub-badge{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font:600 12px/1 'Hanken Grotesk';letter-spacing:0.02em;border:1px solid var(--line);background:var(--surface);color:var(--muted)}
.pub-badge.is-ok{border-color:color-mix(in oklab,var(--ok) 45%,transparent);background:color-mix(in oklab,var(--ok) 12%,var(--surface));color:color-mix(in oklab,var(--ok) 80%,var(--ink))}
.pub-badge.is-warn{border-color:color-mix(in oklab,var(--warn) 55%,transparent);background:color-mix(in oklab,var(--warn) 14%,var(--surface));color:color-mix(in oklab,var(--warn) 60%,var(--ink))}
.pub-badge.is-err{border-color:color-mix(in oklab,var(--err) 45%,transparent);background:color-mix(in oklab,var(--err) 12%,var(--surface));color:color-mix(in oklab,var(--err) 75%,var(--ink))}

/* ---- tabla clave→valor (detalle de reserva) ---- */
.pub-tablewrap{overflow-x:auto;margin:0 0 18px}
.pub-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.pub-table th,.pub-table td{padding:11px 16px;text-align:left;font:500 14px/1.4 'Hanken Grotesk';color:var(--ink)}
.pub-table th{font:600 11px/1.5 'Hanken Grotesk';letter-spacing:0.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap;width:1%}
.pub-table tr + tr th,.pub-table tr + tr td{border-top:1px solid var(--line)}

/* ---- card ---- */
.pub-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(16px,3vw,24px)}

/* ---- botones ---- */
.pub-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 22px;border-radius:12px;font:600 14px/1 'Hanken Grotesk';letter-spacing:0.02em;cursor:pointer;min-height:44px;text-align:center}
.pub-btn-outline{border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.pub-btn-outline:hover{border-color:var(--teal);color:var(--teal)}
.pub-btn-danger{border:1px solid color-mix(in oklab,var(--err) 55%,transparent);background:transparent;color:var(--err)}
.pub-btn-danger:hover{background:color-mix(in oklab,var(--err) 10%,transparent)}
.pub-btn-block{width:100%}
.pub-link{display:inline-flex;align-items:center;gap:6px;font:600 14px/1 'Hanken Grotesk';color:var(--teal-text)}
.pub-link:hover{color:var(--teal-deep)}
[data-theme="dark"] .pub-link:hover{color:var(--ink)}

/* ---- botones de pago (Stripe / PayPal con logos) ---- */
.pub-pay-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:14px 0 6px}
@media(min-width:480px){.pub-pay-grid{grid-template-columns:1fr 1fr}}
.pub-pay{border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.pub-pay:hover{border-color:var(--teal);background:color-mix(in oklab,var(--teal) 7%,var(--surface))}
.pub-trust{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;font:500 12px/1.4 'Hanken Grotesk';color:var(--muted)}

/* ---- formularios (reutiliza .inp y .fld-label de landing.css) ---- */
.pub-field{margin:0 0 14px}
textarea.inp{line-height:1.5;resize:vertical}

/* ---- separadores / pie de página interior ---- */
.pub-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}