/* ═══════════════════════════════════════════════════════════════════════════
   PeluGes · Sistema de diseño "Crystal"  (inspirado en iOS 26 Liquid Glass)
   ───────────────────────────────────────────────────────────────────────────
   Capas:  1) Tokens (claro :root  ·  oscuro [data-theme="dark"])
           2) Base + fondo ambiental
           3) Material glass (cristal en los marcos; contenido nítido y sólido)
           4) Movimiento (curvas/duraciones de Emil Kowalski)
           5) Overrides MudBlazor (tokenizados → soportan claro/oscuro)
           6) Login/Auth · Reconexión · Errores
           7) Accesibilidad (reduced-motion · reduced-transparency · @supports)
   El modo oscuro lo fija el servidor (data-theme en <html>, desde cookie) +
   MudThemeProvider PaletteDark → sin flash. Todo el JS vive en peluges-helpers.js.
   ═══════════════════════════════════════════════════════════════════════════*/

/* ─── 1 · TOKENS — CLARO ──────────────────────────────────────────────────── */
:root {
    /* superficies y texto */
    --bg:            #ECE3EE;
    --surface:       #FFFFFF;
    --surface-2:     #F8F4F7;   /* cabeceras de tabla, paginación */
    --surface-3:     #FDFBFE;
    --text:          #2B2330;
    --text-muted:    #6E6578;   /* oscurecido ligeramente → AA sobre cristal */
    --text-faint:    #9A8FA3;
    --border:        #EBE4EA;
    --border-strong: #D9CFDD;

    /* marca */
    --primary:        #6A2C70;
    --primary-strong: #562359;
    --primary-soft:   #8A4F90;
    --primary-tint:   #9E6FA5;
    --accent:         #C2904A;
    --accent-strong:  #A9762F;
    --on-primary:     #FFFFFF;

    /* semánticos */
    --info: #3F73C4; --success: #2E8B57; --warning: #C77D15; --error: #C0392B;

    /* estados */
    --row-hover:  rgba(106,44,112,.045);
    --focus-ring: rgba(106,44,112,.16);
    /* Perfilado de 1px del item activo del menú (sustituye al filete lateral grueso) */
    --nav-active-ring: rgba(106,44,112,.38);
    --focus-line: #8A4F90;

    /* "washes" — fondos tintados sutiles para iconos/chips (Inicio: KPIs, accesos rápidos, citas) */
    --wash-primary-strong: rgba(106,44,112,.12);
    --wash-info-strong:    rgba(63,115,196,.12);
    --wash-accent-strong:  rgba(194,144,74,.12);
    --wash-primary-soft:   rgba(106,44,112,.10);
    --wash-primary-faint:  rgba(106,44,112,.09);

    /* Chips del TPV (puntos de fidelización / deuda del cliente) */
    --chip-points-bg:     rgba(106,44,112,.10);
    --chip-points-border: rgba(106,44,112,.20);
    --chip-debt-bg:       rgba(192,57,43,.08);
    --chip-debt-border:   rgba(192,57,43,.20);

    /* inputs estilo "filled" sutil */
    --input-bg:       rgba(255,255,255,.55);
    --input-bg-hover: rgba(255,255,255,.78);
    --input-border:   rgba(43,35,48,.12);

    /* cristal */
    --glass-bg:        rgba(255,255,255,.38);
    --glass-bg-strong: rgba(255,255,255,.60);
    /* Escala unica de cristal: MISMO material, cuatro grados de opacidad segun cuanto texto
       tenga que aguantar encima. De mas transparente a mas opaco:
         panel  → tarjetas y paneles de contenido
         chrome → barra superior y menu lateral (marco de la app)
         float  → dialogos, menus y popovers (flotan sobre contenido: necesitan mas cuerpo)
         data   → tablas y rejillas (texto denso: la legibilidad manda sobre el efecto) */
    --glass-sheen: linear-gradient(150deg, rgba(255,255,255,.20), rgba(255,255,255,0) 46%);
    --glass-panel:  var(--glass-sheen), rgba(255,255,255,.44);
    --glass-chrome: var(--glass-sheen), rgba(255,255,255,.60);
    --glass-float:  var(--glass-sheen), rgba(255,255,255,.70);
    --glass-data:   var(--glass-sheen), rgba(255,255,255,.78);
    --glass-data-head: rgba(255,255,255,.42);
    /* Elementos ANIDADOS dentro de una superficie de cristal (celdas, fichas del TPV, filas
       del ticket). Llevan el tinte del material pero NO backdrop-filter: apilar desenfoques
       ensucia el texto y, con 30 fichas en pantalla, castiga a un TPV tactil. */
    --tint-raised: rgba(255,255,255,.58);
    --tint-sunken: rgba(255,255,255,.34);
    --glass-border:    rgba(255,255,255,.78);
    --glass-highlight: rgba(255,255,255,.92);
    --glass-hairline:  rgba(43,35,48,.10);
    --glass-blur:      22px;
    --glass-saturate:  180%;
    /* Cristal premium: vibrancy comedida (HIG ≈ restraint) + canto de lente dimensional (borde luminoso arriba, profundidad abajo) */
    --glass-filter:    blur(30px) saturate(190%) brightness(1.06);
    --glass-edge:      inset 0 1.5px 0.5px rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,.34), inset 0 -1px 0 rgba(255,255,255,.42), inset 0 -22px 34px -26px rgba(43,35,48,.26);

    /* sombras (suaves, en capas) */
    --shadow-1: 0 1px 2px rgba(43,35,48,.06), 0 1px 3px rgba(43,35,48,.05);
    --shadow-2: 0 2px 4px rgba(43,35,48,.06), 0 4px 12px rgba(43,35,48,.06);
    --shadow-3: 0 4px 8px rgba(43,35,48,.07), 0 8px 20px rgba(43,35,48,.07);
    --shadow-4: 0 6px 12px rgba(43,35,48,.08), 0 12px 28px rgba(43,35,48,.08);
    --shadow-5: 0 12px 24px rgba(43,35,48,.10), 0 24px 56px rgba(43,35,48,.12);
    --shadow-glass: 0 8px 32px rgba(43,35,48,.12), 0 2px 8px rgba(43,35,48,.06);
    --shadow-primary: 0 4px 14px rgba(106,44,112,.30);

    /* fondo ambiental — el cristal SOLO se ve si detras hay color y detalle que refractar.
       Manchas medianas (no gigantes: una mancha de 900px desenfocada 26px es identica a si
       misma) y con matices distintos, para que el canto del panel mezcle color visiblemente. */
    --ambient:
        radial-gradient(560px 520px at 12% 6%,   rgba(106,44,112,.34), transparent 62%),
        radial-gradient(420px 400px at 34% 30%,  rgba(63,115,196,.16), transparent 60%),
        radial-gradient(520px 480px at 84% 12%,  rgba(194,144,74,.28), transparent 62%),
        radial-gradient(460px 440px at 66% 52%,  rgba(158,111,165,.24), transparent 62%),
        radial-gradient(600px 560px at 22% 84%,  rgba(138,79,144,.30), transparent 64%),
        radial-gradient(500px 470px at 92% 78%,  rgba(106,44,112,.22), transparent 62%);
    /* Grano fino: detalle de alta frecuencia. Es lo que hace VISIBLE el desenfoque —
       fuera del panel se ve el grano, a traves del panel se ve liso. Sin esto, el
       backdrop-filter no tiene nada que suavizar y el cristal parece pintura plana. */
    --grain-opacity: .085;

    /* radios concéntricos */
    --radius-sm: 9px; --radius-md: 12px; --radius-lg: 18px;
    --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 999px;

    /* movimiento (Emil) */
    --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer:   cubic-bezier(0.32, 0.72, 0, 1);
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --dur-press: 140ms; --dur-base: 180ms; --dur-pop: 200ms; --dur-overlay: 280ms;

    /* alias de compatibilidad (referencias antiguas) */
    --peluges-ease:     var(--ease-standard);
    --peluges-ease-out: var(--ease-out);
    --peluges-dur:      var(--dur-base);

    color-scheme: light;
}

/* ─── 1 · TOKENS — OSCURO ─────────────────────────────────────────────────── */
[data-theme="dark"] {
    --bg:            #141019;
    --surface:       #1D1825;
    --surface-2:     #251E30;
    --surface-3:     #1A1522;
    --text:          #F1EAF4;
    --text-muted:    #B6ACC1;
    --text-faint:    #897E96;
    --border:        #2E2738;
    --border-strong: #3A3247;

    --primary:        #8E4F97;   /* texto blanco legible encima (AA) */
    --primary-strong: #7A3E83;
    --primary-soft:   #CDA2D4;   /* enlaces/iconos sobre superficies oscuras */
    --primary-tint:   #8E7A96;
    --accent:         #D8A95F;
    --accent-strong:  #E0B978;
    --on-primary:     #FFFFFF;

    --info: #6FA0E0; --success: #5CB985; --warning: #E0A640; --error: #E06B5E;

    --row-hover:  rgba(205,162,212,.10);
    --focus-ring: rgba(205,162,212,.30);
    --nav-active-ring: rgba(205,162,212,.42);
    --focus-line: #CDA2D4;

    --wash-primary-strong: rgba(205,162,212,.16);
    --wash-info-strong:    rgba(111,160,224,.16);
    --wash-accent-strong:  rgba(216,169,95,.16);
    --wash-primary-soft:   rgba(205,162,212,.14);
    --wash-primary-faint:  rgba(205,162,212,.12);

    --chip-points-bg:     rgba(142,79,151,.18);
    --chip-points-border: rgba(142,79,151,.30);
    --chip-debt-bg:       rgba(224,107,94,.12);
    --chip-debt-border:   rgba(224,107,94,.25);

    --input-bg:       rgba(255,255,255,.05);
    --input-bg-hover: rgba(255,255,255,.09);
    --input-border:   rgba(255,255,255,.12);

    --glass-bg:        rgba(28,22,38,.55);
    --glass-bg-strong: rgba(32,25,43,.78);
    --glass-sheen: linear-gradient(150deg, rgba(255,255,255,.09), rgba(255,255,255,0) 46%);
    --glass-panel:  var(--glass-sheen), rgba(44,35,58,.52);
    --glass-chrome: var(--glass-sheen), rgba(38,30,50,.66);
    --glass-float:  var(--glass-sheen), rgba(42,33,55,.76);
    --glass-data:   var(--glass-sheen), rgba(34,27,45,.82);
    --glass-data-head: rgba(255,255,255,.05);
    --tint-raised: rgba(255,255,255,.07);
    --tint-sunken: rgba(0,0,0,.16);
    --glass-border:    rgba(255,255,255,.10);
    --glass-highlight: rgba(255,255,255,.12);
    --glass-hairline:  rgba(0,0,0,.35);
    --glass-filter:    blur(30px) saturate(180%) brightness(1.05);
    --glass-edge:      inset 0 1.5px 0.5px rgba(255,255,255,.34), inset 0 0 0 1px rgba(255,255,255,.10), inset 0 -1px 0 rgba(255,255,255,.10), inset 0 -22px 34px -26px rgba(0,0,0,.42);

    --shadow-1: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.30);
    --shadow-2: 0 2px 6px rgba(0,0,0,.40), 0 6px 16px rgba(0,0,0,.34);
    --shadow-3: 0 4px 10px rgba(0,0,0,.44), 0 10px 24px rgba(0,0,0,.40);
    --shadow-4: 0 8px 16px rgba(0,0,0,.48), 0 16px 36px rgba(0,0,0,.44);
    --shadow-5: 0 16px 32px rgba(0,0,0,.55), 0 28px 64px rgba(0,0,0,.55);
    --shadow-glass: 0 12px 40px rgba(0,0,0,.50), 0 2px 10px rgba(0,0,0,.40);
    --shadow-primary: 0 4px 16px rgba(0,0,0,.45);

    --ambient:
        radial-gradient(560px 520px at 12% 6%,   rgba(176,108,186,.30), transparent 62%),
        radial-gradient(420px 400px at 34% 30%,  rgba(63,115,196,.16), transparent 60%),
        radial-gradient(520px 480px at 84% 12%,  rgba(194,144,74,.16), transparent 62%),
        radial-gradient(460px 440px at 66% 52%,  rgba(138,79,144,.22), transparent 62%),
        radial-gradient(600px 560px at 22% 84%,  rgba(106,44,112,.34), transparent 64%),
        radial-gradient(500px 470px at 92% 78%,  rgba(90,52,120,.26), transparent 62%);
    --grain-opacity: .06;

    color-scheme: dark;
}

/* ─── 2 · BASE + FONDO AMBIENTAL ──────────────────────────────────────────── */
html, body {
    font-family: 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
}
/* Capa ambiental FIJA detrás de todo (MudBlazor no puede taparla) → el cristal refracta color */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--ambient);
    pointer-events: none;
}
/* Grano: textura de alta frecuencia que el backdrop-filter SI puede suavizar. Es lo que
   delata el cristal — el ojo compara el grano crudo del fondo con el liso del panel.
   SVG en data: URI (permitido por la CSP: img-src 'self' data: blob:). */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--grain-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* El layout deja ver el fondo ambiental detrás del contenido y del cristal */
.mud-layout, .mud-main-content, .mud-drawer-content { background: transparent !important; }

/* Cifras alineadas (dinero, tablas, KPIs) */
.mud-table-cell, .peluges-num, .mud-input-slot input { font-variant-numeric: tabular-nums; }

/* Scrollbar discreto */
::-webkit-scrollbar             { width: 8px; height: 8px; }
::-webkit-scrollbar-track       { background: transparent; }
::-webkit-scrollbar-thumb       { background: var(--border-strong); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--primary-tint); }

/* Focus visible accesible */
:focus-visible {
    outline: 2px solid var(--focus-line);
    outline-offset: 2px;
    border-radius: 6px;
}
h1:focus { outline: none; }

::selection { background: rgba(106,44,112,.18); }

/* ─── 3 · MATERIAL GLASS ──────────────────────────────────────────────────── */
/* Utilidad reutilizable: cristal de firma para superficies flotantes/marco.    */
.peluges-glass,
.peluges-glass-strong {
    background: var(--glass-panel);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass), var(--glass-edge);
    border-radius: var(--radius-lg);
}
.peluges-glass-strong { background: var(--glass-float); }

/* ─── 4 · MOVIMIENTO GLOBAL ───────────────────────────────────────────────── */
.mud-paper, .mud-card { transition: box-shadow var(--dur-base) var(--ease-standard); }

.mud-button-root {
    transition:
        background-color var(--dur-base) var(--ease-standard),
        box-shadow       var(--dur-base) var(--ease-standard),
        transform        var(--dur-press) var(--ease-out),
        color            var(--dur-base) var(--ease-standard) !important;
}
/* Feedback de pulsación (funciona también en táctil) */
.mud-button-root:active { transform: scale(.97); }

/* Lifts/hover SOLO en dispositivos con puntero fino (no en el TPV táctil) */
@media (hover: hover) and (pointer: fine) {
    a .mud-paper:hover,
    a .mud-card:hover,
    .mud-card-action-area:hover .mud-card {
        box-shadow: var(--shadow-3) !important;
        transform: translateY(-1px);
        transition: box-shadow var(--dur-base) var(--ease-out),
                    transform   var(--dur-base) var(--ease-out);
    }
    .mud-button-root.mud-button-filled:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-primary) !important;
    }
    .mud-button-root.mud-button-filled:active { transform: translateY(0) scale(.985); box-shadow: none !important; }
}

/* Botones rellenos estilo iOS: sheen superior + realce interior + sombra suave (cualquier color) */
.mud-button-root.mud-button-filled {
    background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 12px -2px rgba(43,35,48,.16) !important;
}

/* ─── 5 · OVERRIDES MUDBLAZOR ─────────────────────────────────────────────── */

/* Elevaciones → escala de sombra tokenizada */
.mud-elevation-1 { box-shadow: var(--shadow-1) !important; }
.mud-elevation-2 { box-shadow: var(--shadow-2) !important; }
.mud-elevation-3 { box-shadow: var(--shadow-3) !important; }
.mud-elevation-4 { box-shadow: var(--shadow-4) !important; }

/* Paper/cards sólidos y nítidos (el contenido NO es cristal) */
/* Paneles/tarjetas: cristal translúcido estilo iOS (como el login) → muestran el color del fondo */
.mud-paper {
    background: var(--glass-panel);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    color: var(--text);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-3), var(--glass-edge) !important;
}

/* — App bar: cristal de firma — */
.peluges-appbar.mud-appbar {
    background: var(--glass-chrome) !important;
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border-bottom: 1px solid var(--glass-border) !important;
    box-shadow: 0 12px 32px -16px rgba(43,35,48,.24), inset 0 1px 0 var(--glass-highlight) !important;
    color: var(--text) !important;
}

/* — Drawer: panel de cristal pegado al borde —
     OJO: la clase la pone MudBlazor EN el propio .mud-drawer, no en un ancestro. El selector
     ".peluges-drawer .mud-drawer" no casaba con nada y el menu se quedaba en blanco opaco. */
.mud-drawer.peluges-drawer {
    background: var(--glass-chrome) !important;
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border-right: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-edge) !important;
}

/* — Diálogos / menús / popovers: cristal MÁS opaco (legibilidad) + entrada — */
.mud-dialog {
    position: relative;
    overflow: hidden;                       /* contiene el reflejo y limpia las esquinas redondeadas */
    background: var(--glass-float) !important;
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-5), var(--glass-edge) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text);
}
/* Reflejo especular: luz entrando por la parte superior del vidrio (como en el login) */
.mud-dialog::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 60%;
    background:
        radial-gradient(120% 80% at 30% -8%, rgba(255,255,255,.55), transparent 64%),
        linear-gradient(180deg, rgba(255,255,255,.30), transparent 70%);
    pointer-events: none; z-index: 0;
}
/* Barrido de luz diagonal sutil sobre el canto superior */
.mud-dialog::after {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-highlight) 30%, var(--glass-highlight) 70%, transparent);
    pointer-events: none; z-index: 1;
}
.mud-dialog > * { position: relative; z-index: 1; }

[data-theme="dark"] .mud-dialog::before {
    background:
        radial-gradient(120% 80% at 30% -8%, rgba(255,255,255,.16), transparent 64%),
        linear-gradient(180deg, rgba(255,255,255,.08), transparent 70%);
}
.mud-dialog-title   { font-weight: 700 !important; font-size: 1.05rem !important; letter-spacing: -.01em; padding: 14px 24px 2px !important; }
.mud-dialog-content { padding: 0 24px 16px !important; }
/* Barra de pestañas pegada al título (sin aire muerto bajo el encabezado) */
.mud-dialog .mud-tabs-toolbar { margin-top: 0 !important; }
/* Botones de acción en la barra de pestañas: en una sola línea, anchura justa */
.dlg-action-btn, .dlg-action-btn * { white-space: nowrap !important; }
.dlg-action-btn { flex: 0 0 auto !important; min-width: max-content !important; }
.mud-dialog-actions { padding: 12px 20px 16px !important; border-top: 1px solid var(--border) !important; gap: 8px; }

/* Densidad de formularios en diálogos: gutter de rejilla 24px → 12px (menos aire vertical, menos scroll) */
.mud-dialog .mud-grid.mud-grid-spacing-xs-6 { margin: -6px; width: calc(100% + 12px); }
.mud-dialog .mud-grid.mud-grid-spacing-xs-6 > .mud-grid-item { padding: 6px; }
/* Sin reservar la línea de ayuda vacía bajo cada campo (global → recupera mucho espacio vertical) */
.mud-input-control:not(.mud-input-error) .mud-input-helper-text:empty { display: none; }

/* ═══ TPV — layout + densidad (GLOBAL: se entrega siempre y alcanza a los internos de MudBlazor) ═══ */
.pos-grow { display: flex; flex-direction: column; }

@media (min-width: 960px) {
    /* App-shell de altura fija; la altura exacta la afina peluges.fitPosScreen(). */
    .pos-screen { height: calc(100dvh - 150px); overflow: hidden; }
    .pos-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        grid-template-rows: minmax(0, 1fr);   /* fila acotada → las columnas scrollean dentro */
        gap: 10px; height: 100%; min-height: 0;
    }
    .pos-col { min-height: 0; height: 100%; }
    /* Izquierda: empleado (fijo) + catálogo que llena la altura con su rejilla scrollable. */
    .pos-left-scroll { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
    .pos-left-scroll > .pos-catalog { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
    .pos-catalog .mud-tabs        { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
    .pos-catalog .mud-tabs-panels { flex: 1 1 0; min-height: 0; overflow-y: auto; }
    /* Derecha: cliente (fijo) · CARRITO (protagonista, crece+scroll) · totales/pagos/Cobrar (fijos). */
    .pos-col-right { display: flex; flex-direction: column; min-height: 0; overflow: hidden; gap: 4px; }
    .pos-col-right > *         { flex: 0 0 auto; margin-bottom: 0 !important; } /* el gap separa */
    .pos-col-right > .pos-grow { flex: 1 1 auto; min-height: 200px; }
    .pos-cart-scroll           { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}

/* Resalte breve del campo al que se salta tras un intento de guardado invalido.
   El movimiento lo hace scrollIntoView; esto solo dice "es este". */
.pg-error-flash {
    animation: pg-error-flash 1.4s var(--ease-out);
    border-radius: var(--radius-sm);
}
@keyframes pg-error-flash {
    0%   { box-shadow: 0 0 0 0 rgba(192,57,43,.45); }
    35%  { box-shadow: 0 0 0 6px rgba(192,57,43,.18); }
    100% { box-shadow: 0 0 0 0 rgba(192,57,43,0); }
}
@media (prefers-reduced-motion: reduce) {
    .pg-error-flash { animation: none; box-shadow: 0 0 0 2px rgba(192,57,43,.45); }
}

/* Pestañas del catálogo del TPV en móvil.
   Solo hay dos ("Servicios" y "Productos") y juntas ocupan 320px, pero MudBlazor
   mete dos flechas de desplazamiento de 48px que dejan el contenido en 244px con
   overflow:hidden: la segunda pestaña se partía por la mitad y se leía "PROI".
   Sin flechas caben enteras; el desplazamiento táctil queda como red de seguridad
   por si algún día las etiquetas crecen. */
@media (max-width: 599.98px) {
    .pos-catalog .mud-tabs-scroll-button { display: none !important; }
    .pos-catalog .mud-tabs-tabbar-content { overflow-x: auto; scrollbar-width: none; }
    .pos-catalog .mud-tabs-tabbar-content::-webkit-scrollbar { display: none; }
}

/* Densidad de la columna del ticket — pie compacto para cederle altura al carrito */
.pos-col-right .mud-paper                { padding: 4px 10px !important; }
.pos-col-right .mud-input.mud-input-text { min-height: 32px; padding-top: 0 !important; padding-bottom: 0 !important; }
.pos-col-right .mud-input-control        { margin-top: 0 !important; }
.pos-col-right .mud-divider              { margin-top: 3px !important; margin-bottom: 3px !important; }
.pos-col-right .mud-input-helper-text    { margin-top: 1px; line-height: 1.2; }
.pos-col-right .pos-totals-total         { font-size: 1.05rem !important; }
.pos-col-right .mud-icon-button          { padding: 4px !important; }
/* Líneas del carrito MUY compactas (clave para que quepan varios artículos sin scroll) */
.pos-cart-line                           { padding: 2px 8px !important; margin-bottom: 4px !important; }
.pos-cart-line .mt-1                     { margin-top: 0 !important; }
.pos-cart-line .mud-text                 { line-height: 1.15; }
.pos-cart-line .mud-icon-button          { padding: 0 !important; }
/* Fila del "2.º empleado": la más alta de cada línea → mínima */
.pos-cart-line .mud-input.mud-input-text { min-height: 20px !important; }   /* selector "2.º empl." */
.pos-cart-line .mud-input-control        { margin-top: 0 !important; }
.pos-cart-line .mud-select .mud-input    { font-size: .76rem; }
.pos-cart-line .mud-select .mud-input-slot { padding-top: 0 !important; padding-bottom: 0 !important; }
.pos-cart-line .mud-input-slot input,
.pos-cart-line .mud-select .mud-select-input { height: 18px !important; }
/* Fila "Dto global": campos pequeños (bajos + letra reducida) pero anchos para no cortar el valor */
.pos-dto-row { margin-top: 2px; }
.pos-dto-row .mud-input.mud-input-text { min-height: 0 !important; height: 24px !important; padding: 0 6px !important; align-items: center; font-size: .8rem; }
.pos-dto-row .mud-input-slot,
.pos-dto-row .mud-input-slot input     { height: 22px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: .8rem !important; }
.pos-dto-row .mud-input-adornment,
.pos-dto-row .mud-input-adornment .mud-text { font-size: .8rem !important; margin-left: 1px !important; }
.pos-col-right .pos-totals-secondary   { line-height: 1.4; }
/* Tarjeta Cliente/Tarifa: equilibrar el aire (los inputs reservan algo arriba → menos padding-top) */
.pos-customer { padding-top: 2px !important; padding-bottom: 6px !important; }

/* Píldoras de familia (GLOBAL: alcanzan el <button> interno del MudButton; el scoped no) */
.pos-family-pill {
    border-radius: var(--radius-pill) !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
    padding: 3px 14px !important;
    min-width: 0 !important;
    height: 30px !important;
    line-height: 1 !important;
    text-transform: none !important;
    transition: background-color var(--dur-base) var(--ease-standard),
                color var(--dur-base) var(--ease-standard),
                border-color var(--dur-base) var(--ease-standard) !important;
}
.pos-family-pill-active {
    background-color: var(--primary) !important;
    color: var(--on-primary) !important;
    border: 1px solid var(--primary) !important;
    box-shadow: 0 2px 8px rgba(106, 44, 112, .26) !important;
}
.pos-family-pill-inactive {
    background: var(--tint-raised) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-strong) !important;   /* borde claro → se ve sobre la tarjeta blanca */
    box-shadow: none !important;
}
.pos-family-pill-inactive:hover {
    background-color: var(--surface-2) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* ═══ Menú lateral — sin scroll lateral + modo rail (solo iconos) ═══ */

/* Sin barra horizontal: los nombres largos pasan a 2 líneas (envuelven dentro del ancho) en vez de
   recortarse o desbordar. Así "Salones (plataforma)", "Agenda de contactos", etc. se ven completos. */
.peluges-drawer .mud-nav-link-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.2;
}
.peluges-drawer .mud-nav-link {
    height: auto;            /* deja crecer el item a 2 líneas */
    align-items: center;
}

/* Menú lateral: la zona de navegación es SU PROPIO hijo flex (scroll interno); el pie (botón
   contraer) es el siguiente ítem flex, así SIEMPRE se ve entero — nunca depende de que el
   framework acierte la altura exacta del drawer (appbar dense + mini variant + clip: cálculo
   frágil). .mud-drawer-content ya es "display:flex;flex-direction:column;height:100%" nativo de
   MudBlazor: solo hace falta que el hijo scrollable declare min-height:0 para poder encogerse. */
.peluges-drawer .mud-drawer-content { overflow: hidden; }
.peluges-drawer-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;          /* reserva el carril → la barra siempre tiene sitio, no tapa el texto */
    scrollbar-width: thin;             /* Firefox */
    scrollbar-color: var(--primary-tint) transparent;
}
/* Barra de scroll del menú: visible y on-brand, para que se vea que hay más opciones debajo */
.peluges-drawer-scroll::-webkit-scrollbar { width: 10px; }
.peluges-drawer-scroll::-webkit-scrollbar-thumb {
    background: var(--primary-tint);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}
.peluges-drawer-scroll::-webkit-scrollbar-thumb:hover { background: var(--primary-soft); background-clip: content-box; }

/* Pie del menú (botón contraer/expandir): último ítem flex, siempre visible entero */
.peluges-drawer-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;   /* flecha en la esquina inferior derecha */
    padding: 4px 6px;
    border-top: 1px solid var(--glass-hairline);
    background: transparent;
}
/* En rail (72px) no hay esquina útil → centrada */
.peluges-rail .peluges-drawer-foot { justify-content: center; padding: 4px 0; }

/* Drawer y contenido se mueven al unísono (Emil: ease-drawer, <300ms).
   Se anima solo margin-left: medido en el navegador, el padding-left del contenido
   vale 0px tanto plegado como desplegado, así que transicionarlo solo añadía una
   segunda propiedad de maquetación por fotograma sin mover nada.
   El ancho del cajón sí cambia (72px ↔ 220px) y empuja el contenido: es un cajón
   de tipo "push", así que la animación de maquetación es inherente al patrón.
   El escape por prefers-reduced-motion está más abajo. */
.mud-drawer.peluges-drawer { transition: width 260ms cubic-bezier(.32, .72, 0, 1) !important; }
.mud-layout .mud-main-content {
    transition: margin-left 260ms cubic-bezier(.32, .72, 0, 1) !important;
}

/* Girar la tablet de horizontal a vertical: el cajón pasa de "mini" a temporal, pero MudBlazor deja
   en el layout la clase de "mini cerrado" y el contenido se queda con 72px de margen fantasma.
   Por debajo de md (960px) el cajón es siempre una capa superpuesta: el contenido no se desplaza. */
@media (max-width: 959.98px) {
    .mud-layout .mud-main-content { margin-left: 0 !important; }
}

/* ── Rail: solo iconos centrados ── */
/* Oculta los textos (link y cabecera de grupo) y el chevron de expandir */
.peluges-rail .mud-nav-link-text,
.peluges-rail .mud-nav-group .mud-nav-link-text,
.peluges-rail .mud-nav-link-expand-icon { display: none !important; }

/* Centra el icono dentro del rail; pastilla centrada con buen target táctil */
.peluges-rail .mud-nav-link,
.peluges-rail .mud-nav-group > .mud-nav-link {
    justify-content: center;
    padding: 7px 0 !important;
    margin: 2px 12px !important;
}
/* La cabecera de grupo (<button>) trae width:100% (=72px) y con los márgenes se desborda 24px →
   su centro cae en 48 en vez de 36. La fijamos al hueco real (72 − 24 de márgenes = 48px) como los
   enlaces <a>, así el icono queda centrado igual que el resto. */
.peluges-rail .mud-nav-group > .mud-nav-link {
    width: calc(100% - 24px) !important;
    min-width: 0 !important;
    box-sizing: border-box;
}
/* Centrado robusto del icono: márgenes automáticos centran el único elemento visible (texto y
   chevron están en display:none). Funciona igual para enlaces <a> y para cabeceras de grupo <button>
   (donde el SVG es hijo directo y el justify-content del contenedor no lo centraba). */
.peluges-rail .mud-nav-link .mud-nav-link-icon {
    min-width: 0 !important;
    margin: 0 auto !important;
}
.peluges-rail .mud-nav-link .mud-icon-root { font-size: 1.3rem !important; }

/* Item activo en rail: pastilla centrada (sin el borde-indicador izquierdo, que descentraría) */
.peluges-rail .mud-nav-link.active {
    border-left: none !important;
    padding-left: 0 !important;
}

/* ── Rail: grupos con submenú como FLYOUT ──────────────────────────────────────
   Con la barra plegada, los grupos se rinden como RailNavGroup → MudMenu, cuyo popover
   vive en la raíz del documento (no lo recorta el overflow del drawer) y sale a la
   derecha del rail. La barra sigue plegada. El icono activador se ve como un item más. */
.peluges-rail .peluges-rail-navgroup { display: block; }
.peluges-rail-activator-wrap,
.peluges-rail-activator-wrap > .mud-menu-activator { display: block; width: 100%; }
.peluges-rail .peluges-rail-activator {
    cursor: pointer;
    justify-content: center;
    padding: 7px 0;
    margin: 2px 12px;
    border-radius: var(--radius-sm);
    transition: background-color var(--dur-base) var(--ease-standard);
}
.peluges-rail .peluges-rail-activator:hover { background-color: var(--row-hover); }
.peluges-rail .peluges-rail-activator .mud-icon-root { color: var(--primary-tint); font-size: 1.3rem; }

/* El flyout (lista dentro del popover). El fondo cristal opaco lo aporta la regla .mud-popover. */
.peluges-rail-flyout.mud-list { padding: 6px; min-width: 222px; }
.peluges-rail-flyout-title {
    font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--primary-tint); padding: 6px 12px 6px;
}
.peluges-rail-flyout-inner .mud-nav-link {
    display: flex; align-items: center; gap: 4px;
    min-height: 36px; padding: 7px 12px; margin: 1px 0;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: .84rem;
    transition: background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.peluges-rail-flyout-inner .mud-nav-link .mud-nav-link-icon { min-width: 30px; }
.peluges-rail-flyout-inner .mud-nav-link .mud-icon-root { color: var(--primary-tint); font-size: 1.15rem; }
.peluges-rail-flyout-inner .mud-nav-link:hover { background-color: var(--row-hover); color: var(--primary-soft); }
.peluges-rail-flyout-inner .mud-nav-link:hover .mud-icon-root { color: var(--primary-soft); }
.peluges-rail-flyout-inner .mud-nav-link.active { background-color: var(--focus-ring); }
.peluges-rail-flyout-inner .mud-nav-link.active,
.peluges-rail-flyout-inner .mud-nav-link.active .mud-icon-root { color: var(--primary-soft) !important; }

@media (prefers-reduced-motion: reduce) {
    .mud-drawer.peluges-drawer,
    .mud-layout .mud-main-content { transition: none !important; }
}
.mud-dialog .mud-tabs-panels .pt-4 { padding-top: 10px !important; }

/* Entrada de overlays (scale .96→1 + opacity, desde origen) — Emil */
.mud-dialog-container .mud-dialog,
.mud-popover.mud-popover-open {
    animation: peluges-pop var(--dur-overlay) var(--ease-out);
    transform-origin: var(--mud-popover-transform-origin, center);
}
@keyframes peluges-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* Popovers (menús, selects, autocompletes) en cristal opaco */
.mud-popover {
    background: var(--glass-float) !important;
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-4), inset 0 1px 0 var(--glass-highlight) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text);
}
.mud-overlay-dialog {
    -webkit-backdrop-filter: blur(10px) saturate(135%);
    backdrop-filter: blur(10px) saturate(135%);
}
.mud-overlay-dialog .mud-overlay-scrim { background-color: rgba(30,22,40,.20) !important; }

/* — Tooltips: sólidos y legibles. El cristal claro de .mud-popover los dejaba blanco-sobre-blanco
   (texto invisible). Fondo oscuro opaco + texto blanco + tamaño contenido (Emil: pequeños, legibles). — */
.mud-popover:has(.mud-tooltip) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.mud-tooltip {
    background: #2e2333 !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    padding: 6px 10px !important;
    font-size: .76rem !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    max-width: 260px !important;
    box-shadow: var(--shadow-3) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.mud-tooltip .mud-tooltip-arrow { color: #2e2333 !important; }

/* — Date/Time pickers: compactos. La cabecera morada (.mud-picker-toolbar) gastaba ~100px
   solo para repetir la fecha que ya está en el campo. La ocultamos → picker mucho más pequeño. — */
.mud-picker-container .mud-picker-toolbar { display: none !important; }
.mud-picker-container .mud-picker-content { padding-top: 8px !important; }
.mud-picker-inline .mud-paper, .mud-picker-popover .mud-paper { border-radius: var(--radius-md) !important; }

/* — Tablas / DataGrid: mismo material, grado "data" (el mas opaco de la escala).
     El cristal se aprecia en el marco y la cabecera; bajo las cifras manda la legibilidad. — */
.mud-table-container, .mud-data-grid {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--glass-border) !important;
    overflow: hidden !important;
    background: var(--glass-data) !important;
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    box-shadow: var(--shadow-1), var(--glass-edge) !important;
}
.mud-table-head .mud-table-cell,
.mud-data-grid .mud-table-head th {
    background: var(--glass-data-head) !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    font-size: .75rem !important;
    letter-spacing: .05em !important;
    text-transform: uppercase;
    padding-top: 12px !important; padding-bottom: 12px !important;
    border-bottom: 1px solid var(--border-strong) !important;
}
.mud-table-row:hover .mud-table-cell { background: var(--row-hover) !important; }
.mud-table-body .mud-table-row .mud-table-cell { border-bottom: 1px solid var(--border) !important; }
.mud-table-cell {
    padding-top: 11px !important; padding-bottom: 11px !important; color: var(--text);
    transition: background var(--dur-base) var(--ease-standard);
}
/* Gutters de borde: las celdas extremas respiran (look de tabla premium) */
.mud-table-cell:first-child  { padding-left: 20px !important; }
.mud-table-cell:last-child   { padding-right: 20px !important; }
/* Columnas numéricas/dinero: alineadas a la derecha + cifras tabulares */
.col-num, .col-num .mud-table-cell-content-inner { text-align: right !important; justify-content: flex-end !important; font-variant-numeric: tabular-nums; }

/* Cristal sobre cristal = doble desenfoque y texto sucio. Cuando la tabla vive dentro de un
   panel, el panel cede: se queda sin material y deja que mande el de la tabla. */
.mud-paper .mud-table-container,
.mud-paper .mud-data-grid {
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--glass-hairline) !important;
    box-shadow: none !important;
}

/* Estado vacío premium (reutilizable en listados) */
.peluges-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 6px; padding: 56px 24px;
}
.peluges-empty-icon {
    font-size: 3rem !important; color: var(--primary-tint);
    background: var(--focus-ring); border-radius: var(--radius-pill);
    padding: 16px; box-sizing: content-box; margin-bottom: 6px;
}
.peluges-empty-sub { color: var(--text-muted); max-width: 360px; }
.mud-table-pagination {
    border-top: 1px solid var(--glass-hairline) !important;
    background: var(--glass-data-head) !important;
    color: var(--text-muted) !important;
    font-size: .82rem !important;
}
.mud-table-pagination .mud-icon-button { color: var(--primary) !important; }

/* — Inputs outlined: radio + anillo de foco — */
.mud-input-outlined .mud-input-outlined-border { border-radius: 14px !important; }
.mud-input-control:focus-within .mud-input-outlined-border {
    border-color: var(--primary-soft) !important;
    box-shadow: 0 0 0 4px var(--focus-ring) !important;
    transition: border-color var(--dur-base) var(--ease-standard),
                box-shadow   var(--dur-base) var(--ease-standard) !important;
}
.mud-input-control:focus-within .mud-input-label { color: var(--primary) !important; }

/* — Inputs "filled" sutil: convertimos la variante Text (subrayado) en un campo con
     superficie tangible (relleno tenue + borde + radio), foco de marca. Da afordancia
     clara sobre el cristal, look formulario premium. Aplica a TextField/Select/
     Autocomplete/DatePicker/NumericField (todos rinden .mud-input-text). — */
.mud-input.mud-input-text {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    padding: 2px 12px;
    transition: background var(--dur-base) var(--ease-standard),
                border-color var(--dur-base) var(--ease-standard),
                box-shadow var(--dur-base) var(--ease-standard);
}
/* Campo de solo lectura (datos del sistema): misma caja que un input para coherencia */
.ro-field { display: flex; flex-direction: column; gap: 0; padding-top: 2px; }
.ro-field-label { font-size: .75rem; color: var(--text-muted); font-weight: 500; line-height: 1.25; padding-left: 2px; }
.ro-field-value {
    min-height: 38px;
    display: flex; align-items: center;
    padding: 2px 12px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    font-size: 1rem; font-weight: 600; color: var(--text);
    font-variant-numeric: tabular-nums;
    cursor: default;
}
/* fuera el subrayado animado: ahora el borde de la caja es el indicador */
.mud-input.mud-input-text.mud-input-underline::before,
.mud-input.mud-input-text.mud-input-underline::after { display: none !important; }
@media (hover: hover) and (pointer: fine) {
    .mud-input-control:not(.mud-disabled):hover .mud-input.mud-input-text { background: var(--input-bg-hover); border-color: var(--border-strong); }
}
.mud-input-control:focus-within .mud-input.mud-input-text {
    background: var(--input-bg-hover);
    border-color: var(--primary-soft);
    box-shadow: 0 0 0 4px var(--focus-ring);
}
/* la etiqueta (placeholder y flotante) alineada con el texto interior del campo */
.mud-input-control .mud-input-label.mud-input-label-inputcontrol { padding-left: 12px; }
.mud-input-error .mud-input.mud-input-text { border-color: var(--error) !important; }

/* — Botón de icono "peligroso" atenuado: solo se pone rojo al pasar el ratón/foco. Evita que una
     papelera roja permanente domine visualmente una tabla entera (p. ej. listado de Clientes). — */
.icon-btn-hover-danger .mud-icon-root { color: var(--text-muted) !important; transition: color var(--dur-base) var(--ease-standard) !important; }
.icon-btn-hover-danger:hover .mud-icon-root,
.icon-btn-hover-danger:focus-visible .mud-icon-root { color: var(--error) !important; }

/* — Chips — */
.mud-chip { font-weight: 600 !important; border-radius: var(--radius-sm) !important; transition: box-shadow var(--dur-base) var(--ease-standard) !important; }

/* — Tabs — */
.mud-tab-active-indicator { background: var(--primary) !important; height: 3px !important; border-radius: 2px 2px 0 0 !important; }
.mud-tab.mud-tab-active    { font-weight: 600 !important; color: var(--primary) !important; }
.mud-tab                   { color: var(--text-muted) !important; transition: color var(--dur-base) var(--ease-standard) !important; }
.mud-tab:hover             { color: var(--primary) !important; }
/* Pestañas integradas en el cristal: barra y paneles transparentes (muestran el panel glass detrás) */
.mud-tabs-toolbar, .mud-tabs-panels, .mud-tab-panel, .mud-tabs-tabbar { background: transparent !important; }

/* — Alerts — */
.mud-alert { border-radius: var(--radius-md) !important; }

/* — Snackbars: entrada slide+fade — */
.mud-snackbar { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-4), inset 0 1px 0 rgba(255,255,255,.5) !important; animation: peluges-snack var(--dur-overlay) var(--ease-out); }
@keyframes peluges-snack { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* — Skeleton: shimmer — */
.mud-skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%) !important;
    background-size: 400% 100% !important;
    animation: peluges-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm) !important;
}
@keyframes peluges-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ─── Utilidades PeluGes ──────────────────────────────────────────────────── */

/* Tarjeta clicable con lift (gated a puntero fino) */
.peluges-clickable { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
    .peluges-clickable {
        transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out) !important;
    }
    .peluges-clickable:hover { transform: translateY(-2px) !important; box-shadow: var(--shadow-4) !important; }
}
.peluges-clickable:active { transform: translateY(0) scale(.99) !important; box-shadow: var(--shadow-1) !important; }

/* Estado vacío ilustrado */
.peluges-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 10px; padding: 48px 24px; color: var(--text-muted);
}
.peluges-empty .mud-icon-root { font-size: 3rem; color: var(--primary-tint); opacity: .7; }

/* Wordmark */
.peluges-wordmark { font-weight: 800; letter-spacing: -0.02em; color: var(--primary) !important; }

/* ─── 5 · FORMULARIOS (Blazor) ────────────────────────────────────────────── */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--success); border-radius: var(--radius-sm); }
.invalid { outline: 1px solid var(--error); border-radius: var(--radius-sm); }
.validation-message { color: var(--error); font-size: .8rem; margin-top: 2px; }

/* ─── 6 · LOGIN / AUTH (SSR estático; cristal sobre fondo de marca) ───────── */
.auth-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    /* Orbes de color VIVOS agrupados tras la tarjeta → el cristal los muestra desenfocados */
    background:
        radial-gradient(540px 540px at 50% 40%, rgba(138,79,144,.50), transparent 62%),
        radial-gradient(460px 460px at 30% 66%, rgba(194,144,74,.46), transparent 60%),
        radial-gradient(520px 520px at 72% 28%, rgba(106,44,112,.46), transparent 60%),
        radial-gradient(420px 420px at 84% 78%, rgba(194,144,74,.28), transparent 60%),
        linear-gradient(150deg, #ece0ec, #f3e9ee);
    position: relative;
    overflow: hidden;
}
[data-theme="dark"] .auth-wrap {
    background:
        radial-gradient(560px 560px at 50% 40%, rgba(176,108,186,.42), transparent 62%),
        radial-gradient(480px 480px at 28% 66%, rgba(194,144,74,.30), transparent 60%),
        radial-gradient(520px 520px at 74% 26%, rgba(106,44,112,.55), transparent 60%),
        linear-gradient(150deg, #1c1326, #120d18);
}
/* Aurora sutil de marca (se detiene con reduced-motion) */
.auth-wrap::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(34% 42% at 38% 34%, rgba(106,44,112,.26), transparent 70%),
                radial-gradient(32% 40% at 66% 64%, rgba(194,144,74,.22), transparent 70%);
    filter: blur(16px);
    animation: peluges-aurora 16s var(--ease-in-out) infinite alternate;
    z-index: 0; pointer-events: none;
}
@keyframes peluges-aurora { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } }

.auth-card {
    position: relative; z-index: 1;
    max-width: 424px; width: 100%;
    /* Liquid Glass: translúcido, frost fuerte, canto especular luminoso + brillo interior superior */
    background: linear-gradient(135deg, rgba(255,255,255,.70), rgba(255,255,255,.42) 46%, rgba(255,255,255,.50));
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border-radius: 30px;
    padding: 44px 38px;
    border: 1px solid var(--glass-border);
    box-shadow:
        0 1px 2px rgba(43,35,48,.05),
        0 36px 90px -16px rgba(86,35,89,.34),
        var(--glass-edge);
    overflow: hidden;
    animation: auth-card-in 560ms var(--ease-out) both;
}
/* Brillo interior superior — luz entrando en el vidrio */
.auth-card::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 55%;
    background: radial-gradient(130% 90% at 50% 0%, rgba(255,255,255,.40), transparent 72%);
    pointer-events: none; z-index: 0;
}
.auth-card > * { position: relative; z-index: 1; }
@keyframes auth-card-in {
    from { opacity: 0; transform: translateY(16px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
[data-theme="dark"] .auth-card {
    background: linear-gradient(135deg, rgba(74,60,88,.58), rgba(30,24,40,.40) 46%, rgba(42,34,54,.44));
    border: 1px solid var(--glass-border);
    box-shadow:
        0 1px 2px rgba(0,0,0,.40),
        0 36px 90px -16px rgba(0,0,0,.65),
        var(--glass-edge);
}
[data-theme="dark"] .auth-card::before {
    background: radial-gradient(130% 90% at 50% 0%, rgba(255,255,255,.10), transparent 72%);
}
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 28px; }
.auth-logo {
    width: 60px; height: 60px; border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary-soft), var(--primary-strong));
    display: flex; align-items: center; justify-content: center;
    color: #fff; flex-shrink: 0;
    box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255,255,255,.35);
}
.auth-logo svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.auth-wordmark { font-size: 1.55rem; font-weight: 800; color: var(--text); letter-spacing: -0.035em; line-height: 1; }
.auth-tagline  { font-size: .85rem; color: var(--text-muted); margin: 0; text-align: center; letter-spacing: .005em; }
.auth-heading  { font-size: 1.5rem; font-weight: 700; color: var(--text); margin: 0 0 4px 0; letter-spacing: -0.025em; }
.auth-subheading { font-size: .92rem; color: var(--text-muted); margin: 0 0 24px 0; }
.auth-status   { margin-bottom: 14px; }
.auth-field    { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.auth-label    { font-size: .85rem; font-weight: 500; color: var(--text); }
.auth-input {
    width: 100%; height: 50px; padding: 0 16px;
    border: 1px solid rgba(43,35,48,.12); border-radius: 14px;
    background: rgba(255,255,255,.78); font-family: inherit; font-size: .95rem; color: var(--text);
    outline: none; box-sizing: border-box;
    box-shadow: inset 0 1px 2px rgba(43,35,48,.04);
    transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.auth-input::placeholder { color: var(--text-faint); }
.auth-input:focus { border-color: var(--primary-soft); background: #fff; box-shadow: 0 0 0 4px var(--focus-ring), inset 0 1px 2px rgba(43,35,48,.04); }
[data-theme="dark"] .auth-input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); box-shadow: inset 0 1px 2px rgba(0,0,0,.20); }
[data-theme="dark"] .auth-input:focus { background: rgba(255,255,255,.10); }
.auth-error { font-size: .8rem; color: var(--error); margin: 2px 0 0 0; }
.auth-remember { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: .85rem; color: var(--text); cursor: pointer; user-select: none; }
.auth-remember input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; border-radius: 4px; }
.auth-btn {
    width: 100%; height: 50px; color: var(--on-primary);
    background: linear-gradient(180deg, var(--primary-soft), var(--primary));
    border: none; border-radius: 14px; font-family: inherit; font-weight: 700; font-size: .98rem; cursor: pointer; letter-spacing: .01em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 8px 20px -4px rgba(106,44,112,.45);
    transition: filter var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-press) var(--ease-out);
}
.auth-btn:hover  { filter: brightness(1.06); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 12px 28px -4px rgba(106,44,112,.55); }
.auth-btn:active { transform: translateY(0) scale(.985); box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 4px 12px -2px rgba(106,44,112,.40); }
.auth-btn:focus-visible { outline: 2px solid var(--focus-line); outline-offset: 2px; }
.auth-footer { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 18px; }
.auth-link   { font-size: .85rem; color: var(--primary); text-decoration: none; }
.auth-link:hover { text-decoration: underline; }

/* ─── 5-bis · MI CUENTA (páginas Identity /Account/Manage) ────────────────────
   Estas páginas venían del andamiaje de ASP.NET Identity: HTML con clases de
   Bootstrap (row, col-md-*, form-control, btn) que este proyecto NO carga. Sin CSS
   que las recogiera, todo salía pegado al borde izquierdo y sin estilo.

   En vez de reescribir las doce páginas a mano, el contenedor .acct-shell traduce
   ese puñado de clases a los tokens del sistema. Así las que no se tocan heredan el
   mismo aspecto que el resto del programa. */
.acct-shell {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px 56px;
}
.acct-head { margin-bottom: 24px; }
.acct-title {
    font-size: 1.6rem; font-weight: 700; color: var(--text);
    margin: 0 0 4px 0; letter-spacing: -0.025em;
}
.acct-sub { font-size: .92rem; color: var(--text-muted); margin: 0; }

.acct-body { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 800px) { .acct-body { grid-template-columns: 1fr; } }

.acct-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(43,35,48,.06));
    padding: 24px 26px;
}
.acct-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px; }
.acct-nav a {
    display: block; padding: 9px 12px; border-radius: var(--radius-sm);
    font-size: .9rem; color: var(--text); text-decoration: none;
    transition: background 140ms var(--ease-out), color 140ms var(--ease-out);
}
.acct-nav a:hover { background: var(--tint-sunken, rgba(0,0,0,.04)); }
.acct-nav a.active {
    background: var(--primary); color: #fff; font-weight: 600;
}

/* --- Traducción de las clases del andamiaje al sistema de diseño --- */
.acct-shell .row { display: block; }
.acct-shell .col-md-3, .acct-shell .col-md-6, .acct-shell .col-md-9 { width: 100%; max-width: 100%; }

.acct-shell .form-floating { position: relative; margin-bottom: 16px; }
/* El andamiaje pone <input> y DESPUÉS <label>; con flex-direction en columna inversa
   la etiqueta vuelve arriba sin tocar el orden del HTML de cada página. */
.acct-shell .form-floating { display: flex; flex-direction: column-reverse; gap: 5px; }
.acct-shell .form-label { font-size: .85rem; font-weight: 500; color: var(--text); margin: 0; }

.acct-shell .form-control {
    width: 100%; padding: 11px 13px; font-size: .95rem; font-family: inherit;
    color: var(--text); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.acct-shell .form-control:focus {
    outline: none; border-color: var(--primary-soft);
    box-shadow: 0 0 0 4px var(--focus-ring);
}
.acct-shell .form-control:disabled { background: var(--tint-sunken, rgba(0,0,0,.04)); color: var(--text-muted); }

.acct-shell .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px; font-size: .95rem; font-weight: 600; font-family: inherit;
    border: none; border-radius: var(--radius-sm); cursor: pointer;
    transition: filter 140ms var(--ease-out), transform 140ms var(--ease-out);
}
.acct-shell .btn:hover  { filter: brightness(1.06); transform: translateY(-1px); }
.acct-shell .btn:active { transform: translateY(0) scale(.985); }
.acct-shell .btn:focus-visible { outline: 2px solid var(--focus-line); outline-offset: 2px; }
.acct-shell .btn-primary { background: var(--primary); color: #fff; }
.acct-shell .btn-danger  { background: var(--error); color: #fff; }
.acct-shell .btn-lg { padding: 13px 22px; font-size: 1rem; }
/* w-100 en un botón dentro de un formulario estrecho quedaba desmesurado. */
.acct-shell .w-100 { width: auto; min-width: 200px; }

.acct-shell .alert {
    padding: 12px 14px; border-radius: var(--radius-sm); font-size: .9rem;
    border: 1px solid transparent; margin-bottom: 16px;
}
.acct-shell .alert-warning { background: rgba(194,144,74,.12); border-color: rgba(194,144,74,.35); color: var(--text); }
.acct-shell .alert-danger  { background: rgba(198,60,60,.10);  border-color: rgba(198,60,60,.32);  color: var(--text); }
.acct-shell .text-danger { color: var(--error); font-size: .82rem; }
.acct-shell .text-info   { color: var(--text-muted); }

/* Ancho de lectura común a todas las páginas: un campo de texto a 650px se lee mal
   y cada página traía el suyo. Se fija aquí para que las doce sean coherentes. */
.acct-shell form { max-width: 520px; }

.acct-shell h3 { font-size: 1.15rem; font-weight: 650; color: var(--text); margin: 0 0 16px 0; }
.acct-shell h4 { font-size: 1rem; font-weight: 600; color: var(--text); margin: 20px 0 10px 0; }
.acct-shell hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.acct-shell .table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.acct-shell .table th, .acct-shell .table td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left; }

/* ─── 6 · MODAL DE RECONEXIÓN (SignalR) ───────────────────────────────────── */
#components-reconnect-modal {
    display: none; position: fixed; inset: 0;
    background: rgba(20,16,25,.50); z-index: 10000;
    align-items: center; justify-content: center;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: flex; }
#components-reconnect-modal .reconnect-dialog {
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(20px) saturate(155%); backdrop-filter: blur(20px) saturate(155%);
    padding: 1.75rem 2.25rem; border-radius: var(--radius-lg); text-align: center;
    box-shadow: var(--shadow-5), inset 0 1px 0 var(--glass-highlight);
    max-width: 360px; border: 1px solid var(--glass-border); color: var(--text);
}
#components-reconnect-modal .reconnect-text { margin: 0 0 0.75rem 0; font-size: .9rem; color: var(--text); }
#components-reconnect-modal .reconnect-retry {
    margin-top: 0.5rem; padding: 0.5rem 1.25rem; border: none; border-radius: var(--radius-md);
    background: var(--primary); color: var(--on-primary); font-family: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
    transition: background-color var(--dur-base) var(--ease-standard), transform var(--dur-press) var(--ease-out);
}
#components-reconnect-modal .reconnect-retry:hover  { background: var(--primary-strong); transform: translateY(-1px); }
#components-reconnect-modal .reconnect-retry:active { transform: translateY(0) scale(.985); }

/* ─── 6 · BLAZOR ERROR UI ─────────────────────────────────────────────────── */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbmM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem; color: white;
}
.blazor-error-boundary::after { content: "Se ha producido un error."; }
#blazor-error-ui {
    background: var(--surface-2); bottom: 0; box-shadow: var(--shadow-3); display: none;
    left: 0; padding: 0.6rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
    color: var(--text); font-size: .875rem; border-top: 1px solid var(--border);
}
#blazor-error-ui .reload  { color: var(--primary); font-weight: 600; margin-left: 0.4rem; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; color: var(--text-muted); }

/* ─── 7 · ACCESIBILIDAD ───────────────────────────────────────────────────── */
/* Sin transparencia: superficies sólidas (Apple HIG / WCAG) */
@media (prefers-reduced-transparency: reduce) {
    .peluges-glass, .peluges-glass-strong,
    .peluges-appbar.mud-appbar, .mud-drawer.peluges-drawer,
    .mud-dialog, .mud-popover, .auth-card,
    .mud-paper, .mud-table-container, .mud-data-grid, .agenda-container,
    #components-reconnect-modal .reconnect-dialog {
        background: var(--surface) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}
/* Navegadores sin backdrop-filter → sólido */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .peluges-glass, .peluges-glass-strong,
    .peluges-appbar.mud-appbar, .mud-drawer.peluges-drawer,
    .mud-dialog, .mud-popover, .auth-card,
    .mud-paper, .mud-table-container, .mud-data-grid, .agenda-container,
    #components-reconnect-modal .reconnect-dialog {
        background: var(--surface) !important;
    }
}
/* ─── LISTADOS EN MÓVIL ───────────────────────────────────────────────────── */
/* Cabecera de página: en móvil el título ocupa su fila y los botones se reparten debajo */
@media (max-width: 767.98px) {
    .page-head > h1 { flex-basis: 100%; }
    .page-head .mud-spacer { display: none; }
    .page-head .mud-button-root.mud-button { flex: 1 1 auto; margin-right: 0 !important; }
    /* Modo "tabla completa" en móvil: scroll horizontal en vez de columnas aplastadas */
    .pg-table-scroll { overflow-x: auto; }
    .pg-table-scroll .mud-table-root { min-width: 840px; }
}

/* Botones de acción por fila: siempre en línea (si la celda se estrecha no deben apilarse) */
.row-actions { display: flex; align-items: center; flex-wrap: nowrap; }

/* Tarjetas de listado (vista móvil simplificada) */
.pg-cards { display: flex; flex-direction: column; gap: 8px; }
.pg-card {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface); cursor: pointer;
    transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.pg-card:active { background: var(--row-hover); }
.pg-card-main  { min-width: 0; }
.pg-card-name  { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.pg-card-sub   { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
.pg-card-side  { text-align: right; flex-shrink: 0; }
.pg-card-price { font-weight: 700; color: var(--text); }
.pg-card-stock { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
.pg-card-stock.low { color: var(--error); font-weight: 600; }

/* Táctil (móvil/tablet): objetivos de toque ≥40px en botones de icono de tablas y
   paginador (WCAG 2.5.8). Solo pointer:coarse → en escritorio las filas siguen densas. */
@media (pointer: coarse) {
    .mud-table .mud-icon-button,
    .mud-table-pagination-actions .mud-icon-button,
    .mud-appbar .mud-icon-button {
        padding: 10px;
    }
    .mud-table-pagination-select { min-height: 40px; }
    /* Botones pequeños (Size.Small, 31px) → 36px; las flechas ± de los campos numéricos (24x18)
       son inalcanzables con el dedo y el teclado numérico del tablet ya sirve para teclear. */
    .mud-button-root.mud-button-size-small { min-height: 36px; }
    .mud-input-numeric-spin { display: none; }
}

/* Sin movimiento */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
    .auth-wrap::before { animation: none !important; }
}


/* ── Cabecera de ficha: campos a la izquierda, foto arriba a la derecha ─────────
   La usan las fichas de cliente, empleado y proveedor. La foto (~128px de alto)
   marca el alto de la fila, asi que a la izquierda debe haber DOS filas de campos:
   con una sola quedaba un hueco vacio de mas de 70px en mitad de la ficha. */
.pg-ficha-cabecera { display: flex; gap: 20px; align-items: flex-start; }
.pg-ficha-campos   { flex: 1 1 auto; min-width: 0; }
.pg-ficha-foto {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
    gap: 6px; padding-top: 4px; width: 150px;
}
@media (max-width: 600px) {
    .pg-ficha-cabecera { flex-direction: column; }
    .pg-ficha-foto { width: auto; align-items: flex-start; }
}