/* Tokens y piezas compartidas entre la web pública y el panel.
   Cada negocio tiene su propia identidad (data-theme en <html>):
   · empresa     → panel del negocio: azul noche y oro, sobrio
   · peluqueria  → claro, crema y frambuesa, elegante
   · bar         → oscuro, verde pizarra y ámbar, de taberna */
:root, [data-theme='empresa'] {
  --bg: #0b1020;
  --bg-2: #10172b;
  --surface: #151d33;
  --surface-2: #1d2742;
  --line: rgba(214, 226, 255, 0.09);
  --line-strong: rgba(214, 226, 255, 0.18);
  --text: #eef2fb;
  --muted: #95a1bc;
  --accent: #d6b56d;
  --accent-2: #a8843f;
  --glow-1: #26407a;
  --glow-2: #6b5326;
  --info: #8fb4ea;
  --ok: #7fc29b;
  --warn: #e8b44c;
  --danger: #ec7d76;
  --grad: linear-gradient(135deg, #f1dc9e 0%, #d6b56d 45%, #a8843f 100%);
  --on-accent: #1b1504;
  --field: rgba(3, 6, 16, 0.4);
  --sunken: rgba(3, 6, 16, 0.3);
  --hover: rgba(255, 255, 255, 0.04);
  --chip: rgba(255, 255, 255, 0.07);
  --ph: linear-gradient(140deg, #1d2742, #26407a 50%, #a8843f);
  --backdrop: radial-gradient(900px circle at 85% -10%, rgba(38, 64, 122, 0.45), transparent 60%),
    linear-gradient(rgba(214, 226, 255, 0.025) 1px, transparent 1px) 0 0 / 100% 48px;
  --radius: 16px;
  --radius-sm: 10px;
  --pill: 10px;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.75);
  --display: 'Playfair Display', Georgia, serif;
  --display-weight: 600;
  --display-spacing: -0.01em;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

/* Plataforma (superadministrador): grafito con turquesa y violeta, para no confundirla con ningún cliente */
[data-theme='plataforma'] {
  --bg: #0b0e13;
  --bg-2: #10151c;
  --surface: #151b24;
  --surface-2: #1c2430;
  --line: rgba(210, 230, 255, 0.08);
  --line-strong: rgba(210, 230, 255, 0.17);
  --text: #eaf1f8;
  --muted: #94a3b5;
  --accent: #2dd4bf;
  --accent-2: #8b6cff;
  --glow-1: #135e57;
  --glow-2: #3b2a7a;
  --info: #7cb4ff;
  --ok: #4ade80;
  --warn: #fbbf24;
  --danger: #f87171;
  --grad: linear-gradient(135deg, #5eead4 0%, #2dd4bf 40%, #8b6cff 100%);
  --on-accent: #04110f;
  --field: rgba(0, 0, 0, 0.35);
  --sunken: rgba(0, 0, 0, 0.25);
  --hover: rgba(255, 255, 255, 0.04);
  --chip: rgba(255, 255, 255, 0.07);
  --ph: linear-gradient(140deg, #1c2430, #135e57 50%, #3b2a7a);
  --backdrop: radial-gradient(900px circle at 100% -10%, rgba(139, 108, 255, 0.22), transparent 60%),
    radial-gradient(800px circle at -10% 110%, rgba(45, 212, 191, 0.16), transparent 60%),
    linear-gradient(rgba(210, 230, 255, 0.025) 1px, transparent 1px) 0 0 / 100% 32px;
  --radius: 14px;
  --radius-sm: 10px;
  --pill: 999px;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
  --display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --display-weight: 600;
  --display-spacing: -0.02em;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

/* Cada plataforma con su color: peluquerías en violeta y rosa, hostelería en ámbar y turquesa */
[data-theme='plataforma'][data-product='peluqueria'] {
  --accent: #d8a4ff;
  --accent-2: #f472b6;
  --grad: linear-gradient(135deg, #f5d0fe 0%, #d8a4ff 45%, #f472b6 100%);
  --on-accent: #1d0b26;
  --glow-1: #4c1d6b;
  --glow-2: #6b1d45;
  --backdrop: radial-gradient(900px circle at 100% -10%, rgba(216, 164, 255, 0.2), transparent 60%),
    radial-gradient(800px circle at -10% 110%, rgba(244, 114, 182, 0.14), transparent 60%),
    linear-gradient(rgba(210, 230, 255, 0.025) 1px, transparent 1px) 0 0 / 100% 32px;
}
[data-theme='plataforma'][data-product='bar'] {
  --accent: #fbbf24;
  --accent-2: #2dd4bf;
  --grad: linear-gradient(135deg, #fde68a 0%, #fbbf24 45%, #2dd4bf 100%);
  --on-accent: #1a1203;
  --glow-1: #5c3d06;
  --glow-2: #0f4f48;
  --backdrop: radial-gradient(900px circle at 100% -10%, rgba(251, 191, 36, 0.16), transparent 60%),
    radial-gradient(800px circle at -10% 110%, rgba(45, 212, 191, 0.14), transparent 60%),
    linear-gradient(rgba(210, 230, 255, 0.025) 1px, transparent 1px) 0 0 / 100% 32px;
}

[data-theme='peluqueria'] {
  --bg: #f8f2ed;
  --bg-2: #f1e6df;
  --surface: #ffffff;
  --surface-2: #f7eee8;
  --line: rgba(84, 44, 54, 0.1);
  --line-strong: rgba(84, 44, 54, 0.2);
  --text: #2e1b22;
  --muted: #6c545d;
  --accent: #a8475f;
  --accent-2: #c4835a;
  --glow-1: #f0b9c4;
  --glow-2: #f2cfae;
  --info: #3b6ea8;
  --ok: #256b42;
  --warn: #8a5900;
  --danger: #b0352f;
  --grad: linear-gradient(135deg, #d47a8e 0%, #b0506a 50%, #8c3a55 100%);
  --on-accent: #ffffff;
  --field: #fffbf8;
  --sunken: #f5ebe5;
  --hover: rgba(168, 71, 95, 0.06);
  --chip: rgba(84, 44, 54, 0.06);
  --ph: linear-gradient(140deg, #f3d3d9, #e6a9b6 45%, #d9a27e);
  --backdrop: radial-gradient(800px circle at 100% 0%, rgba(240, 185, 196, 0.45), transparent 60%),
    radial-gradient(700px circle at 0% 100%, rgba(242, 207, 174, 0.4), transparent 60%);
  --radius: 22px;
  --radius-sm: 14px;
  --pill: 999px;
  --shadow: 0 24px 50px -26px rgba(92, 40, 55, 0.35);
  --display: 'Fraunces', Georgia, serif;
  --display-weight: 500;
  --display-spacing: -0.01em;
  --body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

[data-theme='bar'] {
  --bg: #0d1210;
  --bg-2: #121a16;
  --surface: #18221d;
  --surface-2: #213029;
  --line: rgba(226, 240, 222, 0.09);
  --line-strong: rgba(226, 240, 222, 0.18);
  --text: #f1f2e8;
  --muted: #9ba89e;
  --accent: #eba63c;
  --accent-2: #d2643f;
  --glow-1: #1f5a43;
  --glow-2: #7a4a16;
  --info: #7fb8c9;
  --ok: #8cc79a;
  --warn: #f0c050;
  --danger: #ee7b66;
  --grad: linear-gradient(135deg, #f7c96a 0%, #eba63c 50%, #d2643f 100%);
  --on-accent: #1d1204;
  --field: rgba(0, 0, 0, 0.3);
  --sunken: rgba(0, 0, 0, 0.22);
  --hover: rgba(255, 255, 255, 0.04);
  --chip: rgba(255, 255, 255, 0.07);
  --ph: linear-gradient(140deg, #213029, #1f5a43 50%, #d2643f);
  --backdrop: radial-gradient(800px circle at 0% 0%, rgba(31, 90, 67, 0.4), transparent 60%),
    radial-gradient(rgba(235, 166, 60, 0.07) 1px, transparent 1.5px) 0 0 / 22px 22px;
  --radius: 12px;
  --radius-sm: 8px;
  --pill: 8px;
  --shadow: 0 22px 50px -22px rgba(0, 0, 0, 0.8);
  --display: 'Oswald', 'Arial Narrow', sans-serif;
  --display-weight: 500;
  --display-spacing: 0.01em;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--backdrop), var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: var(--display-weight); line-height: 1.1; margin: 0; letter-spacing: var(--display-spacing); }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: var(--on-accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem; border-radius: var(--pill); border: 1px solid transparent;
  font-weight: 700; font-size: 0.95rem; cursor: pointer; white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--grad); color: var(--on-accent); box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn.primary:hover { box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--accent) 85%, transparent); }
.btn.ghost { border-color: var(--line-strong); background: var(--hover); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn.danger { border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.btn.small { padding: 0.5rem 0.95rem; font-size: 0.85rem; }

.field { display: grid; gap: 0.4rem; }
.field > span { font-size: 0.8rem; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; }
.input, .field input:not([type='checkbox']):not([type='color']), .field select, .field textarea {
  width: 100%; padding: 0.8rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--field);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea { resize: vertical; min-height: 5rem; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.field select option { background: var(--surface); }

/* Las fotos llevan un degradado debajo: si la imagen falla, queda el fondo */
.ph { position: relative; overflow: hidden; background: var(--ph); }
.ph img { width: 100%; height: 100%; object-fit: cover; }

.toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 200; display: grid; gap: 0.5rem; max-width: min(92vw, 380px); }
.toast {
  padding: 0.85rem 1.1rem; border-radius: var(--radius-sm); background: var(--surface-2);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow); font-size: 0.92rem;
  animation: toast-in 0.3s ease both;
}
.toast.error { border-color: color-mix(in srgb, var(--danger) 60%, transparent); }
.toast.ok { border-color: color-mix(in srgb, var(--ok) 60%, transparent); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}