/* ═══════════════════════════════════════════════════════════════════════════
   MotocentroJE — Global Styles  (2026 Modern Design)
   All CSS custom properties are defined here and consumed across all pages.
═══════════════════════════════════════════════════════════════════════════ */

/* [2026-06-01] Fix scroll del MudDataGrid en Facturacion Electronica.
   Height="100%" no activaba el scroll interno; forzamos layout flex para que
   el cuerpo scrollee y se vean TODAS las filas (con encabezado fijo). */
.ecf-shell .mud-table {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
.ecf-shell .mud-table .mud-table-container {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
}

/* ── GLOBAL: Todos los campos de texto en MAYÚSCULA ────────────────────── */
input[type="text"],
input[type="search"],
input[type="email"],
input:not([type]),
textarea,
.mud-input-root input,
.mud-input-root textarea,
.mud-select-input {
  text-transform: uppercase !important;
}

/* Excepción: campos de contraseña NO en mayúscula */
input[type="password"] {
  text-transform: none !important;
}

/* ── GLOBAL: Limitar ancho de campos de fecha para evitar desorden ──────── */
.mud-picker-input input {
  max-width: 120px !important;
  letter-spacing: 0.5px;
}

/* ── GLOBAL: Dialogs — header y botón cerrar más visibles ──────────────── */
.mud-dialog .mud-dialog-title {
  background: linear-gradient(135deg, #0D47A1 0%, #1565C0 55%, #1976D2 100%) !important;
  color: white !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

.mud-dialog .mud-dialog-title .mud-icon-button {
  color: white !important;
  background: rgba(255,255,255,0.15) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
}

.mud-dialog .mud-dialog-title .mud-icon-button:hover {
  background: #B71C1C !important;
  color: white !important;
}

/* ── Design Tokens ──────────────────────────────────────────────────────── */
:root {
  /* Radius scale */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  /* Shadow scale */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08);
  --shadow-xl:  0 16px 40px rgba(0,0,0,0.14), 0 8px 16px rgba(0,0,0,0.10);

  /* Transition */
  --transition:       all 0.2s ease;
  --transition-fast:  all 0.12s ease;
  --transition-slow:  all 0.35s ease;

  /* Brand palette */
  --primary:          #1976D2;
  --primary-dark:     #1565C0;
  --primary-darker:   #0D47A1;
  --primary-light:    #E3F2FD;
  --primary-soft:     #BBDEFB;

  /* Semantic surfaces */
  --success-soft:     #E8F5E9;
  --success:          #2E7D32;
  --danger-soft:      #FFEBEE;
  --danger:           #C62828;
  --warning-soft:     #FFF8E1;
  --warning:          #F57F17;
  --info-soft:        #E1F5FE;
  --info:             #0277BD;

  /* Layout surfaces */
  --surface:          #FAFBFC;
  --surface-raised:   #FFFFFF;
  --bg-page:          #F0F4F8;
  --border:           #E2E8F0;
  --border-subtle:    #EEF2F7;

  /* Text */
  --text-primary:     #1A202C;
  --text-secondary:   #4A5568;
  --text-muted:       #718096;
  --text-faint:       #A0AEC0;

  /* Status row colours — softer than raw #4CAF50 / #F44336 */
  --row-ok-bg:        #F0FBF0;
  --row-ok-border:    #C6E6C6;
  --row-blocked-bg:   #FFF5F5;
  --row-blocked-border: #FFCDD2;
}

/* ── Base Reset ─────────────────────────────────────────────────────────── */
html, body {
  font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a, .btn-link {
  color: var(--primary);
  transition: var(--transition-fast);
}

/* ── Focus ring — consistent across all inputs / buttons ────────────────── */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.8), 0 0 0 4px rgba(25,118,210,0.35);
  outline: none;
}

/* ── Global content spacing ─────────────────────────────────────────────── */
.content {
  padding-top: 1.1rem;
}

h1:focus {
  outline: none;
}

/* ── Form validation ────────────────────────────────────────────────────── */
.valid.modified:not([type=checkbox]) {
  outline: 1.5px solid #38A169;
  border-radius: var(--radius-xs);
}

.invalid {
  outline: 1.5px solid #E53E3E;
  border-radius: var(--radius-xs);
}

.validation-message {
  color: #E53E3E;
  font-size: 11px;
}

/* ── Blazor error boundary ──────────────────────────────────────────────── */
.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #C53030;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

  .blazor-error-boundary::after {
    content: "An error has occurred."
  }

/* ── Checkbox ────────────────────────────────────────────────────────────── */
.darker-border-checkbox.form-check-input {
  border-color: #718096;
  border-radius: 4px;
}

/* ── Floating label placeholder ─────────────────────────────────────────── */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ── Blazor reconnect / error UI ────────────────────────────────────────── */
#blazor-error-ui {
  color-scheme: light only;
  background: #FFFFF0;
  border-top: 2px solid #F6E05E;
  bottom: 0;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

  #blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
  }

/* ══════════════════════════════════════════════════════════════════════════
   SHARED GRID UTILITIES — reusable across all pages
   Each page scopes its own prefix (cf-, mc-, rc-, inv-, caja-, desemb-, rv-)
   These globals complement the per-page scoped styles.
══════════════════════════════════════════════════════════════════════════ */

/* Modern page-level shell cards */
.mc-page-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 76px);
  overflow: hidden;
  font-size: 12px;
  background: var(--bg-page);
}

/* ── Page header band (gradient) ─────────────────────────────────────────── */
.mc-page-header {
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--primary-darker) 0%, var(--primary-dark) 50%, var(--primary) 100%);
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(13,71,161,0.25);
  color: white;
}

/* ── Toolbar band ────────────────────────────────────────────────────────── */
.mc-toolbar {
  flex: 0 0 auto;
  background: #FFFFFF;
  border-bottom: 1px solid var(--border);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--shadow-xs);
}

/* ── Modern table header ─────────────────────────────────────────────────── */
.mc-grid-thead {
  background: linear-gradient(180deg, var(--primary-dark) 0%, var(--primary) 100%);
}

/* ── Grid row base ───────────────────────────────────────────────────────── */
.mc-grid-row {
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.mc-grid-row:hover:not(.mc-grid-row-selected) {
  background: var(--primary-light) !important;
}

.mc-grid-row-selected td {
  background: var(--primary-dark) !important;
  color: white !important;
}

/* ── Status pill badges ──────────────────────────────────────────────────── */
.mc-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.mc-badge-success {
  background: var(--success-soft);
  color: var(--success);
}

.mc-badge-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.mc-badge-warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.mc-badge-info {
  background: var(--info-soft);
  color: var(--info);
}

/* ── Bottom status/action bar ────────────────────────────────────────────── */
.mc-bottom-bar {
  flex: 0 0 auto;
  background: #FFFFFF;
  border-top: 1px solid var(--border);
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  box-shadow: 0 -1px 4px rgba(0,0,0,0.04);
}

/* ── Modern scrollbar ────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--border-subtle);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #CBD5E0;
  border-radius: 10px;
  transition: background 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background: #A0AEC0;
}

/* ── MudBlazor global overrides ──────────────────────────────────────────── */

/* Rounded MudTextField inputs */
.mud-input-outlined .mud-input-outlined-border {
  border-radius: var(--radius-sm) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mud-input-outlined:hover .mud-input-outlined-border {
  border-color: var(--primary) !important;
}

/* MudButton global pill shape */
.mud-button-root {
  border-radius: var(--radius-sm) !important;
  transition: var(--transition) !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
}

.mud-button-root:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm) !important;
}

.mud-button-root:active {
  transform: translateY(0);
}

/* MudChip rounded */
.mud-chip {
  border-radius: 20px !important;
  font-weight: 600 !important;
}

/* MudPaper subtle elevation update */
.mud-paper {
  transition: box-shadow 0.2s ease;
}

/* MudNavLink rounded hover */
.mud-nav-link {
  border-radius: var(--radius-sm) !important;
  margin: 1px 6px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.mud-nav-link:hover {
  background: rgba(25,118,210,0.08) !important;
}

.mud-nav-link.active {
  background: rgba(25,118,210,0.14) !important;
  font-weight: 700 !important;
}

/* MudTabs — modern indicator */
.mud-tabs .mud-tab-active {
  font-weight: 700 !important;
}

/* MudSimpleTable — clean lines */
.mud-simple-table th {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  user-select: none;
  background: transparent !important;  /* let parent <tr> gradient show through */
}

.mud-simple-table td {
  border-bottom: 1px solid var(--border-subtle) !important;
}

/* MudMenu items */
.mud-menu-item {
  border-radius: var(--radius-xs) !important;
  margin: 1px 4px !important;
  transition: background 0.15s ease !important;
}

/* MudSnackbar */
.mud-snackbar {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* MudDialog */
.mud-dialog {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
}

.mud-dialog-title {
  background: linear-gradient(135deg, var(--primary-darker) 0%, var(--primary) 100%) !important;
  color: white !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  padding: 14px 20px !important;
}

/* MudAlert */
.mud-alert {
  border-radius: var(--radius-md) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   MudDatePicker — global fix for all 24+ usages across the app.
   Problems addressed:
     1. Compressed / zero-width input field (flex children collapsing).
     2. Calendar popup clipped by parent overflow:hidden containers.
     3. Inconsistent font-size vs the rest of the 12px UI.
     4. Calendar popup z-index too low — hidden behind dialogs / toolbars.
     5. Dense-margin picker label overlapping the input text.
══════════════════════════════════════════════════════════════════════════ */

/* 1. The host element MudBlazor renders for a DatePicker.
      Force a sensible minimum so flex rows never crush it to 0. */
.mud-picker {
  min-width: 150px !important;
  font-size: 12px !important;
}

/* 2. The actual <input> inside the picker.
      Inherit the 12px from .mud-picker and prevent shrinking. */
.mud-picker input,
.mud-picker .mud-input-slot input,
.mud-picker input.mud-input-root {
  font-size: 12px !important;
  min-width: 0 !important;   /* allow flex to size it, but not crush below 0 */
}

/* 3. The outlined border wrapper — same radius as other inputs. */
.mud-picker .mud-input-outlined .mud-input-outlined-border {
  border-radius: var(--radius-sm) !important;
}

/* 4. Adornment calendar icon — keep it proportionate. */
.mud-picker .mud-input-adornment button,
.mud-picker .mud-input-adornment .mud-icon-button {
  padding: 4px !important;
}
.mud-picker .mud-input-adornment .mud-icon-root {
  font-size: 18px !important;
}

/* 5. The floating/dense label text. */
.mud-picker .mud-input-label {
  font-size: 11px !important;
}

/* 6. Calendar popup container.
      MudBlazor renders .mud-picker-content inside a MudPopover whose
      host is appended to <body> (outside every overflow:hidden ancestor).
      Raise z-index above dialogs (1300) and toolbars. */
.mud-picker-content {
  z-index: 1400 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xl) !important;
  overflow: visible !important;
  /* [Fix 2026-05-14] El popover heredaba el max-width del input padre (140px)
     y solo mostraba 3 columnas en vez de 7. Forzamos ancho minimo del
     calendario completo para que siempre se vean los 7 dias de la semana. */
  min-width: 320px !important;
  width: auto !important;
}

/* Calendario interno — asegurar 7 columnas completas */
.mud-picker-calendar {
  min-width: 296px !important;
}

.mud-picker-calendar-transition {
  min-width: 296px !important;
}

.mud-picker-calendar-week {
  display: flex !important;
  width: 100% !important;
}

.mud-picker-calendar-header-day,
.mud-picker-calendar-day {
  flex: 1 1 0 !important;
  min-width: 36px !important;
}

/* 7. El popover wrapper que MudBlazor appendea a nivel body. */
.mud-popover-provider .mud-popover {
  z-index: 1400 !important;
}

/* El popover que envuelve al picker — sin max-width heredado */
.mud-popover.mud-popover-open {
  max-width: none !important;
}

/* 8. Calendar day cells — compact at 12px scale. */
.mud-picker-calendar-day {
  font-size: 11px !important;
}

.mud-picker-calendar-header-switch {
  font-size: 12px !important;
}

/* 9. Year / month view selectors. */
.mud-picker-year-button,
.mud-picker-month-button {
  font-size: 11px !important;
}

/* 10. Prevent the picker from stretching to 100% when placed inside a
       flex row alongside labels (a common pattern in this project). */
.mud-picker.mud-input-control {
  flex: 0 0 auto !important;
  width: auto !important;
}

/* MudProgressCircular — no style override needed, keep default */

/* ══════════════════════════════════════════════════════════════════════════
   LEAFLET MAP — CSS conflict fixes for MudBlazor + Bootstrap environment
   MudBlazor and Bootstrap both apply `img { max-width: 100%; }` and
   `box-sizing: border-box` globally, which breaks Leaflet tile rendering.
   These overrides MUST be in the global stylesheet so they apply after
   all framework CSS has loaded.
══════════════════════════════════════════════════════════════════════════ */

/* Prevent Bootstrap/MudBlazor img resets from breaking tile images */
.leaflet-container img {
  max-width: none !important;
  max-height: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: inline !important;
}

/* Force tile images to the exact pixel dimensions Leaflet expects */
.leaflet-tile-pane img,
.leaflet-tile {
  width: 256px !important;
  height: 256px !important;
  display: block !important;
  box-sizing: content-box !important;
}

/* Restore box-sizing for Leaflet internals overridden by Bootstrap reboot */
.leaflet-container,
.leaflet-container * {
  box-sizing: content-box;
}

/* Re-apply border-box only where Leaflet explicitly needs it (controls) */
.leaflet-bar,
.leaflet-control,
.leaflet-popup,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip-container {
  box-sizing: border-box !important;
}

/* Zoom control — MudBlazor button reset overrides Leaflet's zoom button sizing */
.leaflet-control-zoom a {
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
  color: #333 !important;
  background: #fff !important;
  border-radius: 2px !important;
  transform: none !important;
  box-shadow: none !important;
  letter-spacing: normal !important;
}

.leaflet-control-zoom a:hover {
  background: #f4f4f4 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* MudBlazor sets font-weight:600 on .mud-button-root — prevent it from
   leaking into Leaflet anchor elements used as buttons */
.leaflet-container a {
  font-weight: normal !important;
  transition: none !important;
}

/* Popup wrapper — nice rounded corners */
.leaflet-popup-content-wrapper {
  border-radius: 8px !important;
  box-shadow: 0 3px 14px rgba(0,0,0,0.22) !important;
  padding: 0 !important;
}

.leaflet-popup-content {
  margin: 12px 14px !important;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

.leaflet-popup-close-button {
  color: #666 !important;
  font-size: 16px !important;
}

/* Attribution text */
.leaflet-container .leaflet-control-attribution {
  font-size: 10px !important;
  background: rgba(255,255,255,0.8) !important;
}

/* Cluster divIcon and custom marker divIcon containers */
.leaflet-marker-icon {
  overflow: visible !important;
}

.leaflet-div-icon {
  background: transparent !important;
  border: none !important;
}

/* Custom marker icon wrapper used by MapaClientes.js */
.mc-map-icon {
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
  position: relative !important;
}

/* Ensure the map pane stacking context is correct */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-pane,
.leaflet-overlay-pane,
.leaflet-shadow-pane,
.leaflet-marker-pane,
.leaflet-tooltip-pane,
.leaflet-popup-pane {
  position: absolute !important;
}

.leaflet-map-pane canvas,
.leaflet-map-pane svg {
  transform-origin: 0 0;
}

/* MudSelect popover inside dialogs — ensure it renders above dialog overlay */
.mud-popover-provider .mud-popover {
  z-index: 1500 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL FONT STANDARDIZATION — MotocentroJE
   Enforces a consistent compact type scale throughout the application.
   All rules use !important to override MudBlazor theme defaults (13px base).

   Scale reference:
     10px — grid headers (th), status bar
     11px — toolbar buttons, grid data cells (td), form labels
     12px — app bar items, sidebar nav, form inputs, dialog body,
             snackbar, MudMenu items, MudSelect dropdown items
     13px / 700 / UPPERCASE — page header gradient bars, dialog titles
══════════════════════════════════════════════════════════════════════════ */

/* ── 1. App bar / top menu items ──────────────────────────────────────── */
/* MudAppBar toolbar content: icon buttons, text, MudMenu triggers         */
.mud-appbar .mud-button-root,
.mud-appbar .mud-icon-button,
.mud-appbar .mud-menu .mud-button-root,
.mud-appbar .mud-icon-root,
.mud-appbar .mud-typography {
  font-size: 12px !important;
}

/* ── 2. Sidebar nav links (MudNavMenu / MudNavLink) ───────────────────── */
.mud-nav-link .mud-nav-link-text,
.mud-nav-link span,
.mud-nav-group-title {
  font-size: 12px !important;
}

/* ── 3. Page header gradient bars (.mc-page-header) ──────────────────── */
.mc-page-header,
.mc-page-header * {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* ── 4. Toolbar buttons and labels (.mc-toolbar) ──────────────────────── */
.mc-toolbar .mud-button-root,
.mc-toolbar .mud-button-label,
.mc-toolbar .mud-icon-button,
.mc-toolbar label,
.mc-toolbar span {
  font-size: 11px !important;
}

/* ── 5. Grid header cells — all MudBlazor table variants ─────────────── */
/* .mud-simple-table th already set above; extend to MudTable / MudDataGrid */
.mud-table th,
.mud-table thead th,
.mud-table .mud-table-head th,
.mud-data-grid th,
.mud-data-grid thead th {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  background: inherit !important;
}

/* ── 6. Grid data cells ───────────────────────────────────────────────── */
.mud-table td,
.mud-table .mud-table-body td,
.mud-simple-table td,
.mud-data-grid td {
  font-size: 11px !important;
}

/* ── 7. Form labels (MudTextField, MudSelect, MudDatePicker labels) ───── */
.mud-input-label,
.mud-input-label-text,
.mud-input-label.mud-input-label-animated,
label.mud-label {
  font-size: 11px !important;
}

/* ── 8. Form input text (typed / selected value inside inputs) ─────────── */
.mud-input input,
.mud-input textarea,
.mud-input .mud-input-slot,
.mud-input-root,
.mud-input-root input,
.mud-autocomplete input,
.mud-select .mud-input-root {
  font-size: 12px !important;
}

/* ── 9. Status bar text — already inline in MainLayout, reinforce here ─── */
/* The fixed bottom bar has font-size:10px inline; these selectors cover
   any future refactoring that moves content to CSS classes.               */
.mc-status-bar,
.mc-status-bar * {
  font-size: 10px !important;
}

/* ── 10. Dialog titles ───────────────────────────────────────────────── */
.mud-dialog-title,
.mud-dialog-title .mud-typography {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

/* ── 11. Dialog body text ────────────────────────────────────────────── */
.mud-dialog-content,
.mud-dialog-content .mud-typography,
.mud-dialog-content p,
.mud-dialog-content span {
  font-size: 12px !important;
}

/* ── 12. Snackbar text ───────────────────────────────────────────────── */
.mud-snackbar .mud-snackbar-content-message,
.mud-snackbar .mud-typography,
.mud-snackbar span {
  font-size: 12px !important;
}

/* ── 13. MudMenu dropdown items ──────────────────────────────────────── */
.mud-menu-item,
.mud-menu-item .mud-typography,
.mud-list-item .mud-list-item-text,
.mud-menu-item span.mud-typography {
  font-size: 12px !important;
}

/* ── 14. MudSelect dropdown option items ─────────────────────────────── */
.mud-select-popover .mud-list-item,
.mud-select-popover .mud-list-item-text,
.mud-select-popover .mud-list-item .mud-typography,
.mud-popover .mud-list-item span.mud-typography,
.mud-list-item-text span {
  font-size: 12px !important;
}

/* ── 15. Bottom status bar reinforcement (selectors used in MainLayout) ── */
/* The actual bar uses inline styles; these cover common utility classes
   placed inside it. No-op if nothing uses these classes, safe to keep.   */
.mc-bottom-bar,
.mc-bottom-bar span,
.mc-bottom-bar .mud-typography {
  font-size: 10px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   NUMERIC FIELD — Right-align all number inputs globally.
   MudNumericField renders type="number" on the inner <input>. Both the
   adorned-end variant (with spinner arrows) and the plain variant are
   covered here.
══════════════════════════════════════════════════════════════════════════ */
.mud-input-root-adorned-end input[type="number"],
.mud-input input[type="number"] {
    text-align: right !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   NUMERIC FIELD SPINNERS — Hide browser-native up/down arrows on all
   number inputs site-wide. MudNumericField's HideSpinButtons removes the
   MudBlazor arrow buttons; these rules remove the native browser ones.
══════════════════════════════════════════════════════════════════════════ */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* ══════════════════════════════════════════════════════════════════════════
   Mensajería interna — pulso rojo de la AppBar cuando hay mensajes sin leer
   [2026-04-22] Se activa aplicando `animation: appbar-pulse` al MudAppBar.
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes appbar-pulse {
    0%, 100% { box-shadow: 0 2px 14px rgba(198,40,40,0.5) !important; }
    50%      { box-shadow: 0 2px 22px rgba(198,40,40,0.9) !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Responsive AppBar — PDA / móvil (Zebra TC56 ~360-480px portrait)
   [2026-04-22]
   - < 600px: ocultar las pills SUCURSAL/USUARIO (liberan ~40% del ancho)
   - < 800px: AppBar scrollable horizontal por si aún no caben todos los iconos
   La info de sucursal/usuario sigue visible en el status bar inferior.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .app-sesion-pill {
        display: none !important;
    }
}

@media (max-width: 800px) {
    .mud-appbar .mud-toolbar {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;           /* Firefox */
    }
    .mud-appbar .mud-toolbar::-webkit-scrollbar {
        display: none;                   /* Chrome/Safari/Edge */
    }
    /* Ningún elemento del toolbar debe encogerse — mantienen su tamaño
       y el contenedor hace scroll horizontal. */
    .mud-appbar .mud-toolbar > * {
        flex-shrink: 0 !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Botones de notificación compactos en AppBar (transferencias)
   [2026-04-22] Mismo estilo que la campanita del chat — icono + badge rojo.
   Se diferencian por color de fondo:
     - tr-notif con gradiente naranja  → Pendientes de despacho
     - tr-notif con gradiente morado   → En tránsito (agrega tr-notif-pulse)
   ══════════════════════════════════════════════════════════════════════════ */
.tr-notif {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    flex-shrink: 0;
}

.tr-notif:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

.tr-notif:active {
    transform: scale(0.95);
}

/* Badge rojo con el número (igual que el de la campanita) */
.tr-notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #D32F2F;
    color: white;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 900;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.35);
    border: 2px solid white;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0;
}

/* Pulso suave para "EN TRÁNSITO" — indica urgencia/movimiento */
.tr-notif-pulse {
    animation: tr-notif-pulse-anim 2s ease-in-out infinite;
}

@keyframes tr-notif-pulse-anim {
    0%, 100% { box-shadow: 0 2px 6px rgba(106,27,154,0.4); }
    50%      { box-shadow: 0 2px 14px rgba(142,36,170,0.85); }
}