/* =====================================================================
   Resiapp · tema único (se carga el último en TODAS las pantallas:
   landing, alta, supergestor, panel del restaurante, web pública, cliente)
   Paleta del manual de marca: turquesa #0FC8B0 · azul noche #0B2239
   ===================================================================== */
:root {
  --ra-teal: #0FC8B0;
  --ra-teal-dark: #0A9C89;
  --ra-teal-soft: #e6faf7;
  --ra-navy: #0B2239;
  --ra-navy-2: #12304e;
  --ra-ink: #16283a;
  --ra-muted: #5d6b7a;
  --ra-line: #e3eaf0;
  --ra-bg: #f3f7f9;

  --bs-primary: #0FC8B0;
  --bs-primary-rgb: 15, 200, 176;
  --bs-link-color: #0A9C89;
  --bs-link-color-rgb: 10, 156, 137;
  --bs-link-hover-color: #077a6b;
  --bs-link-hover-color-rgb: 7, 122, 107;
  --bs-body-color: #16283a;
  --bs-border-color: #e3eaf0;
  --bs-border-radius: .7rem;
  --bs-border-radius-lg: 1rem;
  --bs-body-font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-focus-ring-color: rgba(15, 200, 176, .25);

  /* variables heredadas por la web pública del restaurante */
  --brand: #0FC8B0;
  --brand-dark: #0B2239;
  --cream: #f3f7f9;
}

body, body.public-body, body.client-body { font-family: var(--bs-body-font-family); background-color: var(--ra-bg); color: var(--ra-ink); }
h1, h2, h3, h4, h5, h6 { color: var(--ra-navy); letter-spacing: -.015em; font-weight: 800; }
.text-primary { color: var(--ra-teal-dark) !important; }
.bg-primary { background-color: var(--ra-teal) !important; color: var(--ra-navy) !important; }
.text-bg-primary { background-color: var(--ra-teal) !important; color: var(--ra-navy) !important; }
.border-primary { border-color: var(--ra-teal) !important; }
.btn { font-weight: 700; border-radius: 999px; }
.btn-sm { padding: .3rem .85rem; }

/* Botones */
.btn-primary {
  --bs-btn-color: #0B2239; --bs-btn-bg: #0FC8B0; --bs-btn-border-color: #0FC8B0;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0A9C89; --bs-btn-hover-border-color: #0A9C89;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #088a79; --bs-btn-active-border-color: #088a79;
  --bs-btn-focus-shadow-rgb: 15, 200, 176;
  --bs-btn-disabled-color: #0B2239; --bs-btn-disabled-bg: #0FC8B0; --bs-btn-disabled-border-color: #0FC8B0;
  background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color);
}
.btn-outline-primary {
  --bs-btn-color: #0A9C89; --bs-btn-border-color: #0FC8B0;
  --bs-btn-hover-color: #0B2239; --bs-btn-hover-bg: #0FC8B0; --bs-btn-hover-border-color: #0FC8B0;
  --bs-btn-active-color: #0B2239; --bs-btn-active-bg: #0FC8B0; --bs-btn-active-border-color: #0FC8B0;
  --bs-btn-disabled-color: #0A9C89; --bs-btn-disabled-border-color: #0FC8B0;
}
.btn-outline-secondary { --bs-btn-color: #44566a; --bs-btn-border-color: #cfdae3; --bs-btn-hover-bg: #0B2239; --bs-btn-hover-border-color: #0B2239; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #0B2239; --bs-btn-active-border-color: #0B2239; }
.btn-outline-dark { --bs-btn-color: #0B2239; --bs-btn-border-color: #0B2239; --bs-btn-hover-bg: #0B2239; --bs-btn-hover-border-color: #0B2239; }
.btn-dark { --bs-btn-bg: #0B2239; --bs-btn-border-color: #0B2239; --bs-btn-hover-bg: #12304e; --bs-btn-hover-border-color: #12304e; --bs-btn-active-bg: #12304e; }
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-color: #0B2239; }

/* Formularios */
.form-control, .form-select { border-radius: .7rem; border-color: #d5e0e8; }
.form-control:focus, .form-select:focus { border-color: var(--ra-teal); box-shadow: 0 0 0 .2rem rgba(15,200,176,.2); }
.form-check-input:checked { background-color: var(--ra-teal); border-color: var(--ra-teal); }
.form-check-input:focus { border-color: var(--ra-teal); box-shadow: 0 0 0 .2rem rgba(15,200,176,.2); }
.form-label { font-weight: 600; font-size: .9rem; color: var(--ra-navy); }
.input-group-text { background: #f3f7f9; border-color: #d5e0e8; }

/* Tarjetas, tablas, alertas */
.card { border-radius: 1rem; border-color: var(--ra-line); }
.card.shadow-sm, .shadow-sm { box-shadow: 0 6px 24px rgba(11,34,57,.07) !important; }
.table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(15,200,176,.06); }
.table > thead > tr > th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ra-muted); font-weight: 700; border-bottom-color: var(--ra-line); }
.alert { border-radius: .9rem; border: 0; }
.alert-info { background: var(--ra-teal-soft); color: #0b5d53; }
.alert-success { background: #e4f7ec; color: #17623a; }
.alert-warning { background: #fff4d6; color: #7a5a00; }
.badge { font-weight: 700; }
.nav-pills { --bs-nav-pills-link-active-bg: #0FC8B0; --bs-nav-pills-link-active-color: #0B2239; }
.nav-pills .nav-link { border-radius: 999px; font-weight: 600; color: var(--ra-navy); }
.nav-tabs .nav-link.active { color: var(--ra-navy); border-bottom-color: var(--ra-teal); font-weight: 700; }
.nav-tabs .nav-link { color: var(--ra-muted); }
.page-link { color: var(--ra-teal-dark); }
.page-item.active .page-link { background: var(--ra-teal); border-color: var(--ra-teal); color: var(--ra-navy); }
.progress-bar { background-color: var(--ra-teal); }
.accordion-button:not(.collapsed) { background: var(--ra-teal-soft); color: var(--ra-navy); }
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(15,200,176,.2); }
.dropdown-item:active { background: var(--ra-teal); color: var(--ra-navy); }

/* ---------- Paneles (restaurante y supergestor) ---------- */
.admin-sidebar { background: var(--ra-navy) !important; color: #b7c6d6; }
.sidebar-brand { padding: 1.1rem 1rem .9rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand img { height: 30px; width: auto; display: block; }
.sidebar-tenant { margin: .9rem .75rem .25rem; padding: .6rem .75rem; border-radius: .8rem; background: rgba(255,255,255,.06); color: #fff; font-weight: 700; font-size: .9rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; text-decoration: none; }
.sidebar-tenant small { color: #8fa5ba; font-weight: 500; display: block; font-size: .72rem; }
.sidebar-tenant i { color: var(--ra-teal); }
.sidebar-link { color: #b7c6d6; border-radius: .7rem; font-weight: 600; }
.sidebar-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.sidebar-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar-link.active { background: var(--ra-teal) !important; color: var(--ra-navy) !important; }
.sidebar-link.text-danger-emphasis { color: #ff9aa5 !important; }
.sidebar-pill { margin-left: .4rem; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; background: var(--ra-teal); color: var(--ra-navy); padding: .12rem .45rem; border-radius: 999px; font-weight: 800; vertical-align: middle; }
.admin-topbar { background: #fff; border-bottom: 1px solid var(--ra-line); }
.admin-topbar h5 { font-weight: 800; color: var(--ra-navy); }
.admin-body { padding: 1.5rem; }
.kpi-card { background: #fff; border-radius: 1.1rem; box-shadow: 0 6px 24px rgba(11,34,57,.07); border: 1px solid var(--ra-line); }
.kpi-card .kpi-value { color: var(--ra-navy); font-weight: 800; }
.status-badge-confirmed { background: #d9f6f1; color: #0b5d53; }
.status-badge-in_progress { background: #dbe9ff; color: #1b4a96; }

/* ---------- Web pública del restaurante y cliente ---------- */
.site-nav .navbar-brand { color: var(--ra-navy); font-weight: 800; }
.site-nav .nav-link { color: var(--ra-ink); font-weight: 600; }
.site-nav .nav-link:hover, .site-nav .nav-link.active { color: var(--ra-teal-dark); }
.site-hero, .site-cta { background: linear-gradient(135deg, #0B2239 0%, #0e3a4d 55%, #0A8473 100%); }
.site-hero.has-cover { background-color: var(--ra-navy); }
.site-hero .btn-light, .site-cta .btn-light { background: var(--ra-teal); border-color: var(--ra-teal); color: var(--ra-navy); }
.site-hero .btn-light:hover, .site-cta .btn-light:hover { background: #fff; border-color: #fff; color: var(--ra-navy); }
.section-kicker, .quick-tile i, .info-card h5 i { color: var(--ra-teal-dark); }
.quick-tile:hover { color: var(--ra-teal-dark); }
.section-title, .site-section h2 { color: var(--ra-navy); }
.site-section.alt { background: #fff; }
.dish-card { background: #fff; border: 1px solid var(--ra-line); }
.menu-index a { border-color: var(--ra-line); color: var(--ra-navy); font-weight: 600; }
.menu-index a:hover { background: var(--ra-teal); color: var(--ra-navy); }
.menu-cat-title { border-bottom-color: var(--ra-teal); }
.menu-price, .legal-page h2 { color: var(--ra-navy); }
.social-btn:hover { background: var(--ra-teal); color: var(--ra-navy); }
.hero { background: linear-gradient(135deg, #0B2239, #0A8473); }
.navbar.bg-dark { background: var(--ra-navy) !important; }
.client-nav-logo { height: 26px; width: auto; }
.public-footer-powered { display: inline-flex; align-items: center; gap: .4rem; color: #8fa5ba; font-size: .8rem; text-decoration: none; }
.public-footer-powered img { height: 14px; width: auto; opacity: .9; }
.public-footer-powered:hover { color: var(--ra-teal); }
footer.bg-dark { background: var(--ra-navy) !important; }
.ra-brand img { display: block; }
.ra-body { font-family: var(--bs-body-font-family); }
.text-bg-info, .bg-info { background-color: #7fe3d5 !important; color: var(--ra-navy) !important; }
.text-info { color: var(--ra-teal-dark) !important; }
.text-success { color: #17803f !important; }
.site-hero h1, .site-hero .site-title, .site-cta h2, .navbar-dark .navbar-brand, .bg-dark h1, .bg-dark h2, .bg-dark h3 { color: #fff !important; }

/* =====================================================================
   Paneles v2: menú agrupado, barra superior, dashboard, chips, accesos
   ===================================================================== */
.sidebar-group { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: #6f879e; font-weight: 800; padding: 1rem .9rem .3rem; }
.sidebar-nav { padding-bottom: 1.5rem; }
.admin-topbar { position: sticky; top: 0; z-index: 20; padding: .7rem 1.5rem; backdrop-filter: blur(6px); }
.topbar-user { display: flex; align-items: center; gap: .6rem; }
.topbar-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--ra-teal), #0A8473); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.topbar-who { display: flex; flex-direction: column; line-height: 1.1; font-size: .85rem; color: var(--ra-navy); }
.topbar-who small { color: var(--ra-muted); font-size: .72rem; }
.admin-body { max-width: 1280px; }

/* Cabecera de bienvenida */
.dash-hero { position: relative; overflow: hidden; border-radius: 1.4rem; padding: 1.6rem 1.8rem; color: #fff; background: linear-gradient(120deg, #0B2239 0%, #0e3a4d 55%, #0A8473 100%); box-shadow: 0 14px 36px rgba(11,34,57,.18); }
.dash-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(15,200,176,.45), transparent 65%); }
.dash-hero h2 { color: #fff; font-size: 1.55rem; margin: 0 0 .2rem; }
.dash-hero p { margin: 0; color: #bfe9e2; }
.dash-hero .btn { position: relative; z-index: 1; }
.dash-hero .btn-outline-light { --bs-btn-hover-color: #0B2239; --bs-btn-hover-bg: #fff; }

/* KPI con icono */
.kpi-card { position: relative; padding: 1.1rem 1.2rem !important; display: flex; gap: .9rem; align-items: center; transition: transform .15s, box-shadow .15s; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(11,34,57,.1); }
.kpi-icon { width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: none; }
.kpi-icon.teal { background: var(--ra-teal-soft); color: var(--ra-teal-dark); }
.kpi-icon.navy { background: #e4ecf4; color: var(--ra-navy-2); }
.kpi-icon.green { background: #e4f7ec; color: #17803f; }
.kpi-icon.amber { background: #fff1cc; color: #a77300; }
.kpi-icon.rose { background: #fde6e9; color: #b4233a; }
.kpi-label { font-size: .8rem; color: var(--ra-muted); font-weight: 600; line-height: 1.2; }
.kpi-card .kpi-value { font-size: 1.75rem; line-height: 1.1; }

/* Paneles/tarjetas con título */
.panel-card { background: #fff; border: 1px solid var(--ra-line); border-radius: 1.1rem; box-shadow: 0 6px 24px rgba(11,34,57,.06); overflow: hidden; }
.panel-card > .panel-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .95rem 1.2rem; border-bottom: 1px solid var(--ra-line); font-weight: 800; color: var(--ra-navy); }
.panel-card > .panel-head small { font-weight: 600; color: var(--ra-muted); }
.panel-card .card-header { background: #fff !important; font-weight: 800; color: var(--ra-navy); border-bottom: 1px solid var(--ra-line); padding: .95rem 1.2rem; }
.table > :not(caption) > * > * { padding: .8rem 1rem; }
.table-hover > tbody > tr:hover > * { background: rgba(15,200,176,.05); }

/* Chips de estado */
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.chip::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.chip-pending { background: #fff1cc; color: #8a6200; }
.chip-confirmed { background: #d9f6f1; color: #0b5d53; }
.chip-in_progress { background: #dbe9ff; color: #1b4a96; }
.chip-completed { background: #e6ebf0; color: #44566a; }
.chip-cancelled { background: #fde6e9; color: #b4233a; }
.chip-no_show { background: #0B2239; color: #fff; }
.status-badge-pending, .status-badge-confirmed, .status-badge-in_progress, .status-badge-completed, .status-badge-cancelled, .status-badge-no_show { border-radius: 999px; padding: .3rem .7rem; font-weight: 700; }
.status-badge-no_show { background: #0B2239; color: #fff; }

/* Acciones rápidas */
.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.quick-action { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; padding: .95rem 1rem; border-radius: 1rem; background: #fff; border: 1px solid var(--ra-line); text-decoration: none; color: var(--ra-navy); font-weight: 700; font-size: .9rem; transition: all .15s; }
.quick-action i { font-size: 1.35rem; color: var(--ra-teal-dark); }
.quick-action small { font-weight: 500; color: var(--ra-muted); font-size: .76rem; }
.quick-action:hover { border-color: var(--ra-teal); box-shadow: 0 10px 26px rgba(15,200,176,.18); transform: translateY(-2px); color: var(--ra-navy); }

/* Checklist de primeros pasos */
.steps-list { list-style: none; margin: 0; padding: .4rem 0; }
.steps-list li a { display: flex; align-items: center; gap: .75rem; padding: .6rem 1.2rem; text-decoration: none; color: var(--ra-ink); font-weight: 600; font-size: .92rem; }
.steps-list li a:hover { background: var(--ra-bg); }
.steps-list .tick { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #cfdae3; display: inline-flex; align-items: center; justify-content: center; flex: none; color: #fff; font-size: .8rem; }
.steps-list li.done .tick { background: var(--ra-teal); border-color: var(--ra-teal); color: var(--ra-navy); }
.steps-list li.done a span { color: var(--ra-muted); text-decoration: line-through; }
.plan-card { border-radius: 1.1rem; padding: 1.2rem; background: linear-gradient(135deg, #e6faf7, #fff); border: 1px solid #bdeee6; }
.plan-card .progress { height: .5rem; border-radius: 99px; background: #d4efe9; }
.empty-state { text-align: center; color: var(--ra-muted); padding: 2rem 1rem; }
.empty-state i { font-size: 2rem; color: #b8c7d4; display: block; margin-bottom: .4rem; }

/* Barra de filtros */
.toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; }
.toolbar form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.toolbar .form-control, .toolbar .form-select { width: auto; min-width: 150px; }
.toolbar .btn { align-self: center; }

/* Pantallas de acceso (supergestor) */
.auth-body { background: var(--ra-bg); min-height: 100vh; }
.auth-wrap { display: grid; grid-template-columns: minmax(340px, 5fr) 6fr; min-height: 100vh; }
.auth-side { background: linear-gradient(150deg, #0B2239 0%, #0e3a4d 60%, #0A8473 120%); color: #fff; padding: 2.5rem 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-side::after { content: ""; position: absolute; right: -90px; bottom: -90px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(15,200,176,.4), transparent 65%); }
.auth-logo { height: 38px; width: auto; align-self: flex-start; }
.auth-claim { color: #fff; font-size: 2.3rem; line-height: 1.12; margin-bottom: 1.6rem; }
.auth-claim span { color: var(--ra-teal); }
.auth-points { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; color: #cfe6ee; font-weight: 600; }
.auth-points i { color: var(--ra-teal); margin-right: .5rem; font-size: 1.1rem; }
.auth-foot { color: #8fa5ba; position: relative; z-index: 1; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.auth-card { width: 100%; max-width: 420px; }
.auth-logo-mobile { display: none; height: 34px; margin: 0 auto 1.5rem; }
.auth-kicker { display: inline-flex; align-items: center; gap: .4rem; background: var(--ra-teal-soft); color: var(--ra-teal-dark); font-weight: 800; font-size: .78rem; border-radius: 999px; padding: .3rem .8rem; margin-bottom: 1rem; }
@media (max-width: 860px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .auth-logo-mobile { display: block; }
}
@media (max-width: 575.98px) {
  .admin-topbar { padding: .6rem 1rem; }
  .topbar-who { display: none; }
  .dash-hero { padding: 1.25rem; }
}
.card.kpi-card { flex-direction: row; align-items: center; text-align: left; }

/* Selector de plantillas de la web */
.tpl-card { display: block; border: 2px solid var(--bs-border-color, #e3e8ee); border-radius: 16px; overflow: hidden; background: #fff; transition: border-color .15s, box-shadow .15s; }
.tpl-card:hover { box-shadow: 0 8px 24px rgba(11,34,57,.1); }
.tpl-card.is-active { border-color: #0FC8B0; box-shadow: 0 0 0 3px rgba(15,200,176,.18); }
.tpl-thumb { position: relative; aspect-ratio: 16/10; background: #eef2f5; display: grid; place-items: center; color: #8a9aa8; font-size: 40px; overflow: hidden; }
.tpl-thumb.dark { background: #07131F; }
.tpl-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tpl-badge { position: absolute; top: 10px; left: 10px; background: #0B2239; color: #fff; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.tpl-badge i { color: #0FC8B0; }
.tpl-swatches { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tpl-sw { position: relative; width: 30px; height: 30px; margin: 0; cursor: pointer; }
.tpl-sw input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tpl-sw span, .tpl-custom { display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), 0 0 0 1px rgba(0,0,0,.18); }
.tpl-sw input:checked + span { box-shadow: inset 0 0 0 3px #fff, 0 0 0 2.5px #0B2239; }
.tpl-sw input:focus-visible + span { outline: 2px solid #0B2239; outline-offset: 3px; }
.tpl-custom { background: conic-gradient(#f66, #fc6, #6f9, #6cf, #96f, #f66); display: grid; place-items: center; color: #fff; font-size: 13px; }
.tpl-custom.is-set { background: var(--c); }
.tpl-custom input { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.tpl-custom i { pointer-events: none; text-shadow: 0 0 3px rgba(0,0,0,.6); }
.tpl-card .btn { white-space: nowrap; }