/* =============================================================================
   AppRex PRV — Estilos de componentes específicos
   ============================================================================= */

/* --- Selector de área (desktop) --- */
.area-selector { position: relative; }

.area-selector-btn {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    color: var(--rex-white);
    padding: .3rem .75rem;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--transition);
}
.area-selector-btn:hover { background: rgba(255,255,255,.25); }

.area-dropdown {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    background: var(--rex-white);
    border: 1px solid var(--rex-gray-300);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    z-index: 150;
}
.area-dropdown.hidden { display: none; }

.area-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: .6rem 1rem;
    font-size: var(--text-sm);
    color: var(--rex-gray-900);
    transition: background var(--transition);
    cursor: pointer;
}
.area-option:hover { background: var(--rex-teal-light); }
.area-option.active { color: var(--rex-teal); font-weight: 700; }

/* --- Dashboard stats --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.stat-card {
    background: var(--rex-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: .75rem 1rem;
    border-left: 4px solid var(--rex-teal);
}
.stat-card.stat-verde    { border-left-color: var(--semaforo-verde); }
.stat-card.stat-rojo     { border-left-color: var(--semaforo-rojo); }
.stat-card.stat-amarillo { border-left-color: var(--semaforo-amarillo); }
.stat-card.stat-purple   { border-left-color: var(--rex-purple); }

.stat-card .stat-valor { font-size: 1.35rem; font-weight: 800; color: var(--rex-teal-dark); line-height: 1; }
.stat-card.stat-verde    .stat-valor { color: var(--semaforo-verde); }
.stat-card.stat-rojo     .stat-valor { color: var(--semaforo-rojo); }
.stat-card.stat-amarillo .stat-valor { color: var(--rex-yellow-dark); }
.stat-card.stat-purple   .stat-valor { color: var(--rex-purple); }

.stat-card .stat-label  { font-size: .7rem; color: var(--rex-gray-600); margin-top: .25rem; font-weight: 600; }
.stat-card .stat-detail { font-size: .66rem; color: var(--rex-gray-600); margin-top: .12rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Dashboard grid --- */
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.dashboard-grid--1-2 { grid-template-columns: 1fr 2fr; }
.dashboard-grid--3col { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 900px) {
    .dashboard-grid,
    .dashboard-grid--1-2,
    .dashboard-grid--3col { grid-template-columns: 1fr; }
}

.scroll-list { overflow-y: auto; overflow-x: hidden; }

.historial-divider {
    display: flex; align-items: center; gap: .4rem;
    color: var(--rex-gray-600); font-size: .6rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
    padding: .45rem 0 .2rem;
}
.historial-divider::before,
.historial-divider::after { content: ''; flex: 1; height: 1px; background: var(--rex-gray-100); }

/* --- Tabs --- */
.tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--rex-gray-300); margin-bottom: 1.25rem; }
.tab-btn {
    padding: .5rem 1rem;
    font-size: var(--text-sm); font-weight: 600;
    color: var(--rex-gray-600);
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: color var(--transition), border-color var(--transition); cursor: pointer;
}
.tab-btn:hover { color: var(--rex-teal); }
.tab-btn.active { color: var(--rex-teal); border-bottom-color: var(--rex-teal); }

/* --- Filtros bar --- */
.filtros-bar {
    display: flex; align-items: center; gap: .75rem;
    flex-wrap: wrap; margin-bottom: 1.25rem;
}
.filtros-bar .form-control { width: auto; min-width: 160px; }

/* --- Estado vacío --- */
.empty-state {
    display: flex; flex-direction: column; align-items: center;
    gap: .5rem; padding: 1.5rem 1rem;
    color: var(--rex-gray-600); text-align: center;
}
.empty-state svg { opacity: .4; }
.empty-state p { font-size: var(--text-sm); }

/* --- Badge tipo de servicio --- */
.badge-tipo {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: var(--text-xs); font-weight: 700; white-space: nowrap;
}

/* --- Badge moneda --- */
.badge-ars { background: #DCFCE7; color: #166534; }
.badge-usd { background: #DBEAFE; color: #1E40AF; }

/* --- Fila inactiva --- */
.row-inactivo td { opacity: .55; }

/* --- Tabla de información (label + value) --- */
.table-info { width: 100%; font-size: var(--text-sm); }
.table-info .info-label { font-weight: 600; color: var(--rex-gray-600); padding: .45rem .5rem .45rem 0; white-space: nowrap; width: 40%; }
.table-info td { padding: .45rem .5rem; border-bottom: 1px solid var(--rex-gray-100); vertical-align: top; }
.table-info tr:last-child td { border-bottom: none; }

/* --- Form row 2 col --- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75rem; }
@media (max-width: 480px) {
    .form-row, .form-row-3 { grid-template-columns: 1fr; }
}

/* --- Scroll dentro de dashboard --- */
.dash-scroll { flex: 1; min-height: 0; overflow-y: auto; }

/* --- Chip de variación de índice --- */
.var-chip {
    display: inline-flex; align-items: center;
    padding: .15rem .5rem; border-radius: 999px;
    font-size: var(--text-xs); font-weight: 700;
}
.var-chip.positivo { background: #DCFCE7; color: #166534; }
.var-chip.negativo { background: #FEE2E2; color: #991B1B; }
.var-chip.neutro   { background: var(--rex-gray-100); color: var(--rex-gray-600); }

/* --- Link de proveedor/servicio en tabla --- */
.prv-link {
    display: flex; align-items: center; gap: .5rem;
    color: var(--rex-gray-900); font-weight: 600; text-decoration: none;
}
.prv-link:hover { color: var(--rex-teal); }

/* --- Badge de tipo de servicio (color dinámico via style) --- */
.badge-servicio {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: var(--text-xs); font-weight: 700; white-space: nowrap;
}

@media (max-width: 768px) {
    .dash-scroll { flex: none; min-height: unset; max-height: 300px; }
}