/* =========================================================================
   MAGNUS. — Piel premium
   -------------------------------------------------------------------------
   Acerca la plataforma a la estética de magnus.mitxelgonzalez.com. Los
   valores NO están inventados: salen de las variables de esa web, leídas
   del sitio publicado.

   CÓMO SE QUITA
   Se borra `data-piel="premium"` del <html> en index.html. Nada más. Todo
   lo de este archivo cuelga de ese atributo, así que sin él no pinta ni una
   regla y la aplicación vuelve exactamente a como estaba. Ni se toca
   styles.css ni hay que deshacer nada.

   POR QUÉ HACÍA FALTA
   Mitxel decía que el cristal se veía "azulado". Es literal, no una
   sensación: todos los grises de la aplicación tenían más azul que rojo
   —#050506, #17181b, el acento #cdd3da— mientras que los de la web son
   neutros puros. Un gris con azul dentro lee como frío y barato al lado de
   uno neutro. Aquí se neutralizan.
   ========================================================================= */

html[data-piel="premium"] {
  /* --- Fondos: neutros puros, los de la web ------------------------- */
  --bg-primary: #000000;
  --bg-secondary: #0d0d0d;
  --bg-card: #131313;
  --bg-card-hover: #1a1a1a;

  /* --- Líneas: la web usa gris sólido, no blanco translúcido -------- */
  --border-subtle: #1c1c1c;
  --border-glass: #282828;

  /* --- Texto: blanco roto, no blanco puro. Cansa menos y se ve más
         caro; el blanco puro se queda para lo que de verdad destaca. -- */
  --text-primary: #f4f4f4;
  --text-secondary: #9a9a9a;
  --text-muted: #5f5f5f;

  /* --- Plata sin azul ----------------------------------------------
     OJO: `--accent` NO se toca aquí. Lo escribe theme.js directamente en
     el <html>, porque hay un selector de color de marca en Ajustes, y un
     estilo en línea gana a cualquier hoja: si lo forzara desde aquí,
     rompería ese selector. El azul del acento se corrige en su origen,
     cambiando el color por defecto en theme.js.

     Esto de abajo es el tinte plateado que styles.css tiene escrito a
     pelo —rgba(205,211,218,…)— en las superficies. Ese sí es cosa de la
     piel, y ese sí era el "cristal azulado". */
  --tinte: 255, 255, 255;

  --accent-bright: #ffffff;

  /* --- El rojo de la web. Un solo tono, y se usa con cuentagotas. --- */
  --red: #db1a0c;
  --red-deep: #a5120a;

  /* La curva de la web. La de antes era la de Material: correcta y
     anónima. Esta arranca rápido y frena largo, que es lo que hace que un
     movimiento parezca caro en vez de mecánico. */
  --ease: cubic-bezier(0.16, 0.84, 0.3, 1);

  --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.55);
}

/* -------------------------------------------------------------------------
   1. El cristal
   -------------------------------------------------------------------------
   La web construye sus superficies con un degradado en diagonal de blanco
   translúcido: claro arriba a la izquierda, casi nada en medio, un punto de
   luz abajo. Eso es lo que da la sensación de cristal biselado. La
   aplicación pintaba fondos planos.
   ------------------------------------------------------------------------- */
html[data-piel="premium"] {
  --glass: linear-gradient(158deg, rgba(255,255,255,.065), rgba(255,255,255,.014) 58%, rgba(255,255,255,.032));
  --glass-on: linear-gradient(158deg, rgba(255,255,255,.11), rgba(255,255,255,.03) 58%, rgba(255,255,255,.05));
  --silver: linear-gradient(180deg, #ffffff 0%, #fbfbfb 34%, #e2e2e2 62%, #f4f4f4 78%, #d9d9d9 100%);
}

html[data-piel="premium"] .card,
html[data-piel="premium"] .modal,
html[data-piel="premium"] .modulo-card {
  background-color: var(--bg-card);
  background-image: var(--glass);
}
html[data-piel="premium"] .card.interactive:hover,
html[data-piel="premium"] .modulo-card:hover {
  background-image: var(--glass-on);
}

/* -------------------------------------------------------------------------
   2. El punto rojo
   -------------------------------------------------------------------------
   En la web el rojo aparece UNA vez: el punto de "MAGNUS.". Ahí está toda
   su fuerza — si se repartiera por la interfaz dejaría de significar nada.
   Aquí se respeta: el punto del logo y el aviso de mensajes sin leer, que
   es lo único que de verdad reclama atención.

   El marcado ya venía preparado —`MAGNUS<span>.</span>`— así que esto es
   solo pintar.
   ------------------------------------------------------------------------- */
html[data-piel="premium"] .sidebar-logo span,
html[data-piel="premium"] .topbar-logo span,
html[data-piel="premium"] .login-logo span {
  color: var(--red);
  /* El punto de la web tiene un halo mínimo. Se nota sin verse. */
  text-shadow: 0 0 18px rgba(219, 26, 12, 0.45);
}

/* -------------------------------------------------------------------------
   3. La aparición
   -------------------------------------------------------------------------
   Copiada tal cual de la web: cada hijo entra desde 28 px abajo, en
   cascada de 60 ms. Lo que hace que no parezca un truco es que ocurre UNA
   vez, al entrar en pantalla, y nunca más.

   Se aplica sola a las rejillas de la aplicación — no hay que ir marcando
   clases por las plantillas — y `piel.js` es quien enciende `.dentro`
   cuando el bloque asoma.
   ------------------------------------------------------------------------- */
html[data-piel="premium"] .escena > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.9s var(--ease);
}
html[data-piel="premium"] .escena.dentro > * { opacity: 1; transform: none; }
html[data-piel="premium"] .escena.dentro > *:nth-child(1)  { transition-delay: .04s; }
html[data-piel="premium"] .escena.dentro > *:nth-child(2)  { transition-delay: .10s; }
html[data-piel="premium"] .escena.dentro > *:nth-child(3)  { transition-delay: .16s; }
html[data-piel="premium"] .escena.dentro > *:nth-child(4)  { transition-delay: .22s; }
html[data-piel="premium"] .escena.dentro > *:nth-child(5)  { transition-delay: .28s; }
html[data-piel="premium"] .escena.dentro > *:nth-child(6)  { transition-delay: .34s; }
html[data-piel="premium"] .escena.dentro > *:nth-child(7)  { transition-delay: .40s; }
html[data-piel="premium"] .escena.dentro > *:nth-child(8)  { transition-delay: .46s; }
html[data-piel="premium"] .escena.dentro > *:nth-child(n+9) { transition-delay: .52s; }

/* Quien haya pedido al sistema que no le muevan la pantalla —mareos,
   migrañas, vértigo— no ve nada de esto. Es la misma salida que tiene la
   web, y no es un extra: sin ella la animación es un problema de
   accesibilidad. */
@media (prefers-reduced-motion: reduce) {
  html[data-piel="premium"] .escena > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* -------------------------------------------------------------------------
   4. Detalles que suben el listón
   ------------------------------------------------------------------------- */

/* El botón principal, con la plata de la web en vez de un gris plano. */
html[data-piel="premium"] .btn-primary {
  background-image: var(--silver);
  color: #0a0a0a;
  border: none;
}
html[data-piel="premium"] .btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* Las tarjetas responden al ratón. Poco: 2 px. Lo justo para que parezcan
   objetos y no dibujos. */
html[data-piel="premium"] .card.interactive,
html[data-piel="premium"] .modulo-card {
  transition: transform 0.35s var(--ease), background-image 0.35s var(--ease),
              border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
html[data-piel="premium"] .card.interactive:hover {
  transform: translateY(-2px);
  border-color: #383838;
}

/* El módulo en curso llevaba un resplandor plateado bastante fuerte. Con
   los fondos ya neutros se pasa de frenado, así que se contiene. */
html[data-piel="premium"] .modulo-card.en-curso {
  border-color: #3a3a3a;
  box-shadow: 0 0 70px rgba(255, 255, 255, 0.06), var(--shadow-card);
}

/* Las etiquetitas de arriba de cada pantalla ("CAMPUS MAGNUS™") competían
   con el titular por la misma atención. Bajan un punto para que el titular
   respire, que es lo que se mira primero. */
html[data-piel="premium"] .kpi-label {
  color: var(--text-muted);
  letter-spacing: 0.14em;
  font-size: 10px;
}

/* La barra de progreso, en plata de verdad. */
html[data-piel="premium"] .progress-bar-fill {
  background: var(--silver);
}

/* -------------------------------------------------------------------------
   5. Quitarle el azul al cristal
   -------------------------------------------------------------------------
   styles.css tiene el tinte plateado escrito a mano en 28 sitios como
   rgba(205,211,218,…). Ese color tiene más azul que rojo, y es exactamente
   lo que se veía frío. Aquí se repiten esas reglas con blanco neutro.

   Se repiten solo las que se ven en pantalla, no las 28: las demás son
   variantes de estados que no se dan o quedan tapadas.
   ------------------------------------------------------------------------- */

/* El fondo de la aplicación: dos halos enormes que teñían TODO de azul. */
html[data-piel="premium"] body {
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(var(--tinte), 0.05), transparent 62%),
    radial-gradient(900px 600px at 92% 106%, rgba(var(--tinte), 0.035), transparent 58%),
    var(--bg-primary);
  background-attachment: fixed;
}

/* La cabecera de cada módulo — lo más grande de la pantalla del Campus. */
html[data-piel="premium"] .modulo-head {
  background:
    radial-gradient(760px 260px at 2% -24%, rgba(var(--tinte), 0.10), transparent 60%),
    linear-gradient(158deg, rgba(var(--tinte), 0.055), rgba(255,255,255,0.012));
}
html[data-piel="premium"] .modulo-card.hecho .modulo-head {
  background:
    radial-gradient(700px 240px at 4% -20%, rgba(var(--tinte), 0.14), transparent 62%),
    linear-gradient(158deg, rgba(var(--tinte), 0.09), rgba(255,255,255,0.02));
}

/* Etiquetas, píldoras y el elemento activo del menú. */
html[data-piel="premium"] .badge.accent {
  background: linear-gradient(180deg, rgba(var(--tinte), 0.16), rgba(var(--tinte), 0.06));
  color: #f4f4f4;
}
html[data-piel="premium"] .nav-item.active {
  background: linear-gradient(180deg, rgba(var(--tinte), 0.14), rgba(var(--tinte), 0.05));
}
html[data-piel="premium"] .quick-tile.active,
html[data-piel="premium"] .phase-pill.current {
  border-color: rgba(var(--tinte), 0.28);
  box-shadow: 0 0 20px rgba(var(--tinte), 0.10);
}

/* El calendario. */
html[data-piel="premium"] .cal-day.con-evento {
  background: linear-gradient(180deg, rgba(var(--tinte), 0.13), rgba(var(--tinte), 0.04));
  border-color: rgba(var(--tinte), 0.28);
}
html[data-piel="premium"] .cal-marca.hito { background: rgba(var(--tinte), 0.16); }

/* Las dos manchas de luz que se mueven detrás del inicio de sesión. */
html[data-piel="premium"] .blob-1 { background: radial-gradient(circle, rgba(var(--tinte), 0.30), transparent 68%); }
html[data-piel="premium"] .blob-2 { background: radial-gradient(circle, rgba(var(--tinte), 0.22), transparent 68%); }

/* -------------------------------------------------------------------------
   La excepción de champán: las tareas del coach
   -------------------------------------------------------------------------
   La piel premium pinta TODAS las tarjetas con el cristal plateado, y al
   hacerlo se comía el champán de este bloque: la regla `.card` de la piel
   pesa más que `.tareas-coach` de la hoja base, así que ganaba el plateado
   y del dorado solo sobrevivían la pastilla y los bordes finos.

   Aquí se devuelve, con el mismo peso que la piel. Es la única tarjeta con
   color de la aplicación y va así siempre, haya tareas pendientes o no:
   es el sitio donde vive lo que su coach le ha pedido a mano.
   ------------------------------------------------------------------------- */
html[data-piel="premium"] .card.tareas-coach {
  background-color: var(--bg-card);
  background-image:
    radial-gradient(620px 200px at 6% -30%, rgba(240, 224, 186, 0.10), transparent 64%),
    linear-gradient(158deg, rgba(240, 224, 186, 0.095), rgba(240, 224, 186, 0.026) 56%, rgba(203, 176, 122, 0.055));
  border-color: rgba(226, 204, 154, 0.24);
}
html[data-piel="premium"] .card.tareas-coach:hover {
  background-image:
    radial-gradient(620px 200px at 6% -30%, rgba(240, 224, 186, 0.13), transparent 64%),
    linear-gradient(158deg, rgba(240, 224, 186, 0.115), rgba(240, 224, 186, 0.032) 56%, rgba(203, 176, 122, 0.065));
}
/* El título, que la piel devolvía a gris junto con el resto de kpi-label. */
html[data-piel="premium"] .tareas-coach .kpi-label.tareas-coach-titulo { color: #ddcaa0; }