/* ════════════════════════════════════════════════════════════
   CorteClaro · Tema "Apple dark" (opción A) — conmutable por Tweak
   Refina el dark industrial: más aire, superficies escalonadas,
   sombras suaves, esquinas redondeadas, tipografía de sistema,
   translucidez sutil y micro-animaciones. Reversible (data-tema).
   ════════════════════════════════════════════════════════════ */

body[data-tema="apple"] {
  --bg: #0d0d0f;
  --card: #1c1c1f;
  --card2: #17171a;
  --line: #2a2a2e;
  --input: #232327;
  --input-line: #34343a;
  --txt: #f5f5f7;
  --txt2: #d8d8dc;
  --txt3: #a6a6ac;
  --txt4: #86868b;
  --gold: #C9AE72;
  --radius: 18px;
}
body[data-tema="apple"] {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Manrope', system-ui, sans-serif;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(201,174,114,.06), transparent 60%),
    var(--bg);
  letter-spacing: -0.01em;
}

/* Topbar translúcida */
body[data-tema="apple"] .topbar,
body[data-tema="apple"] .fases {
  background: rgba(24,24,27,.72);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Superficies: sombra suave en vez de bordes marcados */
body[data-tema="apple"] .aj-card,
body[data-tema="apple"] .cost-card,
body[data-tema="apple"] .partida-card,
body[data-tema="apple"] .kpi-card,
body[data-tema="apple"] .mat-row,
body[data-tema="apple"] .hero-price,
body[data-tema="apple"] .wf,
body[data-tema="apple"] .qlist,
body[data-tema="apple"] .modal,
body[data-tema="apple"] .dxfzoom,
body[data-tema="apple"] .cubeta,
body[data-tema="apple"] #cc-panel,
body[data-tema="apple"] .margin-ctl {
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.05);
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 34px -14px rgba(0,0,0,.7);
}

/* Tipografía: menos mono, menos mayúsculas gritadas */
body[data-tema="apple"] .esp-sec,
body[data-tema="apple"] .sec-head h2,
body[data-tema="apple"] .dock-sec h3,
body[data-tema="apple"] .lam-sec {
  letter-spacing: 0.04em;
  font-weight: 600;
}
body[data-tema="apple"] h1 { letter-spacing: -0.02em; font-weight: 700; }

/* Controles tipo iOS */
body[data-tema="apple"] .btn { border-radius: 12px; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
body[data-tema="apple"] .btn-gold { background: linear-gradient(180deg, #d8bd80, #C9AE72); }
body[data-tema="apple"] .chip,
body[data-tema="apple"] .f-chip { border-radius: 999px; }
body[data-tema="apple"] .est-toggle,
body[data-tema="apple"] .uni-toggle,
body[data-tema="apple"] .vista-toggle,
body[data-tema="apple"] .tgl { border-radius: 999px; }
body[data-tema="apple"] input,
body[data-tema="apple"] select,
body[data-tema="apple"] textarea,
body[data-tema="apple"] .search { border-radius: 10px; }
body[data-tema="apple"] .fld input:focus,
body[data-tema="apple"] .fld select:focus,
body[data-tema="apple"] .search:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,174,114,.22);
}

/* Filas de datos: separación por color de fondo, menos líneas */
body[data-tema="apple"] .q-row { border-bottom: 1px solid rgba(255,255,255,.04); }
body[data-tema="apple"] .q-row:hover { background: rgba(255,255,255,.03); }

/* ── Micro-animaciones (se desactivan con .no-motion) ── */
body[data-tema="apple"]:not(.no-motion) .btn,
body[data-tema="apple"]:not(.no-motion) .chip,
body[data-tema="apple"]:not(.no-motion) .tgl,
body[data-tema="apple"]:not(.no-motion) .nav-tab,
body[data-tema="apple"]:not(.no-motion) .fase,
body[data-tema="apple"]:not(.no-motion) .q-row,
body[data-tema="apple"]:not(.no-motion) .kpi-card {
  transition: background .18s ease, border-color .18s ease, box-shadow .22s ease, transform .12s ease, color .15s ease;
}
body[data-tema="apple"]:not(.no-motion) .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px -4px rgba(0,0,0,.6); }
body[data-tema="apple"]:not(.no-motion) .btn:active { transform: translateY(0) scale(.985); }
body[data-tema="apple"]:not(.no-motion) .kpi-card:hover { transform: translateY(-2px); }

/* Entrada suave de vistas y modales */
body:not(.no-motion) #paso-body,
body:not(.no-motion) #view > .wrap,
body:not(.no-motion) .fase-wrap { animation: cc-rise .28s cubic-bezier(.22,.61,.36,1) both; }
body:not(.no-motion) .modal-back { animation: cc-fade .18s ease both; }
body:not(.no-motion) .modal,
body:not(.no-motion) .dxfzoom { animation: cc-pop .22s cubic-bezier(.22,.61,.36,1) both; }
body:not(.no-motion) .partida-card,
body:not(.no-motion) .mat-row,
body:not(.no-motion) .cubeta { animation: cc-rise .26s cubic-bezier(.22,.61,.36,1) both; }

@keyframes cc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cc-pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* Ticker actualiza con un realce sutil */
body[data-tema="apple"]:not(.no-motion) .ticker .tk .v { transition: color .2s ease; }

@media (prefers-reduced-motion: reduce) {
  body #paso-body, body .fase-wrap, body .modal, body .dxfzoom, body .partida-card, body .mat-row, body .cubeta, body #view > .wrap { animation: none !important; }
}