/* ============================================================================
   MEYVO by IATOOLS · PIELES "más tecnológicas" (F4 del plan v2, 03-10-2026)
   ----------------------------------------------------------------------------
   Pedido de Rolando: "quiero que se vea mejor la app, como más tecnológica".
   Dos direcciones para elegir, como capa ENCIMA de portal.css: no cambian la
   lógica ni el color de cada coach (todo sale de --volt*, que es su marca).

     A · GRAFITO  html[data-piel="grafito"]  oscuro, retícula fina, brillo de la marca
     B · NÍTIDO   html[data-piel="nitido"]   claro técnico, retícula de puntos, números tabulares

   Mientras se elige, se activa con ?piel=grafito | ?piel=nitido | ?piel= (vuelve
   a la actual). La elegida pasa a ser la de todos y este selector se retira.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap');
:root{ --mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; --curva:cubic-bezier(.16,1,.3,1); }

/* ---------- común a las dos: números que mandan y movimiento con propósito ---------- */
html[data-piel] .kpi b,
html[data-piel] .nutri-macro .card b{ font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
html[data-piel] .kpi small,
html[data-piel] .nutri-macro .card small,
html[data-piel] th{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; font-size:10.5px; font-weight:600; }
html[data-piel] .btn{ transition:transform .18s var(--curva), box-shadow .18s var(--curva), background .18s var(--curva), border-color .18s var(--curva); }
html[data-piel] .btn:active{ transform:scale(.97); }
html[data-piel] .bar{ height:7px; }
html[data-piel] .bar span{ background:linear-gradient(90deg, var(--volt-deep), var(--volt-bright)); transform-origin:left;
  animation:piel-crece .9s var(--curva) both; }
html[data-piel] .view-anim .card,
html[data-piel] .view-anim .acc,
html[data-piel] .view-anim .callout{ animation:piel-sube .5s var(--curva) both; }
html[data-piel] .view-anim .cards > :nth-child(2){ animation-delay:.05s }
html[data-piel] .view-anim .cards > :nth-child(3){ animation-delay:.10s }
html[data-piel] .view-anim .cards > :nth-child(4){ animation-delay:.15s }
html[data-piel] .view-anim .cards > :nth-child(5){ animation-delay:.20s }
html[data-piel] .view-anim .cards > :nth-child(n+6){ animation-delay:.24s }
@keyframes piel-sube{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
@keyframes piel-crece{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@media (prefers-reduced-motion:reduce){
  html[data-piel] .view-anim .card, html[data-piel] .view-anim .acc, html[data-piel] .view-anim .callout,
  html[data-piel] .bar span{ animation:none; }
}

/* ============================== A · GRAFITO ============================== */
html[data-piel="grafito"]{
  --page:#0C0E11; --card:#14171C; --card2:#191D23; --surface:#11141A;
  /* !important a propósito: applyBrandTheme pone --ink de la marca en línea y le
     ganaba a la piel (títulos oscuros sobre fondo oscuro, visto en la captura) */
  --ink:#ECEEF2 !important; --muted:#8C94A2; --line:rgba(255,255,255,.13); --line-soft:rgba(255,255,255,.07); --hair:rgba(255,255,255,.08);
  --ok:#42C47E; --warn:#E6A93E;
  color-scheme:dark;
}
html[data-piel="grafito"] body{ background:var(--page); }
html[data-piel="grafito"] .main{
  background:
    radial-gradient(1100px 480px at 18% -12%, color-mix(in srgb, var(--volt-bright) 13%, transparent), transparent 62%),
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px) 0 0/28px 28px,
    var(--page);
}
html[data-piel="grafito"] .side{ background:#08090B; border-right:1px solid rgba(255,255,255,.06); }
html[data-piel="grafito"] .nav-item{ color:#A9B0BC; }
html[data-piel="grafito"] .nav-item:hover{ background:rgba(255,255,255,.05); color:#fff; }
html[data-piel="grafito"] .nav-item.on{ background:color-mix(in srgb, var(--volt-bright) 15%, transparent); color:#fff;
  box-shadow:inset 3px 0 0 var(--volt-bright), 0 0 24px -8px color-mix(in srgb, var(--volt-bright) 60%, transparent); }
html[data-piel="grafito"] .nav-item.on .ic{ color:var(--volt-bright); }
html[data-piel="grafito"] .card,
html[data-piel="grafito"] .acc,
html[data-piel="grafito"] .modal{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)), var(--card);
  border:1px solid var(--hair); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 16px 34px -22px rgba(0,0,0,.7);
}
html[data-piel="grafito"] .card:hover{ border-color:color-mix(in srgb, var(--volt-bright) 30%, var(--hair)); }
html[data-piel="grafito"] .kpi b{ color:var(--volt-bright); text-shadow:0 0 26px color-mix(in srgb, var(--volt-bright) 38%, transparent); }
html[data-piel="grafito"] .topbar h1, html[data-piel="grafito"] .card h3{ color:var(--ink); }
html[data-piel="grafito"] input, html[data-piel="grafito"] select, html[data-piel="grafito"] textarea{
  background:#0E1115; border-color:var(--line); color:var(--ink); }
html[data-piel="grafito"] input:focus, html[data-piel="grafito"] select:focus, html[data-piel="grafito"] textarea:focus{
  border-color:var(--volt-bright); box-shadow:0 0 0 3px color-mix(in srgb, var(--volt-bright) 22%, transparent); }
html[data-piel="grafito"] .btn-volt{ color:#0C0E11; box-shadow:0 8px 22px -12px color-mix(in srgb, var(--volt-bright) 80%, transparent); }
html[data-piel="grafito"] .btn-volt:hover{ background:var(--volt-bright); color:#0C0E11; box-shadow:0 10px 28px -10px color-mix(in srgb, var(--volt-bright) 90%, transparent); }
html[data-piel="grafito"] .btn-ghost{ border-color:var(--line); color:var(--ink); }
html[data-piel="grafito"] .btn-ghost:hover{ border-color:var(--volt-bright); color:var(--volt-bright); }
html[data-piel="grafito"] .callout{ background:rgba(255,255,255,.03); border-color:var(--hair); border-left-color:var(--volt-bright); }
html[data-piel="grafito"] .callout .ci, html[data-piel="grafito"] .acc-ic{ color:var(--volt-bright); }
html[data-piel="grafito"] .acc-ic{ background:color-mix(in srgb, var(--volt-bright) 14%, transparent); }
html[data-piel="grafito"] .quote{ background:linear-gradient(120deg, color-mix(in srgb, var(--volt-bright) 14%, transparent), rgba(255,255,255,.02)); border-color:color-mix(in srgb, var(--volt-bright) 26%, transparent); }
html[data-piel="grafito"] .obj-hero{ background:linear-gradient(120deg, color-mix(in srgb, var(--volt-bright) 16%, transparent), rgba(255,255,255,.02)); border-color:color-mix(in srgb, var(--volt-bright) 30%, transparent); }
html[data-piel="grafito"] .obj-hero .oh-k, html[data-piel="grafito"] .pill.volt{ color:var(--volt-bright); }
html[data-piel="grafito"] .pill.volt{ background:color-mix(in srgb, var(--volt-bright) 16%, transparent); }
html[data-piel="grafito"] .empty{ border-color:var(--line); color:var(--muted); }
html[data-piel="grafito"] .bar{ background:rgba(255,255,255,.08); }
html[data-piel="grafito"] .bar span{ box-shadow:0 0 14px color-mix(in srgb, var(--volt-bright) 55%, transparent); }
html[data-piel="grafito"] .modal-bg{ background:rgba(4,5,7,.72); backdrop-filter:blur(6px); }
@media(max-width:820px){
  html[data-piel="grafito"] .bottombar{ background:rgba(8,9,11,.86); backdrop-filter:blur(14px); border-top-color:rgba(255,255,255,.08); }
}

/* ============================== B · NÍTIDO ============================== */
html[data-piel="nitido"]{
  --page:#F3F4F6; --card:#FFFFFF; --card2:#F7F8FA; --surface:#F8F9FB;
  --ink:#0F1419; --muted:#5B6470; --line:rgba(15,20,25,.14); --line-soft:rgba(15,20,25,.07); --hair:#E3E6EA;
}
/* Auditoría de contraste (03-10-2026): el acento de la marca (naranja MEYVO, dorado,
   morado…) escrito como TEXTO sobre blanco no llega a 4,5:1. En Nítido el texto de
   acento usa el color de la marca oscurecido: conserva el tono de cada coach y se lee.
   Dentro de las tarjetas oscuras se mantiene el acento brillante. */
html[data-piel="nitido"]{ --acento-texto: color-mix(in srgb, var(--volt-deep) 62%, #140B04); }
html[data-piel="nitido"] .tab.on,
html[data-piel="nitido"] .av-cta,
html[data-piel="nitido"] .gloss-btn,
html[data-piel="nitido"] .obj-hero .oh-k,
html[data-piel="nitido"] .pg-k{ color:var(--acento-texto); }
html[data-piel="nitido"] :is(.pg-hero,.pg-fb,.today-hero,.acct-hero,.myrt-bar) :is(.pg-k,.oh-k,.av-cta){ color:var(--volt-bright); }
html[data-piel="nitido"] .main{
  background:radial-gradient(rgba(15,20,25,.07) 1px, transparent 1.2px) 0 0/18px 18px, var(--page);
}
html[data-piel="nitido"] .side{ background:#0E1115; }
html[data-piel="nitido"] .nav-item.on{ background:rgba(255,255,255,.06); color:#fff; box-shadow:inset 3px 0 0 var(--volt-bright); }
html[data-piel="nitido"] .nav-item.on .ic{ color:var(--volt-bright); }
html[data-piel="nitido"] .card,
html[data-piel="nitido"] .acc{
  border:1px solid var(--hair); border-radius:14px;
  box-shadow:0 1px 0 rgba(15,20,25,.03), 0 12px 26px -20px rgba(15,20,25,.28);
}
html[data-piel="nitido"] .card:hover{ border-color:color-mix(in srgb, var(--volt-bright) 40%, var(--hair)); }
html[data-piel="nitido"] .card.kpi{ border-top:3px solid var(--volt-bright); }
html[data-piel="nitido"] .kpi b{ color:var(--ink); }
html[data-piel="nitido"] .topbar h1{ letter-spacing:-.015em; }
html[data-piel="nitido"] input:focus, html[data-piel="nitido"] select:focus, html[data-piel="nitido"] textarea:focus{
  border-color:var(--volt-bright); box-shadow:0 0 0 3px color-mix(in srgb, var(--volt-bright) 18%, transparent); }
html[data-piel="nitido"] .btn-volt{ box-shadow:0 6px 16px -10px color-mix(in srgb, var(--volt-deep) 90%, transparent); }
html[data-piel="nitido"] .callout{ background:#fff; }
html[data-piel="nitido"] .quote{ background:linear-gradient(120deg, color-mix(in srgb, var(--volt-bright) 10%, #fff), #fff); }
html[data-piel="nitido"] .obj-hero{ background:linear-gradient(120deg, color-mix(in srgb, var(--volt-bright) 12%, #fff), #fff); }
@media(max-width:820px){
  html[data-piel="nitido"] .bottombar{ background:rgba(14,17,21,.92); backdrop-filter:blur(14px); }
}

/* 04-10-2026 (F4): estado vacío con un ícono suave del color de la marca, en las dos pieles */
.empty:not(.vcat):not(.mday){ position:relative; padding-top:62px; background:linear-gradient(180deg, color-mix(in srgb, var(--volt-bright) 5%, transparent), transparent 70%); }
.empty:not(.vcat):not(.mday)::before{ content:""; position:absolute; left:50%; top:18px; width:32px; height:32px; margin-left:-16px; border-radius:11px;
  background:color-mix(in srgb, var(--volt-bright) 16%, transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--volt-bright) 45%, transparent); }