:root {
    --appbar-h: 64px; /* altura real de tu MudAppBar */
    --gold: #d4af37; /* dorado de acento */
    --red: #7a2323; /* rojo cabecera */
    --black: #000000; /* fondo cuerpo */
    --card-bg: rgba(0,5,13,.25);
    --card-border: rgba(233,164,10,.80);
    --drawer-anim-ms: 240ms; /* ajusta si tu MudDrawer usa otra duración */
    --drawer-ease: cubic-bezier(0.0, 0.0, 0.2, 1); /* Material ease-out */
    --ws-page-bg: #000000;
    --ws-surface-bg: linear-gradient(180deg, #141e2f 0%, #101827 100%);
    --ws-surface-bg-soft: #1b2638;
    --ws-surface-bg-muted: #202b3c;
    --ws-surface-border: rgba(142, 169, 210, .54);
    --ws-surface-border-soft: rgba(142, 169, 210, .36);
    --ws-surface-border-strong: rgba(212, 175, 55, .56);
    --ws-surface-table: #151d2b;
    --ws-surface-table-head: #263246;
    --ws-surface-table-row-alt: rgba(255,255,255,.035);
    --ws-surface-shadow: 0 1px 0 rgba(255,255,255,.045) inset, 0 14px 32px rgba(0,0,0,.42);
}

html,
body,
.mud-layout,
.mud-main-content,
.mud-main-content > .mud-container {
    background: var(--ws-page-bg) !important;
}

.admin-dashboard,
.catalog-import-admin,
.products-admin,
.ws-profile-page {
    background: var(--ws-page-bg) !important;
}

/* Superficies reutilizables para zonas oscuras con bajo contraste en algunos monitores. */
.ws-contrast-surface,
.ws-contrast-card,
.ws-contrast-panel {
    color: white;
    background: var(--ws-surface-bg) !important;
    border: 1px solid var(--ws-surface-border) !important;
    box-shadow: var(--ws-surface-shadow);
}

.ws-contrast-card,
.ws-contrast-panel {
    border-radius: 8px;
}

.ws-contrast-card,
.ws-contrast-panel,
.ws-contrast-surface,
.ws-contrast-expansion .mud-expand-panel {
    position: relative;
}

.ws-contrast-card::before,
.ws-contrast-panel::before,
.ws-contrast-surface::before,
.ws-contrast-expansion .mud-expand-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}

.ws-contrast-row {
    background: var(--ws-surface-bg-soft) !important;
    border: 1px solid var(--ws-surface-border-soft) !important;
}

.ws-contrast-muted {
    background: var(--ws-surface-bg-muted) !important;
    border: 1px solid var(--ws-surface-border-soft) !important;
}

.ws-contrast-table {
    border: 1px solid var(--ws-surface-border-soft) !important;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ws-surface-table) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.035) inset;
}

.ws-contrast-table .mud-table-head {
    background: var(--ws-surface-table-head) !important;
    border-bottom: 1px solid var(--ws-surface-border-soft) !important;
}

.ws-contrast-table .mud-table-row {
    border-bottom: 1px solid rgba(142, 169, 210, .24);
}

.ws-contrast-table .mud-table-row:nth-child(even) {
    background: var(--ws-surface-table-row-alt) !important;
}

.ws-contrast-table .mud-table-row:hover {
    background: rgba(212, 175, 55, .075) !important;
}

.ws-contrast-table .mud-table-row:last-child {
    border-bottom: 0;
}

.ws-contrast-table .mud-table-cell {
    border-bottom-color: rgba(142, 169, 210, .24) !important;
}

.ws-contrast-expansion .mud-expand-panel {
    border: 1px solid var(--ws-surface-border) !important;
    background: var(--ws-surface-bg) !important;
    box-shadow: var(--ws-surface-shadow);
}

.ws-contrast-expansion .mud-expand-panel:not(:last-child) {
    border-bottom-color: var(--ws-surface-border-strong) !important;
    margin-bottom: 16px;
}

.ws-contrast-expansion .mud-expand-panel-header {
    background: var(--ws-surface-bg-soft) !important;
    border-bottom: 1px solid var(--ws-surface-border-soft) !important;
    min-height: 88px;
}

.ws-contrast-expansion .mud-expand-panel-content {
    background: #121a29 !important;
    border-top: 1px solid rgba(142, 169, 210, .24) !important;
}

.ws-contrast-expansion .mud-expand-panel-content > .mud-expand-panel-content-wrapper {
    padding-top: 18px;
}

/* Compatibilidad: aplica el patrón común a superficies ya existentes. */
.profile-hero,
.profile-card,
.provider-card,
.profile-order-card,
.admin-module-card,
.admin-info-card,
.catalog-import-panel,
.catalog-import-file,
.manufacturers-admin-panel,
.orders-admin-panel,
.orders-line,
.products-admin__categories-panel,
.products-admin__filters-panel,
.products-admin__state,
.products-admin-card,
.promo-admin-panel,
.reviews-admin-panel,
.ships-admin-panel,
.tickets-admin-panel,
.prod-editor-card,
.prod-editor-sidepanel,
.prod-editor-inline-note,
.prod-variant-card {
    background: var(--ws-surface-bg) !important;
    border-color: var(--ws-surface-border) !important;
    box-shadow: var(--ws-surface-shadow);
}

.profile-order-card,
.provider-card,
.catalog-import-file,
.orders-line,
.prod-editor-inline-note,
.prod-variant-card {
    background: var(--ws-surface-bg-muted) !important;
}

.products-admin__category,
.profile-payment-icon,
.orders-evidence,
.my-orders-review,
.my-orders-ticket {
    background: var(--ws-surface-bg-muted) !important;
    border-color: var(--ws-surface-border-soft) !important;
}

.products-admin__category.is-active,
.products-admin__category:hover {
    background: rgba(212, 175, 55, .12) !important;
    border-color: var(--ws-surface-border-strong) !important;
}

.my-orders-review {
    background: linear-gradient(180deg, rgba(212, 175, 55, .13), rgba(212, 175, 55, .07)) !important;
    border-color: rgba(212, 175, 55, .62) !important;
}

.my-orders-panels .mud-expand-panel,
.admin-module-card,
.products-admin__categories-panel,
.products-admin__filters-panel,
.products-admin-card,
.profile-card {
    outline: 1px solid rgba(0,0,0,.35);
}

.manufacturers-admin-panel .mud-table,
.orders-admin-panel .mud-table,
.promo-admin-panel .mud-table,
.reviews-admin-panel .mud-table,
.ships-admin-panel .mud-table,
.tickets-admin-panel .mud-table,
.catalog-import-panel .mud-table {
    border: 1px solid var(--ws-surface-border-soft);
    border-radius: 8px;
    overflow: hidden;
    background: var(--ws-surface-table);
}

.manufacturers-admin-panel .mud-table-head,
.orders-admin-panel .mud-table-head,
.promo-admin-panel .mud-table-head,
.reviews-admin-panel .mud-table-head,
.ships-admin-panel .mud-table-head,
.tickets-admin-panel .mud-table-head,
.catalog-import-panel .mud-table-head {
    background: var(--ws-surface-table-head);
}

.manufacturers-admin-panel .mud-table-row,
.orders-admin-panel .mud-table-row,
.promo-admin-panel .mud-table-row,
.reviews-admin-panel .mud-table-row,
.ships-admin-panel .mud-table-row,
.tickets-admin-panel .mud-table-row,
.catalog-import-panel .mud-table-row {
    border-bottom: 1px solid rgba(142, 169, 210, .24);
}

.manufacturers-admin-panel .mud-table-row:nth-child(even),
.orders-admin-panel .mud-table-row:nth-child(even),
.promo-admin-panel .mud-table-row:nth-child(even),
.reviews-admin-panel .mud-table-row:nth-child(even),
.ships-admin-panel .mud-table-row:nth-child(even),
.tickets-admin-panel .mud-table-row:nth-child(even),
.catalog-import-panel .mud-table-row:nth-child(even) {
    background: var(--ws-surface-table-row-alt);
}


/* Por defecto (sin drawer admin o móvil): header a ancho completo */
.mud-layout {
    --aside-w: 0px;
}

/* Admin escritorio con drawer mini (60px) */
.mud-layout.has-admin-drawer {
        --aside-w: 60px;
    }

/* Admin escritorio con drawer expandido (220px) */
.mud-layout.has-admin-drawer.drawer-expanded {
            --aside-w: 220px;
        }


/*CSS PARA APLICAR A LOS INPUT DE MUDBLAZOR QUE LES COLOCA UN FONDO*/
/* === Base de inputs con fondo === */
.bg-input .mud-input {
    background-color: #31394569;
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
    /* Forzamos el "primary" solo dentro del input */
    --mud-palette-primary: var(--gold);
}

/* Input limpio */
.bg-input input.mud-input-root {
    background: transparent;
    caret-color: var(--gold);
}

    .bg-input input.mud-input-root::selection {
        background: rgba(212,175,55,.25);
    }

/* Borde outlined: 1px siempre (sin “engordar” al enfocar) */
.bg-input .mud-input-outlined .mud-input-outlined-border {
    border-width: 1px;
    transition: border-color .16s ease;
}

/* Hover sutil */
.bg-input .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(212,175,55,.45);
}

/* Foco: dorado sin halo */
.bg-input .mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border,
.bg-input .mud-input-control-input-container:focus-within .mud-input-outlined-border {
    border-color: var(--gold) !important;
    box-shadow: none !important;
}

/* Label: gris en reposo, dorado al foco (robusto con :focus-within) */
.bg-input .mud-input-label {
    color: rgba(255,255,255,.72) !important;
    transition: color .16s ease;
}

.bg-input .mud-input-control-input-container:focus-within .mud-input-label,
.bg-input .mud-input.mud-input-error ~ .mud-input-label {
    color: var(--gold) !important;
}

/* Disabled/readonly sin dorado */
.bg-input .mud-input-outlined.mud-disabled .mud-input-outlined-border,
.bg-input .mud-input-outlined.mud-readonly .mud-input-outlined-border {
    border-color: rgba(255,255,255,.18) !important;
    box-shadow: none !important;
}
/* (opcional) label algo más tenue en disabled/readonly */
.bg-input .mud-disabled ~ .mud-input-label,
.bg-input .mud-readonly ~ .mud-input-label {
    color: rgba(255,255,255,.55) !important;
}
/* === Normalizar helper text en inputs (MudTextField) === */
/* 0) Estado base: el helper no ocupa espacio */
.bg-input .mud-input-control-helper-container .mud-input-helper-text {
    height: 0;
    min-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    /*font-size: .875rem;*/ /*opcional*/
    /*line-height: 1.1rem;*/ /*opcional*/
    /* color: var(--gold);rgba(255,255,255,.75); /*opcional*/
}

 /*1) Cuando cualquier hijo dentro del input-container recibe foco → mostrar helper*/ 
.bg-input .mud-input-control-input-container:focus-within + .mud-input-control-helper-container .mud-input-helper-text {
    height: 1.1rem;
   /* margin-top: .25rem;*/
    opacity: .55;
}

 /*2) (Opcional) si el input está en error, mostrar helper también*/ 
.bg-input .mud-input-control-input-container:has(.mud-input.mud-input-error) + .mud-input-control-helper-container .mud-input-helper-text {
    height: 1.1rem;
    margin-top: .25rem;
    opacity: .95;
}


/****************************************************************/
/*****************CSS PARA LOS BOTONES OUTLINE*******************/
/****************************************************************/

/* Hover genérico para botones outlined: dorado coherente con los inputs */
.mud-button-root.mud-button-outlined:not(.mud-disabled):hover {
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 0 0 2px rgba(212,175,55,.18);
}

/* En foco vía teclado, mismo feedback sutil */
.mud-button-root.mud-button-outlined:not(.mud-disabled):focus-visible {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212,175,55,.22);
    outline: none;
}

/* === Outlined => borde y texto dorados en hover/focus/active (excepto error) === */
.mud-button-root.mud-button-outlined:not(.mud-disabled):hover,
.mud-button-root.mud-button-outlined-default:not(.mud-disabled):hover,
.mud-button-root.mud-button-outlined-primary:not(.mud-disabled):hover,
.mud-button-root.mud-button-outlined-secondary:not(.mud-disabled):hover,
.mud-button-root.mud-button-outlined-info:not(.mud-disabled):hover,
.mud-button-root.mud-button-outlined-success:not(.mud-disabled):hover,
.mud-button-root.mud-button-outlined-warning:not(.mud-disabled):hover,
.mud-button-root.mud-button-outlined:not(.mud-disabled):focus-visible,
.mud-button-root.mud-button-outlined-default:not(.mud-disabled):focus-visible,
.mud-button-root.mud-button-outlined-primary:not(.mud-disabled):focus-visible,
.mud-button-root.mud-button-outlined-secondary:not(.mud-disabled):focus-visible,
.mud-button-root.mud-button-outlined-info:not(.mud-disabled):focus-visible,
.mud-button-root.mud-button-outlined-success:not(.mud-disabled):focus-visible,
.mud-button-root.mud-button-outlined-warning:not(.mud-disabled):focus-visible,
.mud-button-root.mud-button-outlined:not(.mud-disabled):active,
.mud-button-root.mud-button-outlined-default:not(.mud-disabled):active,
.mud-button-root.mud-button-outlined-primary:not(.mud-disabled):active,
.mud-button-root.mud-button-outlined-secondary:not(.mud-disabled):active,
.mud-button-root.mud-button-outlined-info:not(.mud-disabled):active,
.mud-button-root.mud-button-outlined-success:not(.mud-disabled):active,
.mud-button-root.mud-button-outlined-warning:not(.mud-disabled):active {
    border-color: var(--gold) !important;
    color: var(--gold) !important;
    box-shadow: 0 0 0 2px rgba(212,175,55,.18);
}

 /*Excepción: botones “destructivos” mantienen rojo*/ 
.mud-button-root.mud-button-outlined-error:not(.mud-disabled):hover,
.mud-button-root.mud-button-outlined-error:not(.mud-disabled):focus-visible,
.mud-button-root.mud-button-outlined.mud-error:not(.mud-disabled):hover,
.mud-button-root.mud-button-outlined.mud-error:not(.mud-disabled):focus-visible {
    border-color: var(--mud-palette-error, #ef4444) !important;
    color: var(--mud-palette-error, #ef4444) !important;
    box-shadow: 0 0 0 2px rgba(239,68,68,.18);
}




 /*Botón outlined destructivo: mantener rojo en hover/foco*/ 
.mud-button-root.mud-button-outlined-error:not(.mud-disabled):hover,
.mud-button-root.mud-button-outlined.mud-error:not(.mud-disabled):hover {
    border-color: var(--mud-palette-error, #ef4444);
    color: var(--mud-palette-error, #ef4444);
    box-shadow: 0 0 0 2px rgba(239,68,68,.18);
}

.mud-button-root.mud-button-outlined-error:not(.mud-disabled):focus-visible,
.mud-button-root.mud-button-outlined.mud-error:not(.mud-disabled):focus-visible {
    border-color: var(--mud-palette-error, #ef4444);
    box-shadow: 0 0 0 3px rgba(239,68,68,.22);
    outline: none;
}
 
/*Excepción: botones “destructivos” mantienen rojo*/ 
.mud-button-root.mud-button-outlined-error:not(.mud-disabled):hover,
.mud-button-root.mud-button-outlined-error:not(.mud-disabled):focus-visible,
.mud-button-root.mud-button-outlined.mud-error:not(.mud-disabled):hover,
.mud-button-root.mud-button-outlined.mud-error:not(.mud-disabled):focus-visible {
    border-color: var(--mud-palette-error, #ef4444) !important;
    color: var(--mud-palette-error, #ef4444) !important;
    box-shadow: 0 0 0 2px rgba(239,68,68,.18);
}


/********************************************************/
/*************************paneles******************/
/**/
/* FAQ: cabecera roja + cuerpo negro */
 /* ===== Variante A: paneles con borde dorado individual ===== */
.faq-panels-gold .mud-expand-panel {
    border: 1px solid var(--gold);
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
}

.faq-panels-gold .mud-expand-panel + .mud-expand-panel {
    margin-top: 10px;
}

.faq-panels-gold .mud-expand-panel-header {
    background: var(--red);
    color: #fff;
    padding: 12px 16px;
}

    .faq-panels-gold .mud-expand-panel-header .mud-expand-panel-icon {
        color: #fff;
    }

.faq-panels-gold .mud-collapse-wrapper,
.faq-panels-gold .mud-expand-panel-content {
    background: var(--black);
    color: #e5e7eb;
    padding: 16px;
}

/* Suavizado al expandir para que no dupliquen esquinas */
.faq-panels-gold .mud-expand-panel.mud-expand-panel-expanded .mud-expand-panel-header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
/*****************************SEGUNDA VARIANTE************************/

/* ===== Variante B: grupo compacto con borde dorado exterior ===== */
.faq-panels-compact {
    border: 1px solid var(--gold);
    border-radius: 12px;
    overflow: hidden; /* evita ver el fondo entre paneles */
    background: transparent;
}

    /* Quita cualquier separación vertical nativa entre paneles/colapsables */
    .faq-panels-compact .mud-expand-panel {
        border: none;
        border-radius: 0;
        margin: 0 !important; /* <- elimina gaps de Mud */
    }

    .faq-panels-compact .mud-collapse-wrapper {
        margin: 0 !important; /* <- elimina gaps al expandir */
    }

    .faq-panels-compact .mud-collapse-container {
        padding: 0 !important; /* <- quita rellenos internos del wrapper */
    }

    /* Cabeceras: rojo y separador dorado */
    .faq-panels-compact .mud-expand-panel-header {
        background: var(--red);
        color: #fff;
        padding: 14px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(212,175,55,.28); /* separador entre paneles */
    }

        .faq-panels-compact .mud-expand-panel-header .mud-expand-panel-icon {
            color: #fff;
        }

    /* Contenidos: negro, sin huecos adicionales y con separador dorado único */
    .faq-panels-compact .mud-expand-panel-content {
        background: var(--black);
        color: #e5e7eb;
        padding: 16px;
        border-bottom: 1px solid rgba(212,175,55,.20); /* separador bajo el cuerpo */
    }

    /* Evita “doble línea” cuando un panel está expandido */
    .faq-panels-compact .mud-expand-panel.mud-expand-panel-expanded .mud-expand-panel-header {
        border-bottom-color: transparent; /* la línea la pone el cuerpo */
    }

    /* En el último panel, no dibujar línea extra abajo */
    .faq-panels-compact .mud-expand-panel:last-child .mud-expand-panel-content {
        border-bottom: none;
    }

    /* Si el contenido lleva párrafos con margen, quítalo al final para no crear huecos visuales */
    .faq-panels-compact .mud-expand-panel-content > *:last-child {
        margin-bottom: 0 !important;
    }

/* ===== Variante C: estilo por defecto + cabecera roja + cuerpo negro + borde dorado al expandir ===== */
/* Variante “por defecto + colores” (NO cambia bordes, gaps ni divisores) */
/* Variante por defecto con colores (sin tocar separadores/gaps originales) */
/* Colapsado: permitir ver las esquinas del header y el micro-gap */
.faq-panels-default-colors .mud-expand-panel {
    overflow: visible; /* <- antes estaba hidden */
}

    /* Expandido: encapsulado limpio (el body respeta los radios) */
    .faq-panels-default-colors .mud-expand-panel.mud-panel-expanded {
        overflow: hidden;
    }

/* Cabecera roja + icono blanco */
.faq-panels-default-colors .mud-expand-panel-header {
    background: var(--red);
    color: #fff;
}

    .faq-panels-default-colors .mud-expand-panel-header .mud-expand-panel-icon {
        color: #fff;
    }

/* Cuerpo negro */
.faq-panels-default-colors .mud-collapse-wrapper,
.faq-panels-default-colors .mud-expand-panel-content {
    background: var(--black);
    color: #e5e7eb;
}

/* === Correcciones al EXPANDIR === */

/* 2.1: solo radios superiores en la cabecera cuando está abierto */
.faq-panels-default-colors
.mud-expand-panel.mud-expand-panel-expanded
.mud-expand-panel-header {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* 2.2: radios inferiores en el cuerpo cuando está abierto */
.faq-panels-default-colors
.mud-expand-panel.mud-expand-panel-expanded
.mud-expand-panel-content {
    border-bottom-left-radius: 0.75rem; /* ~12px, como Mud por defecto */
    border-bottom-right-radius: 0.75rem;
}

/* 2.3: eliminar el “hueco/velo” gris entre cabecera y contenido */
.faq-panels-default-colors .mud-collapse-wrapper {
    margin: 0 !important;
}

.faq-panels-default-colors .mud-collapse-container {
    padding: 0 !important;
}

/* algunos temas añaden un borde inferior a la cabecera: desactívalo cuando está abierto
   para que no se vea línea entre header y body */
.faq-panels-default-colors
.mud-expand-panel.mud-expand-panel-expanded
.mud-expand-panel-header {
    border-bottom: none !important;
}

/* Redondeo superior del PRIMER panel al estar cerrado */
.faq-panels-default-colors
.mud-expand-panel:first-child:not(.mud-panel-expanded)
.mud-expand-panel-header {
    border-top-left-radius: .75rem;
    border-top-right-radius: .75rem;
}

/* Redondeo inferior del ÚLTIMO panel al estar cerrado */
.faq-panels-default-colors
.mud-expand-panel:last-child:not(.mud-panel-expanded)
.mud-expand-panel-header {
    border-bottom-left-radius: .75rem;
    border-bottom-right-radius: .75rem;
}

/*************************************************************************************/
/**********ALTERNATIVA A LA OPCIÓN C PERO CON BORDE DORADO AL DESPLEGAR**************/
/***********************************************************************************/


/* Usar junto a faq-panels-default-colors */
/* ===== Variante por defecto + colores (mantén el resto) ===== */

/* ================================================
   FAQ — Borde dorado SOLO al expandir el panel
   Requiere que el contenedor tenga también:
   Class="faq-panels-default-colors faq-panels-gold-on-open"
   ================================================= */

/* ==== Borde dorado SOLO al expandir (respeta look base al colapsar) ==== */

/* ⚠️ En colapsado: NO toques bordes, radios ni sombras (volvemos a defaults) */
.faq-panels-gold-on-open .mud-expand-panel:not(.mud-panel-expanded) {
    overflow: visible !important; /* restaura el pequeño gap entre paneles */
    /* no tocar border / border-radius / box-shadow aquí */
}

/* Expandido: encapsulado dorado y radios correctos */
.faq-panels-gold-on-open .mud-expand-panel.mud-panel-expanded {
    border: 1px solid var(--gold, #d4af37) !important;
    border-radius: 12px !important; /* caja completa del panel abierto */
    box-shadow: 0 0 0 1px rgba(212,175,55,.15) inset; /* sutil, opcional */
    overflow: hidden; /* el contenido respeta los radios */
}

    /* Cabecera del expandido: sin radios inferiores ni línea intermedia */
    .faq-panels-gold-on-open .mud-expand-panel.mud-panel-expanded .mud-expand-panel-header {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-bottom: none !important;
    }

/* Contenido del expandido: radios inferiores y sin gaps */
.faq-panels-gold-on-open .mud-collapse-wrapper {
    margin: 0 !important;
}

.faq-panels-gold-on-open .mud-collapse-container {
    padding: 0 !important;
}

.faq-panels-gold-on-open .mud-expand-panel.mud-panel-expanded .mud-expand-panel-content {
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* Icono blanco por si el tema lo pisa */
.faq-panels-gold-on-open .mud-expand-panel-header .mud-expand-panel-icon {
    color: #fff !important;
}