/* Capa de diseño de Nutrición Ferro.
   Va después de app.css y NO cambia la estructura de ninguna pantalla: ordena
   la jerarquía (tipografía, espacios, estados) y hace que TODO el color neutro
   salga de la marca. Un club azul o una nutricionista en verde azulado
   obtienen fondos, bordes y textos de su propio color, no del verde de Ferro.
   Los colores de estado (verde / dorado / rojo / negro) no dependen de la marca. */

:root{
  --bg:        color-mix(in srgb, var(--sidebar-1) 6%,  #fff);
  --surface-2: color-mix(in srgb, var(--sidebar-1) 3%,  #fff);
  --border:    color-mix(in srgb, var(--sidebar-1) 16%, #fff);
  --text:      color-mix(in srgb, var(--sidebar-2) 92%, #000);
  --muted:     color-mix(in srgb, var(--sidebar-1) 72%, #fff);
  --muted-2:   color-mix(in srgb, var(--sidebar-1) 58%, #fff);
  --on-dark:   color-mix(in srgb, var(--accent) 80%, #fff);
  --shadow:    0 1px 2px color-mix(in srgb, var(--sidebar-2) 10%, transparent), 0 8px 22px color-mix(in srgb, var(--sidebar-2) 7%, transparent);
  --ring:      color-mix(in srgb, var(--accent) 65%, transparent);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:        color-mix(in srgb, var(--sidebar-2) 100%, #000);
    --surface:   color-mix(in srgb, var(--sidebar-1) 82%, #000);
    --surface-2: color-mix(in srgb, var(--sidebar-1) 70%, #000);
    --border:    color-mix(in srgb, var(--sidebar-1) 62%, #fff 14%);
    --text:#EAF2ED; --muted:#B1C6B9; --muted-2:#8FA99A;
  }
}
:root[data-theme="dark"]{
  --bg:        color-mix(in srgb, var(--sidebar-2) 100%, #000);
  --surface:   color-mix(in srgb, var(--sidebar-1) 82%, #000);
  --surface-2: color-mix(in srgb, var(--sidebar-1) 70%, #000);
  --border:    color-mix(in srgb, var(--sidebar-1) 62%, #fff 14%);
  --text:#EAF2ED; --muted:#B1C6B9; --muted-2:#8FA99A;
}

/* ---------- base ---------- */
body{ font-size:14.5px; line-height:1.45; -webkit-font-smoothing:antialiased; }
:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; border-radius:6px; }
input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:none; border-color:var(--accent-dark) !important; box-shadow:0 0 0 3px var(--ring); }
input, select, textarea{ font-size:14px; }
td, th, .value, .kv b{ font-variant-numeric:tabular-nums; }

/* ---------- menú lateral: se sabe dónde estás ---------- */
.sidebar{ position:sticky; top:0; height:100vh; overflow-y:auto; }
.sidebar .brand{ font-size:17px; line-height:1.15; }
.nav-item{ padding:0; margin-bottom:1px; }
.nav-item a{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; border-radius:8px; font-size:14px; }
.nav-item a:focus-visible{ outline-color:var(--on-dark); }
.nav-item:hover{ background:transparent; }
.nav-item:hover a{ background:color-mix(in srgb, #fff 7%, transparent); color:#fff; }
.nav-item.active{ background:transparent; }
.nav-item.active a{ background:color-mix(in srgb, var(--accent) 17%, transparent); color:#fff; box-shadow:inset 3px 0 0 var(--accent); }
.sidebar-foot .who{ font-size:12.5px; }
.sidebar-foot .btn-ghost{ color:var(--sidebar-muted); border-color:color-mix(in srgb, #fff 18%, transparent); }
.sidebar-foot .btn-ghost:hover{ background:color-mix(in srgb, #fff 8%, transparent); color:#fff; }

/* ---------- encabezados de página ---------- */
.content{ padding:30px 40px 64px; }
.content-head{ margin-bottom:22px; align-items:flex-end; }
.content-head h1{ font-size:30px; line-height:1.1; letter-spacing:-.01em; margin-bottom:5px; }
.content-head p{ font-size:14px; line-height:1.4; }
.backlink{ font-size:13.5px; }

/* ---------- tarjetas y cifras ---------- */
.content > .grid{ margin-bottom:18px; }
.card{ padding:20px 22px; }
.card h2{ font-size:18px; letter-spacing:-.005em; margin-bottom:3px; }
.card .sub{ font-size:13.5px; }
.stat .label, .stat-color .label{ font-size:11px; letter-spacing:.07em; }
.stat .value, .stat-color .value{ font-family:Cambria, Georgia, 'Times New Roman', serif; font-size:28px; line-height:1.1; letter-spacing:-.015em; }
.stat .value small, .stat-color .value small{ font-family:Calibri,'Segoe UI',sans-serif; font-size:13.5px; letter-spacing:0; }
.stat .note, .stat-color .note{ font-size:12.5px; }

/* ---------- tablas ---------- */
table{ font-size:14px; }
thead th{ font-size:11.5px; letter-spacing:.07em; padding-bottom:9px; }
tbody td{ padding:11px 10px; }
tbody tr:hover{ background:color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.table-color thead th{ font-size:11.5px; }

/* ---------- botones, pills, pestañas ---------- */
.btn{ font-size:14px; border-radius:10px; padding:10px 18px; }
.btn-sm{ font-size:13px; padding:7px 13px; }
.btn-primary:hover, .btn-gold:hover{ filter:brightness(1.1); }
.btn-ghost{ color:var(--text); }
.pill{ font-size:12px; padding:3px 11px; border-radius:999px; }
.tabs{ gap:2px; }
.tab{ font-size:14px; padding:10px 16px; }
.tab.active{ color:var(--text); border-bottom-width:3px; border-bottom-color:var(--accent); }
:root[data-theme="dark"] .tab.active{ color:#fff; }
.form-field label{ font-size:12px; }
.form-field input, .form-field select, .form-field textarea, .field input, .field select{ padding:9px 11px; }
/* Campos sueltos dentro de tablas (por ejemplo los cortes de pierna 6/12/18 cm): mismo aspecto que el resto de los campos */
table input.num-decimal{ padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font-family:inherit; font-size:inherit; }
table input.num-decimal:focus-visible{ outline:3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:1px; }
.banner{ font-size:13.5px; }
.empty{ font-size:14px; }
.roster-card .name{ font-size:15px; } .roster-card .meta{ font-size:12.5px; }

/* ---------- Inicio: saludo y secciones ---------- */
.bienvenida{ isolation:isolate; padding:30px 34px 32px; border-radius:18px;
  background:
    radial-gradient(700px 360px at 8% -20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    linear-gradient(165deg, var(--sidebar-1), var(--sidebar-2)); }
.bienvenida::after{ display:none; }
.bienvenida .fig{ position:absolute; right:-40px; top:50%; height:150%; aspect-ratio:1085/766; transform:translateY(-52%); z-index:-1;
  background:var(--on-dark); opacity:.13; -webkit-mask:url(/img/proporciones.png) center/contain no-repeat; mask:url(/img/proporciones.png) center/contain no-repeat; }
.bienvenida .eyebrow{ font-size:12px; letter-spacing:.1em; color:var(--sidebar-muted); margin-bottom:8px; }
.bienvenida h1{ font-size:clamp(28px,3.2vw,42px); line-height:1.08; letter-spacing:-.012em; margin-bottom:8px; }
.bienvenida p{ font-size:15px; }
.seccion-titulo{ font-size:12px; letter-spacing:.1em; color:var(--muted); margin-bottom:12px; }
.picker-grid{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.picker-card{ padding:16px 18px; }
.picker-card::before{ display:none; }
.picker-card:hover{ transform:translateY(-1px); }
.picker-card .nombre{ font-size:16px; font-family:Cambria, Georgia, serif; }
.picker-card .sub{ font-size:13px; line-height:1.35; }
.picker-card .flecha{ font-size:20px; top:12px; }

/* ---------- celular y tablet ---------- */
.menu-btn{ display:none; }
@media (max-width:1080px){ .content{ padding:26px 26px 56px; } }
@media (max-width:860px){
  .shell{ flex-direction:column; }
  .sidebar{ position:sticky; z-index:20; width:auto; flex:none; height:auto; max-height:100vh; flex-direction:row; flex-wrap:wrap; align-items:center; padding:10px 14px; }
  .sidebar > div:first-child{ flex:1; min-width:0; }
  .sidebar .divider{ display:none; }
  .menu-btn{ display:inline-flex; align-items:center; gap:8px; border:1.5px solid color-mix(in srgb, #fff 26%, transparent); background:transparent; color:#fff; border-radius:10px; padding:7px 12px; font-weight:700; font-size:14px; cursor:pointer; }
  .menu-btn svg{ width:16px; height:16px; }
  .sidebar > .nav-item, .sidebar > .sidebar-foot{ display:none; }
  .sidebar.abierto{ overflow-y:auto; }
  .sidebar.abierto > .nav-item{ display:block; flex-basis:100%; }
  .sidebar.abierto > .divider{ display:block; flex-basis:100%; }
  .sidebar.abierto > .sidebar-foot{ display:block; flex-basis:100%; margin-top:10px; }
  .content{ padding:20px 16px 48px; }
  .content-head h1{ font-size:26px; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr !important; }
  .form-grid,.form-grid-6{ grid-template-columns:1fr 1fr !important; }
  .bienvenida{ padding:22px 18px 24px; }
  .picker-grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){ .form-grid,.form-grid-6{ grid-template-columns:1fr !important; } }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }