:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --box-bg: #f9f9f9;
    --box-border: #ccc;
    --timer-bg: #eee;
    --footer-color: #666;
    --textarea-bg: #ffffff;
    --accent-color: #f0a500; 
}

[data-theme="dark"] {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --box-bg: #1e1e1e;
    --box-border: #333;
    --timer-bg: #2d2d2d;
    --footer-color: #888;
    --textarea-bg: #252525;
    --accent-color: #ffc04d;
}

body { 
    font-family: Arial, sans-serif; 
    margin: 0; 
    padding: 15px; 
    padding-bottom: 45px;
    line-height: 1.5; /* Reducido de 1.6 */
    background-color: var(--bg-color); 
    color: var(--text-color); 
    transition: background-color 0.3s, color 0.3s; 
    font-size: 0.95rem; /* Base ligeramente más pequeña */
}

/* ==========================================
   ESTRUCTURA Y LAYOUT (DOS COLUMNAS)
   ========================================== */

#main-wrapper {
    max-width: 900px; /* Reducido de 1000px */
    margin: 20px auto; /* Reducido de 400px */
    padding: 0 10px;
    box-sizing: border-box;
}

.layout-columns {
    display: flex;
    gap: 30px; /* Reducido de 40px */
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
}

.column-left, .column-right {
    flex: 1;
    min-width: 300px; /* Ajustado de 320px */
    box-sizing: border-box;
}

/* ==========================================
   COMPONENTES DE LA INTERFAZ
   ========================================== */

.info-box { 
    border: 1px solid var(--box-border); 
    background-color: var(--box-bg); 
    padding: 12px 15px; /* Compactado */
    border-radius: 6px; /* Más sutil */
    margin-bottom: 15px; /* Reducido de 25px */
}

.info-box p {
    margin: 8px 0; /* Espaciado interno de párrafos controlado */
}

.brand-container { 
    text-align: center; 
    margin-bottom: 10px; 
}

.brand-container h2 {
    font-size: 1.6rem; /* Reducido de 2rem */
    margin-bottom: 5px;
}

.mascot-img { 
    max-width: 295px; /* Incrementado para que se vea un poco más grande */
    height: auto; 
    display: block; 
    margin: 0 auto; 
    transition: filter 0.3s ease; /* Transición suave al cambiar de tema */
}

/* Invierte los contornos negros a blancos cuando se activa el modo oscuro */
[data-theme="dark"] .mascot-img {
    filter: invert(1) brightness(0.9);
}

.control-group { 
    margin-bottom: 12px; 
}

.error { 
    color: #ff4d4d; 
    font-weight: bold; 
    word-break: break-word; 
    font-size: 0.85rem;
}

.drop-zone { 
    border: 2px dashed var(--box-border); 
    padding: 20px 15px; /* Reducido de 25px */
    text-align: center; 
    border-radius: 6px; 
    background: var(--box-bg); 
    cursor: pointer; 
    transition: border-color 0.2s; 
    word-break: break-word;
    font-size: 0.9rem;
}

.drop-zone--over { 
    border-color: var(--accent-color); 
    background: var(--timer-bg); 
}

.drop-zone input { 
    display: none; 
}

textarea { 
    width: 100%; 
    height: 50px; /* Reducido de 60px */
    margin-top: 8px; 
    background-color: var(--textarea-bg); 
    color: var(--text-color); 
    border: 1px solid var(--box-border); 
    padding: 6px; 
    border-radius: 4px; 
    box-sizing: border-box; 
    font-family: Arial, monospace; 
    resize: none; 
    font-size: 0.85rem;
}

#preview { 
    margin-top: 15px; 
    padding: 12px; 
    border: 1px dashed var(--box-border); 
    border-radius: 6px; 
    display: none; 
}

.timer-container { 
    margin: 10px 0; 
    background: var(--timer-bg); 
    padding: 8px; 
    border-radius: 4px; 
    font-size: 0.9rem;
}

#fileContent img, #fileContent embed, #fileContent pre {
    max-width: 100%;
    box-sizing: border-box;
}

progress { 
    width: 100%; 
    height: 10px; /* Reducido de 15px */
    border-radius: 6px; 
    overflow: hidden; 
    border: none; 
}

progress::-webkit-progress-bar { 
    background-color: var(--bg-color); 
}

progress::-webkit-progress-value { 
    background-color: var(--accent-color); 
}

/* Controles superiores reubicados de forma fluida */
.top-controls { 
    display: flex; 
    gap: 8px; 
    justify-content: flex-end; /* Alineados a la derecha de forma limpia */
    max-width: 900px;
    margin: 0 auto 10px auto;
}

.theme-toggle, .lang-toggle { 
    padding: 5px 10px; /* Más compactos */
    border-radius: 4px; /* Cuadrados sutiles en armonía con el resto */
    border: 1px solid var(--box-border); 
    background-color: var(--box-bg); 
    color: var(--text-color); 
    cursor: pointer; 
    font-size: 0.8rem; /* Reducido de 0.9em */
    font-weight: bold; 
    font-family: Arial, Helvetica, sans-serif;
}

.btn { 
    padding: 8px 14px; /* Reducido de 10px 18px */
    border-radius: 4px; 
    border: 1px solid var(--box-border); 
    background-color: var(--box-bg); 
    color: var(--text-color); 
    cursor: pointer; 
    font-weight: bold; 
    margin-top: 5px; 
    transition: background 0.2s; 
    display: inline-block;
    font-size: 0.85rem;
}

.btn:hover { 
    background: var(--timer-bg); 
}

.btn-primary { 
    background: var(--accent-color); 
    color: #121212; 
    border: none; 
    font-family: Arial, sans-serif; 
}

.btn-primary:hover { 
    opacity: 0.9; 
}

.file-meta { 
    font-size: 0.85rem; 
    color: var(--footer-color); 
    margin-bottom: 8px; 
    word-break: break-all; 
}

.highlight-yellow {
    background-color: #fff9c4; 
    padding: 8px;
    border-radius: 4px;
    border-left: 3px solid #f0a500; 
    color: #333; 
    font-size: 0.9rem;
}

[data-theme="dark"] .highlight-yellow {
    background-color: #4a452a; 
    border-left-color: #ffc04d;
    color: #e0e0e0;
}

footer { 
    position: fixed;
    bottom: 0;
    left: 0;
    margin-top: 0; /* Eliminamos el margen superior ya que está fijo */
    font-size: 0.8rem; 
    color: var(--footer-color); 
    text-align: center; 
    border-top: 1px solid var(--box-border); 
    padding: 8px 0; /* Padding uniforme arriba y abajo */
    width: 100%;
    background-color: var(--bg-color); /* Fondo sólido para que el contenido no se traduzca por debajo al hacer scroll */
    z-index: 100; /* Asegura que se mantenga por encima de otros elementos */
}

/* ==========================================
   MEDIA QUERIES (RESPONSIVE)
   ========================================== */

@media (max-width: 768px) {
    #main-wrapper {
        margin: 10px auto;
    }
    
    .layout-columns {
        gap: 15px;
    }
    
    .column-left, .column-right {
        flex: 1 1 100%;
    }
}

@media (max-width: 640px) {
    body {
        margin: 0 auto;
        padding: 10px;
    }

    .top-controls {
        margin-bottom: 15px;
        justify-content: center;
    }

    .theme-toggle, .lang-toggle {
        padding: 8px 12px; 
        font-size: 0.8rem;
    }

    .mascot-img {
        max-width: 110px;
    }
    
    .btn, button.btn {
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        text-align: center;
    }
    
    select#expiry {
        width: 100%;
        padding: 8px;
    }
}