/* =====================================================================================
   Tema "vidrio" para toda la aplicación (portal del personal y área privada de clientes).
   Todo cuelga de .tema-vidrio (la pone el layout): sin esa clase la app se ve "clásica".
   Así cada usuario podrá elegir su estética más adelante sin tocar las pantallas.
   No mueve nada de sitio: solo fondo, superficies, bordes, sombras y transiciones.
   ===================================================================================== */

/* ---- Variables de MudBlazor dentro del tema ---- */
.tema-vidrio {
    --mud-palette-background: transparent;
    --mud-palette-surface: rgba(255, 255, 255, .66);
    --mud-palette-drawer-background: rgba(255, 255, 255, .52);
    --mud-palette-table-lines: rgba(21, 36, 26, .07);
    --mud-palette-table-hover: rgba(46, 139, 58, .06);
    --mud-palette-divider: rgba(21, 36, 26, .09);
    --mud-palette-lines-inputs: rgba(21, 36, 26, .28);
    --mud-default-borderradius: 12px;
    --vidrio-borde: rgba(255, 255, 255, .85);
    --vidrio-sombra: 0 18px 44px rgba(20, 50, 30, .10), 0 2px 8px rgba(20, 50, 30, .05);
    --vidrio-desenfoque: blur(20px) saturate(160%);
    --curva: cubic-bezier(.2, .8, .2, 1);
}

/* ---- Fondo: el de las portadas, pero quieto (se trabaja todo el día delante) ---- */
.fondo-app {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.tema-vidrio .fondo-app.escena-ayni { background: linear-gradient(160deg, #F4F7F6 0%, #E9EFEC 55%, #F4EFE9 100%); }
.tema-vidrio .fondo-app.escena-apalan { background: linear-gradient(160deg, #F3F8F3 0%, #E7F1E8 60%, #EFF6F0 100%); }
.tema-vidrio .fondo-app .mancha { animation: none; translate: none; transition: none; opacity: .7; }

/* .mud-layout sin z-index propio: así la barra (1300) y los desplegables (1200) siguen su orden normal */

/* ---- Barra superior: sigue siendo verde (es la referencia de todos), ahora de vidrio ---- */
.tema-vidrio .mud-appbar {
    background: linear-gradient(115deg, rgba(27, 84, 36, .90) 0%, rgba(46, 139, 58, .86) 55%, rgba(43, 150, 120, .82) 100%);
    backdrop-filter: var(--vidrio-desenfoque);
    -webkit-backdrop-filter: var(--vidrio-desenfoque);
    box-shadow: 0 8px 28px rgba(20, 50, 30, .16);
    border-bottom: 1px solid rgba(255, 255, 255, .18);
}

/* ---- Menú lateral ---- */
.tema-vidrio .mud-drawer {
    backdrop-filter: var(--vidrio-desenfoque);
    -webkit-backdrop-filter: var(--vidrio-desenfoque);
    border-right: 1px solid var(--vidrio-borde);
    box-shadow: 8px 0 30px rgba(20, 50, 30, .05);
}

.tema-vidrio .mud-nav-link {
    margin: 2px 10px;
    width: calc(100% - 20px);
    border-radius: 12px;
    transition: background-color .18s ease, color .18s ease, transform .18s var(--curva);
}

.tema-vidrio .mud-nav-link:hover { background-color: rgba(46, 139, 58, .08); transform: translateX(2px); }

.tema-vidrio .mud-nav-link.active {
    background: linear-gradient(135deg, rgba(46, 139, 58, .16), rgba(43, 179, 163, .10));
    color: #1B5424;
    font-weight: 500;
}

/* ---- Superficies (MudPaper, tarjetas, tablas, pasos) ---- */
.tema-vidrio .mud-main-content .mud-paper:not(.mud-paper-outlined),
.tema-vidrio .mud-main-content .mud-table,
.tema-vidrio .mud-main-content .mud-tabs.vidrio-cajon {
    border: 1px solid var(--vidrio-borde);
    border-radius: 20px;
    box-shadow: var(--vidrio-sombra);
    /* Sin backdrop-filter en las superficies de la página: detrás solo hay el fondo ya difuminado (no se notaría) y,
       sobre todo, un backdrop-filter convierte la tarjeta en el marco de los elementos position:fixed de dentro
       (el calendario del filtro de fechas aparecía desplazado al tener una ficha abierta). La barra, el menú
       lateral, los desplegables y los diálogos sí lo conservan. */
}

/* Superficie dentro de superficie: sin doble vidrio ni doble sombra */
.tema-vidrio .mud-main-content .mud-paper .mud-paper:not(.mud-paper-outlined),
.tema-vidrio .mud-main-content .mud-paper .mud-table,
.tema-vidrio .mud-main-content .mud-tabs .mud-table {
    background-color: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.tema-vidrio .mud-paper-outlined {
    border-color: rgba(21, 36, 26, .10);
    border-radius: 16px;
    background-color: rgba(255, 255, 255, .45);
}

/* ---- Tablas ---- */
.tema-vidrio .mud-table-head .mud-table-cell {
    font-weight: 600;
    color: rgba(21, 36, 26, .72);
    background-color: transparent;
}

.tema-vidrio .mud-table-body .mud-table-row { transition: background-color .15s ease; }
.tema-vidrio .mud-table-pagination { background-color: transparent; }
.tema-vidrio .mud-simple-table table { background-color: transparent; }

/* ---- Ficha desplegada bajo su fila (listados) ---- */
.fila-seleccionada > td { background-color: rgba(46, 139, 58, .09); font-weight: 500; }
.fila-seleccionada { scroll-margin-top: 76px; }
.vidrio-cajon { scroll-margin-top: 76px; } /* "Mis grupos" / "Ver todas": la página se lleva hasta el cajón */ /* al llevarla arriba, que no quede bajo la barra */
.fila-desplegada > td { padding: 6px 4px 18px !important; border-bottom: none !important; }
.fila-desplegada .ficha-incidencia { animation: despliega .28s var(--curva, ease) both; transform-origin: top center; }

@keyframes despliega {
    from { opacity: 0; transform: translateY(-8px) scaleY(.98); }
    to   { opacity: 1; transform: none; }
}

/* La ficha va dentro del papel del listado: sus tarjetas se ven como tarjetas, no se funden con el fondo */
.tema-vidrio .mud-main-content .mud-paper .ficha-incidencia .mud-paper,
.tema-vidrio .mud-main-content .vidrio-cajon .ficha-incidencia .mud-paper {
    background-color: rgba(255, 255, 255, .62);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(20, 50, 30, .08);
}

/* La fila que contiene la ficha no es una fila de datos: sin el tinte de "hover" de la tabla */
.tema-vidrio .mud-table-hover .mud-table-body .fila-desplegada:hover,
.tema-vidrio .mud-table-hover .mud-table-body .fila-desplegada:hover > td { background-color: transparent !important; }

/* Formulario que se despliega encima de los listados (nueva incidencia del cliente) */
.panel-desplegable { animation: despliega .3s var(--curva, ease) both; transform-origin: top center; }

/* Tarjetas de "Mis grupos" */
.grupo-tarjeta { height: 100%; transition: transform .18s var(--curva, ease), box-shadow .18s ease; }
.grupo-tarjeta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 50, 30, .08); }

/* Con una ficha abierta, espacio extra al final: así hasta la última fila puede subir bajo la barra */
.mud-main-content:has(.fila-desplegada) { padding-bottom: 40vh; }

/* ---- Fila de filtros dentro de la cabecera de la tabla (cada filtro bajo su columna) ---- */
/* Solo la tabla del listado (">"): la ficha desplegada lleva sus propias tablas dentro y no deben heredar esto */
.tabla-con-filtros > .mud-table-container > table { table-layout: fixed; }
.tabla-con-filtros .fila-filtros .mud-table-cell { padding: 0 8px 6px !important; font-weight: 400; vertical-align: top; }
/* Móvil (MudTable en tarjetas): sin columnas fijas, que aplastaban las tarjetas al desplegar una ficha */
@media (max-width: 600px) {
    .tabla-con-filtros > .mud-table-container > table { table-layout: auto; }
    .filtros-movil { display: flex !important; }
}
.tabla-con-filtros .fila-filtros .mud-input-control { margin-top: 0; }
.tabla-con-filtros > .mud-table-container > table > .mud-table-head .mud-table-cell { overflow: hidden; }

/* Calendario del filtro de fechas: opaco aunque esté dentro de una tarjeta (si no, se transparentaba la tabla) */
.tema-vidrio .mud-picker .mud-picker-container,
.tema-vidrio .mud-picker .mud-picker-paper,
.tema-vidrio .mud-picker .mud-paper,
.tema-vidrio .mud-main-content .mud-paper .mud-picker .mud-paper:not(.mud-paper-outlined) {
    background-color: rgba(255, 255, 255, .98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.tema-vidrio .mud-picker .mud-overlay .mud-paper { box-shadow: 0 30px 70px rgba(20, 50, 30, .22) !important; border-radius: 18px; }

/* La ficha desplegada nunca más ancha que la tabla: si no, su contenido (p. ej. la barra de pestañas, que no se parte)
   obligaba a la tabla a crecer y en pantallas estrechas las filas en tarjetas se cortaban por la derecha */
.tabla-con-filtros > .mud-table-container { container-type: inline-size; }
.tabla-con-filtros .fila-desplegada > td > .ficha-incidencia { max-width: 100cqw; }

/* Fila recién recogida: se lleva a la vista y se resalta un momento para no perder el sitio */
.fila-recogida { scroll-margin-top: 76px; }
.fila-recogida > td { animation: resalta-fila 1.6s ease-out both; }
@keyframes resalta-fila {
    0%, 30% { background-color: rgba(46, 139, 58, .16); }
    100% { background-color: transparent; }
}

/* Con columnas de ancho fijo, un texto sin espacios (un correo, un nombre de grupo largo) se parte solo si se le deja: si no,
   se monta sobre la columna de al lado. Solo en las columnas de texto libre y, como último recurso, en las de códigos
   (una serie que no cabe). Las fechas se parten por la barra. La etiqueta de la tarjeta (móvil) nunca se parte. */
.tabla-con-filtros > .mud-table-container > table > .mud-table-body > tr > td.mud-table-cell.celda-texto { overflow-wrap: anywhere; }
.tabla-con-filtros > .mud-table-container > table > .mud-table-body > tr > td.mud-table-cell.celda-codigo { overflow-wrap: break-word; }
.tabla-con-filtros > .mud-table-container > table > .mud-table-body > tr > td.mud-table-cell::before { overflow-wrap: normal; flex-shrink: 0; }

/* Tablet y portátil pequeño: menos relleno lateral para que los estados cortos y una serie de 8 caracteres quepan en una línea */
@media (min-width: 600px) and (max-width: 1279.98px) {
    .tabla-con-filtros > .mud-table-container > table > * > tr:not(.fila-desplegada) > .mud-table-cell { padding-inline: 10px; }
}

/* El número de incidencia (y su reparación) no se parte en dos líneas.
   Solo celdas de datos (MudTd): el td de la ficha desplegada también es el primero de su fila y no debe heredarlo */
.tabla-con-filtros > .mud-table-container > table > .mud-table-body > tr > td.mud-table-cell:first-child { white-space: nowrap; }

/* ---- Avisos de "Mis incidencias" (área privada) ---- */
.menu-avisos { min-width: 320px; max-width: min(420px, 94vw); }
.avisos-cabecera { padding: 12px 18px 10px; }
.avisos-titulo { font-weight: 600; }
.avisos-subtitulo { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.avisos-vacio { padding: 18px; font-size: .9rem; color: var(--mud-palette-text-secondary); }
.aviso-punto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: transparent; }
.aviso-nuevo .aviso-punto { background: var(--naranja, #F57C00); box-shadow: 0 0 0 3px rgba(245, 124, 0, .18); }
.aviso-nuevo b { color: #1B5424; }
.aviso-estado { font-size: .85rem; color: var(--mud-palette-text-secondary); }
.aviso-fecha { font-size: .75rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }

/* ---- Diálogos: cabecera con icono y campos agrupados en tarjetas ---- */
.dialogo-cabecera { display: flex; align-items: center; gap: 14px; }
.dialogo-icono {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #36A548, #1F6B2A);
    box-shadow: 0 6px 14px rgba(46, 139, 58, .28);
}
.dialogo-titulo { font-family: 'Montserrat', 'Roboto', sans-serif; font-weight: 600; font-size: 1.15rem; line-height: 1.25; }
.dialogo-subtitulo { font-size: .82rem; color: var(--mud-palette-text-secondary); }
.dialogo-seccion {
    background: rgba(255, 255, 255, .62);
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 16px;
    padding: 12px 16px 16px;
    margin-bottom: 12px;
    box-shadow: 0 4px 14px rgba(20, 50, 30, .05);
}
.dialogo-seccion:last-child { margin-bottom: 0; }
.dialogo-seccion-titulo { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; color: #1B5424; margin-bottom: 4px; }
.dialogo-nota { font-size: .85rem; color: var(--mud-palette-text-secondary); margin-bottom: 10px; }
.tema-vidrio .mud-dialog .mud-dialog-title { padding-bottom: 8px; }
.tema-vidrio .mud-dialog .mud-dialog-actions { padding: 12px 24px 18px; gap: 8px; }

.mud-simple-table td.ficha-etiqueta, .ficha-etiqueta { font-weight: 600; white-space: nowrap; width: 1%; color: rgba(21, 36, 26, .72); }

/* ---- Botones ---- */
.tema-vidrio .mud-button-root { transition: transform .18s var(--curva), box-shadow .18s var(--curva), background-color .18s ease; }

.tema-vidrio .mud-button-filled.mud-button-filled-primary {
    background: linear-gradient(135deg, #36A548 0%, #2E8B3A 45%, #1F6B2A 100%);
    box-shadow: 0 6px 16px rgba(46, 139, 58, .28);
}

.tema-vidrio .mud-button-filled.mud-button-filled-primary:hover:not(.mud-disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(46, 139, 58, .34);
}

.tema-vidrio .mud-button-filled:active:not(.mud-disabled) { transform: translateY(0) scale(.99); }
.tema-vidrio .mud-button-filled.mud-button-filled-primary:disabled,
.tema-vidrio .mud-button-filled.mud-button-filled-primary.mud-disabled {
    background-image: none;
    box-shadow: none;
}

.tema-vidrio .mud-button-outlined { background-color: rgba(255, 255, 255, .45); }

/* ---- Campos ---- */
.tema-vidrio .mud-input.mud-input-outlined .mud-input-outlined-border { transition: border-color .18s ease, box-shadow .18s ease; }
.tema-vidrio .mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border { box-shadow: 0 0 0 3px rgba(46, 139, 58, .14); }

/* ---- Avisos, chips, pestañas ---- */
.tema-vidrio .mud-alert { border-radius: 14px; }
.tema-vidrio .mud-chip { transition: background-color .15s ease, box-shadow .15s ease; }
.tema-vidrio .mud-tabs-tabbar { background-color: transparent; }
.tema-vidrio .mud-tabs.vidrio-cajon { background-color: var(--mud-palette-surface); overflow: clip; padding: 6px 18px 14px; } /* clip, no hidden: que el desplazamiento automático no lo "desplace" por dentro */
.tema-vidrio .mud-tabs.vidrio-cajon .mud-tabs-panels { background-color: transparent; }
.tema-vidrio .mud-expand-panel { background-color: rgba(255, 255, 255, .5); }

/* ---- Desplegables, menús y selector de fechas: casi opacos (se leen encima de cualquier cosa) ----
   Los tooltips no: tienen su propio fondo oscuro (si no, texto blanco sobre blanco). */
.tema-vidrio .mud-popover:not(.mud-tooltip):not(:has(> .mud-tooltip)) {
    background-color: rgba(255, 255, 255, .94);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-radius: 14px;
    /* Anillo con sombra y no borde: un borde sumaba 2px al max-height de MudBlazor y salía un segundo scroll */
    box-shadow: 0 0 0 1px var(--vidrio-borde), 0 18px 44px rgba(20, 50, 30, .16);
}

/* ---- Diálogos ---- */
.tema-vidrio .mud-dialog {
    background-color: rgba(255, 255, 255, .90);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid var(--vidrio-borde);
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(20, 50, 30, .22);
}

.tema-vidrio .mud-overlay .mud-overlay-dark {
    background-color: rgba(15, 30, 20, .28);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* ---- Transición entre pantallas (no en la primera carga) ---- */
.tema-vidrio .pagina-entra-a { animation: pagina-entra-a .22s var(--curva) both; }
.tema-vidrio .pagina-entra-b { animation: pagina-entra-b .22s var(--curva) both; }

/* Dos copias idénticas: alternar el nombre reinicia la animación sin recrear la pantalla */
@keyframes pagina-entra-a {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
@keyframes pagina-entra-b {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Navegadores sin backdrop-filter: superficies casi opacas */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tema-vidrio { --mud-palette-surface: rgba(255, 255, 255, .95); --mud-palette-drawer-background: rgba(255, 255, 255, .95); }
}

@media (prefers-reduced-motion: reduce) {
    .tema-vidrio .pagina-entra-a, .tema-vidrio .pagina-entra-b, .fila-desplegada .ficha-incidencia, .panel-desplegable, .grupo-tarjeta, .fila-recogida > td { animation: none; transition: none; }
    .tema-vidrio .mud-nav-link, .tema-vidrio .mud-button-root { transition: none; }
}