/* ═══════════════════════════════════════════════════════════════════
   TURISTECH 2.0 — DESIGN SYSTEM · FASE 1 (solo presentación)
   Componentes reutilizables para Home, Turista, Guía y Admin.
   Usa ÚNICAMENTE las variables de css/premium.css (--tt-*):
   claro por defecto · oscuro con html[data-theme="dark"].
   No define IDs, eventos ni lógica. Se carga después de premium.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0. Tokens semánticos compartidos (estado y foco) ─────────────── */
:root {
  --tt-ok:      #0a9488;  --tt-ok-bg:   rgba(15,184,169,.14);
  --tt-warn:    #a35f00;  --tt-warn-bg: rgba(245,166,35,.16);
  --tt-danger:  #c62f31;  --tt-danger-bg: rgba(255,77,79,.12);
  --tt-info:    #0b5fc0;  --tt-info-bg: rgba(11,95,192,.11);
  --tt-focus:   0 0 0 3px color-mix(in srgb, var(--tt-caribbean) 32%, transparent);
  --tt-panel-bg: var(--tt-bg-alt);
  --tt-hover:   color-mix(in srgb, var(--tt-caribbean) 7%, transparent);
}
html[data-theme="dark"] {
  --tt-ok: #22e0c4; --tt-ok-bg: rgba(34,224,196,.14);
  --tt-warn: #ffc457; --tt-warn-bg: rgba(255,196,87,.14);
  --tt-danger: #ff8a8c; --tt-danger-bg: rgba(255,77,79,.16);
  --tt-info: #7cc4ff; --tt-info-bg: rgba(124,196,255,.14);
  --tt-panel-bg: #061733;
}

/* ── 1. Las mismas variables llegan a paneles y modales ─────────────
   Los tokens heredados (--card-bg, --text, --border…) se re‑mapean a
   los tokens --tt-* en toda superficie de aplicación, de modo que
   dashboards, admin y modales obedezcan el tema claro/oscuro. */
:is(.modal-overlay, .admin-overlay, .user-dashboard-overlay, .rc-detail-modal-overlay, #chatWindow, .notif-panel, .gtoast-wrap, #toastContainer) {
  --deep:    var(--tt-panel-bg);
  --mid:     var(--tt-bg-alt);
  --text:    var(--tt-ink);
  --muted:   var(--tt-ink-2);
  --card-bg: var(--tt-surface);
  --glass:   color-mix(in srgb, var(--tt-ink) 4%, transparent);
  --glass2:  color-mix(in srgb, var(--tt-ink) 8%, transparent);
  --border:  var(--tt-line);
  --teal:    var(--tt-accent);
  --ocean:   var(--tt-ocean);
  --shadow-sm: var(--tt-sh-sm); --shadow-md: var(--tt-sh-md); --shadow-lg: var(--tt-sh-lg);
  font-family: var(--tt-font-ui);
  color: var(--tt-ink);
}
html[data-theme="dark"] :is(.modal-overlay, .admin-overlay, .user-dashboard-overlay, .rc-detail-modal-overlay) { --ocean: #4d9bff; }

/* ── 2. Botones (primario · secundario · outline · peligro) ───────── */
.btn, .btn-card, .btn-reservar, .btn-explore, .rc-btn, .pm-pay-btn, .admin-tab-btn, .pd-action-btn {
  font-family: var(--tt-font-ui); font-weight: 700; letter-spacing: -.005em;
  transition: transform .25s var(--tt-ease), box-shadow .25s var(--tt-ease), background-color .2s, border-color .2s, color .2s;
}
.btn-primary, .btn-card, .btn-reservar, .btn-explore, .pm-pay-btn, .pd-action-btn.primary {
  background: linear-gradient(135deg, var(--tt-caribbean), var(--tt-ocean)) !important; color: #fff !important; border: 0 !important;
  box-shadow: var(--tt-sh-glow);
}
.btn-secondary, .rc-btn-detail, .btn-ver-detalle-user, .pd-action-btn {
  background: var(--tt-surface-2); color: var(--tt-ink); border: 1px solid var(--tt-line);
}
.btn-secondary:hover, .rc-btn-detail:hover, .btn-ver-detalle-user:hover, .pd-action-btn:hover { background: color-mix(in srgb, var(--tt-caribbean) 12%, var(--tt-surface-2)); border-color: var(--tt-caribbean); color: var(--tt-ink); }
.btn-outline, .btn-ghost { background: transparent; color: var(--tt-ink); border: 1.5px solid var(--tt-line); }
.btn-outline:hover, .btn-ghost:hover { background: var(--tt-hover); border-color: var(--tt-caribbean); color: var(--tt-accent-ink); }
.btn-danger, .rc-btn-cancel, .pd-action-btn.danger, .btn-cancel-res {
  background: var(--tt-danger-bg) !important; color: var(--tt-danger) !important; border: 1px solid color-mix(in srgb, var(--tt-danger) 35%, transparent) !important; box-shadow: none;
}
.btn-danger:hover, .rc-btn-cancel:hover, .pd-action-btn.danger:hover { background: var(--tt-danger) !important; color: #fff !important; }
.rc-btn-confirm, .rc-btn-attend, .btn-ver-qr { background: var(--tt-ok-bg); color: var(--tt-ok); border: 1px solid color-mix(in srgb, var(--tt-ok) 35%, transparent); }
:is(.btn, button, a, [role="button"], .admin-nav-item, .section-tab):focus-visible { outline: none; box-shadow: var(--tt-focus); }

/* ── 3. Inputs · Textareas · Selects · DatePicker ─────────────────── */
:is(.form-input, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select) {
  font-family: var(--tt-font-ui);
}
:is(.modal-overlay, .admin-overlay, .user-dashboard-overlay, .rc-detail-modal-overlay, #publicContent, .tt-page) :is(.form-input, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), textarea, select) {
  background-color: var(--tt-surface); color: var(--tt-ink); border: 1.5px solid var(--tt-line); border-radius: var(--tt-r-input);
  min-height: 54px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
:is(.modal-overlay, .admin-overlay, .user-dashboard-overlay, #publicContent, .tt-page) :is(.form-input, input, textarea, select):hover:not(:disabled):not(:focus) { border-color: color-mix(in srgb, var(--tt-ink) 24%, transparent); }
:is(.modal-overlay, .admin-overlay, .user-dashboard-overlay, #publicContent, .tt-page) :is(.form-input, input, textarea, select):focus { border-color: var(--tt-caribbean); box-shadow: var(--tt-focus); outline: none; background-color: var(--tt-surface); }
:is(.form-input, input, textarea, select)::placeholder { color: color-mix(in srgb, var(--tt-ink-2) 70%, transparent); }
textarea.form-input, textarea { resize: vertical; line-height: 1.55; }
.form-label, label.form-label { color: var(--tt-ink-2); font-weight: 600; font-size: .78rem; letter-spacing: .01em; }
select option { background: var(--tt-surface); color: var(--tt-ink); }
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"] { color-scheme: light; min-height: 44px; }
html[data-theme="dark"] :is(input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"]) { color-scheme: dark; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--tt-caribbean-600); }

/* ── 4. Cards ──────────────────────────────────────────────────────── */
:is(.admin-overlay, .user-dashboard-overlay) :is(.kpi-card, .pd-kpi, .rsm-card, .metric-card, .stat-card, .prov-stat, .modal-section-card, .reserva-card, .res-card, .liq-card),
.tt-card {
  background: var(--tt-surface) !important; border: 1px solid var(--tt-line) !important; border-radius: var(--tt-r-lg) !important;
  box-shadow: var(--tt-sh-sm); color: var(--tt-ink);
  transition: transform .3s var(--tt-ease), box-shadow .3s var(--tt-ease), border-color .25s;
}
:is(.admin-overlay, .user-dashboard-overlay) :is(.kpi-card, .pd-kpi, .rsm-card, .metric-card, .stat-card):hover, .tt-card:hover { transform: translateY(-2px); box-shadow: var(--tt-sh-md); border-color: color-mix(in srgb, var(--tt-caribbean) 40%, transparent) !important; }
:is(.kpi-val, .pd-kpi-value, .metric-value) { color: var(--tt-ink); font-family: var(--tt-font-ui); font-weight: 800; letter-spacing: -.02em; }
:is(.kpi-label, .pd-kpi-label, .metric-label, .kpi-sub) { color: var(--tt-ink-2); }

/* ── 5. Badges de estado ──────────────────────────────────────────── */
.status-badge,
.user-status-badge,
.asistencia-badge,
.reservas-count-badge,
.role-badge,
.dashboard-header-badge,
.tt-badge {
  display: inline-flex; align-items: center; gap: 5px; border-radius: var(--tt-r-pill); font-family: var(--tt-font-ui); font-weight: 700; letter-spacing: .02em;
}
.status-active, .user-status-active, .asistencia-badge.presente, .tt-badge--ok, .status-confirmada, .status-usada { background: var(--tt-ok-bg) !important; color: var(--tt-ok) !important; border-color: color-mix(in srgb, var(--tt-ok) 30%, transparent) !important; }
.status-pending, .user-status-review, .tt-badge--warn, .status-pendiente { background: var(--tt-warn-bg) !important; color: var(--tt-warn) !important; border-color: color-mix(in srgb, var(--tt-warn) 30%, transparent) !important; }
.status-inactive, .user-status-suspended, .user-status-rejected, .user-status-deleted, .asistencia-badge.noShow, .tt-badge--danger, .status-cancelada { background: var(--tt-danger-bg) !important; color: var(--tt-danger) !important; border-color: color-mix(in srgb, var(--tt-danger) 30%, transparent) !important; }
.tt-badge--info { background: var(--tt-info-bg); color: var(--tt-info); }
.tt-badge { padding: 3px 10px; font-size: .7rem; }

/* ── 6. Tablas ─────────────────────────────────────────────────────── */
.admin-table-wrap { border: 1px solid var(--tt-line); border-radius: var(--tt-r-md); background: var(--tt-surface); box-shadow: var(--tt-sh-sm); }
.admin-table { font-family: var(--tt-font-ui); }
.admin-table th { color: var(--tt-ink-2); background: var(--tt-surface-2); border-bottom: 1px solid var(--tt-line); position: sticky; top: 0; z-index: 1; }
.admin-table td { color: var(--tt-ink); border-bottom: 1px solid var(--tt-line); }
.admin-table tbody tr:hover td, .admin-table tr:hover td { background: var(--tt-hover); }
.admin-table tbody tr:last-child td { border-bottom: 0; }

/* ── 7. Modales ────────────────────────────────────────────────────── */
.modal-overlay, .rc-detail-modal-overlay { background: rgba(4,18,43,.58) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal, .rc-detail-modal, .user-dashboard-panel { background: var(--tt-surface) !important; color: var(--tt-ink); border: 1px solid var(--tt-line) !important; border-radius: var(--tt-r-lg) !important; box-shadow: var(--tt-sh-lg) !important; }
.modal-title, .modal-name { color: var(--tt-ink); }
.modal-close, .pm-close-btn { background: var(--tt-surface-2) !important; color: var(--tt-ink-2) !important; border: 1px solid var(--tt-line) !important; }
.modal-close:hover, .pm-close-btn:hover { color: var(--tt-accent-ink) !important; border-color: var(--tt-caribbean) !important; background: var(--tt-hover) !important; }
.user-dashboard-overlay { background: var(--tt-panel-bg) !important; }
.admin-overlay { background: var(--tt-panel-bg) !important; }
.admin-main { background: var(--tt-panel-bg); }

/* ── 8. Sidebar ────────────────────────────────────────────────────── */
.admin-sidebar { background: var(--tt-surface) !important; border-right: 1px solid var(--tt-line) !important; box-shadow: var(--tt-sh-sm); }
.admin-nav-item { color: var(--tt-ink-2); font-family: var(--tt-font-ui); font-weight: 600; border: 1px solid transparent; transition: background .2s, color .2s, transform .2s var(--tt-ease); }
.admin-nav-item:hover { background: var(--tt-hover); color: var(--tt-ink); transform: translateX(2px); }
.admin-nav-item.active { background: var(--tt-ok-bg) !important; color: var(--tt-accent-ink) !important; border-color: color-mix(in srgb, var(--tt-caribbean) 32%, transparent) !important; }
.admin-topbar { border-color: var(--tt-line); color: var(--tt-ink); }
.admin-tab-btn { background: var(--tt-surface); border: 1px solid var(--tt-line); color: var(--tt-ink-2); }
.admin-tab-btn:hover { border-color: var(--tt-caribbean); color: var(--tt-ink); }
.admin-tab-btn.active { background: linear-gradient(135deg, var(--tt-caribbean), var(--tt-ocean)); color: #fff; border-color: transparent; }
@media (max-width: 760px) {
  .admin-overlay { flex-direction: column; }
  .admin-sidebar { width: 100% !important; flex-direction: row; overflow-x: auto; padding: 8px; border-right: 0 !important; border-bottom: 1px solid var(--tt-line) !important; gap: 4px; }
  .admin-sidebar .admin-logo { display: none; }
  .admin-nav-item { white-space: nowrap; flex: 0 0 auto; }
  .admin-main { padding: 20px 16px !important; }
}

/* ── 9. Navbar ─────────────────────────────────────────────────────── */
.udp-topbar, .pd-topbar { background: color-mix(in srgb, var(--tt-surface) 92%, transparent); border-bottom: 1px solid var(--tt-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--tt-ink); }
.udp-topbar-title, .pd-title-wrap h2, .pd-title-wrap h3 { color: var(--tt-ink); font-family: var(--tt-font-ui); font-weight: 800; letter-spacing: -.02em; }
.udp-topbar-sub { color: var(--tt-ink-2); }
.udp-section-label, .dashboard-header-text h3 { color: var(--tt-ink); }
.dashboard-header { border-color: var(--tt-line); }

/* ── 10. Breadcrumbs ──────────────────────────────────────────────── */
.tt-breadcrumbs, nav[aria-label="breadcrumb"] ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0 0 14px; font: 600 .8rem var(--tt-font-ui); color: var(--tt-ink-2); }
.tt-breadcrumbs a { color: var(--tt-ink-2); text-decoration: none; transition: color .2s; }
.tt-breadcrumbs a:hover { color: var(--tt-accent-ink); }
.tt-breadcrumbs > * + *::before { content: '/'; margin-right: 6px; opacity: .45; }
.tt-breadcrumbs [aria-current="page"] { color: var(--tt-ink); }

/* ── 11. Paginación ───────────────────────────────────────────────── */
.reservas-pagination, .tt-pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--tt-line); color: var(--tt-ink-2); font: 600 .8rem var(--tt-font-ui); }
.reservas-pagination :is(button, .btn), .tt-pagination :is(button, a) {
  min-width: 36px; height: 36px; padding: 0 12px; border-radius: var(--tt-r-pill); background: var(--tt-surface); border: 1px solid var(--tt-line); color: var(--tt-ink); font: 700 .8rem var(--tt-font-ui); transition: all .2s;
}
.reservas-pagination :is(button, .btn):hover:not(:disabled), .tt-pagination :is(button, a):hover { border-color: var(--tt-caribbean); color: var(--tt-accent-ink); background: var(--tt-hover); }
.reservas-pagination :is(button, .btn):disabled { opacity: .45; cursor: not-allowed; }
.tt-pagination .is-active, .reservas-pagination .active { background: linear-gradient(135deg, var(--tt-caribbean), var(--tt-ocean)); color: #fff; border-color: transparent; }

/* ── 12. Skeleton de carga ────────────────────────────────────────── */
.skeleton-line, .tt-skeleton {
  border-radius: 8px; background: linear-gradient(90deg, var(--tt-surface-2) 25%, color-mix(in srgb, var(--tt-ink) 9%, var(--tt-surface-2)) 50%, var(--tt-surface-2) 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite;
}
.res-skeleton-card, .tt-skeleton-card { background: var(--tt-surface); border: 1px solid var(--tt-line); border-radius: var(--tt-r-md); }
@media (prefers-reduced-motion: reduce) { .skeleton-line, .tt-skeleton { animation: none; } }

/* ── 13. Tooltips ─────────────────────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); z-index: 60; pointer-events: none;
  padding: 6px 10px; border-radius: var(--tt-r-sm); background: var(--tt-ocean-900); color: #fff; font: 600 .72rem/1.3 var(--tt-font-ui); white-space: nowrap; max-width: 260px;
  opacity: 0; box-shadow: var(--tt-sh-md); transition: opacity .18s, transform .18s var(--tt-ease);
}
[data-tooltip]:is(:hover, :focus-visible)::after { opacity: 1; transform: translate(-50%, 0); }

/* ── 14. Alertas y toasts ─────────────────────────────────────────── */
.tt-alert, .success-toast, .gtoast {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--tt-r-md); border: 1px solid var(--tt-line); background: var(--tt-surface); color: var(--tt-ink);
  font-family: var(--tt-font-ui); box-shadow: var(--tt-sh-md);
}
.gtoast.success, .tt-alert--ok, .success-toast { background: var(--tt-ok-bg); color: var(--tt-ok); border-color: color-mix(in srgb, var(--tt-ok) 35%, transparent); }
.gtoast.error, .tt-alert--danger { background: var(--tt-danger-bg); color: var(--tt-danger); border-color: color-mix(in srgb, var(--tt-danger) 35%, transparent); }
.gtoast.info, .tt-alert--info { background: var(--tt-info-bg); color: var(--tt-info); border-color: color-mix(in srgb, var(--tt-info) 35%, transparent); }
.gtoast.warning, .tt-alert--warn { background: var(--tt-warn-bg); color: var(--tt-warn); border-color: color-mix(in srgb, var(--tt-warn) 35%, transparent); }
.gtoast, .success-toast.show { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.empty-state, .empty-state-pro { color: var(--tt-ink-2); }

/* ── 15. Tema: transición suave y legibilidad general ─────────────── */
.admin-overlay, .user-dashboard-overlay, .modal, .admin-sidebar, .admin-table-wrap, .kpi-card, .pd-kpi { transition: background-color .35s var(--tt-ease), color .35s var(--tt-ease), border-color .35s var(--tt-ease); }

/* ── 16. Barras de desplazamiento discretas en paneles y tablas ──── */
.admin-sidebar, .admin-table-wrap, .admin-tabs-bar, .section-tabs { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--tt-ink) 28%, transparent) transparent; }
.admin-sidebar::-webkit-scrollbar, .admin-table-wrap::-webkit-scrollbar { height: 6px; width: 6px; }
.admin-sidebar::-webkit-scrollbar-thumb, .admin-table-wrap::-webkit-scrollbar-thumb { height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--tt-ink) 28%, transparent); }
.admin-sidebar::-webkit-scrollbar-track, .admin-table-wrap::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 760px) { .admin-sidebar { scrollbar-width: none; } .admin-sidebar::-webkit-scrollbar { display: none; } }