/* OkiroSport — Componentes: Cards, Buttons, Inputs, Badges */

/* ── CARDS ──────────────────────────────────────────────────────── */
.card {
  background:    var(--surface-1);
  box-shadow:    inset 0 0 0 0.5px rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding:       16px;
  margin-bottom: 12px;
  transition:    box-shadow var(--transition);
  position:      relative;
}

.card:focus-within {
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.15), 0 0 16px var(--glow);
}

/* ── BOTONES ────────────────────────────────────────────────────── */
.bs,
.bu {
  width:          100%;
  height:         48px;
  font-family:    var(--font-sans);
  font-weight:    700;
  font-size:      14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor:         pointer;
  border-radius:  var(--radius-md);
  transition:     all 80ms ease;
}

.bs {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  border:     none;
  color:      #000;
}

.bs:hover {
  box-shadow: 0 0 20px var(--glow-strong);
}

.bs:active {
  transform: scale(0.97);
}

.bu {
  background: transparent;
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.12);
  color:      var(--text-3);
}

.rb {
  background: transparent;
  border:     1px solid #ff3333;
  color:      #ff3333;
}

.bia {
  width:          100%;
  height:         48px;
  background:     transparent;
  border:         none;
  font-family:    var(--font-sans);
  font-weight:    600;
  font-size:      13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor:         pointer;
  margin-bottom:  8px;
}

#bd {
  box-shadow: inset 0 0 0 0.5px var(--brand);
  color:      var(--brand);
  background: rgba(139, 77, 255, 0.05);
}

#bs2 {
  box-shadow: inset 0 0 0 0.5px var(--success);
  color:      var(--success);
  background: rgba(52, 211, 153, 0.05);
}

.bia:active {
  transform: scale(0.97);
}

/* ── BOTONES GLASS ──────────────────────────────────────────────── */
.btn-primary {
  background:              rgba(139, 77, 255, 0.12);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter:         blur(20px);
  color:                   var(--brand);
  border:                  none;
  border-radius:           var(--radius-pill);
  padding:                 12px 20px;
  font-family:             var(--font-sans);
  font-weight:             600;
  font-size:               13px;
  letter-spacing:          0.5px;
  cursor:                  pointer;
  position:                relative;
  overflow:                hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 0 0 0.5px rgba(139, 77, 255, 0.5),
    0 0 16px rgba(139, 77, 255, 0.2),
    0 4px 12px rgba(0,0,0,0.4);
  transition: all 0.2s ease;
}

.btn-primary::before {
  content:       '';
  position:      absolute;
  top: 0; left: 0; right: 0;
  height:        50%;
  background:    linear-gradient(180deg, rgba(255,255,255,0.15), transparent);
  pointer-events: none;
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
}

.btn-primary:hover {
  background: rgba(139, 77, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 0 0 0.5px rgba(139, 77, 255, 0.7),
    0 0 24px rgba(139, 77, 255, 0.4),
    0 4px 12px rgba(0,0,0,0.4);
}

.btn-primary:active {
  transform: scale(0.97);
}

.btn-ghost {
  background:     rgba(255, 255, 255, 0.05);
  color:          var(--text-2);
  border:         none;
  border-radius:  var(--radius-pill);
  padding:        12px 20px;
  font-family:    var(--font-sans);
  font-weight:    500;
  font-size:      13px;
  letter-spacing: 0.3px;
  cursor:         pointer;
  position:       relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

.btn-primary.pulsing {
  animation: pulseGlow 4s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.4),
      inset 0 -1px 0 rgba(0,0,0,0.3),
      0 0 0 0.5px rgba(139, 77, 255, 0.5),
      0 0 16px rgba(139, 77, 255, 0.2),
      0 4px 12px rgba(0,0,0,0.4);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.5),
      0 0 0 0.5px rgba(139, 77, 255, 0.7),
      0 0 24px rgba(139, 77, 255, 0.5),
      0 4px 12px rgba(0,0,0,0.4);
  }
}

/* ── INPUTS Y FORMULARIOS ───────────────────────────────────────── */
button {
  font-family: var(--font-sans);
  cursor:      pointer;
}

input[type="number"],
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  width:                   100%;
  background:              rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter:         blur(20px);
  border:                  none;
  border-radius:           var(--radius-md);
  padding:                 12px 14px;
  color:                   var(--text-2);
  font-family:             var(--font-sans);
  font-size:               14px;
  font-weight:             500;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 0 0 0.5px rgba(255,255,255,0.1);
  transition:              all 0.2s ease;
  box-sizing:              border-box;
}

select {
  -webkit-appearance: none;
  appearance:         none;
  cursor:             pointer;
  padding-right:      32px;
}

input:focus,
textarea:focus,
select:focus {
  outline:    none;
  background: rgba(139, 77, 255, 0.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 0 0 1px rgba(139, 77, 255, 0.5),
    0 0 12px rgba(139, 77, 255, 0.2);
}

input::placeholder,
textarea::placeholder {
  color:       var(--text-4);
  font-weight: 400;
}

textarea {
  resize:      vertical;
  min-height:  80px;
  line-height: 1.5;
}

/* Range slider */
input[type="range"] {
  -webkit-appearance: none;
  appearance:         none;
  height:             6px;
  background:         rgba(0, 0, 0, 0.4);
  border-radius:      3px;
  padding:            0;
  box-shadow:         inset 0 2px 4px rgba(0,0,0,0.4);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:              18px;
  height:             18px;
  border-radius:      50%;
  background:         linear-gradient(180deg, #A87BFF 0%, #6425D0 100%);
  cursor:             pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 0 12px rgba(139, 77, 255, 0.6),
    0 2px 4px rgba(0,0,0,0.4);
  transition: all 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 0 16px rgba(139, 77, 255, 0.8),
    0 2px 4px rgba(0,0,0,0.4);
}

input[type="range"]::-moz-range-thumb {
  width:         18px;
  height:        18px;
  border:        none;
  border-radius: 50%;
  background:    linear-gradient(180deg, #A87BFF 0%, #6425D0 100%);
  cursor:        pointer;
  box-shadow:    0 0 12px rgba(139, 77, 255, 0.6);
}

/* Checkboxes */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance:         none;
  width:              22px;
  height:             22px;
  border-radius:      6px;
  background:         rgba(255,255,255,0.05);
  cursor:             pointer;
  position:           relative;
  flex-shrink:        0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 0 0 0.5px rgba(255,255,255,0.15);
  transition: all 0.2s ease;
}

input[type="checkbox"]:checked {
  background: linear-gradient(180deg, #A87BFF 0%, #6425D0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 0 12px rgba(139, 77, 255,0.5);
}

input[type="checkbox"]:checked::after {
  content:         '✓';
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #fff;
  font-weight:     700;
  font-size:       14px;
}

/* Label */
label {
  font-family:    var(--font-sans);
  font-size:      11px;
  color:          var(--text-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight:    500;
  margin-bottom:  6px;
  display:        block;
}

/* ── TOGGLE (overrides checkbox para .tg) ───────────────────────── */
.tg {
  position:    relative;
  width:       38px;
  height:      21px;
  flex-shrink: 0;
}

.tg input[type=checkbox] {
  opacity:    0;
  width:      0;
  height:     0;
  position:   absolute;
  box-shadow: none;
  border:     none;
}

.ts {
  position:      absolute;
  inset:         0;
  background:    var(--surface-2);
  border-radius: 21px;
  cursor:        pointer;
  transition:    background 200ms ease;
}

.ts::before {
  content:       '';
  position:      absolute;
  width:         15px;
  height:        15px;
  left:          3px;
  top:           3px;
  background:    var(--text-3);
  border-radius: 50%;
  transition:    transform 200ms ease, background 200ms ease;
}

.tg input:checked + .ts {
  background: var(--brand);
}

.tg input:checked + .ts::before {
  transform:  translateX(17px);
  background: #000;
}

/* ── BARRAS DE PROGRESO ─────────────────────────────────────────── */
.pt {
  width:         100%;
  height:        8px;
  background:    var(--surface-2);
  border-radius: 0;
  overflow:      hidden;
  position:      relative;
}

.pf {
  height:     100%;
  transition: width 0.5s ease;
}

/* ── BADGES DE RANGO ────────────────────────────────────────────── */
.rank-badge {
  font-family:          var(--font-sans);
  font-size:            11px;
  font-weight:          700;
  padding:              2px 8px;
  letter-spacing:       1px;
  display:              inline-block;
  font-variant-numeric: tabular-nums;
}

/* Escala de aura: el color se gana subiendo de rango.
   Nunca semánticos aquí — el violeta no significa «bien» ni «mal», significa «tú». */
.rank-s { color: var(--rank-s); box-shadow: inset 0 0 0 0.5px var(--rank-s), 0 0 10px rgba(228, 196, 255, 0.45); }
.rank-a { color: var(--rank-a); box-shadow: inset 0 0 0 0.5px var(--rank-a), 0 0 6px rgba(192, 139, 255, 0.28); }
.rank-b { color: var(--rank-b); box-shadow: inset 0 0 0 0.5px var(--rank-b); }
.rank-c { color: var(--rank-c); box-shadow: inset 0 0 0 0.5px var(--rank-c); }
.rank-d { color: var(--rank-d); box-shadow: inset 0 0 0 0.5px var(--rank-d); }
.rank-e { color: var(--rank-e); box-shadow: inset 0 0 0 0.5px var(--rank-e); }

/* ── STREAK BAR ─────────────────────────────────────────────────── */
.streak-bar {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     12px 0;
}

.streak-label {
  font-family:    var(--font-sans);
  font-size:      10px;
  color:          var(--text-3);
  text-transform: uppercase;
  white-space:    nowrap;
}

.streak-days {
  display: flex;
  gap:     6px;
}

.streak-day {
  width:                30px;
  height:               30px;
  border-radius:        50%;
  display:              flex;
  align-items:          center;
  justify-content:      center;
  font-family:          var(--font-sans);
  font-size:            11px;
  font-weight:          600;
  color:                var(--text-4);
  position:             relative;
  overflow:             hidden;
  font-variant-numeric: tabular-nums;
  background:           rgba(255,255,255,0.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    inset 0 0 0 0.5px rgba(255,255,255,0.08);
  transition: all 200ms ease;
}

.streak-day.done {
  background: linear-gradient(180deg, #5EE5B0 0%, #34D399 50%, #1FA873 100%);
  color:      #fff;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.4),
    inset 0 -1.5px 0 rgba(0,0,0,0.2),
    0 2px 4px rgba(0,0,0,0.3);
}

.streak-day.today {
  background: rgba(139, 77, 255, 0.15);
  color:      var(--brand);
  box-shadow:
    inset 0 0 0 1.5px var(--brand),
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 0 12px rgba(139, 77, 255, 0.5);
}

.streak-day.done.today {
  background: linear-gradient(180deg, #5EE5B0 0%, #34D399 50%, #1FA873 100%);
  color:      #fff;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.4),
    inset 0 0 0 1.5px var(--success),
    0 0 12px rgba(52, 211, 153, 0.6);
}

/* ── TÍTULO DE SECCIÓN ──────────────────────────────────────────── */
.stl {
  font-family:    var(--font-sans);
  font-size:      12px;
  color:          var(--brand);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom:  16px;
  display:        flex;
  align-items:    center;
  gap:            8px;
}

.stl::before {
  content: '[ ';
  color:   var(--text-4);
}

.stl::after {
  content: ' ]';
  color:   var(--text-4);
}

/* ── METRIC GRID ────────────────────────────────────────────────── */
.mg {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
  margin-bottom:         12px;
}

.mb {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.ml {
  font-family:    var(--font-sans);
  font-size:      10px;
  color:          var(--text-3);
  text-transform: uppercase;
}

.mv {
  font-family: var(--font-sans);
  font-size:   22px;
  color:       var(--brand);
  font-weight: 400;
  line-height: 1;
}

/* ── OUTPUT IA ──────────────────────────────────────────────────── */
.ib {
  background:              rgba(20, 20, 26, 0.55);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter:         blur(40px) saturate(180%);
  border-radius:           var(--radius-lg);
  padding:                 16px;
  min-height:              60px;
  font-family:             var(--font-sans);
  font-size:               13px;
  line-height:             1.7;
  color:                   var(--text-2);
  white-space:             pre-wrap;
  position:                relative;
  overflow:                hidden;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 0 0 0.5px rgba(255, 255, 255, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.6);
}

/* ── ESTADOS VACÍOS ─────────────────────────────────────────────── */
.empty-state {
  text-align:  center;
  padding:     32px 16px;
  color:       var(--text-4);
  font-family: var(--font-sans);
  font-size:   12px;
}

/* ── LIQUID GLASS — cristal base ────────────────────────────────── */
.glass {
  background:              rgba(20, 20, 26, 0.55);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter:         blur(40px) saturate(180%);
  border-radius:          var(--radius-lg);
  position:               relative;
  overflow:               hidden;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    inset 1px 0 0 rgba(255, 255, 255, 0.06),
    inset -1px 0 0 rgba(255, 255, 255, 0.06),
    0 0 0 0.5px rgba(255, 255, 255, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.6);
}

.glass::before {
  content:         '';
  position:        absolute;
  top: 0; left: 8%; right: 8%;
  height:          1px;
  background:      linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  pointer-events:  none;
  z-index:         1;
}

.glass::after {
  content:         '';
  position:        absolute;
  top: 0; left: 0; right: 0;
  height:          50%;
  background:      linear-gradient(180deg, rgba(255,255,255,0.05), transparent);
  pointer-events:  none;
  z-index:         1;
}

.glass > * {
  position: relative;
  z-index:  2;
}

/* ── LIQUID GLASS — cristal hero ────────────────────────────────── */
.glass-strong {
  background:              rgba(20, 20, 26, 0.5);
  -webkit-backdrop-filter: blur(60px) saturate(200%);
  backdrop-filter:         blur(60px) saturate(200%);
  border-radius:          var(--radius-xl);
  position:               relative;
  overflow:               hidden;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.6),
    inset 1.5px 0 0 rgba(255, 255, 255, 0.08),
    inset -1.5px 0 0 rgba(255, 255, 255, 0.08),
    0 0 0 0.5px rgba(255, 255, 255, 0.1),
    0 24px 60px rgba(0, 0, 0, 0.8),
    0 8px 24px rgba(0, 0, 0, 0.5);
}

.glass-strong::before {
  content:         '';
  position:        absolute;
  top: 0; left: 5%; right: 5%;
  height:          1.5px;
  background:      linear-gradient(90deg, transparent, rgba(255,255,255,0.7) 30%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.7) 70%, transparent);
  pointer-events:  none;
  z-index:         1;
}

.glass-strong::after {
  content:         '';
  position:        absolute;
  top: 0; left: 0; right: 0;
  height:          55%;
  background:      linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
  pointer-events:  none;
  z-index:         1;
  border-radius:   var(--radius-xl) var(--radius-xl) 0 0;
}

.glass-strong > * {
  position: relative;
  z-index:  2;
}

/* ── LIQUID GLASS — cristal cian (misiones, CTAs activos) ────────── */
.glass-cyan {
  background:              rgba(139, 77, 255, 0.05);
  -webkit-backdrop-filter: blur(50px) saturate(200%);
  backdrop-filter:         blur(50px) saturate(200%);
  border-radius:          var(--radius-lg);
  position:               relative;
  overflow:               hidden;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.5),
    inset 1px 0 0 rgba(255, 255, 255, 0.07),
    inset -1px 0 0 rgba(255, 255, 255, 0.07),
    0 0 0 0.5px rgba(139, 77, 255, 0.2),
    0 16px 40px rgba(0, 0, 0, 0.6);
}

.glass-cyan::before {
  content:         '';
  position:        absolute;
  top: 0; left: 5%; right: 5%;
  height:          1px;
  background:      linear-gradient(90deg, transparent, rgba(139, 77, 255, 0.5), transparent);
  pointer-events:  none;
  z-index:         1;
}

.glass-cyan > * {
  position: relative;
  z-index:  2;
}

/* ── LIQUID GLASS — cristal verde (DUNGEON CLEARED) ─────────────── */
.glass-success {
  background:              rgba(52, 211, 153, 0.08);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter:         blur(40px) saturate(180%);
  border-radius:          var(--radius-lg);
  position:               relative;
  overflow:               hidden;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.4),
    0 0 0 0.5px rgba(52, 211, 153, 0.5),
    0 0 24px rgba(52, 211, 153, 0.25),
    0 16px 40px rgba(0, 0, 0, 0.6);
}

.glass-success > * {
  position: relative;
  z-index:  2;
}

/* ── ESQUINAS HUD Solo Leveling ─────────────────────────────────── */
.corner {
  position:       absolute;
  width:          14px;
  height:         14px;
  z-index:        3;
  pointer-events: none;
}

.corner-tl {
  top: -1px; left: -1px;
  border-top:              1.5px solid var(--brand);
  border-left:             1.5px solid var(--brand);
  border-top-left-radius:  14px;
}

.corner-tr {
  top: -1px; right: -1px;
  border-top:               1.5px solid var(--brand);
  border-right:             1.5px solid var(--brand);
  border-top-right-radius:  14px;
}

.corner-bl {
  bottom: -1px; left: -1px;
  border-bottom:             1.5px solid var(--brand);
  border-left:               1.5px solid var(--brand);
  border-bottom-left-radius: 14px;
}

.corner-br {
  bottom: -1px; right: -1px;
  border-bottom:              1.5px solid var(--brand);
  border-right:               1.5px solid var(--brand);
  border-bottom-right-radius: 14px;
}

.corner-success {
  border-color: var(--success);
}

/* ── BARRAS DE PROGRESO GLASS ───────────────────────────────────── */
.bar-bg {
  height:        8px;
  background:    rgba(0,0,0,0.4);
  border-radius: 4px;
  overflow:      hidden;
  box-shadow:    inset 0 2px 4px rgba(0,0,0,0.6), inset 0 -1px 0 rgba(255,255,255,0.05);
  position:      relative;
}

.bar-fill {
  height:        100%;
  background:    linear-gradient(90deg, var(--brand) 0%, var(--success) 100%);
  border-radius: 4px;
  box-shadow:
    0 0 12px rgba(139, 77, 255,0.5),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.2);
  position:      relative;
  transition:    width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bar-fill::after {
  content:       '';
  position:      absolute;
  top: 0; left: 0; right: 0;
  height:        50%;
  background:    linear-gradient(180deg, rgba(255,255,255,0.4), transparent);
  border-radius: 4px 4px 0 0;
  pointer-events: none;
}

/* ── MACRO MINI-CARD ────────────────────────────────────────────── */
.macro {
  background:              rgba(28, 28, 32, 0.5);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter:         blur(20px);
  border-radius:           var(--radius-sm);
  padding:                 10px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 0 0 0.5px rgba(255,255,255,0.06);
}

.macro .macro-label {
  font-size:      9px;
  color:          var(--text-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight:    500;
  display:        block;
  margin-bottom:  0;
}

.macro .macro-value {
  font-size:            16px;
  font-weight:          600;
  margin-top:           2px;
  font-variant-numeric: tabular-nums;
  color:                var(--text-2);
}

/* ════════════════════════════════════════════════════════════════ */
/* AJUSTES MÓVIL (iPhone)                                           */
/* ════════════════════════════════════════════════════════════════ */

/* La racha ocupa todo el ancho disponible sin desbordar */
.streak-bar {
  justify-content: space-between;
}

.streak-days {
  flex:            1;
  justify-content: space-between;
  gap:             4px;
  max-width:       320px;
}

@media (max-width: 767px) {
  /* iOS hace auto-zoom si el input tiene <16px — esto lo elimina */
  input[type="number"],
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea,
  select,
  .lock-card input {
    font-size: 16px;
  }

  .streak-day {
    width:  28px;
    height: 28px;
  }
}

/* ════════════════════════════════════════════════════════════════ */
/* NÚMEROS Y DATOS EN MONOESPACIADA — estética "System"            */
/* ════════════════════════════════════════════════════════════════ */
.mv, .kcal-big, .kcal-label, #td, #td-num,
.rank-badge, .sp-peso, .sp-reps, .sp-num, .macro-label,
.li-date, .er2, .mi {
  font-family: var(--font-mono);
}

/* ── ICONOS SVG (sustituyen a los emojis — kit de marca) ────────── */
.hoy-card-icon svg { width: 22px; height: 22px; display: block; color: var(--text-2); }
.hoy-check-card.done .hoy-card-icon svg { color: var(--success); }
.gym-obj-icon svg { width: 20px; height: 20px; display: block; color: var(--brand); }
.tech-gif-err svg { width: 30px; height: 30px; display: inline-block; color: var(--text-3); }


/* Iconos SVG en glifos de estado y borrado */
.hoy-card-status svg { width: 18px; height: 18px; display: inline-block; vertical-align: middle; }
.meal-del svg       { width: 15px; height: 15px; display: block; }