/* ---------- Colores de cada tema ----------
   Cada salón elige un color (data-tema en <html>). Las variables --t-* son la paleta
   cruda; más abajo se traducen a los nombres que usan las pantallas, para claro y oscuro. */
:root, [data-tema="rosa"] {
  --t-accent: #b4466b; --t-on-accent: #fff; --t-deep: #8e2f51; --t-soft: #f7e6ec; --t-track: #eed2dc; --t-tint: #fdf3f6;
  --t-bg: #fbf7f6; --t-ink: #2b2024; --t-muted: #74666b; --t-line: #efe6e3; --t-head: #6e4a58;
  --t-dark: #2b2024; --t-dark-text: #e6d6dc; --t-pop: #f39bb8; --t-on-pop: #2b2024;
  --t-s1-l: #fbe1d6; --t-s1: #7a3517; --t-s3-l: #ddeaf6; --t-s3: #1f4e75;
}
[data-tema="azul"] {
  --t-accent: #2f6fb5; --t-on-accent: #fff; --t-deep: #1f4e86; --t-soft: #e3eefa; --t-track: #c9dcf2; --t-tint: #f1f6fd;
  --t-bg: #f6f9fc; --t-ink: #1b2433; --t-muted: #5a6575; --t-line: #e2e9f2; --t-head: #3a5578;
  --t-dark: #16243a; --t-dark-text: #c9d6e8; --t-pop: #8fc1f2; --t-on-pop: #16243a;
  --t-s1-l: #e0f2ef; --t-s1: #1e5e55; --t-s3-l: #ece6f7; --t-s3: #4a3a7a;
}
[data-tema="negro"] {
  --t-accent: #26262b; --t-on-accent: #fff; --t-deep: #26262b; --t-soft: #e9e9ec; --t-track: #d2d2d7; --t-tint: #f3f3f5;
  --t-bg: #f7f7f8; --t-ink: #18181b; --t-muted: #62626a; --t-line: #e4e4e7; --t-head: #4a4a52;
  --t-dark: #18181b; --t-dark-text: #c9c9cf; --t-pop: #e4e4e7; --t-on-pop: #18181b;
  --t-s1-l: #f1ede6; --t-s1: #5a4a33; --t-s3-l: #e3e8ee; --t-s3: #2e3e52;
}
[data-tema="coral"] {
  --t-accent: #c8553d; --t-on-accent: #fff; --t-deep: #9c3a26; --t-soft: #fbe7e1; --t-track: #f3cdc2; --t-tint: #fef3ef;
  --t-bg: #fdf8f6; --t-ink: #2d1c17; --t-muted: #74625c; --t-line: #f1e4df; --t-head: #7a4a3d;
  --t-dark: #2d1c17; --t-dark-text: #ebd3cb; --t-pop: #f2a48e; --t-on-pop: #2d1c17;
  --t-s1-l: #fcefd9; --t-s1: #7a4e12; --t-s3-l: #e6eef0; --t-s3: #2e5560;
}
[data-tema="verde"] {
  --t-accent: #587a30; --t-on-accent: #fff; --t-deep: #435e22; --t-soft: #eef2e0; --t-track: #d9e3bf; --t-tint: #f6f8ee;
  --t-bg: #fafaf4; --t-ink: #1f2614; --t-muted: #626a54; --t-line: #e8ebda; --t-head: #4c5e35;
  --t-dark: #232a16; --t-dark-text: #d4ddc0; --t-pop: #b9d184; --t-on-pop: #232a16;
  --t-s1-l: #f5eedc; --t-s1: #6a5320; --t-s3-l: #e3eeea; --t-s3: #2c5446;
}
[data-tema="marron"] {
  --t-accent: #8a5a3c; --t-on-accent: #fff; --t-deep: #6b4128; --t-soft: #f3e7dd; --t-track: #e6d0be; --t-tint: #fbf4ee;
  --t-bg: #faf6f2; --t-ink: #2b1f18; --t-muted: #716259; --t-line: #ede3da; --t-head: #6a4c38;
  --t-dark: #2b1f18; --t-dark-text: #e0d0c3; --t-pop: #d9a77f; --t-on-pop: #2b1f18;
  --t-s1-l: #efede0; --t-s1: #4f4a26; --t-s3-l: #e8e6ee; --t-s3: #45405e;
}
[data-tema="lavanda"] {
  --t-accent: #7b4fb5; --t-on-accent: #fff; --t-deep: #5b3690; --t-soft: #efe7fa; --t-track: #dcccf2; --t-tint: #f7f2fd;
  --t-bg: #f9f7fc; --t-ink: #241b33; --t-muted: #675e74; --t-line: #e8e2f1; --t-head: #57487a;
  --t-dark: #241b33; --t-dark-text: #d6cce6; --t-pop: #c3a6ee; --t-on-pop: #241b33;
  --t-s1-l: #fbe6ef; --t-s1: #8a2e58; --t-s3-l: #e2eef5; --t-s3: #24546e;
}

/* ---------- Nombres que usan las pantallas (modo claro) ---------- */
:root {
  --bg: var(--t-bg);
  --surface: #ffffff;
  --text: var(--t-ink);
  --muted: var(--t-muted);
  --line: var(--t-line);
  --accent: var(--t-accent);
  --accent-text: var(--t-on-accent);
  --accent-soft: var(--t-soft);
  --deep: var(--t-deep);
  --track: var(--t-track);
  --tint: var(--t-tint);
  --head-text: var(--t-head);
  --dark: var(--t-dark);
  --dark-text: var(--t-dark-text);
  --pop: var(--t-pop);
  --on-pop: var(--t-on-pop);
  /* Colores de cada profesional: claro de fondo, fuerte para el texto */
  --s1-l: var(--t-s1-l); --s1-c: var(--t-s1);
  --s3-l: var(--t-s3-l); --s3-c: var(--t-s3);
  --s2-l: var(--t-soft); --s2-c: var(--t-deep);
  --s4-l: #e1f1e8; --s4-c: #2f6f52;
  --s5-l: #fbf0d3; --s5-c: #7a5a0e;
  --s6-l: #ececee; --s6-c: #3f3f46;
  --ok: #2f6f52;
  --ok-soft: #e1f1e8;
  --danger: #b3261e;
  --danger-soft: #fbe9e7;
  --due: #8a5a00;
  --due-soft: #fdf0d5;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -16px rgba(0, 0, 0, .18);
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161314;
    --surface: #211c1e;
    --text: #f3ecee;
    --muted: #b3a6ab;
    --line: #3a3236;
    --accent: var(--t-pop);
    --accent-text: var(--t-on-pop);
    --accent-soft: color-mix(in srgb, var(--t-pop) 20%, #211c1e);
    --deep: var(--t-pop);
    --track: color-mix(in srgb, var(--t-pop) 35%, #211c1e);
    --tint: color-mix(in srgb, var(--t-pop) 8%, #161314);
    --head-text: #d8cbd0;
    --dark: #0e0c0d;
    --dark-text: #cfc3c8;
    --pop: var(--t-pop);
    --on-pop: var(--t-on-pop);
    --s1-l: color-mix(in srgb, var(--t-s1) 45%, #211c1e); --s1-c: #f6eef1;
    --s2-l: color-mix(in srgb, var(--t-pop) 30%, #211c1e); --s2-c: #f6eef1;
    --s3-l: color-mix(in srgb, var(--t-s3) 45%, #211c1e); --s3-c: #f6eef1;
    --s4-l: #23392d; --s4-c: #e3f3ea;
    --s5-l: #3a3018; --s5-c: #f7ecd0;
    --s6-l: #333338; --s6-c: #ececee;
    --ok: #7fcf9f;
    --ok-soft: #1f3529;
    --danger: #f28b82;
    --danger-soft: #3d2220;
    --due: #f2c46d;
    --due-soft: #3a2f17;
    --shadow: none;
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip; /* nada puede desplazar la página hacia los costados */
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--body);
}
h1, h2, h3, p, li, strong { overflow-wrap: break-word; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.015em; font-weight: 700; text-wrap: balance; }
h1 { font-size: 1.75rem; font-weight: 800; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
a { color: var(--deep); }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.hidden { display: none !important; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }
.narrow { max-width: 560px; margin: 0 auto; padding: 0 16px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

/* ---------- Botones y formularios ---------- */
button, .btn {
  font: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 18px;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text);
  cursor: pointer; text-decoration: none; font-weight: 600;
  transition: border-color .15s, background-color .15s, transform .1s;
}
button:hover, .btn:hover { border-color: var(--track); }
button:active, .btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.btn-primary:hover { filter: brightness(1.06); border-color: var(--accent); }
.btn-dark { background: var(--dark); color: #fff; border-color: var(--dark); }
.btn-danger { color: var(--danger); }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: .875rem; border-radius: 10px; }
button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-block { width: 100%; }

label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: 4px; }
input, select, textarea {
  font: inherit; width: 100%;
  min-height: 46px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--text);
}
input:focus, select:focus, textarea:focus, button:focus-visible, .btn:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* iPhone (Safari): los campos de fecha y hora traen un ancho propio y no respetan el de la página
   si conservan su estilo nativo; sin él se ajustan al espacio como el resto de los campos */
@supports (-webkit-touch-callout: none) {
  input[type=time], input[type=date] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; text-align: left; }
  input[type=time]::-webkit-date-and-time-value, input[type=date]::-webkit-date-and-time-value { text-align: left; }
}
.field { margin-bottom: 14px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row > .grow { flex: 1 1 160px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .grid-2 { grid-template-columns: 1fr; } }

.alert { padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; font-size: .9rem; }
.alert-error { background: var(--danger-soft); color: var(--danger); }
.alert-ok { background: var(--ok-soft); color: var(--ok); }

.badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: .75rem; font-weight: 700;
  background: var(--accent-soft); color: var(--deep);
}
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-off { background: var(--danger-soft); color: var(--danger); }
.badge-due { background: var(--due-soft); color: var(--due); }

/* ---------- Encabezado y marca ---------- */
.topbar {
  background: var(--bg);
  position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 12px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; color: var(--text); text-decoration: none; }
.logo span { color: var(--deep); }
.logo-mark { width: 32px; height: 32px; border-radius: 10px; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.logo-mark svg { width: 18px; height: 18px; stroke: var(--accent-text); }

/* Ícono de línea genérico (los SVG usan currentColor) */
.ico { width: 18px; height: 18px; flex: none; }

.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  background: var(--dark); color: #fff;
  padding: 12px 18px; border-radius: 14px; z-index: 100; font-size: .9rem; font-weight: 500;
  max-width: calc(100% - 32px); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .4);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Casillas y opciones con el color de la agenda */
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }

/* Nombre de la marca: "Bell" + "ia" resaltado, como una sola palabra */
.logo .wm { font-weight: inherit; }
.logo .wm i { font-style: normal; color: var(--deep); }

/* Cartel de confirmación (confirmDialog en common.js) */
.confirm-dlg { border: 1px solid var(--line); border-radius: 20px; padding: 22px; width: min(420px, calc(100% - 32px));
  background: var(--surface); color: var(--text); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .35); }
.confirm-dlg::backdrop { background: rgba(0, 0, 0, .4); }
.confirm-dlg h2 { font-size: 1.15rem; margin: 0 0 8px; }
.confirm-dlg p { margin: 0 0 18px; color: var(--muted); line-height: 1.5; }
.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 700; }
@media (prefers-color-scheme: dark) { .btn-danger-solid { color: #1b1012; } }

/* Colores del equipo (los elige cada salón). Los 8 tonos de la paleta validada para distinguirse entre sí,
   también con daltonismo, más un gris neutro. Fondo suave y texto se mezclan con la superficie y el texto. */
:root {
  --pc-azul: #2a78d6; --pc-naranja: #eb6834; --pc-turquesa: #1baf7a; --pc-amarillo: #eda100;
  --pc-rosa: #e87ba4; --pc-verde: #008300; --pc-violeta: #6250d6; --pc-rojo: #e34948; --pc-gris: #8a8a93;
  --pc-mix-l: 16%; --pc-mix-c: 62%;
}
@media (prefers-color-scheme: dark) {
  :root {
    --pc-azul: #3987e5; --pc-naranja: #d95926; --pc-turquesa: #199e70; --pc-amarillo: #c98500;
    --pc-rosa: #d55181; --pc-verde: #008300; --pc-violeta: #9085e9; --pc-rojo: #e66767; --pc-gris: #8a8a93;
    --pc-mix-l: 30%; --pc-mix-c: 28%;
  }
}