/* Gestión web Mercury — estilos propios (el resto lo pone MudBlazor) */
:root {
    --mercury: #003a62;
    --mercury-claro: #e8f0f7;
    --naranja: #e2532d;
}

html, body { font-family: Inter, system-ui, sans-serif; }

/* Barra superior */
.barra-mercury { background: var(--mercury) !important; color: #fff !important; }
.marca { color: #fff; text-decoration: none; }
.marca img { height: 30px; display: block; }
.marca-texto { font-size: .72rem; letter-spacing: .14em; opacity: .75; font-weight: 600; }
.menu-lateral .mud-drawer-content { display: flex; flex-direction: column; }
.pie-menu { opacity: .45; }

/* Árbol de secciones y familias */
.arbol { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; }
.arbol-seccion {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 8px 4px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}
.arbol-acciones { display: flex; gap: 0; }
.arbol-familia {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    border: 0; background: transparent; color: var(--mud-palette-text-primary); cursor: pointer;
    padding: 7px 10px 7px 14px; border-radius: 6px; font: inherit; text-align: left;
}
.arbol-familia:hover { background: var(--mud-palette-action-default-hover); }
.arbol-familia.activa { background: var(--mercury-claro); color: var(--mercury); font-weight: 600; }
.arbol-familia .contador { font-size: .75rem; opacity: .6; }
.oculto { opacity: .5; text-decoration: line-through; }

/* Tabla de productos */
.tabla-productos td { vertical-align: middle; }
.tabla-productos .fila-grupo td {
    background: var(--mud-palette-background-gray); font-size: .72rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); padding: 6px 12px;
}
.col-foto { width: 64px; }
.col-foto img { width: 52px; height: 52px; object-fit: contain; display: block; background: #fff; border-radius: 4px; }
.sin-foto { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: var(--mud-palette-background-gray); opacity: .6; }
.col-orden { white-space: nowrap; width: 90px; }
.col-acciones { width: 48px; }
.nombre-producto { color: var(--mud-palette-primary); font-weight: 600; text-decoration: none; }
.nombre-producto:hover { text-decoration: underline; }
.texto-suave { color: var(--mud-palette-text-secondary); font-size: .8rem; }
code { font-size: .8rem; background: var(--mud-palette-background-gray); padding: 1px 5px; border-radius: 4px; }
.ruta { color: var(--mud-palette-text-secondary); word-break: break-all; }

/* Ficha */
.ubicacion { display: flex; align-items: center; gap: 4px; padding: 8px 0; border-top: 1px solid var(--mud-palette-divider); }
.ubicacion:first-of-type { border-top: 0; }
.ubicacion .migas { font-weight: 600; font-size: .85rem; }
.ubicacion .ruta { font-size: .75rem; text-decoration: none; }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.fotos img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border: 1px solid var(--mud-palette-divider); border-radius: 6px; }
.tox-tinymce { border-radius: 6px !important; }
/* Menús y ventanas del editor por encima de los diálogos de MudBlazor (si no, quedan detrás) */
.tox-tinymce-aux { z-index: 2000 !important; }
.codigo textarea { font-family: Consolas, "Courier New", monospace; font-size: .8rem; }

/* Contenidos de la página (detalles) */
.detalles-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.detalles-lista { display: flex; flex-direction: column; gap: 8px; }
.detalle-tarjeta { border: 1px solid var(--mud-palette-divider); border-radius: 8px; overflow: hidden; background: var(--mud-palette-surface); display: flex; flex-direction: column; }
.detalle-tarjeta.apagado { opacity: .55; }
.detalle-foto { position: relative; aspect-ratio: 4 / 3; background: #f3f5f8; display: flex; align-items: center; justify-content: center; }
.detalle-foto.ancha { aspect-ratio: 16 / 7; }
.detalle-foto img { width: 100%; height: 100%; object-fit: contain; }
.detalle-foto.ancha img { object-fit: cover; }
.detalle-maqueta { position: absolute; right: 6px; bottom: 6px; width: 34px !important; height: auto !important; background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.detalle-nombre { padding: 6px 10px 0; font-weight: 600; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detalle-acciones { display: flex; align-items: center; padding: 2px 4px 4px 8px; }
.detalle-doc { display: flex; align-items: center; gap: 10px; padding: 10px 12px 0; }
.detalle-doc img { width: 40px; height: 40px; object-fit: contain; }
.vista-imagen { width: 160px; height: 110px; object-fit: contain; background: #f3f5f8; border: 1px solid var(--mud-palette-divider); border-radius: 6px; }
.vista-icono { width: 48px; height: 48px; object-fit: contain; }
.sin-foto.grande { width: 160px; height: 110px; }
.maquetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.maqueta { border: 2px solid transparent; border-radius: 6px; background: #fff; padding: 4px; cursor: pointer; }
.maqueta img { width: 100%; display: block; }
.maqueta.elegida { border-color: var(--mercury); box-shadow: 0 0 0 2px rgba(0,58,98,.15); }
.muestra { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); flex: none; background-size: cover; background-position: center; }
.selector-color { width: 44px; height: 40px; border: 1px solid var(--mud-palette-divider); border-radius: 6px; padding: 2px; background: #fff; cursor: pointer; flex: none; }
.mensaje-valores { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; font-size: .85rem; }
.mensaje-campo { color: var(--mud-palette-text-secondary); }
.mensaje-valor { white-space: pre-wrap; word-break: break-word; }

/* Login (SSR estático, sin MudBlazor) */
.login-pagina { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #003a62 0%, #0b2236 100%); padding: 16px; }
.login-tarjeta { width: 100%; max-width: 380px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.login-cabecera { background: var(--mercury); text-align: center; padding: 28px 24px 18px; color: #fff; }
.login-cabecera img { height: 46px; }
.login-cabecera p { margin: 10px 0 0; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.login-cuerpo { padding: 24px; display: flex; flex-direction: column; }
.login-cuerpo label { font-size: .8rem; font-weight: 600; color: #444; margin: 10px 0 6px; }
.login-cuerpo input { font: inherit; padding: 11px 12px; border: 1px solid #cfd6de; border-radius: 8px; outline: none; }
.login-cuerpo input:focus { border-color: var(--mercury); box-shadow: 0 0 0 3px rgba(0,58,98,.15); }
.login-cuerpo button { margin-top: 22px; font: inherit; font-weight: 600; color: #fff; background: var(--mercury); border: 0; border-radius: 8px; padding: 12px; cursor: pointer; }
.login-cuerpo button:hover { background: #002642; }
.login-cuerpo a { margin-top: 12px; color: var(--mercury); }
.login-aviso { background: #fdecea; color: #b71c1c; border: 1px solid #f5c2c0; border-radius: 8px; padding: 10px 12px; font-size: .85rem; margin-bottom: 4px; }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 2000; padding: 10px 16px; background: #fff3cd; box-shadow: 0 -1px 4px rgba(0,0,0,.2); }
#blazor-error-ui .reload { margin-left: 8px; }