/* ============================================================
   Vertical CRUD layout (vc-*)
   Contract:
   - .vc-page: ocupa el 100% del padre, sin scroll propio.
   - .vc-body: layout horizontal de paneles, flex con min-height: 0.
   - .vc-left / .vc-right: tamaño y posición del panel.
   - .vc-full: el izquierdo ocupa todo cuando no hay derecho.
   - .vc-panel: shell visual (borde, fondo, sombra), sin scroll propio.
   - .vc-list: contenedor de la lista, la grilla maneja su propio scroll.
   - .vc-detail: contenedor del formulario, con scroll vertical propio.
   - .vc-detail-actions: alineación derecha de botones del detalle.

   CSS specialization rule:
   - This file: ONLY generic vc-* classes reusable across all modules.
   - Entity styles: one file per domain entity (e.g. empresa.css, kanban.css).
   - Tool styles: one file per shared tool (e.g. fileupload.css).
   - NEVER add entity-specific or tool-specific classes here.
   ============================================================ */

/* Host: anular padding del area de contenido cuando hay vc-page */
.mainlayout-body-content:has(.vc-page) {
    padding: 0;
    overflow: hidden;
}

/* Página */
.vc-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 8px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Body horizontal */
.vc-body {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Paneles */
.vc-left,
.vc-right {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    height: 100%;
    min-height: 0;
    min-width: 0;
    transition: flex-basis 300ms ease, max-width 300ms ease;
}

.vc-left {
    flex: 0 0 calc(58% - 4px);
    max-width: calc(58% - 4px);
}

.vc-right {
    flex: 0 0 calc(42% - 4px);
    max-width: calc(42% - 4px);
}

/* Al cerrar el detalle el panel vuelve a ancho completo SIN transición: el ensanchado es
   instantáneo para que el buscador y el switch reaparezcan con el panel ya completo, sin
   que el título largo (ej. "Centros de costo") salte a 2 líneas durante una animación.
   La transición sí se conserva al abrir (ver .vc-left / .vc-right arriba). */
.vc-left.vc-full {
    flex: 1 1 100%;
    max-width: 100%;
    transition: none;
}

/* Shell visual */
.vc-panel {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    overflow: hidden;
}

/* Lista */
.vc-list {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.vc-list .mud-data-grid {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.vc-list .mud-data-grid-toolbar,
.vc-list .mud-table-pagination {
    flex-shrink: 0;
    min-width: 0;
}

.vc-list .mud-table-container {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

/* Detalle */
.vc-detail {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    box-sizing: border-box;
}

.vc-detail .mud-form {
    width: 100%;
}

.vc-detail .mud-grid {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.vc-detail .mud-grid-item {
    min-width: 0;
}

.vc-detail-actions {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.vc-detail-section {
    margin-top: 40px;
}

/* Switch de bloqueo/edición del header del CRUD (isLocked). El label tiene ancho fijo
   para que el switch no se desplace al alternar entre "Solo lectura" y "Modificar". */
.vc-lock-switch-label {
    display: inline-block;
    width: 6.5em;
}

/* Subtítulo de sección dentro de vc-detail (ej. Domicilio, Contacto).
   Distingue visualmente el encabezado de una subsección de los labels de MudBlazor. */
.vc-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
}

.vc-section-header::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--mud-palette-primary);
    opacity: 0.3;
}

/* Toolbar layout
   Usado dentro de ToolBarContent de MudDataGrid (listas).
   MudBlazor inyecta padding y min-height en mud-toolbar; los neutralizamos
   para que .vc-toolbar controle completamente el espaciado, igual que
   vc-tree-toolbar en los árboles. */
.vc-list .mud-toolbar {
    min-height: unset !important;
    height: auto !important;
    padding: 0 !important;
}

.vc-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.vc-toolbar-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.vc-toolbar-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Filas clickeables */
.vc-list .mud-table-row {
    cursor: pointer;
}

/* Search field utility para toolbars de lista y árbol */
.vc-list-search {
    width: 300px;
    max-width: 300px;
}

/* Colapso del toolbar al abrir el detalle.
   Cuando se abre el CRUD, .vc-left pierde .vc-full y el panel de lista se angosta.
   Ocultamos el buscador y los filtros de estado para que el título, el botón Nuevo
   y el selector de empresa no se deformen ni se envuelvan. Vuelven a mostrarse al
   cerrar el detalle (lista a pantalla completa).
   - Grillas (MudDataGrid): todos los filtros viven en .vc-toolbar-right → se oculta entero.
   - Árboles (vc-tree-toolbar, layout plano): el buscador ya usa .vc-list-search; el
     switch de estado debe marcarse con .vc-list-filter para colapsar igual.

   El reaparecer sin reflow del título depende de que el ensanchado del panel al cerrar
   sea instantáneo (ver `transition: none` en .vc-left.vc-full): así los filtros vuelven
   con el panel ya a ancho completo y el título largo no salta a 2 líneas. */
.vc-left:not(.vc-full) .vc-toolbar-right,
.vc-left:not(.vc-full) .vc-list-search,
.vc-left:not(.vc-full) .vc-list-filter {
    display: none;
}

/* Hierarchical list (vc-tree) */
.vc-tree-toolbar {
    flex-shrink: 0;
    padding: 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Selector de empresa en toolbar de árbol y listas */
.vc-empresa-select {
    min-width: 180px;
    max-width: 260px;
}

.vc-empresa-select .mud-input-root-outlined {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    border-radius: 20px;
    transition: background-color 150ms ease;
}

.vc-empresa-select:hover .mud-input-root-outlined {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
}

.vc-empresa-select .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mud-palette-primary);
    border-width: 1.5px;
    border-radius: 20px;
    opacity: 0.5;
    transition: opacity 150ms ease;
}

.vc-empresa-select:hover .mud-input-outlined .mud-input-outlined-border {
    opacity: 0.9;
}

.vc-empresa-select .mud-input-root {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--mud-palette-primary);
}

.vc-empresa-select .mud-input-label {
    display: none;
}

.vc-empresa-select .mud-select-icon,
.vc-empresa-select .mud-input-adornment-end {
    display: none;
}

.vc-empresa-select .mud-input-root input {
    cursor: pointer;
}

.vc-tree {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 8px;
}

.vc-tree-codigo {
    font-weight: 600;
    min-width: 80px;
}

/* Responsive */
@media (max-width: 900px) {
    .vc-body {
        flex-direction: column;
        overflow: visible;
    }

    .vc-left,
    .vc-right {
        flex: 0 0 auto;
        max-width: 100%;
        min-height: 40vh;
    }
}

@media (max-width: 600px) {
    .vc-list-search {
        width: 100%;
    }
}


/* ============================================================
   Cursor en modo bloqueado (isLocked / ReadOnly / Disabled)
   Cuando un campo MudBlazor esta en ReadOnly o Disabled dentro
   del panel de detalle, el navegador muestra el cursor de texto
   (I-beam), lo que sugiere edicion. Las reglas siguientes lo
   reemplazan por el cursor default en todo el vc-detail.
   ============================================================ */

/* MudTextField / MudDatePicker en ReadOnly */
.vc-detail .mud-input-root-adorned-end input[readonly],
.vc-detail .mud-input-root input[readonly],
.vc-detail .mud-input input[readonly] {
    cursor: default;
}

/* MudTextField / MudAutocomplete / MudSelect en Disabled */
.vc-detail .mud-disabled input,
.vc-detail .mud-disabled textarea,
.vc-detail .mud-disabled .mud-input-slot {
    cursor: default;
}