:root{
  --bg:#071a2d;
  --nav:#0a2743;
  --deep:#06172a;
  --ink:#020a12;
  --paper:#172a40;
  --paper-2:#203852;
  --paper-3:#294660;
  --white:#fff8e8;
  --blue:#2f9bf4;
  --green:#39b94a;
  --yellow:#ffd43b;
  --orange:#ff922b;
  --pink:#f06595;
  --purple:#8b5cf6;
  --shadow:#020b14;
  --muted:#c2d0db;
  --sans:"Arial Rounded MT Bold","Trebuchet MS","Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--white)}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:var(--sans);font-size:16px;line-height:1.5;
  background:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.045) 0 2px,transparent 3px),
    radial-gradient(circle at 82% 26%,rgba(255,255,255,.035) 0 2px,transparent 3px),
    var(--bg);
  background-size:34px 34px,47px 47px,auto;
}
body.menuOpen{overflow:hidden}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit}
.appShell{min-height:100vh}

/* Encabezado propio de MichaelMontes.us: Paint oscuro, sin arte de Palworld. */
.siteHeader{
  position:relative;min-height:92px;display:flex;align-items:center;justify-content:center;padding:14px 18px;
  overflow:hidden;background:var(--deep);border-bottom:5px solid var(--ink);
}
.siteHeader::before,.siteHeader::after{
  content:"";position:absolute;pointer-events:none;background:var(--blue);border:4px solid var(--ink);opacity:.48;
}
.siteHeader::before{width:92px;height:18px;left:5%;top:17px;transform:rotate(-3deg)}
.siteHeader::after{width:68px;height:15px;right:7%;bottom:18px;background:var(--green);transform:rotate(2deg)}
.paintBrand{
  position:relative;z-index:1;display:inline-flex;align-items:baseline;justify-content:center;padding:7px 14px 9px;
  border:4px solid var(--ink);border-radius:14px 9px 16px 11px;background:#102b46;color:var(--white);
  box-shadow:6px 6px 0 var(--shadow);text-decoration:none;font-size:clamp(30px,4.2vw,52px);font-weight:900;
  line-height:1;letter-spacing:-.055em;transform:rotate(-.35deg);
}
.paintBrand:active{transform:translate(6px,6px) rotate(-.35deg);box-shadow:none}
.brandMichael{color:#49afff;text-shadow:3px 3px 0 #000}
.brandMontes{color:#63d45f;text-shadow:3px 3px 0 #000}
.brandUs{color:#fff8e8;text-shadow:3px 3px 0 #000}

/* Menú Paint superior: mismas formas, borde y comportamiento que Web1. */
.topnav{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  width:100%;padding:9px 14px 11px;background:var(--nav);
  border-bottom:5px solid var(--ink);box-shadow:0 6px 0 rgba(0,8,17,.34);overflow:visible;
}
.menuItem{
  min-height:46px;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:7px 12px;border:4px solid var(--ink);border-radius:13px 10px 14px 11px;
  background:#f7f3e8;color:#17324d;box-shadow:5px 5px 0 var(--shadow);
  text-decoration:none;font-size:16px;font-weight:900;white-space:nowrap;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.menuItem:hover{background:#fff;transform:translateY(-1px)}
.menuItem.active{background:var(--yellow)}
.menuItem:active{transform:translate(5px,5px);box-shadow:none}
.menuIcon{font-size:20px;line-height:1;flex:0 0 auto}
.menuLabel{font-size:16px;font-weight:900}

.workspace{width:min(1450px,calc(100% - 30px));min-height:70vh;margin:0 auto;padding:24px 0 82px}
.moduleHost,.moduleError{width:100%;margin-left:auto;margin-right:auto}
.moduleError{
  margin-bottom:16px;padding:14px 16px;border:4px solid var(--ink);border-radius:14px 10px 15px 11px;
  background:#7f2b36;color:#fff;box-shadow:6px 6px 0 var(--shadow);font-size:16px;
}
.moduleLoading{min-height:48vh;display:grid;place-items:center;align-content:center;gap:12px;color:var(--white);font-size:16px}
.loader{width:34px;height:34px;border-radius:50%;border:4px solid rgba(255,255,255,.28);border-top-color:var(--yellow);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes moduleIn{from{opacity:.35;transform:translateY(4px)}}

/* Componentes genéricos para módulos administrativos que siguen existiendo. */
.modulePage{animation:moduleIn .18s ease}
.moduleHero,.moduleSection,.emptyModule{
  border:5px solid var(--ink);color:var(--white);background:var(--paper);
  box-shadow:8px 8px 0 rgba(0,6,14,.62);
}
.moduleHero{min-height:190px;border-radius:20px 13px 18px 15px;padding:30px 34px}
.moduleHero .eyebrow,.moduleSection .eyebrow{
  display:inline-block;padding:5px 9px;border:3px solid var(--ink);border-radius:9px 7px 10px 8px;
  background:var(--yellow);color:#17324d;font-size:16px;font-weight:900;text-transform:uppercase;
}
.moduleHero h2{margin:11px 0 12px;color:#73bfff;font:900 clamp(38px,4vw,58px)/1 var(--sans);letter-spacing:-.025em}
.moduleHero p{max-width:850px;margin:0;color:var(--muted);line-height:1.6;font-size:17px}
.moduleSection{margin-top:18px;border-radius:18px 13px 17px 14px;padding:24px}
.emptyModule{min-height:280px;border-radius:18px 13px 17px 14px;padding:28px;display:grid;place-items:center;align-content:center;text-align:center;color:var(--muted)}
.emptyModule b{margin-bottom:7px;color:#73bfff;font-size:26px}
.emptyModule code{margin-top:10px;padding:8px 10px;border:3px solid var(--ink);border-radius:8px;background:#0d2238;color:var(--white);font-size:16px}
.moduleHost p,.moduleHost li,.moduleHost td,.moduleHost th,.moduleHost small,
.moduleHost input,.moduleHost select,.moduleHost textarea,.moduleHost button,.moduleHost label{font-size:16px!important}

.footerMascot{
  position:fixed;left:14px;bottom:14px;z-index:70;width:92px;padding:0;border:0;background:transparent;
  color:var(--white);display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:none;
}
.footerMascot img{width:76px;height:76px;display:block;object-fit:contain;filter:drop-shadow(4px 5px 0 rgba(0,5,12,.55))}
.footerMascot span{
  display:block;margin-top:-3px;padding:2px 9px;background:#f7f3e8;color:#17324d;border:3px solid var(--ink);
  border-radius:10px 8px 11px 9px;box-shadow:3px 3px 0 var(--shadow);font-size:16px;font-weight:900;white-space:nowrap;
}
.footerMascot:active{transform:translate(3px,3px)}

.mobileDock,.mobileMenuPanel{display:none}
@media(max-width:760px){
  body{padding-bottom:86px}
  .siteHeader{min-height:72px;padding:10px 12px}.paintBrand{font-size:32px;padding:6px 11px 8px}.siteHeader::before{width:54px;height:11px}.siteHeader::after{width:44px;height:10px}
  .topnav{display:none}
  .footerMascot{display:none}
  .workspace{width:calc(100% - 20px);padding:18px 0 26px}
  .moduleHero{min-height:auto;padding:22px 18px}.moduleHero h2{font-size:38px}.moduleHero p{font-size:17px!important}
  .moduleSection{padding:18px 15px}

  .mobileDock{
    position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1fr 1fr;gap:10px;
    padding:10px 12px max(12px,env(safe-area-inset-bottom));background:var(--nav);
    border-top:5px solid var(--ink);box-shadow:0 -7px 0 rgba(0,7,16,.36);
  }
  .mobileDock button{
    min-height:58px;display:grid;place-items:center;border:4px solid var(--ink);border-radius:14px 10px 16px 11px;
    box-shadow:6px 6px 0 var(--shadow);font-size:17px;font-weight:900;color:#17324d;
  }
  .dockHome{background:#e8f7ff}.dockMenu{background:var(--yellow)}
  .mascotHome{grid-template-columns:auto auto!important;align-content:center;justify-content:center;gap:7px;padding:3px 10px!important}
  .mascotHome img{width:44px;height:44px;display:block;object-fit:contain}
  .mascotHome span{font-size:16px;font-weight:900}
  .mobileDock button:active{transform:translate(6px,6px) scale(.97);box-shadow:none}

  .mobileMenuPanel{position:fixed;inset:0;z-index:110;display:block}
  .mobileMenuPanel[hidden]{display:none!important}
  .mobileMenuBackdrop{position:absolute;inset:0;background:rgba(0,9,20,.76)}
  .mobileMenuSheet{
    position:absolute;left:10px;right:10px;bottom:10px;max-height:78vh;overflow:auto;
    background:var(--paper);color:var(--white);border:5px solid var(--ink);border-radius:22px 15px 18px 16px;
    box-shadow:8px 8px 0 rgba(0,5,12,.62);padding:18px;
  }
  .mobileMenuHead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
  .mobileMenuHead h2{margin:0;font-size:28px;line-height:1.05;color:#73bfff}
  .mobileMenuClose{
    width:52px;height:52px;flex:0 0 52px;border:4px solid var(--ink);border-radius:13px 10px 14px 11px;
    background:#ffd9d9;color:#17324d;box-shadow:5px 5px 0 var(--shadow);font-size:22px;font-weight:900;
  }
  .mobileMenuGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .mobileMenuItem{
    min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;
    text-decoration:none;color:#17324d;background:#fff;border:4px solid var(--ink);border-radius:15px 11px 16px 12px;
    box-shadow:6px 6px 0 var(--shadow);font-size:16px;font-weight:900;
  }
  .mobileMenuItem .menuIcon{font-size:28px}.mobileMenuItem span:last-child{font-size:16px;font-weight:900}
  .mobileMenuItem:nth-child(4n+1){background:#eaffeb}.mobileMenuItem:nth-child(4n+2){background:#fff7d3}
  .mobileMenuItem:nth-child(4n+3){background:#eef9ff}.mobileMenuItem:nth-child(4n+4){background:#f4ecff}
  .mobileMenuItem.active{background:var(--yellow)}
  .mobileMenuItem:active,.mobileMenuClose:active{transform:translate(5px,5px) scale(.97);box-shadow:none}
}
@media(max-width:430px){.mobileMenuGrid{grid-template-columns:1fr 1fr}.mobileMenuItem{min-height:82px}}