/* =====================================================================
   Estilos de página que elige cada barbero (Ajustes → Estilo de tu página).
   "poste" es el de CitaBarber y usa los valores de app.css (con modo oscuro).
   El resto tienen colores fijos. Para añadir uno: copia un bloque, cambia
   los valores y añádelo a LOOKS en js/common.js con sus fuentes.
   ===================================================================== */

[data-look="clasica"]{
  --paper:#121417; --surface:#1B1E23; --ink:#EDE6D6; --muted:#A39C8C; --line:#2C3038; --soft:#23272E;
  --accent:#C9A45C; --on-accent:#121417; --pole2:#C9A45C; --link:#D9B978; --ok:#7BC59A;
  --display:'DM Serif Display',Georgia,serif; --body:'Work Sans',system-ui,sans-serif;
  --r-lg:6px; --r-md:4px; --r-sm:4px; --bw:1px;
  --display-w:400; --display-case:none; --display-style:normal; --title-shadow:none;
  --head-bg:#121417; --head-ink:#EDE6D6; --head-title:#EDE6D6; --head-muted:#A39C8C; --head-line:#2C3038;
  --pole-bg:#C9A45C; --pole-h:2px;
  --sel-bg:#C9A45C; --sel-ink:#121417; --sel-muted:#3A3220;
  --btn-shadow:none; --sel-shadow:none;
  color-scheme:dark;
}

[data-look="urbana"]{
  --paper:#E7E7E3; --surface:#FFFFFF; --ink:#0E0E0E; --muted:#4A4A4A; --line:#0E0E0E; --soft:#F2F2EE;
  --accent:#2F5BFF; --on-accent:#FFFFFF; --pole2:#0E0E0E; --link:#1F45D6; --ok:#1E7A4F;
  --display:'Anton',Impact,sans-serif; --body:'Archivo',system-ui,sans-serif;
  --r-lg:14px; --r-md:10px; --r-sm:10px; --bw:2px;
  --display-w:400; --display-case:uppercase; --display-style:normal; --title-shadow:none;
  --head-bg:#E7E7E3; --head-ink:#0E0E0E; --head-title:#0E0E0E; --head-muted:#2E2E2E; --head-line:#0E0E0E;
  --pole-bg:#2F5BFF; --pole-h:8px;
  --sel-bg:#0E0E0E; --sel-ink:#FFFFFF; --sel-muted:#CFCFCF;
  --btn-shadow:4px 4px 0 #0E0E0E; --sel-shadow:none;
  color-scheme:light;
}

[data-look="minimal"]{
  --paper:#FFFFFF; --surface:#FFFFFF; --ink:#1A1A1A; --muted:#6B6B6B; --line:#E6E6E6; --soft:#F5F4F2;
  --accent:#1A1A1A; --on-accent:#FFFFFF; --pole2:#1A1A1A; --link:#1A1A1A; --ok:#1E7A4F;
  --display:'Manrope',system-ui,sans-serif; --body:'Manrope',system-ui,sans-serif;
  --r-lg:20px; --r-md:14px; --r-sm:999px; --bw:1px;
  --display-w:700; --display-case:none; --display-style:normal; --title-shadow:none;
  --head-bg:#FFFFFF; --head-ink:#1A1A1A; --head-title:#1A1A1A; --head-muted:#6B6B6B; --head-line:#EDEDED;
  --pole-bg:transparent; --pole-h:0px;
  --sel-bg:#1A1A1A; --sel-ink:#FFFFFF; --sel-muted:#D4D4D4;
  --btn-shadow:none; --sel-shadow:none;
  color-scheme:light;
}

[data-look="retro"]{
  --paper:#F4E4C1; --surface:#FBF1DC; --ink:#3B2418; --muted:#6E5340; --line:#3B2418; --soft:#F0DDB8;
  --accent:#B04A20; --on-accent:#FFFFFF; --pole2:#E2A13B; --link:#8E3A16; --ok:#2F6B3A;
  --display:'Shrikhand',Georgia,serif; --body:'Rubik',system-ui,sans-serif;
  --r-lg:24px; --r-md:22px; --r-sm:999px; --bw:2px;
  --display-w:400; --display-case:none; --display-style:normal; --title-shadow:none;
  --head-bg:#3B2418; --head-ink:#FBF1DC; --head-title:#E2A13B; --head-muted:#F0DDB8; --head-line:#3B2418;
  --pole-bg:linear-gradient(#E2A13B 0 33.3%,#D9772E 33.3% 66.6%,#B04A20 66.6%); --pole-h:24px;
  --sel-bg:#B04A20; --sel-ink:#FFFFFF; --sel-muted:#FBE3D2;
  --btn-shadow:0 5px 0 #3B2418; --sel-shadow:none;
  color-scheme:light;
}

[data-look="neon"]{
  --paper:#120A1F; --surface:#1B1030; --ink:#F3EAFE; --muted:#B7A6CF; --line:#3A2659; --soft:#241640;
  --accent:#FF4FA3; --on-accent:#1A0612; --pole2:#3DF0FF; --link:#3DF0FF; --ok:#5FE3A1;
  --display:'Righteous',system-ui,sans-serif; --body:'Sora',system-ui,sans-serif;
  --r-lg:16px; --r-md:14px; --r-sm:12px; --bw:1px;
  --display-w:400; --display-case:none; --display-style:normal; --title-shadow:0 0 14px rgba(255,79,163,.7);
  --head-bg:#120A1F; --head-ink:#F3EAFE; --head-title:#FF7DBB; --head-muted:#B7A6CF; --head-line:#3A2659;
  --pole-bg:linear-gradient(90deg,#FF4FA3,#3DF0FF); --pole-h:3px;
  --sel-bg:#3DF0FF; --sel-ink:#120A1F; --sel-muted:#24304A;
  --btn-shadow:0 0 22px rgba(255,79,163,.55); --sel-shadow:0 0 16px rgba(255,79,163,.45);
  color-scheme:dark;
}

[data-look="oldschool"]{
  --paper:#F3EAD7; --surface:#FFF8EA; --ink:#151515; --muted:#5A5246; --line:#151515; --soft:#EADFC6;
  --accent:#C8102E; --on-accent:#FFFFFF; --pole2:#1B6E4E; --link:#A30D25; --ok:#1B6E4E;
  --display:'Alfa Slab One',Georgia,serif; --body:'Bitter',Georgia,serif;
  --r-lg:8px; --r-md:6px; --r-sm:6px; --bw:2px;
  --display-w:400; --display-case:none; --display-style:normal; --title-shadow:none;
  --head-bg:#151515; --head-ink:#F3EAD7; --head-title:#F2C230; --head-muted:#F3EAD7; --head-line:#151515;
  --pole-bg:linear-gradient(#C8102E 0 50%,#1B6E4E 50%); --pole-h:12px;
  --sel-bg:#1B6E4E; --sel-ink:#FFFFFF; --sel-muted:#D7EDE3;
  --btn-shadow:4px 4px 0 #151515; --sel-shadow:none;
  color-scheme:light;
}

[data-look="bn"]{
  --paper:#FAFAFA; --surface:#FFFFFF; --ink:#0A0A0A; --muted:#5E5E5E; --line:#0A0A0A; --soft:#EFEFEF;
  --accent:#0A0A0A; --on-accent:#FFFFFF; --pole2:#0A0A0A; --link:#0A0A0A; --ok:#1E7A4F;
  --display:'Playfair Display',Georgia,serif; --body:'Jost',system-ui,sans-serif;
  --r-lg:0px; --r-md:0px; --r-sm:0px; --bw:1px;
  --display-w:600; --display-case:none; --display-style:italic; --title-shadow:none;
  --head-bg:#FAFAFA; --head-ink:#0A0A0A; --head-title:#0A0A0A; --head-muted:#5E5E5E; --head-line:#0A0A0A;
  --pole-bg:transparent; --pole-h:0px;
  --sel-bg:#0A0A0A; --sel-ink:#FFFFFF; --sel-muted:#BDBDBD;
  --btn-shadow:none; --sel-shadow:none;
  color-scheme:light;
}

[data-look="mediterraneo"]{
  --paper:#F7F9FC; --surface:#FFFFFF; --ink:#12355B; --muted:#4F6582; --line:#C9D6E6; --soft:#E6EEF8;
  --accent:#1D4E89; --on-accent:#FFFFFF; --pole2:#F4B942; --link:#1D4E89; --ok:#1E7A4F;
  --display:'Fraunces',Georgia,serif; --body:'Nunito Sans',system-ui,sans-serif;
  --r-lg:18px; --r-md:14px; --r-sm:999px; --bw:1px;
  --display-w:700; --display-case:none; --display-style:normal; --title-shadow:none;
  --head-bg:#1D4E89; --head-ink:#FFFFFF; --head-title:#FFFFFF; --head-muted:#D6E4F5; --head-line:#1D4E89;
  --pole-bg:repeating-conic-gradient(#1D4E89 0 25%,#FFFFFF 0 50%) 0 0/16px 16px; --pole-h:16px;
  --sel-bg:#1D4E89; --sel-ink:#FFFFFF; --sel-muted:#D6E4F5;
  --btn-shadow:none; --sel-shadow:none;
  color-scheme:light;
}

[data-look="pastel"]{
  --paper:#FFF6F8; --surface:#FFFFFF; --ink:#3D2B4F; --muted:#6F5F80; --line:#EBD9E6; --soft:#FDE8EF;
  --accent:#7E4FC2; --on-accent:#FFFFFF; --pole2:#9ED9C4; --link:#6B3FAE; --ok:#2F7A5F;
  --display:'Fredoka',system-ui,sans-serif; --body:'Nunito',system-ui,sans-serif;
  --r-lg:28px; --r-md:22px; --r-sm:999px; --bw:1.5px;
  --display-w:600; --display-case:none; --display-style:normal; --title-shadow:none;
  --head-bg:#FDE8EF; --head-ink:#3D2B4F; --head-title:#3D2B4F; --head-muted:#6F5F80; --head-line:#FDE8EF;
  --pole-bg:linear-gradient(90deg,#F7B6C8,#C9B6F2,#9ED9C4); --pole-h:8px;
  --sel-bg:#CFEFE3; --sel-ink:#3D2B4F; --sel-muted:#4F6A60;
  --btn-shadow:none; --sel-shadow:none;
  color-scheme:light;
}

/* En el estilo Mediterráneo el día y la hora elegidos van en amarillo */
[data-look="mediterraneo"] .cd.sel,[data-look="mediterraneo"] .slot[aria-pressed="true"]{background:#F4B942;border-color:#F4B942;color:#12355B}
/* En estos estilos las rayas van debajo de la cabecera, no encima */
[data-look="mediterraneo"] header.site,[data-look="retro"] header.site,[data-look="oldschool"] header.site{display:flex;flex-direction:column-reverse}

/* ---------- Tarjetas para elegir estilo (panel del barbero) ---------- */
.looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.look{display:grid;gap:8px;padding:8px;border:1px solid var(--line);border-radius:14px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.look:hover{border-color:var(--ink)}
.look[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.look-name{font-weight:700;font-size:15px;padding:0 4px;display:flex;justify-content:space-between;gap:6px;align-items:center}
.look-desc{font-size:13px;color:var(--muted);padding:0 4px 4px;line-height:1.35}
.lp{display:block;border-radius:10px;overflow:hidden;background:var(--paper);color:var(--ink);font-family:var(--body);border:1px solid rgb(0 0 0 / .08)}
.lp-pole{display:block;height:min(var(--pole-h),10px);background:var(--pole-bg)}
.lp-head{display:block;background:var(--head-bg);padding:10px 10px 8px}
.lp-title{display:block;font-family:var(--display);font-weight:var(--display-w);font-style:var(--display-style);text-transform:var(--display-case);color:var(--head-title);text-shadow:var(--title-shadow);font-size:22px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-body{display:grid;gap:6px;padding:8px 10px 10px}
.lp-svc{display:flex;justify-content:space-between;align-items:center;padding:5px 8px;font-size:12px;font-weight:600;border:var(--bw) solid var(--line);border-radius:min(var(--r-md),12px);background:var(--surface)}
.lp-svc.sel{background:var(--sel-bg);color:var(--sel-ink);border-color:var(--sel-bg)}
.lp-svc b{font-family:var(--display);font-weight:var(--display-w);font-style:var(--display-style)}
.lp-row{display:flex;gap:4px}
.lp-chip{flex:1;text-align:center;font-size:11px;font-weight:600;padding:4px 0;border:var(--bw) solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.lp-chip.sel{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}