:root {
    --wsk-main-color: #0066ff;
    --wsk-border-color: #e1e8f0;
    --wsk-text-main: #1a2b40;
    --wsk-text-muted: #64748b;
    --wsk-bg-soft: #f8fafc;
    --wsk-error: #dc2626;
}

/* Contenedor Principal modificado para soportar el Grid de las filas */
.wsk-main-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    border-top: 5px solid var(--wsk-main-color);
    border-radius: 12px;
    padding: 20px;
    background: #fff;
    max-width: 100%;
    margin-top: 15px;
    box-sizing: border-box;
    box-shadow: 0 12px 28px rgba(19, 42, 89, .08);
    
    /* Agregamos esto para que las filas se porten bien */
    display: flex;
    flex-direction: column;
}

/* Cabecera */
.wsk-header-section { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    margin-bottom: 25px; 
    border-bottom: 1px solid #f0f4f8; 
    padding-bottom: 15px; 
}

.wsk-icon-circle { 
    background: #eef4ff; 
    border-radius: 50%; 
    width: 60px; 
    height: 60px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0; 
}

.wsk-title-group h3 { 
    margin: 0; 
    font-size: 18px; 
    color: var(--wsk-text-main); 
    font-weight: 700; 
}

.wsk-title-group p { 
    margin: 4px 0 0 0; 
    font-size: 14px; 
    color: var(--wsk-text-muted); 
}

/* Filas de Información - ALINEACIÓN CORREGIDA */
.wsk-info-row { 
    display: flex; 
    align-items: center; /* Centra verticalmente TODO el contenido de la fila */
    justify-content: space-between; 
    padding: 12px 15px; 
    border: 1px solid #f0f4f8; 
    border-radius: 8px; 
    margin-bottom: 10px; 
    transition: background 0.2s;
    box-sizing: border-box;
}

.wsk-info-left { 
    display: flex; 
    align-items: center; /* Alinea icono y texto a la misma altura */
    gap: 15px; 
    flex: 1; 
}

.wsk-info-content { 
    display: flex; 
    flex-direction: column;
    justify-content: center; /* Asegura centrado interno */
}

.wsk-info-label { 
    font-size: 14px; 
    font-weight: 700; 
    color: var(--wsk-text-main);
    line-height: 1; /* Evita espacios extra arriba */
}

.wsk-info-value {
    font-size: 14px;
    color: #475569;
    margin-top: 2px; /* Espacio mínimo controlado */
    word-break: break-all;
    line-height: 1;
}

/* Zona de Carga */
.wsk-upload-box { 
    border: 1px dashed #cbd5e1; 
    border-radius: 12px; 
    padding: 20px; 
    background: var(--wsk-bg-soft); 
    margin-top: 10px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    gap: 12px; 
    clear: both; /* Asegura que no se monte en el grid */
}

.wsk-upload-btn { 
    background: var(--wsk-main-color) !important;
    color: white !important; 
    border: none; 
    padding: 12px 24px; 
    border-radius: 8px; 
    font-weight: 700; 
    font-size: 14px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    text-transform: uppercase; 
    width: 100%; 
    justify-content: center; 
    transition: background 0.3s; 
}

/* --- RESPONSIVE / PC (De a dos en dos) --- */
@media (min-width: 600px) {
    /* Hack para que las filas se pongan de a dos sin cambiar el HTML */
    .wsk-main-container {
        display: block; /* Volvemos a block para manejar el flujo */
    }

    /* Buscamos las filas y les aplicamos comportamiento de rejilla mediante un contenedor fantasma si es necesario, 
       pero lo más limpio es aplicar grid al área de las filas si están juntas. */
    
    /* Si tus filas están seguidas en el HTML, esto las pondrá en 2 columnas */
    .wsk-main-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 15px;
    }

    /* Forzamos a la cabecera, el upload box y alertas a ocupar las 2 columnas */
    .wsk-header-section, .wsk-upload-box, .wsk-alert-msg, .wsk-checkout-container {
        grid-column: span 2;
    }

    .wsk-upload-box { 
        flex-direction: row; 
        text-align: left; 
        justify-content: space-between; 
    }
    
    .wsk-upload-btn { 
        width: auto; 
    }
    
    .wsk-info-row { 
        padding: 15px 20px; 
        margin-bottom: 0; /* El grid ya maneja el espacio con gap */
    }
}