/* Módulo Recepciones -- prefijo `rc-*`.
 *
 * Viste seis componentes: AdjuntosVisor/AdjuntoVisorDialog/AdjuntosSelector (RazorLibrary/Web/_Shared/Adjuntos/,
 * genéricos, E2), y ReportesDeRecepcionPanel/RecepcionesLista/RecepcionReporteDialog
 * (RazorLibrary/Web/Recepciones/, conocen los DTO de Recepciones). Los tres primeros son de propósito general
 * -- cualquier pantalla que muestre o junte un conjunto de adjuntos puede reusarlos -- y por eso comparten esta
 * hoja con clases sin acoplar a "recepción": son las miniaturas, el visor y el selector; el concepto de
 * "reporte"/"bandeja" es sólo de los otros tres.
 *
 * Sin html/body/:root/* -- HojasDeEstiloSinReglasGlobalesTests lo verifica sobre TODA hoja registrada en
 * _Host.cshtml. Y ningún selector de acá pisa el atributo `hidden`: MudBlazor decide la visibilidad de sus
 * propios componentes (MudDialog, MudTooltip) con ese atributo, y una regla `display` sobre un elemento que
 * lo usa lo deja visible aunque el framework lo haya marcado oculto.
 */

/* ── Miniaturas (AdjuntosVisor) ── */

.rc-adjuntos-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.rc-adjunto-miniatura {
    width: 96px;
    height: 96px;
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
}

/* Un <img> pelado y no un MudImage (R8: el onerror tiene que llegar al componente), así que el recorte que
   antes ponía ObjectFit.Cover va acá. */
.rc-adjunto-miniatura-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rc-adjunto-pdf {
    width: 96px;
    height: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-lines-default);
    padding: 4px;
    text-align: center;
}

.rc-adjunto-pdf-nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 88px;
}

/* ── Visor a pantalla completa (AdjuntoVisorDialog) ── */

.rc-visor-nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rc-visor-contenedor {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 70vh;
}

/* Ajustado (default): la imagen se recorta al contenedor, sin scroll -- el caso común de una foto de celular
   más grande que el diálogo. */
.rc-visor-ajustado {
    overflow: hidden;
}

.rc-visor-ajustado .rc-visor-imagen {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

/* Tamaño real: sin recorte, con scroll -- el toggle lo pide el contrato (E2) para ver detalle a resolución
   nativa. */
.rc-visor-real {
    overflow: auto;
}

.rc-visor-real .rc-visor-imagen {
    max-width: none;
    max-height: none;
}

.rc-visor-contador {
    margin: 0 8px;
    white-space: nowrap;
}

/* Diapositiva de PDF dentro del visor (antes era un ícono+nombre en un diálogo aparte, RecepcionAdjuntosDialog
   -- menores del ciclo Recepciones, 2026-09-23: hoy es una diapositiva más del mismo visor). */
.rc-visor-pdf {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 16px;
    text-align: center;
}

/* ── Panel de reportes (ReportesDeRecepcionPanel) ── */

.rc-reportes-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rc-reporte-item {
    padding: 12px;
}

.rc-reporte-header {
    margin-bottom: 4px;
}

.rc-reporte-comentario {
    white-space: pre-wrap;
    margin-bottom: 4px;
}

/* ── Selector de adjuntos (AdjuntosSelector) ── */

.rc-adjuntos-pendientes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rc-adjunto-pendiente-mini {
    margin-right: 4px;
}

/* ── Página de la bandeja (Recepciones.razor) ──
   Sin el marco de papel de vc-page/vc-panel (2026-09-24): las tarjetas van directo sobre el fondo, así
   contrastan. En una PC la columna se centra con un ancho máximo -- una tarjeta pensada para el teléfono
   estirada a todo el monitor se lee peor, no mejor. */

.rc-pagina {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

/* En el teléfono cada píxel de ancho cuenta: el área de contenido del layout baja su padding de 16 a 8px
   SÓLO en esta página (el :has la acota; el resto de la app no cambia). */
@media (max-width: 599.98px) {
    .mainlayout-body-content:has(.rc-pagina) {
        padding: 8px;
    }
}

/* ── Bandeja en tarjetas (RecepcionesLista) ── */

.rc-lista-search {
    min-width: 240px;
    flex: 1 1 240px;
}

.rc-tarjeta {
    padding: 12px;
    margin-bottom: 12px;
}

.rc-tarjeta-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
}

.rc-tarjeta-info {
    flex: 1 1 auto;
    min-width: 0;
}

.rc-tarjeta-proveedor {
    font-weight: 600;
}

.rc-tarjeta-detalle {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

/* Líneas apiladas del teléfono (la tabla no entra en 400px). */
.rc-lineas-compactas {
    display: flex;
    flex-direction: column;
}

.rc-linea-compacta {
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.rc-linea-compacta:last-child {
    border-bottom: none;
}

.rc-linea-descripcion {
    font-weight: 500;
}

/* Columnas numéricas de la MudSimpleTable de la bandeja. Una clase pelada NO alcanza, aunque no haya flexbox de
   por medio: el paquete declara

       .mud-simple-table table * tr>td { text-align: start }   → (0,1,3)
       .mud-simple-table table * tr th { text-align: start }   → (0,1,3)

   y le gana a los (0,1,0) de `.rc-col-right` sin importar el orden de las hojas -- la especificidad se resuelve
   antes que la cascada. Así estuvo desde que nació: la clase puesta y las cifras alineadas a la izquierda. Se
   repite la cadena del paquete con la clase al final (0,2,3), la misma forma que `.oc-right-align` en
   compras.css, donde está el diagnóstico completo. No aplican `grid-cell-right`/`grid-header-right`, que son
   de MudDataGrid. */
.mud-simple-table table * tr > td.rc-col-right,
.mud-simple-table table * tr th.rc-col-right {
    text-align: right;
}