/* Base font family and text styles */
html, body, .container, .form-control, .btn, h1, h2, h3, h4, h5, h6, p, table, input, select, textarea, .alert, .badge, .card, .dropdown-menu, .form-text, .nav-link {
    font-family: 'Nunito Sans', sans-serif;
    letter-spacing: -0.01em;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #000000;
}

/* Card styling - remove rounded borders */
.card {
    border-radius: 0 !important; /* Sharp corners */
    border: 1px solid #DDDDDD;
}

.card-body {
    padding: 16px;
}

/* Body text specific styles */
body {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #000000;
}

/* Ajustes de peso de fuente */
h1, h2, h3 {
    font-weight: 700;
}

h4, h5, h6 {
    font-weight: 600;
}

p, li, td, select, option, input {
    font-weight: 400;
}

.font-light {
    font-weight: 300;
}

.font-bold {
    font-weight: 600;
}

.font-thin {
    font-weight: 200;
}

/* App title styling */
.app-header {
    display: flex;
    flex-direction: column;
    margin: auto;
}

.app-title {
    font-weight: 700;
    font-size: 40px;
    color: #000000;
    margin: 5rem 0 1rem;
    line-height: 48px;
}

.app-subtitle {
    font-weight: 400;
    font-size: 20px;
    color: #000000;
    margin-bottom: 1rem;
    line-height: 24px;
}

/* File details section */
.file-details-section {
    background-color: #F2F2F2; /* lightgrey from palette */
    border-radius: 0; /* Sharp corners */
    padding: 16px;
    margin-bottom: 24px;
    border: none;
}

/* Detalles del archivo */
.file-details-section h4 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #000000;
}

.file-details-section p {
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    font-weight: 400;
}

/* Upload area styling - Apli style */
.upload-zone {
    border: 1px solid #000000;
    background-color: #FFFFFF;
    border-radius: 0; /* Sharp corners */
    padding: 24px;
    text-align: center;
    margin-bottom: 24px;
}

.upload-icon {
    color: #3347FF; /* azure from palette */
    font-size: 32px;
    display: block;
    margin-bottom: 16px;
}

.upload-zone p {
    color: #000000;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 8px;
    font-weight: 600;
}

.upload-zone small {
    color: #666666; /* darkgrey from palette */
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
}

/* Boton buscar archivo - secondary style */
.file-btn {
    background-color: #FFFFFF;
    color: #000000;
    border: 2px solid #000000;
    border-radius: 0; /* Sharp corners */
    padding: 10px 24px;
    margin-top: 16px;
    display: inline-block;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-size: 16px;
    line-height: 24px;
}

.file-btn:hover {
    background-color: #F2F2F2; /* lightgrey from palette */
    border-color: #000000;
    text-decoration: underline;
}

.file-info {
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    margin-left: 20px;
    padding: 8px 0;
    position: relative;
    font-weight: 400;
}

/* Icono de archivo para el nombre del archivo seleccionado */
.file-info:not(:empty)::before {
    position: absolute;
    left: -18px;
    top: 8px;
    font-size: 16px;
    color: #3347FF; /* azure from palette */
}

/* Button styling according to design guide */
/* Primary buttons: Black background, white text */
.btn-primary {
    background-color: #000000;
    border-color: #000000;
    color: #FFFFFF;
    font-weight: 600;
    border-radius: 0; /* Sharp corners */
    padding: 10px 24px;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    text-transform: none;
}

.btn-primary:hover {
    text-decoration: underline;
    background-color: #000000;
    border-color: #000000;
    color: #FFFFFF;
}

/* Secondary buttons: White background, black outline, black text */
.btn-secondary {
    background-color: #FFFFFF;
    border: 2px solid #000000;
    color: #000000;
    font-weight: 600;
    border-radius: 0; /* Sharp corners */
    padding: 10px 24px;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
}

.btn-secondary:hover {
    text-decoration: underline;
    background-color: #F2F2F2;
    border-color: #000000;
    color: #000000;
}

/* Tertiary buttons: Transparent background, black text */
.btn-tertiary {
    background-color: transparent;
    border-color: transparent;
    color: #000000;
    font-weight: 600;
    border-radius: 0; /* Sharp corners */
    padding: 10px 24px;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
}

.btn-tertiary:hover {
    text-decoration: underline;
    background-color: transparent;
    border-color: transparent;
    color: #000000;
}

/* Estilos para botones deshabilitados - cambio a gris en lugar de azul claro */
.btn-primary:disabled,
.btn-primary.disabled,
.btn-primary[disabled] {
    background-color: #666666 !important; /* darkgrey from palette */
    border-color: #666666 !important;
    color: #FFFFFF !important;
    opacity: 0.8;
    text-decoration: none;
    cursor: not-allowed;
    pointer-events: all;
}

/* Asegurar que no muestren el subrayado al pasar el mouse */
.btn-primary:disabled:hover,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
.btn-secondary:disabled:hover,
.btn-secondary.disabled:hover,
.btn-secondary[disabled]:hover,
.btn-tertiary:disabled:hover,
.btn-tertiary.disabled:hover,
.btn-tertiary[disabled]:hover {
    text-decoration: none;
}

/* Dark buttons (maintain for compatibility) */
.btn-dark {
    background-color: #000000;
    border-color: #000000;
    color: #FFFFFF;
    font-weight: 600;
    border-radius: 0; /* Sharp corners */
}

.btn-dark:hover {
    text-decoration: underline;
    background-color: #000000;
    border-color: #000000;
}

/* Estilos para botones dark deshabilitados */
.btn-dark:disabled,
.btn-dark.disabled,
.btn-dark[disabled] {
    background-color: #666666 !important; /* darkgrey from palette */
    border-color: #666666 !important;
    opacity: 0.8;
}

/* Table styling according to Apli design guidelines */
.streamlit-table-container {
    border: 1px solid #000000;
    border-radius: 0; /* Sharp corners */
    overflow: hidden;
    box-shadow: none;
    margin-bottom: 24px;
    width: 100%;
    overflow-x: auto; /* Asegurar que mantiene el scroll interno */
    padding: 0; /* Eliminar padding interno */
}

.table {
    font-size: 16px;
    line-height: 24px;
    border-collapse: separate;
    border-spacing: 0;
    width: auto;
    min-width: 100%;
    border: none;
    table-layout: auto;
    white-space: nowrap;
    margin: 0; /* Eliminar márgenes */
    padding: 0; /* Eliminar padding */
    display: inline-table; /* Asegura que la tabla use su ancho natural */
    font-family: 'Nunito Sans', sans-serif;
}

/* Estilos específicos para el encabezado de la tabla */
.table thead {
    margin: 0;
    padding: 0;
    border-spacing: 0;
}

.table th {
    background-color: #323234;
    color: #f0eaea;
    font-weight: 400;
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
    border: .1px solid #E4E5E8;
    border-top: none; /* Eliminar borde superior */
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 10;
    margin-top: 0; /* Eliminar margen superior */
}

.table td {
    border: 0.5px solid #DDDDDD; /* grey from palette, más sutil */
    padding: 16px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    background-color: #FFFFFF;
}

/* Estilos para filas alternadas */
.table tbody tr:nth-child(even) td {
    background-color: #F2F2F2; /* lightgrey from palette */
}

/* Estilo hover rows */
.table tbody tr:hover td {
    background-color: #33ADFF30; /* blue from palette with transparency */
}

/* Estilos para primera y última fila */
.table tbody tr:first-child td {
    border-top: none;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* Validation messages according to Apli design guidelines */
/* Left section (source columns) validation messages */
.mapping-item .source-column .validation-warning {
    color: #8533FF; /* purple from palette */
    background-color: #8533FF20; /* purple with transparency */
    padding: 8px;
    margin-top: 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    display: block;
}

/* Right section (target columns) validation messages */
.mapping-item .target-column .validation-warning {
    color: #8533FF; /* purple from palette */
    background-color: transparent; /* no background */
    padding: 0;
    margin-top: 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    display: block;
}

/* Especial estilo para números de fila en mensajes de error */
.error-rows {
    background-color: transparent; /* no background */
    color: #8533FF; /* purple from palette */
    padding: 0;
    font-weight: 700;
    margin-right: 4px;
    margin-top: 8px;
    display: inline-block;
    border: none;
}

/* Estilo para strong/bold en mensajes de validación */
.validation-warning strong,
.column-validation-msg strong {
    font-weight: 700;
    color: #8533FF; /* purple from palette */
}

/* Blue messages - make them black without background */
.validation-info {
    color: #000000 !important; /* black */
    background-color: transparent !important; /* no background */
    margin-top: 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    padding: 0;
    border: none !important;
    box-shadow: none !important;
}

.validation-success {
    color: #33FF85 !important; /* Green text */
    background-color: transparent !important; /* no background */
    margin-top: 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    padding: 0;
}

/* Estilo para el box de éxito (éxito con fondo verde claro y borde verde) */
.success-box div {
    padding: 8px 16px !important;
    background-color: #EFFFF6 !important; 
    color: #000000 !important;
    border-radius: 0 !important;
    border: 1px solid #33FF85 !important;
    margin-top: 8px !important;
    width: 100% !important;
}

/* Mensaje específico para "Columna validada correctamente" */
.validation-server-msg.validation-success {
    color: #33FF85 !important; /* Green text - forzado */
}

/* Yellow messages */
.validation-warning.yellow-message {
    color: #8533FF; /* purple */
    background-color: transparent; /* no background */
}

/* Destacar selects con error o en estado Pendiente */
.column-select.is-invalid,
.column-select.pending-select {
    border: 2px solid #8533FF; /* purple from palette */
    background-color: #FFFFFF;
    border-radius: 0; /* Sharp corners */
}

/* Mensaje de error para selects */
.select-error-msg {
    color: #8533FF; /* purple from palette */
    margin-top: 8px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    background-color: transparent;
    padding: 0;
}

/* Estilo para contenedor de tabla responsive */
.table-responsive {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: scroll;
    margin: 0;
    padding: 0;
    width: 100%;
    border: 1px solid #000000;
    border-radius: 0; /* Sharp corners */
}

/* Estilos mejorados para la sección de mapeo de columnas según Apli design guidelines */
.target-column {
    transition: all 0.3s ease-in-out;
    border: none; /* Remove outlines */
    box-shadow: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    padding: 16px;
    border-radius: 0; /* Sharp corners */
}

.target-column.mapped {
    background-color: #33FFEB !important; /* Apli turquoise background */
    color: #000000 !important; /* Black text */
    border: none !important; /* No outline */
    box-shadow: none !important;
}

.target-column.unmapped {
    background-color: #8533FF20; /* purple from palette with transparency */
    color: #8533FF; /* purple text */
    border: 2px solid #8533FF; /* Purple outline */
    box-shadow: none;
}

.target-column.validating {
    background-color: #33ADFF20; /* blue from palette with transparency */
    color: #000000;
    border: none;
    box-shadow: none;
}

.target-column.invalid-data {
    background-color: #8533FF20; /* Light purple background with transparency */
    color: #8533FF; /* Purple text */
    border: 2px solid #8533FF; /* Purple outline */
    box-shadow: none;
}

/* Form controls - select, input, etc. */
.form-control,
.column-select {
    transition: border-color 0.3s ease;
    border: 2px solid #000000;
    border-radius: 0; /* Sharp corners */
    padding: 10px 16px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #000000;
    height: auto;
}

.form-control:focus,
.column-select:focus {
    border-color: #3347FF; /* azure from palette */
    box-shadow: none;
    outline: none;
}

/* Form label styling */
label {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #000000;
}

/* Form group spacing */
.form-group, 
.mb-3 {
    margin-bottom: 24px;
}

/* Alert styling according to Apli design guidelines */
.alert {
    border-radius: 0; /* Sharp corners */
    padding: 16px;
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    border: none;
}

.alert-success {
    background-color: #33FF85; /* Green background */
    color: #000000;
}

.alert-danger,
.alert-error {
    background-color: #FF3347; /* red from palette */
    color: #FFFFFF;
}

.alert-warning {
    background-color: #FF33AD; /* pink from palette */
    color: #000000;
}

.alert-info {
    background-color: #33ADFF; /* blue from palette */
    color: #000000;
}

.btn-close {
    font-size: 16px;
    opacity: 1;
    color: currentColor;
}