* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    background: #2b4f80 url("https://i.imgur.com/1ZQZ1.jpg") center/cover no-repeat fixed;
    font-family: Tahoma, Verdana, sans-serif;
    color: #222;
}

/* ---------- Barra superior ---------- */
.xp-topbar {
    background: linear-gradient(#dfe8f7, #c3d2ee);
    border-bottom: 2px solid #2b4f80;
    padding: 8px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.xp-topbar-left { font-weight: bold; color: #003399; }

.xp-topbar-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.xp-topbar-right a {
    color: #003399;
    text-decoration: none;
    font-weight: bold;
}
.xp-topbar-right a:hover { text-decoration: underline; }

/* ---------- Mensajes flash ---------- */
.xp-flash {
    margin: 10px 16px 0;
    padding: 8px 12px;
    border-radius: 3px;
    font-size: 13px;
    border: 1px solid;
}
.xp-flash-success { background: #e3f7e3; border-color: #4a8f4a; color: #245c24; }
.xp-flash-error   { background: #fbe4e4; border-color: #b33a3a; color: #7a1f1f; }

/* ---------- Escritorio (contenedor de ventanas) ---------- */
.xp-desktop {
    padding: 30px 20px 60px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
    justify-content: center;
    min-height: calc(100vh - 50px);
}

/* ---------- Ventana XP ---------- */
.winXP-window {
    background: #ececec;
    border: 3px solid #2b4f80;
    border-radius: 4px;
    box-shadow: 6px 6px 0 rgba(0,0,0,0.5);
    width: 100%;
    max-width: 380px;
    position: relative;
}

.winXP-window.wide { max-width: 720px; }

.winXP-window.minimized .winXP-body { display: none; }

.winXP-inner { display: flex; flex-direction: column; }

.winXP-titlebar {
    height: 34px;
    background: linear-gradient(#4f8ad9, #2b4f80);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    border-bottom: 2px solid #1a2d4f;
    cursor: grab;
    flex-shrink: 0;
    border-radius: 1px 1px 0 0;
}
.winXP-titlebar:active { cursor: grabbing; }

.winXP-titlebar .title {
    font-size: 13px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.winXP-buttons { display: flex; gap: 4px; }

.winXP-btn {
    width: 20px;
    height: 20px;
    background: linear-gradient(#fafafa, #d0d0d0);
    border: 1px solid #555;
    border-radius: 2px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
}
.winXP-btn:active { background: linear-gradient(#d0d0d0, #b0b0b0); }

.winXP-body {
    padding: 18px;
    font-size: 13px;
}

.winXP-body h2 {
    margin-top: 0;
    font-size: 15px;
    color: #2b4f80;
}

.winXP-body p { line-height: 1.5; }

/* ---------- Formularios estilo XP ---------- */
.xp-field { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.xp-field label { font-weight: bold; font-size: 12px; }

.xp-field input[type="text"],
.xp-field input[type="password"],
.xp-field textarea,
.xp-field select {
    padding: 6px 8px;
    border: 2px solid #8aa2c8;
    border-radius: 2px;
    background: #fff;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.25);
    font-family: inherit;
    font-size: 13px;
}
.xp-field input:focus, .xp-field textarea:focus, .xp-field select:focus {
    outline: none;
    border-color: #2b4f80;
}

.xp-btn {
    display: inline-block;
    padding: 7px 18px;
    background: linear-gradient(#fafafa, #d0d0d0);
    border: 1px solid #555;
    border-radius: 3px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    color: #222;
    text-decoration: none;
}
.xp-btn:hover { background: linear-gradient(#ffffff, #dcdcdc); }
.xp-btn:active { background: linear-gradient(#d0d0d0, #b0b0b0); }

.xp-btn-primary {
    background: linear-gradient(#4f8ad9, #2b4f80);
    color: white;
    border-color: #1a2d4f;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
}
.xp-btn-primary:hover { background: linear-gradient(#5f9aef, #35619a); }

.xp-btn-danger {
    background: linear-gradient(#ff8a8a, #cc3a3a);
    color: white;
    border-color: #661a1a;
}

/* ---------- Listado de archivos ---------- */
.xp-file-list { list-style: none; padding: 0; margin: 0; }
.xp-file-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-bottom: 1px solid #d6d6d6;
    flex-wrap: wrap;
}
.xp-file-list li:last-child { border-bottom: none; }
.xp-file-name { font-weight: bold; }
.xp-file-desc { font-size: 12px; color: #555; display: block; }
.xp-file-meta { font-size: 11px; color: #777; }
.xp-badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    background: #dfe8f7;
    color: #003399;
    font-weight: bold;
    margin-left: 6px;
}
.xp-badge-members { background: #ffe9c6; color: #8a5a00; }

.xp-empty { color: #777; font-style: italic; font-size: 12px; }

.xp-actions { display: flex; gap: 8px; }

hr.xp-sep { border: none; border-top: 1px solid #cfd8e6; margin: 16px 0; }

@media (max-width: 480px) {
    .xp-topbar { flex-direction: column; align-items: flex-start; }
    .xp-desktop { padding: 16px 10px 40px; }
}