@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
    /* Paleta Retro Low Poly */
    --bg-deep-blue: #00084d;
    --bg-card-blue: #00134e;
    --neon-cyan: #00e5ff;
    --neon-magenta: #ff4fc3;
    --neon-green: #3cff00;
    --ie-grey: #c0c0c0;
    --ie-dark-grey: #808080;
    --window-width: 1280px;
    --border-size: 2px;
    --shadow-size: 4px;
    --radius: 3px;
}

body {
    font-family: 'Press Start 2P', monospace;
    background-image: url("../images/y2k-bg.jpg"); 
    background-color: var(--bg-deep-blue);
    background-size: cover;
    background-attachment: fixed;
    color: white;
}

/* --- CONTENEDOR IE5 --- */
.browser-window {
    width: min(1280px, 98vw);
    background-image: url("../images/pattern.png");
    background-repeat: repeat;
    background-position: top left;
    min-height: 90vh;
    border-radius: 3px;
/*    background: var(--bg-deep-blue);
*/  border: 4px solid var(--ie-grey);
    box-shadow: 0 0 0 2px var(--ie-dark-grey), 13px 13px 0 rgba(0,0,0,0.3);
    margin: 2rem auto;
    overflow: hidden;
}



.browser-topbar {
    background: linear-gradient(to bottom, #1b63d9, #0940a6);
    color: white;
    padding: 6px 12px;
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    border-radius: 3px;
}

.browser-menu {
    background: #d8d8d8;
    color: black;
    padding: 8px 12px;
    font-size: 8px;
    border-bottom: 2px solid white;
}

/* --- NAVEGACIÓN --- */
.hero-banner {
    background-image: url('../images/banner.png');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    text-align: center;
    padding: 3rem 0; 
    box-shadow: inset 0px -4px 10px rgba(0,0,0,0.3);
}

.retro-nav {
    margin-top: -22px;
    position: relative;
    z-index: 10;
}

.btn-retro {
    font-family: 'Press Start 2P', monospace;
    background: #d7d7d7;
    color: black;
    border: 2px solid white;
    border-right-color: #444;
    border-bottom-color: #444;
    padding: 12px 20px;
    font-size: 12px;
    text-decoration: none;
    box-shadow: -4px -4px 0 var(--neon-cyan), 4px 4px 0 var(--neon-magenta);
    transition: transform 0.1s ease-in-out;
    display: inline-block;
    min-width: 180px;
    text-align: center;
}

    .btn-retro:hover {
        transform: translateY(2px);
        color: black;
    }

.btn-retro-small {
    font-size: 9px;
    padding: 8px 10px;
    box-shadow: none;
    width: 100%;
}

/* --- TARJETAS --- */
.retro-card {
    background: linear-gradient(90deg, #004cff, #005cff); /* Azul claro en el centro */
    border: none;
    padding: 18px;
    gap:15px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: -4px -4px 0 var(--neon-cyan), 4px 4px 0 var(--neon-magenta); /* Relieve cyan y magenta */
}

.border-cyan {
    border-color: var(--neon-cyan);
}

.border-magenta {
    border-color: var(--neon-magenta);
}

.status-cyan {
    color: var(--neon-cyan);
}

.status-magenta {
    color: var(--neon-magenta);
}

/* --- STATUS BAR (ESTILO WINDOWS CLÁSICO) --- */
.classic-status-bar {
    background-color: var(--ie-grey); 
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid var(--ie-dark-grey);
    border-bottom: 2px solid var(--ie-dark-grey);
    display: flex;
    align-items: center;
    padding: 2px;
    height: 30px;
    font-family: Tahoma, 'Segoe UI', Arial, sans-serif; 
    font-size: 14px;
    color: black;
}

.status-section {
    border-top: 1px solid var(--ie-dark-grey);
    border-left: 1px solid var(--ie-dark-grey);
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    padding: 0 6px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-left {
    flex-grow: 1; 
    margin-right: 2px;
}

.status-empty {
    width: 25px;
    margin-right: 2px;
}

.status-right {
    min-width: 100px;
    margin-right: 2px;
}

.status-icon {
    width: 18px;
    height: 18px;
    image-rendering: pixelated; 
}

/* La esquinita rayada */
.resize-grip {
    width: 12px;
    height: 100%;
    background: repeating-linear-gradient( 135deg, transparent, transparent 2px, #ffffff 2px, #ffffff 3px, var(--ie-dark-grey) 3px, var(--ie-dark-grey) 4px );
    margin-left: 2px;
    opacity: 0.7;
}

/* --- PANELES Y FORMULARIOS (ESTILO WINDOWS CLÁSICO) --- */
.retro-panel {
    background-color: var(--ie-grey);
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid var(--ie-dark-grey);
    border-bottom: 2px solid var(--ie-dark-grey);
    padding: 15px;
    color: black;
}

.retro-input {
    background: #ffffff;
    color: black;
    border-top: 2px solid var(--ie-dark-grey);
    border-left: 2px solid var(--ie-dark-grey);
    border-bottom: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    padding: 10px;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    outline: none;
    width: 100%;
    max-width: 250px;
}

    .retro-input::placeholder {
        color: #888;
    }

/* --- BOTONES DESHABILITADOS --- */
.btn-retro-disabled {
    font-family: 'Press Start 2P', monospace;
    background: var(--ie-grey);
    color: #777;
    border: 2px solid #ddd;
    border-right-color: #999;
    border-bottom-color: #999;
    padding: 12px 20px;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    cursor: not-allowed;
}

/* --- COMPONENTES DE DETALLES --- */
.retro-box {
    background-color: var(--bg-card-blue);
    border: 2px solid var(--neon-magenta);
    padding: 15px;
}

.retro-progress-bg {
    background-color: #000;
    border: 2px solid var(--ie-grey);
    height: 18px;
    width: 100%;
    margin-top: 5px;
}

.retro-progress-fill {
    background-color: var(--neon-green);
    height: 100%;
    background-image: repeating-linear-gradient( to right, transparent, transparent 8px, #000 8px, #000 10px );
}

/* Colores extra para botones */
.btn-retro-yellow {
    background-color: #ffd700;
    color: black;
}

.btn-retro-red {
    background-color: #ff3333;
    color: white;
}

.btn-retro-blue {
    background-color: #66ccff;
    color: black;
}

/* Comentarios */
.retro-comment-row {
    border-bottom: 2px solid var(--neon-magenta);
    padding: 15px 0;
}

/* --- KANBAN BOARD --- */
.kanban-board {
    display: flex;
    gap: 15px;
    align-items: stretch;
}

.kanban-column {
    background-color: rgba(0, 0, 0, 0.4);
    border: 2px solid;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 200px; /* Altura mínima para que siempre haya zona para soltar */
    height: max-content;
    transition: background-color 0.2s ease;
}

.column-pending {
    border-color: var(--neon-magenta);
}

.column-playing {
    border-color: var(--neon-green);
}

.column-paused {
    border-color: #ffd700;
}

.column-completed {
    border-color: var(--neon-cyan);
}

.kanban-column.drag-over {
    background-color: rgba(255, 255, 255, 0.1);
}

.kanban-card {
    background-color: var(--bg-card-blue);
    border: 1px solid var(--ie-grey);
    padding: 8px;
    cursor: grab;
    display: flex;
    gap: 10px;
    border-radius: 4px;
}

.kanban-card:active {
    cursor: grabbing;
    opacity: 0.8;
    transform: scale(0.98);
}

.kanban-card-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border: 1px solid #000;
}

.kanban-drop-placeholder {
    border: 2px dashed #555;
    color: #777;
    text-align: center;
    padding: 20px;
    font-size: 10px;
    margin-top: auto; /* Empuja el placeholder al fondo de la columna */
}

/* =========================================
   MARQUESINA RETRO (TICKER)
   ========================================= */
.retro-ticker-container {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background-color: #00084d;
    border-top: 2px thin var(--neon-cyan);
    border-bottom: 2px thin var(--neon-cyan);
    color: var(--neon-cyan);
    font-family: monospace;
    font-size: 0.8rem;
    padding: 8px 0;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
    position: relative;
}

.retro-ticker-text {
    display: inline-block;
    padding-left: 100%; 
    animation: ticker-move 20s linear infinite; 
}


    .retro-ticker-text span {
        margin-right: 60px;
        text-shadow: 1px 1px 0 #000;
    }

@keyframes ticker-move {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}