/* =====================================================================================
   mpu-tareo.css — piezas propias de la tanda Tareo (UNI-R4J, 04-oct-2026)

   Solo clases propias con prefijo mpu-tareo-. Ninguna regla sobre .dxbl-* (ver mpu-base.css).
   Colores: solo variables de mpu-base.css. Enlazar en Components/App.razor despues de mpu-base.css.
   ===================================================================================== */

/* Selectores de periodo en la fila de filtros: ancho fijo para que la fila no salte */
.mpu-tareo-mes { width: 150px; flex-shrink: 0; }
.mpu-tareo-anio { width: 100px; flex-shrink: 0; }
.mpu-tareo-fecha { width: 180px; flex-shrink: 0; }

/* Campo con rotulo arriba dentro de una ventana (label que envuelve rotulo + editor) */
.mpu-tareo-campo { gap: var(--mpu-espacio-1); min-width: 0; }

/* Asistencia diaria de un mes en una sola fila: 31 casillas (dia arriba, marca abajo) */
.mpu-tareo-dias {
    display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 2px;
    font-size: var(--mpu-texto-chico); text-align: center;
}
.mpu-tareo-dia {
    display: flex; flex-direction: column; gap: 2px; padding: 2px 0;
    border: 1px solid var(--mpu-borde); border-radius: var(--mpu-radio);
}
.mpu-tareo-dia-num { color: var(--mpu-apagado); font-size: 10px; }
.mpu-tareo-dia-marca { font-family: var(--mpu-fuente-cifras); font-weight: 600; min-height: 16px; }

/* Vista previa del PDF del tareo dentro de una ventana de 1100 */
.mpu-tareo-pdf { display: block; width: 100%; height: 62vh; border: 1px solid var(--mpu-borde); border-radius: var(--mpu-radio); }

/* Lista de proyectos del residente: cada proyecto es un boton de fila completa */
.mpu-tareo-proyectos { display: flex; flex-direction: column; gap: var(--mpu-espacio-2); }
.mpu-tareo-proyecto {
    display: flex; align-items: center; gap: var(--mpu-espacio-3); width: 100%;
    padding: var(--mpu-espacio-2) var(--mpu-espacio-3); text-align: left; cursor: pointer;
    background: var(--mpu-superficie); border: 1px solid var(--mpu-borde); border-radius: var(--mpu-radio-grande);
    font: inherit; color: var(--mpu-texto);
}
.mpu-tareo-proyecto:hover { background: var(--mpu-fila-hover); }
.mpu-tareo-proyecto:focus-visible { outline: 2px solid var(--mpu-azul-700); outline-offset: 1px; }
.mpu-tareo-proyecto-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex-grow: 1; }
.mpu-tareo-proyecto-nombre { font-weight: 600; overflow-wrap: anywhere; }