/* ==========================================================================
   Cultura Fit — sistema de diseño
   --------------------------------------------------------------------------
   Paleta tomada del logo: ámbar #FFC229 sobre negro, con la C en degradado
   arcoíris. Es la misma pareja de la propuesta de programa de 2023, así que la
   app se ve como la marca. UI oscura no por moda: el logo trae "Cultura" en
   blanco y está hecho para fondo negro.

   REGLA DE COLOR QUE NO SE AFLOJA (lección de MUMO, donde azul/naranja es un
   par de identidad y vino/gris uno de énfasis, y nunca se mezclan):

     · ÁMBAR (--brand)   = marca y acción. Botones, enlaces activos, foco.
     · VERDE/NARANJA/ROJO = escala de ADHERENCIA y de alerta. Estado, nunca
       acción. No se usan para botones ni enlaces.
     · ARCOÍRIS (--c-*)   = solo identidad. Nunca codifica un dato.

   El naranja de "flojeando" y el ámbar de marca se parecen: por eso el naranja
   SOLO aparece como punto o chip de estado, jamás como botón.
   ========================================================================== */

:root {
  color-scheme: dark;

  --brand:      #FFC229;
  --brand-600:  #F0AE0C;
  --brand-700:  #C98D06;
  --brand-300:  #FFD97A;
  --brand-soft: rgba(255,194,41,.12);
  --brand-line: rgba(255,194,41,.28);
  --brand-ink:  #17140A;

  --c-amarillo: #F5C518;
  --c-naranja:  #F09A34;
  --c-rojo:     #E65644;
  --c-magenta:  #DB314B;
  --c-verde:    #5BB84A;
  --c-morado:   #8B3FD1;
  --c-azul:     #2E5FD9;
  --c-degradado: linear-gradient(135deg,#F5C518 0%,#F09A34 28%,#E65644 52%,#DB314B 74%,#8B3FD1 100%);

  --bg:        #0B0C0F;
  --surface:   #141519;
  --surface-2: #1B1D23;
  --surface-3: #23262E;
  --surface-4: #2C303A;
  --border:        #292D36;
  --border-soft:   #22262E;
  --border-strong: #3A3F4B;

  --ink:   #F3F4F6;
  --ink-2: #A9AFBC;
  --ink-3: #6F7784;
  --ink-4: #4A515D;

  --ok:     #3DD68C; --ok-bg:     rgba(61,214,140,.13); --ok-line:     rgba(61,214,140,.30);
  --warn:   #FF8A3D; --warn-bg:   rgba(255,138,61,.13); --warn-line:   rgba(255,138,61,.30);
  --danger: #FF5A5F; --danger-bg: rgba(255,90,95,.13);  --danger-line: rgba(255,90,95,.30);
  --info:   #5AA9FF; --info-bg:   rgba(90,169,255,.13); --info-line:   rgba(90,169,255,.30);
  --muted-bg: rgba(255,255,255,.05);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.25);
  --shadow:    0 2px 6px rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.32);
  --shadow-lg: 0 8px 20px rgba(0,0,0,.42), 0 30px 66px rgba(0,0,0,.52);

  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-xl: 26px;

  --fuente: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-300); }

h1, h2, h3 { margin: 0 0 8px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 23px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0 0 10px; }
.sub { color: var(--ink-2); font-size: 13.5px; margin: 0; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }

/* ───────────────────────────── Marca ───────────────────────────────────── */

.marca { display: flex; align-items: center; gap: 10px; padding: 4px 2px 18px; }
.marca-c {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--c-degradado);
  display: grid; place-items: center;
  font-weight: 800; font-size: 19px; color: #fff;
  flex: 0 0 auto;
}
.marca-texto { font-size: 16px; letter-spacing: -.01em; color: var(--ink); }
.marca-texto em { font-style: normal; color: var(--brand); font-weight: 800; }

/* ─────────────────────── Vista cliente (celular) ───────────────────────── */

.vista-cliente { padding-bottom: 76px; }

.barra-cliente {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px 14px;
  background: linear-gradient(180deg, var(--bg) 70%, rgba(11,12,15,.86));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.barra-cliente h1 { font-size: 21px; margin: 0; }
.barra-cliente p { margin: 2px 0 0; color: var(--ink-2); font-size: 13px; }

.contenido-cliente { padding: 16px 18px 24px; max-width: 640px; margin: 0 auto; }

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(20,21,25,.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 4px 9px; color: var(--ink-3); font-size: 10.5px; font-weight: 600;
}
.tab.activo { color: var(--brand); }
.tab-icono {
  width: 21px; height: 21px; border-radius: 6px;
  background: currentColor; opacity: .85;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}

/* ─────────────────────── Vista panel (escritorio) ──────────────────────── */

.vista-admin { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }

.lateral {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 18px 14px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.menu { flex: 1; }
.menu-titulo {
  margin: 16px 0 6px; padding: 0 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-4);
}
.menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; margin-bottom: 1px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: 14px; font-weight: 500;
}
.menu-item:hover { background: var(--surface-2); color: var(--ink); }
.menu-item.activo { background: var(--brand-soft); color: var(--brand); font-weight: 600; }

.lateral-pie {
  display: flex; align-items: center; gap: 10px;
  padding-top: 14px; border-top: 1px solid var(--border-soft);
}
.lateral-pie-texto { font-size: 12.5px; line-height: 1.35; min-width: 0; }
.lateral-pie-texto strong { display: block; color: var(--ink); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-pie-texto a { color: var(--ink-3); font-size: 12px; }

.panel { min-width: 0; }
.panel-cabecera {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.panel-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.panel-cuerpo { padding: 20px 26px 40px; }

.avatar {
  width: 36px; height: 36px; flex: 0 0 auto;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-3); color: var(--ink-2);
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  border: 1px solid var(--border);
}

/* ──────────────────────────── Tarjetas ─────────────────────────────────── */

.tarjeta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  margin-bottom: 14px;
}
.tarjeta.plana { background: var(--surface-2); }
.tarjeta-titulo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}
.tarjeta-titulo h2, .tarjeta-titulo h3 { margin: 0; }

.rejilla { display: grid; gap: 14px; }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.dato { background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--r); padding: 13px 15px; }
.dato-num { font-size: 25px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.dato-etq { color: var(--ink-3); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
.dato-pie { color: var(--ink-2); font-size: 12.5px; margin-top: 5px; }

/* ──────────────────────────── Chips y avisos ───────────────────────────── */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--muted-bg); color: var(--ink-2);
  border: 1px solid var(--border-soft);
}
.chip .punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-ok     { background: var(--ok-bg);     color: var(--ok);     border-color: var(--ok-line); }
.chip-warn   { background: var(--warn-bg);   color: var(--warn);   border-color: var(--warn-line); }
.chip-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.chip-info   { background: var(--info-bg);   color: var(--info);   border-color: var(--info-line); }
.chip-marca  { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }

.aviso {
  border-radius: var(--r); padding: 13px 15px; margin-bottom: 14px;
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 13.5px;
}
.aviso strong { display: block; margin-bottom: 3px; font-size: 14px; }
.aviso p { margin: 0; color: var(--ink-2); }
.aviso-ok     { background: var(--ok-bg);     border-color: var(--ok-line); }
.aviso-warn   { background: var(--warn-bg);   border-color: var(--warn-line); }
.aviso-danger { background: var(--danger-bg); border-color: var(--danger-line); }
.aviso-info   { background: var(--info-bg);   border-color: var(--info-line); }
.aviso-marca  { background: var(--brand-soft); border-color: var(--brand-line); }

.vacio {
  padding: 26px 18px; text-align: center; color: var(--ink-3);
  background: var(--surface-2); border: 1px dashed var(--border);
  border-radius: var(--r); font-size: 13.5px;
}

/* ─────────────────────────────── Botones ───────────────────────────────── */
/* SOLO ámbar o neutro. Nunca verde, naranja ni rojo: esos son estado. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 18px; border-radius: 999px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  border: 1px solid var(--border-strong); background: var(--surface-3); color: var(--ink);
  cursor: pointer; text-decoration: none; transition: .13s ease;
}
.btn:hover { background: var(--surface-4); color: var(--ink); }
.btn-marca { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn-marca:hover { background: var(--brand-600); border-color: var(--brand-600); color: var(--brand-ink); }
.btn-fantasma { background: transparent; border-color: var(--border); color: var(--ink-2); }
.btn-fantasma:hover { background: var(--surface-2); color: var(--ink); }
.btn-grande { padding: 15px 28px; font-size: 16px; width: 100%; }
.btn-chico { padding: 6px 13px; font-size: 12.5px; }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }

.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}

/* ─────────────────────────────── Formularios ───────────────────────────── */

.campo { margin-bottom: 14px; }
.campo > label {
  display: block; margin-bottom: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.campo .pista { color: var(--ink-3); font-size: 12px; margin: 4px 0 0; }

input[type=text], input[type=number], input[type=date], input[type=email],
input[type=password], input[type=tel], select, textarea {
  width: 100%; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--ink);
  font-family: inherit; font-size: 14.5px;
}
textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--ink-4); }

.check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); cursor: pointer; font-size: 14px;
}
.check:hover { border-color: var(--border-strong); }
.check input { margin-top: 3px; accent-color: var(--brand); width: 17px; height: 17px; flex: 0 0 auto; }
.check-texto { min-width: 0; }
.check-etq { display: block; font-size: 11px; color: var(--ink-3); margin-top: 3px; }

.fila { display: flex; gap: 12px; flex-wrap: wrap; }
.fila > * { flex: 1 1 180px; min-width: 0; }

/* ──────────────────────────────── Tablas ───────────────────────────────── */

.tabla-envoltura { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--border); }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tabla th {
  text-align: left; padding: 10px 13px;
  background: var(--surface-2); color: var(--ink-3);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.tabla td { padding: 11px 13px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
table.tabla tr:last-child td { border-bottom: none; }
table.tabla tbody tr:hover { background: var(--surface-2); }
table.tabla td.num, table.tabla th.num { text-align: right; font-family: var(--mono); }

/* ──────────────────────────── Ejercicio / series ───────────────────────── */

.ejercicio-fila {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 15px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); color: var(--ink);
}
.ejercicio-fila:hover { border-color: var(--brand-line); color: var(--ink); }
.ejercicio-fila .orden {
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 8px;
  background: var(--surface-3); color: var(--ink-3);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.ejercicio-fila .cuerpo { flex: 1; min-width: 0; }
.ejercicio-fila .nombre { font-weight: 600; font-size: 14.5px; }
.ejercicio-fila .meta { color: var(--ink-3); font-size: 12.5px; margin-top: 1px; }
.ejercicio-fila.hecho .nombre { color: var(--ink-3); text-decoration: line-through; }

.video-caja {
  position: relative; width: 100%; aspect-ratio: 16/9;
  border-radius: var(--r); overflow: hidden; background: #000;
  border: 1px solid var(--border); margin-bottom: 14px;
}
.video-caja iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.serie {
  display: grid; grid-template-columns: 34px 1fr 1fr auto; gap: 9px;
  align-items: center; margin-bottom: 8px;
}
.serie-n {
  width: 34px; height: 38px; border-radius: var(--r-sm);
  background: var(--surface-3); color: var(--ink-2);
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
}
.serie input { text-align: center; font-family: var(--mono); }
.serie-previo {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-4);
  white-space: nowrap; min-width: 62px; text-align: right;
}

/* ────────────────────────────── Gráficas ───────────────────────────────── */

.grafica { width: 100%; height: auto; display: block; }
.g-rejilla { stroke: var(--border-soft); stroke-width: 1; }
.g-eje { fill: var(--ink-4); font-size: 10.5px; font-family: var(--fuente); }

.aro { display: block; margin: 0 auto; }
.aro-num { fill: var(--ink); font-size: 21px; font-weight: 800; font-family: var(--fuente); }
.aro-sub { fill: var(--ink-3); font-size: 9.5px; font-family: var(--fuente); }

.comp { display: grid; grid-template-columns: 112px 1fr 64px; gap: 10px;
  align-items: center; margin-bottom: 7px; font-size: 12.5px; }
.comp-nombre { color: var(--ink-2); }
.comp-barra { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.comp-barra i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.comp-num { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); text-align: right; }
.comp-sindato .comp-nombre { color: var(--ink-4); }
.comp-sindato .comp-num { color: var(--warn); }

/* ──────────────────────────────── Alertas ──────────────────────────────── */

.alerta {
  border-radius: var(--r); padding: 15px 17px; margin-bottom: 11px;
  background: var(--surface); border: 1px solid var(--border);
  border-left-width: 3px;
}
.alerta.roja     { border-left-color: var(--danger); }
.alerta.naranja  { border-left-color: var(--warn); }
.alerta.amarilla { border-left-color: var(--c-amarillo); }
.alerta-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.alerta-cab h3 { margin: 0; font-size: 14.5px; }
.alerta p { color: var(--ink-2); font-size: 13.5px; margin: 0 0 7px; }
.alerta .reco {
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  border-radius: var(--r-sm); padding: 9px 12px;
  color: var(--brand-300); font-size: 13px; margin: 0;
}
.alerta .reco b { color: var(--brand); }

/* ───────────────────────────────── Pestañas ────────────────────────────── */

.pestanas { display: flex; gap: 3px; overflow-x: auto; border-bottom: 1px solid var(--border);
  margin-bottom: 18px; padding-bottom: 0; }
.pestana {
  padding: 9px 15px; border-radius: var(--r-sm) var(--r-sm) 0 0;
  color: var(--ink-3); font-size: 13.5px; font-weight: 600; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pestana:hover { color: var(--ink-2); }
.pestana.activo { color: var(--brand); border-bottom-color: var(--brand); }

/* ───────────────────────────────── Menú 7 días ─────────────────────────── */

.menu-dia { border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 11px; overflow: hidden; }
.menu-dia-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border-soft);
}
.menu-dia-cab strong { font-size: 14px; }
.menu-tiempo { padding: 10px 14px; border-bottom: 1px solid var(--border-soft); }
.menu-tiempo:last-child { border-bottom: none; }
.menu-tiempo h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-4); font-weight: 700; }
.menu-item-fila { display: flex; justify-content: space-between; gap: 10px;
  font-size: 13.5px; padding: 3px 0; }
.menu-item-fila .g { font-family: var(--mono); color: var(--ink-2); font-size: 12.5px; }

/* ─────────────────────────────── Impresión ─────────────────────────────── */

@media print {
  :root { color-scheme: light; }
  body { background: #fff; color: #111; }
  .tabbar, .lateral, .panel-acciones, .btn, .barra-cliente .avatar { display: none !important; }
  .vista-admin { display: block; }
  .tarjeta { border-color: #ddd; background: #fff; break-inside: avoid; }
  .dato, .tarjeta.plana { background: #f7f7f7; }
  a { color: #111; }
}

/* ───────────────────────────── Responsive ──────────────────────────────── */

@media (max-width: 860px) {
  .vista-admin { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: column; }
  .menu { display: flex; flex-wrap: wrap; gap: 4px; }
  .menu-titulo { width: 100%; margin: 8px 0 2px; }
  .panel-cabecera, .panel-cuerpo { padding-left: 16px; padding-right: 16px; }
}