/* ============================================================================
   panel.css — Tema OSCURO propio del panel (neutro de marca).
   Fase D1 (rediseño post-cierre): se carga DESPUÉS de bootstrap/helper/style
   para sobrescribir el look heredado de Bootstrap sin tocar el HTML de las
   secciones. Bootstrap 4 aporta rejilla/componentes; aquí va la identidad:
   barra superior con desplegables, tema oscuro elegante, botones amplios y
   100% responsive. Todo el color vive en tokens (:root) → fácil de ajustar.
   ============================================================================ */

:root {
  --dg-bg:          #14161c;
  --dg-surface:     #1c1f27;
  --dg-surface-2:   #232733;
  --dg-surface-3:   #2a2f3b;
  --dg-border:      #2c313d;
  --dg-border-soft: #242832;
  --dg-text:        #e7e9ee;
  --dg-text-soft:   #c2c8d4;
  --dg-muted:       #8b94a5;
  --dg-accent:      #d8a24a;   /* dorado cálido — CTA/acento */
  --dg-accent-2:    #e7b766;
  --dg-accent-ink:  #1a1407;   /* texto sobre el dorado */
  --dg-info:        #5aa9e6;
  --dg-success:     #46b98a;
  --dg-warning:     #e0a458;
  --dg-danger:      #e35d6a;
  --dg-radius:      14px;
  --dg-radius-sm:   10px;
  --dg-radius-xs:   8px;
  --dg-shadow:      0 6px 24px rgba(0,0,0,.38);
  --dg-shadow-sm:   0 2px 10px rgba(0,0,0,.30);
  --dg-topbar-bg:   linear-gradient(180deg, #1a1d25 0%, #16191f 100%);
  --dg-stripe:      rgba(255,255,255,.02);
  --dg-toggler:     url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23e7e9ee' stroke-width='2.2' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E");
  --dg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Tema CLARO (intercambiable; por defecto respeta el SO) ---------- */
[data-theme="light"] {
  --dg-bg:          #eef1f6;
  --dg-surface:     #ffffff;
  --dg-surface-2:   #f3f5f9;
  --dg-surface-3:   #e7ebf2;
  --dg-border:      #dce2ea;
  --dg-border-soft: #eaeef4;
  --dg-text:        #1f2733;
  --dg-text-soft:   #3a4453;
  --dg-muted:       #707a8a;
  --dg-accent:      #a8761f;
  --dg-accent-2:    #c08f33;
  --dg-accent-ink:  #ffffff;
  --dg-shadow:      0 8px 28px rgba(30,41,59,.12);
  --dg-shadow-sm:   0 2px 10px rgba(30,41,59,.08);
  --dg-topbar-bg:   #ffffff;
  --dg-stripe:      rgba(20,30,50,.035);
  --dg-toggler:     url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%231f2733' stroke-width='2.2' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
html, body { background: var(--dg-bg) !important; }
body {
  font-family: var(--dg-font) !important;
  color: var(--dg-text) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--dg-accent); }
a:hover { color: var(--dg-accent-2); text-decoration: none; }
h1,h2,h3,h4,h5,h6 { color: var(--dg-text) !important; font-weight: 600; }
p, span, label, td, th, li, div { color: inherit; }
hr { border-color: var(--dg-border) !important; }
::selection { background: rgba(216,162,74,.30); }

/* Scrollbar oscura */
* { scrollbar-color: var(--dg-surface-3) var(--dg-bg); scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--dg-bg); }
*::-webkit-scrollbar-thumb { background: var(--dg-surface-3); border-radius: 8px; }

/* ---------- Layout: sin sidebar, ancho completo ---------- */
#main-wrapper { background: var(--dg-bg) !important; }
.page-wrapper { margin-left: 0 !important; background: var(--dg-bg) !important; min-height: 100vh; }
.left-sidebar { display: none !important; }
.footer {
  background: transparent !important;
  color: var(--dg-muted) !important;
  border-top: 1px solid var(--dg-border-soft);
  text-align: center;
  padding: 18px;
  margin-top: 30px;
  /* Anula el footer FIJO heredado del layout viejo con sidebar
     (style.css: position:fixed; left:240px/60px; bottom:0), que en el rediseño sin
     sidebar se solapaba con el contenido en páginas largas. Ahora va en flujo. */
  position: static !important;
  left: auto !important; right: auto !important; bottom: auto !important;
}

/* ============================================================================
   Barra superior (dg-topbar)
   ============================================================================ */
.dg-topbar {
  background: var(--dg-topbar-bg);
  border-bottom: 1px solid var(--dg-border);
  box-shadow: var(--dg-shadow-sm);
  padding: .55rem 1.25rem;
  position: sticky; top: 0; z-index: 1030;
}
.dg-brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: .3px; }
.dg-brand .dg-logo {
  font-size: 1.55rem; color: var(--dg-text) !important;
  white-space: nowrap;
}
.dg-brand .dg-logo b { color: var(--dg-accent); }
.dg-brand:hover { text-decoration: none; }

.dg-topbar .navbar-nav .nav-link {
  color: var(--dg-text-soft) !important;
  font-weight: 500;
  padding: .5rem .95rem !important;
  border-radius: var(--dg-radius-xs);
  transition: background .15s, color .15s;
}
.dg-topbar .navbar-nav .nav-link:hover { background: var(--dg-surface-2); color: var(--dg-text) !important; }
.dg-topbar .navbar-nav .nav-item.active > .nav-link,
.dg-topbar .navbar-nav .nav-link.active {
  color: var(--dg-accent) !important;
  background: rgba(216,162,74,.12);
}
.dg-topbar .navbar-nav .nav-item.active > .nav-link::after {
  /* subrayado de acento en la sección activa (desktop) */
}
@media (min-width: 992px) {
  .dg-topbar .navbar-nav .nav-item.active > .nav-link {
    box-shadow: inset 0 -2px 0 var(--dg-accent);
  }
}

/* Toggler (hamburguesa) */
.dg-topbar .navbar-toggler {
  border: 1px solid var(--dg-border); border-radius: var(--dg-radius-xs);
  padding: .35rem .6rem; color: var(--dg-text);
}
.dg-topbar .navbar-toggler-icon { background-image: var(--dg-toggler); }

/* Acciones (tema · notificaciones · cuenta): separación uniforme entre iconos. */
.dg-topbar .dg-actions > li + li { margin-left: .5rem; }

/* Escritorio: separar el bloque de acciones del botón «Publicar carta»
   (antes quedaban pegados). */
@media (min-width: 992px) {
  .dg-topbar .dg-nav-publish { margin-right: 1.25rem; }
}

/* Conmutador de tema (sol/luna) */
.dg-theme-toggle {
  background: transparent !important;
  border: 1px solid var(--dg-border) !important;
  color: var(--dg-text-soft) !important;
  width: 40px; height: 40px; border-radius: 50% !important;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 !important; line-height: 1;
}
.dg-theme-toggle:hover { background: var(--dg-surface-2) !important; color: var(--dg-accent) !important; }
.dg-theme-toggle i { font-size: 1.05rem; }

/* Botón Publicar (CTA principal) */
.dg-publish {
  background: var(--dg-accent) !important;
  color: var(--dg-accent-ink) !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: var(--dg-radius-xs) !important;
  padding: .55rem 1.1rem !important;
  box-shadow: 0 4px 14px rgba(216,162,74,.30);
}
.dg-publish:hover { background: var(--dg-accent-2) !important; color: var(--dg-accent-ink) !important; }
.dg-publish i { margin-right: .4rem; }

/* Avatar */
.dg-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--dg-border); object-fit: cover; background: var(--dg-surface-2);
}

/* Móvil/tablet (<lg): la barra superior solo muestra marca + hamburguesa, en una
   sola fila (flex-nowrap). Al abrir la hamburguesa, el menú desplegable (navegación
   + Publicar + acciones) flota en absoluto debajo. La marca cede espacio y, si no
   cabe, trunca con elipsis. */
@media (max-width: 991.98px) {
  .dg-topbar { flex-wrap: nowrap; }
  .dg-topbar .dg-brand { min-width: 0; overflow: hidden; }
  .dg-topbar .dg-brand .dg-logo { overflow: hidden; text-overflow: ellipsis; }
  .dg-topbar .navbar-collapse {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1029;
    background: var(--dg-topbar-bg);
    border-bottom: 1px solid var(--dg-border);
    box-shadow: var(--dg-shadow);
    padding: .5rem 1rem .75rem;
  }
}

/* Móvil estrecho: además compactamos marca/iconos para que el nombre quepa entero
   sin necesidad de truncar en pantallas de móvil habituales. */
@media (max-width: 575.98px) {
  .dg-topbar { padding-left: .6rem; padding-right: .6rem; }
  .dg-brand .dg-logo { font-size: 1.15rem; }
  .dg-topbar .navbar-brand { margin-right: .35rem; }
  .dg-topbar .dg-theme-toggle { width: 31px; height: 31px; }
  .dg-topbar .dg-theme-toggle i { font-size: .9rem; }
  .dg-topbar .dg-avatar { width: 29px; height: 29px; }
  .dg-topbar .dg-actions > li + li { margin-left: .25rem; }
  .dg-topbar .navbar-toggler { padding: .25rem .45rem; }
  .dg-topbar .navbar-toggler-icon { width: 1.1em; height: 1.1em; }
}

/* ---------- Dropdowns (oscuros) ---------- */
.dropdown-menu {
  background: var(--dg-surface) !important;
  border: 1px solid var(--dg-border) !important;
  border-radius: var(--dg-radius-sm) !important;
  box-shadow: var(--dg-shadow) !important;
  padding: .4rem !important;
}
.dropdown-menu .dropdown-item,
.dropdown-menu a {
  color: var(--dg-text-soft) !important;
  border-radius: var(--dg-radius-xs);
  padding: .6rem .85rem !important;
  font-weight: 500;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu a:hover { background: var(--dg-surface-2) !important; color: var(--dg-text) !important; }
.dropdown-menu .dropdown-item i,
.dropdown-menu a i { width: 1.2rem; margin-right: .35rem; color: var(--dg-muted); }
.dropdown-divider { border-color: var(--dg-border) !important; }
.dropdown-user { list-style: none; padding: 0; margin: 0; }
.dropdown-user li a { display: block; }

/* ============================================================================
   Cabecera de página
   ============================================================================ */
.page-titles {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 26px 4px 10px !important;
  margin: 0 0 6px 0 !important;
}
.page-titles h3 { color: var(--dg-text) !important; font-weight: 700; margin: 0; }
.page-titles .text-primary { color: var(--dg-text) !important; }
.page-titles .breadcrumb { background: transparent !important; padding: 0; margin: 0; }
.page-titles .breadcrumb-item, .page-titles .breadcrumb-item a { color: var(--dg-muted) !important; }
.page-titles .breadcrumb-item.active { color: var(--dg-text-soft) !important; }
.page-titles .breadcrumb-item + .breadcrumb-item::before { color: var(--dg-border); }

/* ============================================================================
   Tarjetas
   ============================================================================ */
.card, .white-box {
  background: var(--dg-surface) !important;
  border: 1px solid var(--dg-border) !important;
  border-radius: var(--dg-radius) !important;
  box-shadow: var(--dg-shadow-sm) !important;
  color: var(--dg-text) !important;
}
.card .card-body, .card-body { color: var(--dg-text) !important; }
.card-title, .card-header { color: var(--dg-text) !important; background: transparent !important; border-color: var(--dg-border) !important; }
.bg-white { background: var(--dg-surface) !important; }
.box-shadow { box-shadow: var(--dg-shadow-sm) !important; }
.color-primary { color: var(--dg-accent) !important; }
.color-success { color: var(--dg-success) !important; }
.color-warning { color: var(--dg-warning) !important; }
.color-danger  { color: var(--dg-danger) !important; }

/* ============================================================================
   Botones (amplios y claros)
   ============================================================================ */
.btn {
  border-radius: var(--dg-radius-xs) !important;
  font-weight: 600 !important;
  padding: .55rem 1.05rem !important;
  letter-spacing: .2px;
  transition: filter .15s, background .15s, transform .02s;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: .8rem 1.4rem !important; font-size: 1.02rem !important; }
.btn-sm { padding: .35rem .7rem !important; }
.btn-primary { background: var(--dg-accent) !important; border-color: var(--dg-accent) !important; color: var(--dg-accent-ink) !important; }
.btn-primary:hover { background: var(--dg-accent-2) !important; border-color: var(--dg-accent-2) !important; }
.btn-success { background: var(--dg-success) !important; border-color: var(--dg-success) !important; color:#0e1f18 !important; }
.btn-info { background: var(--dg-info) !important; border-color: var(--dg-info) !important; color:#08243a !important; }
.btn-warning { background: var(--dg-warning) !important; border-color: var(--dg-warning) !important; color: var(--dg-accent-ink) !important; }
.btn-danger { background: var(--dg-danger) !important; border-color: var(--dg-danger) !important; color: #2a0c0f !important; }
.btn-secondary, .btn-default {
  background: var(--dg-surface-2) !important; border: 1px solid var(--dg-border) !important; color: var(--dg-text) !important;
}
.btn-secondary:hover, .btn-default:hover { background: var(--dg-surface-3) !important; }
.btn-rounded { border-radius: 50px !important; }
.btn-outline-primary { color: var(--dg-accent) !important; border-color: var(--dg-accent) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--dg-accent) !important; color: var(--dg-accent-ink) !important; }

/* ============================================================================
   Formularios
   ============================================================================ */
.form-control, textarea, select, .custom-select {
  background: var(--dg-surface-2) !important;
  border: 1px solid var(--dg-border) !important;
  color: var(--dg-text) !important;
  border-radius: var(--dg-radius-xs) !important;
  padding: .6rem .85rem !important;
  height: auto !important;
}
.form-control:focus {
  background: var(--dg-surface-2) !important;
  border-color: var(--dg-accent) !important;
  box-shadow: 0 0 0 .18rem rgba(216,162,74,.22) !important;
  color: var(--dg-text) !important;
}
.form-control::placeholder { color: var(--dg-muted) !important; }
.form-control:disabled, .form-control[readonly] { background: var(--dg-surface) !important; color: var(--dg-muted) !important; }
label, .form-group p, .control-label { color: var(--dg-text-soft) !important; font-weight: 500; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--dg-accent); transform: scale(1.15); margin-right: .35rem; }
.input-group-text { background: var(--dg-surface-3) !important; border-color: var(--dg-border) !important; color: var(--dg-text-soft) !important; }

/* ============================================================================
   Tablas
   ============================================================================ */
.table { color: var(--dg-text) !important; }
.table thead th {
  background: var(--dg-surface-2) !important;
  color: var(--dg-text-soft) !important;
  border-color: var(--dg-border) !important;
  border-bottom: 2px solid var(--dg-border) !important;
  font-weight: 600; text-transform: uppercase; font-size: .78rem; letter-spacing: .4px;
}
.table td, .table th { border-color: var(--dg-border-soft) !important; vertical-align: middle; padding: .8rem .75rem !important; }
.table-striped tbody tr:nth-of-type(odd) { background: var(--dg-stripe) !important; }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--dg-border) !important; }
.table-hover tbody tr:hover { background: var(--dg-surface-2) !important; }
/* El tema legado (style.css) oculta en ≤680px las columnas 2-5 de CUALQUIER <table>
   (un "responsive" genérico que escondía datos secundarios). Eso dejaba la sección
   Alérgenos sin la columna Icono ni Opciones en móvil. En las tablas marcadas con
   .dg-table restauramos todas sus celdas (mayor especificidad + !important gana). */
@media (max-width: 680px) {
  .dg-table td:nth-child(n), .dg-table th:nth-child(n) { display: table-cell !important; }
}

/* ============================================================================
   Pestañas (nav-tabs) y sortable
   ============================================================================ */
.nav-tabs { border-bottom: 1px solid var(--dg-border) !important; }
.nav-tabs .nav-link {
  color: var(--dg-muted) !important; border: none !important;
  border-radius: var(--dg-radius-xs) var(--dg-radius-xs) 0 0 !important;
  padding: .65rem 1rem !important; font-weight: 600;
}
.nav-tabs .nav-link:hover { color: var(--dg-text) !important; background: var(--dg-surface-2) !important; }
.nav-tabs .nav-link.active {
  color: var(--dg-accent) !important; background: transparent !important;
  border-bottom: 2px solid var(--dg-accent) !important;
}
.customtab li a.active { color: var(--dg-accent) !important; }
.ui-state-default, .ui-sortable-handle {
  background: var(--dg-surface-2) !important; color: var(--dg-text) !important;
  border: 1px solid var(--dg-border) !important; border-radius: var(--dg-radius-xs) !important;
}
.ui-sortable-helper { box-shadow: var(--dg-shadow) !important; }

/* ============================================================================
   Alertas, badges
   ============================================================================ */
.alert { border-radius: var(--dg-radius-sm) !important; border: 1px solid transparent; }
.alert-warning { background: rgba(224,164,88,.12) !important; color: var(--dg-warning) !important; border-color: rgba(224,164,88,.35) !important; }
.alert-danger  { background: rgba(227,93,106,.12) !important; color: var(--dg-danger) !important; border-color: rgba(227,93,106,.35) !important; }
.alert-success { background: rgba(70,185,138,.12) !important; color: var(--dg-success) !important; border-color: rgba(70,185,138,.35) !important; }
.alert-info    { background: rgba(90,169,230,.12) !important; color: var(--dg-info) !important; border-color: rgba(90,169,230,.35) !important; }
.badge-primary { background: var(--dg-accent) !important; color: var(--dg-accent-ink) !important; }

/* ============================================================================
   DataTables (controles oscuros)
   ============================================================================ */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { color: var(--dg-text-soft) !important; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { background: var(--dg-surface-2) !important; border: 1px solid var(--dg-border) !important; color: var(--dg-text) !important; border-radius: var(--dg-radius-xs); }
.dataTables_wrapper .paginate_button { color: var(--dg-text-soft) !important; }
.dataTables_wrapper .paginate_button.current,
.dataTables_wrapper .paginate_button.current:hover { background: var(--dg-accent) !important; color: var(--dg-accent-ink) !important; border-radius: var(--dg-radius-xs); border: none !important; }
.dt-buttons .btn { margin-right: .3rem; }

/* ============================================================================
   SweetAlert (oscuro)
   ============================================================================ */
.sweet-alert { background: var(--dg-surface) !important; border-radius: var(--dg-radius) !important; box-shadow: var(--dg-shadow) !important; }
.sweet-alert h2, .sweet-alert p { color: var(--dg-text) !important; }

/* ============================================================================
   Utilidades propias
   ============================================================================ */
.dg-card-soft { background: var(--dg-surface-2) !important; }
.dg-qr-box { text-align:center; }
.dg-qr-box img { background:#fff; padding:10px; border-radius: var(--dg-radius-sm); max-width: 220px; width: 100%; }
.dg-stat-icon { width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; }

/* ---------- Dashboard: avisos ---------- */
.dg-notif-empty { text-align: center; padding: 2.2rem 1rem; color: var(--dg-text-soft); }
.dg-notif-empty i { font-size: 2.4rem; color: var(--dg-success); display: block; margin-bottom: .6rem; }
.dg-notif-empty p { font-weight: 600; color: var(--dg-text); }
.dg-notif {
  display: flex; gap: .85rem; padding: .9rem 1rem; margin-bottom: .75rem;
  border-radius: var(--dg-radius-sm); border: 1px solid var(--dg-border);
  background: var(--dg-surface-2);
}
.dg-notif:last-child { margin-bottom: 0; }
.dg-notif-icon { font-size: 1.3rem; line-height: 1.4; flex: 0 0 auto; }
.dg-notif-title { display: block; margin-bottom: .25rem; color: var(--dg-text); }
.dg-notif-info    { border-left: 3px solid var(--dg-info); }
.dg-notif-info    .dg-notif-icon { color: var(--dg-info); }
.dg-notif-warning { border-left: 3px solid var(--dg-warning); }
.dg-notif-warning .dg-notif-icon { color: var(--dg-warning); }
.dg-notif-danger  { border-left: 3px solid var(--dg-danger); }
.dg-notif-danger  .dg-notif-icon { color: var(--dg-danger); }
.dg-notif-success { border-left: 3px solid var(--dg-success); }
.dg-notif-success .dg-notif-icon { color: var(--dg-success); }

/* Notificaciones — maestro/detalle: en el detalle solo se ve el aviso activo. */
.dg-notif-detail-item { display: none; margin-bottom: 0; }
.dg-notif-detail-item.active { display: flex; }
/* Histórico (lista de la derecha): título + fecha, clicable. */
.dg-notif-list { list-style: none; margin: 0; padding: 0; }
.dg-notif-list li {
  padding: .6rem .55rem; border-bottom: 1px solid var(--dg-border);
  cursor: pointer; border-radius: var(--dg-radius-xs); transition: background .15s;
}
.dg-notif-list li:last-child { border-bottom: none; }
.dg-notif-list li:hover { background: var(--dg-surface-2); }
.dg-notif-list li.active { background: rgba(216,162,74,.12); }
.dg-notif-list .t { display: block; font-weight: 600; color: var(--dg-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-notif-list .d { font-size: .75rem; color: var(--dg-text-soft); }
/* No leídas: punto naranja antes del título. */
.dg-notif-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--dg-accent, #d8a24a); margin-right: .4rem; vertical-align: middle; }
/* Segundo bloque de la columna derecha («Histórico», bajo «Últimos mensajes»). */
.dg-notif-hist-title { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--dg-border); }

/* Referidos (Bloque 6): caja con el código que el tenant comparte. */
.dg-ref-code-box { display: flex; align-items: center; flex-wrap: wrap; }
.dg-ref-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.6rem; font-weight: 700; letter-spacing: .18em; color: var(--dg-accent, #d8a24a);
  background: var(--dg-surface-2); border: 1px dashed var(--dg-border);
  border-radius: var(--dg-radius-sm); padding: .45rem .9rem;
}

/* Campana: badge con el nº de notificaciones sin leer. */
.dg-bell { position: relative; }
.dg-bell-badge {
  position: absolute; top: -.2rem; right: -.35rem; min-width: 1.05rem; height: 1.05rem;
  padding: 0 .25rem; border-radius: .55rem; background: var(--dg-danger); color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 1.05rem; text-align: center;
}

/* ---------- Estadísticas ---------- */
.dg-stats-cats { list-style: none; margin: 0; padding: 0; }
.dg-stats-cats li {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem 0; border-bottom: 1px solid var(--dg-border);
}
.dg-stats-cats li:last-child { border-bottom: none; }
.dg-stats-cat-name { font-weight: 600; color: var(--dg-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dg-stats-visits { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--dg-accent); }
/* Botones de rango: separados (no pegados) y con estado seleccionado = hover (relleno). */
.dg-stats-ranges { display: flex; flex-wrap: wrap; gap: .4rem; }
.dg-stats-ranges .btn { border-radius: var(--dg-radius-xs); }
.dg-stats-ranges .btn.active,
.dg-stats-ranges .btn.active:hover,
.dg-stats-ranges .btn.active:focus {
  background: var(--dg-accent) !important;
  border-color: var(--dg-accent) !important;
  color: var(--dg-accent-ink) !important;
  box-shadow: none;
}

/* Franja personalizada: «Desde»/«Hasta» flexibles (envuelven si no caben) y «Ver»
   en su propia línea, sin solaparse entre sí ni con el botón. */
.dg-date-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.dg-date-row label {
  flex: 1 1 130px; min-width: 0; margin: 0;
  display: flex; flex-direction: column; gap: .2rem;
  font-size: .78rem; color: var(--dg-text-soft);
}
/* Los <input type=date> nativos tienen un ancho mínimo intrínseco y no encogen:
   forzamos que respeten el contenedor para que no se solapen ni desborden. */
.dg-date-row input { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }

/* Visitas por hora (Bloque 7): 24 barras verticales escaladas al máximo del rango. */
.dg-hours { display: flex; align-items: flex-end; gap: 2px; height: 160px; }
.dg-hour { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; min-width: 0; height: 100%; }
.dg-hour-bar-wrap { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end; }
.dg-hour-bar { width: 100%; min-height: 2px; background: var(--dg-accent); border-radius: 3px 3px 0 0; transition: height .2s; }
.dg-hour-bar.is-empty { background: rgba(0,0,0,.06); }
.dg-hour-label { font-size: .62rem; color: var(--dg-text-soft); margin-top: 4px; line-height: 1; }

/* Procedencia (Bloque 7): lista de dominios con barra proporcional. */
.dg-ref-list { list-style: none; margin: 0; padding: 0; }
.dg-ref-list li { margin-bottom: .7rem; }
.dg-ref-row { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: 3px; }
.dg-ref-name { font-weight: 600; color: var(--dg-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-ref-n { color: var(--dg-text-soft); font-variant-numeric: tabular-nums; }
.dg-ref-bar { height: 6px; min-width: 2px; background: var(--dg-accent); border-radius: 3px; }

/* Subtítulo con el nombre del establecimiento, bajo el header del dashboard. */
.dg-estab-name { margin-top: 4px; color: var(--dg-text); font-size: 1.6rem; font-weight: 700; line-height: 1.2; }

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width: 991.98px) {
  .dg-topbar .navbar-collapse {
    background: var(--dg-surface);
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius-sm);
    margin-top: .6rem; padding: .6rem;
    box-shadow: var(--dg-shadow);
  }
  .dg-topbar .navbar-nav .nav-link { padding: .7rem .8rem !important; }
  .dg-topbar .dropdown-menu { box-shadow: none !important; border: none !important; background: var(--dg-surface-2) !important; margin: .2rem 0 .4rem .6rem; }
  .dg-publish { display: inline-block; margin: .5rem 0; width: 100%; text-align: center; }
  /* Acciones: fila horizontal centrada bajo «Publicar carta», dentro del desplegable.
     Iconos un poco más grandes que en escritorio (mejor objetivo táctil). */
  .dg-topbar .navbar-collapse .dg-actions {
    justify-content: center;
    border-top: 1px solid var(--dg-border);
    margin-top: .4rem; padding-top: .7rem;
  }
  .dg-topbar .navbar-collapse .dg-actions > li + li { margin-left: 1.1rem; }
  .dg-topbar .navbar-collapse .dg-actions .dg-theme-toggle { width: 46px; height: 46px; }
  .dg-topbar .navbar-collapse .dg-actions .dg-theme-toggle i { font-size: 1.3rem; }
  .dg-topbar .navbar-collapse .dg-actions .dg-avatar { width: 44px; height: 44px; }
  /* La cuenta despliega hacia abajo dentro del menú (no flotante a la derecha). */
  .dg-topbar .navbar-collapse .dg-actions .dropdown-menu-right { right: auto; left: 0; }
  .page-titles { padding-top: 18px !important; }
  .table-responsive { border: none; }
}
@media (max-width: 575.98px) {
  .container-fluid { padding-left: 14px; padding-right: 14px; }
  .card { border-radius: var(--dg-radius-sm) !important; }
  .btn { padding: .6rem 1rem !important; }
  /* Franja de fechas: en móvil, «Desde» y «Hasta» apilados (uno por línea) para que
     los selectores nativos no se solapen ni desborden por la derecha. */
  .dg-date-row { flex-direction: column; }
  .dg-date-row label { flex-basis: auto; width: 100%; }
  /* Los <input type=date> nativos (sobre todo iOS Safari) tienen un ancho mínimo
     intrínseco que ignora width:100% y desborda por la derecha. Quitarles el
     "appearance" nativo los convierte en un campo normal que respeta su contenedor;
     el selector de fecha sigue abriéndose al pulsar. */
  .dg-date-row input[type="date"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
}

/* ============================================================================
   Categorías (rediseño Etapa 1): lista reordenable + modal de edición.
   ============================================================================ */
.dg-cats-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.dg-cats-hint { color: var(--dg-muted); font-size: .9rem; }
.dg-cats-hint i { color: var(--dg-accent); margin-right: .35rem; }

/* Botonera con identidad del tema */
.dg-btn-primary {
  background: var(--dg-accent) !important; color: var(--dg-accent-ink) !important;
  font-weight: 700 !important; border: none !important; border-radius: var(--dg-radius-xs) !important;
  padding: .55rem 1.1rem !important;
}
.dg-btn-primary:hover { background: var(--dg-accent-2) !important; color: var(--dg-accent-ink) !important; }
.dg-btn-danger {
  background: transparent !important; color: var(--dg-danger) !important;
  border: 1px solid var(--dg-danger) !important; border-radius: var(--dg-radius-xs) !important;
  font-weight: 600 !important;
}
.dg-btn-danger:hover { background: var(--dg-danger) !important; color: #fff !important; }
.dg-btn-link-danger {
  background: none !important; border: none !important; color: var(--dg-danger) !important;
  padding: .35rem 0 !important; font-weight: 600 !important;
}
.dg-btn-link-danger:hover { text-decoration: underline; }
.dg-btn-edit {
  background: var(--dg-surface-2) !important; color: var(--dg-text) !important;
  border: 1px solid var(--dg-border) !important; border-radius: var(--dg-radius-xs) !important;
  font-weight: 600 !important; white-space: nowrap;
}
.dg-btn-edit:hover { background: var(--dg-surface-3) !important; color: var(--dg-accent) !important; }

/* Estado vacío */
.dg-empty { text-align: center; padding: 3rem 1rem; color: var(--dg-muted); }
.dg-empty i { font-size: 2.6rem; color: var(--dg-border); display: block; margin-bottom: .8rem; }
.dg-empty p { margin-bottom: 1.1rem; }

/* Lista de categorías */
.dg-cat-list { list-style: none; margin: 0; padding: 0; }
.dg-cat-row {
  display: flex; align-items: center; gap: .85rem;
  background: var(--dg-surface); border: 1px solid var(--dg-border);
  border-radius: var(--dg-radius-sm); padding: .6rem .8rem; margin-bottom: .6rem;
  transition: border-color .15s, background .15s;
}
.dg-cat-row:hover { border-color: var(--dg-accent); }
.dg-cat-row.sortable-ghost { opacity: .45; }
.dg-cat-row.sortable-chosen { background: var(--dg-surface-2); }
.dg-cat-row.is-hidden { opacity: .62; }

.dg-cat-handle {
  cursor: grab; color: var(--dg-muted); padding: .2rem .35rem; touch-action: none;
  flex: 0 0 auto;
}
.dg-cat-handle:active { cursor: grabbing; }

.dg-cat-arrows { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.dg-arrow {
  background: var(--dg-surface-2); border: 1px solid var(--dg-border); color: var(--dg-text-soft);
  width: 26px; height: 20px; border-radius: 6px; padding: 0; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; font-size: .7rem;
}
.dg-arrow:hover { background: var(--dg-surface-3); color: var(--dg-accent); }

.dg-cat-thumb { flex: 0 0 auto; }
.dg-cat-thumb img {
  width: 46px; height: 46px; object-fit: cover; border-radius: var(--dg-radius-xs);
  border: 1px solid var(--dg-border); background: var(--dg-surface-2);
}
.dg-cat-name { flex: 1 1 auto; font-weight: 600; color: var(--dg-text); min-width: 0; }
/* Círculo con el nº de platos de la categoría (vacía = rojo, para detectarla de un vistazo) */
.dg-cat-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; margin-left: .45rem;
  border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1;
  background: var(--dg-surface-3); color: var(--dg-text-soft); vertical-align: middle;
}
.dg-cat-count.is-empty { background: rgba(227,93,106,.16); color: var(--dg-danger); }
.dg-cat-badges { display: flex; gap: .4rem; flex-wrap: wrap; flex: 0 0 auto; }
.dg-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--dg-surface-2); color: var(--dg-text-soft);
  border: 1px solid var(--dg-border); border-radius: 999px;
  padding: .18rem .55rem; font-size: .74rem; font-weight: 600; white-space: nowrap;
}
.dg-badge.dg-badge-off { color: var(--dg-danger); border-color: var(--dg-danger); }
.dg-badge.dg-badge-time { color: var(--dg-info); border-color: var(--dg-info); }
/* Subcategorías (Bloque 8): sangría de la fila hija + marca ↳ y badge cabecera. */
.dg-cat-row.is-subcat { margin-left: 26px; border-left: 3px solid var(--dg-accent); }
.dg-subcat-mark { color: var(--dg-accent); font-weight: 700; }
.dg-badge.dg-badge-group { color: var(--dg-accent); border-color: var(--dg-accent); }
.dg-check.dg-check-sub { margin-left: 18px; }

/* Control "Ocultar categoría" (3 modos + horas) */
.dg-hide-field { margin-top: 1.2rem; }
.dg-field-label { display: block; color: var(--dg-text-soft); font-weight: 600; font-size: .88rem; margin-bottom: .45rem; }
.dg-segmented { display: inline-flex; border: 1px solid var(--dg-border); border-radius: var(--dg-radius-xs); overflow: hidden; }
.dg-segmented label { margin: 0; cursor: pointer; }
.dg-segmented label input { position: absolute; opacity: 0; width: 0; height: 0; }
.dg-segmented label span {
  display: block; padding: .45rem .95rem; color: var(--dg-text-soft);
  font-weight: 600; font-size: .85rem; border-right: 1px solid var(--dg-border);
}
.dg-segmented label:last-child span { border-right: none; }
.dg-segmented label input:checked + span { background: var(--dg-accent); color: var(--dg-accent-ink); }
.dg-segmented label input:focus-visible + span { box-shadow: inset 0 0 0 2px rgba(216,162,74,.5); }
.dg-time-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .85rem; }
.dg-time-lbl { display: flex; flex-direction: column; gap: .25rem; margin: 0; color: var(--dg-text-soft); font-weight: 600; font-size: .82rem; }
.dg-time-lbl input[type="time"] {
  background: var(--dg-surface-2); border: 1px solid var(--dg-border); color: var(--dg-text);
  border-radius: var(--dg-radius-xs); padding: .4rem .6rem;
}
.dg-time-lbl input[type="time"]:focus { border-color: var(--dg-accent); outline: none; box-shadow: 0 0 0 .15rem rgba(216,162,74,.18); }
.dg-hide-hint { margin: .6rem 0 0; color: var(--dg-muted); }

/* ---------- Modal (oscuro) ---------- */
.dg-modal .modal-content {
  background: var(--dg-surface); color: var(--dg-text);
  border: 1px solid var(--dg-border); border-radius: var(--dg-radius); box-shadow: var(--dg-shadow);
  /* El contenido nunca excede la pantalla: el cuerpo scrollea por dentro y la
     cabecera (X) y el pie (Guardar) quedan SIEMPRE visibles (móvil y escritorio).
     Sin modal-dialog-centered (Bootstrap 4.0 no lo permite scrollear). */
  max-height: calc(100vh - 3.5rem); overflow: hidden;
}
.dg-modal .modal-dialog { margin: 1.75rem auto; }
/* El <form> envuelve header/body/footer, así que debe ser el contenedor flex
   (si no, el cuerpo no se constriñe y el pie se desborda fuera de pantalla). */
.dg-modal .modal-content > form { display: flex; flex-direction: column; min-height: 0; max-height: 100%; overflow: hidden; }
.dg-modal .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; }
.dg-modal .modal-header, .dg-modal .modal-footer { border-color: var(--dg-border); flex-shrink: 0; }
@media (max-width: 575.98px) { .dg-modal .modal-dialog { margin: .6rem auto; } .dg-modal .modal-content { max-height: calc(100vh - 3rem); } }
.dg-modal .modal-title { font-weight: 700; }
.dg-modal .modal-title i { color: var(--dg-accent); margin-right: .4rem; }
/* Botón cerrar (X): grande, visible y rojo; círculo rojo lleno al pasar el ratón. */
.dg-modal .close {
  color: var(--dg-danger) !important; opacity: 1; text-shadow: none;
  font-size: 1.9rem; font-weight: 700; line-height: 1;
  width: 40px; height: 40px; padding: 0; margin: -.4rem -.4rem -.4rem 0;
  border-radius: 50%; transition: background .15s, color .15s;
}
.dg-modal .close:hover, .dg-modal .close:focus {
  color: #fff !important; background: var(--dg-danger); opacity: 1; outline: none;
}
.dg-modal label { color: var(--dg-text-soft); font-weight: 600; font-size: .88rem; margin-bottom: .3rem; }
.dg-modal .form-control {
  background: var(--dg-surface-2) !important; border: 1px solid var(--dg-border) !important;
  color: var(--dg-text) !important; border-radius: var(--dg-radius-xs) !important;
}
.dg-modal .form-control:focus { border-color: var(--dg-accent) !important; box-shadow: 0 0 0 .15rem rgba(216,162,74,.18) !important; }
.dg-modal .form-control-file { color: var(--dg-text-soft); }

.dg-img-field { margin-top: 1rem; }
.dg-img-row { display: flex; align-items: center; gap: 1rem; }
.dg-img-preview {
  width: 64px; height: 64px; object-fit: cover; border-radius: var(--dg-radius-xs);
  border: 1px solid var(--dg-border); background: var(--dg-surface-2); flex: 0 0 auto;
}

/* ---------- Interruptores (switch) ---------- */
.dg-switches { margin-top: 1.1rem; display: flex; flex-direction: column; gap: .85rem; }
.dg-switch { display: flex; align-items: flex-start; gap: .7rem; margin: 0; cursor: pointer; font-weight: 500; }
.dg-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.dg-switch-track {
  flex: 0 0 auto; position: relative; width: 42px; height: 24px; margin-top: 1px;
  background: var(--dg-surface-3); border: 1px solid var(--dg-border); border-radius: 999px;
  transition: background .15s, border-color .15s;
}
.dg-switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  background: var(--dg-muted); border-radius: 50%; transition: transform .15s, background .15s;
}
.dg-switch input:checked + .dg-switch-track { background: rgba(216,162,74,.25); border-color: var(--dg-accent); }
.dg-switch input:checked + .dg-switch-track::after { transform: translateX(18px); background: var(--dg-accent); }
.dg-switch input:focus-visible + .dg-switch-track { box-shadow: 0 0 0 .15rem rgba(216,162,74,.25); }
.dg-switch-text { color: var(--dg-text); line-height: 1.3; }
.dg-switch-text small { display: block; color: var(--dg-muted); font-weight: 400; }

@media (max-width: 575.98px) {
  /* Fila en dos líneas: [handle][↕][thumb][nombre][Editar] / [badges] */
  .dg-cat-row { flex-wrap: wrap; row-gap: .5rem; }
  .dg-cat-name { order: 3; flex: 1 1 0; min-width: 0; }
  .dg-btn-edit { order: 4; flex: 0 0 auto; padding: .45rem .7rem !important; }
  .dg-cat-badges { order: 5; flex-basis: 100%; width: 100%; padding-left: 2px; }

  /* Modal de edición: aprovechar el ancho de la pantalla en móvil (~92%). */
  .dg-modal .modal-dialog { max-width: 92%; width: 92%; margin: 1rem auto; }
}

/* ============================================================================
   Platos (rediseño): vista categorías + limbo -> platos de categoría.
   ============================================================================ */
/* Aviso de platos sin categoría (limbo) */
.dg-limbo-card {
  display: flex; align-items: center; gap: .75rem;
  background: rgba(224,164,88,.12); border: 1px solid var(--dg-warning);
  border-radius: var(--dg-radius-sm); padding: .8rem 1rem; margin-bottom: 1.1rem;
  color: var(--dg-text); text-decoration: none;
}
.dg-limbo-card:hover { background: rgba(224,164,88,.2); color: var(--dg-text); text-decoration: none; }
.dg-limbo-card > .fa-exclamation-triangle { color: var(--dg-warning); font-size: 1.2rem; }
.dg-limbo-card span { flex: 1 1 auto; }
.dg-limbo-arrow { color: var(--dg-muted); }

/* Fila de categoría clicable (vista de platos) */
.dg-cat-link { padding: 0; }
.dg-cat-rowlink {
  display: flex; align-items: center; gap: .85rem; width: 100%;
  padding: .6rem .8rem; color: var(--dg-text); text-decoration: none;
}
.dg-cat-rowlink:hover { color: var(--dg-text); text-decoration: none; }
.dg-cat-go { color: var(--dg-muted); margin-left: .3rem; flex: 0 0 auto; }
.dg-cat-link:hover .dg-cat-go { color: var(--dg-accent); }

.dg-dish-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--dg-text); flex: 1 1 auto; text-align: center; }
.dg-dish-title i { color: var(--dg-warning); }

.dg-badge.dg-badge-price { color: var(--dg-accent); border-color: var(--dg-accent); font-weight: 700; }

/* Botón-icono (toggle mostrar/ocultar en la fila de plato) */
.dg-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--dg-radius-xs);
  border: 1px solid var(--dg-border); color: var(--dg-text-soft);
  background: var(--dg-surface-2); flex: 0 0 auto; text-decoration: none;
}
.dg-icon-btn:hover { color: var(--dg-accent); background: var(--dg-surface-3); }

/* Modal ancho (platos) */
.dg-modal-wide .modal-dialog { max-width: 760px; }

/* Buscador de platos (vista principal) */
.dg-search { display: flex; align-items: center; gap: .5rem; position: relative; margin-bottom: 1.1rem; }
.dg-search .dg-search-ico { position: absolute; left: 1.1rem; color: var(--dg-muted); pointer-events: none; z-index: 2; }
.dg-search input[type="search"] {
  flex: 1 1 auto; background: var(--dg-surface); border: 1px solid var(--dg-border); color: var(--dg-text);
  border-radius: var(--dg-radius-xs); padding: .55rem .8rem .55rem 3rem !important;
}
.dg-search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
.dg-search input[type="search"]:focus { border-color: var(--dg-accent); outline: none; box-shadow: 0 0 0 .15rem rgba(216,162,74,.18); }

/* Fila de plato — layout propio. Escritorio: 1 fila. Móvil: nombre arriba,
   controles en medio, precios abajo (orden por flex-order). */
.dg-dish-row {
  display: flex; align-items: center; gap: .7rem; flex-wrap: nowrap;
  background: var(--dg-surface); border: 1px solid var(--dg-border);
  border-radius: var(--dg-radius-sm); padding: .6rem .8rem; margin-bottom: .6rem;
}
.dg-dish-row:hover { border-color: var(--dg-accent); }
.dg-dish-row.sortable-ghost { opacity: .45; }
.dg-dish-row.sortable-chosen { background: var(--dg-surface-2); }
.dg-dish-row.is-hidden { opacity: .6; }
.dg-dish-check { order: 0; flex: 0 0 auto; display: flex; align-items: center; }
.dg-dish-check input { width: 18px; height: 18px; cursor: pointer; }
.dg-dish-row .dg-cat-handle { order: 1; }
.dg-dish-row .dg-cat-arrows { order: 2; }
.dg-dish-row .dg-cat-thumb  { order: 3; }
.dg-dish-name { order: 4; flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--dg-text); }
.dg-dish-prices { order: 5; flex: 0 0 auto; color: var(--dg-accent); font-weight: 600; white-space: nowrap; }

/* Barra de acciones en lote (seleccionar todos + borrar selección) */
.dg-bulkbar { display: flex; align-items: center; gap: 1rem; margin-bottom: .7rem; flex-wrap: wrap; }
.dg-bulkcheck { display: flex; align-items: center; gap: .45rem; margin: 0; color: var(--dg-text-soft); font-weight: 600; cursor: pointer; font-size: .9rem; }
.dg-bulkcheck input { width: 18px; height: 18px; }
.dg-price-sep { color: var(--dg-border); margin: 0 .2rem; }
.dg-price-none { color: var(--dg-muted); font-weight: 400; }
.dg-dish-actions { order: 6; flex: 0 0 auto; display: flex; gap: .4rem; }
.dg-icon-danger { color: var(--dg-danger) !important; }
.dg-icon-danger:hover { color: #fff !important; background: var(--dg-danger) !important; border-color: var(--dg-danger) !important; }

@media (max-width: 575.98px) {
  .dg-dish-row { flex-wrap: wrap; row-gap: .55rem; }
  .dg-dish-name { order: 1; flex-basis: 100%; }
  .dg-dish-check { order: 2; }
  .dg-dish-row .dg-cat-handle { order: 3; }
  .dg-dish-row .dg-cat-arrows { order: 4; }
  .dg-dish-row .dg-cat-thumb  { order: 5; }
  .dg-dish-actions { order: 6; margin-left: auto; }
  .dg-dish-prices { order: 7; flex-basis: 100%; white-space: normal; }
}

/* Grid de precios/tipo/nº en el modal de plato */
.dg-form-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; margin-top: .6rem; }
.dg-form-grid .form-group { margin-bottom: 0; }

/* Checkboxes de categorías/alérgenos en el modal */
/* Bloques de selección (Categorías / Alérgenos) en el modal de plato: cada uno con
   su propio título destacado y separados por una línea para que no parezcan uno solo. */
.dg-check-field { margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--dg-border-soft); }
.dg-check-field > .dg-field-label {
  color: var(--dg-text); font-size: .95rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: .65rem;
}
.dg-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .4rem .8rem; margin-top: .4rem; }
.dg-check { display: flex; align-items: center; gap: .45rem; margin: 0; font-weight: 500; color: var(--dg-text-soft); cursor: pointer; font-size: .88rem; }
.dg-check input { width: 16px; height: 16px; flex: 0 0 auto; }

@media (max-width: 575.98px) {
  .dg-form-grid { grid-template-columns: 1fr 1fr; }
  .dg-dish-title { font-size: 1rem; text-align: left; }
}

/* ============================================================================
   Login (rediseño): 2 columnas — visual cálido (SVG) + formulario. Tema oscuro.
   ============================================================================ */
.dg-login-body { margin: 0; min-height: 100vh; background: var(--dg-bg); color: var(--dg-text); font-family: var(--dg-font); }
.dg-login { display: flex; min-height: 100vh; }

/* Lado visual: foto de ambiente DESENFOCADA (se adivina, sin detalles). El blur va
   en un ::before para no desenfocar también el texto/logo; el inset negativo + scale
   evitan bordes claros del desenfoque. */
.dg-login-visual {
  flex: 1 1 56%; position: relative; display: flex; align-items: flex-end;
  overflow: hidden; background: #100d0a;
}
.dg-login-visual::before {
  content: ""; position: absolute; inset: -18px; z-index: 0;
  background: url(/images/brand/movilmenu/contacto-foto.jpg) center/cover no-repeat;
  filter: blur(5px); transform: scale(1.06);
}
/* Sin capa oscurecedora general: solo una sombra suave al pie para que el logo
   blanco (abajo) siga legible; el resto de la foto se ve a plena luz. */
.dg-login-visual::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(16,13,10,.55) 0%, rgba(16,13,10,.12) 28%, rgba(16,13,10,0) 52%);
}
.dg-login-visual-inner { position: relative; z-index: 2; padding: 3.2rem; }
.dg-login-logo { font-size: 2.5rem; font-weight: 800; letter-spacing: .4px; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.5); }
.dg-login-tagline { color: rgba(255,255,255,.82); font-size: 1.08rem; margin: .5rem 0 0; max-width: 420px; }

/* Lado del formulario */
.dg-login-panel { flex: 1 1 44%; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.dg-login-card { width: 100%; max-width: 380px; }
.dg-login-mark { display: none; font-weight: 800; font-size: 1.7rem; color: var(--dg-text); margin-bottom: 1.6rem; }
.dg-login-card h1 { font-size: 1.55rem; font-weight: 700; margin: 0 0 .3rem; color: var(--dg-text); }
.dg-login-sub { color: var(--dg-muted); margin: 0 0 1.7rem; }

.dg-login-form .dg-field { margin-bottom: 1.1rem; }
.dg-login-form label { display: block; color: var(--dg-text-soft); font-weight: 600; font-size: .88rem; margin-bottom: .35rem; }
.dg-login-form input {
  width: 100%; background: var(--dg-surface-2); border: 1px solid var(--dg-border); color: var(--dg-text);
  border-radius: var(--dg-radius-xs); padding: .72rem .9rem; font-size: 1rem;
}
.dg-login-form input::placeholder { color: var(--dg-muted); }
.dg-login-form input:focus { outline: none; border-color: var(--dg-accent); box-shadow: 0 0 0 .18rem rgba(216,162,74,.2); }

.dg-login-row { display: flex; justify-content: flex-end; margin: -.4rem 0 1.3rem; }
.dg-login-link { color: var(--dg-accent); font-size: .88rem; text-decoration: none; }
.dg-login-link:hover { text-decoration: underline; }
.dg-login-btn { width: 100%; padding: .72rem !important; font-size: 1rem !important; }
.dg-login-btn i { margin-right: .4rem; }
.dg-login-alert {
  background: rgba(227,93,106,.14); border: 1px solid var(--dg-danger); color: var(--dg-danger);
  border-radius: var(--dg-radius-xs); padding: .7rem .9rem; margin-bottom: 1.2rem; font-weight: 500;
}
.dg-login-alert i { margin-right: .4rem; }
.dg-login-back { display: inline-block; margin-top: 1.2rem; color: var(--dg-text-soft); text-decoration: none; font-size: .9rem; }
.dg-login-back:hover { color: var(--dg-accent); }
.dg-login-back i { margin-right: .35rem; }

/* Móvil: la imagen pasa a fondo (con veladura) y el formulario se centra encima. */
@media (max-width: 860px) {
  .dg-login-visual { display: none; }
  .dg-login {
    background: linear-gradient(rgba(16,13,10,.82), rgba(16,13,10,.94)), url(/images/brand/movilmenu/contacto-foto.jpg) center/cover no-repeat;
  }
  .dg-login-panel { flex-basis: 100%; }
  .dg-login-mark { display: block; }
}