/* =========================================================
   AXIOMA OVERRIDES v9 (reingeniería de controles)
   SOLO selectores .mud-* para densidad y comportamiento.
   Colores y tipografía base los maneja AdminDashboardTheme.cs.
   ========================================================= */

/* ---------------------------------------------------------
   1. TIPOGRAFÍA BASE - 13px consistente con --ax-font-size-base
   --------------------------------------------------------- */

.mud-input input,
.mud-input-control input,
.mud-picker-textfield input,
.mud-input-slot,
.mud-input-text,
.mud-select .mud-input-slot,
.mud-select .mud-select-input,
.mud-radio .mud-typography-body1,
.mud-checkbox .mud-typography-body1,
.mud-radio-content,
.mud-checkbox-content,
.mud-input-control .mud-typography,
.mud-typography-body1,
.mud-typography-body2 {
  font-size: var(--ax-font-size-lg);
  color: var(--ax-text-secondary) !important;
}

/* Los botones solo heredan la escala tipográfica del sistema. Su color lo decide
   MudBlazor según el color del sitio: relleno = texto de contraste (blanco),
   texto/outlined = color de marca. Forzar aquí un color rompía el contraste de
   los botones rellenos (p. ej. "Guardar" oscuro sobre el primario). */
.mud-button {
  font-size: var(--ax-font-size-lg);
}

input[type="number"],
input[type="tel"],
input[type="email"],
input[type="text"] {
  font-size: var(--ax-font-size-lg);
}

/* ---------------------------------------------------------
   2. DENSIDAD DE GRID
   --------------------------------------------------------- */

.mud-grid-item {
  padding-top: 2px;
  padding-bottom: 2px;
}

/* ---------------------------------------------------------
   3. JERARQUÍA TIPOGRÁFICA GLOBAL
   Nivel          Peso
   Section Title  600
   Label          500
   Input Content  400
   Readonly Value 600
   Helper Text    400
   --------------------------------------------------------- */

/* Labels: guían, no compiten */
.mud-input-label,
.mud-input-control .mud-input-label-outlined {
  font-weight: 500;
  font-size: var(--ax-font-size-base);
  color: var(--ax-text-secondary);
}

/* Contenido editable: 13px / 450 sobre tinta (v9.1 — patron OpenRouter) */
.mud-input input,
.mud-input-control input,
.mud-input .mud-input-slot,
.mud-input-control .mud-input-slot,
.mud-select .mud-select-input {
  font-weight: var(--ax-font-weight-body) !important;
  font-size: var(--ax-font-size-base) !important;
  color: var(--ax-text-primary) !important;
  line-height: 1.35;
}

/* Valores readonly: peso semibold para destacar */
.mud-input[readonly] .mud-input-slot,
.mud-input-control[readonly] .mud-input-slot {
  font-weight: 600;
  color: var(--ax-text-primary);
}

/* Helper text: peso normal, pequeño */
.mud-input-helper-text {
  font-weight: 400;
}

/* Tablas: header semibold, contenido normal */
.mud-table-head .mud-table-cell {
  font-weight: var(--ax-grid-header-weight);
  color: var(--ax-grid-header-text);
  font-size: var(--ax-font-size-sm);
  line-height: var(--ax-line-height-sm);
}

.mud-table-cell {
  font-weight: 400;
  color: var(--ax-grid-text);
  font-size: var(--ax-font-size-sm);
  line-height: var(--ax-line-height-sm);
}

/* =========================================================
   4. CONTROLES DE ENTRADA (reingeniería)
   Densidad base:
   · Inputs de 1 línea: 32px, texto centrado (v9.3 · B′ borderless hasta hover).
   · Textarea multiline: crece con el contenido, padding 8px.
   · Inputs con icono inicial (búsqueda): 32px.
   · Sin !important en cascada; cada tipo en su bloque.
   ========================================================= */

/* --- Labels outlined (posición) --- */
.mud-input-control .mud-input-label-outlined.mud-input-label-inputcontrol {
  transform: translate(12px, 6px) scale(1);
}
.mud-input-control .mud-input-label-outlined.mud-input-label-inputcontrol.mud-shrink {
  transform: translate(12px, -7px) scale(0.75);
}

/* Buscador del directorio (Explorer): sin label flotante. El texto de ayuda va
   DENTRO del recuadro (Placeholder) y desaparece al primer carácter, así que el
   control no reserva aire arriba ni desplaza ningún label sobre el borde. */

/* --- Márgenes del control --- */
.mud-input-control { margin-top: 0; margin-bottom: 0; }
.mud-input-control-helper-container { margin-top: 0; min-height: 10px; }

/* --- Placeholder --- */
.mud-input ::placeholder,
.mud-input-control ::placeholder,
.mud-select ::placeholder {
  color: var(--ax-text-placeholder) !important;
  opacity: 1;
  /* Más pequeño que el texto del campo, para que se lea como ayuda. */
  font-size: var(--ax-font-size-sm);
}

/* --- Borde outlined + foco (skin B1 "Caja viva" · alternativainputs2:
       outlined permanente gris calido con sombra interior, hover endurece
       la linea, foco = anillo indigo sobre papel aclarado). Especificidad
       igualada a MudBlazor 8.15 para mandar sobre --mud-palette-lines-inputs. --- */
.mud-input.mud-input-outlined .mud-input-outlined-border {
  border-width: 1px;
  border-radius: var(--ax-radius);
  border-color: var(--ax-gray-200);
}
.mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover .mud-input-outlined-border {
  border-color: var(--ax-gray-400);
}
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border,
.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
  border-width: 1px !important;
  border-color: var(--ax-primary) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ax-primary) 12%, transparent) !important;
}

/* Error (B1): caja coral siempre visible (borde + tinte de texto) */
.mud-input-control .mud-input.mud-input-error .mud-input-outlined-border {
  border-color: var(--ax-error) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ax-error) 12%, transparent) !important;
}
.mud-input-control .mud-input.mud-input-error > input.mud-input-root {
  color: var(--ax-error-text) !important;
}

/* --- Disabled (B1): caja gris solida, dato atenuado, sin sombra --- */
.mud-input.mud-input-outlined.mud-input-disabled .mud-input-outlined-border {
  border-color: var(--ax-gray-200);
  background-color: var(--ax-gray-100);
  box-shadow: none;
}
.mud-input-control .mud-input.mud-input-disabled {
  background: var(--ax-gray-100);
  color: var(--ax-text-muted);
  box-shadow: none;
}

/* --- Boton limpiar (X): tenue, no compite con el adornamiento --- */
.mud-input-clear-button {
  color: var(--ax-text-muted);
}
.mud-input-clear-button .mud-icon-root {
  font-size: var(--ax-font-size-md);
}
.mud-input-clear-button:hover {
  color: var(--ax-text-primary);
}

/* --- Switch off: pista legible sobre superficie blanca --- */
.mud-switch-track.mud-default {
  background-color: var(--ax-alpha-line-strong);
}

/* --- Switch compacto (opciones "Enviar factura por...") ---
   El label se renderiza como
   <p class="mud-typography mud-typography-body1 mud-switch mud-switch-label-medium">
   (NO existe `.mud-switch-label`), y MudBlazor lo fija con
   `.mud-switch-label-medium{font-size:1rem !important}` = 16px. Se iguala al
   label del sitio (.ax-form-field-label = base + 4px) cubriendo las tres
   variantes de tamaño del componente. */
.ax-switch-compact { font-size: calc(var(--ax-font-size-base) + 4px); }
.ax-switch-compact .mud-switch-label-medium,
.ax-switch-compact .mud-switch-label-small,
.ax-switch-compact .mud-switch-label-large {
  font-size: calc(var(--ax-font-size-base) + 4px) !important;
}

/* =========================================================
   INPUTS DE UNA LÍNEA — 23.4px (−10% de 26px, densidad B'),
   texto centrado
   ========================================================= */
.mud-input-control .mud-input,
.mud-input-control .mud-input.mud-input-outlined {
  height: 23.4px;
  min-height: 23.4px;
  padding-top: 0;
  padding-bottom: 0;
}
.mud-input-control .mud-input.mud-input-outlined > input.mud-input-root,
.mud-input-control .mud-input.mud-input-outlined > div.mud-input-slot {
  height: 23.4px;
  min-height: 23.4px;
  line-height: 23.4px;
  padding: 0 10px;
}

/* =========================================================
   TEXTAREA MULTILINE — auto, contenido espaciado
   (NO recibe la altura/padding de 1 línea)
   ========================================================= */
/* MudBlazor 8.15 no agrega mud-input-textarea al contenedor cuando usa Lines.
   Detectamos el textarea real para no heredar la altura de 32px de los inputs. */
.mud-input-control .mud-input.mud-input-outlined:has(> textarea.mud-input-slot) {
  height: auto;
  min-height: 84px;
  padding-top: 0;
  padding-bottom: 0;
}
.mud-input-control .mud-input.mud-input-outlined.mud-input-textarea > textarea.mud-input-root,
.mud-input-control .mud-input.mud-input-outlined > textarea.mud-input-slot {
  height: auto;
  min-height: 88px;
  padding: 10px 10px;
  line-height: 1.5;
  resize: vertical;
  overflow-y: auto;
  box-sizing: border-box;
}

/* =========================================================
   SELECTS
   ========================================================= */
.mud-select .mud-input-slot,
.mud-select .mud-select-input {
  padding: 0 10px;
  font-size: var(--ax-font-size-base);
  color: var(--ax-text-primary) !important;
}
.mud-select .mud-input-adornment-end .mud-icon-button { padding: 3px; }
.mud-select .mud-input-adornment-end { margin-right: 3px; }
.mud-select-icon .mud-input-slot {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mud-select-icon .mud-input-slot .mud-icon { margin-right: 8px; }

/* =========================================================
   PICKERS (date/numeric)
   ========================================================= */
.mud-picker-textfield .mud-input-slot { font-size: var(--ax-font-size-base); }

/* =========================================================
   ADORNMENTS (iconos) — 30px; inputs con icono inicial 34px
   ========================================================= */
.mud-input-control .mud-input-adornment-start,
.mud-input-control .mud-input-adornment-end {
  height: 26px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
}
.mud-input-adornment-start .mud-icon-root,
.mud-input-adornment-end .mud-icon-root { font-size: 1rem; }

/* Inputs con icono inicial (búsqueda/filtros): 30px */
.mud-input-control:has(.mud-input-adornment-start) .mud-input,
.mud-input-control:has(.mud-input-adornment-start) .mud-input.mud-input-outlined {
  height: 30px;
  min-height: 30px;
  border-radius: var(--ax-radius);
}
.mud-input-control:has(.mud-input-adornment-start) .mud-input.mud-input-outlined > input.mud-input-root,
.mud-input-control:has(.mud-input-adornment-start) .mud-input.mud-input-outlined > div.mud-input-slot {
  height: 30px;
  min-height: 30px;
  line-height: 30px;
}
.mud-input-control:has(.mud-input-adornment-start) .mud-input-adornment-start,
.mud-input-control:has(.mud-input-adornment-start) .mud-input-adornment-end {
  height: 30px;
  min-height: 30px;
}
.mud-input-control:has(.mud-input-adornment-start) .mud-input-adornment-start .mud-icon-root {
  color: var(--ax-text-muted);
  font-size: 1rem;
}

/* Buscador del directorio: 34.5px (30px +15%) */
.explorer-search-box .mud-input-control .mud-input,
.explorer-search-box .mud-input-control .mud-input.mud-input-outlined,
.explorer-search-box .mud-input-control .mud-input > input.mud-input-root,
.explorer-search-box .mud-input-adornment-start,
.explorer-search-box .mud-input-adornment-end {
  height: 34.5px;
  min-height: 34.5px;
  line-height: 34.5px;
}

/* Hint centrado en la altura real del input (34.5px), sin label flotante que
   reserve aire arriba. */
.explorer-search-box .mud-input-control .mud-input.mud-input-outlined > input.mud-input-root {
  height: 34.5px;
  min-height: 34.5px;
  line-height: 34.5px;
  padding: 0 10px;
}

/* --- Fondo de inputs (skin B1 "Caja viva"): papel con sombra interior de 1px
       en reposo; en foco el papel se aclara (2% primary) y la sombra interior
       cede ante el anillo exterior (que vive en el borde) --- */
.mud-input-control .mud-input.mud-input-outlined {
  background: var(--ax-bg-input);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ax-gray-900) 3%, transparent);
}
.mud-input-control .mud-input.mud-input-outlined.mud-focused,
.mud-input-control .mud-input.mud-input-outlined:focus-within {
  background: color-mix(in srgb, var(--ax-primary) 2%, var(--ax-bg-input));
  box-shadow: none;
}
.mud-input-control .mud-input.mud-input-outlined .mud-input-slot { background: transparent; }

/* Filled (B1): el valor cargado sube a 600. Solo detectable por CSS en campos
   con placeholder; los demas quedan en el peso base (limitacion de MudBlazor,
   que no expose clase de "tiene valor"). */
.mud-input-control .mud-input.mud-input-outlined > input[placeholder]:not(:placeholder-shown) {
  font-weight: 600;
}

/* =========================================================
   CONTROLES DENSOS (checkbox/radio/switch) + grid
   ========================================================= */
.mud-checkbox-dense, .mud-radio-dense { padding: 2px; margin: 0; }
.mud-checkbox-dense .mud-typography-body1,
.mud-radio-dense .mud-typography-body1 { font-size: var(--ax-font-size-lg); }
.mud-switch-dense .mud-switch-base { padding: 3px; }
.mud-grid-spacing-1 > .mud-grid-item { padding: 2px; }
.mud-grid-spacing-2 > .mud-grid-item { padding: 2px; }
.mud-input-control .mud-input-helper-text { font-size: var(--ax-font-size-xs); }

/* ---------------------------------------------------------
   5. TABLAS DENSAS
   --------------------------------------------------------- */

.mud-table-cell {
  padding-top: 4px;
  padding-bottom: 4px;
}

.mud-table-head .mud-table-cell {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Centrar todos los headers de MudDataGrid */
.mud-data-grid .mud-table-head .mud-table-cell .column-header {
  justify-content: center !important;
}

.mud-data-grid .mud-table-head .mud-table-cell .column-header .column-options {
  position: absolute;
  right: 8px;
}

/* ---------------------------------------------------------
   6. MUD MAIN CONTENT
   --------------------------------------------------------- */

.mud-layout,
.mud-layout .mud-main-content,
.mud-main-content {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.mud-main-content {
  /* Fondo de página PLANO (--ax-page-bg, hoy #F1F4F8). La propiedad `background` admite
     color o imagen, así que también sirve si la página vuelve a un degradado. */
  background: var(--ax-page-bg);
  min-height: 100vh;
  padding-top: var(--ax-appbar-height) !important;
  transition: padding-left 0.3s ease;
}

.mud-layout .mud-main-content.drawer-open,
.mud-main-content.drawer-open {
  padding-left: var(--ax-drawer-width) !important;
}

.mud-layout .mud-main-content.drawer-closed,
.mud-main-content.drawer-closed {
  padding-left: 0 !important;
}

/* ---------------------------------------------------------
   7. RESPONSIVE MOBILE INPUTS
   --------------------------------------------------------- */

@media (max-width: 599px) {
  .mud-layout,
  .mud-layout .mud-main-content,
  .mud-main-content,
  .mud-layout .mud-main-content.drawer-open,
  .mud-main-content.drawer-open,
  .mud-layout .mud-main-content.drawer-closed,
  .mud-main-content.drawer-closed {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* La altura del AppBar la reserva SOLO el contenido, nunca el .mud-layout:
     el AppBar es position:fixed, de modo que un padding-top en el layout se
     suma al del .mud-main-content y duplica el hueco bajo el AppBar (bug mobile:
     el panel arrancaba 94px mas abajo). */
  .mud-layout .mud-main-content,
  .mud-main-content,
  .mud-layout .mud-main-content.drawer-open,
  .mud-main-content.drawer-open,
  .mud-layout .mud-main-content.drawer-closed,
  .mud-main-content.drawer-closed {
    padding-top: var(--ax-appbar-height) !important;
  }

  .mud-input-control {
    margin-top: 2px;
    margin-bottom: 0;
  }

  .mud-input-control .mud-input,
  .mud-input-control .mud-input.mud-input-outlined {
    min-height: 26px;
  }
}

/* ---------------------------------------------------------
   8. SELECT CON ICONO + casos puntuales
   --------------------------------------------------------- */

.ax-select-bool.mud-input-control { margin-bottom: 20px; }
.ax-select-bool.mud-input-control .mud-input { padding-bottom: 0; }
.mud-select-icon.mud-input-control { padding-bottom: 22px; }

/* MudSelect popover de Código DIAN: min-width */
.mud-select-popover-dian { min-width: 200px; }
.mud-select-popover-dian .mud-list-item { min-width: 200px; white-space: nowrap; }

/* ---------------------------------------------------------
   10. SNACKBAR: no ocultar la fila de acciones del AppBar
   ---------------------------------------------------------
   La posición por defecto de MudBlazor (TopCenter) coloca el
   contenedor con top:16px, sobre la segunda fila del AppBar
   donde viven Guardar/Cancelar. Se baja lo mínimo necesario:
   arrancar justo debajo de las dos filas del AppBar (ya medidas
   por --ax-appbar-height) más una separación pequeña. */

.mud-snackbar-location-top-center,
.mud-snackbar-location-top-left,
.mud-snackbar-location-top-right {
  top: calc(var(--ax-appbar-height) + var(--ax-space-2)) !important;
}

.mud-progress-linear { height: 2px !important; }
.mud-progress-linear .mud-progress-linear-bar {
  background-color: var(--ax-primary) !important;
}
.mud-progress-linear.mud-progress-indeterminate .mud-progress-linear-bar:first-child {
  animation-duration: 1.5s !important;
}
.mud-progress-linear.mud-progress-indeterminate .mud-progress-linear-bar:last-child {
  animation-duration: 1.2s !important;
}

/* =========================================================
   11. INPUTS MATERIAL — LABEL FLOTANTE (v10 · estándar global)
   =========================================================
   Unifica el control de captura: la etiqueta va DENTRO del control
   (parámetro Label) y flota al enfocar / llenar. Reemplaza el patrón
   FormField + label externo y el modo fila (.panel-body--rows).
   Altura base 28px (densidad ajustada, −22% respecto a la base de 36px). Este bloque va al final para ganar por orden de
   fuente sobre las reglas de densidad previas. Fuente de verdad del
   skin de inputs; los `.razor` NO deben redefinirlo por página.
   ========================================================= */

/* --- Caja base (outlined) --- */
.mud-input-control {
  margin-top: 0;
  margin-bottom: 0;
}

.mud-input-control .mud-input,
.mud-input-control .mud-input.mud-input-outlined {
  height: 28px;
  min-height: 28px;
}

/* Input «Superficie plana» (outlined): caja con borde completo, relleno de superficie y sin
   sombra. Alternativa 01 del catálogo de fondos de input. */
.mud-input-control .mud-input.mud-input-outlined {
  background: var(--ax-surface);
  border-radius: var(--ax-radius);
  box-shadow: none;
}

.mud-input-control .mud-input.mud-input-outlined.mud-focused,
.mud-input-control .mud-input.mud-input-outlined:focus-within {
  background: var(--ax-surface);
  box-shadow: none;
}

.mud-input-control .mud-input.mud-input-outlined > input.mud-input-root,
.mud-input-control .mud-input.mud-input-outlined > div.mud-input-slot {
  height: 28px;
  min-height: 28px;
  line-height: 28px;
  padding: 0 14px;
  font-size: var(--ax-font-size-base) !important;
}

/* --- Borde y foco (2px primary, sin anillo) --- */
/* Caja outlined de borde completo (1px). */
.mud-input.mud-input-outlined .mud-input-outlined-border {
  border-width: 1px;
  border-radius: var(--ax-radius);
  border-color: var(--ax-border);
}

.mud-input.mud-input-outlined:not(.mud-disabled):hover .mud-input-outlined-border {
  border-color: var(--ax-border-focus);
}

/* Foco = borde de marca (1px, sin anillo). */
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border,
.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
  border-width: 1px !important;
  border-color: var(--ax-border-focus) !important;
  box-shadow: none !important;
}

/* --- Label flotante --- */
.mud-input-control .mud-input-label-outlined {
  font-size: var(--ax-font-size-base) !important;
  font-weight: 400 !important;
  color: var(--ax-text-secondary) !important;
}

.mud-input-control .mud-input-label-outlined.mud-input-label-inputcontrol {
  transform: translate(12px, 7px) scale(1);
}

/* AxNumeric dibuja su etiqueta como <legend> dentro del fieldset outlined:
   igual escala que el label estándar para que no resalte sobre el resto. */
.mud-input-control .mud-input-outlined-border > legend {
  font-size: var(--ax-font-size-base);
  font-weight: 500;
  color: var(--ax-text-secondary);
}

.mud-input-control .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-input-control .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
  transform: translate(12px, -9px) scale(0.85) !important;
  color: var(--ax-text-secondary) !important;
  font-weight: 500 !important;
}

/* El color de marca en el label solo cuando el input tiene foco */
.mud-input-control .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
  color: var(--ax-primary) !important;
}

/* --- Adornamientos (coherentes con 28px) --- */
.mud-input-control .mud-input-adornment-start,
.mud-input-control .mud-input-adornment-end {
  height: 28px;
  min-height: 28px;
}

.mud-input-control:has(.mud-input-adornment-start) .mud-input,
.mud-input-control:has(.mud-input-adornment-start) .mud-input.mud-input-outlined {
  height: 28px;
  min-height: 28px;
}

.mud-input-control:has(.mud-input-adornment-start) .mud-input.mud-input-outlined > input.mud-input-root,
.mud-input-control:has(.mud-input-adornment-start) .mud-input.mud-input-outlined > div.mud-input-slot {
  height: 28px;
  min-height: 28px;
  line-height: 28px;
}

.mud-input-control:has(.mud-input-adornment-start) .mud-input-adornment-start,
.mud-input-control:has(.mud-input-adornment-start) .mud-input-adornment-end {
  height: 28px;
  min-height: 28px;
}

/* --- Apilado de campos en paneles (sin modo fila) --- */
.panel-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Etiqueta de grupo para controles que NO son un input (segmentados,
   checklists, contenido compuesto) donde FormField ya no se usa. */
.ax-group-label {
  display: block;
  font-size: var(--ax-font-size-sm);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ax-text-secondary);
  margin-bottom: 6px;
}