/* ============================================================
   RAUDO · Sistema de diseño del panel de restaurantes
   Naranja premium (estilo Apple / Revolut) · Light + Dark mode
   Uso:  <link rel="stylesheet" href="raudo-ui.css">
         <script src="raudo-theme.js"></script>  (en <head>, síncrono)
   El tema se controla con el atributo data-theme en <html>:
     - sin atributo  -> sigue el sistema (prefers-color-scheme)
     - data-theme="light" / data-theme="dark" -> forzado
   ============================================================ */

/* ---------- TOKENS: LIGHT (por defecto) ---------- */
:root {
  /* Marca */
  --rd-brand:        #ff6a00;
  --rd-brand-2:      #ff9f0a;
  --rd-brand-strong: #e85d00;
  --rd-brand-grad:   linear-gradient(135deg, #ff6a00, #ff9f0a);
  --rd-brand-soft:   rgba(255,106,0,0.10);
  --rd-brand-soft-2: rgba(255,106,0,0.06);
  --rd-brand-ring:   rgba(255,106,0,0.28);
  --rd-on-brand:     #ffffff;

  /* Superficies */
  --rd-bg:         #f5f5f7;
  --rd-bg-elev:    #ffffff;
  --rd-surface:    #ffffff;
  --rd-surface-2:  #f0f0f3;
  --rd-surface-3:  #e9e9ee;

  /* Texto */
  --rd-text:    #0b0b0f;
  --rd-text-2:  #62636b;
  --rd-text-3:  #9aa0aa;

  /* Bordes / líneas */
  --rd-border:   rgba(10,10,20,0.09);
  --rd-border-2: rgba(10,10,20,0.06);

  /* Semánticos */
  --rd-success:      #12b76a;
  --rd-success-soft: rgba(18,183,106,0.12);
  --rd-success-ink:  #067a45;
  --rd-info:         #2e90fa;
  --rd-info-soft:    rgba(46,144,250,0.12);
  --rd-info-ink:     #1665d8;
  --rd-warn:         #f79009;
  --rd-warn-soft:    rgba(247,144,9,0.14);
  --rd-warn-ink:     #b45309;
  --rd-danger:       #f04438;
  --rd-danger-soft:  rgba(240,68,56,0.12);
  --rd-danger-ink:   #c4271b;

  /* Sombras (tintadas, suaves) */
  --rd-shadow-sm: 0 1px 2px rgba(16,17,26,0.06);
  --rd-shadow:    0 4px 20px rgba(16,17,26,0.06), 0 1px 2px rgba(16,17,26,0.04);
  --rd-shadow-lg: 0 16px 48px rgba(16,17,26,0.12);
  --rd-shadow-brand: 0 8px 22px rgba(255,106,0,0.24);

  /* Toast (siempre oscuro flotante) */
  --rd-toast-bg: #17171b;
  --rd-toast-fg: #ffffff;

  /* Glass (headers/overlays con blur) */
  --rd-glass: rgba(246,247,251,0.74);

  /* Radios */
  --rd-r-xs: 8px;
  --rd-r-sm: 12px;
  --rd-r:    16px;
  --rd-r-lg: 22px;
  --rd-r-pill: 999px;

  /* Tipografía */
  --rd-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  color-scheme: light;
}

/* ---------- TOKENS: DARK ---------- */
/* Forzado por el usuario */
:root[data-theme="dark"] {
  --rd-brand:        #ff7d2e;
  --rd-brand-2:      #ffa53d;
  --rd-brand-strong: #ff924f;
  --rd-brand-grad:   linear-gradient(135deg, #ff7d2e, #ffa53d);
  --rd-brand-soft:   rgba(255,125,40,0.16);
  --rd-brand-soft-2: rgba(255,125,40,0.09);
  --rd-brand-ring:   rgba(255,125,40,0.40);
  --rd-on-brand:     #1a0e04;

  --rd-bg:         #0a0a0c;
  --rd-bg-elev:    #131316;
  --rd-surface:    #161619;
  --rd-surface-2:  #1f1f24;
  --rd-surface-3:  #26262c;

  --rd-text:    #f5f5f7;
  --rd-text-2:  #a1a1aa;
  --rd-text-3:  #6f6f78;

  --rd-border:   rgba(255,255,255,0.10);
  --rd-border-2: rgba(255,255,255,0.06);

  --rd-success-soft: rgba(18,183,106,0.18);
  --rd-success-ink:  #4ade9b;
  --rd-info-soft:    rgba(46,144,250,0.18);
  --rd-info-ink:     #7cb1ff;
  --rd-warn-soft:    rgba(247,144,9,0.18);
  --rd-warn-ink:     #fbbf5a;
  --rd-danger-soft:  rgba(240,68,56,0.20);
  --rd-danger-ink:   #ff8078;

  --rd-shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --rd-shadow:    0 6px 26px rgba(0,0,0,0.5);
  --rd-shadow-lg: 0 24px 60px rgba(0,0,0,0.62);
  --rd-shadow-brand: 0 8px 26px rgba(255,125,40,0.32);

  --rd-toast-bg: #26262c;
  --rd-toast-fg: #f5f5f7;

  --rd-glass: rgba(12,12,15,0.66);

  color-scheme: dark;
}

/* Auto (sigue al sistema) cuando NO hay tema forzado */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --rd-brand:        #ff7d2e;
    --rd-brand-2:      #ffa53d;
    --rd-brand-strong: #ff924f;
    --rd-brand-grad:   linear-gradient(135deg, #ff7d2e, #ffa53d);
    --rd-brand-soft:   rgba(255,125,40,0.16);
    --rd-brand-soft-2: rgba(255,125,40,0.09);
    --rd-brand-ring:   rgba(255,125,40,0.40);
    --rd-on-brand:     #1a0e04;

    --rd-bg:         #0a0a0c;
    --rd-bg-elev:    #131316;
    --rd-surface:    #161619;
    --rd-surface-2:  #1f1f24;
    --rd-surface-3:  #26262c;

    --rd-text:    #f5f5f7;
    --rd-text-2:  #a1a1aa;
    --rd-text-3:  #6f6f78;

    --rd-border:   rgba(255,255,255,0.10);
    --rd-border-2: rgba(255,255,255,0.06);

    --rd-success-soft: rgba(18,183,106,0.18);
    --rd-success-ink:  #4ade9b;
    --rd-info-soft:    rgba(46,144,250,0.18);
    --rd-info-ink:     #7cb1ff;
    --rd-warn-soft:    rgba(247,144,9,0.18);
    --rd-warn-ink:     #fbbf5a;
    --rd-danger-soft:  rgba(240,68,56,0.20);
    --rd-danger-ink:   #ff8078;

    --rd-shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
    --rd-shadow:    0 6px 26px rgba(0,0,0,0.5);
    --rd-shadow-lg: 0 24px 60px rgba(0,0,0,0.62);
    --rd-shadow-brand: 0 8px 26px rgba(255,125,40,0.32);

    --rd-toast-bg: #26262c;
    --rd-toast-fg: #f5f5f7;

    --rd-glass: rgba(12,12,15,0.66);

    color-scheme: dark;
  }
}

/* ---------- BASE ---------- */
.rd-scope, .rd-body {
  font-family: var(--rd-font);
  background: var(--rd-bg);
  color: var(--rd-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Transición suave al cambiar de tema */
html[data-rd-anim] * { transition: background-color .28s ease, border-color .28s ease, color .18s ease; }

/* ============================================================
   COMPONENTES (prefijo rd-) — biblioteca compartida
   ============================================================ */

/* Botones */
.rd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border-radius: var(--rd-r-sm);
  border: 1px solid var(--rd-border);
  background: var(--rd-surface); color: var(--rd-text);
  font-family: var(--rd-font); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: transform .12s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.rd-btn:hover { background: var(--rd-surface-2); }
.rd-btn:active { transform: scale(.98); }
.rd-btn svg { width: 16px; height: 16px; }
.rd-btn-primary {
  background: var(--rd-brand-grad); color: var(--rd-on-brand); border: none;
  box-shadow: var(--rd-shadow-brand);
}
.rd-btn-primary:hover { filter: brightness(1.03); background: var(--rd-brand-grad); }
.rd-btn-success { background: var(--rd-success); color: #fff; border: none; }
.rd-btn-danger  { background: var(--rd-danger);  color: #fff; border: none; }
.rd-btn-ghost   { background: transparent; }
.rd-btn-block   { width: 100%; }

/* Botón de icono redondo (toggle de tema, campana, etc.) */
.rd-icon-btn, .rd-theme-toggle {
  width: 38px; height: 38px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--rd-r-pill);
  border: 1px solid var(--rd-border); background: var(--rd-surface);
  color: var(--rd-text); cursor: pointer;
  transition: background .16s ease, transform .12s ease, border-color .16s ease;
}
.rd-icon-btn:hover, .rd-theme-toggle:hover { background: var(--rd-surface-2); }
.rd-icon-btn:active, .rd-theme-toggle:active { transform: scale(.94); }
.rd-icon-btn svg, .rd-theme-toggle svg { width: 18px; height: 18px; }

/* Cards */
.rd-card {
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-r);
  box-shadow: var(--rd-shadow);
  padding: 20px;
}
.rd-card-flat { box-shadow: none; }

/* Inputs */
.rd-field { display: flex; flex-direction: column; gap: 6px; }
.rd-label { font-size: 12px; font-weight: 600; color: var(--rd-text-2); }
.rd-input, .rd-select, .rd-textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--rd-border); border-radius: var(--rd-r-sm);
  background: var(--rd-bg-elev); color: var(--rd-text);
  font-family: var(--rd-font); font-size: 14px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.rd-input::placeholder, .rd-textarea::placeholder { color: var(--rd-text-3); }
.rd-input:focus, .rd-select:focus, .rd-textarea:focus {
  outline: none; border-color: var(--rd-brand);
  box-shadow: 0 0 0 4px var(--rd-brand-soft);
}

/* Badges / chips */
.rd-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; padding: 4px 10px;
  border-radius: var(--rd-r-pill); white-space: nowrap;
  background: var(--rd-surface-2); color: var(--rd-text-2);
}
.rd-badge-brand   { background: var(--rd-brand-soft);   color: var(--rd-brand); }
.rd-badge-success { background: var(--rd-success-soft); color: var(--rd-success-ink); }
.rd-badge-info    { background: var(--rd-info-soft);    color: var(--rd-info-ink); }
.rd-badge-warn    { background: var(--rd-warn-soft);    color: var(--rd-warn-ink); }
.rd-badge-danger  { background: var(--rd-danger-soft);  color: var(--rd-danger-ink); }

/* Pills / segmented tabs */
.rd-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: var(--rd-r-pill);
  border: 1px solid var(--rd-border); background: var(--rd-surface);
  font-family: var(--rd-font); font-size: 13px; font-weight: 700;
  color: var(--rd-text-2); cursor: pointer; transition: all .14s ease;
}
.rd-pill.active { background: var(--rd-text); color: var(--rd-bg); border-color: var(--rd-text); }

/* Toast */
.rd-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--rd-toast-bg); color: var(--rd-toast-fg);
  padding: 11px 20px; border-radius: var(--rd-r-pill);
  font-size: 13px; font-weight: 600; box-shadow: var(--rd-shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  z-index: 3000; white-space: nowrap;
}
.rd-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Empty state */
.rd-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 60px 24px; color: var(--rd-text-2);
}
.rd-empty svg { width: 44px; height: 44px; opacity: .3; margin-bottom: 14px; color: var(--rd-text-3); }
.rd-empty h3 { font-size: 17px; font-weight: 800; color: var(--rd-text); margin: 0 0 6px; }
.rd-empty p  { font-size: 14px; line-height: 1.5; max-width: 280px; margin: 0; }

/* ---------- SHELL / NAV compartido (para páginas que lo adopten) ---------- */
.rd-shell { display: flex; min-height: 100vh; }
.rd-side {
  width: 232px; flex-shrink: 0; background: var(--rd-bg-elev);
  border-right: 1px solid var(--rd-border); padding: 14px 10px;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.rd-nav { display: flex; flex-direction: column; gap: 2px; }
.rd-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: var(--rd-r-sm); color: var(--rd-text); font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: background .14s ease;
}
.rd-nav-item:hover { background: var(--rd-surface-2); }
.rd-nav-item.active {
  background: var(--rd-brand-soft); border-color: var(--rd-brand-ring); color: var(--rd-brand);
}
.rd-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.rd-main { flex: 1; min-width: 0; padding: 24px; }

/* ============================================================
   APARIENCIA · Wallpapers (fondo) + Modo simple (letras grandes)
   Activados por raudo-theme.js con atributos en <html>.
   El fondo se pinta en <html> (nunca en un overlay), y el <body> se vuelve
   transparente para revelarlo: así NO se tapan clics ni la navegación.
   Las manchas de color van sobre el fondo del tema (var(--rd-bg)), de modo
   que se ven bien en claro y en oscuro. Opt-in: sin selección no cambia nada.
   ============================================================ */
html[data-rd-wall]:not([data-rd-wall="none"]) { background-attachment: fixed; }
html[data-rd-wall]:not([data-rd-wall="none"]) body { background: transparent !important; }
html[data-rd-anim] { transition: background .35s ease; }

/* ── Multicolor ── */
html[data-rd-wall="aurora"] {
  background:
    radial-gradient(900px 520px at 12% -5%, rgba(109,94,252,0.40), transparent 60%),
    radial-gradient(820px 620px at 105% 15%, rgba(0,200,255,0.32), transparent 60%),
    radial-gradient(760px 560px at 50% 120%, rgba(255,106,0,0.24), transparent 62%),
    var(--rd-bg);
}
html[data-rd-wall="sunset"] {
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(255,106,0,0.38), transparent 60%),
    radial-gradient(820px 620px at 100% 10%, rgba(255,79,143,0.32), transparent 60%),
    radial-gradient(900px 700px at 60% 120%, rgba(123,79,255,0.26), transparent 62%),
    var(--rd-bg);
}
html[data-rd-wall="ocean"] {
  background:
    radial-gradient(880px 520px at 10% 0%, rgba(0,180,216,0.38), transparent 60%),
    radial-gradient(820px 640px at 100% 30%, rgba(41,98,255,0.30), transparent 60%),
    radial-gradient(760px 560px at 50% 120%, rgba(0,224,178,0.24), transparent 62%),
    var(--rd-bg);
}
html[data-rd-wall="mesh"] {
  background:
    radial-gradient(680px 500px at 5% 5%, rgba(255,106,0,0.30), transparent 55%),
    radial-gradient(680px 500px at 95% 10%, rgba(123,79,255,0.30), transparent 55%),
    radial-gradient(680px 500px at 10% 95%, rgba(0,200,255,0.28), transparent 55%),
    radial-gradient(680px 500px at 90% 95%, rgba(255,79,143,0.28), transparent 55%),
    var(--rd-bg);
}
html[data-rd-wall="mono"] {
  background:
    radial-gradient(1000px 600px at 20% 0%, rgba(150,150,165,0.28), transparent 60%),
    radial-gradient(900px 620px at 100% 100%, rgba(120,120,135,0.24), transparent 62%),
    var(--rd-bg);
}
/* ── Un solo color ── */
html[data-rd-wall="purple"] {
  background:
    radial-gradient(860px 560px at 12% 0%, rgba(139,92,246,0.42), transparent 62%),
    radial-gradient(700px 520px at 100% 100%, rgba(139,92,246,0.26), transparent 60%),
    var(--rd-bg);
}
html[data-rd-wall="orange"] {
  background:
    radial-gradient(860px 560px at 12% 0%, rgba(255,106,0,0.42), transparent 62%),
    radial-gradient(700px 520px at 100% 100%, rgba(255,140,40,0.26), transparent 60%),
    var(--rd-bg);
}
html[data-rd-wall="camel"] {
  background:
    radial-gradient(860px 560px at 12% 0%, rgba(193,154,107,0.44), transparent 62%),
    radial-gradient(700px 520px at 100% 100%, rgba(160,120,80,0.28), transparent 60%),
    var(--rd-bg);
}
html[data-rd-wall="blue"] {
  background:
    radial-gradient(860px 560px at 12% 0%, rgba(41,98,255,0.40), transparent 62%),
    radial-gradient(700px 520px at 100% 100%, rgba(76,141,255,0.26), transparent 60%),
    var(--rd-bg);
}
html[data-rd-wall="green"] {
  background:
    radial-gradient(860px 560px at 12% 0%, rgba(34,197,94,0.40), transparent 62%),
    radial-gradient(700px 520px at 100% 100%, rgba(16,185,129,0.26), transparent 60%),
    var(--rd-bg);
}
html[data-rd-wall="blueorange"] {
  background:
    radial-gradient(860px 560px at 10% 0%, rgba(41,98,255,0.40), transparent 60%),
    radial-gradient(820px 600px at 100% 100%, rgba(255,106,0,0.34), transparent 60%),
    var(--rd-bg);
}

/* ── MODO SIMPLE ── minimalista: letras más grandes + oculta texto de relleno ── */
html[data-rd-simple="1"] { font-size: 112.5%; }
html[data-rd-simple="1"] body { letter-spacing: 0.005em; line-height: 1.55; }

/* Oculta subtítulos, ayudas y texto decorativo para dejar solo lo esencial.
   Marca con [data-rd-simple-hide] cualquier elemento extra que quieras esconder. */
html[data-rd-simple="1"] .hint,
html[data-rd-simple="1"] .rd-hint,
html[data-rd-simple="1"] .subtitle,
html[data-rd-simple="1"] .adminSub,
html[data-rd-simple="1"] .modalSubX,
html[data-rd-simple="1"] .t2,
html[data-rd-simple="1"] .eyebrow,
html[data-rd-simple="1"] .rd-eyebrow,
html[data-rd-simple="1"] [data-rd-simple-hide] { display: none !important; }

/* Un poco más de aire entre tarjetas para que respire sin el texto de relleno. */
html[data-rd-simple="1"] .card,
html[data-rd-simple="1"] .rd-card { padding-top: 16px; padding-bottom: 16px; }