/* =====================================================================
   shared/css/perfiles.css — paletas de los perfiles visuales (Fase 9)
   La usan la app del cliente y el panel del local. El local elige su
   perfil en «Mi local» y shared/js/perfil.js lo aplica con
   <html data-perfil="clasico|elegante|femenino|masculino">.
   Sin ese atributo (SuperAdmin, ingreso, portada de ARM) no actúa nada:
   queda el azul corporativo de tokens.css.

     clasico    turquesa y verdes agua · claro/oscuro según el celular
     elegante   negro cálido · acento champagne
     femenino   marfil y rosa · acento rosa palo
     masculino  grafito oscuro · acento dorado

   El acento es --brand: lo pone el perfil, o el color propio del local
   (shared/js/perfil.js, corregido para que se lea).
   El formato editorial (serif, líneas finas) vive en app/css/perfiles.css
   y se activa con data-estilo, que el clásico no usa.
   ===================================================================== */
@font-face {
  font-family: "Playfair Display";
  src: url("/shared/fonts/PlayfairDisplay-latin.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Clásico: turquesa (claro) ---------- */
html[data-perfil="clasico"]:root {
  color-scheme: light;
  --brand: #0d9488; --brand-contrast: #ffffff;
  --bg: #f0fdfa; --surface: #ffffff; --surface-2: #e6f7f5; --surface-glass: rgba(240, 253, 250, 0.88);
  --border: #b8e6e0; --text: #0c2825; --text-muted: #4b7a74;
  --ok: #059669; --ok-soft: #d1fae5; --warn: #d97706; --warn-soft: #fef3c7;
  --danger: #dc2626; --danger-soft: #fee2e2; --info: #0d9488; --info-soft: #ccfbf1;
  --st-pending: #d97706; --st-pending-bg: #fef3c7; --st-confirmed: #0d9488; --st-confirmed-bg: #ccfbf1;
  --st-completed: #059669; --st-completed-bg: #d1fae5; --st-cancelled: #4b7a74; --st-cancelled-bg: #e6f7f5;
  --st-noshow: #dc2626; --st-noshow-bg: #fee2e2;
  --shadow: 0 1px 3px rgba(6, 70, 74, 0.04), 0 4px 16px rgba(6, 70, 74, 0.06);
  --shadow-fuerte: 0 4px 12px rgba(6, 70, 74, 0.08), 0 16px 40px rgba(6, 70, 74, 0.12);
  --shadow-card: 0 1px 2px rgba(6, 70, 74, 0.03), 0 2px 8px rgba(6, 70, 74, 0.04);
  --lat-fondo: linear-gradient(180deg, #053c40 0%, #0a5f63 100%);
  --lat-texto: #d9f3f2; --lat-suave: #a6d3d3; --lat-grupo: #7fbcbd;
  --lat-hover: rgba(255, 255, 255, 0.1); --lat-activo-bg: rgba(255, 255, 255, 0.18); --lat-activo-texto: #ffffff;
  --lat-icono-bg: rgba(255, 255, 255, 0.12); --lat-icono-texto: #ffffff; --lat-borde: rgba(255, 255, 255, 0.16);
}
/* Clásico: turquesa (oscuro, según el celular o el botón Tema del panel) */
@media (prefers-color-scheme: dark) {
  html[data-perfil="clasico"]:root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand: #2dd4bf; --brand-contrast: #062019;
    --bg: #071a1d; --surface: #0c2a2d; --surface-2: #123b3f; --surface-glass: rgba(12, 42, 45, 0.86);
    --border: #1d5053; --text: #e4f6f6; --text-muted: #8fbfc2;
    --ok: #34d399; --ok-soft: #052e1e; --warn: #fbbf24; --warn-soft: #2c1d06;
    --danger: #f87171; --danger-soft: #3b0f0f; --info: #5eead4; --info-soft: #0f3a3c;
    --st-pending: #fbbf24; --st-pending-bg: #2c1d06; --st-confirmed: #5eead4; --st-confirmed-bg: #0f3a3c;
    --st-completed: #34d399; --st-completed-bg: #052e1e; --st-cancelled: #9fc4c7; --st-cancelled-bg: #143a3d;
    --st-noshow: #f87171; --st-noshow-bg: #3b0f0f;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-fuerte: 0 4px 12px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15);
    --lat-fondo: linear-gradient(180deg, #031d1f 0%, #06363a 100%);
  }
}
html[data-perfil="clasico"][data-theme="dark"]:root {
  color-scheme: dark;
  --brand: #2dd4bf; --brand-contrast: #062019;
  --bg: #071a1d; --surface: #0c2a2d; --surface-2: #123b3f; --surface-glass: rgba(12, 42, 45, 0.86);
  --border: #1d5053; --text: #e4f6f6; --text-muted: #8fbfc2;
  --ok: #34d399; --ok-soft: #052e1e; --warn: #fbbf24; --warn-soft: #2c1d06;
  --danger: #f87171; --danger-soft: #3b0f0f; --info: #5eead4; --info-soft: #0f3a3c;
  --st-pending: #fbbf24; --st-pending-bg: #2c1d06; --st-confirmed: #5eead4; --st-confirmed-bg: #0f3a3c;
  --st-completed: #34d399; --st-completed-bg: #052e1e; --st-cancelled: #9fc4c7; --st-cancelled-bg: #143a3d;
  --st-noshow: #f87171; --st-noshow-bg: #3b0f0f;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-fuerte: 0 4px 12px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15);
  --lat-fondo: linear-gradient(180deg, #031d1f 0%, #06363a 100%);
}

/* ---------- Elegante: crema cálido y dorado ---------- */
html[data-perfil="elegante"]:root {
  color-scheme: light;
  --brand: #c9a227; --brand-contrast: #ffffff;
  --bg: #faf8f5; --surface: #ffffff; --surface-2: #f4f0ea; --surface-glass: rgba(250, 248, 245, 0.90);
  --border: #e8e0d4; --text: #1a1a1a; --text-muted: #6b6560;
  --radius: 16px; --radius-sm: 12px; --radius-boton: 12px;
  --shadow: 0 2px 10px rgba(80, 60, 30, 0.06); --shadow-fuerte: 0 6px 28px rgba(80, 60, 30, 0.10);
  --shadow-card: 0 1px 4px rgba(80, 60, 30, 0.04);
  --ok: #059669; --ok-soft: #d1fae5; --warn: #d97706; --warn-soft: #fef3c7;
  --danger: #dc2626; --danger-soft: #fee2e2; --info: #c9a227; --info-soft: #fdf6e3;
  --st-pending: #d97706; --st-pending-bg: #fef3c7; --st-confirmed: #c9a227; --st-confirmed-bg: #fdf6e3;
  --st-completed: #059669; --st-completed-bg: #d1fae5; --st-cancelled: #6b6560; --st-cancelled-bg: #f4f0ea;
  --st-noshow: #dc2626; --st-noshow-bg: #fee2e2;
  --lat-fondo: linear-gradient(180deg, #2c2414 0%, #3d3220 100%);
  --lat-texto: #f0e8d8; --lat-suave: #a69a8a; --lat-grupo: #8d8272;
  --lat-hover: rgba(255, 255, 255, 0.08); --lat-activo-bg: rgba(201, 162, 39, 0.18); --lat-activo-texto: #faf0d0;
  --lat-icono-bg: rgba(255, 255, 255, 0.08); --lat-icono-texto: #f0e8d8; --lat-borde: rgba(255, 255, 255, 0.12);
}

/* ---------- Masculino: grafito oscuro y dorado ---------- */
html[data-perfil="masculino"]:root {
  color-scheme: dark;
  --brand: #d4a537; --brand-contrast: #141414;
  --bg: #111316; --surface: #1a1e24; --surface-2: #22282f; --surface-glass: rgba(17, 19, 22, 0.88);
  --border: #30373f; --text: #f0ede8; --text-muted: #9da3ab;
  --radius: 8px; --radius-sm: 6px; --radius-boton: 6px;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-fuerte: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
  --st-confirmed: #d4a537; --st-confirmed-bg: #2a2414; --st-cancelled: #9da3ab; --st-cancelled-bg: #22282f;
  --info: #d4a537; --info-soft: #261f10;
  --lat-fondo: linear-gradient(180deg, #0b0c0e 0%, #171a1e 100%);
  --lat-texto: #ece8df; --lat-suave: #9da3ab; --lat-grupo: #808890;
  --lat-hover: rgba(255, 255, 255, 0.06); --lat-activo-bg: rgba(212, 165, 55, 0.14); --lat-activo-texto: #f0ede8;
  --lat-icono-bg: rgba(255, 255, 255, 0.06); --lat-icono-texto: #f0ede8; --lat-borde: rgba(255, 255, 255, 0.10);
}

/* Masculino: estados como en modo noche */
html[data-perfil="masculino"]:root {
  --ok: #34d399; --ok-soft: #052e1e; --warn: #fbbf24; --warn-soft: #2c1d06;
  --danger: #f87171; --danger-soft: #3b0f0f;
  --st-pending: #fbbf24; --st-pending-bg: #2c1d06;
  --st-completed: #34d399; --st-completed-bg: #052e1e;
  --st-noshow: #f87171; --st-noshow-bg: #3b0f0f;
}

/* ---------- Femenino: marfil y rosa ---------- */
html[data-perfil="femenino"]:root {
  color-scheme: light;
  --brand: #b34d6a; --brand-contrast: #ffffff;
  --bg: #fdf7f4; --surface: #ffffff; --surface-2: #f8f0ec; --surface-glass: rgba(253, 247, 244, 0.90);
  --border: #edd8d0; --text: #3b2a2c; --text-muted: #8a6e78;
  --radius: 20px; --radius-sm: 14px; --radius-boton: 999px;
  --shadow: 0 2px 10px rgba(140, 70, 85, 0.06); --shadow-fuerte: 0 6px 28px rgba(140, 70, 85, 0.12);
  --shadow-card: 0 1px 4px rgba(140, 70, 85, 0.04);
  --ok: #059669; --ok-soft: #d1fae5; --warn: #d97706; --warn-soft: #fef3c7;
  --danger: #dc2626; --danger-soft: #fee2e2; --info: #b34d6a; --info-soft: #fce8ee;
  --st-pending: #d97706; --st-pending-bg: #fef3c7; --st-confirmed: #b34d6a; --st-confirmed-bg: #fce8ee;
  --st-completed: #059669; --st-completed-bg: #d1fae5; --st-cancelled: #8a6e78; --st-cancelled-bg: #f4e8e4;
  --st-noshow: #dc2626; --st-noshow-bg: #fee2e2;
  --lat-fondo: #f6e8e2;
  --lat-texto: #4a2f35; --lat-suave: #8a6e78; --lat-grupo: #a0848d;
  --lat-hover: rgba(179, 77, 106, 0.07); --lat-activo-bg: rgba(179, 77, 106, 0.12); --lat-activo-texto: #8b2f48;
  --lat-icono-bg: rgba(179, 77, 106, 0.10); --lat-icono-texto: #b34d6a; --lat-borde: rgba(140, 70, 85, 0.18);
}

/* ---------- Tonos derivados del acento (los cuatro perfiles) ---------- */
html[data-perfil]:root {
  --font-display: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --brand-soft: rgba(127, 127, 127, 0.10);
  --grad-marca: var(--brand);
  --grad-fondo: radial-gradient(900px 420px at 50% -180px, rgba(127, 127, 127, 0.08), transparent 70%);
  --anillo: 0 0 0 3px rgba(127, 127, 127, 0.2);
}
html[data-perfil="clasico"]:root { --grad-marca: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%); }
@supports (color: color-mix(in srgb, red 10%, white)) {
  html[data-perfil]:root {
    --brand-soft: color-mix(in srgb, var(--brand) 10%, var(--surface));
    --grad-fondo: radial-gradient(900px 420px at 50% -180px, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%);
    --anillo: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);
  }
  html[data-perfil="clasico"]:root {
    --grad-marca: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 58%, #34d399) 100%);
  }
}

/* ---------- Restos de azul corporativo en componentes compartidos ---------- */
html[data-perfil] .toast { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
html[data-perfil] .toast-error { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
html[data-perfil] .toast-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
html[data-perfil] .btn-claro { color: var(--text); }
html[data-perfil] .nav-item.destacado { box-shadow: none; }
html[data-perfil] .btn-peligro { color: #fff; }