/* =====================================================
   AUDIA — COMPONENTES COMPARTIDOS
   Vocabulario único de la interfaz. Se carga después de
   los CSS por módulo y antes de premium.css.

   POR QUÉ EXISTE ESTE FICHERO
   ---------------------------
   Cada módulo se había inventado su propio nombre para las
   mismas tres cosas. Solo para "título de página" convivían
   siete: .alerts-page-title, .listing-page-title, .qa-page-title,
   .reports-page-title, .wq-page-title, .dash-header__title,
   .call-title… y catorce para "título de tarjeta".

   Cada copia repetía las mismas seis propiedades y, con ellas,
   los mismos fallos: veinte reglas de tema oscuro pintaban el
   título con --ds-color-inverse-primary (#495e8c sobre fondo
   #0f1828, ~2,5:1, ilegible). Arreglarlo obligaba a tocar veinte
   sitios, y el módulo siguiente volvía a copiar el error.

   CÓMO SE USA
   -----------
   - Módulo NUEVO: usa directamente las clases `.ui-*`. No
     inventes `.mimodulo-page-title`.
   - Módulo EXISTENTE: su clase histórica está agrupada aquí
     junto a la `.ui-*` equivalente, así que hereda la definición
     buena sin tocar el marcado. Las reglas duplicadas que siguen
     en el CSS de cada módulo quedan obsoletas: se pueden retirar
     cuando se pueda comprobar esa vista en el navegador.

   REGLA DE ORO DEL TEMA OSCURO
   ----------------------------
   El color de marca legible en oscuro es --ds-color-primary,
   que tokens.css ya invierte a #b1c6fb con [data-theme="dark"].
   NO uses --ds-color-inverse-primary: en oscuro vale #495e8c.
   Definido aquí una sola vez para no volver a equivocarse.
   ===================================================== */

/* =====================================================
   1. TÍTULO DE PÁGINA
   ===================================================== */

.ui-page-title,
.alerts-page-title,
.listing-page-title,
.qa-page-title,
.reports-page-title,
.wq-page-title,
.dash-header__title,
.call-title,
.sale-title,
.client-name {
    font-family: var(--ds-font-family-base);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ds-color-primary);
    margin: 0 0 var(--ds-space-1) 0;
}

[data-theme="dark"] .ui-page-title,
[data-theme="dark"] .alerts-page-title,
[data-theme="dark"] .listing-page-title,
[data-theme="dark"] .qa-page-title,
[data-theme="dark"] .reports-page-title,
[data-theme="dark"] .wq-page-title,
[data-theme="dark"] .dash-header__title,
[data-theme="dark"] .call-title,
[data-theme="dark"] .sale-title,
[data-theme="dark"] .client-name {
    color: var(--ds-color-primary);
}

/* =====================================================
   2. SUBTÍTULO DE PÁGINA
   ===================================================== */

.ui-page-subtitle,
.alerts-page-subtitle,
.listing-page-subtitle,
.qa-page-subtitle,
.reports-page-subtitle,
.wq-page-subtitle,
.dash-header__subtitle,
.call-subtitle,
.sale-subtitle,
.client-subtitle {
    font-family: var(--ds-font-family-base);
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--text-muted);
    margin: 0;
}

/* =====================================================
   3. TÍTULO DE TARJETA O SECCIÓN
   Un escalón por debajo del título de página.
   ===================================================== */

.ui-card-title,
.info-card-title,
.info-section-title,
.cd-mini-card-title,
.cost-card-title,
.login-card-title,
.summary-title,
.calls-list-title,
.c360-pending-title,
.sale-group-title,
.verification-group-title,
.ai-analysis-title,
.category-title,
.section-title,
.form-section-title,
.dash-chart__title {
    font-family: var(--ds-font-family-base);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text-color);
    margin: 0 0 var(--ds-space-3) 0;
}

/* El título de la tarjeta de acceso es la excepción deliberada:
   es el encabezado principal de esa pantalla, no una sección. */
.login-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ds-color-primary);
    margin-bottom: var(--ds-space-6);
}

/* =====================================================
   4. CABECERA DE PÁGINA
   Título y acciones en la misma línea, que es el patrón
   que ya repetían index, dashboard, alerts y work_queue
   con un <div class="d-flex justify-content-between…">.
   ===================================================== */

.ui-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--ds-space-6);
}

.ui-page-header__titles {
    min-width: 0;
}

.ui-page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    flex-shrink: 0;
}

/* =====================================================
   5. BARRA DE FILTROS
   ===================================================== */

.ui-toolbar {
    display: flex;
    align-items: flex-end;
    gap: var(--ds-space-3);
    flex-wrap: wrap;
    padding: var(--ds-space-4);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: var(--ds-space-5);
}

.ui-toolbar__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 160px;
}

.ui-toolbar__spacer {
    margin-left: auto;
}

/* =====================================================
   6. PAR ETIQUETA / VALOR
   El bloque de datos de una ficha: DNI, CUPS, tarifa…
   ===================================================== */

.ui-field,
.info-item {
    padding: 7px 0;
    min-width: 0;
}

.ui-field__label,
.info-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.ui-field__value,
.info-value {
    display: block;
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--text-color);
    overflow-wrap: anywhere;
}

/* =====================================================
   7. PASTILLA DE ESTADO
   Para estados de negocio (verificada, pendiente, escalada).
   Tonal, no plana: en una tabla de cien filas el color
   saturado cansa y deja de distinguir.
   ===================================================== */

.ui-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.3em 0.65em;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.ui-status--ok      { background: var(--ds-color-success-container); color: var(--ds-color-on-success-container); }
.ui-status--warn    { background: var(--ds-color-warning-container); color: var(--ds-color-on-warning-container); }
.ui-status--danger  { background: var(--ds-color-error-container);   color: var(--ds-color-on-error-container); }
.ui-status--info    { background: var(--ds-color-tertiary-fixed);    color: var(--ds-color-on-tertiary-fixed); }
.ui-status--neutral { background: var(--elevated-bg);                color: var(--text-secondary); }

[data-theme="dark"] .ui-status--ok      { background: rgba(125, 212, 152, 0.18); color: #9fe3b3; }
[data-theme="dark"] .ui-status--warn    { background: rgba(255, 197, 110, 0.18); color: #ffc56e; }
[data-theme="dark"] .ui-status--danger  { background: rgba(255, 180, 171, 0.18); color: #ffb4ab; }
[data-theme="dark"] .ui-status--info    { background: rgba(171, 199, 255, 0.16); color: #abc7ff; }
[data-theme="dark"] .ui-status--neutral { background: var(--elevated-bg);         color: var(--text-secondary); }

/* =====================================================
   8. PANEL
   Contenedor genérico. Equivale a .card, pero sin arrastrar
   el resto de reglas de Bootstrap.
   ===================================================== */

.ui-panel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.ui-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    padding: 15px 18px;
    border-bottom: 1px solid var(--border-color);
}

.ui-panel__body {
    padding: 18px;
}

.ui-panel__footer {
    padding: 14px 18px;
    border-top: 1px solid var(--border-color);
}

/* =====================================================
   9. ESTADO VACÍO
   Lo que se ve cuando una búsqueda no devuelve nada. Hoy
   cada módulo lo resuelve a su manera o no lo resuelve.
   ===================================================== */

.ui-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    padding: var(--ds-space-12) var(--ds-space-6);
    text-align: center;
    color: var(--text-muted);
}

.ui-empty__icon {
    font-size: 30px;
    line-height: 1;
    color: var(--border-light);
    margin-bottom: var(--ds-space-1);
}

.ui-empty__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
}

.ui-empty__text {
    font-size: 0.9rem;
    margin: 0;
    max-width: 42ch;
}

/* =====================================================
   10. PANTALLAS PEQUEÑAS
   ===================================================== */

@media (max-width: 767.98px) {
    .ui-page-title,
    .alerts-page-title,
    .listing-page-title,
    .qa-page-title,
    .reports-page-title,
    .wq-page-title,
    .dash-header__title,
    .call-title,
    .sale-title,
    .client-name {
        font-size: 1.35rem;
    }

    .ui-page-header__actions {
        width: 100%;
    }

    .ui-toolbar__field {
        min-width: 100%;
    }
}