:root {
  --bg: #0b0c10;
  --panel: #141722;
  --panel-alt: #181c27;
  --border: rgba(255, 255, 255, 0.1);
  --cyan: #00f3ff;
  --purple: #be00ff;
  --orange: #ff8a00;
  --yellow: #ffe600;
  --green: #00ff66;
  --red: #ff3366;
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.7);
  --text-faint: rgba(255, 255, 255, 0.38);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 50% -10%, #131824, var(--bg));
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
}

.view[hidden] {
  display: none;
}

/* ---------------------------------------------------------------------
   Login
--------------------------------------------------------------------- */

#login-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 340px;
  background: var(--panel);
  border: 1.2px solid rgba(0, 243, 255, 0.35);
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: 0 0 30px rgba(0, 243, 255, 0.08);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.login-brand .brand-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.login-card h1 {
  margin: 0;
  color: var(--cyan);
  font-size: 28px;
  letter-spacing: 1px;
}

.login-card .subtitle {
  margin: 4px 0 24px;
  color: var(--text-faint);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.login-card label {
  display: block;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--text-dim);
}

.login-card input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
}

.login-card input:focus {
  outline: none;
  border-color: var(--cyan);
}

/* ---------------------------------------------------------------------
   Botones
--------------------------------------------------------------------- */

button {
  font-family: inherit;
  cursor: pointer;
}

.btn-primary {
  width: 100%;
  padding: 12px;
  background: var(--cyan);
  color: #000;
  border: none;
  border-radius: 12px;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.5px;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: default;
}

.btn-outline {
  padding: 8px 14px;
  background: transparent;
  color: var(--cyan);
  border: 1.2px solid var(--cyan);
  border-radius: 10px;
  font-weight: bold;
  font-size: 11.5px;
  letter-spacing: 0.4px;
}

.btn-outline:disabled {
  opacity: 0.35;
  cursor: default;
}

.btn-small {
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11px;
}

.btn-small.danger {
  color: var(--red);
  border-color: rgba(255, 51, 102, 0.4);
}

.btn-small.accent {
  color: var(--cyan);
  border-color: rgba(0, 243, 255, 0.4);
}

.btn-small.purple {
  color: var(--purple);
  border-color: rgba(190, 0, 255, 0.4);
}

.btn-small.orange {
  color: var(--orange);
  border-color: rgba(255, 138, 0, 0.4);
}

.btn-small.yellow {
  color: var(--yellow);
  border-color: rgba(255, 230, 0, 0.4);
}

.btn-small.green {
  color: var(--green);
  border-color: rgba(0, 255, 102, 0.4);
}

.btn-small:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Botón de solo icono, con un objetivo de toque más grande que los
   .btn-small normales (pensado para "Ver ficha" en la tabla de Usuarios,
   donde antes había un botón de texto pequeño). */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(0, 243, 255, 0.1);
  color: var(--cyan);
  border: 1px solid rgba(0, 243, 255, 0.4);
  border-radius: 8px;
}

.icon-btn:hover {
  background: rgba(0, 243, 255, 0.18);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.error-text {
  color: var(--red);
  font-size: 12px;
  min-height: 16px;
  margin: 12px 0 0;
  text-align: center;
}

/* ---------------------------------------------------------------------
   Dashboard shell — barra lateral fija + contenido con su propio scroll
--------------------------------------------------------------------- */

.app-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.sidebar {
  width: 232px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px;
  border-bottom: 1px solid var(--border);
}

.sidebar-brand .brand-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}

.sidebar-brand .brand-text {
  color: var(--cyan);
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.6px;
  line-height: 1.2;
}

.sidebar-brand .brand-text span {
  display: block;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: normal;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-top: 2px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 12px;
  flex: 1;
}

.sidebar-nav .tab-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 10px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.sidebar-nav .tab-btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  fill: currentColor;
  opacity: 0.8;
}

.sidebar-nav .tab-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.sidebar-nav .tab-btn.active {
  background: rgba(0, 243, 255, 0.1);
  border-left-color: var(--cyan);
  color: var(--cyan);
}

.sidebar-nav .tab-btn.active svg {
  opacity: 1;
}

.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#current-user-label {
  color: var(--text-dim);
  font-size: 12px;
}

.sidebar-footer .btn-outline {
  width: 100%;
  text-align: center;
}

#content {
  flex: 1;
  min-width: 0;
  padding: 28px 32px;
}

/* ---------------------------------------------------------------------
   Secciones / tablas
--------------------------------------------------------------------- */

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-header h2 {
  margin: 0;
  font-size: 17px;
  color: var(--text);
}

/* Solo el <h2> de las 6 pestañas principales lleva el envoltorio
   .section-title (subsecciones del Dashboard y la ficha de usuario usan
   .section-header sin él) — mayúsculas + icono se quedan acotados a esas
   seis, no se filtran a cabeceras internas. */
.section-title h2 {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: var(--cyan);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-refresh {
  padding: 6px 12px;
  background: transparent;
  color: var(--green);
  border: 1.2px solid var(--green);
  border-radius: 10px;
  font-weight: bold;
  font-size: 11px;
  letter-spacing: 0.4px;
  cursor: pointer;
}

.btn-refresh:hover:not(:disabled) {
  background: rgba(0, 255, 102, 0.1);
}

.btn-refresh:disabled {
  opacity: 0.35;
  cursor: default;
}

.search-input {
  padding: 8px 12px;
  min-width: 240px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
}

.search-input:focus {
  outline: none;
  border-color: var(--cyan);
}

.search-input::placeholder {
  color: var(--text-faint);
}

.data-table-wrap {
  overflow-x: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Tabla "Usuarios con la app desactualizada" del Dashboard: como puede
   crecer sin límite (un usuario más por cada build que se publica sin que
   todos actualicen), se acota a ~4 filas visibles y el resto queda
   accesible con scroll vertical dentro de la propia tabla, en vez de
   alargar la tarjeta indefinidamente. La cabecera queda fija (sticky)
   mientras se hace scroll para no perder de vista las columnas. Altura
   pensada para cabecera + 4 filas con el tamaño de fuente actual de
   table.data-table (10px cabecera / 12.5px celdas).
*/
.outdated-users-wrap {
  max-height: 205px;
  overflow-y: auto;
}

/* `position: sticky` va en los `<th>`, no en el `<tr>` — más fiable entre
   navegadores para filas de tabla. Y necesita un fondo SÓLIDO propio (no
   el degradado translúcido de `table.data-table thead tr`, que deja
   entrever las filas de debajo al hacer scroll): `background-color`
   opaco a juego con el panel, con el mismo degradado cian encima para que
   siga viéndose igual que el resto de tablas. */
.outdated-users-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--panel);
  background-image: linear-gradient(180deg, rgba(0, 243, 255, 0.07), rgba(0, 243, 255, 0.02));
  box-shadow: 0 1px 0 var(--border);
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  /* Fijo, con anchos explícitos por <col> (uno por tabla, ver dashboard.js)
     en vez de dejar que el navegador los adivine. Con table-layout: auto,
     una celda con contenido flex que envuelve (checkboxes, botones de
     Acciones) hace que el navegador reserve un ancho de columna pensado
     para todo en una sola línea, y ese sobrante queda como hueco vacío en
     vez de repartirse bien — siempre justo alrededor de esas columnas. */
  table-layout: fixed;
}

table.data-table thead tr {
  background: linear-gradient(180deg, rgba(0, 243, 255, 0.07), rgba(0, 243, 255, 0.02));
}

table.data-table th {
  text-align: left;
  padding: 14px 16px;
  color: var(--cyan);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(0, 243, 255, 0.25);
  /* Sin nowrap a propósito: si un encabezado es más largo que el
     contenido real de su columna (p. ej. "PANTALLAS HABILITADAS" sobre una
     columna estrecha), forzarlo a una sola línea
     ensancha la columna de más y deja un hueco vacío enorme antes de la
     siguiente — mejor dejar que el texto del encabezado envuelva y que
     la columna se ajuste al contenido real. */
  white-space: normal;
}

table.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  overflow-wrap: break-word;
}

table.data-table th.sortable-th {
  cursor: pointer;
  user-select: none;
}

table.data-table th.sortable-th:hover {
  color: var(--text);
}

.filter-select {
  padding: 8px 12px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
}

.filter-select:focus {
  outline: none;
  border-color: var(--cyan);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 14px 0 4px;
}

.pagination-info {
  color: var(--text-faint);
  font-size: 12px;
}

.pagination-total {
  color: var(--text-faint);
  font-size: 12px;
  margin-right: 4px;
  padding-right: 14px;
  border-right: 1px solid var(--border);
}

.user-link {
  cursor: pointer;
  color: var(--text);
}

.user-link:hover {
  text-decoration: underline;
}

table.data-table tbody tr {
  transition: background-color 0.12s ease;
}

table.data-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}

table.data-table tbody tr:hover {
  background: rgba(0, 243, 255, 0.045);
}

table.data-table tr:last-child td {
  border-bottom: none;
}

table.data-table td.muted {
  color: var(--text-faint);
}

table.data-table td strong {
  font-weight: 600;
  letter-spacing: 0.1px;
}

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.3px;
}

.badge.green {
  background: rgba(0, 255, 102, 0.12);
  border-color: rgba(0, 255, 102, 0.3);
  color: var(--green);
}

.badge.red {
  background: rgba(255, 51, 102, 0.12);
  border-color: rgba(255, 51, 102, 0.3);
  color: var(--red);
}

.badge.purple {
  background: rgba(190, 0, 255, 0.15);
  border-color: rgba(190, 0, 255, 0.35);
  color: var(--purple);
}

.badge.cyan {
  background: rgba(0, 243, 255, 0.12);
  border-color: rgba(0, 243, 255, 0.3);
  color: var(--cyan);
}

.badge.orange {
  background: rgba(255, 138, 0, 0.14);
  border-color: rgba(255, 138, 0, 0.35);
  color: var(--orange);
}

.badge.yellow {
  background: rgba(255, 230, 0, 0.14);
  border-color: rgba(255, 230, 0, 0.35);
  color: var(--yellow);
}

/* Rejilla de 2 columnas fija (no flex-wrap libre): así el número de líneas
   que ocupa esta celda es siempre el mismo para cualquier usuario, sin
   depender de en qué punto exacto le tocara envolver a cada fila — eso es
   lo que descuadraba las columnas cortas de al lado (Ficha, Bloquear
   rutinas) cuando esta celda salía más alta en unas filas que en otras. */
.screen-checks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 10px;
}

.screen-checks label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--text-dim);
  white-space: nowrap;
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Rutinas: una fila por título único. Si el mismo título aparece en varios
   usuarios (plantilla duplicada), esa fila se colapsa a un resumen
   clicable ("N usuarios") en vez de repetir el título una vez por copia;
   al expandirla aparecen las filas individuales indentadas debajo. */
table.data-table tr.routine-group-row {
  cursor: pointer;
  user-select: none;
}

table.data-table tr.routine-group-row:hover {
  background: rgba(0, 243, 255, 0.06);
}

.routine-group-chevron {
  display: inline-block;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  transition: transform 0.15s ease;
}

.routine-group-chevron.collapsed {
  transform: rotate(-90deg);
}

table.data-table tr.routine-subrow td {
  background: rgba(255, 255, 255, 0.015);
}

.routine-subrow-marker {
  color: #fff;
  font-weight: bold;
  font-size: 16px;
}

.bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: rgba(0, 243, 255, 0.06);
  border: 1px solid rgba(0, 243, 255, 0.25);
  border-radius: 12px;
}

.bulk-toolbar span {
  font-size: 12px;
  color: var(--text-dim);
  margin-right: 4px;
}

.bulk-screen-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bulk-screen-group select {
  padding: 5px 8px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 11px;
  font-family: inherit;
}

/* ---------------------------------------------------------------------
   Modal
--------------------------------------------------------------------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 16px;
  z-index: 50;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal {
  width: 100%;
  max-width: 560px;
  background: var(--panel);
  border: 1.2px solid rgba(0, 243, 255, 0.35);
  border-radius: 16px;
  padding: 24px;
}

.modal h3 {
  margin: 0 0 18px;
  color: var(--cyan);
  font-size: 15px;
  letter-spacing: 0.5px;
}

.modal label {
  display: block;
  margin-bottom: 14px;
  font-size: 11.5px;
  color: var(--text-dim);
}

.modal input[type='text'],
.modal input[type='number'],
.modal input[type='url'],
.modal select,
.modal textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 11px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
}

.modal textarea {
  resize: vertical;
  min-height: 60px;
}

.modal .day-checks,
.modal .inline-checks {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.modal .day-checks label,
.modal .inline-checks label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  margin: 0;
  color: var(--text-dim);
}

.user-checklist {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 4px;
  margin-top: 4px;
}

.user-checklist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 0;
}

.user-checklist-row:hover {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
}

.day-exercise-block {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-top: 10px;
}

.day-exercise-block h4 {
  margin: 0 0 8px;
  color: var(--cyan);
  font-size: 12px;
}

.exercise-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
}

.exercise-row input {
  margin: 0;
}

.exercise-row-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  margin-bottom: 6px;
}

.exercise-row .ex-desc {
  width: 100%;
  margin-bottom: 6px;
}

.sets-label {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.exercise-sets-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}

.set-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: 6px;
  align-items: center;
}

.set-reps:disabled {
  color: var(--orange);
  font-weight: bold;
  border-color: rgba(255, 138, 0, 0.5);
  opacity: 1;
}

.set-failure-label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 13px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* ---------------------------------------------------------------------
   Toast
--------------------------------------------------------------------- */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.toast[hidden] {
  display: none;
}

.toast.success {
  background: var(--green);
  color: #06210f;
}

.toast.error {
  background: var(--red);
  color: #fff;
}

.empty-state {
  padding: 40px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}

/* ---------------------------------------------------------------------
   Resumen (KPIs) y ficha de usuario
--------------------------------------------------------------------- */

.kpi-section {
  margin-bottom: 24px;
}

.kpi-section:last-child {
  margin-bottom: 0;
}

.kpi-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.kpi-section-title svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  opacity: 0.7;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.kpi-card {
  background: linear-gradient(165deg, var(--panel-alt), var(--panel));
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: 14px;
  padding: 16px 20px 18px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}

.kpi-card.cyan { border-top-color: var(--cyan); }
.kpi-card.green { border-top-color: var(--green); }
.kpi-card.purple { border-top-color: var(--purple); }

.kpi-value {
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.3px;
}

.kpi-value.cyan { color: var(--cyan); }
.kpi-value.green { color: var(--green); }
.kpi-value.purple { color: var(--purple); }

.kpi-label {
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--text-dim);
  letter-spacing: 0.2px;
}

/* ---------------------------------------------------------------------
   Gráficos del Resumen — SVG hecho a mano, sin librerías externas.
--------------------------------------------------------------------- */

.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

/* Dos tablas/listas del Resumen puestas una junto a otra, a la misma
   altura (grid estira sus hijos por defecto). Con poco espacio horizontal
   caen a una columna sola. */
.two-col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 18px;
}

.two-col-grid > div {
  display: flex;
  flex-direction: column;
}

.two-col-grid .data-table-wrap {
  flex: 1;
}

/* Igual que .two-col-grid pero pensado para tres tablas a la vez (columnas
   más estrechas para que quepan las tres en pantallas de escritorio
   normales antes de caer a menos columnas). */
.three-col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.three-col-grid > div {
  display: flex;
  flex-direction: column;
}

.three-col-grid .data-table-wrap {
  flex: 1;
}

.chart-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
}

.chart-card h3 {
  margin: 0 0 14px;
  color: var(--cyan);
  font-size: 13px;
  letter-spacing: 0.4px;
}

.donut-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.donut-svg {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  flex: 1;
  min-width: 120px;
}

.donut-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.donut-legend-row .muted {
  margin-left: auto;
  color: var(--text-faint);
}

.donut-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bar-cell {
  position: relative;
  display: flex;
  align-items: center;
  height: 20px;
  background: var(--panel-alt);
  border-radius: 6px;
  overflow: hidden;
}

.bar-cell-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(0, 243, 255, 0.22);
  border-radius: 6px;
}

.bar-cell span {
  position: relative;
  padding-left: 8px;
  font-size: 11.5px;
  color: var(--text-dim);
  white-space: nowrap;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.detail-header h2 {
  margin: 0;
  font-size: 19px;
}

.detail-header .muted {
  color: var(--text-faint);
  font-size: 12px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.detail-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
}

.detail-card h3 {
  margin: 0 0 14px;
  color: var(--cyan);
  font-size: 13px;
  letter-spacing: 0.4px;
}

.detail-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
}

.detail-list .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.detail-list .row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.detail-list .row .label {
  color: var(--text-faint);
}

.week-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.routine-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}

.routine-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 18px;
}

.routine-item .routine-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.routine-item .routine-meta {
  color: var(--text-faint);
  font-size: 12px;
}

.week-day {
  flex: 1;
  min-width: 90px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  text-align: center;
}

.week-day .day-name {
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.week-day .day-status {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
}

.week-day.completado { border-color: rgba(0, 255, 102, 0.4); }
.week-day.completado .day-status { color: var(--green); }
.week-day.descanso { opacity: 0.6; }
.week-day.programado .day-status { color: var(--cyan); }
.week-day.en-curso .day-status { color: var(--yellow); }

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.review-card {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

.review-card .review-date {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
  margin-bottom: 8px;
}

.review-photos {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.review-photos img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg);
}

.review-photos .no-photo {
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 8px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 9px;
}

.review-scores {
  display: flex;
  gap: 10px;
  font-size: 10.5px;
  color: var(--text-faint);
}