/* ./css/work-area.css */

/* ----------------------------------------------------------------------*/
/* Estilos Generales del Área de Trabajo */
/* ----------------------------------------------------------------------*/

#workArea {
    /* Achica el margen superior del work-area, la barra util debe estar bien pegada al borde superior */
    padding: 0 5px 5px 5px; 
}

#utilityBar {
    /* Fondo blanco (o transparente) y sin recuadro visible */
    background-color: transparent; 
    /* Achica padding/margin superior e inferior a 2px como maximo. */
    padding: 2px 0;
    border-radius: 0;
    margin-bottom: 0; 
    box-shadow: none; /* Se elimina el recuadro visible (la sombra) */
    
/*    border-bottom: 1px solid var(--color-border); /* Separador sutil sin ser un recuadro */
    margin-bottom: 5px; /* Pequeño espacio debajo del separador */
}

#resultsArea {
    /* Achica espacio entre el titulo de listado y el margen superior a no mas de 2px */
    padding: 2px 0 0 0; 
}

/* Título de Resultados */
#resultsArea h2 {
    /* El tamaño de letra se ajusta a 1em */
    font-size: 1em; 
    color: var(--color-primary-dark);
	font-weight: normal;
    margin-top: 0;
/*    border-bottom: 2px solid var(--color-border); */`
    padding-bottom: 2px;
    margin-bottom: 2px; 
}

/* ----------------------------------------------------------------------*/
/* Estilos de la Barra de Utilidades */
/* ----------------------------------------------------------------------*/

.util-group {
    /* Habilitar Flexbox */
    display: flex;
    /* Los elementos se envuelven a la siguiente línea si no caben */
    flex-wrap: wrap; 
    /* Espacio entre los grupos (horizontal y vertical) */
    gap: 1rem; /* 24px */
    /* Alinea los grupos al inicio del contenedor (izquierda) */
    justify-content: flex-start;
    /* Centra verticalmente los elementos si tienen diferente altura */
    align-items: center; 
    padding: 0.3rem;
}

.util-group label, .util-group span {
    font-weight: normal;
    color: #333;
    margin-right: 5px;
}

/* Contenedor de cada grupo */
.utility-group-item {
    /* Esto permite que cada grupo se ajuste a su contenido y se separe por el gap del padre */
    flex-grow: 0; 
    flex-shrink: 0;
    
    /* Pequeño margen inferior para cuando los elementos se envuelvan en móvil */
    margin-bottom: 0.1rem; 
}

/* Aseguramos que los labels y selectores dentro de los grupos funcionen bien */
.group-sort { /* <--- Solo aplica a .group-sort ahora */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Ajuste específico para el grupo de Búsqueda */
.group-search { 
    /* Necesitamos un display: flex aquí para alinear el Label "Buscar:" con el search-control */
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Ajuste para el espacio entre "Buscar:" y el input */
}

.group-search .search-control {
    display: flex;
    /* Permite que la caja de búsqueda se estire un poco más en pantallas pequeñas */
    flex-grow: 1; 
    max-width: 15rem; /* 240px */
/* align-items: center; */
    gap: 5px;
}

/* Control de Búsqueda */
#search-input {
    padding: 2px 2px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    width: 200px;
}

#search-button {
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: 2px 2px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#search-button:hover {
    background-color: var(--color-primary-dark);
}

/* Controles de Ámbito */
.ambito-controls {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 2px;
/*    border: 1px dashed var(--color-border);
    border-radius: 4px; */
}

.ambito-controls label { 
    font-weight: normal; 
}

/* Select de Orden */
#sort-select {
    padding: 2px 2px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    cursor: pointer;
}

/* ----------------------------------------------------------------------*/
/* Estilos del Switch de Moneda y Disclaimer */
/* ----------------------------------------------------------------------*/

.currency-group {
    display: flex;
    flex-direction: row; 
    align-items: center;
    gap: 10px; 
}

.currency-switch-container {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
}

.currency-option {
    padding: 2px 2px;
    transition: background-color 0.2s, color 0.2s;
    font-weight: 500;
}

.currency-option.active {
    background-color: var(--color-primary);
    color: white;
}

.currency-option:not(.active):hover {
    background-color: #e0e0e0;
}

/* Estilo del Aviso de Moneda In-line y más pequeño */
.currency-disclaimer-inline {
    font-size: 0.6em; 
    color: #555;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: normal;
    
    /* CONTROL DE VISIBILIDAD POR DEFECTO Y TRANSICIÓN */
    visibility: hidden; 
    opacity: 0;        
    transition: opacity 0.3s, visibility 0.3s;
}

.currency-disclaimer-inline i {
    color: var(--color-primary);
}


/* ----------------------------------------------------------------------*/
/* Estilos del Modal de Advertencia de ARS (Se mantienen aquí, no son de listado) */
/* ----------------------------------------------------------------------*/

#arsWarningModal {
    display: none; 
    position: fixed;
    z-index: 2000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6); 
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fefefe;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    max-width: 400px;
    text-align: center;
}

.modal-content h3 {
    color: var(--color-rojo);
    margin-top: 0;
}

.modal-content button {
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    margin-top: 20px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s;
}

.modal-content button:hover {
    background-color: var(--color-primary-dark);
}