@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* =====================================================================================================
   DevGMXA · diseño «Panel» — colores sólidos, sin degradados.
   Basado en la paleta del panel de referencia: pizarra oscura (#0f172a, #1e293b, #334155), índigo como color principal
   y verde, cian, amarillo, naranja y rojo como apoyo. Por defecto es oscuro; el modo claro es la misma paleta en sólido claro.
   Estructura: barra lateral izquierda, barra superior con búsqueda, navegación inferior en móvil, columna central y columna derecha.
   Todo el color sale de las variables de abajo.
   ===================================================================================================== */
html[data-space]{
  /* Oscuro (por defecto) */
  --bg:#0f172a;--surf:#1e293b;--surf2:#0f172a;--surf3:#334155;--line:#334155;--line2:#475569;
  --ink:#f1f5f9;--ink2:#cbd5e1;--mute:#94a3b8;
  --pri:#6366f1;--pri-h:#4f46e5;--pri-ink:#ffffff;--pri-l:rgba(99,102,241,.16);--link:#818cf8;
  --act:#4338ca;--act-ink:#f1f5f9;
  --acc:#f43f5e;--acc-d:#fb7185;--acc-l:rgba(244,63,94,.15);
  --gold:#facc15;--gold-d:#facc15;--gold-l:rgba(250,204,21,.14);
  --vio:#22d3ee;--vio-l:rgba(6,182,212,.16);
  --ok:#22c55e;--ok-l:rgba(34,197,94,.15);
  --shadow:none;background:var(--bg);color:var(--ink);color-scheme:dark}
html[data-space][data-theme=day]{
  /* Claro */
  --bg:#f1f5f9;--surf:#ffffff;--surf2:#f8fafc;--surf3:#e2e8f0;--line:#e2e8f0;--line2:#cbd5e1;
  --ink:#0f172a;--ink2:#334155;--mute:#64748b;
  --pri:#4f46e5;--pri-h:#4338ca;--pri-ink:#ffffff;--pri-l:rgba(79,70,229,.1);--link:#4338ca;
  --act:#e0e7ff;--act-ink:#312e81;
  --acc:#e11d48;--acc-d:#be123c;--acc-l:rgba(225,29,72,.1);
  --gold:#facc15;--gold-d:#a16207;--gold-l:rgba(250,204,21,.22);
  --vio:#0e7490;--vio-l:rgba(6,182,212,.14);
  --ok:#15803d;--ok-l:rgba(34,197,94,.14);
  --shadow:0 1px 2px rgba(15,23,42,.06);color-scheme:light}
/* Kids: mismo panel, color principal naranja */
html[data-space=kids]{--pri:#f97316;--pri-h:#ea580c;--pri-ink:#ffffff;--pri-l:rgba(249,115,22,.16);--link:#fdba74;--act:#c2410c;--act-ink:#fff7ed}
html[data-space=kids][data-theme=day]{--bg:#fff7ed;--surf:#ffffff;--surf2:#fffaf5;--surf3:#fed7aa;--line:#fed7aa;--pri:#ea580c;--pri-h:#c2410c;--pri-l:rgba(234,88,12,.1);--link:#c2410c;--act:#ffedd5;--act-ink:#7c2d12}
html[data-space] body{background:var(--bg)!important;color:var(--ink);font-family:'Inter',system-ui,sans-serif}
html[data-space=kids] body{font-family:'Fredoka','Inter',system-ui,sans-serif}
html[data-space] *{scrollbar-color:var(--pri) var(--surf)}
html[data-space] ::selection{background:var(--pri);color:var(--pri-ink)}
html[data-space] [class*="bg-gradient-to"]{background-image:none!important;background-color:var(--pri);color:var(--pri-ink)}
html[data-space] [class*="from-sky-50"]{background-color:var(--bg)!important;color:inherit}
html[data-space] [class*="from-brand"] *{color:inherit}

/* ---------- Estructura: barra lateral, barra superior y navegación móvil ---------- */
#nav{display:contents}
.dg-side{position:fixed;top:0;bottom:0;left:0;z-index:40;display:none;flex-direction:column;justify-content:space-between;width:4.5rem;padding:1.25rem .6rem;background:var(--bg);border-right:1px solid var(--line);overflow-y:auto}
@media(min-width:768px){.dg-side{display:flex}body.dg-has-side{padding-left:4.5rem}}
@media(min-width:1024px){.dg-side{width:16rem;padding:1.5rem .9rem}body.dg-has-side{padding-left:16rem}}
.dg-logo{display:flex;align-items:center;gap:.7rem;padding:.35rem .5rem;margin-bottom:1.1rem}
.dg-mark{flex:none;width:2.4rem;height:2.4rem;border-radius:.7rem;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.25rem;background:var(--pri);color:var(--pri-ink)}
.dg-mark b{font-weight:800}
.dg-word{display:none;font-size:1.35rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.dg-word em{font-style:normal;font-size:.7rem;margin-left:.4rem;padding:.15rem .5rem;border-radius:99px;background:var(--pri);color:var(--pri-ink);-webkit-text-fill-color:var(--pri-ink)}
@media(min-width:1024px){.dg-word{display:inline}}
.dg-links{display:flex;flex-direction:column;gap:.2rem;flex:1}
.dg-ni{position:relative;display:flex;align-items:center;gap:1rem;width:100%;padding:.75rem .8rem;border-radius:10px;border-left:4px solid transparent;color:var(--ink2);font-size:.9rem;font-weight:600;background:none;border-top:0;border-right:0;border-bottom:0;cursor:pointer;text-align:left;transition:background .2s,color .2s,border-color .2s}
.dg-ni i{flex:none;width:1.6rem;text-align:center;font-size:1.25rem}
.dg-ni .l{display:none}
@media(min-width:1024px){.dg-ni .l{display:inline}}
.dg-ni:hover{background:var(--surf3);color:var(--ink);border-left-color:var(--pri)}
.dg-ni[aria-current=page]{background:var(--act);color:var(--act-ink);font-weight:700;border-left-color:var(--link)}
.dg-ni[aria-current=page] i{color:inherit}
.dg-ni img{flex:none;width:1.65rem;height:1.65rem;margin:0 .0rem;border-radius:50%;object-fit:cover;outline:2px solid transparent}
.dg-ni[aria-current=page] img{outline-color:var(--link)}
.dg-dot{position:absolute;top:.35rem;left:1.7rem;min-width:1.05rem;height:1.05rem;padding:0 .28rem;border-radius:99px;background:var(--acc);color:#fff;font-size:.6rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.dg-foot{display:flex;flex-direction:column;gap:.2rem;padding-top:.8rem;border-top:1px solid var(--line)}

.dg-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem;padding-top:calc(.6rem + env(safe-area-inset-top,0px));background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.dg-top .dg-logo{margin:0;padding:0}
@media(min-width:768px){.dg-top .dg-logo,.dg-top-actions{display:none}.dg-top{padding-inline:1.5rem}}
.dg-search{position:relative;flex:1;max-width:26rem;margin-left:auto}
@media(min-width:768px){.dg-search{margin-left:0}}
.dg-search i{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:var(--mute);font-size:.8rem}
.dg-search input{width:100%;background:var(--surf2);border:1px solid transparent;border-radius:12px;padding:.6rem .9rem .6rem 2.4rem;font-size:.8rem;color:var(--ink)}
.dg-search input:focus{outline:none;border-color:var(--pri);background:var(--surf)}
.dg-top-actions{display:flex;gap:.2rem}
.dg-ic{width:2.4rem;height:2.4rem;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--ink2);background:none;border:0;cursor:pointer}
.dg-ic:hover{background:var(--surf2);color:var(--ink)}
.dg-bottom{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;height:3.6rem;background:var(--bg);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);box-sizing:content-box}
@media(min-width:768px){.dg-bottom{display:none}}
.dg-bottom a{position:relative;flex:1;display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:1.3rem}
.dg-bottom a[aria-current=page]{color:var(--ink)}
.dg-bottom a[aria-current=page]::after{content:"";position:absolute;bottom:.3rem;width:1.2rem;height:3px;border-radius:2px;background:var(--pri)}
.dg-bottom img{width:1.7rem;height:1.7rem;border-radius:50%;object-fit:cover}
.dg-bottom .dg-dot{left:55%;top:.55rem}

/* ---------- Anillos tipo «historia», bandeja «Tu círculo» y cuadrícula de perfil ---------- */
.dg-ring{display:block;padding:2.5px;border-radius:50%;background:var(--pri)}
.dg-ring>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;border:3px solid var(--bg);background:var(--surf2)}
.dg-tray{display:flex;gap:.9rem;overflow-x:auto;padding:.2rem .1rem .4rem;scrollbar-width:none}
.dg-tray::-webkit-scrollbar{display:none}
.dg-tray a{flex:none;width:4.6rem;text-align:center;font-size:.7rem;color:var(--ink2)}
.dg-tray .dg-ring{width:4.3rem;height:4.3rem;margin:0 auto .35rem}
.dg-tray span.n{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-prof{display:grid;grid-template-columns:auto 1fr;gap:1.2rem 2rem;align-items:center;padding:.5rem 0 1.4rem}
.dg-prof .dg-ring{width:5.5rem;height:5.5rem}
@media(min-width:640px){.dg-prof .dg-ring{width:9.5rem;height:9.5rem}.dg-prof{gap:1.2rem 3.5rem}}
.dg-prof .bio{grid-column:1/-1}
@media(min-width:640px){.dg-prof .bio{grid-column:2}}
.dg-stats{display:flex;gap:1.6rem;flex-wrap:wrap}
.dg-stats>*{background:none;border:0;padding:0;color:var(--ink);font-size:.9rem;text-align:left;cursor:default}
.dg-stats button{cursor:pointer}
.dg-stats b{font-weight:800}
.dg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
@media(min-width:640px){.dg-grid{gap:.5rem}}
.dg-tile{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--surf2);color:var(--ink)}
.dg-tile img{width:100%;height:100%;object-fit:cover}
.dg-tile .tx{position:absolute;inset:0;padding:.8rem;font-size:.75rem;line-height:1.35;font-weight:600;overflow:hidden;display:flex;align-items:center;text-align:center;justify-content:center;background:var(--surf);color:var(--ink2)}
.dg-tile .ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:1rem;background:rgba(6,18,20,.55);color:#fff;font-weight:800;font-size:.85rem;opacity:0;transition:opacity .15s}
.dg-tile:hover .ov,.dg-tile:focus-visible .ov{opacity:1}
.dg-sect{display:block;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin:1.2rem 0 .4rem}

/* ---------- Superficies ---------- */
html[data-space] .card{background:var(--surf);-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--line);border-radius:12px!important;box-shadow:var(--shadow)!important;transition:background .2s,border-color .2s,transform .2s}
html[data-space] a.card:hover,html[data-space] button.card:hover{background:var(--surf3);transform:translateY(-2px)}
html[data-space=kids] .card{border-width:2px;border-radius:16px!important}
html[data-space] dialog{background:var(--surf);color:var(--ink)}
html[data-space] dialog::backdrop{background:rgba(6,18,20,.6)}
html[data-space] option{background:var(--surf);color:var(--ink)}
html[data-space] [class~="bg-slate-900"],html[data-space] [class~="bg-slate-900/90"],html[data-space] [class~="bg-slate-900/70"],html[data-space] [class~="bg-white"]{background-color:var(--surf)}
html[data-space] [class~="bg-slate-900/80"]{background-color:color-mix(in srgb,var(--surf) 92%,transparent)}
html[data-space] [class~="bg-slate-900/50"],html[data-space] [class~="bg-slate-900/20"],html[data-space] [class~="bg-slate-950"],html[data-space] [class~="bg-slate-950/60"],html[data-space] [class~="bg-slate-950/50"],html[data-space] [class~="bg-slate-950/40"]{background-color:var(--surf2)}
html[data-space] [class~="bg-slate-800"],html[data-space] [class~="bg-slate-800/70"]{background-color:var(--surf3)}
html[data-space] [class~="bg-slate-700"]{background-color:var(--line)}
html[data-space] .hover\:bg-slate-800:hover,html[data-space] .hover\:bg-slate-800\/60:hover,html[data-space] .hover\:bg-slate-800\/50:hover{background-color:var(--surf2)}
html[data-space] [class~="border-slate-800"],html[data-space] [class~="border-slate-800/80"],html[data-space] [class~="border-slate-700"],html[data-space] [class~="border-slate-700/60"]{border-color:var(--line)}
html[data-space] [class~="border-slate-900"]{border-color:var(--bg)}
html[data-space] [class~="divide-slate-800"]>*{border-color:var(--line)}
html[data-space] [class~="from-slate-900/90"]{background-image:none}

/* ---------- Texto ---------- */
html[data-space] .text-white,html[data-space] .text-slate-100,html[data-space] .text-slate-200{color:var(--ink)}
html[data-space] .text-slate-300{color:var(--ink2)}
html[data-space] .text-slate-400,html[data-space] .text-slate-500{color:var(--mute)}
html[data-space] .hover\:text-white:hover{color:var(--ink)}
html[data-space] input,html[data-space] textarea,html[data-space] select{color:var(--ink)}
html[data-space] input::placeholder,html[data-space] textarea::placeholder{color:var(--mute)}
html[data-space] :focus-visible{outline:2px solid var(--pri);outline-offset:2px}
html[data-space] [class*="focus:ring-brand-500"]:focus{--tw-ring-color:color-mix(in srgb,var(--pri) 45%,transparent)}

/* ---------- Color principal (jade; coral en Kids) ---------- */
html[data-space] .text-brand-400,html[data-space] .text-brand-300{color:var(--link)}
html[data-space] .bg-brand-600{background:var(--pri)}
html[data-space] .hover\:bg-brand-500:hover{background:var(--pri-h)}
html[data-space] .bg-brand-600,html[data-space] .bg-brand-600 *,html[data-space] .bg-brand-600.text-white{color:var(--pri-ink)}
html[data-space] .shadow-glow,html[data-space] .bg-brand-600.shadow-glow{box-shadow:none}
html[data-space] [class~="bg-brand-600/20"],html[data-space] [class~="bg-brand-600/15"],html[data-space] [class~="bg-brand-600/10"],html[data-space] [class~="bg-brand-500/10"]{background:var(--pri-l)}
html[data-space] .hover\:bg-brand-600\/40:hover{background:var(--pri);color:var(--pri-ink)}
html[data-space] [class~="border-brand-500/30"],html[data-space] [class~="border-brand-500/20"],html[data-space] [class~="border-brand-500"],html[data-space] .hover\:border-brand-500\/40:hover{border-color:var(--pri)}
html[data-space] [class*="from-brand"]{background-image:none;background-color:var(--pri);color:var(--pri-ink)}
html[data-space] [class*="from-brand"] *{color:inherit}
html[data-space] input.peer:checked+span{border-color:var(--pri);background:var(--pri-l);color:var(--ink)}

/* ---------- Apoyo: violeta (info), dorado (aviso), coral (alerta) ---------- */
html[data-space] .text-sky-400,html[data-space] .text-sky-300,html[data-space] .text-indigo-400,html[data-space] .text-indigo-300,html[data-space] .text-indigo-200,html[data-space] .hover\:text-sky-400:hover{color:var(--vio)}
html[data-space] .text-amber-400{color:var(--gold-d)}
html[data-space] .text-emerald-400,html[data-space] .text-emerald-300,html[data-space] .hover\:text-emerald-400:hover,html[data-space] .text-lime-400{color:var(--ok)}
html[data-space] .text-rose-400,html[data-space] .text-rose-500,html[data-space] .text-rose-200,html[data-space] .hover\:text-rose-400:hover{color:var(--acc-d)}
html[data-space] [class~="bg-sky-500/10"],html[data-space] [class~="bg-indigo-500/10"]{background:var(--vio-l)}
html[data-space] [class~="bg-amber-500/10"],html[data-space] [class~="bg-amber-500/15"]{background:var(--gold-l)}
html[data-space] [class~="bg-emerald-500/10"]{background:var(--ok-l)}
html[data-space] [class~="bg-rose-500/10"]{background:var(--acc-l)}
html[data-space] [class~="border-sky-500/20"]{border-color:color-mix(in srgb,var(--vio) 40%,transparent)}
html[data-space] [class~="border-amber-500/20"]{border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
html[data-space] [class~="border-emerald-500/30"]{border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
html[data-space] [class~="border-rose-500/30"]{border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
html[data-space] .bg-rose-600,html[data-space] .hover\:bg-rose-500:hover,html[data-space] [class~="bg-rose-500"]{background:var(--acc);color:#fff}
html[data-space] .bg-rose-600.text-white{color:#fff}
html[data-space] #toast{background:var(--surf3)!important;color:var(--ink)!important;border:1px solid var(--line2)!important}

html[data-space] .dg-acts i{font-size:1.4rem}

/* Botón flotante luna/sol (solo en pantallas sin barra, como acceso) */
.dg-theme-fab{position:fixed;top:12px;right:12px;z-index:60;width:40px;height:40px;border-radius:14px;border:1px solid var(--line);background:var(--surf);color:var(--ink2);display:flex;align-items:center;justify-content:center;cursor:pointer}