/* escritorio_marco.css — "marco" de escritorio (>=1024px) para las pantallas sueltas: Conexiones (/mi-cuenta), Alertas, Personalización,
   Tareas, Ganancias de StyTune, Mis deseos / Carrito / Regalos / Pedidos / Ventas y Configuración.
   Lo carga escritorio.py solo en esas pantallas. Pone el menú fijo de siempre a la izquierda y ensancha el contenido. En celular no hace nada
   (salvo el tema claro de Conexiones, que antes no existía). */

/* el menú nace oculto; escritorio.css lo muestra en escritorio */
#edMarco .ed-lateral { display: none; }

/* ───────── colores del menú según el tema, para que se vea bien aunque la pantalla no defina los suyos ───────── */
#edMarco[data-ed-tema="claro"] .ed-lateral {
  --bg: #f7f4ee; --text: #1a1712; --muted: rgba(26,23,18,.72); --muted2: rgba(26,23,18,.48);
  --w04: rgba(0,0,0,.04); --w05: rgba(0,0,0,.05); --w07: rgba(0,0,0,.07); --w09: rgba(0,0,0,.09);
  --border-sub: rgba(0,0,0,.09); --border: rgba(184,147,74,.28); --k527: rgba(247,244,238,.985); --k97: rgba(247,244,238,.985);
  color: var(--text);
}
#edMarco[data-ed-tema="oscuro"] .ed-lateral {
  --bg: #0b0b0c; --text: #f5f0e8; --muted: rgba(245,240,232,.62); --muted2: rgba(245,240,232,.36);
  --w04: rgba(255,255,255,.04); --w05: rgba(255,255,255,.05); --w07: rgba(255,255,255,.07); --w09: rgba(255,255,255,.09);
  --border-sub: rgba(255,255,255,.08); --border: rgba(255,255,255,.14); --k527: rgba(10,10,11,.985); --k97: rgba(10,10,11,.985);
  color: var(--text);
}

/* ───────── Conexiones (/mi-cuenta): tema claro (antes solo existía el oscuro) ───────── */
html.tema-claro[data-ed-ruta="mi-cuenta"] {
  --negro: #f7f4ee; --negro-panel: #ffffffd9; --negro-borde: #00000017; --hueso: #1a1712; --gris: #6b665c;
  --dorado: #a8862f; --dorado-claro: #9a7826; --verde: #2e8a5a; --rojo: #c2403f; --sombra: 0 8px 30px rgba(0,0,0,.08);
}
html.tema-claro[data-ed-ruta="mi-cuenta"] body { background: #f7f4ee; color: #1a1712; }
html.tema-claro[data-ed-ruta="mi-cuenta"] .topbar,
html.tema-claro[data-ed-ruta="mi-cuenta"] .encabezado-simple { background: rgba(247,244,238,.92); }
html.tema-claro[data-ed-ruta="mi-cuenta"] .icon-btn:hover { background: #0000000d; }
html.tema-claro[data-ed-ruta="mi-cuenta"] .perfil { background: linear-gradient(145deg, #ffffff, #f1ece1); }
html.tema-claro[data-ed-ruta="mi-cuenta"] .perfil .avatar { box-shadow: 0 0 0 4px #a8862f22, 0 6px 18px rgba(0,0,0,.15); }
html.tema-claro[data-ed-ruta="mi-cuenta"] .resumen-icono { background: linear-gradient(160deg, #fbf6e8, #efe6cf); border-color: #a8862f44; }
html.tema-claro[data-ed-ruta="mi-cuenta"] .usuario:hover { box-shadow: 0 10px 24px rgba(0,0,0,.1); }
html.tema-claro[data-ed-ruta="mi-cuenta"] thead th { background: #a8862f14; }
html.tema-claro[data-ed-ruta="mi-cuenta"] tbody tr:hover { background: #00000008; }
html.tema-claro[data-ed-ruta="mi-cuenta"] .subtab-friends.activo { color: #fff; background: #1a1712; border-color: #1a1712; }

@media (min-width: 1024px) {
  /* menú fijo a la izquierda: la página se corre a la derecha */
  html[data-ed-ruta] body { padding-left: 264px !important; box-sizing: border-box; }
  html[data-ed-ruta] body .navbar-wrap, html[data-ed-ruta] body #navbarWrap { display: none !important; }
  html[data-ed-ruta] body > .sf-desktop-sidebar:not(.ed-lateral) { display: none !important; }
  #edMarco .ed-lateral { display: flex; }

  /* contenido más ancho (las pantallas de celular eran de ~500px) */
  html[data-ed-ruta="alertas"] .al-pagina { max-width: 900px; }
  html[data-ed-ruta="personalizacion"] .wrap { max-width: 1180px; }
  html[data-ed-ruta="styshop"] .app { max-width: 920px; }
  html[data-ed-ruta="styshop"] .contenido { max-width: 980px; }
  html[data-ed-ruta="mi-cuenta"] .contenedor,
  html[data-ed-ruta="mi-cuenta"] .buscar-envoltura { max-width: 1040px; }
  html[data-ed-ruta="mi-cuenta"] .usuarios { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   PANTALLAS SUELTAS EN ESCRITORIO — versión 3: ya no solo "menú y ancho", ahora con diseño de escritorio propio
   (Alertas, Misiones, Mis pedidos/ventas/carrito/deseos/regalos de StyShop y Ganancias de StyTune).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ───────── ALERTAS: tarjetas en dos columnas ───────── */
  html[data-ed-ruta="alertas"] .al-pagina { max-width: 1040px; padding-top: 26px; padding-bottom: 70px; }
  html[data-ed-ruta="alertas"] .al-titulo { font-size: 34px; }
  html[data-ed-ruta="alertas"] .al-tabs { gap: 10px; }
  html[data-ed-ruta="alertas"] .al-seccion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: start; }
  html[data-ed-ruta="alertas"] .al-seccion-titulo { grid-column: 1 / -1; font-size: 22px; }
  html[data-ed-ruta="alertas"] .al-item { margin-bottom: 0; }
  html[data-ed-ruta="alertas"] .al-card { padding: 18px 18px; transition: transform .18s, border-color .18s; }
  html[data-ed-ruta="alertas"] .al-card:hover { transform: translateY(-2px); }

  /* ───────── MISIONES: banner arriba y tarjetas en dos columnas ───────── */
  html[data-ed-ruta="misiones"] .tk-back { padding-left: 24px; }
  html[data-ed-ruta="misiones"] .tk-wrap { max-width: 1120px; padding: 10px 40px 70px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 18px; align-items: start; }
  html[data-ed-ruta="misiones"] .tk-wrap > * { margin-top: 0; margin-bottom: 0; }
  html[data-ed-ruta="misiones"] .tk-banner, html[data-ed-ruta="misiones"] .tk-section-title, html[data-ed-ruta="misiones"] .tk-section-sub,
  html[data-ed-ruta="misiones"] .tk-misiones-progreso, html[data-ed-ruta="misiones"] .tk-racha, html[data-ed-ruta="misiones"] .tk-saldo { grid-column: 1 / -1; }
  html[data-ed-ruta="misiones"] .tk-banner { padding: 34px 40px; }
  html[data-ed-ruta="misiones"] .tk-banner__text p { max-width: 480px; font-size: 15px; }
  html[data-ed-ruta="misiones"] .tk-section-title { font-size: 24px; margin-top: 14px; }

  /* ───────── STYSHOP personal ───────── */
  html[data-ed-ruta="styshop"] .cab { padding-left: 32px; padding-right: 32px; }
  html[data-ed-ruta="styshop"] .contenido { max-width: 1120px; padding-left: 32px; padding-right: 32px; }
  /* mis pedidos y mis ventas: tarjetas en dos columnas */
  html[data-ed-ruta="styshop"] .contenido:has(.pedido) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; align-items: start; }
  html[data-ed-ruta="styshop"] .contenido:has(.pedido) > * { margin-top: 0; margin-bottom: 0; }
  html[data-ed-ruta="styshop"] .contenido:has(.pedido) > .aviso-caja, html[data-ed-ruta="styshop"] .contenido:has(.pedido) > .filtros,
  html[data-ed-ruta="styshop"] .contenido:has(.pedido) > .resumen, html[data-ed-ruta="styshop"] .contenido:has(.pedido) > .vacio { grid-column: 1 / -1; }
  html[data-ed-ruta="styshop"] .pedido { padding: 18px; border-radius: 20px; }
  /* carrito: artículos a la izquierda, total a la derecha */
  html[data-ed-ruta="styshop"] .contenido:has(.caja-total) { max-width: 1120px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 0 28px; align-items: start; }
  html[data-ed-ruta="styshop"] .contenido:has(.caja-total) > * { grid-column: 1; }
  html[data-ed-ruta="styshop"] .contenido:has(.caja-total) > .caja-total, html[data-ed-ruta="styshop"] .contenido:has(.caja-total) > .btn-pagar,
  html[data-ed-ruta="styshop"] .contenido:has(.caja-total) > .aviso-caja { grid-column: 2; }
  html[data-ed-ruta="styshop"] .contenido:has(.caja-total) > .caja-total { grid-row: 1; position: sticky; top: 90px; }
  html[data-ed-ruta="styshop"] .contenido:has(.caja-total) > .btn-pagar { grid-row: 2; position: sticky; top: 300px; }
  /* mis deseos y mis regalos */
  html[data-ed-ruta="styshop"] .app:has(> .grid) { max-width: 1120px; }
  html[data-ed-ruta="styshop"] .app > .grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; gap: 18px !important; }
  html[data-ed-ruta="styshop"] .app:has(.regalo-row) { max-width: 960px; }
  html[data-ed-ruta="styshop"] .tab-panel:has(.regalo-row) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-content: start; }
  html[data-ed-ruta="styshop"] .tab-panel:not(.activo):not(.active) .regalo-row { }

  /* ───────── GANANCIAS DE STYTUNE ───────── */
  html[data-ed-ruta="ganancias"] .w { max-width: 1040px; padding: 30px 40px 80px; }
  html[data-ed-ruta="ganancias"] h1 { font-size: 34px; }
  html[data-ed-ruta="ganancias"] .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  html[data-ed-ruta="ganancias"] .n { padding: 22px 24px; border-radius: 20px; }
  html[data-ed-ruta="ganancias"] .n b { font-size: 34px; }
  html[data-ed-ruta="ganancias"] .dias { height: 140px; gap: 5px; }
  html[data-ed-ruta="ganancias"] .f { padding: 14px 4px; }
  html[data-ed-ruta="ganancias"] .aviso { padding: 16px 18px; border-radius: 16px; }
}

/* Ganancias de StyTune: respeta el tema de la app (la pantalla solo miraba el del sistema) */
html.tema-claro[data-ed-ruta="ganancias"] { --bg: #f6f3ec; --card: #fff; --text: #1a1814; --muted: rgba(26,24,20,.58); --line: rgba(0,0,0,.1); --ok: #15803d; --mal: #b91c1c; --oro: #9a7f2e; }
html:not(.tema-claro)[data-ed-ruta="ganancias"] { --bg: #0b0b0b; --card: #151515; --text: #f2ede3; --muted: rgba(242,237,227,.58); --line: rgba(255,255,255,.1); --ok: #4ade80; --mal: #ef4444; --oro: #c4a85b; }