/* =====================================================================
   PLANET KIDS DESIGN SYSTEM v1
   Tokens y reglas compartidas. Cargar después del CSS local de cada página.
   ===================================================================== */
:root{
  /* Colores */
  --pk-yellow:#f6c21a;
  --pk-yellow-soft:#ffdf69;
  --pk-cream:#fff8d9;
  --pk-ink:#322812;
  --pk-white:#fff;
  --pk-glass:rgba(255,255,255,.18);
  --pk-glass-strong:rgba(255,255,255,.30);
  --pk-line:rgba(255,255,255,.56);
  --pk-shadow:0 18px 45px rgba(31,15,72,.24);
  --pk-shadow-strong:0 30px 80px rgba(0,0,0,.38);

  /* Radios */
  --pk-radius-xs:12px;
  --pk-radius-sm:18px;
  --pk-radius-md:24px;
  --pk-radius-lg:34px;
  --pk-radius-xl:44px;
  --pk-radius-pill:999px;

  /* Espaciado fluido */
  --pk-space-1:clamp(6px,.55vw,10px);
  --pk-space-2:clamp(10px,.9vw,16px);
  --pk-space-3:clamp(14px,1.25vw,22px);
  --pk-space-4:clamp(20px,1.8vw,30px);
  --pk-space-5:clamp(28px,2.5vw,44px);

  /* Tipografía */
  --pk-text-xs:clamp(10px,.75vw,12px);
  --pk-text-sm:clamp(12px,.9vw,15px);
  --pk-text-md:clamp(15px,1.1vw,18px);
  --pk-text-lg:clamp(20px,1.7vw,28px);
  --pk-title:clamp(34px,4vw,64px);

  /* Shell general */
  --pk-page-side:clamp(12px,2vw,28px);
  --pk-header-h:66px;
  --pk-footer-h:88px;
  --pk-header-top:22px;
  --pk-footer-bottom:18px;
  --pk-content-top:calc(var(--pk-header-top) + var(--pk-header-h) + 24px);
  --pk-content-bottom:calc(var(--pk-footer-bottom) + var(--pk-footer-h) + 22px);

  /* Zonas seguras */
  --pk-safe-top:max(8px,env(safe-area-inset-top));
  --pk-safe-right:max(8px,env(safe-area-inset-right));
  --pk-safe-bottom:max(8px,env(safe-area-inset-bottom));
  --pk-safe-left:max(8px,env(safe-area-inset-left));

  /* Controles */
  --pk-control:46px;
  --pk-touch:44px;
  --pk-btn-h:56px;
  --pk-transition:.28s cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html{min-width:0;min-height:100%;-webkit-text-size-adjust:100%;}
body{min-width:0;min-height:100dvh;}
img,video,canvas,svg{max-width:100%;}
button,a,input,select,textarea{font:inherit;}
button,a{touch-action:manipulation;}

/* Componentes globales compartidos */
.header{
  left:var(--pk-page-side)!important;
  right:var(--pk-page-side)!important;
  top:var(--pk-header-top)!important;
  min-height:var(--pk-header-h);
  height:var(--pk-header-h);
  border-radius:var(--pk-radius-pill);
}
.footer{
  left:var(--pk-page-side)!important;
  right:var(--pk-page-side)!important;
  bottom:var(--pk-footer-bottom)!important;
  min-height:var(--pk-footer-h);
  height:var(--pk-footer-h);
  border-radius:var(--pk-radius-pill);
}
.icon-btn,.back{min-width:var(--pk-control);min-height:var(--pk-control);}
.tab{min-width:52px;min-height:52px;}

/* Clases reutilizables para próximas migraciones */
.pk-glass{
  background:var(--pk-glass);
  border:1px solid var(--pk-line);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--pk-shadow);
}
.pk-panel{border-radius:var(--pk-radius-lg);}
.pk-pill{border-radius:var(--pk-radius-pill);}
.pk-page-shell{
  min-height:100dvh;
  padding:var(--pk-content-top) var(--pk-page-side) var(--pk-content-bottom);
}

/* Breakpoints oficiales
   XL: >= 1440
   Desktop/Notebook: 1200-1439
   Compact desktop/tablet horizontal: 901-1199
   Tablet vertical: 621-900
   Mobile: <= 620
*/
@media (max-width:1199px){
  :root{
    --pk-page-side:18px;
    --pk-header-h:62px;
    --pk-footer-h:80px;
    --pk-header-top:14px;
    --pk-footer-bottom:12px;
  }
}

@media (max-width:900px){
  :root{
    --pk-page-side:12px;
    --pk-header-h:58px;
    --pk-footer-h:74px;
    --pk-header-top:10px;
    --pk-footer-bottom:8px;
  }
  .brand-title{font-size:18px!important;}
  .avatar{width:42px!important;height:42px!important;}
  .icon-btn,.back{--pk-control:40px;width:40px!important;height:40px!important;}
}

@media (max-width:620px){
  :root{
    --pk-page-side:8px;
    --pk-header-h:54px;
    --pk-footer-h:68px;
    --pk-header-top:var(--pk-safe-top);
    --pk-footer-bottom:var(--pk-safe-bottom);
    --pk-btn-h:50px;
  }
  .header{padding-inline:10px!important;}
  .header-actions{gap:7px!important;}
  .brand-title{font-size:16px!important;}
  .avatar{width:38px!important;height:38px!important;}
  .icon-btn,.back{width:36px!important;height:36px!important;min-width:36px;min-height:36px;}
  .footer{padding-inline:6px!important;gap:3px!important;}
  .tab{width:52px!important;height:50px!important;border-radius:17px!important;}
  .tab-icon{width:29px!important;height:29px!important;font-size:16px!important;}
  .tab-label{font-size:8px!important;}
}

@media (max-height:720px) and (min-width:901px){
  :root{
    --pk-header-h:58px;
    --pk-footer-h:72px;
    --pk-header-top:10px;
    --pk-footer-bottom:8px;
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}