@font-face {
  font-family: 'Royal Fighter';
  src: url('Fonts/Royal Fighter Demo.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Royal Fighter';
  src: url('Fonts/Royal Fighter Demo.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@import url('https://fonts.googleapis.com/css2?family=Tahoma:wght@400;700&display=swap');
:root{
  --xp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpolygon points='3,1 3,19 8,14 12,22 14,21 10,13 17,13' fill='white' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 3 1,default;
    --xp-wait:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='10' y='2' width='12' height='2' fill='black'/%3E%3Crect x='10' y='28' width='12' height='2' fill='black'/%3E%3Crect x='10' y='2' width='2' height='4' fill='black'/%3E%3Crect x='20' y='2' width='2' height='4' fill='black'/%3E%3Crect x='10' y='26' width='2' height='4' fill='black'/%3E%3Crect x='20' y='26' width='2' height='4' fill='black'/%3E%3Cpath d='M12,6 Q16,10 20,6' fill='%23f5c030' stroke='black' stroke-width='1'/%3E%3Cpath d='M12,26 Q16,22 20,26' fill='%23f5c030' stroke='black' stroke-width='1'/%3E%3Cpath d='M12,6 L12,26 M20,6 L20,26' stroke='black' stroke-width='1'/%3E%3Ccircle cx='16' cy='14' r='3' fill='%23f5c030'/%3E%3C/svg%3E") 16 16,wait;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Tahoma,'MS Sans Serif',Arial,sans-serif;font-size:11px;overflow:hidden;width:100vw;height:100vh;cursor:var(--xp);}
button,.win-btn,.desktop-icon,.sm-item,.sm-footer-btn,#start-btn,.taskbar-btn,.recycle-msg,.xp-menubar span,#logout-btn{cursor:var(--xp);}button,.win-btn,.desktop-icon,.sm-item,.sm-footer-btn,#start-btn,.taskbar-btn,.xp-menubar span,#logout-btn,.xp-titlebar,.taskbar-btn{user-select:none;}
/* LOGIN */
#login-screen{position:fixed;inset:0;z-index:9999;background:#1a4a8a;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 0.8s ease;}
#login-screen.fade-out{opacity:0;pointer-events:none;}
.login-top-bar{position:absolute;top:0;left:0;right:0;height:80px;background:linear-gradient(to bottom,#2060c0,#1040a0);display:flex;align-items:center;padding:0 30px;border-bottom:2px solid #4488dd;gap:20px;}
.login-top-bar h1{color:white;font-size:28px;font-weight:bold;letter-spacing:1px;text-shadow:1px 1px 2px rgba(0,0,0,0.5);}
.login-top-bar p{color:#aaddff;font-size:12px;margin-top:4px;}
.login-bottom-bar{position:absolute;bottom:0;left:0;right:0;height:50px;background:linear-gradient(to bottom,#1040a0,#0820a0);border-top:2px solid #4488dd;display:flex;align-items:center;justify-content:space-between;padding:0 30px;}
.login-bottom-bar-left{display:flex;align-items:center;gap:8px;color:white;font-size:13px;cursor:var(--xp);}
.login-bottom-bar-right{color:#aaddff;font-size:11px;text-align:right;max-width:300px;}
.login-welcome{display:flex;flex-direction:row;align-items:center;}
.login-left-panel{display:flex;flex-direction:column;align-items:center;gap:16px;min-width:220px;}
.login-left-text{color:#aaddff;font-size:13px;font-weight:bold;text-align:center;line-height:1.5;}
.login-divider{width:2px;height:200px;background:linear-gradient(to bottom,transparent,#4488dd,transparent);margin:0 60px;}
.login-center{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:40px;}
.login-avatar{width:80px;height:80px;border-radius:4px;background:#1a5aaa;border:2px solid #6699cc;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.login-username{color:white;font-size:16px;font-weight:bold;text-shadow:1px 1px 3px rgba(0,0,0,0.5);}
.login-subtitle{color:#aaddff;font-size:11px;}
.login-btn{margin-top:10px;padding:6px 24px;background:linear-gradient(to bottom,#4ea8f8,#1a6ad0);border:1px solid #1050a0;border-radius:3px;color:white;font-family:Tahoma,Arial,sans-serif;font-size:12px;cursor:var(--xp);box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);}
.login-btn:hover{background:linear-gradient(to bottom,#60b8ff,#2a7ae0);}
.loading-bar-wrap{width:200px;height:14px;border:1px solid rgba(255,255,255,0.4);border-radius:7px;overflow:hidden;margin-top:10px;}
.loading-bar-fill{height:100%;width:0;background:linear-gradient(to right,#60b8ff,#4488ff);border-radius:7px;transition:width 0.05s linear;}
/* DESKTOP */
#desktop{position:fixed;inset:0;background:url('images/icon_ie_926b5c2b.jpg') center/cover no-repeat;display:none;}
#desktop.visible{display:block;}
#selection-rect{position:fixed;border:1px dotted #fff;background:rgba(49,106,197,0.2);pointer-events:none;display:none;z-index:500;}
/* TASKBAR */
#taskbar{position:fixed;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,#245edc 0%,#3f8cf0 8%,#245edc 10%,#1846c8 90%,#1040b8 100%);display:flex;align-items:center;z-index:1000;box-shadow:0 -1px 0 #1040b8;}
#start-btn{height:100%;padding:0;background:none;border:none;display:block;cursor:var(--xp);flex-shrink:0;overflow:hidden;}
#start-btn:hover{background:none;}
#taskbar-tasks{flex:1;display:flex;align-items:center;gap:2px;padding:2px 4px;}
.taskbar-btn{height:22px;min-width:120px;max-width:160px;padding:0 8px;background:linear-gradient(to bottom,#2a6ad8,#1a52b8);border:1px solid #0830a0;border-radius:2px;color:white;font-size:11px;font-family:Tahoma,Arial,sans-serif;cursor:var(--xp);text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.taskbar-btn:hover{background:linear-gradient(to bottom,#3a7ae8,#2a62c8);}
.taskbar-btn.active{background:linear-gradient(to bottom,#1a52b8,#2a6ad8);box-shadow:inset 1px 1px 2px rgba(0,0,0,0.3);}
#taskbar-clock{padding:0 8px;color:white;font-size:11px;background:rgba(0,0,0,0.1);height:100%;display:flex;align-items:center;border-left:1px solid rgba(255,255,255,0.2);cursor:default;}
#system-tray{display:flex;align-items:center;height:22px;margin:4px 2px;background:linear-gradient(to bottom,#0a2888,#1846c8);border:1px solid;border-color:#0a1060 #2858d0 #2858d0 #0a1060;padding:0 3px 0 5px;gap:2px;border-radius:2px;}
#tray-clock{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 5px;color:white;font-size:11px;line-height:1.25;height:100%;cursor:var(--xp);white-space:nowrap;border-left:1px solid rgba(255,255,255,0.1);margin-left:2px;}
#tray-clock:hover{background:rgba(255,255,255,0.12);}
#tray-time{font-size:11px;font-weight:normal;font-family:Tahoma,Arial,sans-serif;}
#tray-date{font-size:9px;opacity:0.0;height:0;overflow:hidden;}
.tray-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;cursor:var(--xp);opacity:0.9;border-radius:2px;}
.tray-icon:hover{background:rgba(255,255,255,0.15);opacity:1;}
.tray-tooltip{position:fixed;bottom:34px;background:#ffffc0;border:1px solid #888;padding:4px 8px;font-size:11px;font-family:Tahoma,Arial,sans-serif;display:none;z-index:9999;pointer-events:none;box-shadow:2px 2px 4px rgba(0,0,0,0.2);}
/* Volume popup */
#vol-popup{position:fixed;bottom:34px;right:10px;background:#ece9d8;border:1px solid #0054e3;box-shadow:2px 2px 6px rgba(0,0,0,0.4);padding:12px 16px;display:none;z-index:9998;width:60px;font-size:11px;font-family:Tahoma,Arial,sans-serif;text-align:center;}
#vol-popup:before{content:"Volumen";display:block;margin-bottom:8px;color:#333;}
/* Date/Time popup window */
.datetime-popup{position:fixed;z-index:10000;}
#logout-btn{height:100%;padding:0 10px;display:flex;align-items:center;gap:5px;color:white;font-size:11px;cursor:var(--xp);border-left:1px solid rgba(255,255,255,0.2);background:rgba(0,0,0,0.1);}
#logout-btn:hover{background:rgba(255,0,0,0.25);}
/* ICONS */
.desktop-icon{position:absolute;width:72px;text-align:center;display:flex;flex-direction:column;align-items:center;cursor:var(--xp);padding:4px;border-radius:3px;}
.desktop-icon:hover .icon-wrapper{outline:1px solid rgba(100,150,255,0.4);position:relative;}
.desktop-icon:hover .icon-wrapper::after{content:"";position:absolute;inset:0;background:rgba(49,106,197,0.25);pointer-events:none;mix-blend-mode:multiply;}.desktop-icon:hover .icon-label{background:rgba(10,36,106,0.55);color:white;text-shadow:none;}
.desktop-icon.selected{background:none;}
.desktop-icon.selected .icon-wrapper{outline:1px solid rgba(100,160,255,0.6);position:relative;}
.desktop-icon.selected .icon-wrapper::after{content:"";position:absolute;inset:0;background:rgba(49,106,197,0.45);pointer-events:none;mix-blend-mode:multiply;}
.desktop-icon.selected .icon-label{background:#0a246a;color:white;text-shadow:none;outline:1px dotted rgba(255,255,255,0.7);}
.desktop-icon .icon-img{font-size:32px;display:block;filter:drop-shadow(1px 1px 2px rgba(0,0,0,0.5));}
.icon-wrapper{width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin:0 auto;position:relative;}
.folder-svg{width:36px;height:36px;display:block;margin:0 auto;}
.desktop-icon .icon-label{display:inline-block;color:white;font-size:11px;margin-top:3px;text-shadow:1px 1px 2px rgba(0,0,0,0.9),-1px -1px 0 rgba(0,0,0,0.6);word-break:break-word;line-height:1.3;padding:0 2px;max-width:68px;}

/* WINDOWS */
.xp-window{position:fixed;background:#ece9d8;border:2px solid #0831d9;border-top:none;border-radius:6px 6px 0 0;min-width:300px;min-height:200px;box-shadow:0 0 0 1px #6080e8 inset,3px 3px 10px rgba(0,0,0,0.55);display:flex;flex-direction:column;z-index:100;}
.xp-window.hidden{display:none;}
.xp-window{transform-origin:top left;}
.xp-window.win-opening{animation:winOpen 0.12s ease-out;}
.xp-window.win-closing{animation:winClose 0.1s ease-in forwards;}
.xp-window.win-minimizing{animation:winMinimize 0.12s ease-in forwards;}
.xp-window.win-restoring{animation:winRestore 0.12s ease-out;}
@keyframes winOpen{from{opacity:0;transform:scale(0.85)}to{opacity:1;transform:scale(1)}}
@keyframes winClose{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.85)}}
@keyframes winMinimize{from{opacity:1;transform:scaleY(1)}to{opacity:0;transform:scaleY(0)}}
@keyframes winRestore{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}
.xp-window.win-inactive .xp-titlebar{background:linear-gradient(to bottom,#7090d0 0%,#5878b8 8%,#4868a8 40%,#3858a0 88%,#284898 100%)!important;}
.xp-window.win-inactive .xp-titlebar .win-title{color:rgba(255,255,255,0.75)!important;}
.xp-window.win-inactive .win-btn-min,.xp-window.win-inactive .win-btn-max{background:linear-gradient(to bottom,#8098c8,#6080b0)!important;}
.xp-window.win-inactive .win-btn-close{background:linear-gradient(to bottom,#b08090,#987080)!important;}
.xp-titlebar{background:linear-gradient(to bottom,#0a84e8 0%,#0656d6 8%,#0452cf 40%,#0347c2 88%,#0138a8 100%);padding:3px 5px 3px 6px;border-radius:5px 5px 0 0;display:flex;align-items:center;gap:4px;cursor:move;height:28px;border:2px solid #0831d9;border-bottom:1px solid #0138a8;box-shadow:0 1px 0 rgba(255,255,255,0.25) inset;}
.xp-titlebar .win-title{color:white;font-weight:bold;font-size:12px;flex:1;text-shadow:1px 1px 2px rgba(0,0,60,0.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.win-btn{width:22px;height:20px;border-radius:3px;border:1px solid rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center;cursor:var(--xp);font-size:12px;font-weight:bold;flex-shrink:0;}
.win-btn-min{background:linear-gradient(to bottom,#5ab0f8 0%,#2e80e0 45%,#1a68c8 100%);color:white;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset;}
.win-btn-max{background:linear-gradient(to bottom,#5ab0f8 0%,#2e80e0 45%,#1a68c8 100%);color:white;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset;}
.win-btn-close{background:linear-gradient(to bottom,#f07060 0%,#d02818 45%,#b81000 100%);color:white;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset;margin-left:2px;}
.xp-titlebar .win-btn:hover{filter:brightness(1.15);}
.xp-menubar{background:#ece9d8;border-bottom:1px solid #b0b8d0;padding:2px 4px;display:flex;}
.xp-menubar span{padding:2px 8px;cursor:var(--xp);border-radius:2px;font-size:11px;color:#000;}
.xp-menubar span:hover{background:#316ac5;color:white;}
.xp-content{flex:1;overflow-y:auto;padding:12px;background:white;border:2px solid #8098d0;border-top:none;border-bottom:none;}
#win-joselamuela .xp-content{background:white;padding-bottom:0;}
.xp-content::-webkit-scrollbar{width:16px;}
.xp-content::-webkit-scrollbar-track{background:#f0f0f0;border-left:1px solid #c0c8e0;}
.xp-content::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,#d0d8f0,#a8b8e0);border:1px solid #8090c0;}
/* CONTENT */
.section-title{font-size:22px;font-weight:bold;color:#003080;border-bottom:2px solid #316ac5;padding-bottom:6px;margin-bottom:14px;}
.entry-card{background:#f0f4ff;border:1px solid #c0cce8;border-radius:3px;padding:10px 12px;margin-bottom:10px;}
.entry-title{font-weight:bold;color:#003080;font-size:13px;}
.entry-sub{color:#555;font-size:11px;margin-top:2px;}
.entry-desc{color:#333;font-size:11px;margin-top:6px;line-height:1.5;}
.entry-date{color:#888;font-size:10px;font-style:italic;margin-top:4px;}
.skill-bar-wrap{margin-bottom:8px;}
.skill-bar-label{display:flex;justify-content:space-between;color:#333;font-size:11px;margin-bottom:2px;}
.skill-bar-bg{background:#dde;border:1px solid #aac;height:14px;border-radius:2px;overflow:hidden;}
.skill-bar-fill{height:100%;background:linear-gradient(to right,#316ac5,#60a0ff);}
.tag{display:inline-block;padding:2px 8px;background:#316ac5;color:white;border-radius:10px;font-size:10px;margin:2px;}
.contact-form label{display:block;margin-bottom:2px;color:#333;font-size:11px;margin-top:8px;}
.contact-form input,.contact-form textarea{width:100%;padding:4px 6px;border:1px solid #aab;border-radius:2px;font-family:Tahoma,Arial;font-size:11px;background:white;cursor:text;}
.contact-form textarea{height:80px;resize:vertical;}
.xp-submit-btn{margin-top:12px;padding:4px 20px;background:linear-gradient(to bottom,#f0f0f0,#d8d8d8);border:1px solid #aaa;border-radius:2px;font-family:Tahoma,Arial;font-size:11px;cursor:var(--xp);}
.xp-submit-btn:hover{background:linear-gradient(to bottom,#ddeeff,#bbccee);}
/* SNAKE */
#snake-canvas{display:block;margin:0 auto;background:#000;}
.snake-score{text-align:center;font-weight:bold;color:#003080;margin-bottom:8px;}
.snake-controls{text-align:center;color:#555;font-size:10px;margin-top:6px;}
/* MINESWEEPER */
#mine-area{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px;}
.mine-topbar{display:flex;justify-content:space-between;align-items:center;width:100%;background:#c0c0c0;border:3px solid;border-color:#fff #808080 #808080 #fff;padding:4px 8px;}
.mine-counter{background:#000;color:#f00;font-family:'Courier New';font-size:20px;padding:2px 6px;min-width:50px;text-align:center;}
.mine-face-btn{width:28px;height:28px;border:3px solid;border-color:#fff #808080 #808080 #fff;background:#c0c0c0;font-size:16px;cursor:var(--xp);display:flex;align-items:center;justify-content:center;}
.mine-grid{display:grid;border:3px solid;border-color:#808080 #fff #fff #808080;}
.mine-cell{width:20px;height:20px;background:#c0c0c0;border:2px solid;border-color:#fff #808080 #808080 #fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:bold;font-family:'Courier New';cursor:var(--xp);}
.mine-cell.revealed{border-color:#808080;background:#c0c0c0;}
/* MISC */
.recycle-msg{padding:12px;border-bottom:1px solid #ddd;cursor:var(--xp);}
.recycle-msg:hover{background:#eef2ff;}
.recycle-msg .rm-from{font-weight:bold;color:#003080;font-size:11px;}
.recycle-msg .rm-subject{color:#333;font-size:11px;}
.recycle-msg .rm-date{color:#888;font-size:10px;}
.clock-widget{display:flex;flex-direction:column;align-items:center;padding:20px;}
#clock-display{font-size:42px;font-weight:bold;color:#003080;font-family:'Courier New',monospace;letter-spacing:4px;}
#date-display{font-size:14px;color:#555;margin-top:6px;}
#day-display{font-size:12px;color:#888;margin-top:2px;}
#bsod-overlay{position:fixed;inset:0;z-index:99999;background:#0000aa;display:none;flex-direction:column;align-items:center;justify-content:center;color:white;font-family:'Courier New',monospace;padding:40px;}
#bsod-overlay.show{display:flex;}
.bsod-title{font-size:22px;margin-bottom:30px;text-align:center;}
.bsod-text{max-width:600px;font-size:13px;line-height:1.8;}
.bsod-code{font-size:16px;margin:20px 0;}
.bsod-close{margin-top:30px;font-size:12px;color:#aaaaff;cursor:var(--xp);border:1px solid #aaaaff;padding:6px 20px;}
.bsod-close:hover{background:#aaaaff;color:#0000aa;}
/* START MENU */
#start-menu{position:fixed;bottom:30px;left:0;width:300px;background:#ece9d8;border:1px solid #0054e3;border-radius:6px 6px 0 0;box-shadow:3px 3px 8px rgba(0,0,0,0.5);display:none;z-index:999;overflow:hidden;}
#start-menu.open{display:block;animation:smSlideUp 0.15s ease-out;}
@keyframes smSlideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.sm-header{background:linear-gradient(to right,#1060d0,#4090f0);padding:10px 12px;display:flex;align-items:center;gap:10px;}
.sm-name{color:white;font-weight:bold;font-size:14px;}
.sm-body{display:flex;}
.sm-left,.sm-right{flex:1;padding:6px;}
.sm-left{background:white;border-right:1px solid #ccc;}
.sm-right{background:#f0e8d8;}
.sm-item{display:flex;align-items:center;gap:8px;padding:5px 8px;cursor:var(--xp);border-radius:2px;font-size:11px;}
.sm-item:hover{background:#1458b8;color:white;}
.sm-item .si-icon{font-size:18px;}
.sm-divider{border:none;border-top:1px solid #ccc;margin:4px 0;}
.sm-footer{background:linear-gradient(to bottom,#1060d0,#0040b0);display:flex;justify-content:flex-end;gap:2px;padding:4px 8px;border-top:1px solid #0040b0;}
.sm-footer-btn{display:flex;align-items:center;gap:6px;padding:5px 12px;cursor:var(--xp);border-radius:3px;color:white;font-size:11px;background:rgba(0,0,0,0.15);border:1px solid rgba(255,255,255,0.15);}
.sm-footer-btn:hover{background:rgba(255,255,255,0.25);border-color:rgba(255,255,255,0.4);}
/* CONTEXT MENU */
#context-menu{position:fixed;z-index:9998;background:#f0ede4;border:1px solid #888;box-shadow:2px 2px 6px rgba(0,0,0,0.4);min-width:200px;display:none;font-size:11px;}
#icon-context-menu{position:fixed;z-index:9998;background:#f0ede4;border:1px solid #888;box-shadow:2px 2px 6px rgba(0,0,0,0.4);min-width:160px;display:none;font-size:11px;}
#icon-context-menu.show{display:block;}
#context-menu.show{display:block;}
.ctx-item{padding:5px 20px 5px 28px;cursor:var(--xp);white-space:nowrap;}
.ctx-item:hover{background:#316ac5;color:white;}
.ctx-sep{height:1px;background:#c0c0c0;margin:3px 0;}
/* RENAME INPUT */
.icon-rename-input{background:white;border:1px solid #316ac5;color:black;font-family:Tahoma,Arial,sans-serif;font-size:11px;text-align:center;width:64px;outline:none;padding:1px;}
/* RENAME MODAL */
.xp-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:8000;display:flex;align-items:center;justify-content:center;}
.xp-modal{background:#ece9d8;border:2px solid #0054e3;border-radius:4px;padding:0;min-width:280px;box-shadow:4px 4px 10px rgba(0,0,0,0.5);}
.xp-modal-title{background:linear-gradient(to bottom,#0061ff,#003080);color:white;font-weight:bold;font-size:12px;padding:4px 8px;display:flex;align-items:center;gap:6px;}
.xp-modal-body{padding:16px;}
.xp-modal-body label{display:block;font-size:11px;color:#333;margin-bottom:6px;}
.xp-modal-body input{width:100%;padding:4px 6px;border:1px solid #aab;border-radius:2px;font-family:Tahoma,Arial;font-size:12px;cursor:text;}
.xp-modal-footer{padding:8px 16px;display:flex;justify-content:flex-end;gap:6px;border-top:1px solid #ccc;}
.xp-modal-btn{padding:4px 18px;background:linear-gradient(to bottom,#f0f0f0,#d8d8d8);border:1px solid #aaa;border-radius:2px;font-family:Tahoma,Arial;font-size:11px;cursor:var(--xp);}
.xp-modal-btn:hover{background:linear-gradient(to bottom,#ddeeff,#bbccee);}
/* IE BROWSER */
.ie-toolbar{background:#ece9d8;border-bottom:1px solid #aaa;padding:4px 8px;display:flex;align-items:center;gap:4px;}
.ie-back-btn{padding:2px 8px;background:linear-gradient(to bottom,#f0f0f0,#d8d8d8);border:1px solid #aaa;border-radius:2px;font-size:11px;cursor:var(--xp);}
.ie-back-btn:hover{background:linear-gradient(to bottom,#ddeeff,#bbccee);}
.ie-addr{flex:1;padding:2px 6px;border:1px solid #aab;border-radius:2px;font-family:Tahoma,Arial;font-size:11px;cursor:text;background:white;}
.ie-go{padding:2px 10px;background:linear-gradient(to bottom,#f0f0f0,#d8d8d8);border:1px solid #aaa;border-radius:2px;font-size:11px;cursor:var(--xp);}
.ie-frame{width:100%;height:100%;border:none;}
/* SOLITAIRE */
.sol-card{width:56px;min-height:78px;border-radius:4px;background:white;border:1px solid #888;font-size:11px;font-weight:bold;display:flex;flex-direction:column;padding:2px 3px;cursor:var(--xp);box-shadow:1px 1px 3px rgba(0,0,0,0.4);}
.sol-card.red{color:#cc0000;}
.sol-card.black{color:#000;}
.sol-card.face-down{background:repeating-linear-gradient(45deg,#1060c0,#1060c0 4px,#0848a8 4px,#0848a8 8px);border:1px solid #0040a0;}
.sol-empty-slot{width:56px;height:78px;border:2px dashed rgba(255,255,255,0.3);border-radius:4px;}
.sol-foundation{width:56px;height:78px;border:2px dashed rgba(255,255,255,0.3);border-radius:4px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.4);font-size:22px;}
/* PROJ */
.proj-card{background:#f8f8ff;border:1px solid #c0c8e8;border-radius:3px;padding:10px;margin-bottom:10px;}
.proj-title{font-weight:bold;color:#003080;font-size:12px;}
.proj-desc{color:#333;font-size:11px;margin-top:4px;line-height:1.5;}
.proj-tags{margin-top:6px;}
.info-bar{height:22px;background:#ece9d8;border-top:1px solid #b0b8d0;border-left:2px solid #8098d0;border-right:2px solid #8098d0;display:flex;align-items:center;padding:0 8px;color:#555;font-size:10px;gap:12px;}
.info-bar-sep{width:1px;height:14px;background:#aaa;}
.resize-handle{position:absolute;}
.resize-se{bottom:0;right:0;width:14px;height:14px;cursor:se-resize;background:linear-gradient(135deg,transparent 50%,#8090b8 50%);z-index:10;}
.resize-s{bottom:0;left:14px;right:14px;height:6px;cursor:s-resize;z-index:9;}
.resize-e{top:28px;right:0;width:6px;bottom:6px;cursor:e-resize;z-index:9;}
.resize-w{top:28px;left:0;width:6px;bottom:6px;cursor:w-resize;z-index:9;}
.pt-btn{width:24px;height:24px;border:1px solid #999;background:#d4d0c8;cursor:var(--xp);display:flex;align-items:center;justify-content:center;padding:2px;}
.pt-btn:hover{background:#e8e4dc;border-color:#666;}
.calc-btn{font-size:13px;font-family:Tahoma,Arial;background:#e8e4dc;border:2px solid;border-color:#fff #808080 #808080 #fff;cursor:var(--xp);padding:2px;active:transform:translateY(1px);}
.calc-btn:hover{background:#f0ede4;}
.calc-btn:active{border-color:#808080 #fff #fff #808080;}
.pt-btn.active{background:#b8b4ac;border:2px inset #666;}
.xp-notif{position:fixed;bottom:34px;right:10px;background:#ffffd0;border:1px solid #c8a000;padding:8px 12px;border-radius:3px;font-size:11px;max-width:220px;box-shadow:2px 2px 6px rgba(0,0,0,0.3);z-index:9000;animation:notif-in 0.3s ease;}
@keyframes notif-in{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.xp-notif .notif-close{float:right;cursor:var(--xp);font-weight:bold;color:#555;}

@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.logo-marquee { overflow:hidden; width:100%; mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%); }
.logo-track { display:flex; align-items:center; gap:28px; width:max-content; }

/* ===== PROJECT TABS ===== */
.proj-tab{padding:4px 16px;background:#fff;border:1px solid #ccc;border-bottom:none;font-family:Tahoma,Arial,sans-serif;font-size:11px;cursor:var(--xp);border-radius:3px 3px 0 0;color:#444;}
.proj-tab.active{font-weight:bold;color:#003080;border-color:#316ac5;}
.proj-tab:hover:not(.active){background:#f0f4ff;color:#003080;}

/* ===== PROJECT CARD v2 ===== */
.proj-card2{background:#f8f8ff;border:1px solid #c0c8e8;border-radius:3px;padding:14px 16px;margin-bottom:18px;}
.proj2-title{font-weight:bold;color:#003080;font-size:13px;}
.proj2-meta{font-size:10px;color:#777;text-transform:uppercase;letter-spacing:0.4px;margin-bottom:6px;margin-top:1px;}
.proj2-desc{font-size:11px;color:#333;line-height:1.6;margin-bottom:8px;}
.proj2-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px;}
.tag2{display:inline-block;padding:2px 8px;background:#ece9f8;border:1px solid #b0b8e0;color:#003080;border-radius:2px;font-size:10px;}

/* ===== PROJECT SLIDER ===== */
.proj-slider{position:relative;background:#111;border-radius:3px;overflow:hidden;height:280px;user-select:none;}
.proj-slides{display:flex;height:100%;transition:transform 0.35s ease;will-change:transform;}
.proj-slide{min-width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.proj-slide img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.proj-slide-video{background:#000;}
.proj-slide-video iframe{width:100%;height:100%;border:none;}
.proj-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.55);border:none;color:white;font-size:28px;width:34px;height:48px;cursor:var(--xp);border-radius:3px;display:flex;align-items:center;justify-content:center;z-index:10;line-height:1;padding:0;transition:background 0.15s;}
.proj-arrow:hover{background:rgba(49,106,197,0.8);}
.proj-arrow-l{left:6px;}
.proj-arrow-r{right:6px;}
.proj-fullscreen{position:absolute;bottom:6px;right:8px;background:rgba(0,0,0,0.55);border:none;color:white;font-size:13px;width:24px;height:24px;cursor:var(--xp);border-radius:3px;display:flex;align-items:center;justify-content:center;z-index:10;transition:background 0.15s;}
.proj-fullscreen:hover{background:rgba(49,106,197,0.8);}
.proj-counter{position:absolute;bottom:6px;right:38px;background:rgba(0,0,0,0.55);color:white;font-size:10px;padding:2px 7px;border-radius:3px;font-family:Tahoma,Arial,sans-serif;pointer-events:none;}
.proj-slide-info{position:absolute;bottom:6px;left:8px;background:rgba(0,0,0,0.55);color:#ddd;font-size:10px;padding:2px 7px;border-radius:3px;font-family:Tahoma,Arial,sans-serif;pointer-events:none;max-width:55%;}

/* ===== CALCULATOR ===== */
.calc-btn{font-family:Tahoma,Arial,sans-serif;font-size:13px;font-weight:bold;background:linear-gradient(180deg,#f0ede8 0%,#d4d0c8 100%);border:1px solid;border-color:#fff #808080 #808080 #fff;padding:4px 2px;cursor:var(--xp);text-align:center;user-select:none;}
.calc-btn:active{background:linear-gradient(180deg,#d4d0c8 0%,#f0ede8 100%);border-color:#808080 #fff #fff #808080;}
.calc-op{color:#003080;}
.calc-eq{background:linear-gradient(180deg,#4a7fcf 0%,#316ac5 100%);color:white;border-color:#6aa0ff #003080 #003080 #6aa0ff;font-size:16px;}
.calc-eq:active{background:linear-gradient(180deg,#316ac5 0%,#4a7fcf 100%);}

/* ===== CHARACTER SELECTOR ===== */
.char-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:380px;}
.char-cell{position:relative;border:3px solid #444;background:#0d0d1a;cursor:pointer;aspect-ratio:1;overflow:hidden;transition:border-color 0.1s;}
.char-cell img{width:100%;height:100%;display:block;object-fit:cover;image-rendering:pixelated;}
.char-cell:hover{border-color:#aaa;}
.char-cell.char-selected{border-color:#cc0000;box-shadow:0 0 10px rgba(204,0,0,0.7),inset 0 0 6px rgba(204,0,0,0.3);}

/* Left panel */
.char-info{display:flex;flex-direction:column;gap:8px;height:100%;}
.char-name{font-size:13px;font-weight:bold;color:#ffd700;letter-spacing:1px;text-transform:uppercase;text-align:center;border-bottom:1px solid #316ac5;padding-bottom:6px;}
.char-video-wrap{flex:1;background:#000;border:2px solid #316ac5;overflow:hidden;min-height:0;}
.char-desc{font-size:10px;color:#ccc;line-height:1.6;text-align:left;border-top:1px solid #333;padding-top:6px;}

/* ===== CHARACTER GRID v2 ===== */
.char-grid2{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.char-cell2{position:relative;border:3px solid #ddd;background:#f5f5f5;cursor:pointer;width:80px;height:80px;overflow:hidden;transition:border-color 0.1s;}
.char-cell2 img{width:100%;height:100%;display:block;object-fit:cover;image-rendering:pixelated;}
.char-cell2:hover{border-color:#aaa;}
.char-cell2.char-selected2{border-color:#cc0000;box-shadow:0 0 8px rgba(204,0,0,0.5);}

[data-id="competencias"] .icon-label{font-size:10.5px;white-space:nowrap;max-width:none;}

/* ===== RESPONSIVE MOBILE ===== */
@media (max-width: 768px) {

  /* === GENERAL === */
  body{overflow:hidden;}
  html,body{background:#fff !important;}

  /* === LOGIN === */
  html{background:#3a5fbe;}
  #login-screen{min-height:100vh;min-height:-webkit-fill-available;}
  #login-screen > div:nth-child(2) > div:first-child{width:30% !important;padding:0 0 0 16px !important;align-items:flex-start !important;}
  #login-screen img[src*="logo"]{width:100px !important;height:100px !important;}
  #login-screen > div:nth-child(2) > div:first-child > p{display:none;}
  #login-screen > div:nth-child(2) > div:nth-child(3){padding:0 16px !important;}
  #login-user-entry > div:nth-child(2) > div:first-child{font-size:13px !important;white-space:nowrap !important;}
  #login-status-text{display:block !important;font-size:10px !important;white-space:nowrap !important;}
  #login-loading-wrap{width:100% !important;max-width:120px;}
  #login-bottom-text{display:none !important;}

  /* === DESKTOP === */
  #desktop{
    position:fixed !important;
    top:0 !important;left:0 !important;right:0 !important;
    bottom:30px !important;
    height:auto !important;
    background-position:70% center !important;
  }

  /* === TASKBAR === */
  #taskbar{height:30px !important;padding-bottom:0 !important;box-shadow:none !important;border-top:none !important;}
  #taskbar #start-btn{height:28px !important;}
  #tray-clock{font-size:12px;}
  .taskbar-btn{min-width:80px;max-width:120px;font-size:11px;}

  /* === ICONS === */
  .desktop-icon{width:80px;}
  .desktop-icon .icon-label{font-size:12px;}
  .icon-wrapper{width:48px;height:48px;}
  .folder-svg{width:42px;height:42px;}
  .desktop-icon .icon-img{font-size:38px;}

  /* === WINDOWS === */
  .xp-window{
    position:fixed !important;
    left:0 !important;top:0 !important;
    width:100vw !important;
    height:calc(100dvh - 30px) !important;
    min-width:unset;min-height:unset;
    border-radius:0;border-left:none;border-right:none;
  }
  .xp-titlebar{height:36px;padding:4px 8px;}
  .xp-titlebar .win-title{font-size:13px;}
  .win-btn{width:28px;height:26px;font-size:14px;}
  .resize-handle{display:none;}
  .xp-window .xp-content{
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    padding-bottom:env(safe-area-inset-bottom) !important;
  }

  /* === LOADING DIALOG === */
  #win-loading{
    width:80vw !important;max-width:300px !important;
    height:auto !important;
    left:50% !important;top:40% !important;
    transform:translate(-50%,-50%) !important;
  }
  #win-loading .xp-content{
    padding-bottom:32px !important;
  }

  /* === START MENU: no pantalla completa === */
  #start-menu{width:85vw !important;max-width:320px !important;border-radius:6px 6px 0 0 !important;}
  .sm-body{flex-direction:row !important;}
  .sm-left{border-right:1px solid #ccc !important;border-bottom:none !important;}
  .sm-item{padding:6px 10px !important;font-size:12px !important;}

  /* Sección juegos en start menu: mostrar como lista desplegable */
  .sm-games-section{display:block !important;}

  /* === CALCULADORA: tamaño justo, centrada === */
  #win-calc{
    width:260px !important;
    height:auto !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }
  #win-calc .xp-content{height:auto !important;max-height:none !important;}

  /* === RELOJ (datetime): ventana pequeña centrada === */
  #win-reloj, #win-datetime{
    position:fixed !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    width:min(340px, 90vw) !important;
    height:auto !important;
    min-width:unset !important;
    min-height:unset !important;
  }

  /* === ERROR 404: más grande, contenido centrado === */
  #win-error404{
    position:fixed !important;
    width:92vw !important;
    height:auto !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    min-width:unset !important;
    min-height:unset !important;
  }
  #win-error404 .xp-content{
    height:auto !important;
    max-height:none !important;
    padding:16px !important;
    border-left:none !important;
    border-right:none !important;
  }

  /* === BOOT GIF: más grande en móvil === */
  #boot-screen img{width:88% !important;max-height:88% !important;}

  #win-paint canvas{touch-action:none !important;}

  /* === SNAKE: tamaño propio, centrado === */
  #win-snake{
    position:fixed !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    width:auto !important;
    height:auto !important;
    min-width:unset !important;
    min-height:unset !important;
  }
  #win-snake .xp-content{
    overflow:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:auto !important;
    max-height:none !important;
  }

  /* === MINESWEEPER y SOLITAIRE: pantalla completa === */
  #win-minesweeper,#win-solitaire{
    position:fixed !important;
    left:0 !important;top:0 !important;
    width:100vw !important;
    height:calc(100dvh - 30px) !important;
  }
  #win-minesweeper .xp-content,#win-solitaire .xp-content{
    overflow:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* === CONTEXT MENU === */
  #context-menu,#icon-context-menu{font-size:13px;}
  .ctx-item{padding:10px 20px 10px 28px;}

  /* === CONTACT FORM === */
  .contact-form input,.contact-form textarea{font-size:16px;}

  /* === CONTACTO WINDOW === */
  #win-contacto .xp-content{
    flex-direction:column !important;
    padding:0 !important;
    display:block !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  #win-contacto .xp-content > div:first-child{
    padding:12px !important;
  }
  #win-contacto .xp-content > div:last-child{
    border-left:none !important;
    border-top:1px solid #ddd !important;
    height:260px !important;
    overflow:hidden !important;
    padding:0 !important;
    margin-bottom:60px !important;
  }
  #win-contacto .xp-content > div:last-child img{
    content:url('images/Contacto_horizontal.gif') !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
  }
  #contact-dime-algo{display:none !important;}
  #contact-email-label{display:none !important;}
  #contact-email{display:none !important;}

  /* === EXPERIENCIA: logo marquee === */
  .logo-marquee{-webkit-mask-image:none !important;mask-image:none !important;}
  .logo-track{animation-play-state:running !important;will-change:transform;}

  /* === JOSE LAMUELA WINDOW === */
  #resumir-col{display:none !important;}
  #win-joselamuela .xp-content{
    overflow-x:hidden !important;
    overflow-y:scroll !important;
    overscroll-behavior:contain !important;
    padding-bottom:60px !important;
  }
  #win-joselamuela .xp-content > div{min-width:0 !important;padding:12px 12px 0 12px !important;box-sizing:border-box !important;}

  /* Choose your fighter title */
  #win-joselamuela [style*="Royal Fighter"]{font-size:28px !important;line-height:1.2 !important;word-break:break-word !important;white-space:normal !important;}

  /* Fighter display row */
  #fighter-row{justify-content:flex-start !important;margin-top:16px !important;margin-bottom:16px !important;}
  #fighter-inner{gap:6px !important;width:100% !important;align-items:center !important;}
  #fighter-text{width:38% !important;flex-shrink:0 !important;}
  #fighter-name{font-size:10px !important;text-align:right !important;}
  #fighter-desc{font-size:9px !important;text-align:right !important;line-height:1.5 !important;}
  #fighter-anim{width:58% !important;height:200px !important;flex-shrink:0 !important;}
  #fighter-video{width:100% !important;height:100% !important;}

  /* Character grid */
  .char-grid2{grid-template-columns:repeat(4,1fr);gap:2px !important;}
  .char-cell2{width:100% !important;max-width:70px !important;height:auto;aspect-ratio:1;}
}