/*
 * Los diez estados del proceso de evaluación, con un tinte cada uno.
 *
 * Reemplaza el uso de `badge-light-*` para pintar estados: seis familias de
 * Bootstrap no alcanzan para diez pasos, y agrupaban pasos que esperan a
 * personas distintas —«Reunión por agendar» espera al jefe y «Esperando
 * constancia» espera al evaluado, y los dos salían del mismo amarillo—.
 *
 * La fuente de verdad de qué clase le toca a cada estado es
 * `App\Support\SeguimientoGestion::TINTES`; aquí solo viven los colores.
 *
 * Anatomía del badge: fondo de familia + punto que separa dentro de la familia
 * + el texto del estado siempre presente. El color no comunica nunca solo.
 *
 * Este archivo se enlaza desde `layout/master.blade.php` en lugar de
 * compilarse con el SCSS del tema: no hace falta un build para diez reglas.
 * Se edita aqui, en `resources/hrs/`; `webpack.mix.js` lo copia tal cual a
 * `public/assets/css/`, que el build vacia entero y no se versiona (H-109).
 */

.estado-proceso {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .65rem;
    border-radius: .425rem;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    background: var(--estado-fondo, #F1F1F2);
    color: var(--estado-texto, #4B5675);
    /* El informe individual es imprimible (RN-28): sin esto el navegador
       descarta el fondo y los diez estados salen todos en blanco. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* El punto es lo que separa dos estados de la misma familia. */
.estado-proceso::before {
    content: "";
    flex: none;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--estado-punto, currentColor);
}

/* Solo el punto, para leyendas y para el pie de un gráfico. */
.estado-punto {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--estado-punto, #B5B5C3);
}

/*
 * Los diez tintes.
 *
 * `--estado-grafico` es el color pleno con el que ApexCharts pinta el segmento
 * de ese estado en el embudo, para que el gráfico y el badge de la tabla no se
 * contradigan. Se lee desde JS con getComputedStyle.
 */
.tinte-curso             { --estado-fondo:#eafcf1; --estado-texto:#0e6936; --estado-punto:#0e6936; --estado-grafico:#0e6936; }
.tinte-sin-abrir         { --estado-fondo:#F9F9F9; --estado-texto:#78829D; --estado-punto:#B5B5C3; --estado-grafico:#B5B5C3; }
.tinte-por-agendar       { --estado-fondo:#fff8dd; --estado-texto:#8a6d00; --estado-punto:#ffc700; --estado-grafico:#ffc700; }
.tinte-ventana-vencida   { --estado-fondo:#fff8dd; --estado-texto:#7a5b00; --estado-punto:#e0a300; --estado-grafico:#e0a300; }
.tinte-agendada          { --estado-fondo:#f8f5ff; --estado-texto:#5014d0; --estado-punto:#7239ea; --estado-grafico:#7239ea; }
/* Naranja, no el #ffdd80 del diseño: sobre el amarillo pálido ese punto era
   invisible y el estado volvía a confundirse con «por agendar», que es
   justamente el par que esta paleta existe para separar. */
.tinte-espera-constancia { --estado-fondo:#fff8dd; --estado-texto:#8a5000; --estado-punto:#fd7e14; --estado-grafico:#fd7e14; }
.tinte-vencido           { --estado-fondo:#fff5f8; --estado-texto:#d9214e; --estado-punto:#f1416c; --estado-grafico:#f1416c; }
.tinte-escalado          { --estado-fondo:#fff5f8; --estado-texto:#b0173d; --estado-punto:#b0173d; --estado-grafico:#b0173d; }
.tinte-por-firmar        { --estado-fondo:#f8f5ff; --estado-texto:#5014d0; --estado-punto:#a97cf5; --estado-grafico:#a97cf5; }
.tinte-cerrado           { --estado-fondo:#e8fff3; --estado-texto:#2f7a56; --estado-punto:#50cd89; --estado-grafico:#50cd89; }

/*
 * Tema oscuro. Solo cambian fondo y texto: los puntos son los mismos colores
 * plenos, que es lo que mantiene reconocible el estado entre los dos temas.
 */
[data-bs-theme="dark"] .tinte-curso             { --estado-fondo:#16291d; --estado-texto:#7ee2ab; }
[data-bs-theme="dark"] .tinte-sin-abrir         { --estado-fondo:#1b1b29; --estado-texto:#92929F; }
[data-bs-theme="dark"] .tinte-por-agendar       { --estado-fondo:#392f28; --estado-texto:#ffc700; }
[data-bs-theme="dark"] .tinte-ventana-vencida   { --estado-fondo:#392f28; --estado-texto:#e0a300; }
[data-bs-theme="dark"] .tinte-agendada          { --estado-fondo:#2f264f; --estado-texto:#b18cf7; }
[data-bs-theme="dark"] .tinte-espera-constancia { --estado-fondo:#392f28; --estado-texto:#fd9a4a; }
[data-bs-theme="dark"] .tinte-vencido           { --estado-fondo:#3a2434; --estado-texto:#f1416c; }
[data-bs-theme="dark"] .tinte-escalado          { --estado-fondo:#3a2434; --estado-texto:#ff6b8f; }
[data-bs-theme="dark"] .tinte-por-firmar        { --estado-fondo:#2f264f; --estado-texto:#c4a5f8; }
[data-bs-theme="dark"] .tinte-cerrado           { --estado-fondo:#1c3238; --estado-texto:#50cd89; }

/*
 * ---------------------------------------------------------------------------
 * La portada en móvil.
 *
 * El orden de escritorio y el de móvil no son el mismo: en escritorio «lo que
 * me toca» y «mi evaluación» conviven en dos columnas y el conjunto va debajo;
 * en 390px todo es una columna, y ahí lo primero tiene que ser lo accionable
 * —qué me toca hoy— y después lo demás.
 *
 * Se resuelve con `order` sobre un flex, no con una segunda plantilla: dos
 * copias de la misma pantalla se desincronizan a la primera corrección. Cada
 * bloque declara su `--hrs-orden-movil` en la vista, junto a su contenido.
 * ---------------------------------------------------------------------------
 */
.hrs-dash { display: block; }

@media (max-width: 767.98px) {
    .hrs-dash {
        display: flex;
        flex-direction: column;
    }

    .hrs-dash__item { order: var(--hrs-orden-movil, 50); }

    /* Lo accionable primero: la franja de campaña es contexto, no tarea, y en
       una pantalla estrecha empujaría lo urgente por debajo del pliegue. */
    .hrs-dash__item[style*="--hrs-orden-movil: 3"] { order: 1; }
    .hrs-dash__item[style*="--hrs-orden-movil: 2"] { order: 2; }
    .hrs-dash__item[style*="--hrs-orden-movil: 1"] { order: 3; }

    /* Los gráficos densos necesitan aire y un poco menos de alto. */
    .hrs-dash .card-header { padding-top: 1.25rem !important; }
    .hrs-dash .card-title h3 { font-size: 1.05rem; }

    /* Las tablas de la portada no caben: se desplazan dentro de su tarjeta en
       vez de estirar la página entera. */
    .hrs-dash .table-responsive { -webkit-overflow-scrolling: touch; }

    /* En la matriz de equipo el cargo sobra: el nombre y los dos estados son
       lo que se compara, y el cargo duplica el alto de cada fila. */
    .hrs-dash .hrs-equipo__cargo { display: none; }
}