#xpBoot{
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 999999;
}

#xpBoot body{
  background: black;
}

/* reutilizamos exactamente tu CSS */
#xpBoot .window{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#xpBoot .container{
  width: 150px;
  height: 10px;
  border: 2px solid #b2b2b2;
  border-radius: 7px;
  margin: 0 auto;
  padding: 2px 1px;
  overflow: hidden;
  font-size: 0;
}

#xpBoot .box{
  width: 9px;
  height: 100%;
  background: linear-gradient(to bottom,#2838c7 0%,#5979ef 17%,#869ef3 32%,#869ef3 45%,#5979ef 59%,#2838c7 100%);
  display: inline-block;
  margin-right: 2px;
  animation: loader 2s infinite linear;
}

#xpBoot .logo{
  width: 220px;
  margin: 50px auto;
  font-family: Tahoma, Arial, sans-serif;
  color: white;
  text-align: left;
}

#xpBoot .logo .top{ font-size:16px; }
#xpBoot .logo .mid{ font-size:46px; font-weight:700; }
#xpBoot .logo .mid span{ color:#FF6821; font-size:22px; vertical-align:top; }
#xpBoot .logo .bottom{ font-size:30px; }

@keyframes loader{
  0%{ transform: translateX(-30px); }
  100%{ transform: translateX(150px); }
}
/* Reset básico */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: Tahoma, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  color: #000;
}
body.dragging { cursor: move; }
[hidden] { display: none !important; }
.taskbar{ z-index:1000; }
.start{ position:relative; z-index:3001; pointer-events:auto; }
#desktop, .taskbar, .start, .start-menu { pointer-events:auto; }
/* Fondo Bliss */
.xp-body {
  background: url('../img/bliss.jpg') center center / cover no-repeat fixed;
}

/* ============ PRELOADER ============ */
#preloader {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: #000;
  color: #0f0;
  font-size: 18px;
  font-family: monospace;
}
#preloader .bar {
  width: 240px;
  height: 20px;
  border: 2px solid #0f0;
  margin-bottom: 12px;
  overflow: hidden;
}
#preloader .bar span {
  display: block;
  height: 100%;
  width: 0;
  background: #0f0;
  animation: loadbar 2.5s forwards;
}
@keyframes loadbar {
  to { width: 100%; }
}

/* ============ ICONOS ============ */
#desktop {
  position: relative;
  width: 100%;
  height: 100%;
}
.xp-icons {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.icon {
  width: 72px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  cursor: default;
  user-select: none;
}
.icon img {
  width: 48px;
  height: 48px;
  display: block;
  margin: 0 auto 4px;
}
.icon span {
  display: block;
text-shadow: 1px 1px 2px black;
  padding: 2px 4px;
  border-radius: 2px;
  word-wrap: break-word;
}

.taskbar{
  position:absolute; bottom:0; left:0;
  width:100%;
  height:44px;
background: linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7);
  border-top: 1px solid #11429d;
  box-shadow: inset 0 1px 0 #6ea4f5;
  display:flex; align-items:center;
  z-index:1000;
  font-family: Tahoma, sans-serif;
}


.start{
  position:relative;
  display:flex; align-items:center;
  height:100%;
  margin:0px;
  padding:0 30px 0 20px;
  /* borde continuo: quitamos el derecho para que lo aporte la cápsula */
  border:1px solid #0b6d0b; 
  border-radius:0px 18px 18px 0px;            /* redondeo solo a la izquierda */
  background: linear-gradient(#158b15, #11a011 48%, #0b8e0b 49%, #2ad12a);
  color:#fff; font-weight:700; font-size:21px;  /* texto más grande */
  text-transform:lowercase; letter-spacing:.2px;
  box-shadow:
    inset 0 1px 0 #5be65b,
    inset 0 -1px 0 #0a740a,
    0 1px 0 rgba(0,0,0,.18);
  cursor:pointer; z-index:3001;
}
.start:active{
  background: linear-gradient(#0f7b0f, #0a880a 50%, #0b7a0b 51%, #1ec81e);
  transform: translateY(1px);
}

.start-logo{ height:24px; width:auto; margin:0 8px 0 2px; display:block; }
.start-text{ text-shadow: 0 -1px 0 rgba(0,0,0,.35); line-height:1; }

/* Cápsula derecha: mismo degradado, mismo borde, solapada 2–3px */
.start .start-cap-right{
  display:none;
  position:absolute; right:-3px; top:-1px; bottom:-1px; width:22px;
  background: linear-gradient(#158b15, #11a011 48%, #0b8e0b 49%, #2ad12a);
  border:1px solid #0b6d0b; 
  border-left:none;                       /* que no cree junta interna */
  border-radius:0 18px 18px 0;
  box-shadow: inset 0 1px 0 #61ea61;      /* brillo XP arriba */
  pointer-events:none;                    /* no roba clics */
  z-index:1;                              /* por delante del cuerpo */
}
/* ----- Área de tareas (botones de ventanas) ----- */
/* ----- Área de tareas (botones de ventanas) ----- */
.tasks{
  flex:1; height:100%;
  display:flex; align-items:center; gap:6px;
  padding:0 6px;
}
.tasks .task{
  display:flex; align-items:center; gap:6px;
  height:36px; padding:0 10px;
  border:0px solid #8aaeea; border-radius:8px;
  color:#fff; font-size:14px; cursor:pointer;
  min-width:150px;
  background-color: #2380f9;
}
.tasks .task.active{
  background: #1557b8;
    box-shadow: inset 0 0px 8px #454545;

}

.tray{
  display:flex; align-items:center; gap:6px;
  height:100%; padding:0 10px;
  background: linear-gradient(#2eacee, #2488e6);
  border-left:1px solid #8fb1eb;
  box-shadow: inset 1px 0 0 #2488e6;
}
.tray-ico{ width:20px; height:20px; margin:5px;}
.tray-sep{
  width:1px; height:16px; background:#2488e6; box-shadow:1px 0 0 #2488e6;
}
#clock{
  font-size:14px; color:#fff; padding-left:4px;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.start-menu{ z-index:3000; }
.start{ z-index:3001; }
.start-menu{ z-index:3000; }

.start-menu{
  position:absolute;
  left:6px;
  bottom:44px;                
  width:450px;
  height:600px;
  background:#ece9d8;
  border:2px solid #3f6fb5;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  display:grid;
  grid-template-rows: 86px 1fr 46px; 
  overflow:hidden;
  border-radius:12px 12px 0px 0px;
}

.sm-header{
  background: linear-gradient(#1e56cb, #2b6dd8 55%, #3579df);
  border-bottom:2px solid #1b4da8;
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  color:#fff;
  text-shadow:0 -1px 0 rgba(0,0,0,.35);
}
.sm-userpic{
  width:64px; height:64px; object-fit:cover;
  border:2px solid #ffffffaa; border-radius:6px;
  box-shadow:0 1px 0 rgba(0,0,0,.15);
  background:#fff;
}
.sm-username{
  font:600 21px Tahoma, sans-serif;
}

/* Cuerpo: dos columnas */
.sm-body{
  display:grid; grid-template-columns: 1fr 200px;
  background:#ece9d8;
}

/* Listas */
.sm-list{
  list-style:none; margin:0; padding:6px;
}
.sm-list li{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-radius:3px;
  font-size:15px; cursor:pointer;
  color:#122849;
  font-weight:500;
}
.sm-left .sm-list li img{ width:36px; height:36px; }
.sm-right .sm-list li img{ width:24px; height:24px; }
.sm-sep-line{
    height:1px; margin:6px 6px; list-style:none;
  background:#bfc7d1; border-top:1px solid #fff;
  padding:0; pointer-events:none;
}
.sm-sep-block{
  height:1px; margin:8px 6px 4px;
  background:#c9c1b6; border-top:1px solid #fff;
}
.sm-sep-block-2{
  height:1px; margin:8px 6px 4px;
  background:#d2e5fa; border-top:0.2px solid #84acf7;
}

.sm-left{ display:flex; flex-direction:column; background:white; border-right:1px solid #c8c2b8; }
.sm-left .sm-list{ flex:1; overflow:auto; }
.sm-left .sm-list li:hover{
  background:linear-gradient(#cfe3ff, #b7d3ff);
  border:1px solid #8db3f0;
  padding:5px 7px;              
}

.sm-right{
  background:#d2e5fa;
}
.sm-right .sm-list li{
  padding:5px 8px;
}
.sm-right .sm-list li:hover{
  background:linear-gradient(#cfe3ff, #b7d3ff);
  border:1px solid #8db3f0;
  padding:4px 6px;     
}

.sm-allprograms{
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  margin:6px; width:calc(100% - 12px);
  height:32px; padding:0 10px;
  font-size:13px;
  border:1px solid #8db3f0;
  background:linear-gradient(#dfeaff, #c7dbff);
  border-radius:3px; cursor:pointer;
}
.sm-allprograms .sm-btn-right-ico{ width:28px; height:28px; }
.sm-allprograms:hover{ background:linear-gradient(#cfe1ff, #b7d3ff);  border:1px solid #8db3f0; }


.sm-footer{
  background: linear-gradient(#1e56cb, #2b6dd8 55%, #3579df);;
  border-top:1px solid #b9b6ae;
  padding:6px 8px;
}
.sm-footer-right{ margin-left:auto; display:flex; gap:14px; justify-content:flex-end;}

.sm-btn{
 display:inline-flex; align-items:center; gap:12px;
  min-width:140px; height:30px; padding:0 12px;
  font-size:16px; font-weight:600; color:#fff;
  border-radius:3px; cursor:pointer;
}
.sm-btn-ico{width:32px; height:32px;}
.sm-logoff{

  text-shadow:0 -1px 0 rgba(0,0,0,.2);
}


.sm-shutdown{

  text-shadow:0 -1px 0 rgba(0,0,0,.25);
}


/* Asegurar stacking */
.start{ z-index:3001; }
.start-menu{ z-index:3000; }
.start-menu .left, 
.start-menu .right {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.start-menu button {
  text-align: left;
  padding: 4px 6px;
  font-size: 16px;
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  border:0px solid transparent;
}

.start-menu .bottom {
  display: flex;
  justify-content: space-around;
  padding: 6px;

}

/* ============ CONTEXT MENU ============ */
.context {
  position: absolute;
  background: #fff;
  border: 1px solid #666;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  width: 180px;
  font-size: 13px;
  z-index: 99999;
}
.context li {
  padding: 4px 12px;
  cursor: pointer;
}
.context li:hover {
  background: #cde6ff;
}
.context .sep {
  border-top: 1px solid #ccc;
  margin: 4px 0;
  padding: 0;
}

/* ============ SHUTDOWN SCREEN ============ */
#shutdown {
  background: #000;
  color: #0f0;
  font-family: monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
#shutdown .off {
  text-align: center;
}
#shutdown button {
  margin-top: 12px;
  padding: 6px 12px;
  background: #222;
  border: 1px solid #0f0;
  color: #0f0;
  cursor: pointer;
}
/* ===== Explorer XP (Mi PC) ===== */
.xp-explorer{ display:flex; flex-direction:column; height:100%; font-family:Tahoma,sans-serif; }

/* Toolbar */
.xp-ex-toolbar{
  display:flex; align-items:center; gap:10px;
  padding:6px 8px;
  background: linear-gradient(#e9edf8, #dfe8fb);
  border-bottom:1px solid #b7c9f3;
}
.xp-ex-toolbar .group{ display:flex; align-items:center; gap:6px; }
.xp-ex-toolbar .group.address{ flex:1; gap:8px; }
.xp-ex-toolbar .group.right{ margin-left:auto; }
.xp-ex-toolbar label{ font-size:12px; color:#333; }
.xp-ex-toolbar .addr{
  flex:1; height:24px; padding:0 6px; border:1px solid #8aaeea; border-radius:2px;
  background:#fff; font-size:12px;
}

/* ===== Explorer XP: cabecera en 3 franjas ===== */
.xp-ex-head{
  display:flex;
  flex-direction:column;
  border-bottom:1px solid #b7c9f3;
}
/* Franja común beige para menú, toolbar e input Dirección */
.xp-strip{
  background: linear-gradient(90deg, #f2f1e9, #e3ddcd);
  border-bottom:1px solid #cfc7b5;
}

/* Menú */
.xp-ex-menubar{
  height:24px; display:flex; align-items:center; gap:2px; padding:0 8px;
}
.xp-ex-menubar .mb-item{
  font-size:12px; line-height:20px; padding:0 8px;
  border:1px solid transparent; background:transparent; border-radius:2px;
}
.xp-ex-menubar .mb-item:hover{ background:#e9f1ff; border-color:#9fbdf4; }

/* Toolbar (mismo fondo beige gracias a .xp-strip) */
.xp-ex-toolbar-icons{
  display:flex; align-items:center; gap:10px; padding:4px 8px;
}
.xp-ex-toolbar-icons .group{ display:flex; align-items:center; gap:6px; }

/* Botón base + con texto */
.tb-btn{
  height:24px; padding:0 6px;
  border:0px solid #b7c9f3; border-radius:3px;
  background:transparent;
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
}

.tb-btn .lbl{ font-size:12px; color:#333; line-height:1; }

/* Dirección */
.xp-ex-address{
  display:flex; align-items:center; gap:8px; padding:4px 8px;
}
.xp-ex-address label{ font-size:12px; color:#333; }
.xp-ex-address .addr{
  flex:1; height:24px; padding:0 6px; font-size:12px;
  border:1px solid #8aaeea; border-radius:2px; background:#fff;
}
.xp-ex-address .go-btn{
  height:24px; padding:0 10px; display:inline-flex; align-items:center; gap:6px;
  font-size:12px; color:#454545; border-radius:3px; cursor:pointer;
  background: transparent;
  border:0px solid transparent; 
}


/* Iconos (asegura nombres/paths) */
.tb-btn .ico,
.xp-ex-address .go-btn .ico{
 height:24px; width:24px; background-size:contain; background-position:center; background-repeat:no-repeat;
}
.ico-back    { background-image:url('../img/icons/Back.png'); }
.ico-forward { background-image:url('../img/icons/Forward.png'); }
.ico-up      { background-image:url('../img/icons/Up.png'); }
.ico-search  { background-image:url('../img/icons/search.png'); }
.ico-folders { background-image:url('../img/icons/folder.png'); }
.ico-go      { background-image:url('../img/icons/Go.png'); }    

/* Barra de dirección */
.xp-ex-address{
  display:flex; align-items:center; gap:8px; padding:4px 8px;
}
.xp-ex-address label{ font-size:12px; color:#333; }
.xp-ex-address .addr{
  flex:1; height:24px; padding:0 6px; font-size:12px;
  border:1px solid #8aaeea; border-radius:2px; background:#fff;
}


.xp-ex-address .go-btn .ico{ width:21px; height:21px; }
.xp-ex-body{ display:grid; grid-template-columns: 220px 1fr; height:100%; }

.xp-ex-sidebar{
  background: linear-gradient(135deg, #79a1ec, #6373de);
  border-right:1px solid #b7c9f3;
  padding:8px; overflow:auto;
}
.xp-ex-sidebar .pane{
  background:#d4ddf8;
  border:1px solid #a7bef3; border-radius:4px; margin-bottom:8px;
}
.xp-ex-sidebar .pane-title{
  background:linear-gradient(90deg,#fff, #b9cdf4);
  color:#2559ba; font-weight:600; font-size:12px; padding:6px 8px;
  text-shadow:0 -1px 0 rgba(0,0,0,.25);
}
.xp-ex-sidebar .pane-list{ list-style:none; margin:0; padding:6px;color:#2559ba; }
.xp-ex-sidebar .pane-list li{ padding:6px; border-radius:3px; cursor:pointer; font-size:12px; }
.xp-ex-sidebar .pane-list li:hover{ background:#d9e8ff; }
.xp-ex-sidebar .pane-detail{ padding:8px; font-size:12px; }

.xp-ex-content{ background:#fff; padding:10px; overflow:auto; }
.xp-ex-content .section{ margin-bottom:16px; }
.xp-ex-content .section-title{ color:#2f4b86; font-weight:700; font-size:12px; margin:4px 0 8px; }

.tiles{ display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:12px; }
.tile{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 6px; border:1px solid transparent; border-radius:6px;
  cursor:pointer; user-select:none;
}
.tile img{ width:44px; height:44px; object-fit:contain; image-rendering:-webkit-optimize-contrast; }
.tile span{ text-align:center; font-size:12px; color:#123; }
.tile:hover{ background:linear-gradient(#e9f1ff, #d9e9ff); border-color:#8db3f0; }
.tile:active{ filter:brightness(.97); }
.winbox {
  background: #fff;
  font-size: 13px;
}
.winbox .wb-title {
  font-family: Tahoma, sans-serif;
  background-color: #2f6fd8;
}
.winbox .wb-control button{
  width:22px; height:18px;
  background-color: #2f6fd8;
  background-repeat:no-repeat;
  background-position:center;
  background-size:14px 14px;
  color:transparent; border:none; outline:none;
  filter:none;
}
.winbox.xp-window .wb-header{background-color: #2f6fd8;}
.winbox .wb-min { background-image:url('../img/icons/Minimize.png'); }
.winbox .wb-max { background-image:url('../img/icons/Maximize.png'); }
.winbox .wb-close{  background-image:url('../img/icons/Exit.png');}
.winbox .wb-full {display:none;}
.wb-close{background-size: 25px;
    background-position: 0px center;}
.wb-min{background-size: 25px;
    background-position: 0px center;}
.wb-max{background-size: 25px;
    background-position: 0px center;}
.winbox.xp-window{
  border-radius: 6px;
  overflow: hidden;
  border: 3px solid #2f6fd8;
}
.winbox .wb-title{ display:flex; align-items:center; gap:6px; }
.winbox .wb-title .wb-icon{ width:16px; height:16px; flex:0 0 auto; pointer-events:none; image-rendering:pixelated; }
.winbox .wb-title .wb-caption{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Taskbar: icono en la pestaña */
.tasks .task{
  display: inline-flex;            /* ya lo tienes, lo reforzamos */
  align-items: center;
  gap: 6px;                        /* separación icono/título */
}
.tasks .task .task-ico{
  width: 16px; height: 16px;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;      /* opcional */
  flex: 0 0 auto;
}
.tasks .task .task-title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;                /* ajusta si quieres */
}

/*CALCULADORA CSS*/
    .xp-calc{height:100%;background:#ece9d8}
    .xp-calc-wrap{padding:10px}
    .xp-calc-disp{width:100%;height:30px;border:1px solid #7f9db9;box-shadow:inset 0 1px 0 #fff; background:#fff;
      font: 16px "Tahoma", Arial; text-align:right; padding:4px 6px; margin:0 0 8px 0}
    .xp-calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
    .xp-calc-btn{border:1px solid #7f9db9;border-radius:4px; background:linear-gradient(#ffffff,#e6eef8);
      font:18px "Tahoma"; padding:6px; box-shadow:inset 0 1px 0 #fff; cursor:pointer; aspect-ratio: 1 / 1;color:blue;}
    .xp-calc-btn:active{background:linear-gradient(#e6eef8,#ffffff)}

    /* ==== Paint XP (simplificado) ==== */
.xp-paint{display:flex;flex-direction:column;height:100%;background:#ece9d8;font:12px "Tahoma", Arial, sans-serif;color:#000}
.xp-paint .paint-toolbar{
  display:flex;align-items:center;gap:6px;padding:6px 8px;
  background:#d4d0c8;border-bottom:1px solid #b5b2a5;
}
.xp-paint .paint-toolbar .tools .tool,
.xp-paint .paint-toolbar .action{
  min-width:28px;height:24px;padding:0 6px;border:1px solid #7f9db9;border-radius:3px;
  background:linear-gradient(#fff,#e6eef8); box-shadow:inset 0 1px 0 #fff; cursor:pointer;
}
.xp-paint .paint-toolbar .tool.active{outline:1px solid #3a6ea5}
.xp-paint .paint-toolbar .size{display:flex;align-items:center;gap:6px;margin-left:6px}
.xp-paint .paint-toolbar .spacer{flex:1}
.xp-paint .paint-toolbar .sep{width:1px;height:20px;background:#b5b2a5;margin:0 6px}
.xp-paint .paint-toolbar .action.primary{font-weight:bold}

.xp-paint .paint-main{flex:1;position:relative;background:#fff;overflow:hidden}
.xp-paint canvas{display:block;width:100%;height:100%}

.xp-paint .paint-palette{
  display:flex;flex-wrap:wrap;gap:6px;padding:20px 10px;
  background:#d4d0c8;border-top:1px solid #b5b2a5;
}
.xp-paint .swatch{
  width:18px;height:18px;border:1px solid #555;background:var(--c); cursor:pointer;
}
.xp-paint .swatch.sel{outline:2px solid #3a6ea5;outline-offset:1px}

/* ==== Paint XP extra ==== */
.xp-paint .paint-main{flex:1;position:relative;background:#fff;overflow:hidden}
.xp-paint canvas{display:block;width:100%;height:100%}

/* overlay para vistas previas y cursor de goma */
.xp-paint .overlay{
  position:absolute; inset:0; pointer-events:none;
}

/* cursor tipo texto cuando la herramienta de texto está activa */
.xp-paint .tool[data-tool="text"].active { outline:1px solid #3a6ea5; }

/* ===== Buscaminas XP ===== */
.msw3 { background:#ece9d8; font:12px Tahoma, Arial, sans-serif; }
.msw3-wrap { padding:6px; background:#c0c0c0;
  border-left:3px solid #f5f5f5; border-top:3px solid #f5f5f5;
  border-right:3px solid #808080; border-bottom:3px solid #808080;
}

/* display 000-style */
.msw3-score {
  height:38px; margin-bottom:6px; display:flex; align-items:center; justify-content:space-between;
  padding:4px 8px 4px 5px; background:#c0c0c0;
  border-top:2px solid #808080; border-left:2px solid #808080;
  border-right:2px solid #f5f5f5; border-bottom:2px solid #f5f5f5;
}
.msw3-board {
  margin: 0 auto; /* 👈 centrado horizontal */
}
.msw3-digits {
  min-width:56px; height:26px; display:flex; align-items:center; justify-content:flex-end;
  color:#f33; background:#000; font:700 18px/1.1 "Courier New", monospace;
  padding:0 6px; letter-spacing:1px; border:2px inset #fff;
}

/* Carita */
.msw3-face {
  width:28px; height:28px; display:grid; place-items:center; background:#c0c0c0; cursor:pointer;
  border:2px solid #f5f5f5; border-right-color:#808080; border-bottom-color:#808080; border-radius:2px;
}
.msw3-face.pressed { border:2px solid #808080; border-right-color:#f5f5f5; border-bottom-color:#f5f5f5; }
.msw3-face-img { width:22px; height:22px; image-rendering: pixelated; }

/* Tablero (usa --cell) */
.msw3-board {
  --cell: 22px; /* fallback por si no llega inline */
  --w:9; --h:9;
  display:grid;
  grid-template-columns: repeat(var(--w), var(--cell));
  grid-template-rows: repeat(var(--h), var(--cell));
  border-top:3px solid #808080; border-left:3px solid #808080;
  border-right:3px solid #f5f5f5; border-bottom:3px solid #f5f5f5;
  background:#c0c0c0;
}
.msw3-face{
  box-sizing: border-box;
  width: calc(var(--cell) + 6px);
  height: calc(var(--cell) + 6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background:#c0c0c0;
  border:2px solid #f5f5f5;
  border-right-color:#808080;
  border-bottom-color:#808080;
  border-radius:2px;
}
.msw3-face.pressed{
  border:2px solid #808080;
  border-right-color:#f5f5f5;
  border-bottom-color:#f5f5f5;
}

.msw3-face-img{
  display: block;                  /* quita baseline */
  width: calc(var(--cell) - 2px);  /* escala con la celda */
  height: calc(var(--cell) - 2px);
  image-rendering: pixelated;
}
/* Celdas */
.m3-cell {
  width:var(--cell); height:var(--cell);
  display:inline-grid; place-items:center; user-select:none; position:relative;
  font:700 calc(var(--cell) * 0.8 / 1) / 1 Tahoma, Arial, sans-serif;
}
.m3-up {
  background:#c0c0c0;
  border-left:2px solid #f5f5f5; border-top:2px solid #f5f5f5;
  border-right:2px solid #808080; border-bottom:2px solid #808080;
}
.m3-open { background:#d0d0d0; border:1px solid #808080; }

/* Números clásico XP */
.m3-n1 { color:#0000ff; }
.m3-n2 { color:#008000; }
.m3-n3 { color:#ff0000; }
.m3-n4 { color:#000080; }
.m3-n5 { color:#800000; }
.m3-n6 { color:#008080; }
.m3-n7 { color:#000000; }
.m3-n8 { color:#808080; }

/* Bandera con PNG (se escala con la celda) */
.m3-flag { width:var(--cell); height:var(--cell); position:absolute; inset:0; image-rendering: pixelated; }

/* Interrogación */
.m3-qm { color:#000; font-weight:700; }

/* Mina por CSS (círculo negro proporcional) */
/* Mina como emoji 💣 centrado y escalado al tamaño de celda */
.m3-mine { position: relative; }
.m3-mine::before{
  content: "💣";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell) * 0.85);
  line-height: 1;
}
.m3-boom { background:#f3b6b6 !important; }

/* Misflagged: X roja proporcional */
.m3-mis::after {
  content:""; position:absolute; inset:calc(var(--cell) * 0.15);
  background:
    linear-gradient(45deg, transparent 45%, #c00 45%, #c00 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, #c00 45%, #c00 55%, transparent 55%);
}

/* Pie */
.msw3-bottom {
  display:flex; align-items:center; gap:8px; margin-top:6px; padding:6px; background:#c0c0c0;
  border:2px solid #fff; border-right-color:#808080; border-bottom-color:#808080;
}
/* ===== Ejecutar (Run) — XP ===== */
.xp-run{ background:#d4d0c8; height:100%; box-sizing:border-box; padding:10px;
  font:12px "Tahoma", Arial, sans-serif; color:#000; }
.xp-run .row{ display:flex; gap:10px; }
.xp-run .run-ico{
  width:32px; height:32px; flex:0 0 32px; margin-top:2px;
  background: url("assets/img/icons/run.png") no-repeat center/contain;
}
.xp-run .col{ flex:1; }
.xp-run .title{ margin-bottom:8px; color:#000; }
.xp-run .lbl{ display:block; margin:6px 0 4px; }
.xp-run .inp{
  width:100%; height:26px; box-sizing:border-box; padding:3px 6px;
  background:#fff; border:1px inset #9c9a8f; font:12px "Tahoma";
}
.xp-run .btns{ display:flex; gap:6px; justify-content:flex-end; margin-top:12px; }
.xp-run .btn{
  min-width:74px; height:26px; cursor:pointer;
  border:1px solid #7f9db9; border-radius:3px;
  background:linear-gradient(#ffffff,#e6eef8); box-shadow:inset 0 1px 0 #fff;
  font:12px "Tahoma";
}
.xp-run .btn:active{ background:linear-gradient(#e6eef8,#ffffff); }
.xp-run .msg{
  margin-top:10px; padding:6px 8px; background:#ffffe1; border:1px solid #d8c97a;
}
.xp-run .btn.wiggle{ animation:xp-wiggle .25s ease; }
@keyframes xp-wiggle{
  0%{ transform:translateX(0) } 25%{ transform:translateX(-2px) }
  75%{ transform:translateX(2px) } 100%{ transform:translateX(0) }
}
.wmp9{height:100%;display:flex;flex-direction:column;
  font:12px "Tahoma", Arial, sans-serif;color:#0a2b4f;background:#c9d8ee}

.wmp9 .viewport{flex:1;background:#000;margin:6px 6px 0;
  border-top:1px solid #4f4f4f;border-bottom:1px solid #7c7c7c;border-radius:2px}

.wmp9 .status{height:20px;display:flex;align-items:center;padding:0 8px;
  background:#e9e6d9;border-top:1px solid #b7b4a7;border-bottom:1px solid #9fb2d4;
  color:#2a4f84}

.wmp9 .chrome{padding:10px 8px;border-top:1px solid #5b79ad;
  background:linear-gradient(
  #a8c3ea,
  #6080c9 6%,
  #5667ae 95%,
  #3d437f 99%
); 
  box-shadow: inset 0 1px 0 #fff}
.wmp9 .transport{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}

.wmp9 .btns{display:flex;gap:8px;align-items:center}
.wmp9 .btn{width:34px;height:34px;border-radius:50%;
  border:1px solid #0f2059;background:linear-gradient(#fafff4, #8895c2);
  display:grid;place-items:center;cursor:pointer;  box-shadow: inset 0 1px 1px rgba(255,255,255,.6),
              0 2px 3px rgba(0,0,0,.4);}
.wmp9 .btn:active{background:linear-gradient(#e7effa,#fff)}
.wmp9 .btn svg{width:18px;height:18px;stroke:#27508e;stroke-width:2;fill:currentColor}

.wmp9 .btn.play{width:48px;height:48px}

#w9Open span{margin-left:10px;}
.wmp9 .seek{position:relative;height:10px;border-radius:6px;cursor:pointer;
  background:linear-gradient(#cfe0f7,#e9f1ff);border:1px solid #8aa8d6}
.wmp9 .seek .fill{position:absolute;inset:0 auto 0 0;width:0%;
  background:linear-gradient(#7db0ff,#5d95ec);border-radius:6px}

.wmp9 .volwrap{display:flex;align-items:center;gap:8px}
.wmp9 .vol{position:relative;width:110px;height:8px;border-radius:6px;cursor:pointer;
  background:#c9e2c0;border:1px solid #6aa46a}
.wmp9 .vol .fill{position:absolute;inset:0 auto 0 0;width:70%;
  background:#6bd368;border-radius:6px}

.wmp9 .time{min-width:74px;text-align:right;color:#163b6d}
.wmp9 .btn svg path {
  stroke: rgba(0,0,90,0.7);
  stroke-width: 2;
  fill: rgba(0,0,90,0.7);
}
 /* Aseguramos posicionamiento de la etiqueta en el viewport */
  .wmp9 .viewport { position: relative; }

  /* Etiqueta superior izquierda con el nombre del archivo */
  #w9NowPlaying{
    position: absolute;
    top: 8px;
    left: 8px;
    display: none;               /* se muestra al seleccionar archivos */
    max-width: 70%;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1.2;
    color: #fff;
    background: rgba(0,0,0,.6);
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
  }

.wmp9 .btn:nth-child(2){width:28px;height:28px;border-radius: 99px;  
  border:1px solid #0f2059;background:linear-gradient(#fafff4, #8895c2);
  display:grid;place-items:center;cursor:pointer;  box-shadow: inset 0 1px 1px rgba(255,255,255,.6),
              0 2px 3px rgba(0,0,0,.4);}

.wmp9 .btn:nth-child(3),
.wmp9 .btn:nth-child(4) {
  width: 50px;
  height: 20px;
  border-radius: 12px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6),
              0 2px 3px rgba(0,0,0,.4);
}
.wmp9 .btn:nth-child(5) {
  width: 100px;
  height: 20px;
  border-radius: 16px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6),
              0 2px 3px rgba(0,0,0,.4);
}
/* Flyout "Todos los programas" */
#allProgsFlyout {
  position: absolute;
  z-index: 3100;
  width: 280px;
  min-height: 240px;
  background: linear-gradient(#fff,#f4efff);
  border: 1px solid #9c9a8d;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  padding: 6px;
  border-radius: 3px;
}

/* Lista de programas dentro del flyout */
#allProgsFlyout .group { margin: 6px 0 10px; }
#allProgsFlyout .group-title {
  font-weight: bold; font-size: 11px; color: #2f5597; margin: 4px 6px 6px;
}
#allProgsFlyout .item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; border: 1px solid transparent; border-radius: 2px;
  cursor: pointer; user-select: none;
}
#allProgsFlyout .item:hover { background: #dfe8f6; border-color: #7da2ce; }
#allProgsFlyout .item img { width: 18px; height: 18px; image-rendering: pixelated; }
#allProgsFlyout .chev { margin-left: auto; opacity: .6; }
#allProgsFlyout .sep { height: 1px; margin: 6px 2px; background: #c9c6b8; }

/* Submenús (p. ej., Juegos → Buscaminas) */
#allProgsFlyout .has-sub { position: relative; }
#allProgsFlyout .submenu {
  position: absolute; left: 100%; top: -6px; width: 260px;
  background: linear-gradient(#fff,#f4efff);
  border: 1px solid #9c9a8d; box-shadow: 0 8px 22px rgba(0,0,0,.25);
  padding: 6px; border-radius: 3px; display: none;
}
#allProgsFlyout .has-sub:hover > .submenu { display: block; }

/* ====== About Windows (XP) ====== */
.xp-aboutwin{
  height:100%;
  background:#fff;
  font: 12px/1.2 Tahoma, Arial, sans-serif;
  color:#000;
  display:flex;
  flex-direction:column;
  border:1px solid #7f9db9; /* borde interior estilo XP */
  box-sizing:border-box;
}

.xp-aboutwin-top{
  height:96px;
  background: radial-gradient(ellipse at top,#9dbaf6, #6481e7);
  border-bottom:1px solid #0c4f9e;
  position:relative;
  padding:10px 12px;
  box-sizing:border-box;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.xp-aboutwin-brand{
  display:flex;
  gap:10px;
  align-items:center;
  color:#fff;
}

.xp-aboutwin-logo {
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: transparent;   /* anulamos el gradiente anterior */
}

.xp-aboutwin-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: auto;
}

/* “wordmark” */
.xp-aboutwin-wordmark .w1{ font-size:12px; opacity:.95; }
.xp-aboutwin-wordmark .w2{ font-size:28px; font-weight:700; letter-spacing:.2px; line-height:1; }
.xp-aboutwin-wordmark .w3{ font-size:16px; font-weight:700; margin-top:2px; opacity:.95; }

.xp-aboutwin-wordmark .xp{
  display:inline-block;
  margin-left:6px;
  padding:0 6px;
  font-size:16px;
  font-weight:900;
  color:#ff7a00;
  text-transform:lowercase;
  transform: translateY(-6px);
}

.xp-aboutwin-corner{
  text-align:right;
  color:#eaf3ff;
  font-size:11px;
  opacity:.95;
}

.xp-aboutwin-body{
  flex:1;
  padding:16px 16px 12px 16px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  background:#f6f3e8; /* beige XP */
}

.xp-aboutwin-center{
  text-align:center;
  padding:8px 0 10px;
}

.xp-aboutwin-center .line{ margin:3px 0; }

.xp-aboutwin-sep{
  height:1px;
  background:#bdb6a6;
  margin:10px 0;
}

.xp-aboutwin-license{
  color:#000;
  margin-bottom:8px;
}

.xp-aboutwin-license .link{
  color:#1a56d6;
  text-decoration:underline;
  cursor:default;
}

.xp-aboutwin-box{
  background:#fff;
  border:1px solid #7f9db9;
  height:64px;
  padding:8px;
  box-sizing:border-box;
  display:flex;
  align-items:flex-start;
}

.xp-aboutwin-box .dot{
  font-family: "Courier New", monospace;
  color:#000;
}

.xp-aboutwin-mem{
  margin-top:2px;
}

.xp-aboutwin-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:auto;
  padding-top:10px;
}

.xp-btn{
  min-width:86px;
  padding:4px 14px;
  border:1px solid #7f9db9;
  background: linear-gradient(#ffffff, #e7e3d6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
  border-radius:2px;
  cursor:default;
}
.xp-btn:active{
  background: linear-gradient(#e7e3d6, #ffffff);
}
/* ===== FIX DESKTOP ICONS (XP layout) ===== */

#desktop {
  position: relative;
  overflow: hidden;
}

#desktop .icons {
  position: absolute;
  top: 10px;
  left: 10px;

  display: grid !important;
  grid-auto-flow: row;
  grid-auto-rows: 90px;
  grid-template-columns: 90px;

  gap: 10px;
  align-content: start;
  justify-items: center;
  pointer-events: auto;
}

/* Cada icono */
#desktop .icon {
  width: 90px;
  text-align: center;
  display: block;
}

#desktop .icon img {
  width: 48px;
  height: 48px;
  display: block;
  margin: 0 auto;
}

#desktop .icon span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
}
#mobileBlock{
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999999;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mobileBlock-box{
  max-width: 480px;
  padding: 40px 30px;
  color: #fff;
  font-family: Tahoma, Arial, sans-serif;
}

.mb-title{
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 16px;
}

.mb-text{
  font-size: 16px;
  margin-bottom: 10px;
  opacity: .9;
}

.mb-link{
  font-size: 18px;
  color: #4da3ff;
  word-break: break-all;
}