/* === Tipografía Roboto (auto-hospedada, la misma que mecatolrex.com) === */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Colores del club: fondo claro, rojo corporativo y Roboto. */
  --color-bg: #f4f5f7;          /* fondo de la página y de los campos dentro de tarjetas */
  --color-surface: #ffffff;     /* tarjetas */
  --color-surface-2: #eceef2;   /* fondos suaves y botones secundarios */
  --color-line: #dcdfe5;
  --color-ink: #23262b;
  --color-muted: #6b7280;
  --color-gold: #b41f18;        /* rojo corporativo (color principal) */
  --color-gold-ink: #ffffff;    /* texto sobre el rojo */
  --color-ok: #1f7a35;
  --color-danger: #8c1511;      /* acciones destructivas: rojo más oscuro */
  --color-warning: #b45309;

  /* Alias heredados: las plantillas los usan en estilos en línea. */
  --color-primary: var(--color-gold);
  --color-primary-dark: #94190f;
  --color-success: var(--color-ok);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-muted);
  --color-border: var(--color-line);
  --color-card: var(--color-surface);

  --radius: 0.75rem;            /* campos y botones */
  --radius-lg: 1rem;            /* tarjetas */
  --radius-sm: 0.5rem;          /* elementos pequeños */
  --shadow: 0 1px 2px rgba(35, 38, 43, 0.05);
  --shadow-lg: 0 10px 30px rgba(35, 38, 43, 0.12);
}

html {
  font-size: 16px;
  background: var(--color-bg);
  color-scheme: light;
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: 'Roboto', system-ui, -apple-system, sans-serif;
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-gold); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2 { letter-spacing: -0.01em; }

/* === Layout === */
.container { max-width: 64rem; margin: 0 auto; padding: 0 1rem; width: 100%; }

main.container { padding-top: 1.25rem; padding-bottom: 2.5rem; flex: 1; }

/* === Header === */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-line);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.site-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-ink);
}
.site-title:hover { text-decoration: none; }
.site-logo { height: 2.25rem; width: auto; flex-shrink: 0; }
.site-nav {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  flex-wrap: wrap;
}
.site-nav a {
  color: var(--color-muted);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.site-nav a:hover { color: var(--color-ink); background: var(--color-surface-2); text-decoration: none; }
.site-nav a[aria-current="page"] { background: var(--color-gold); color: var(--color-gold-ink); font-weight: 700; }
.nav-user { font-size: 0.8125rem; color: var(--color-muted); }
/* Aclaración dentro de una etiqueta de formulario, p. ej. «(opcional)». */
.label-hint { font-weight: 400; color: var(--color-muted); }

/* === Footer === */
.site-footer {
  padding: 1.5rem 0;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.8125rem;
  margin-top: auto;
  border-top: 1px solid var(--color-line);
}
.site-footer a { color: var(--color-muted); text-decoration: underline; }
.site-footer a:hover { color: var(--color-gold); }

/* === Card === */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.card-header { margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-line); }
.card-header h2, .card-header h3 { font-size: 1.0625rem; font-weight: 700; color: var(--color-ink); }

/* === Page Header === */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.page-header h1 { font-size: 1.375rem; font-weight: 700; }
.page-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* El subtítulo va debajo del título, no a su derecha. */
.page-header .page-subtitle { flex-basis: 100%; order: 1; margin-top: -0.375rem; }

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s, filter 0.15s, transform 0.1s;
  line-height: 1.4;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; pointer-events: none; }
.btn-primary { background: var(--color-gold); color: var(--color-gold-ink); border-color: var(--color-gold); }
.btn-primary:hover { filter: brightness(1.1); }
/* Secundario: relleno suave, como los botones neutros de la app del club. */
.btn-secondary { background: var(--color-surface-2); color: var(--color-ink); border-color: var(--color-line); }
.btn-secondary:hover { background: #e2e5ea; border-color: var(--color-muted); }
.btn-outline { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-line); }
.btn-outline:hover { background: var(--color-surface-2); border-color: var(--color-muted); }
/* Destructivo: se distingue del rojo principal por ir en hueco. */
.btn-danger {
  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
  color: var(--color-danger);
  border-color: var(--color-danger);
}
.btn-danger:hover { background: var(--color-danger); color: #fff; }
.btn-success { background: var(--color-ok); color: #fff; border-color: var(--color-ok); }
.btn-success:hover { filter: brightness(1.1); }
.btn-link {
  background: none;
  border: none;
  font-family: inherit;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-sm);
}
.btn-link:hover { color: var(--color-ink); background: var(--color-surface-2); }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }

/* === Forms === */
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--color-muted); margin-bottom: 0.375rem; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 0.6875rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-ink);
  background: var(--color-bg);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: color-mix(in srgb, var(--color-muted) 70%, transparent); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-gold) 25%, transparent);
}
.form-group input:disabled { color: var(--color-muted); background: var(--color-surface-2); cursor: not-allowed; }
.form-group.has-error input, .form-group.has-error select, .form-group.has-error textarea { border-color: var(--color-danger); }
.field-error { display: block; font-size: 0.8125rem; color: var(--color-danger); margin-top: 0.375rem; }
.required { color: var(--color-gold); }

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 1rem;
}
.form-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-line); }

/* === Alerts === */
.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
}
.alert-success { background: color-mix(in srgb, var(--color-ok) 10%, transparent); color: var(--color-ok); }
.alert-error   { background: color-mix(in srgb, var(--color-danger) 10%, transparent); color: var(--color-danger); }

/* === Badges === */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.4;
}
.badge-active   { background: color-mix(in srgb, var(--color-ok) 12%, transparent); color: var(--color-ok); }
.badge-inactive { background: var(--color-surface-2); color: var(--color-muted); }
.badge-cancellation { background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-warning); }

/* === Tables === */
/* La tabla se desplaza de lado cuando no cabe (pantallas estrechas). */
.table-card { padding: 0; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.data-table th {
  background: var(--color-surface-2);
  text-align: left;
  padding: 0.625rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-line);
  white-space: nowrap;
}
.data-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-line); vertical-align: middle; }
.data-table tbody tr:hover { background: var(--color-bg); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table a { font-weight: 500; color: var(--color-ink); }
.data-table a:hover { color: var(--color-gold); text-decoration: none; }

/* === Detail grid === */
.detail-grid { display: grid; gap: 0; }
.detail-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--color-line);
  align-items: start;
  gap: 1rem;
}
.detail-row:first-child { padding-top: 0; }
.detail-row:last-child { border-bottom: none; padding-bottom: 0; }
.detail-label { font-weight: 500; color: var(--color-muted); font-size: 0.875rem; }
.detail-value { font-size: 0.9375rem; }

/* === Search === */
.search-form { padding: 0; }
.search-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.search-input {
  flex: 1;
  min-width: 200px;
  padding: 0.6875rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-ink);
  background: var(--color-bg);
}
.search-input::placeholder { color: color-mix(in srgb, var(--color-muted) 70%, transparent); }
.search-input:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-gold) 25%, transparent);
}

/* === Stats === */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  text-align: center;
}
.stat-number { font-size: 2rem; font-weight: 700; color: var(--color-gold); line-height: 1.2; }
.stat-label { font-size: 0.8125rem; color: var(--color-muted); margin-top: 0.25rem; }

/* === Quick actions === */
.quick-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* === Empty state === */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--color-muted); }

/* === Action row === */
.action-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.inline-reset .form-group { max-width: 360px; }

/* === Login page === */
.login-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  padding: 2.5rem 1rem;
}
.login-box { width: 100%; max-width: 24rem; }
.login-logo { display: flex; justify-content: center; margin-bottom: 2rem; }
.login-logo img, .login-logo svg { height: 4rem; width: auto; }
.login-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}
.login-card h1 { font-size: 1.375rem; font-weight: 700; margin-bottom: 1.25rem; text-align: center; }

/* === Inline form (nav logout) === */
.inline-form { display: inline; }

/* === Changelog === */
.page-subtitle { color: var(--color-muted); margin-top: 0.25rem; font-size: 0.9375rem; }

.changelog-entry { margin-bottom: 1.25rem; }

.changelog-version-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.changelog-version {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-gold);
  margin: 0;
}
.changelog-date {
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.changelog-section { padding: 0.75rem 0; }
.changelog-section + .changelog-section { border-top: 1px solid var(--color-line); }

.changelog-section-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
}
.changelog-section-añadido   { background: color-mix(in srgb, var(--color-ok) 12%, transparent); color: var(--color-ok); }
.changelog-section-cambiado  { background: color-mix(in srgb, var(--color-gold) 12%, transparent); color: var(--color-gold); }
.changelog-section-corregido { background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-warning); }
.changelog-section-eliminado { background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); }
.changelog-section-seguridad { background: var(--color-surface-2); color: var(--color-ink); }

.changelog-list {
  list-style: disc;
  padding-left: 1.5rem;
  color: var(--color-ink);
  font-size: 0.9375rem;
}
.changelog-list li { margin-bottom: 0.25rem; }

/* === Notification bell === */
.nav-notifications { position: relative; display: flex; align-items: center; }
.nav-bell {
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}
.nav-bell:hover { background: var(--color-surface-2); color: var(--color-ink); }
.notif-badge {
  background: var(--color-gold);
  color: var(--color-gold-ink);
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  min-width: 1.125rem;
  height: 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.25rem;
  line-height: 1;
}
.notif-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  max-width: 340px;
  z-index: 200;
  overflow: hidden;
}
.notif-dropdown.open { display: block; }
.notif-item {
  display: block;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--color-ink) !important;
  border-bottom: 1px solid var(--color-line);
  line-height: 1.4;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-bg); text-decoration: none; }
.notif-time {
  display: block;
  font-size: 0.75rem;
  color: var(--color-muted);
  margin-top: 0.15rem;
}
.notif-empty {
  display: block;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  color: var(--color-muted);
  text-align: center;
}

/* === Modal dialog === */
.modal {
  border: 1px solid color-mix(in srgb, var(--color-gold) 50%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: var(--color-surface);
  color: var(--color-ink);
  padding: 0;
  max-width: 28rem;
  width: calc(100% - 2rem);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.modal::backdrop { background: color-mix(in srgb, var(--color-ink) 50%, transparent); backdrop-filter: blur(2px); }
.modal-content { padding: 1.25rem; }
.modal-title { margin: 0 0 0.75rem; font-size: 1.125rem; font-weight: 700; }
.modal-body { margin: 0 0 1.25rem; font-size: 0.9375rem; line-height: 1.5; }
.modal-actions { display: flex; gap: 0.625rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* === Checkbox label === */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-ink);
}
.checkbox-label input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
  accent-color: var(--color-gold);
}

/* === Sub-pestañas === */
.sub-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  margin-bottom: 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.sub-tabs::-webkit-scrollbar { display: none; }
.sub-tabs a {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-muted);
}
.sub-tabs a:hover { color: var(--color-ink); text-decoration: none; }
.sub-tabs a[aria-current="page"] {
  background: var(--color-surface);
  color: var(--color-gold);
  box-shadow: var(--shadow);
}

/* === Tira de días === */
.day-strip {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
  margin-bottom: 1rem;
}
.day-strip::-webkit-scrollbar { display: none; }
.day-cell {
  flex: 0 0 auto;
  width: 3.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.5rem 0.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  transition: border-color 0.15s, background 0.15s;
}
.day-cell:hover { border-color: var(--color-muted); text-decoration: none; }
.day-cell.is-past { opacity: 0.55; }
.day-cell.is-selected {
  border-color: var(--color-gold);
  background: color-mix(in srgb, var(--color-gold) 8%, var(--color-surface));
}
.day-cell-weekday { font-size: 0.6875rem; color: var(--color-muted); text-transform: uppercase; }
.day-cell-number { position: relative; font-size: 1.125rem; font-weight: 700; line-height: 1.1; }
.day-cell-today {
  position: absolute;
  right: -0.3rem;
  top: 0.1rem;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 9999px;
  background: var(--color-gold);
}
.day-cell-count { font-size: 0.75rem; font-weight: 600; color: var(--color-muted); }
.day-cell.is-selected .day-cell-count { color: var(--color-gold); }
.day-cell-marks { display: flex; gap: 0.15rem; height: 0.3rem; }
.day-mark { width: 0.3rem; height: 0.3rem; border-radius: 9999px; display: inline-block; }
.day-mark-mine { background: var(--color-gold); }
.day-mark-event { background: var(--color-warning); }

/* === Navegación del día === */
.day-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.day-nav-label { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.day-nav-label strong { font-size: 1.125rem; }
.day-nav-date { font-size: 0.8125rem; color: var(--color-muted); }

.section-title { font-size: 1.0625rem; font-weight: 700; margin: 1.5rem 0 0.75rem; }

/* === Resumen del día === */
.day-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.day-summary-number { font-size: 1.75rem; font-weight: 700; color: var(--color-gold); }
.day-summary-label { color: var(--color-muted); }
.day-summary-guests { margin-left: 0.5rem; font-size: 0.875rem; color: var(--color-muted); }

/* === Mis franjas === */
.my-slot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-line);
}
.my-slot:last-child { border-bottom: none; padding-bottom: 0; }
.my-slot-info { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.my-slot-game { color: var(--color-muted); }
.my-slot-actions { display: flex; align-items: flex-start; gap: 0.5rem; flex-wrap: wrap; }

/* Editor de franja: <details> sin JavaScript. */
.slot-editor summary { cursor: pointer; list-style: none; }
.slot-editor summary::-webkit-details-marker { display: none; }
.slot-editor[open] summary { border-color: var(--color-gold); color: var(--color-gold); }
.slot-form {
  margin-top: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg);
  min-width: min(28rem, 100%);
}
.slot-form .form-group { margin-bottom: 0.75rem; }
.slot-form .form-actions { margin-top: 0.75rem; padding-top: 0.75rem; }

/* === Partidas === */
.party-card { display: flex; flex-direction: column; gap: 0.75rem; }
.party-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.party-game { font-size: 1rem; }
.party-time { margin-left: 0.5rem; font-size: 0.875rem; color: var(--color-muted); }
.party-meta { display: flex; gap: 0.375rem; align-items: center; }
.party-join { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: var(--color-surface-2);
  font-size: 0.8125rem;
  font-weight: 500;
}
.chip.is-me { background: color-mix(in srgb, var(--color-gold) 12%, transparent); color: var(--color-gold); }
.chip-guests { font-size: 0.75rem; color: var(--color-muted); }
.chip.is-me .chip-guests { color: inherit; }
.chip-remove { display: inline-flex; }
.chip-remove button {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0 0 0 0.125rem;
}
.chip-remove button:hover { color: var(--color-danger); }

.badge-keys   { background: color-mix(in srgb, var(--color-gold) 12%, transparent); color: var(--color-gold); }
.badge-guests { background: var(--color-surface-2); color: var(--color-muted); }

.select-inline {
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--color-ink);
}
.block-label { display: block; font-weight: 500; }

/* === Eventos === */
.event-card {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.875rem 1rem;
  margin-bottom: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--color-warning) 35%, var(--color-line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-warning) 6%, var(--color-surface));
}
.event-badge {
  flex-shrink: 0;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  color: var(--color-warning);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
}
.event-body { display: flex; flex-direction: column; gap: 0.125rem; }
.event-time { font-size: 0.8125rem; color: var(--color-muted); }
.event-description { font-size: 0.875rem; color: var(--color-ink); }

.event-entry { display: flex; gap: 1.25rem; align-items: flex-start; }
.event-entry-day {
  flex-shrink: 0;
  width: 4.5rem;
  text-align: center;
  padding: 0.5rem;
  border-radius: var(--radius);
  background: var(--color-surface-2);
}
.event-entry-weekday { display: block; font-size: 0.6875rem; color: var(--color-muted); text-transform: uppercase; }
.event-entry-number { display: block; font-size: 1.5rem; font-weight: 700; color: var(--color-gold); line-height: 1.1; }
.event-entry-month { display: block; font-size: 0.75rem; color: var(--color-muted); }
.event-entry-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; }

/* === Línea de tiempo del calendario === */
.timeline { margin-bottom: 1rem; }
.timeline-track {
  position: relative;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(
    to right,
    var(--color-bg) 0,
    var(--color-bg) calc(100% / 8 - 1px),
    var(--color-line) calc(100% / 8 - 1px),
    var(--color-line) calc(100% / 8)
  );
  border: 1px solid var(--color-line);
  overflow: hidden;
}
.timeline-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--color-muted);
  opacity: 0.55;
}
.timeline-bar.has-keys { background: var(--color-gold); opacity: 0.85; }
.timeline-hours { display: flex; justify-content: space-between; margin-top: 0.25rem; }
.timeline-hour { font-size: 0.6875rem; color: var(--color-muted); }

.legend { list-style: none; display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.legend li { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--color-muted); }
.legend-swatch {
  width: 1.25rem;
  height: 0.625rem;
  border-radius: 0.2rem;
  background: var(--color-muted);
  opacity: 0.55;
}
.legend-swatch.has-keys { background: var(--color-gold); opacity: 0.85; }

/* Tarjetas de estadística que son enlaces. */
a.stat-card { display: block; color: inherit; }
a.stat-card:hover { border-color: var(--color-gold); text-decoration: none; }

/* === Barra inferior (solo móvil) === */
.bottom-nav { display: none; }

/* === Registro de actividad === */
.activity-when { white-space: nowrap; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.activity-details {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
}
.activity-extra { margin-top: 0.375rem; }
.activity-extra summary {
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--color-gold);
}
.activity-extra ul {
  list-style: disc;
  margin: 0.375rem 0 0 1.25rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
}
.activity-extra li { margin-bottom: 0.15rem; }

/* === Versión del build === */
.build-info {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.6875rem;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.build-info-login { display: block; margin: 1.25rem 0 0; text-align: center; }

/* === Responsive === */
@media (max-width: 640px) {
  .detail-row { grid-template-columns: 1fr; gap: 0.25rem; }
  .detail-label { font-size: 0.8125rem; }
  .page-header { flex-direction: column; align-items: flex-start; }
  .page-header h1 { font-size: 1.25rem; }
  .data-table { font-size: 0.8125rem; }
  .data-table th, .data-table td { padding: 0.5rem 0.625rem; }
  .card { padding: 1rem; }
  /* Cabecera en una sola línea: el menú se desplaza de lado si no cabe. */
  .site-title span { display: none; }
  .site-header .container { flex-wrap: nowrap; gap: 0.5rem; }
  .site-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a, .btn-link { padding: 0.375rem 0.5rem; }
  .site-nav .nav-user { display: none; }
  /* Asistencia en pantallas estrechas. */
  .day-cell { width: 2.875rem; }
  .my-slot { flex-direction: column; gap: 0.5rem; }
  .my-slot-actions { width: 100%; }
  .event-entry { gap: 0.75rem; }
  .event-entry-day { width: 3.5rem; }
  .day-nav-label strong { font-size: 1rem; }

  /* Barra inferior fija: en el móvil se navega con el pulgar, no con el menú de
     arriba, que queda fuera de la vista al bajar por la página. */
  .bottom-nav {
    display: flex;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 20;
    border-top: 1px solid var(--color-line);
    background: color-mix(in srgb, var(--color-surface) 95%, transparent);
    backdrop-filter: blur(8px);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.5rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-muted);
  }
  .bottom-nav a:hover { text-decoration: none; }
  .bottom-nav a[aria-current="page"] { color: var(--color-gold); font-weight: 700; }
  .bottom-nav svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* Hueco para que la barra no tape el final de la página. */
  main.container { padding-bottom: 5.5rem; }
  /* Las secciones ya están en la barra inferior: arriba solo quedan la campana y
     el botón de salir. */
  .site-nav > a { display: none; }
  .site-logo { height: 1.75rem; }
}