/* ==========================================================================================
   DETALLE DEL DIA DE UNA PERSONA — estilos compartidos
   ==========================================================================================
   Va junto con script/detalle-conceptos-del-dia.js, que es quien emite estas clases, y lo
   cargan las dos pantallas: el panel de admin -en su propio modal- y NewDashboard -en un
   SweetAlert de acceso rapido-. Si cada una tuviera su copia, la misma lista terminaria
   viendose distinta en cada lado.

   Es una lista larga -un dia de trabajo son entre 30 y 200 filas- que se lee de arriba hacia
   abajo buscando un hueco o un concepto raro. Todo lo de aca esta puesto para eso: la hora en
   monoespaciada para que las columnas se alineen solas, la cabecera pegada al hacer scroll, y
   los huecos en un color que se ve sin leer.
   ========================================================================================== */

:root {
    --dcd-tinta: #0f172a;
    --dcd-gris: #64748b;
    --dcd-linea: #e2e8f0;
    --dcd-panel: #ffffff;
    --dcd-panel-suave: #f8fafc;
    --dcd-cabecera: #1e293b;
    --dcd-trabajando: #047857;
    --dcd-trabajando-suave: #d1fae5;
    --dcd-inactivo: #b45309;
    --dcd-inactivo-suave: #fef3c7;
    --dcd-sin-tarea: #0369a1;
    --dcd-sin-tarea-suave: #e0f2fe;
    --dcd-pausa: #6d28d9;
    --dcd-pausa-suave: #ede9fe;
    --dcd-sin-sesion: #475569;
    --dcd-sin-sesion-suave: #e2e8f0;
    --dcd-aviso: #b91c1c;
    --dcd-aviso-suave: #fee2e2;
    --dcd-desconocido: #9f1239;
    --dcd-desconocido-suave: #ffe4e6;
}

/* --- el resumen de arriba ------------------------------------------------------------------ */

.dcd-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid var(--dcd-linea);
    border-radius: 999px;
    background: var(--dcd-panel-suave);
    font-size: 14px;
    color: var(--dcd-tinta);
}

.dcd-chip i { color: var(--dcd-gris); }
.dcd-chip-valor { font-weight: 700; }
.dcd-chip-label { color: var(--dcd-gris); }

.dcd-chip--hueco {
    background: #fff7ed;
    border-color: #fed7aa;
}
.dcd-chip--hueco i { color: #c2410c; }

.dcd-chip--aviso {
    background: var(--dcd-aviso-suave);
    border-color: #fecaca;
}
.dcd-chip--aviso i { color: var(--dcd-aviso); }

/* --- la lista ------------------------------------------------------------------------------- */

.dcd-tabla {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

.dcd-tabla th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 12px;
    background: var(--dcd-cabecera);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-align: left;
    white-space: nowrap;
}

.dcd-tabla td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--dcd-linea);
    vertical-align: middle;
}

.dcd-tabla tbody tr:last-child td { border-bottom: 0; }
.dcd-tabla tbody tr:hover td { background-color: #f8fafc; }

/* Las horas en monoespaciada: con fuente proporcional las columnas bailan renglon a renglon y
   buscar un salto de tiempo se vuelve imposible. */
.dcd-hora {
    font-family: Consolas, "Courier New", monospace;
    font-size: 13.5px;
    color: var(--dcd-gris);
    white-space: nowrap;
}

.dcd-concepto { font-weight: 600; color: var(--dcd-tinta); }

.dcd-estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.dcd-estado--trabajando { background: var(--dcd-trabajando-suave); color: var(--dcd-trabajando); }
.dcd-estado--inactivo { background: var(--dcd-inactivo-suave); color: var(--dcd-inactivo); }
.dcd-estado--sin-tarea { background: var(--dcd-sin-tarea-suave); color: var(--dcd-sin-tarea); }
.dcd-estado--pausa { background: var(--dcd-pausa-suave); color: var(--dcd-pausa); }
.dcd-estado--sin-sesion { background: var(--dcd-sin-sesion-suave); color: var(--dcd-sin-sesion); }
.dcd-estado--desconocido { background: var(--dcd-desconocido-suave); color: var(--dcd-desconocido); }

.dcd-app {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--dcd-linea);
    border-radius: 6px;
    background: var(--dcd-panel-suave);
    font-size: 12.5px;
}

.dcd-vacio {
    color: #94a3b8;
    font-style: italic;
    font-size: 13px;
}

.dcd-alerta { color: var(--dcd-aviso); margin-left: 4px; }

.dcd-fila td { transition: background-color .12s ease; }
.dcd-fila--excedida td { background-color: #fff6f6; }
.dcd-fila--abierta td { background-color: #f0fdf4; }

/* El hueco no es un registro: es la ausencia de uno. Se ve distinto de las filas de verdad para
   que no se lo cuente como actividad. */
.dcd-fila--hueco td {
    background-color: #fff7ed;
    color: #9a3412;
    font-style: italic;
}

.dcd-hueco-texto { font-weight: 600; }

.dcd-sin-datos {
    margin: 0;
    padding: 28px 16px;
    text-align: center;
    color: var(--dcd-gris);
    font-size: 14px;
}