/* ============================================================================
   Controla Backoffice - Tema corporativo global
   ----------------------------------------------------------------------------
   Complementa el MudTheme definido en Layout/MainLayout.razor. Su objetivo es
   suavizar los comportamientos por defecto de MudBlazor (Material Design) y
   unificar tipografía, radios y barras de desplazamiento en todo el backoffice.

   Jerarquía de estilos:
   1) MudBlazor.min.css  (cargado primero en index.html)
   2) corporate-theme.css (este archivo, cargado después)
   3) <style> generado en runtime por MudThemeProvider (variables CSS)
   ============================================================================ */

:root {
    /* Tipografía corporativa (se descarga en index.html desde Google Fonts). */
    --controla-font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

    /* Radio corporativo uniforme para inputs, botones y contenedores. */
    --controla-border-radius: 12px;

    /* Scrollbar corporativa: pulgar violeta desaturado de la marca Controla. */
    --controla-scrollbar-size: 10px;
    --controla-scrollbar-thumb: #c7c0d6;
    --controla-scrollbar-thumb-hover: #a79fbe;
}

/* ----------------------------------------------------------------------------
   Tipografía global
   Garantiza la fuente corporativa incluso en layouts que usan el
   MudThemeProvider por defecto (por ejemplo, BlankLayout / Login).
   ---------------------------------------------------------------------------- */
html,
body {
    font-family: var(--controla-font-family);
}

.mud-typography,
.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3,
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6,
.mud-typography-subtitle1,
.mud-typography-subtitle2,
.mud-typography-body1,
.mud-typography-body2,
.mud-typography-button,
.mud-typography-caption,
.mud-typography-overline,
.mud-button {
    font-family: var(--controla-font-family);
}

/* ----------------------------------------------------------------------------
   Inputs: redondeo corporativo forzado
   MudBlazor aplica 4px a los campos "filled" y hereda el radio de layout en los
   "outlined"; aquí se unifica el mismo radio en todos los controles.
   ---------------------------------------------------------------------------- */
.mud-input-control .mud-input-outlined-border {
    border-radius: var(--controla-border-radius);
}

.mud-input-control .mud-input-filled {
    border-radius: var(--controla-border-radius) var(--controla-border-radius) 0 0;
}

/* ----------------------------------------------------------------------------
   MudPaper: saturación del fondo
   Aleja los contenedores (cards, diálogos, tablas) del blanco puro de Material
   aplicando un matiz muy sutil del color primario corporativo. El primer
   background-color queda como respaldo para navegadores sin color-mix().
   ---------------------------------------------------------------------------- */
.mud-paper {
    background-color: var(--mud-palette-surface);
    background-color: color-mix(in srgb, var(--mud-palette-surface) 97%, var(--mud-palette-primary) 3%);
}

/* ----------------------------------------------------------------------------
   Barras de desplazamiento
   Se declaran con mayor especificidad (prefijo html) para ganar al <style>
   que MudThemeProvider inyecta en runtime.
   ---------------------------------------------------------------------------- */
html ::-webkit-scrollbar {
    width: var(--controla-scrollbar-size);
    height: var(--controla-scrollbar-size);
}

html ::-webkit-scrollbar-track {
    background: transparent;
}

html ::-webkit-scrollbar-thumb {
    background-color: var(--controla-scrollbar-thumb);
    border: 2px solid transparent;
    border-radius: calc(var(--controla-scrollbar-size) / 2);
    background-clip: content-box;
}

html ::-webkit-scrollbar-thumb:hover {
    background-color: var(--controla-scrollbar-thumb-hover);
    background-clip: content-box;
}

html body,
html body * {
    scrollbar-width: thin;
    scrollbar-color: var(--controla-scrollbar-thumb) transparent;
}

/* ----------------------------------------------------------------------------
   Subnavegación del detalle de empresa (Nested Routing)
   Transforma el MudNavMenu vertical en una barra horizontal tab-like para
   navegar entre las subrutas de la empresa sin abandonar el contexto visual.
   ---------------------------------------------------------------------------- */
.empresa-subnav {
    padding: 4px;
}

.empresa-subnav .mud-navmenu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
}

.empresa-subnav .mud-nav-link {
    border-radius: var(--controla-border-radius);
    white-space: nowrap;
}

.empresa-subnav .mud-nav-link.active:not(.mud-nav-link-disabled) {
    border-inline-end-style: none;
    border-inline-end-width: 0;
    border-radius: var(--controla-border-radius);
}

/* ----------------------------------------------------------------------------
   Overhaul UI/UX 2026 - Design system complementario
   ----------------------------------------------------------------------------
   Clases utilitarias específicas del backoffice para glassmorphism, tarjetas
   con hover, floating appbar/sidebar y animaciones de aparición.
   ---------------------------------------------------------------------------- */

/* Glassmorphism: superficies translúcidas con desenfoque de fondo. */
.controla-glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: color-mix(in srgb, var(--mud-palette-surface) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
}

/* Tarjetas: transición suave y elevación sutil al hacer hover. */
.controla-card {
    transition: all 0.3s ease-in-out;
}

.controla-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(16, 16, 32, 0.10);
}

/* Filas de tabla: transición suave del color de fondo. */
.mud-table-row {
    transition: background-color 0.3s ease-in-out;
}

/* Floating Appbar: despegada del borde superior con márgenes y redondeo. */
.controla-appbar {
    margin: 12px 16px 0 16px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(16, 16, 32, 0.12);
}

/* Sidebar despegado: márgenes y redondeo para separarlo del borde. */
.controla-drawer {
    margin: 12px 0 12px 12px;
    border-radius: 16px;
    overflow: hidden;
}

.controla-drawer .mud-drawer-content {
    border-radius: 16px;
}

/* Aparición de campos dinámicos (p. ej. esquema de facturación). */
.controla-fade-in {
    animation: controla-fade-in 0.3s ease-in-out;
}

@keyframes controla-fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Menú de usuario del appbar. */
.controla-user-menu {
    min-width: 220px;
}

/* Filtro de estado en el listado de empresas. */
.controla-filtro-estado {
    min-width: 180px;
}

/* Login y contraseña temporal: estilos migrados desde atributos inline */
.controla-login-page {
    height: 100vh;
}

.controla-login-card {
    width: 100%;
    max-width: 450px;
}

.controla-login-icon {
    width: 64px;
    height: 64px;
}

.controla-password-temporal {
    font-family: monospace;
    word-break: break-all;
}

.controla-user-menu-activator {
    cursor: pointer;
}