:root {
  color-scheme: light dark;
  --coachapp-bg: var(--bg, #f6f7f9);
  --coachapp-surface: var(--surface, var(--card, #ffffff));
  --coachapp-elev: var(--surface-2, var(--elev, #ffffff));
  --coachapp-text: var(--text, #111827);
  --coachapp-muted: var(--muted, #64748b);
  --coachapp-border: var(--line, var(--border, #e5e7eb));
  --coachapp-primary: var(--brand, var(--primary, #2563eb));
  --coachapp-primary-ink: var(--brand-ink, var(--accent-ink, #ffffff));
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #090d14;
    --surface: rgba(15, 23, 42, .92);
    --surface-2: rgba(30, 41, 59, .82);
    --card: rgba(15, 23, 42, .92);
    --elev: rgba(30, 41, 59, .82);
    --text: #f8fafc;
    --muted: #cbd5e1;
    --muted-2: #94a3b8;
    --line: rgba(255, 255, 255, .16);
    --border: rgba(255, 255, 255, .16);
    --ring: #d6b16d;
    --ring-2: #f0d38f;
    --brand: #d6b16d;
    --primary: #d6b16d;
    --brand-ink: #111827;
    --accent-ink: #111827;
    --shadow: 0 18px 48px rgba(0, 0, 0, .42);
    --shadow-1: 0 18px 48px rgba(0, 0, 0, .44);
    --shadow-2: 0 10px 28px rgba(0, 0, 0, .34);
    --coachapp-bg: var(--bg);
    --coachapp-surface: var(--surface);
    --coachapp-elev: var(--surface-2);
    --coachapp-text: var(--text);
    --coachapp-muted: var(--muted);
    --coachapp-border: var(--line);
    --coachapp-primary: var(--brand);
    --coachapp-primary-ink: var(--brand-ink);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 0;
  overflow-x: hidden;
  background-color: var(--coachapp-bg);
  color: var(--coachapp-text);
}

img,
video,
iframe,
canvas,
svg {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
  color: var(--coachapp-text);
}

input,
select,
textarea {
  background-color: var(--coachapp-elev);
  border-color: var(--coachapp-border);
}

select,
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
  color-scheme: light dark;
}

a {
  overflow-wrap: anywhere;
}

table {
  max-width: 100%;
}

.btn,
button,
a.btn,
.btn-primary,
.btn-ok,
.btn-danger,
.btn-fail,
.btn-outline {
  min-height: 44px;
  touch-action: manipulation;
}

.flash,
.error,
.ok,
.notice,
.nota-prof,
.note-box,
.block-comment-box,
.comment-text,
.reply-bubble {
  overflow-wrap: anywhere;
}

@media (prefers-color-scheme: dark) {
  body:not([style*="--bg"]) {
    background: var(--coachapp-bg) !important;
    color: var(--coachapp-text) !important;
  }

  header,
  .header,
  .topbar,
  .bar,
  .card,
  .panel,
  .trainer,
  .stat,
  .dialog,
  .modal-content,
  .semana-header,
  .semana-content,
  .dia,
  .dia-header,
  .dia-content,
  .ejercicio,
  .superset,
  .emom,
  .superset-card,
  .emom-card,
  .superset-ex-row,
  .ej-row,
  .weekly-card,
  .brand-card,
  .comment-card,
  .comments-section,
  .export-section,
  .block-comment-box,
  .comment,
  .alert-info,
  .empty-note,
  .video-card,
  .chart-container,
  .result,
  .comments .comment-card {
    background-color: var(--coachapp-surface) !important;
    border-color: var(--coachapp-border) !important;
    color: var(--coachapp-text) !important;
  }

  input:not([type="color"]),
  select,
  textarea,
  .inline-edit,
  .ej-name,
  .num-compact,
  .toolbar,
  .note-box,
  .nota-prof,
  .block-comment-box,
  .comment-text,
  .comment-form textarea,
  .reply-form textarea,
  .comments .comment-text {
    background-color: var(--coachapp-elev) !important;
    border-color: var(--coachapp-border) !important;
    color: var(--coachapp-text) !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--coachapp-muted) !important;
    opacity: 1;
  }

  h1,
  h2,
  h3,
  h4,
  label,
  .title,
  .section-title,
  .card .content,
  .card .inner,
  .comment-body,
  .comments h2,
  .comments-section h2,
  .export-section label,
  .comment .author,
  .comment .text,
  .alert-info,
  .nota-prof,
  .block-comment-box,
  .note-box {
    color: var(--coachapp-text) !important;
  }

  p,
  li,
  small,
  .muted,
  .meta,
  .badge,
  .label,
  .timestamp,
  .role,
  .panel-sub,
  .brand-subtitle,
  .stat .label,
  .unit,
  .superset-rests,
  .comment .timestamp {
    color: var(--coachapp-muted) !important;
  }

  .block-comment-box {
    background: rgba(214, 177, 109, .08) !important;
  }

  .block-comment-status {
    color: var(--coachapp-muted) !important;
  }

  .btn,
  a.btn,
  button {
    border-color: var(--coachapp-border);
  }

  .btn-primary {
    background: var(--coachapp-primary) !important;
    color: var(--coachapp-primary-ink) !important;
  }

  .btn-danger,
  .btn-fail {
    color: #fecaca !important;
  }

  .btn-ok {
    color: #bbf7d0 !important;
  }

  .flash.success,
  .ok,
  .result.ok {
    background: rgba(22, 163, 74, .14) !important;
    border-color: rgba(34, 197, 94, .38) !important;
    color: #dcfce7 !important;
  }

  .flash.error,
  .error {
    background: rgba(220, 38, 38, .14) !important;
    border-color: rgba(248, 113, 113, .38) !important;
    color: #fee2e2 !important;
  }

  .badge.pending,
  .result.skip {
    background: rgba(245, 158, 11, .14) !important;
    border-color: rgba(245, 158, 11, .35) !important;
    color: #fde68a !important;
  }
}

@media (max-width: 900px) {
  body {
    min-height: 100svh;
    padding: 0 !important;
  }

  .bar,
  .header-inner,
  .topbar,
  .panel-header,
  .semana-header,
  .dia-header,
  .comment-head {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .wrap,
  .container,
  .alumno-shell,
  .bar,
  .header-inner {
    width: 100% !important;
    max-width: none !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .alumno-shell,
  .container {
    margin-top: 16px !important;
    margin-bottom: 20px !important;
  }

  .layout,
  .grid,
  .summary-grid,
  .form-row,
  .move-grid,
  .metric-grid,
  .form-grid,
  .add-ex,
  .ej-row,
  .superset-head,
  .emom-head,
  .superset-ex-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .section-header,
  .comment .meta,
  .brand-head,
  .title-wrap,
  .semana-title {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .trainer,
  .card,
  .panel,
  .stat,
  .weekly-card,
  .brand-card,
  .semana-content,
  .comments-section,
  .export-section,
  .dialog,
  .modal-content {
    border-radius: 12px !important;
  }

  .actions,
  .nav,
  .buttons,
  .weekly-share-actions,
  .toolbar,
  .modal-actions,
  .progress-wrap,
  .stats {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  .actions > *,
  .nav > *,
  .buttons > *,
  .weekly-share-actions > *,
  .toolbar > *,
  .modal-actions > *,
  .progress-wrap > *,
  .stats > * {
    width: 100% !important;
  }

  .btn,
  a.btn,
  button,
  input,
  select,
  textarea {
    width: 100%;
  }

  .btn-icon,
  .num-step {
    width: 44px !important;
  }

  .num-compact {
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
  }

  .ej-name,
  .section-title input.inline-edit,
  .select-wrap,
  #weekSelector {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: normal !important;
  }

  .progress {
    width: 100% !important;
  }

  .progress-wrap {
    gap: 8px !important;
  }

  .semana,
  .dia,
  .ejercicio,
  .superset-card,
  .emom-card,
  .comment,
  .comment-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .semana-header,
  .dia-header,
  .section-header {
    padding: 12px !important;
  }

  .dia-content,
  .content,
  .semana-content {
    padding: 12px !important;
  }

  .comments-section,
  .export-section {
    margin: 18px 14px !important;
    padding: 14px !important;
  }

  .video-carousel {
    grid-auto-columns: minmax(240px, 84vw) !important;
  }

  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 520px) {
  body {
    font-size: 15px;
  }

  h1,
  .panel-title {
    font-size: 22px !important;
    line-height: 1.18 !important;
  }

  h2,
  .semana-title h2 {
    font-size: 18px !important;
  }

  h3,
  .dia-header h3 {
    font-size: 16px !important;
  }

  .card,
  .panel,
  .trainer,
  .stat,
  .dialog,
  .modal-content,
  .semana-content,
  .ejercicio,
  .superset,
  .emom,
  .superset-card,
  .emom-card {
    padding: 12px !important;
  }

  .brand-head,
  .semana-title,
  .section-title,
  .identity {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  .brand-logo,
  .brand-logo-small {
    flex: 0 0 auto;
  }

  .modal {
    align-items: flex-end !important;
  }

  .modal-content {
    width: 100vw !important;
    max-height: 92svh;
    overflow-y: auto;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}