/* ============================================================
   MWC 1.0.1 THEME CLEAN
   Arquitectura del CSS:
   1) Tokens de tema claro/oscuro
   2) Base y layout compacto
   3) Componentes reutilizables
   4) Gridlists y filtros
   5) Scopes de módulos especiales
   6) Previews/documentos y print

   Regla: los componentes nuevos deben consumir tokens --mwc-*
   y no colores hardcodeados, salvo documentos finales imprimibles.
   ============================================================ */

/* ============================================================
   1. THEME TOKENS / CLARO
   Cambia los colores del sistema aquí.
   ============================================================ */
:root{
  /* Base / superficies */
  --mwc-color-bg:#f3f5f9;
  --mwc-color-bg-soft:#f5f6f9;
  --mwc-color-card:#ffffff;
  --mwc-color-panel:#ffffff;
  --mwc-color-line:#e5e7eb;
  --mwc-color-line-soft:#e7eaf0;
  --mwc-color-row-line:#edf0f5;

  /* Textos generales */
  --mwc-color-title:#111827;
  --mwc-color-subtitle:#334155;
  --mwc-color-text:#111827;
  --mwc-color-muted:#475569;
  --mwc-color-muted-soft:#6b7280;
  --mwc-color-placeholder:#64748b;

  /* Marca / sidebar */
  --mwc-sidebar-bg:#fbfcfe;
  --mwc-sidebar-border:#e8ebf1;
  --mwc-sidebar-link:#475569;
  --mwc-sidebar-link-hover:#111827;
  --mwc-sidebar-link-active:#111827;
  --mwc-sidebar-link-hover-bg:#f0f4f8;
  --mwc-sidebar-active-indicator:#111827;
  --mwc-brand-mark-bg:#111827;
  --mwc-brand-mark-text:#ffffff;
  --mwc-brand-logo-box-bg:transparent;
  --mwc-brand-logo-box-border:transparent;
  --mwc-brand-logo-filter:brightness(0) saturate(100%);
  --mwc-login-mini-logo-filter:brightness(0) saturate(100%);
  --mwc-sidebar-logo-size:46px;
  --mwc-login-full-logo-width:340px;
  --mwc-login-mini-logo-size:74px;
  --mwc-brand-title:#111827;
  --mwc-brand-subtitle:hsl(215, 100%, 50%);

  /* Usuario sidebar */
  --mwc-user-card-bg:#f4f6fa;
  --mwc-user-card-border:#e5e9f0;
  --mwc-user-avatar-bg:#111827;
  --mwc-user-avatar-text:#ffffff;
  --mwc-user-name:#111827;
  --mwc-user-role:#0067f8;
  --mwc-logout-bg:#ffffff;
  --mwc-logout-text:#475569;
  --mwc-logout-border:#e5e9f0;
  --mwc-logout-hover-bg:#f8fafc;
  --mwc-logout-hover-text:#111827;

  /* Cabeceras / dashboard */
  --mwc-hero-bg:#ffffff;
  --mwc-hero-border:#e7eaf0;
  --mwc-page-title:#111827;
  --mwc-page-subtitle:#334155;
  --mwc-eyebrow:#475569;
  --mwc-card-title:#111827;
  --mwc-card-text:#111827;
  --mwc-card-muted:#334155;
  --mwc-stat-label:#334155;
  --mwc-stat-value:#111827;

  /* Alertas importantes */
  --mwc-alert-title:#111827;
  --mwc-alert-text:#1f2937;
  --mwc-alert-bg:#ffffff;
  --mwc-alert-border:#bfdbfe;
  --mwc-birthday-border:#bfdbfe;
  --mwc-pending-border:#fed7aa;
  --mwc-alert-detail-bg:#f8fafc;
  --mwc-flash-info-bg:#eff6ff;
  --mwc-flash-info-border:#bfdbfe;
  --mwc-flash-info-text:#1e3a8a;
  --mwc-flash-success-bg:#ecfdf5;
  --mwc-flash-success-border:#bbf7d0;
  --mwc-flash-success-text:#14532d;
  --mwc-flash-warning-bg:#fffbeb;
  --mwc-flash-warning-border:#fde68a;
  --mwc-flash-warning-text:#92400e;

  /* Links */
  --mwc-color-link:#1d4ed8;
  --mwc-color-link-hover:#1e40af;

  /* Botones */
  --mwc-btn-bg:#ffffff;
  --mwc-btn-text:#111827;
  --mwc-btn-border:#e5e7eb;
  --mwc-btn-hover-bg:#f8fafc;
  --mwc-btn-primary-bg:#111827;
  --mwc-btn-primary-text:#ffffff;
  --mwc-btn-primary-border:#111827;
  --mwc-btn-secondary-bg:#ffffff;
  --mwc-btn-secondary-text:#111827;
  --mwc-btn-secondary-border:#e5e7eb;
  --mwc-btn-danger-text:#991b1b;
  --mwc-btn-danger-bg:#ffffff;
  --mwc-btn-danger-border:#fecaca;

  /* Formularios */
  --mwc-input-bg:#ffffff;
  --mwc-input-text:#111827;
  --mwc-input-border:#e5e7eb;
  --mwc-input-focus:#2563eb;
  --mwc-input-placeholder:#64748b;
  --mwc-input-placeholder-weight:700;
  --mwc-label-text:#111827;
  --mwc-label-help:#334155;

  /* Peso de textos secundarios importantes */
  --mwc-secondary-weight:700;
  --mwc-subtitle-weight:700;

  /* Date range picker */
  --mwc-date-popover-bg:var(--mwc-color-card);
  --mwc-date-popover-border:var(--mwc-color-line-soft);
  --mwc-date-popover-shadow:0 22px 55px rgba(15,23,42,.22);
  --mwc-date-day-bg:#ffffff;
  --mwc-date-day-text:var(--mwc-color-title);
  --mwc-date-day-hover-bg:#dbeafe;
  --mwc-date-day-hover-border:#60a5fa;
  --mwc-date-day-hover-shadow:0 0 0 3px rgba(59,130,246,.18);
  --mwc-date-range-bg:#bfdbfe;
  --mwc-date-range-border:#93c5fd;
  --mwc-date-range-text:#1e3a8a;
  --mwc-date-selected-bg:#1d4ed8;
  --mwc-date-selected-border:#1e40af;
  --mwc-date-selected-text:#ffffff;

  /* Selector nativo de archivo */
  --mwc-file-btn-bg:#f8fafc;
  --mwc-file-btn-text:#111827;
  --mwc-file-btn-border:#cbd5e1;
  --mwc-file-btn-hover-bg:#eef2f7;

  /* Barras sticky / acciones fijas */
  --mwc-sticky-actions-bg:rgba(255,255,255,.94);
  --mwc-sticky-actions-border:var(--mwc-color-line);
  --mwc-sticky-actions-shadow:0 16px 40px rgba(15,23,42,.12);

  /* Badges / pills / estados */
  --mwc-badge-bg:#eef2ff;
  --mwc-badge-text:#3730a3;
  --mwc-badge-hot-bg:#fee2e2;
  --mwc-badge-hot-text:#991b1b;
  --mwc-beta-bg-start:#7c3aed;
  --mwc-beta-bg-end:#a855f7;
  --mwc-beta-text:#f5f3ff;
  --mwc-beta-hover-bg-start:#6d28d9;
  --mwc-beta-hover-bg-end:#c084fc;
  --mwc-beta-hover-text:#ffffff;

  /* Gridlists / tablas operativas */
  --mwc-grid-head:#374151;      /* títulos de columna */
  --mwc-grid-item:#000000;      /* datos principales de filas */
  --mwc-grid-meta:#000000;      /* RUC, provincias y detalles small */
  --mwc-grid-link:#0284c7;      /* ítems clickeables en gridlists */
  --mwc-grid-link-hover:#0369a1;

  /* Alias legacy: mantener compatibilidad con el CSS existente */
  --bg:var(--mwc-color-bg);
  --card:var(--mwc-color-card);
  --ink:var(--mwc-color-text);
  --muted:var(--mwc-color-muted);
  --line:var(--mwc-color-line);
  --accent:var(--mwc-color-title);
  --accent2:var(--mwc-color-link);
}

/* MWC floating toast notifications */
@media screen {
  body .main > .toast-stack {
    position: fixed !important;
    top: 18px !important;
    right: 20px !important;
    z-index: 3000 !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 8px !important;
    width: min(360px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 36px) !important;
    overflow: hidden !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  body .main > .toast-stack .toast {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 11px 12px 11px 14px !important;
    border-radius: 13px !important;
    border: 0 !important;
    background: rgba(255,255,255,.96) !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.13) !important;
    backdrop-filter: blur(14px) !important;
    pointer-events: auto !important;
    animation: mwcToastIn .2s ease-out both !important;
    animation-delay: calc(var(--toast-index, 0) * 35ms) !important;
  }

  body .main > .toast-stack .toast span {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    line-height: 1.3 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
  }

  body .main > .toast-stack .toast.success {
    background: rgba(240,253,244,.98) !important;
    color: #14532d !important;
    -webkit-text-fill-color: #14532d !important;
  }

  body .main > .toast-stack .toast.warning,
  body .main > .toast-stack .toast.danger,
  body .main > .toast-stack .toast.error {
    background: rgba(255,247,237,.98) !important;
    color: #7f1d1d !important;
    -webkit-text-fill-color: #7f1d1d !important;
  }

  .toast-close {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 18px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: .72 !important;
    box-shadow: none !important;
  }

  .toast-close:hover {
    opacity: 1 !important;
    background: rgba(15,23,42,.08) !important;
  }

  :root[data-theme="dark"] body .main > .toast-stack .toast {
    background: rgba(17,24,39,.98) !important;
    color: #f9fafb !important;
    -webkit-text-fill-color: #f9fafb !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.38) !important;
  }

  :root[data-theme="dark"] body .main > .toast-stack .toast.success {
    background: rgba(6,78,59,.98) !important;
    color: #ecfdf5 !important;
    -webkit-text-fill-color: #ecfdf5 !important;
  }

  :root[data-theme="dark"] body .main > .toast-stack .toast.warning,
  :root[data-theme="dark"] body .main > .toast-stack .toast.danger,
  :root[data-theme="dark"] body .main > .toast-stack .toast.error {
    background: rgba(69,10,10,.98) !important;
    color: #fef2f2 !important;
    -webkit-text-fill-color: #fef2f2 !important;
  }

  :root[data-theme="dark"] .toast-close:hover {
    background: rgba(226,232,240,.10) !important;
  }

  .toast.toast-hide {
    animation: mwcToastOut .16s ease-in both !important;
  }

  @keyframes mwcToastIn {
    from { opacity: 0; transform: translateY(-8px) translateX(10px); }
    to { opacity: 1; transform: translateY(0) translateX(0); }
  }

  @keyframes mwcToastOut {
    from { opacity: 1; transform: translateY(0) translateX(0); }
    to { opacity: 0; transform: translateY(-6px) translateX(10px); }
  }
}

@media screen and (max-width: 700px) {
  body .main > .toast-stack {
    top: 12px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
  }
}

/* MWC Visit quote rows */
@media screen {
  .quote-rows{
    display:grid;
    gap:12px;
  }

  .quote-row{
    padding-bottom:12px;
    border-bottom:1px solid var(--mwc-color-line-soft);
  }

  .quote-row:last-child{
    padding-bottom:0;
    border-bottom:0;
  }

  .quote-form-grid{
    grid-template-columns:minmax(170px,1fr) minmax(170px,1fr) minmax(170px,1fr);
    gap:12px;
  }

  .quote-form-grid textarea{
    min-height:86px;
  }

  @media(max-width:920px){
    .quote-form-grid{
      grid-template-columns:1fr;
    }
  }
}

/* ============================================================
   1. THEME TOKENS / OSCURO
   Mismo contrato de variables que el tema claro.
   ============================================================ */
:root[data-theme="dark"]{
  /* Base / superficies */
  --mwc-color-bg:#0b1120;
  --mwc-color-bg-soft:#0f172a;
  --mwc-color-card:#111827;
  --mwc-color-panel:#111827;
  --mwc-color-line:#243044;
  --mwc-color-line-soft:#1f2a3d;
  --mwc-color-row-line:#1f2937;

  /* Textos generales */
  --mwc-color-title:#f8fafc;
  --mwc-color-subtitle:#dbe4ef;
  --mwc-color-text:#e5e7eb;
  --mwc-color-muted:#cbd5e1;
  --mwc-color-muted-soft:#94a3b8;
  --mwc-color-placeholder:#94a3b8;

  /* Marca / sidebar */
  --mwc-sidebar-bg:#0b1120;
  --mwc-sidebar-border:#1f2937;
  --mwc-sidebar-link:#cbd5e1;
  --mwc-sidebar-link-hover:#f8fafc;
  --mwc-sidebar-link-active:#ffffff;
  --mwc-sidebar-link-hover-bg:#172033;
  --mwc-sidebar-active-indicator:#60a5fa;
  --mwc-brand-mark-bg:#f8fafc;
  --mwc-brand-mark-text:#0f172a;
  --mwc-brand-logo-box-bg:transparent;
  --mwc-brand-logo-box-border:transparent;
  --mwc-brand-logo-filter:none;
  --mwc-login-mini-logo-filter:brightness(0) saturate(100%);
  --mwc-sidebar-logo-size:46px;
  --mwc-login-full-logo-width:340px;
  --mwc-login-mini-logo-size:74px;
  --mwc-brand-title:#f8fafc;
  --mwc-brand-subtitle:#60a5fa;

  /* Usuario sidebar */
  --mwc-user-card-bg:#111827;
  --mwc-user-card-border:#243044;
  --mwc-user-avatar-bg:#f8fafc;
  --mwc-user-avatar-text:#0f172a;
  --mwc-user-name:#f8fafc;
  --mwc-user-role:#93c5fd;
  --mwc-logout-bg:#0f172a;
  --mwc-logout-text:#cbd5e1;
  --mwc-logout-border:#243044;
  --mwc-logout-hover-bg:#172033;
  --mwc-logout-hover-text:#ffffff;

  /* Cabeceras / dashboard */
  --mwc-hero-bg:#111827;
  --mwc-hero-border:#243044;
  --mwc-page-title:#f8fafc;
  --mwc-page-subtitle:#cbd5e1;
  --mwc-eyebrow:#93c5fd;
  --mwc-card-title:#f8fafc;
  --mwc-card-text:#e5e7eb;
  --mwc-card-muted:#cbd5e1;
  --mwc-stat-label:#cbd5e1;
  --mwc-stat-value:#f8fafc;

  /* Alertas importantes */
  --mwc-alert-title:#f8fafc;
  --mwc-alert-text:#dbe4ef;
  --mwc-alert-bg:#111827;
  --mwc-alert-border:#1e40af;
  --mwc-birthday-border:#60a5fa;
  --mwc-pending-border:#f59e0b;
  --mwc-alert-detail-bg:#0f172a;
  --mwc-flash-info-bg:#0b2447;
  --mwc-flash-info-border:#1d4ed8;
  --mwc-flash-info-text:#bfdbfe;
  --mwc-flash-success-bg:#052e1b;
  --mwc-flash-success-border:#15803d;
  --mwc-flash-success-text:#bbf7d0;
  --mwc-flash-warning-bg:#422006;
  --mwc-flash-warning-border:#b45309;
  --mwc-flash-warning-text:#fde68a;

  /* Links */
  --mwc-color-link:#38bdf8;
  --mwc-color-link-hover:#7dd3fc;

  /* Botones */
  --mwc-btn-bg:#111827;
  --mwc-btn-text:#e5e7eb;
  --mwc-btn-border:#334155;
  --mwc-btn-hover-bg:#172033;
  --mwc-btn-primary-bg:#f8fafc;
  --mwc-btn-primary-text:#0f172a;
  --mwc-btn-primary-border:#f8fafc;
  --mwc-btn-secondary-bg:#111827;
  --mwc-btn-secondary-text:#e5e7eb;
  --mwc-btn-secondary-border:#334155;
  --mwc-btn-danger-text:#fecaca;
  --mwc-btn-danger-bg:#1f1115;
  --mwc-btn-danger-border:#7f1d1d;

  /* Formularios */
  --mwc-input-bg:#0f172a;
  --mwc-input-text:#f8fafc;
  --mwc-input-border:#334155;
  --mwc-input-focus:#60a5fa;
  --mwc-input-placeholder:#cbd5e1;
  --mwc-input-placeholder-weight:700;
  --mwc-label-text:#f8fafc;
  --mwc-label-help:#dbe4ef;

  /* Peso de textos secundarios importantes */
  --mwc-secondary-weight:700;
  --mwc-subtitle-weight:700;

  /* Date range picker */
  --mwc-date-popover-bg:var(--mwc-color-card);
  --mwc-date-popover-border:var(--mwc-color-line-soft);
  --mwc-date-popover-shadow:0 22px 55px rgba(0,0,0,.48);
  --mwc-date-day-bg:var(--mwc-input-bg);
  --mwc-date-day-text:var(--mwc-input-text);
  --mwc-date-day-hover-bg:var(--mwc-sidebar-link-hover-bg);
  --mwc-date-day-hover-border:var(--mwc-color-link);
  --mwc-date-day-hover-shadow:0 0 0 3px rgba(96,165,250,.16);
  --mwc-date-range-bg:rgba(37,99,235,.24);
  --mwc-date-range-border:rgba(96,165,250,.34);
  --mwc-date-range-text:#bfdbfe;
  --mwc-date-selected-bg:var(--mwc-color-link);
  --mwc-date-selected-border:var(--mwc-color-link-hover);
  --mwc-date-selected-text:#ffffff;

  /* Selector nativo de archivo */
  --mwc-file-btn-bg:#172033;
  --mwc-file-btn-text:#f8fafc;
  --mwc-file-btn-border:#475569;
  --mwc-file-btn-hover-bg:#1f2a3d;

  /* Barras sticky / acciones fijas */
  --mwc-sticky-actions-bg:rgba(17,24,39,.96);
  --mwc-sticky-actions-border:#243044;
  --mwc-sticky-actions-shadow:0 18px 46px rgba(0,0,0,.42);

  /* Badges / pills / estados */
  --mwc-badge-bg:#172554;
  --mwc-badge-text:#bfdbfe;
  --mwc-badge-hot-bg:#450a0a;
  --mwc-badge-hot-text:#fecaca;
  --mwc-beta-bg-start:#6d28d9;
  --mwc-beta-bg-end:#2563eb;
  --mwc-beta-text:#f8fafc;
  --mwc-beta-hover-bg-start:#7c3aed;
  --mwc-beta-hover-bg-end:#38bdf8;
  --mwc-beta-hover-text:#ffffff;

  /* Gridlists / tablas operativas */
  --mwc-grid-head:#cbd5e1;
  --mwc-grid-item:#f8fafc;
  --mwc-grid-meta:#e5e7eb;
  --mwc-grid-link:#38bdf8;
  --mwc-grid-link-hover:#7dd3fc;

  /* Alias legacy */
  --bg:var(--mwc-color-bg);
  --card:var(--mwc-color-card);
  --ink:var(--mwc-color-text);
  --muted:var(--mwc-color-muted);
  --line:var(--mwc-color-line);
  --accent:var(--mwc-color-title);
  --accent2:var(--mwc-color-link);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink)}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:270px;background:var(--mwc-brand-mark-bg);color:white;padding:26px 20px}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:34px}.brand-mark{width:50px;height:50px;border-radius:16px;background:white;color:var(--mwc-color-title);display:grid;place-items:center;font-weight:900}.brand span{display:block;color:var(--mwc-brand-subtitle);font-size:13px;margin-top:3px}
nav{display:grid;gap:8px}nav a{color:var(--mwc-sidebar-link);text-decoration:none;padding:12px 14px;border-radius:12px}nav a:hover{background:rgba(255,255,255,.1)}
.main{margin-left:270px;padding:32px}.topbar{background:white;border:1px solid var(--line);border-radius:18px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.topbar span{color:var(--muted);margin-left:10px}
.hero,.page-header{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:24px}.hero{background:linear-gradient(135deg,#0f172a,#1e293b);color:white;border-radius:28px;padding:34px}.hero p{max-width:760px;color:#dbeafe}
h1{font-size:34px;margin:0 0 8px}h2{font-size:20px;margin:0 0 14px}.eyebrow{text-transform:uppercase;font-size:12px;letter-spacing:.13em;color:#3b82f6;font-weight:800;margin:0 0 8px}.hero .eyebrow{color:#93c5fd}.muted{color:var(--muted)}
.grid{display:grid;gap:18px}.stats{grid-template-columns:repeat(6,1fr);margin-bottom:20px}.two{grid-template-columns:1fr 1fr;margin-bottom:20px}
.card{background:white;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 10px 24px rgba(15,23,42,.04);margin-bottom:20px}.card span{color:var(--muted)}.stats .card > strong,.role-stats .card > strong{font-size:28px;display:block;margin-top:8px}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
table{width:100%;border-collapse:collapse;font-size:14px}th{text-align:left;color:var(--mwc-grid-head);font-size:12px;text-transform:uppercase;letter-spacing:.08em;padding:12px 10px;border-bottom:1px solid var(--line)}td{padding:14px 10px;border-bottom:1px solid #eef2f7;vertical-align:top}td strong{font-size:14px;display:inline;margin:0}
a{color:var(--mwc-color-link);text-decoration:none;font-weight:700}.btn{border:1px solid var(--mwc-btn-border);background:var(--mwc-btn-bg);padding:11px 16px;border-radius:12px;font-weight:800;color:var(--mwc-btn-text);text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px}.btn.primary{background:var(--mwc-btn-primary-bg);color:var(--mwc-btn-primary-text);border-color:var(--mwc-btn-primary-border)}.btn.danger{color:var(--mwc-btn-danger-text);background:var(--mwc-btn-danger-bg);border-color:var(--mwc-btn-danger-border)}
.pill{display:inline-block;background:var(--mwc-badge-bg);color:var(--mwc-badge-text);padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px}.pill.hot{background:var(--mwc-badge-hot-bg);color:var(--mwc-badge-hot-text)}
.search{display:flex;gap:10px;margin-bottom:18px}input,textarea,select{width:100%;padding:12px 13px;border:1px solid var(--mwc-input-border);border-radius:12px;font:inherit;background:var(--mwc-input-bg);color:var(--mwc-input-text)}textarea{resize:vertical}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-grid.compact{margin-top:12px}label{display:grid;gap:7px;font-weight:800;font-size:14px}label small{font-weight:500;color:var(--mwc-label-help)}.full{grid-column:1/-1}.checkbox{display:flex;align-items:center;gap:10px}.checkbox input{width:auto}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.actions form{margin:0}.mini-form{display:grid;gap:10px}.section-title{font-size:18px;font-weight:900;margin-top:8px}.messages{margin-bottom:18px}.alert{padding:13px 16px;border-radius:14px;margin-bottom:8px;background:var(--mwc-flash-info-bg);border:1px solid var(--mwc-flash-info-border);color:var(--mwc-flash-info-text)}.alert.success{background:var(--mwc-flash-success-bg);border-color:var(--mwc-flash-success-border);color:var(--mwc-flash-success-text)}.alert.warning{background:var(--mwc-flash-warning-bg);border-color:var(--mwc-flash-warning-border);color:var(--mwc-flash-warning-text)}.preview-shell{background:#e2e8f0;padding:30px;border-radius:24px;overflow:auto}.new-agency-box,.quote-box{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:18px;padding:18px}.permissions-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.login-body{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#0f172a,#1d4ed8);padding:24px}.login-card{width:min(460px,100%);background:white;border-radius:28px;padding:32px;box-shadow:0 30px 80px rgba(15,23,42,.35)}.login-brand{color:var(--mwc-color-title);margin-bottom:22px}.login-brand .brand-mark{background:var(--mwc-brand-mark-bg);color:white}.login-form{display:grid;gap:18px;margin-top:22px}.full-btn{width:100%;justify-content:center}.demo-credentials{margin-top:18px;background:#f8fafc;border:1px dashed #cbd5e1;padding:14px;border-radius:14px;color:#334155;font-size:14px}
@media(max-width:1200px){.stats{grid-template-columns:repeat(3,1fr)}.permissions-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:1000px){.sidebar{position:static;width:auto}.main{margin-left:0;padding:18px}.stats{grid-template-columns:1fr 1fr}.two,.form-grid{grid-template-columns:1fr}.hero,.page-header{display:block}.actions{margin-top:16px}.permissions-grid{grid-template-columns:1fr}}


/* 2. Sidebar / estado activo */
nav a.active{
  background:rgba(255,255,255,.14);
  color:#ffffff;
  box-shadow:inset 4px 0 0 var(--mwc-sidebar-active-indicator);
}

/* ============================================================
   2. LAYOUT / COMPACT APPLICATION SHELL
   Densidad visual, sidebar, topbar, cards, tablas base e inputs.
   ============================================================ */
@media screen {
  :root{
    --bg:var(--mwc-color-bg-soft);
    --card:var(--mwc-color-card);
    --ink:var(--mwc-color-text);
    --muted:var(--mwc-color-muted);
    --line:#e7eaf0;
    --accent:var(--mwc-color-title);
    --accent2:var(--mwc-color-link);
    --mwc-soft-shadow:0 8px 22px rgba(15,23,42,.045);
    --mwc-hover-shadow:0 12px 28px rgba(15,23,42,.065);
  }

  html,
  body{
    background:var(--mwc-color-bg-soft) !important;
    color:var(--mwc-color-text);
    font-size:14px;
  }

  .sidebar{
    width:236px !important;
    padding:18px 14px !important;
    background:var(--mwc-sidebar-bg) !important;
    color:var(--mwc-color-title) !important;
    border-right:1px solid var(--mwc-sidebar-border);
    box-shadow:6px 0 22px rgba(15,23,42,.035);
  }

  .brand{
    margin-bottom:22px !important;
    gap:10px !important;
  }

  .brand-mark{
    width:34px !important;
    height:34px !important;
    border-radius:10px !important;
    background:var(--mwc-brand-mark-bg) !important;
    color:var(--mwc-brand-mark-text) !important;
    font-size:12px;
  }

  .brand strong{
    color:var(--mwc-brand-title) !important;
    font-size:14px;
  }

  .brand span{
    color:var(--mwc-brand-subtitle) !important;
    font-size:11px !important;
  }

  .sidebar nav{
    gap:3px !important;
    overflow:auto;
    padding-right:2px;
  }

  .sidebar nav a,
  .sidebar a,
  nav a{
    min-height:34px;
    padding:8px 10px !important;
    border-radius:9px !important;
    color:var(--mwc-sidebar-link) !important;
    font-size:13px;
    font-weight:650;
    transform:none !important;
    box-shadow:none !important;
  }

  .sidebar nav a::after{
    display:none !important;
  }

  .sidebar nav a.active,
  .sidebar nav a:hover{
    background:var(--mwc-sidebar-link-hover-bg) !important;
    color:var(--mwc-color-title) !important;
  }

  .sidebar nav a.active{
    box-shadow:inset 3px 0 0 var(--mwc-sidebar-active-indicator) !important;
  }

  .nav-icon{
    width:15px !important;
    height:15px !important;
    flex-basis:15px !important;
    color:currentColor !important;
  }

  .mw-sidebar-beta-badge{
    height:16px !important;
    padding:0 6px !important;
    font-size:9px !important;
    color:var(--mwc-color-muted) !important;
    background:var(--mwc-badge-bg) !important;
    box-shadow:none !important;
  }

  .sidebar-user{
    grid-template-columns:32px 1fr !important;
    gap:8px !important;
    padding:10px !important;
    border-radius:12px !important;
    background:var(--mwc-user-card-bg) !important;
    border-color:var(--mwc-user-card-border) !important;
  }

  .sidebar-avatar{
    width:32px !important;
    height:32px !important;
    background:var(--mwc-user-avatar-bg) !important;
    color:var(--mwc-user-avatar-text) !important;
    font-size:11px !important;
  }

  .sidebar-user-info strong{
    color:var(--mwc-user-name) !important;
    font-size:12px !important;
  }

  .sidebar-user-info span{
    color:var(--mwc-user-role) !important;
    font-size:10.5px !important;
  }

  .sidebar-logout{
    min-height:30px;
    padding:6px 8px !important;
    border-radius:9px !important;
    color:var(--mwc-logout-text) !important;
    background:var(--mwc-logout-bg) !important;
    border-color:var(--mwc-logout-border) !important;
    font-size:11px !important;
  }

  .main{
    margin-left:236px !important;
    padding:22px 26px !important;
    max-width:1480px;
  }

  .hero{
    min-height:0;
    margin-bottom:16px !important;
    padding:18px 20px !important;
    border-radius:16px !important;
    color:var(--mwc-color-title) !important;
    background:var(--mwc-color-card) !important;
    border:1px solid var(--mwc-color-line-soft);
    box-shadow:var(--mwc-soft-shadow);
  }

  .hero h1,
  .page-header h1{
    margin:0 0 5px !important;
    color:var(--mwc-page-title) !important;
    font-size:25px !important;
    line-height:1.08 !important;
    letter-spacing:-.025em !important;
  }

  .hero p,
  .hero .muted,
  .page-header .muted{
    max-width:780px;
    margin:0;
    color:var(--mwc-page-subtitle) !important;
    font-size:13px !important;
    line-height:1.35 !important;
  }

  .hero .eyebrow,
  .page-header .eyebrow{
    margin-bottom:5px !important;
    color:var(--mwc-eyebrow) !important;
    font-size:10px !important;
    letter-spacing:.09em !important;
  }

  .page-header{
    margin-bottom:16px !important;
    padding:0 !important;
    gap:14px !important;
  }

  .hero .actions,
  .page-header .actions{
    margin-top:0 !important;
    gap:7px !important;
  }

  .grid{
    gap:12px !important;
  }

  .stats,
  .role-stats{
    grid-template-columns:repeat(auto-fit,minmax(145px,1fr)) !important;
    gap:10px !important;
    margin-bottom:14px !important;
  }

  .card,
  .panel,
  .stat-card,
  .metric-card,
  .table-card{
    margin-bottom:14px !important;
    padding:16px !important;
    border-radius:14px !important;
    background:var(--mwc-color-card) !important;
    border:1px solid var(--mwc-color-line-soft) !important;
    box-shadow:var(--mwc-soft-shadow) !important;
  }

  .card:hover,
  .panel:hover,
  .stat-card:hover,
  .metric-card:hover{
    box-shadow:var(--mwc-hover-shadow) !important;
    transform:none !important;
  }

  .role-stats .card,
  .stats .card{
    min-height:82px;
    padding:13px 14px !important;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }

  .card span,
  .stats .card span,
  .role-stats .card span{
    color:var(--mwc-stat-label) !important;
    font-size:11.5px !important;
    line-height:1.25;
  }

  .stats .card > strong,
  .role-stats .card > strong{
    margin-top:8px !important;
    color:var(--mwc-stat-value) !important;
    font-size:24px !important;
    line-height:1 !important;
    letter-spacing:-.025em;
  }

  .card-header{
    margin-bottom:10px !important;
    gap:12px !important;
  }

  .card-header h2,
  .card h2{
    margin:0 !important;
    color:var(--mwc-card-title) !important;
    font-size:16px !important;
    line-height:1.2 !important;
    letter-spacing:-.01em;
  }

  .card-header a{
    font-size:12px;
    font-weight:700;
  }

  .birthday-alert-bar,
  .ops-alert-bar{
    margin-bottom:12px !important;
    border-radius:13px !important;
    box-shadow:var(--mwc-soft-shadow) !important;
  }

  .birthday-alert-main{
    min-height:46px;
    padding:10px 14px !important;
  }

  .birthday-alert-main strong{
    color:var(--mwc-alert-title) !important;
    font-size:13px !important;
  }

  .birthday-alert-main span{
    color:var(--mwc-alert-text) !important;
    font-size:12px !important;
  }

  table{
    font-size:12.8px !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
  }

  table th{
    padding:9px 9px !important;
    font-size:10px !important;
    letter-spacing:.055em !important;
    color:var(--mwc-grid-head) !important;
    background:var(--mwc-alert-detail-bg) !important;
  }

  table td{
    padding:9px 9px !important;
    color:var(--mwc-grid-item) !important;
    -webkit-text-fill-color:var(--mwc-grid-item) !important;
    border-bottom-color:var(--mwc-color-row-line) !important;
    line-height:1.28 !important;
    font-weight:500 !important;
  }

  table td strong,
  td strong{
    color:var(--mwc-color-title) !important;
    -webkit-text-fill-color:var(--mwc-color-title) !important;
    font-size:12.8px !important;
    line-height:1.2 !important;
    font-weight:650 !important;
    letter-spacing:0 !important;
  }

  table small,
  td small{
    color:var(--mwc-grid-meta) !important;
    -webkit-text-fill-color:var(--mwc-grid-meta) !important;
    font-size:11px !important;
    line-height:1.2 !important;
    font-weight:500 !important;
  }

  .table-responsive,
  .agencies-table-card{
    overflow:auto;
  }

  .btn,
  button,
  input[type="submit"]{
    min-height:32px;
    padding:7px 11px !important;
    border-radius:9px !important;
    font-size:12px !important;
    font-weight:750 !important;
    color:var(--mwc-btn-text) !important;
    background:var(--mwc-btn-bg) !important;
    border-color:var(--mwc-btn-border) !important;
    box-shadow:none !important;
  }

  .btn.primary,
  .btn-primary,
  button.primary{
    background:var(--mwc-btn-primary-bg) !important;
    color:var(--mwc-btn-primary-text) !important;
    border-color:var(--mwc-btn-primary-border) !important;
  }

  .compact-btn,
  td.actions .btn,
  .table-actions .btn,
  .actions .btn{
    min-height:29px !important;
    padding:6px 9px !important;
    border-radius:8px !important;
  }

  .pill,
  .badge,
  .status{
    min-height:22px !important;
    padding:4px 8px !important;
    border-radius:999px !important;
    font-size:10.5px !important;
    font-weight:750 !important;
  }

  input,
  select,
  textarea{
    min-height:34px;
    padding:8px 10px !important;
    border-radius:9px !important;
    font-size:13px !important;
    color:var(--mwc-input-text) !important;
    background:var(--mwc-input-bg) !important;
    border-color:var(--mwc-input-border) !important;
  }

  input,
  select{
    line-height:18px !important;
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--mwc-input-text) !important;
    caret-color:var(--mwc-input-text) !important;
    box-shadow:0 0 0 1000px var(--mwc-input-bg) inset !important;
    -webkit-box-shadow:0 0 0 1000px var(--mwc-input-bg) inset !important;
    border-color:var(--mwc-input-border) !important;
    transition:background-color 9999s ease-out 0s;
  }

  label{
    gap:5px !important;
    font-size:12.5px !important;
  }

  .search,
  .agencies-search-bar{
    gap:8px !important;
    margin-bottom:12px !important;
  }

  .form-grid{
    gap:12px !important;
  }

  .messages{
    margin-bottom:12px !important;
  }

  .alert{
    padding:10px 12px !important;
    border-radius:11px !important;
    font-size:12.5px;
  }
}

/* ============================================================
   MWC Fix Pack 2026-06-27
   Ajustes posteriores a la replica visual: densidad, alertas, dark mode.
   ============================================================ */
@media screen {
  .sidebar{
    padding:24px 18px 18px !important;
  }

  .brand{
    margin-bottom:18px !important;
  }

  .brand-mark.brand-logo-mark,
  .brand-mark.brand-logo-mark img{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
  }

  .brand strong{
    font-size:16px !important;
  }

  .brand span{
    font-size:11.5px !important;
    margin-top:2px !important;
  }

  .sidebar nav{
    gap:3px !important;
  }

  .sidebar nav a{
    min-height:38px !important;
    padding:0 12px !important;
    border-radius:8px !important;
    gap:13px !important;
    font-size:13.5px !important;
  }

  .nav-icon{
    width:18px !important;
    height:18px !important;
    flex-basis:18px !important;
  }

  .mw-sidebar-beta-badge{
    height:18px !important;
    padding:0 7px !important;
    font-size:9.5px !important;
  }

  .sidebar-user{
    margin-top:8px !important;
    min-height:66px !important;
    padding:11px 50px 11px 12px !important;
  }

  .sidebar-avatar{
    width:38px !important;
    height:38px !important;
    font-size:12px !important;
  }

  .sidebar-logout-form{
    margin-top:14px !important;
  }

  .sidebar-logout{
    min-height:39px !important;
    font-size:13.5px !important;
  }

  .ops-alert-bar .birthday-alert-main{
    gap:16px !important;
  }

  .ops-alert-bar .birthday-alert-main > div{
    min-width:0 !important;
  }

  .ops-alert-bar .btn{
    margin-left:auto !important;
    margin-right:0 !important;
    min-height:40px !important;
    height:40px !important;
  }

  .alert-close{
    margin-left:12px !important;
    cursor:pointer !important;
    width:28px !important;
    height:28px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:999px !important;
  }

  .alert-close:hover{
    background:rgba(15,23,42,.06) !important;
  }

  .followup-table .agency-cell strong,
  body .main .card table .agency-cell strong{
    color:var(--mwc-grid-link) !important;
    -webkit-text-fill-color:var(--mwc-grid-link) !important;
  }

  #accounting-commission-section .accounting-table{
    table-layout:fixed !important;
  }

  #accounting-commission-section .accounting-table .commission-invoice-col,
  #accounting-commission-report-section .accounting-table .commission-invoice-col{
    width:86px !important;
    min-width:74px !important;
    max-width:96px !important;
    white-space:nowrap !important;
  }

  #accounting-commission-section .accounting-table .commission-date-col,
  #accounting-commission-report-section .accounting-table .commission-date-col{
    width:104px !important;
    min-width:92px !important;
    max-width:112px !important;
    white-space:nowrap !important;
  }

  #accounting-commission-section .accounting-table .commission-agency-col,
  #accounting-commission-report-section .accounting-table .commission-agency-col{
    width:20% !important;
    min-width:160px !important;
  }

  #accounting-commission-section .accounting-table .commission-payment-col,
  #accounting-commission-report-section .accounting-table .commission-payment-col{
    width:140px !important;
    min-width:128px !important;
  }

  #accounting-commission-section .accounting-table .commission-percent-col,
  #accounting-commission-report-section .accounting-table .commission-percent-col{
    width:58px !important;
  }

  #accounting-commission-section .accounting-table th:nth-child(11),
  #accounting-commission-section .accounting-table td:nth-child(11){
    width:70px !important;
  }

  #accounting-commission-section .accounting-edit-control{
    width:100% !important;
    min-width:0 !important;
    height:30px !important;
    min-height:30px !important;
    padding:0 8px !important;
    font-size:12px !important;
  }

  .compact-permissions{
    grid-template-columns:repeat(auto-fit, minmax(128px, max-content)) !important;
    justify-content:start !important;
    gap:8px !important;
  }

  .permissions-grid .checkbox,
  .permission-chip{
    width:auto !important;
    min-width:0 !important;
    min-height:30px !important;
    padding:6px 9px !important;
    gap:7px !important;
    border-radius:9px !important;
    font-size:12.5px !important;
    line-height:1.15 !important;
  }

  .permission-chip input,
  .permissions-grid .checkbox input{
    width:14px !important;
    height:14px !important;
    flex:0 0 14px !important;
  }

  .role-row{
    gap:12px !important;
  }

  .role-permissions-line{
    gap:6px !important;
  }

  .card-header h2.section-users{
    --section-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  }

  .theme-panel{
    width:176px !important;
    right:0 !important;
    left:auto !important;
    top:auto !important;
    bottom:calc(100% + 8px) !important;
    padding:9px !important;
    border-radius:12px !important;
    gap:7px !important;
  }

  .theme-options{
    grid-template-columns:1fr !important;
    gap:6px !important;
  }

  .theme-option{
    min-height:40px !important;
    height:40px !important;
    grid-template-columns:24px 1fr !important;
    justify-items:start !important;
    align-content:center !important;
    padding:6px 8px !important;
    font-size:12.5px !important;
  }

  .theme-preview{
    width:22px !important;
    height:22px !important;
  }
}

@media screen {
  :root[data-theme="dark"]{
    --mwc-ref-bg:#0b1120;
    --mwc-ref-card:#111827;
    --mwc-ref-sidebar:#0f172a;
    --mwc-ref-ink:#f8fafc;
    --mwc-ref-text:#dbeafe;
    --mwc-ref-muted:#94a3b8;
    --mwc-ref-border:#263449;
    --mwc-ref-soft-border:#243244;
    --mwc-ref-shadow:0 16px 36px rgba(0,0,0,.28);
  }

  :root[data-theme="dark"] body,
  :root[data-theme="dark"] .main{
    background:#0b1120 !important;
    color:#dbeafe !important;
  }

  :root[data-theme="dark"] .sidebar{
    background:#0f172a !important;
    border-right-color:#1e293b !important;
  }

  :root[data-theme="dark"] .brand-mark.brand-logo-mark img{
    filter:brightness(0) invert(1) !important;
  }

  :root[data-theme="dark"] .brand strong,
  :root[data-theme="dark"] .hero h1,
  :root[data-theme="dark"] .page-header h1,
  :root[data-theme="dark"] .card-header h2{
    color:#f8fafc !important;
    -webkit-text-fill-color:#f8fafc !important;
  }

  :root[data-theme="dark"] .sidebar nav a{
    color:#cbd5e1 !important;
    -webkit-text-fill-color:#cbd5e1 !important;
  }

  :root[data-theme="dark"] .sidebar nav a.active,
  :root[data-theme="dark"] .sidebar nav a:hover{
    background:#172554 !important;
    color:#93c5fd !important;
    -webkit-text-fill-color:#93c5fd !important;
  }

  :root[data-theme="dark"] .hero,
  :root[data-theme="dark"] .card,
  :root[data-theme="dark"] .agencies-table-card,
  :root[data-theme="dark"] .sidebar-user,
  :root[data-theme="dark"] .sidebar-logout,
  :root[data-theme="dark"] .theme-panel{
    background:#111827 !important;
    border-color:#243244 !important;
    color:#dbeafe !important;
  }

  :root[data-theme="dark"] .hero{
    background:
      radial-gradient(900px 220px at 72% -70%, rgba(37,99,235,.22), transparent 58%),
      linear-gradient(135deg, #111827 0%, #111827 48%, #0f172a 100%) !important;
  }

  :root[data-theme="dark"] .birthday-alert-bar,
  :root[data-theme="dark"] .ops-alert-bar{
    background:#111827 !important;
    border-color:#243244 !important;
  }

  :root[data-theme="dark"] .birthday-alert-main strong,
  :root[data-theme="dark"] .birthday-alert-main span,
  :root[data-theme="dark"] .hero p,
  :root[data-theme="dark"] .page-header .muted,
  :root[data-theme="dark"] .muted{
    color:#cbd5e1 !important;
    -webkit-text-fill-color:#cbd5e1 !important;
  }

  :root[data-theme="dark"] .role-stats .card{
    background:#111827 !important;
    border-color:#243244 !important;
  }

  :root[data-theme="dark"] table th{
    background:#0f172a !important;
    color:#93a4bd !important;
    -webkit-text-fill-color:#93a4bd !important;
    border-bottom-color:#243244 !important;
  }

  :root[data-theme="dark"] table td{
    color:#dbeafe !important;
    -webkit-text-fill-color:#dbeafe !important;
    border-bottom-color:#1f2937 !important;
  }

  :root[data-theme="dark"] input,
  :root[data-theme="dark"] select,
  :root[data-theme="dark"] textarea{
    background:#0f172a !important;
    border-color:#334155 !important;
    color:#e2e8f0 !important;
    -webkit-text-fill-color:#e2e8f0 !important;
  }

  :root[data-theme="dark"] input:-webkit-autofill,
  :root[data-theme="dark"] input:-webkit-autofill:hover,
  :root[data-theme="dark"] input:-webkit-autofill:focus,
  :root[data-theme="dark"] textarea:-webkit-autofill,
  :root[data-theme="dark"] textarea:-webkit-autofill:hover,
  :root[data-theme="dark"] textarea:-webkit-autofill:focus,
  :root[data-theme="dark"] select:-webkit-autofill,
  :root[data-theme="dark"] select:-webkit-autofill:hover,
  :root[data-theme="dark"] select:-webkit-autofill:focus{
    -webkit-text-fill-color:#e2e8f0 !important;
    caret-color:#e2e8f0 !important;
    box-shadow:0 0 0 1000px #0f172a inset !important;
    -webkit-box-shadow:0 0 0 1000px #0f172a inset !important;
    border-color:#334155 !important;
  }

  :root[data-theme="dark"] .btn,
  :root[data-theme="dark"] button,
  :root[data-theme="dark"] .theme-gear-btn{
    background:#111827 !important;
    border-color:#334155 !important;
    color:#dbeafe !important;
    -webkit-text-fill-color:#dbeafe !important;
  }

  :root[data-theme="dark"] .btn.primary,
  :root[data-theme="dark"] button.primary{
    background:#2563eb !important;
    border-color:#2563eb !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }

  :root[data-theme="dark"] .pill{
    background:#172554 !important;
    border-color:#1d4ed8 !important;
    color:#bfdbfe !important;
    -webkit-text-fill-color:#bfdbfe !important;
  }

  :root[data-theme="dark"] .pill.hot{
    background:#431407 !important;
    border-color:#9a3412 !important;
    color:#fed7aa !important;
    -webkit-text-fill-color:#fed7aa !important;
  }
}

@media screen and (max-width:1000px){
  .sidebar{
    position:static !important;
    width:auto !important;
  }

  .main{
    margin-left:0 !important;
    padding:16px !important;
  }

  .hero,
  .page-header{
    display:block !important;
  }

  .hero .actions,
  .page-header .actions{
    margin-top:12px !important;
  }
}
nav a.active::before{
  content:"";
  width:7px;
  height:7px;
  background:var(--mwc-color-link);
  border-radius:999px;
  display:inline-block;
  margin-right:8px;
}
.messages{
  animation:fadeOutFlash .5s ease forwards;
  animation-delay:4s;
}
@keyframes fadeOutFlash{
  to{
    opacity:0;
    transform:translateY(-6px);
    pointer-events:none;
    height:0;
    margin:0;
    overflow:hidden;
  }
}


/* 3. Component / autocompletado de agencias */
.autocomplete-wrap{
  position:relative;
}
.autocomplete-wrap input{
  height:38px;
  line-height:18px !important;
  display:block;
}
.autocomplete-results{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  background:white;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 18px 38px rgba(15,23,42,.14);
  overflow:hidden;
  z-index:50;
  max-height:300px;
  overflow-y:auto;
}
.autocomplete-item{
  width:100%;
  border:0;
  background:white;
  text-align:left;
  padding:12px 14px;
  cursor:pointer;
  display:grid;
  gap:3px;
  border-bottom:1px solid #eef2f7;
}
.autocomplete-item:hover{
  background:#f8fafc;
}
.autocomplete-item strong{
  font-size:14px;
  color:var(--mwc-color-title);
}
.autocomplete-item span{
  font-size:12px;
  color:#64748b;
}

.quote-contact-field{
  display:none;
}
.quote-contact-backdrop{
  position:fixed;
  inset:0;
  z-index:1300;
  display:none;
  place-items:center;
  padding:24px;
  background:rgba(15,23,42,.42);
}
.quote-contact-backdrop.open{
  display:grid;
}
.quote-contact-modal{
  width:min(420px,100%);
  max-width:420px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(15,23,42,.24);
  padding:20px;
}
.quote-contact-modal-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:16px;
}
.quote-contact-modal-header h2{
  margin:0 0 4px;
}
.quote-contact-close{
  border:0;
  background:#f8fafc;
  color:var(--mwc-color-title);
  width:34px;
  height:34px;
  border-radius:999px;
  cursor:pointer;
  font-size:22px;
  line-height:1;
}

.liquidation-prompt-backdrop{
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(15,23,42,.42);
}
.liquidation-prompt{
  width:min(520px,100%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(15,23,42,.24);
  padding:24px;
}
.liquidation-prompt h2{
  margin:4px 0 10px;
}

.service-liquidation-form{
  display:block;
}
.service-liquidation-header{
  align-items:flex-start;
  gap:18px;
}
.service-header-actions{
  align-items:center;
  gap:12px;
}
.service-header-locator{
  min-width:150px;
  text-align:right;
}
.service-header-locator span{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  line-height:1.1;
  text-transform:uppercase;
}
.service-header-locator strong{
  display:block;
  color:var(--mwc-color-title);
  font-size:26px;
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.05;
  margin-top:4px;
}
.service-quote-context{
  color:var(--mwc-color-title);
  font-size:13px;
  line-height:1.35;
  margin:6px 0 0;
  max-width:780px;
}
.service-liquidation-form h3{
  margin:18px 0 10px;
  color:#334155;
}
.service-invoice-number-form{
  display:flex;
  align-items:end;
  gap:8px;
  width:max-content;
  max-width:100%;
  margin:0 0 14px;
  padding:9px 11px;
  border:1px solid var(--mwc-color-line-soft);
  border-radius:12px;
  background:var(--mwc-color-card);
}
.service-invoice-number-form label{
  gap:4px;
  min-width:180px;
  font-size:12px;
}
.service-invoice-number-form input{
  min-height:34px;
  padding:6px 9px;
}
.service-table-wrap{
  width:100%;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:14px;
  margin-bottom:10px;
}
.service-input-table{
  min-width:760px;
  margin:0;
}
.service-input-table input{
  min-width:120px;
  padding:9px 10px;
  border-radius:10px;
  color:var(--mwc-color-title);
  opacity:1;
  -webkit-text-fill-color:var(--mwc-color-title);
}
.service-input-table .service-readonly-mini{
  min-width:74px !important;
  width:74px;
  text-align:right;
  font-weight:700;
  background:#f8fafc;
}
.service-liquidation-form input,
.service-liquidation-form textarea{
  color:var(--mwc-color-title);
  opacity:1;
  -webkit-text-fill-color:var(--mwc-color-title);
}
.service-liquidation-form select{
  min-width:120px;
  min-height:34px;
  height:34px;
  padding:6px 10px;
  border-radius:10px;
  font-size:13px;
  line-height:1.2;
  color:var(--mwc-color-title);
  opacity:1;
  -webkit-text-fill-color:var(--mwc-color-title);
}
.service-liquidation-form input::placeholder,
.service-liquidation-form textarea::placeholder{
  color:#94a3b8;
  -webkit-text-fill-color:#94a3b8;
}
.service-input-table th:last-child,
.service-input-table td:last-child{
  width:92px;
  text-align:right;
}
.service-add-row{
  margin:0 0 16px;
}
.service-remove-row{
  padding:8px 10px;
}
.service-row-number{
  width:46px;
  text-align:center;
  color:var(--muted);
  font-weight:900;
}
.service-isd-row{
  display:grid;
  grid-template-columns:minmax(130px,180px) repeat(3,minmax(0,1fr));
  gap:12px;
  align-items:end;
}

.service-isd-result{
  min-height:70px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:11px 12px;
  background:#f8fafc;
}
.service-isd-result span{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
}
.service-isd-result strong{
  display:block;
  margin-top:6px;
  color:var(--mwc-color-title);
  font-size:18px;
}
.service-short-input{
  max-width:180px;
}
.service-calculation-card dl{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px 18px;
  margin:0;
}
.service-calculation-card dt{
  color:var(--muted);
  font-weight:700;
}
.service-calculation-card dd{
  margin:0;
  font-weight:900;
  color:var(--mwc-color-title);
}
.commission-inline{
  display:grid;
  grid-template-columns:minmax(86px,120px) 1fr;
  align-items:center;
  gap:10px;
}
.service-commission-toggle{
  align-self:end;
  min-height:44px;
  padding:0 2px;
}
.operation-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:12px;
  align-items:end;
}
.operation-grid .span-2{grid-column:span 2}
.operation-grid .span-1{grid-column:span 1}
.operation-grid .span-3{grid-column:span 3}
.operation-grid .span-4{grid-column:span 4}
.operation-grid .span-5{grid-column:span 5}
.operation-grid .span-6{grid-column:span 6}
.operation-grid .span-8{grid-column:span 8}
.operation-grid input,
.operation-grid select,
.operation-grid .date-range-trigger{
  min-height:42px;
  height:42px;
  padding:9px 11px;
  border-radius:11px;
}
.operation-grid label{
  gap:5px;
}
.service-pax-counters{
  display:grid;
  grid-template-columns:repeat(5,max-content);
  gap:6px 18px;
  align-items:end;
  align-content:end;
  justify-content:start;
}
.service-pax-counters > span{
  grid-column:1/-1;
  color:var(--mwc-color-title);
  font-size:13px;
  font-weight:700;
  line-height:1.1;
}
.service-pax-stepper{
  display:grid;
  grid-template-columns:26px 22px 30px 22px;
  grid-template-areas:"label minus value plus";
  justify-content:start;
  align-items:center;
  gap:3px;
  min-width:0;
}
.service-pax-stepper strong{
  grid-area:label;
  color:var(--mwc-color-title);
  font-size:11px;
  font-weight:800;
  line-height:1;
  text-align:left;
  text-transform:uppercase;
}
.service-pax-stepper button{
  width:22px !important;
  min-width:22px !important;
  height:24px !important;
  min-height:24px !important;
  padding:0 !important;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff;
  color:var(--mwc-color-title);
  font-size:14px;
  font-weight:800;
  line-height:1;
  display:inline-grid;
  place-items:center;
  transform:none;
}
.service-pax-stepper [data-pax-minus]{
  grid-area:minus;
}
.service-pax-stepper [data-pax-plus]{
  grid-area:plus;
}
.service-pax-stepper input{
  grid-area:value;
  min-width:0 !important;
  width:30px;
  height:24px !important;
  min-height:24px !important;
  padding:2px !important;
  box-sizing:border-box;
  border-radius:7px !important;
  text-align:center;
  font-size:12px;
  font-weight:700;
}
.operation-grid .date-range-trigger small{
  display:none;
}
@media(max-width:1200px){
  .operation-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
  }
  .operation-grid .span-1,
  .operation-grid .span-2,
  .operation-grid .span-3{
    grid-column:span 3;
  }
  .operation-grid .span-4,
  .operation-grid .span-5,
  .operation-grid .span-6,
  .operation-grid .span-8{
    grid-column:span 6;
  }
}
@media(max-width:760px){
  .service-liquidation-header,
  .service-header-actions{
    align-items:flex-start;
  }
  .service-header-locator{
    text-align:left;
  }
  .operation-grid{
    grid-template-columns:1fr;
  }
  .operation-grid .span-1,
  .operation-grid .span-2,
  .operation-grid .span-3,
  .operation-grid .span-4,
  .operation-grid .span-5,
  .operation-grid .span-6,
  .operation-grid .span-8{
    grid-column:1;
  }
  .service-pax-counters{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
.date-range-field{
  position:relative;
}
.date-range-trigger{
  width:100%;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  color:var(--mwc-color-title);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.date-range-trigger span{
  color:var(--mwc-color-title);
  font-weight:800;
}
.date-range-trigger small{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.date-range-popover{
  position:absolute;
  left:0;
  right:auto;
  top:calc(100% + 8px);
  z-index:30;
  display:none;
  width:min(360px, calc(100vw - 48px));
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 18px 45px rgba(15,23,42,.16);
}
.date-range-field.open .date-range-popover{
  display:block;
}
.date-range-calendar{
  display:grid;
  gap:10px;
}
.date-range-calendar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.date-range-calendar-head strong{
  display:block;
  margin:0;
  font-size:14px;
  color:var(--mwc-color-title);
  text-transform:capitalize;
}
.date-range-nav{
  width:34px;
  height:34px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#f8fafc;
  color:var(--mwc-color-title);
  font-size:20px;
  font-weight:900;
  cursor:pointer;
}
.date-range-weekdays,
.date-range-days{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
}
.date-range-weekdays span{
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  text-align:center;
  text-transform:uppercase;
}
.date-range-day{
  min-height:36px;
  border:1px solid transparent;
  border-radius:10px;
  background:#fff;
  color:var(--mwc-color-title);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.date-range-day:hover{
  border-color:#bfdbfe;
  background:#eff6ff;
}
.date-range-day.muted{
  color:var(--mwc-brand-subtitle);
  pointer-events:none;
}
.date-range-day.in-range{
  background:#dbeafe;
  border-color:#dbeafe;
  color:#1e3a8a;
}
.date-range-day.selected{
  background:var(--mwc-brand-mark-bg);
  border-color:var(--mwc-color-title);
  color:#fff;
}
.date-range-help{
  margin:0;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
.date-range-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:12px;
}
.service-commission-mode.hidden{
  display:none;
}
.commission-inline .commission-percent-input{
  min-width:0;
  text-align:center;
}
.commission-value{
  display:flex !important;
  align-items:center;
  min-height:44px;
  padding:0 12px;
  border:1px solid #dbeafe;
  border-radius:12px;
  background:#eff6ff;
  color:#1e3a8a !important;
  font-size:15px !important;
  margin:0 !important;
}
.service-invoice-card .muted{
  margin-top:-4px;
}
.service-invoice-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
.service-invoice-grid div{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:#f8fafc;
}
.service-invoice-grid span{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
}
.service-invoice-grid strong{
  display:block;
  margin-top:6px;
  color:var(--mwc-color-title);
  font-size:18px;
}
.sticky-actions{
  position:sticky;
  bottom:16px;
  z-index:50;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:12px;
  margin:18px 0;
  border:1px solid var(--mwc-sticky-actions-border);
  border-radius:16px;
  background:var(--mwc-sticky-actions-bg);
  box-shadow:var(--mwc-sticky-actions-shadow);
  backdrop-filter:blur(14px);
}
.service-preview-card{
  overflow:auto;
}
.service-preview-sheet{
  width:min(780px,100%);
  margin:auto;
  padding:18px;
  border:1px solid #1f2937;
  background:#fff;
  color:var(--mwc-color-title);
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
  line-height:1.25;
}
.service-preview-sheet h2{
  text-align:center;
  border-top:2px solid #111827;
  border-bottom:2px solid #111827;
  padding:5px 0;
  margin:8px 0 12px;
  font-size:15px;
  letter-spacing:.02em;
}
.service-preview-sheet h3{
  margin:10px 0 6px !important;
  font-size:13px !important;
  line-height:1.2 !important;
  letter-spacing:0 !important;
  color:var(--mwc-color-title) !important;
}
.preview-logo{
  width:190px;
  height:78px;
  display:grid;
  place-items:center;
  color:#1f2a5f;
  font-weight:900;
  border:2px solid #f59e0b;
  border-radius:10px;
  margin-bottom:10px;
}
.preview-logo-img{
  width:128px;
  max-height:76px;
  object-fit:contain;
  display:block;
  margin-bottom:6px;
}
.preview-grid,
.preview-totals{
  display:grid;
  grid-template-columns:145px 1fr 132px 1fr;
  border:1px solid #111827;
  overflow:hidden;
}
.preview-grid span,
.preview-grid strong,
.preview-totals span,
.preview-totals strong{
  min-height:25px;
  padding:4px 6px;
  border-top:1px solid #111827;
}
.preview-grid span:nth-child(-n+4),
.preview-grid strong:nth-child(-n+4),
.preview-totals span:first-child,
.preview-totals span:first-child + strong{
  border-top:0;
}
.service-preview-sheet span,
.service-preview-sheet strong,
.service-preview-sheet p,
.service-preview-sheet div{
  font-size:12px;
}
.service-preview-sheet strong{
  display:inline !important;
  margin:0 !important;
  font-size:12px !important;
  line-height:1.25 !important;
}
.preview-grid strong{
  font-size:12px !important;
}
.preview-totals strong{
  font-size:13px !important;
}
.preview-grid span,
.preview-totals span{
  background:#f8fafc;
  font-weight:800;
}
.preview-pax{
  display:grid;
  grid-template-columns:1fr 115px 70px;
  border:1px solid #111827;
  margin-bottom:10px;
}
.preview-pax span{
  min-height:22px;
  padding:4px 6px;
  border-bottom:1px solid #e5e7eb;
}
.preview-notes{
  min-height:82px;
  padding:8px;
  border:1px solid #111827;
  margin:10px 0;
  line-height:1.35;
}
.service-inline-correction-form{margin:0;}
.service-inline-edit{outline:0;cursor:text;}
.preview-pax .service-inline-edit:focus,
.preview-notes.service-inline-edit:focus{
  background:#fffdf0;
  box-shadow:inset 0 0 0 1px #f0b429;
}
.preview-notes.service-inline-edit{white-space:pre-wrap;}
.service-inline-correction-actions{display:flex;justify-content:flex-end;margin-top:-3px;margin-bottom:10px;}
.preview-totals{
  grid-template-columns:1fr 142px;
}
.preview-totals .preview-total-agency{
  background:#ecfdf5;
  color:#14532d !important;
  font-weight:900;
}
.preview-totals strong.preview-total-agency{
  background:#dcfce7;
  color:#14532d !important;
}
.preview-totals .preview-total-mw{
  background:#eff6ff;
  color:#1e3a8a !important;
  font-weight:900;
}
.preview-totals strong.preview-total-mw{
  background:#dbeafe;
  color:#1e3a8a !important;
}
.preview-totals .preview-payment-due{
  grid-column:1 / -1;
  background:#eff6ff;
  color:#1e3a8a !important;
  font-weight:900;
}
.preview-payment-check{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin:8px 0;
  color:#334155;
  font-size:12px;
  font-weight:800;
}
.preview-payment-check strong{
  display:inline !important;
  margin:0 !important;
  padding:4px 9px;
  border:1px solid #dbeafe;
  border-radius:999px;
  background:#eff6ff;
  color:#1e3a8a !important;
  font-size:12px !important;
}
.preview-warning{
  margin:6px 0 0;
  font-size:11px;
  font-weight:700;
}
.preview-bank-block{
  margin-top:10px;
  border:1px solid #111827;
}
.preview-bank-block h3{
  margin:0;
  padding:5px 7px;
  background:#f3f4f6;
  border-bottom:1px solid #111827;
  font-size:12px;
  letter-spacing:.02em;
}
.preview-bank-owner{
  display:grid;
  grid-template-columns:116px 1fr 90px 1fr;
  border-bottom:1px solid #111827;
}
.preview-bank-owner span,
.preview-bank-owner strong{
  min-height:24px;
  padding:4px 6px;
  border-bottom:1px solid #e5e7eb;
  font-size:11px !important;
}
.preview-bank-owner span{
  background:#f8fafc;
  font-weight:800;
}
.preview-bank-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.preview-bank-grid div{
  display:grid;
  align-content:start;
  gap:3px;
  min-height:82px;
  padding:7px;
  border-right:1px solid #111827;
}
.preview-bank-grid div:last-child{
  border-right:0;
}
.preview-bank-grid img{
  max-width:62px;
  max-height:32px;
  object-fit:contain;
}
.preview-bank-grid strong{
  font-size:10px !important;
}
.preview-bank-grid span{
  font-size:10px !important;
  line-height:1.35;
}
.service-preview-pdf-clone {
  width: 194mm !important;
  max-width: 194mm !important;
  margin: 0 auto !important;
  padding: 4mm !important;
  border: 1px solid #111827 !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 8.5pt !important;
  line-height: 1.15 !important;
}
.service-preview-pdf-clone h2 {
  margin: 2mm 0 3mm !important;
  padding: 1.5mm 0 !important;
  font-size: 11pt !important;
  color: #111827 !important;
}
.service-preview-pdf-clone .preview-logo-img {
  width: 34mm !important;
  max-height: 20mm !important;
  margin-bottom: 1mm !important;
}
.service-preview-pdf-clone .preview-grid {
  grid-template-columns: 33mm 1fr 30mm 1fr !important;
}
.service-preview-pdf-clone .preview-grid span,
.service-preview-pdf-clone .preview-grid strong,
.service-preview-pdf-clone .preview-totals span,
.service-preview-pdf-clone .preview-totals strong {
  min-height: 6mm !important;
  padding: 1.2mm 1.6mm !important;
  font-size: 8pt !important;
  color: #111827 !important;
}
.service-preview-pdf-clone .preview-pax {
  grid-template-columns: 1fr 30mm 18mm !important;
  margin-bottom: 2mm !important;
}
.service-preview-pdf-clone .preview-pax span {
  min-height: 5mm !important;
  padding: 1mm 1.5mm !important;
  font-size: 8pt !important;
}
.service-preview-pdf-clone .preview-notes {
  min-height: 24mm !important;
  margin: 2mm 0 !important;
  padding: 2mm !important;
  font-size: 8pt !important;
  line-height: 1.25 !important;
}
.service-preview-pdf-clone .preview-totals {
  grid-template-columns: 1fr 34mm !important;
}
.service-preview-pdf-clone .preview-warning {
  margin: 1.5mm 0 0 !important;
  font-size: 7.5pt !important;
}
.service-preview-pdf-clone .preview-bank-block {
  margin-top: 3mm !important;
}
.service-preview-pdf-clone .preview-bank-block h3 {
  padding: 1.3mm 1.8mm !important;
  font-size: 8pt !important;
}
.service-preview-pdf-clone .preview-bank-owner {
  grid-template-columns: 25mm 1fr 20mm 1fr !important;
}
.service-preview-pdf-clone .preview-bank-owner span,
.service-preview-pdf-clone .preview-bank-owner strong {
  min-height: 5mm !important;
  padding: 1mm 1.5mm !important;
  font-size: 7.5pt !important;
}
.service-preview-pdf-clone .preview-bank-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}
.service-preview-pdf-clone .preview-bank-grid div {
  min-height: 22mm !important;
  padding: 2mm !important;
  gap: 1mm !important;
}
.service-preview-pdf-clone .preview-bank-grid img {
  max-width: 20mm !important;
  max-height: 9mm !important;
}
.service-preview-pdf-clone .preview-bank-grid strong,
.service-preview-pdf-clone .preview-bank-grid span {
  font-size: 6.8pt !important;
  line-height: 1.15 !important;
}
.service-preview-pdf-clone .preview-screen-only {
  display: none !important;
}
@media(max-width:900px){
  .preview-grid{
    grid-template-columns:150px 1fr;
  }
  .preview-bank-owner,
  .preview-bank-grid{
    grid-template-columns:1fr;
  }
  .preview-bank-grid div{
    border-right:0;
    border-bottom:1px solid #111827;
  }
  .sticky-actions{
    justify-content:stretch;
  }
  .sticky-actions .btn{
    flex:1;
  }
  .service-invoice-grid{
    grid-template-columns:1fr 1fr;
  }
  .service-isd-row{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:640px){
  .service-invoice-grid{
    grid-template-columns:1fr;
  }
  .service-isd-row{
    grid-template-columns:1fr;
  }
}


/* 4. Dashboard / métricas por rol */
.role-stats{
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}


/* 3. Component / cumpleaños: cards */
.birthday-card{
  border-color:var(--mwc-birthday-border);
}
.birthday-card h2::before{
  content:"🎂 ";
}


/* 3. Component / cumpleaños: alerta compacta */
.birthday-alert-bar{
  background:var(--mwc-alert-bg);
  border:1px solid var(--mwc-birthday-border);
  border-radius:18px;
  margin-bottom:20px;
  box-shadow:0 10px 24px rgba(15,23,42,.04);
  overflow:hidden;
}
.birthday-alert-main{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:14px 18px;
}
.birthday-alert-main strong{
  display:block;
  font-size:15px;
  color:var(--mwc-alert-title);
}
.birthday-alert-main span{
  display:block;
  color:var(--mwc-alert-text);
  font-size:13px;
  margin-top:2px;
}
.birthday-alert-detail{
  display:none;
  border-top:1px solid #e5e7eb;
  padding:14px 18px 18px;
  background:var(--mwc-alert-detail-bg);
}
.birthday-alert-detail.open{
  display:block;
}
.birthday-alert-detail table{
  background:white;
  border-radius:14px;
  overflow:hidden;
}


/* 3. Component / cumpleaños: modal */
.birthday-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.55);
  display:grid;
  place-items:center;
  z-index:999;
  padding:20px;
}
.birthday-modal-backdrop.hidden{
  display:none;
}
.birthday-modal{
  width:min(560px,100%);
  background:white;
  border-radius:24px;
  padding:24px;
  box-shadow:0 30px 90px rgba(15,23,42,.35);
  border:1px solid #bfdbfe;
}
.birthday-modal-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:10px;
}
.birthday-modal-header h2{
  margin:0;
}
.modal-close-btn{
  border:0;
  background:#f1f5f9;
  color:var(--mwc-color-title);
  width:36px;
  height:36px;
  border-radius:999px;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.modal-close-btn:hover{
  background:#e2e8f0;
}
.birthday-today-list{
  display:grid;
  gap:10px;
  margin:18px 0;
}
.birthday-today-item{
  border:1px solid #e5e7eb;
  background:#f8fafc;
  border-radius:16px;
  padding:14px;
  display:grid;
  gap:4px;
}
.birthday-today-item strong{
  font-size:16px;
  color:var(--mwc-color-title);
}
.birthday-today-item span{
  color:#334155;
}
.birthday-today-item small{
  color:#64748b;
}


/* 3. Component / cumpleaños: alerta flotante */
.birthday-today-floating{
  position:fixed;
  right:24px;
  bottom:24px;
  width:min(360px, calc(100vw - 32px));
  background:white;
  border:1px solid #bfdbfe;
  border-radius:20px;
  box-shadow:0 24px 70px rgba(15,23,42,.24);
  z-index:900;
  overflow:hidden;
}
.birthday-today-floating.hidden{
  display:none;
}
.birthday-floating-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  background:#eff6ff;
  border-bottom:1px solid #bfdbfe;
}
.birthday-floating-header strong{
  display:block;
  color:var(--mwc-color-title);
  font-size:15px;
}
.birthday-floating-header span{
  display:block;
  color:#64748b;
  font-size:12px;
  margin-top:2px;
}
.floating-close-btn{
  border:0;
  background:white;
  color:var(--mwc-color-title);
  width:30px;
  height:30px;
  border-radius:999px;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.floating-close-btn:hover{
  background:#e2e8f0;
}
.birthday-floating-list{
  display:grid;
  gap:8px;
  padding:12px;
}
.birthday-floating-item{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:10px 12px;
  display:grid;
  gap:2px;
}
.birthday-floating-item strong{
  color:var(--mwc-color-title);
  font-size:14px;
}
.birthday-floating-item span{
  color:#64748b;
  font-size:12px;
}
@media(max-width:700px){
  .birthday-today-floating{
    right:16px;
    bottom:16px;
  }
}


/* 2. Sidebar / card de usuario */
.sidebar{
  display:flex;
  flex-direction:column;
}
.sidebar nav{
  flex:0 0 auto;
}
.sidebar-user{
  margin-top:auto;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:12px;
  display:grid;
  grid-template-columns:40px 1fr;
  gap:10px;
  align-items:center;
}
.sidebar-avatar{
  width:40px;
  height:40px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#ffffff;
  color:var(--mwc-color-title);
  font-weight:900;
  font-size:13px;
  letter-spacing:.04em;
}
.sidebar-user-info{
  min-width:0;
}
.sidebar-user-info strong{
  display:block;
  color:#ffffff;
  font-size:13px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sidebar-user-info span{
  display:block;
  color:var(--mwc-brand-subtitle);
  font-size:11px;
  margin-top:2px;
}
.sidebar-logout{
  grid-column:1 / -1;
  display:flex;
  justify-content:center;
  align-items:center;
  text-decoration:none;
  color:#dbeafe;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:7px 9px;
  font-weight:700;
  font-size:12px;
  background:rgba(15,23,42,.18);
}
.sidebar-logout-form{
  grid-column:1 / -1;
  margin:0;
}
.sidebar-logout-form .sidebar-logout{
  width:100%;
  cursor:pointer;
  font:inherit;
}
.sidebar-logout:hover{
  background:rgba(255,255,255,.10);
  color:#ffffff;
}
@media(max-width:1000px){
  .sidebar-user{
    margin-top:16px;
  }
}


/* 2. Sidebar / iconos y hover */
.sidebar nav a{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:10px;
  transition:color .18s ease, transform .18s ease;
}
.sidebar nav a::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(96,165,250,.22), rgba(255,255,255,.08));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
  z-index:-1;
}
.sidebar nav a:hover::after,
.sidebar nav a.active::after{
  transform:scaleX(1);
}
.sidebar nav a:hover{
  transform:translateX(1px);
}
.sidebar nav a.active{
  background:transparent;
  color:#ffffff;
  box-shadow:inset 3px 0 0 var(--mwc-sidebar-active-indicator);
}
.sidebar nav a.active::before{
  content:none;
}
.nav-mini-icon{
  width:17px;
  height:17px;
  flex:0 0 17px;
  display:grid;
  place-items:center;
  font-size:15px;
  line-height:1;
  opacity:.78;
  transition:opacity .18s ease, transform .18s ease;
}
.sidebar nav a.active .nav-mini-icon,
.sidebar nav a:hover .nav-mini-icon{
  opacity:1;
  transform:scale(1.06);
}
.sidebar nav a span:not(.nav-mini-icon){
  position:relative;
  z-index:1;
}


/* 2. Sidebar / SVG icons */
.nav-icon{
  width:17px;
  height:17px;
  flex:0 0 17px;
  opacity:.82;
  transition:opacity .18s ease, transform .18s ease;
}
.sidebar nav a.active .nav-icon,
.sidebar nav a:hover .nav-icon{
  opacity:1;
  transform:scale(1.06);
}

/* 3. Component / bloques técnicos y alertas operativas */
.code-sample{background:var(--mwc-brand-mark-bg);color:#e2e8f0;padding:16px;border-radius:14px;overflow:auto;font-size:13px;}
.ops-alert-bar{background:var(--mwc-alert-bg);border:1px solid var(--mwc-pending-border);border-radius:18px;margin-bottom:20px;box-shadow:0 10px 24px rgba(15,23,42,.04);overflow:hidden;}

/* ============================================================
   5. GRIDLISTS / TABLAS OPERATIVAS
   Los colores se configuran arriba en MWC THEME TOKENS.
   ============================================================ */
/* Gridlists: el dato de fila es texto principal; solo small queda como metadata. */
.compact-table tbody td,
.agencies-table tbody td,
.quotes-table tbody td,
.visits-table tbody td,
.provider-list-table tbody td{
  color:var(--mwc-grid-item);
  -webkit-text-fill-color:var(--mwc-grid-item);
  font-size:12.8px;
  line-height:1.28;
  font-weight:500;
}
.compact-table tbody td small,
.agencies-table tbody td small,
.quotes-table tbody td small,
.visits-table tbody td small,
.provider-list-table tbody td small{
  color:var(--mwc-grid-meta);
  -webkit-text-fill-color:var(--mwc-grid-meta);
  font-size:11px;
  line-height:1.15;
  font-weight:500;
}
.compact-table{font-size:13px}
.compact-table tbody td,
.agencies-table tbody td,
.visits-table tbody td,
.quotes-table tbody td,
.provider-list-table tbody td{
  color:var(--mwc-grid-item);
  -webkit-text-fill-color:var(--mwc-grid-item);
  font-weight:500;
}
.compact-table tbody td.muted-cell,
.agencies-table tbody td.muted-cell,
.visits-table tbody td.muted-cell{
  color:var(--mwc-grid-item);
  -webkit-text-fill-color:var(--mwc-grid-item);
  font-weight:500;
}
.compact-table tbody select,
.agencies-table tbody select,
.visits-table tbody select,
.quotes-table tbody select{
  color:var(--mwc-grid-item);
  -webkit-text-fill-color:var(--mwc-grid-item);
  font-weight:500;
}
.compact-table th{padding:9px 8px;font-size:11px}
.compact-table td{padding:9px 8px;vertical-align:middle}
.agencies-table .agency-cell strong{
  display:block;
  font-size:13px;
  line-height:1.15;
  margin:0;
  font-weight:650;
  letter-spacing:0;
}
.agencies-table .agency-cell small,.compact-table small{
  display:block;
  margin-top:2px;
  line-height:1.15;
  color:var(--mwc-grid-meta);
  -webkit-text-fill-color:var(--mwc-grid-meta);
  font-weight:500;
}
.muted-cell{
  color:var(--mwc-grid-item);
  -webkit-text-fill-color:var(--mwc-grid-item);
  line-height:1.2;
  font-weight:500;
}
.inline-status-form select{min-width:120px;padding:7px 9px;border-radius:10px;font-size:12px;color:var(--mwc-grid-item)}

/* Ítems clickeables dentro de gridlists: usan un token propio para poder cambiarlo fácil. */
.compact-table tbody td a:not(.btn):not(.compact-btn),
.agencies-table tbody td a:not(.btn):not(.compact-btn),
.quotes-table tbody td a:not(.btn):not(.compact-btn),
.visits-table tbody td a:not(.btn):not(.compact-btn),
.provider-list-table tbody td a:not(.btn):not(.compact-btn){
  color:var(--mwc-grid-link);
  -webkit-text-fill-color:var(--mwc-grid-link);
  font-weight:650;
}
.compact-table tbody td a:not(.btn):not(.compact-btn) strong,
.agencies-table tbody td a:not(.btn):not(.compact-btn) strong,
.quotes-table tbody td a:not(.btn):not(.compact-btn) strong,
.visits-table tbody td a:not(.btn):not(.compact-btn) strong,
.provider-list-table tbody td a:not(.btn):not(.compact-btn) strong{
  color:inherit;
  -webkit-text-fill-color:inherit;
}
.compact-table tbody td a:not(.btn):not(.compact-btn):hover,
.agencies-table tbody td a:not(.btn):not(.compact-btn):hover,
.quotes-table tbody td a:not(.btn):not(.compact-btn):hover,
.visits-table tbody td a:not(.btn):not(.compact-btn):hover,
.provider-list-table tbody td a:not(.btn):not(.compact-btn):hover{
  color:var(--mwc-grid-link-hover);
  -webkit-text-fill-color:var(--mwc-grid-link-hover);
}

.compact-btn{padding:7px 10px;border-radius:10px;font-size:12px;min-height:auto}
.quotes-table .pill,.agencies-table .pill{white-space:nowrap}
.quotes-table td{padding:8px 8px}
.quotes-table .agency-cell{min-width:150px;max-width:220px}
.quotes-table .agency-cell strong{font-size:13px;font-weight:850}
  .quotes-table td:nth-child(3){max-width:340px;line-height:1.25}
  .quotes-table td:nth-child(3) small{margin-top:3px}
  .quotes-table .quote-detail-cell{
    max-width:320px;
    line-height:1.22;
  }
  .quotes-table .quote-detail-text{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    color:var(--mwc-color-text);
  }
  .quotes-table .quote-detail-cell small{
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    margin-top:3px;
  }
  .quotes-table .quote-action-wrap{gap:6px}
.accounting-table .op-code-cell{
  width:88px;
  min-width:88px;
  max-width:96px;
  white-space:nowrap;
}
.accounting-table .op-code-cell strong{
  font-size:12px;
  line-height:1.1;
}
.accounting-table .op-code-cell small{
  font-size:10px;
}
.reports-mail-card dl{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:8px 12px;
  margin:0;
}
.reports-mail-card dt{
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}
.reports-mail-card dd{
  margin:0;
  color:var(--mwc-color-title);
  font-size:13px;
  line-height:1.3;
  overflow-wrap:anywhere;
}
.users-table input,.users-table select{padding:7px 9px;font-size:12px;border-radius:10px}
.operative-code-field{max-width:84px}
.operative-code-column{width:68px;white-space:nowrap}
.users-table .operative-code-input{width:50px;min-width:50px;text-transform:uppercase;text-align:center;padding-left:4px;padding-right:4px}
.profile-layout{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(320px,1.3fr);gap:20px;max-width:860px;align-items:start}
.profile-summary-card{display:flex;gap:14px;align-items:center;padding:22px}
.profile-avatar{flex:0 0 auto}
.profile-summary-card h2{margin:0 0 4px;font-size:19px}
.profile-summary-card p,.profile-summary-card span{display:block;margin:0;color:var(--muted);font-size:13px}
.profile-password-form{display:grid;gap:14px;padding:22px}
.profile-password-form .card-header{margin-bottom:2px}
@media (max-width:720px){.profile-layout{grid-template-columns:1fr}}
.actions-cell{display:flex;gap:6px;align-items:center}
.actions-cell form{margin:0}
.compact-form{gap:12px}
.roles-list{display:grid;gap:10px}
.role-row{display:grid;grid-template-columns:180px 1fr 100px;gap:14px;align-items:center;border:1px solid var(--mwc-color-line-soft);border-radius:16px;padding:12px;background:var(--mwc-color-panel);color:var(--mwc-color-text)}
.role-meta strong{display:block;font-size:14px;margin:0}
.role-meta small{color:var(--mwc-color-muted)}
.role-permissions-line{display:flex;flex-wrap:wrap;gap:7px}
.permission-chip{display:flex;align-items:center;gap:6px;border:1px solid var(--mwc-color-line-soft);background:var(--mwc-alert-detail-bg);color:var(--mwc-color-text);border-radius:999px;padding:6px 9px;font-size:12px;font-weight:700}
.permission-chip input{width:auto}
.role-actions{display:flex;justify-content:flex-end}
.compact-permissions{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
@media(max-width:1000px){.role-row{grid-template-columns:1fr}.role-actions{justify-content:flex-start}}


/* 5. Gridlists / Bitácora Comercial */
.visits-table .agency-cell strong{
  display:block;
  font-size:13px;
  line-height:1.15;
  margin:0;
}
.visits-table .agency-cell small,
.visits-table .muted-cell small,
.visits-table .observation-cell small{
  display:block;
  margin-top:2px;
  line-height:1.15;
  color:var(--mwc-grid-meta);
}
.visits-table td{
  vertical-align:middle;
}
.observation-cell{
  max-width:320px;
  line-height:1.25;
}
.evidence-cell{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
}
.compact-link{
  font-size:12px;
  font-weight:800;
}
.status-pill{
  white-space:nowrap;
}
.mini-pill{
  margin-top:4px;
  padding:4px 7px;
  font-size:11px;
}


/* 5. Gridlists / filtros de agencias */
.agencies-filter-bar{
  display:grid;
  grid-template-columns:minmax(220px,1.5fr) repeat(4,minmax(145px,1fr)) auto auto;
  gap:10px;
  align-items:center;
}
.agencies-filter-bar select,
.agencies-filter-bar input{
  min-height:42px;
}
.agency-active-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:-6px 0 16px;
  color:#64748b;
  font-size:12px;
}
.agency-active-filters strong{
  background:#eff6ff;
  color:var(--mwc-color-link);
  border:1px solid #bfdbfe;
  border-radius:999px;
  padding:5px 9px;
  font-size:12px;
}
.filter-hint{
  color:#94a3b8;
  font-size:11px;
  margin-left:3px;
}
@media(max-width:1200px){
  .agencies-filter-bar{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:700px){
  .agencies-filter-bar{
    grid-template-columns:1fr;
  }
}


/* 5. Gridlists / filtros desplegables en cabecera */
.agencies-search-bar{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:14px;
}
.agencies-search-bar input[type="text"],
.agencies-search-bar input[name="q"]{
  flex:1;
}
.th-filter{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.th-filter-btn{
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-transform:inherit;
  letter-spacing:inherit;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.th-filter-btn:hover{
  color:var(--mwc-color-link);
}
.th-filter-menu{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:210px;
  max-height:280px;
  overflow:auto;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 18px 45px rgba(15,23,42,.18);
  z-index:40;
  padding:6px;
}
.th-filter-menu.open{
  display:grid;
  gap:3px;
}
/*
   Los filtros viven dentro de tablas que, en algunas vistas, necesitan
   overflow para el desplazamiento horizontal. Al abrirse se posicionan como
   capa fija (coordenadas calculadas en base.html), así no quedan cortados si
   la tabla no tiene filas o si el menú supera la altura de la card.
*/
.th-filter-menu.open[data-mwc-floating-filter="true"]{
  position:fixed;
  top:var(--mwc-filter-top, 0px);
  left:var(--mwc-filter-left, 0px);
  max-height:var(--mwc-filter-max-height, 280px);
}
.th-filter-menu button,
.th-filter-menu a{
  border:0;
  background:transparent;
  text-align:left;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  color:var(--mwc-color-title);
  font-size:12px;
  font-weight:700;
  text-decoration:none;
}
.th-filter-menu button:hover,
.th-filter-menu a:hover{
  background:#f1f5f9;
}
.th-filter-menu button.selected,
.th-filter-menu a.selected{
  background:#eff6ff;
  color:var(--mwc-color-link);
}
@media(max-width:900px){
  .th-filter-menu{
    position:fixed;
    left:20px;
    right:20px;
    top:auto;
    min-width:auto;
  }
}


/* 5. Gridlists / comportamiento unificado de filtros */
.th-filter-menu{
  text-transform:none;
  letter-spacing:normal;
}
.th-filter-menu button{
  white-space:nowrap;
}
#quotesAgencyMenu{
  min-width:250px;
}
#quotesAgencyMenu [data-quote-agency-search]{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  margin:0;
  padding:8px 10px;
  border:1px solid var(--mwc-input-border);
  border-radius:10px;
  font:inherit;
  font-size:12px;
  line-height:1.2;
  color:var(--mwc-input-text);
  background:var(--mwc-input-bg);
}
#quotesAgencyMenu [data-quote-agency-search]:focus{
  outline:0;
  border-color:var(--mwc-color-link);
}
#quotesAgencyMenu [data-quote-agency-option][hidden]{
  display:none !important;
}
.agency-active-filters{
  margin-top:-8px;
}

/* 3. Component / cotizaciones: papelera discreta */
.quote-row-actions{gap:6px}
.quote-trash-btn{padding:7px 9px;min-width:34px;justify-content:center;color:var(--mwc-badge-hot-text);border-color:#fecaca;background:#fff5f5}
.quote-trash-btn:hover{background:var(--mwc-badge-hot-bg);border-color:#fca5a5;color:#7f1d1d}


/* 3. Component / cotizaciones: acciones inline compatibilidad */
.quote-inline-delete {
  display: inline-flex !important;
  margin: 0 0 0 6px !important;
  vertical-align: middle;
}
.quote-inline-delete .btn,
.quote-inline-delete button {
  margin: 0 !important;
}
td.actions,
.table-actions,
.actions {
  gap: 6px;
}


/* 3. Component / cotizaciones: botón eliminar inline */
.quote-inline-delete {
  display: inline-flex !important;
  margin: 0 0 0 6px !important;
  vertical-align: middle !important;
}
.quote-inline-delete button {
  margin: 0 !important;
}
td.actions {
  white-space: nowrap;
}


/* 3. Component / acciones de tabla y badges */
td.actions,
.table-actions,
.actions {
  align-items: center;
}

td.actions {
  white-space: nowrap;
}

td.actions .btn,
.table-actions .btn,
.actions .btn,
.compact-btn {
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 11px;
}

.quote-inline-delete {
  display: inline-flex !important;
  margin: 0 0 0 6px !important;
  vertical-align: middle !important;
}

.quote-inline-delete button {
  min-width: 38px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.15;
}

.table-responsive table td,
.table-responsive table th {
  vertical-align: middle;
}

.page-header .actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}


/* ============================================================
   3. GLOBAL UI POLISH
   Solo visual: no cambia lógica, rutas, DB ni plantillas críticas.
   ============================================================ */

/* Layout general */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.main-content,
.content,
.page-content {
  transition: background .2s ease;
}

/* Header de páginas */
.page-header {
  gap: 16px;
  margin-bottom: 18px;
}

.page-header h1 {
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.page-header .muted,
.muted {
  line-height: 1.45;
}

/* Cards más limpias */
.card,
.panel,
.stat-card,
.metric-card {
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.card:hover,
.panel:hover,
.stat-card:hover,
.metric-card:hover {
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

/* Tablas */
.table-responsive {
  border-radius: 18px;
  overflow: auto;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

table th {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
}

table td {
  vertical-align: middle;
}

table tbody tr {
  transition: background .15s ease, transform .15s ease;
}

table tbody tr:hover {
  background: rgba(37, 99, 235, 0.035);
}

/* Acciones compactas en tablas */
td.actions,
.table-actions,
.actions {
  align-items: center;
  gap: 6px;
}

td.actions {
  white-space: nowrap;
}

td.actions form,
.table-actions form,
.actions form {
  display: inline-flex;
  margin: 0;
}

td.actions .btn,
.table-actions .btn,
.actions .btn,
.compact-btn {
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 12px;
  line-height: 1;
}

/* Botones */
.btn,
button,
input[type="submit"] {
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
  background:var(--mwc-btn-hover-bg);
  transform: translateY(-1px);
}

.btn:active,
button:active,
input[type="submit"]:active {
  transform: translateY(0);
}

/* Botón eliminar compacto */
.quote-inline-delete {
  display: inline-flex !important;
  margin: 0 0 0 6px !important;
  vertical-align: middle !important;
}

.quote-inline-delete button {
  min-width: 38px;
  margin: 0 !important;
}

/* Badges / estados */
.badge,
.status,
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.15;
  font-weight: 650;
}

/* Formularios */
input,
select,
textarea {
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color:var(--mwc-input-focus);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

/* Sidebar */
.sidebar a,
.sidebar .nav-link,
nav a {
  transition: background .15s ease, color .15s ease, transform .12s ease;
}

.sidebar a:hover,
.sidebar .nav-link:hover,
nav a:hover {
  transform: translateX(1px);
}

/* Bloque usuario sidebar */
.user-block,
.sidebar-user,
.current-user {
  border-radius: 18px;
}

/* Dashboard métricas */
.stat-card,
.metric-card {
  position: relative;
  overflow: hidden;
}

.stat-card::after,
.metric-card::after {
  content: "";
  position: absolute;
  inset: auto -30px -40px auto;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: rgba(37, 99, 235, .055);
  pointer-events: none;
}

/* Alertas */
.alert,
.flash,
.toast {
  border-radius: 16px;
}

/* Responsive pequeño */
@media (max-width: 900px) {
  .page-header {
    align-items: flex-start;
  }

  td.actions,
  .table-actions {
    white-space: nowrap;
  }

  .card,
  .panel {
    border-radius: 18px;
  }
}


/* ============================================================
   4. MODULE / BITÁCORA CON COTIZACIÓN EMBEBIDA
   Solo UI: no cambia lógica ni datos.
   ============================================================ */

/* Celda de observación en bitácora */
.mw-observation-cell {
  display: block;
  max-width: 520px;
  color: #64748b;
  font-size: 12.5px;
  line-height: 1.38;
}

/* Label fresco y moderno */
.mw-quote-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin: 8px 0 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(59, 130, 246, .14), rgba(20, 184, 166, .16));
  border: 1px solid rgba(59, 130, 246, .22);
  color: #0f766e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(15, 118, 110, .08);
}

.mw-quote-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #14b8a6);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, .14);
}

/* Cuando la cotización queda justo debajo del label, hacerla más legible */
.mw-quote-label + br,
.mw-quote-label + p {
  margin-top: 4px;
}

/* Caja visual para textos de cotización si la plantilla lo envuelve */
.mw-quote-box {
  margin-top: 6px;
  padding: 11px 13px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.98)),
    radial-gradient(circle at top left, rgba(20,184,166,.13), transparent 36%);
  border: 1px solid rgba(148, 163, 184, .25);
  border-left: 4px solid #14b8a6;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 650;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Fallback: dentro de la columna observación, textos después del label se ven más fuertes */
td:has(.mw-quote-label) {
  color: #64748b;
}

td:has(.mw-quote-label) .mw-quote-label {
  color: #0f766e;
}

/* Mejora general de observaciones largas */
td:has(.mw-quote-label) {
  line-height: 1.35;
}

td:has(.mw-quote-label) small,
td:has(.mw-quote-label) .muted {
  color: #94a3b8;
}

/* Si la cotización queda como texto simple después del badge, subimos contraste de la celda completa sin afectar metadata demasiado */
td:has(.mw-quote-label) {
  font-size: 13px;
}

td:has(.mw-quote-label) strong,
td:has(.mw-quote-label) b {
  color: #0f172a;
}

/* Compatibilidad si navegador no soporta :has: al menos el badge queda moderno */
@supports not selector(td:has(.mw-quote-label)) {
  .mw-observation-cell {
    color: #64748b;
  }
}

/* En pantallas pequeñas, evitar que se vuelva gigante */
@media (max-width: 900px) {
  .mw-observation-cell {
    max-width: 360px;
  }

  .mw-quote-box {
    font-size: 13.5px;
    padding: 10px 12px;
  }
}


/* ============================================================
   3. GLOBAL READABILITY
   Contraste y lectura conectados a tokens del tema.
   ============================================================ */

:root {
  --mw-ink-strong: var(--mwc-color-title);
  --mw-ink: var(--mwc-color-text);
  --mw-ink-soft: var(--mwc-color-subtitle);
  --mw-ink-muted: var(--mwc-color-muted);
  --mw-ink-faint: var(--mwc-color-muted-soft);

  --mw-bg-main: var(--mwc-color-bg-soft);
  --mw-bg-surface: var(--mwc-color-card);
  --mw-bg-soft: var(--mwc-alert-detail-bg);
  --mw-border-soft: rgba(148, 163, 184, .24);
  --mw-border-medium: rgba(100, 116, 139, .26);

  --mw-blue: var(--mwc-color-link);
  --mw-teal: #0f766e;
  --mw-purple: #6d28d9;
}
/* Base: menos gris lavado, más lectura */
html,
body {
  color: var(--mw-ink);
  background: var(--mw-bg-main);
}

/* Títulos principales */
h1,
h2,
h3,
h4,
.page-header h1,
.card h1,
.card h2,
.card h3 {
  color: var(--mw-ink-strong);
}

/* Eyebrows / etiquetas superiores */
.eyebrow,
.kicker,
.section-label {
  color: #475569;
  font-weight: 800;
  letter-spacing: .075em;
}

/* Textos secundarios: siguen suaves, pero legibles.
   No usar small global aquí: los small dentro de gridlists son datos de fila. */
.muted,
.text-muted,
.subtitle,
.description {
  color: var(--mw-ink-muted) !important;
}

/* Cards: blanco elegante pero no quemado */
.card,
.panel,
.stat-card,
.metric-card,
.table-card {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,252,255,.98));
  border: 1px solid var(--mw-border-soft);
}

/* Inputs más legibles */
input,
select,
textarea {
  color: var(--mw-ink);
  background: rgba(255,255,255,.96);
  border-color: var(--mw-border-soft);
}

input::placeholder,
textarea::placeholder {
  color: #8a94a6;
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(37, 99, 235, .42);
}

/* Tablas: subir contraste general */
table {
  color: var(--mw-ink);
}

table thead th,
.table thead th {
  color: #475569;
  background: rgba(248, 250, 252, .92);
  border-bottom: 1px solid var(--mw-border-medium);
}

table tbody td,
.table tbody td {
  color: var(--mwc-grid-item, var(--mw-ink));
  -webkit-text-fill-color: var(--mwc-grid-item, var(--mw-ink));
  border-bottom-color: rgba(226, 232, 240, .92);
}

table tbody tr:hover td {
  color: var(--mw-ink);
}

/* Celdas con datos principales más firmes */
td:first-child,
.table-primary-text,
.agency-name,
.contact-name,
.quote-title {
  color: var(--mw-ink);
  font-weight: 650;
}

/* Observaciones y detalles largos */
td,
.observation,
.observacion,
.detail,
.details,
.note,
.notes {
  line-height: 1.45;
}

/* Badges: mantener frescos pero con texto fuerte */
.badge,
.status,
.pill {
  color: var(--mw-ink-soft);
  border: 1px solid rgba(148, 163, 184, .22);
  background: rgba(241, 245, 249, .92);
}

.badge.danger,
.status.danger,
.pill.danger {
  color: #991b1b;
  background: #fee2e2;
  border-color: rgba(248, 113, 113, .32);
}

.badge.success,
.status.success,
.pill.success {
  color: #166534;
  background: #dcfce7;
  border-color: rgba(34, 197, 94, .28);
}

.badge.warning,
.status.warning,
.pill.warning {
  color: #92400e;
  background: #fef3c7;
  border-color: rgba(245, 158, 11, .28);
}

.badge.info,
.status.info,
.pill.info {
  color: #1d4ed8;
  background: #dbeafe;
  border-color: rgba(59, 130, 246, .28);
}

/* Estados de cotización por texto/clases comunes si existen */
[class*="pendiente"],
.badge-pending {
  color: #9a3412;
}

[class*="enviada"],
.badge-sent {
  color: #075985;
}

[class*="cerrada"],
.badge-closed {
  color: #166534;
}

/* Botones: texto más legible */
.btn,
button,
input[type="submit"] {
  font-weight: 700;
}

.btn:not(.danger),
button:not(.danger) {
  color: var(--mw-ink-soft);
}

/* Botón principal si existe */
.btn.primary,
.btn-primary,
button.primary {
  color: #ffffff !important;
}

/* Sidebar: conservar elegancia pero subir legibilidad */
.sidebar,
.sidebar * {
  text-rendering: optimizeLegibility;
}

.sidebar a,
.sidebar .nav-link,
nav a {
  color: rgba(255,255,255,.82);
}

.sidebar a:hover,
.sidebar .nav-link:hover,
nav a:hover {
  color: #ffffff;
}

.sidebar a.active,
.sidebar .nav-link.active,
nav a.active {
  color: #ffffff;
}

/* Bloque usuario */
.user-block,
.sidebar-user,
.current-user {
  color: rgba(255,255,255,.88);
}

.user-block small,
.sidebar-user small,
.current-user small {
  color: rgba(255,255,255,.64) !important;
}

/* Bitácora / visitas: lectura de observaciones */
.mw-observation-cell {
  color: var(--mwc-grid-item, var(--mw-ink));
}

.mw-quote-label {
  color: #0f766e !important;
}

.mw-quote-box {
  color: var(--mw-ink-strong);
}

/* Links */
a {
  color: #2563eb;
}

a:hover {
  color: #1d4ed8;
}

/* Flash/alertas */
.alert,
.flash,
.toast {
  color: var(--mw-ink);
  border-color: var(--mw-border-soft);
}

/* Mejor balance en pantallas grandes */
@media (min-width: 1200px) {
  table tbody td {
    font-size: 12.8px;
  }

  .muted,
  .text-muted {
    font-size: 12.5px;
  }

  small {
    font-size: 11px;
  }
}


/* ============================================================
   MWC Dashboard Header Theme Bindings
   El hero/dashboard ya no fuerza blanco: consume los tokens del
   tema central para que PANEL DE TRABAJO, Dashboard y subtítulos
   se controlen desde MWC THEME TOKENS.
   ============================================================ */

@media screen {
  /* Hero / cabecera dashboard */
  .dashboard-hero,
  .hero,
  .work-panel,
  .panel-trabajo,
  [class*="dashboard"] .hero,
  [class*="dashboard"] .work-panel {
    color: var(--mwc-color-text) !important;
    background: var(--mwc-hero-bg) !important;
    border-color: var(--mwc-hero-border) !important;
  }

  /* PANEL DE TRABAJO */
  .dashboard-hero .eyebrow,
  .hero .eyebrow,
  .work-panel .eyebrow,
  .panel-trabajo .eyebrow,
  .dashboard-hero .kicker,
  .hero .kicker,
  .work-panel .kicker,
  .panel-trabajo .kicker {
    color: var(--mwc-eyebrow) !important;
    font-weight: 800;
    letter-spacing: .08em;
  }

  /* Dashboard / títulos de cabecera */
  .dashboard-hero h1,
  .dashboard-hero h2,
  .dashboard-hero h3,
  .hero h1,
  .hero h2,
  .hero h3,
  .work-panel h1,
  .work-panel h2,
  .work-panel h3,
  .panel-trabajo h1,
  .panel-trabajo h2,
  .panel-trabajo h3 {
    color: var(--mwc-page-title) !important;
  }

  /* Vista general de MW Connect... */
  .dashboard-hero p,
  .hero p,
  .work-panel p,
  .panel-trabajo p,
  .dashboard-hero .muted,
  .hero .muted,
  .work-panel .muted,
  .panel-trabajo .muted {
    color: var(--mwc-page-subtitle) !important;
  }

  /* Mantener soporte solo para paneles explícitamente oscuros */
  .bg-dark,
  .dark-card,
  .dark-panel {
    color: rgba(255,255,255,.9) !important;
  }

  .bg-dark .muted,
  .dark-card .muted,
  .dark-panel .muted {
    color: rgba(226,232,240,.82) !important;
  }

  /* Métricas del dashboard */
  .stat-card .muted,
  .metric-card .muted,
  .stat-card small,
  .metric-card small {
    color: var(--mwc-stat-label) !important;
  }

  .stat-card h2,
  .stat-card h3,
  .metric-card h2,
  .metric-card h3,
  .stat-card .number,
  .metric-card .number {
    color: var(--mwc-stat-value) !important;
  }

  /* Bloques de alertas del dashboard */
  .dashboard-alert,
  .alert-card,
  .birthday-card,
  .pending-card {
    color: var(--mwc-alert-title);
  }

  .dashboard-alert .muted,
  .alert-card .muted,
  .birthday-card .muted,
  .pending-card .muted {
    color: var(--mwc-alert-text) !important;
  }
}


/* ============================================================
   4. DASHBOARD / SCROLL CARDS
   Limita listas/tablas largas para que el Dashboard no crezca infinito.
   ============================================================ */

/* Scroll interno para tablas/listas dentro de cards del dashboard */
.dashboard .card:has(table),
.dashboard .panel:has(table),
.dashboard .table-card,
.dashboard .audit-card,
.dashboard .recent-card,
.dashboard .campaigns-card,
.dashboard .birthday-card,
.dashboard .pending-card {
  max-height: 520px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* La zona de tabla/lista hace scroll, no toda la card */
.dashboard .card:has(table) .table-responsive,
.dashboard .panel:has(table) .table-responsive,
.dashboard .table-card .table-responsive,
.dashboard .audit-card .table-responsive,
.dashboard .recent-card .table-responsive,
.dashboard .campaigns-card .table-responsive,
.dashboard .birthday-card .table-responsive,
.dashboard .pending-card .table-responsive {
  max-height: 390px;
  overflow-y: auto;
  overflow-x: auto;
  padding-right: 4px;
}

/* Si hay listas sin table-responsive */
.dashboard .card:has(ul),
.dashboard .panel:has(ul) {
  max-height: 520px;
  overflow: hidden;
}

.dashboard .card:has(ul) ul,
.dashboard .panel:has(ul) ul {
  max-height: 390px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Cabecera de tablas sticky dentro del scroll */
.dashboard .table-responsive thead th,
.dashboard table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(248, 250, 252, .98);
  backdrop-filter: blur(8px);
}

/* Scrollbar elegante */
.dashboard .table-responsive::-webkit-scrollbar,
.dashboard .card ul::-webkit-scrollbar,
.dashboard .panel ul::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dashboard .table-responsive::-webkit-scrollbar-track,
.dashboard .card ul::-webkit-scrollbar-track,
.dashboard .panel ul::-webkit-scrollbar-track {
  background: rgba(241, 245, 249, .8);
  border-radius: 999px;
}

.dashboard .table-responsive::-webkit-scrollbar-thumb,
.dashboard .card ul::-webkit-scrollbar-thumb,
.dashboard .panel ul::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .65);
  border-radius: 999px;
}

.dashboard .table-responsive::-webkit-scrollbar-thumb:hover,
.dashboard .card ul::-webkit-scrollbar-thumb:hover,
.dashboard .panel ul::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, .75);
}

/* Para cards generales con muchas filas fuera del dashboard */
.card.scroll-card,
.panel.scroll-card,
.card.grid-scroll,
.panel.grid-scroll {
  max-height: 520px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card.scroll-card .table-responsive,
.panel.scroll-card .table-responsive,
.card.grid-scroll .table-responsive,
.panel.grid-scroll .table-responsive {
  max-height: 390px;
  overflow-y: auto;
  overflow-x: auto;
}

/* Toque visual: degradado inferior sutil para indicar continuidad */
.dashboard .card:has(.table-responsive)::after,
.dashboard .panel:has(.table-responsive)::after {
  content: "";
  pointer-events: none;
  position: sticky;
  bottom: 0;
  display: block;
  height: 16px;
  margin-top: -16px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.92));
}

/* Altura más compacta para laptop */
@media (max-height: 850px) {
  .dashboard .card:has(table),
  .dashboard .panel:has(table),
  .dashboard .table-card,
  .dashboard .audit-card,
  .dashboard .recent-card,
  .dashboard .campaigns-card,
  .dashboard .birthday-card,
  .dashboard .pending-card {
    max-height: 460px;
  }

  .dashboard .card:has(table) .table-responsive,
  .dashboard .panel:has(table) .table-responsive,
  .dashboard .table-card .table-responsive,
  .dashboard .audit-card .table-responsive,
  .dashboard .recent-card .table-responsive,
  .dashboard .campaigns-card .table-responsive,
  .dashboard .birthday-card .table-responsive,
  .dashboard .pending-card .table-responsive {
    max-height: 330px;
  }
}


/* ============================================================
   MWC v1.3C12 Quotes Action Fix
   Mantiene Ver + Papelera en la misma línea.
   ============================================================ */
.action-cell,
td.actions,
td.table-actions {
  white-space: nowrap !important;
  display: table-cell;
}

.action-cell > a,
.action-cell > form,
td.actions > a,
td.actions > form,
td.table-actions > a,
td.table-actions > form {
  display: inline-flex !important;
  vertical-align: middle !important;
  align-items: center !important;
  margin: 0 4px 0 0 !important;
}

.quote-delete-inline {
  display: inline-flex !important;
  margin: 0 0 0 6px !important;
  vertical-align: middle !important;
}

.quote-delete-inline button,
.quote-delete-inline .btn {
  margin: 0 !important;
}


/* 3. Component / quotes actions inline */
.action-cell,
td.actions,
td.table-actions {
  white-space: nowrap !important;
}

.action-cell > a,
.action-cell > form,
td.actions > a,
td.actions > form,
td.table-actions > a,
td.table-actions > form {
  display: inline-flex !important;
  vertical-align: middle !important;
  align-items: center !important;
  margin: 0 6px 0 0 !important;
}

.quote-delete-inline {
  display: inline-flex !important;
  margin: 0 0 0 6px !important;
  vertical-align: middle !important;
}

.quote-delete-inline button,
.quote-delete-inline .btn {
  margin: 0 !important;
}


/* 3. Component / quotes action buttons inline */
.quote-action-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.action-cell {
  white-space: nowrap !important;
  min-width: 120px;
}

.action-cell a,
.action-cell form,
.quote-action-wrap a,
.quote-action-wrap form,
.quote-delete-inline {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

.quote-delete-inline button,
.quote-delete-inline .btn {
  margin: 0 !important;
  white-space: nowrap !important;
}


/* 3. Component / quotes final inline actions */
.quote-action-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.action-cell {
  white-space: nowrap !important;
  min-width: 126px !important;
}

.action-cell a,
.action-cell form,
.quote-action-wrap a,
.quote-action-wrap form,
.quote-delete-inline {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  vertical-align: middle !important;
  width: auto !important;
}

.quote-delete-inline button,
.quote-delete-inline .btn {
  display: inline-flex !important;
  margin: 0 !important;
  width: auto !important;
  white-space: nowrap !important;
}


/* 4. Module / papelera de cotizaciones */
.trash-detail-cell {
  color: #1f2937 !important;
  font-weight: 550;
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
  max-width: 420px;
}

.trash-quotes-card .action-cell {
  white-space: nowrap !important;
}

.trash-quotes-card .quote-action-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.trash-quotes-card .quote-delete-inline {
  display: inline-flex !important;
  margin: 0 !important;
}


/* ============================================================
   4. MODULE / AGENCY DETAIL EDITOR
   Scope: solo ficha individual de agencia.
   ============================================================ */

.agency-detail-editor-page {
  --agency-border: var(--mwc-color-line-soft);
  --agency-soft: var(--mwc-alert-detail-bg);
  --agency-text: var(--mwc-color-text);
  --agency-muted: var(--mwc-color-muted);
  --agency-card-bg: var(--mwc-color-card);
  --agency-card-shadow: 0 18px 50px rgba(15, 23, 42, .06);
  --agency-section-bg: linear-gradient(180deg, rgba(248,250,252,.68), rgba(255,255,255,.98));
  --agency-section-soft-bg: linear-gradient(180deg, rgba(239,246,255,.45), rgba(255,255,255,.98));
  --agency-section-title: var(--mwc-color-link);
  --agency-section-title-bg: rgba(219,234,254,.8);
  --agency-section-title-border: rgba(191,219,254,.9);
  --agency-field-label: var(--mwc-label-text);
  --agency-checkbox-bg: rgba(248,250,252,.88);
  --agency-input-bg: var(--mwc-input-bg);
  --agency-input-text: var(--mwc-input-text);
  --agency-input-border: var(--mwc-input-border);
}

.agency-detail-editor-page .card {
  overflow: visible;
}

.agency-detail-header {
  margin-bottom: 20px;
}

.agency-editor-card,
.agency-counter-create-card,
.agency-counters-card,
.agency-quotes-card {
  border-radius: 26px;
  border: 1px solid var(--agency-border);
  background: var(--agency-card-bg);
  box-shadow: var(--agency-card-shadow);
}

.agency-editor-card {
  padding: 26px;
}

.agency-editor-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
}

.agency-editor-card-head h2 {
  margin: 0 0 6px;
  color: var(--agency-text);
  font-size: 25px;
  letter-spacing: -.03em;
}

.agency-editor-form {
  display: grid;
  gap: 22px;
}

.agency-form-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--agency-border);
  border-radius: 22px;
  background: var(--agency-section-bg);
}

.agency-form-section-soft {
  background: var(--agency-section-soft-bg);
}

.agency-section-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--agency-section-title);
  font-weight: 900;
  letter-spacing: -.015em;
  margin-bottom: 2px;
}

.agency-section-title span {
  display: inline-flex;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--agency-section-title-bg);
  border: 1px solid var(--agency-section-title-border);
}

.agency-detail-editor-page .field {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--agency-field-label);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .025em;
}

.agency-detail-editor-page .field-wide,
.agency-detail-editor-page .field-full {
  grid-column: 1 / -1;
}

.agency-detail-editor-page input,
.agency-detail-editor-page select,
.agency-detail-editor-page textarea {
  width: 100%;
  min-height: 46px;
  border-radius: 15px;
  border: 1px solid var(--agency-input-border);
  background: var(--agency-input-bg);
  color: var(--agency-input-text);
  -webkit-text-fill-color: var(--agency-input-text);
  padding: 11px 13px;
  font-size: 14px;
  outline: none;
  box-shadow: 0 1px 0 rgba(15,23,42,.02);
}

.agency-detail-editor-page textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.45;
}

.agency-detail-editor-page input:focus,
.agency-detail-editor-page select:focus,
.agency-detail-editor-page textarea:focus {
  border-color: rgba(37, 99, 235, .72);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.agency-editor-checkbox,
.agency-inline-checkbox {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  color: var(--agency-text);
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}

.agency-editor-checkbox {
  align-self: end;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--agency-border);
  border-radius: 15px;
  background: var(--agency-checkbox-bg);
}

.agency-editor-checkbox input,
.agency-inline-checkbox input {
  width: auto !important;
  min-height: auto !important;
}

.agency-editor-actions {
  display: flex;
  justify-content: flex-end;
}

.agency-readonly-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 16px;
}

.readonly-field {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--agency-border);
  background: var(--agency-soft);
}

.readonly-field span {
  display: block;
  color: var(--agency-muted);
  font-size: 12px;
  font-weight: 850;
  margin-bottom: 5px;
}

.readonly-field strong {
  display: block;
  color: var(--agency-text);
  font-size: 15px;
  line-height: 1.35;
}

.readonly-full {
  grid-column: 1 / -1;
}

.agency-counter-create-card {
  margin-top: 20px;
}

.agency-counter-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(210px, 1fr));
  gap: 16px;
  align-items: end;
}

.agency-counter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
}

.agency-counters-card,
.agency-quotes-card {
  margin-top: 20px;
}

.agency-counters-card .table-responsive,
.agency-quotes-card .table-responsive {
  overflow-x: auto;
}

.agency-counters-card table input {
  min-width: 150px;
}

.agency-detail-editor-page .quote-action-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.agency-detail-editor-page .quote-delete-inline {
  display: inline-flex !important;
  margin: 0 !important;
}

@media (max-width: 1180px) {
  .agency-form-section,
  .agency-readonly-grid,
  .agency-counter-form {
    grid-template-columns: 1fr;
  }

  .agency-counter-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  .agency-editor-card {
    padding: 20px;
  }

  .agency-editor-card-head {
    flex-direction: column;
  }

  .agency-editor-actions {
    justify-content: stretch;
  }

  .agency-editor-actions .btn,
  .agency-counter-actions .btn {
    width: 100%;
    justify-content: center;
  }
}




/* ============================================================
   3. Component / MW Business Group brand assets
   Isotipo sin contenedor visual. En modo claro el PNG blanco se
   convierte a negro por filtro; en modo oscuro conserva blanco.
   ============================================================ */
.brand-mark.brand-logo-mark,
.login-mini-logo.login-mini-logo-image{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  overflow:visible !important;
}

.brand-mark.brand-logo-mark{
  width:var(--mwc-sidebar-logo-size) !important;
  height:var(--mwc-sidebar-logo-size) !important;
  min-width:var(--mwc-sidebar-logo-size) !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
}

.brand-mark.brand-logo-mark img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:var(--mwc-brand-logo-filter);
}

.login-brand-full-logo{
  display:block;
  width:min(var(--mwc-login-full-logo-width), 100%);
  height:auto;
  margin:0 0 28px;
  object-fit:contain;
}

.login-eyebrow-under-logo{
  margin-top:0 !important;
}

.login-mini-logo.login-mini-logo-image{
  width:var(--mwc-login-mini-logo-size);
  height:var(--mwc-login-mini-logo-size);
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
}

.login-mini-logo.login-mini-logo-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:var(--mwc-login-mini-logo-filter);
}

/* Login: dar más presencia al isotipo sin volver al contenedor/cuadrito. */
.login-card-header{
  align-items:center !important;
  gap:24px !important;
  margin-bottom:34px !important;
}

.login-card-header .login-mini-logo-image{
  flex:0 0 var(--mwc-login-mini-logo-size);
}

.login-card-header h2{
  margin-bottom:6px !important;
}

/* ============================================================
   4. MODULE / LOGIN CON BRANDING
   Sin credenciales visibles.
   ============================================================ */

.login-page {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(37, 99, 235, .18), transparent 34%),
    radial-gradient(circle at 80% 0%, rgba(59, 130, 246, .14), transparent 28%),
    linear-gradient(135deg, #f8fafc 0%, #eef4ff 45%, #ffffff 100%);
  color: #0f172a;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(420px, 1.08fr) minmax(390px, .92fr);
}

.login-brand-panel {
  position: relative;
  display: flex;
  align-items: center;
  padding: 56px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(4, 15, 40, .96), rgba(15, 23, 42, .94)),
    linear-gradient(45deg, #172554, #0f172a);
  color: #fff;
}

.login-brand-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(96, 165, 250, .28), transparent 26%),
    radial-gradient(circle at 80% 70%, rgba(37, 99, 235, .22), transparent 30%);
  pointer-events: none;
}

.login-brand-content {
  position: relative;
  max-width: 620px;
  z-index: 1;
}

.login-logo-mark,
.login-mini-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 850;
  letter-spacing: -.06em;
  border-radius: 22px;
}

.login-logo-mark {
  width: 78px;
  height: 78px;
  background: rgba(255,255,255,.96);
  color: #1e3a8a;
  font-size: 26px;
  box-shadow: 0 20px 60px rgba(0,0,0,.24);
  margin-bottom: 28px;
}

.login-mini-logo {
  width: 52px;
  height: 52px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 18px;
}

.login-eyebrow {
  color: #93c5fd;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .22em;
  margin: 0 0 14px;
}

.login-brand-content h1 {
  margin: 0;
  font-size: clamp(40px, 5vw, 70px);
  line-height: .96;
  letter-spacing: -.065em;
  max-width: 720px;
}

.login-subtitle {
  color: rgba(226, 232, 240, .9);
  font-size: 17px;
  line-height: 1.7;
  margin: 24px 0 0;
  max-width: 560px;
}

.login-feature-list {
  display: grid;
  gap: 13px;
  margin-top: 34px;
}

.login-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid rgba(147,197,253,.22);
  background: rgba(255,255,255,.075);
  border-radius: 18px;
  backdrop-filter: blur(10px);
}

.login-feature span {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(59, 130, 246, .22);
  color: #bfdbfe;
  font-weight: 900;
}

.login-feature p {
  margin: 0;
  color: rgba(248,250,252,.92);
  font-weight: 650;
}

.login-company-link {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-top: 34px;
  color: rgba(203,213,225,.82);
  font-size: 14px;
}

.login-company-link strong {
  color: #bfdbfe;
  font-weight: 850;
}

.login-card-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 42px;
}

.login-card {
  width: min(100%, 460px);
  padding: 34px;
  border-radius: 30px;
  border: 1px solid rgba(226, 232, 240, .96);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 24px 80px rgba(15, 23, 42, .10);
}

.login-card-header {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 28px;
}

.login-card-header h2 {
  margin: 0 0 4px;
  font-size: 28px;
  letter-spacing: -.045em;
  color: #0f172a;
}

.login-card-header p {
  margin: 0;
  color: #64748b;
  line-height: 1.45;
}

.login-form {
  display: grid;
  gap: 18px;
}

.login-form label {
  display: grid;
  gap: 8px;
}

.login-form label span {
  color: #334155;
  font-size: 13px;
  font-weight: 850;
}

.login-form input {
  width: 100%;
  min-height: 50px;
  border-radius: 16px;
  border: 1px solid rgba(203, 213, 225, .95);
  background: #fff;
  color: #0f172a;
  padding: 12px 14px;
  font-size: 15px;
  outline: none;
}

.login-form input:focus {
  border-color: rgba(37, 99, 235, .75);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.login-submit {
  width: 100%;
  min-height: 50px;
  justify-content: center;
  margin-top: 4px;
}

.login-secure-note {
  margin-top: 24px;
  padding: 16px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid rgba(226,232,240,.95);
}

.login-secure-note strong {
  display: block;
  color: #0f172a;
  margin-bottom: 5px;
  font-size: 14px;
}

.login-secure-note p {
  margin: 0;
  color: #64748b;
  line-height: 1.5;
  font-size: 13px;
}

.login-flashes {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.login-flashes .flash {
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}

.login-flashes .flash.danger,
.login-flashes .flash.error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

@media (max-width: 920px) {
  .login-shell {
    grid-template-columns: 1fr;
  }

  .login-brand-panel {
    min-height: auto;
    padding: 42px 26px;
  }

  .login-brand-content h1 {
    font-size: 42px;
  }

  .login-card-panel {
    padding: 28px 18px;
  }

  .login-card {
    padding: 26px;
  }
}


/* 4. Module / login contrast */

.login-brand-content h1 {
  color: #f8fafc !important;
  text-shadow: 0 14px 42px rgba(0, 0, 0, .38);
}

.login-brand-content .login-subtitle {
  color: rgba(241, 245, 249, .94) !important;
}

.login-eyebrow {
  color: #bfdbfe !important;
}

.login-company-link,
.login-company-link span {
  color: rgba(226, 232, 240, .88) !important;
}

.login-company-link strong {
  color: #ffffff !important;
}

.login-brand-panel {
  background:
    radial-gradient(circle at 18% 20%, rgba(59, 130, 246, .28), transparent 28%),
    radial-gradient(circle at 82% 72%, rgba(37, 99, 235, .24), transparent 34%),
    linear-gradient(135deg, #061631 0%, #0b1f46 48%, #071426 100%) !important;
}

/* 4. Module / liquidación de servicios: formularios */
body .service-liquidation-form input,
body .service-liquidation-form select,
body .service-liquidation-form textarea,
body .service-liquidation-form .service-input-table input,
body .service-liquidation-form .service-input-table select {
  color: #111827 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #111827 !important;
}

body .service-liquidation-form input::placeholder,
body .service-liquidation-form textarea::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

/* 4. Module / proveedores y contabilidad */
.provider-create-grid .card {
  margin-bottom: 16px;
}

.provider-create-card .actions {
  margin-top: 14px;
}

.provider-list-table .provider-code {
  display: inline-block;
  font-size: 13px;
  margin: 0;
}

.provider-list-table .action-cell {
  white-space: nowrap;
}

.provider-edit-row.hidden {
  display: none;
}

.provider-edit-row td {
  background: #f8fafc;
}

.provider-inline-edit {
  display: grid;
  grid-template-columns: 180px 220px minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.provider-inline-edit-airline {
  grid-template-columns: minmax(280px, 1fr) auto;
}

.provider-inline-edit input,
.provider-inline-edit select {
  color: #111827;
  -webkit-text-fill-color: #111827;
}

.pagination-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin: -8px 0 18px;
}

.pagination-link {
  min-width: 24px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #64748b;
  font-weight: 800;
  font-size: 12px;
  text-decoration: none;
}

.pagination-link:hover,
.pagination-link.active {
  background: #e2e8f0;
  color: #0f172a;
}

@media(max-width: 1000px) {
  .provider-inline-edit,
  .provider-inline-edit-airline {
    grid-template-columns: 1fr;
  }
}

.accounting-table .accounting-money {
  display: inline-block;
  font-size: 13px;
  margin: 0;
  color: #0f172a;
}

.accounting-inline-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(74px, 1fr)) auto;
  gap: 6px;
  align-items: center;
  min-width: 360px;
}

.accounting-inline-form input,
.accounting-status-form select {
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 9px;
  color: #111827;
  -webkit-text-fill-color: #111827;
}

.accounting-status-form {
  display: grid;
  grid-template-columns: minmax(108px, 1fr);
  gap: 6px;
  align-items: center;
  min-width: 118px;
}

.over-status-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
}

.accounting-modal-row td {
  height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.accounting-email-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(8px);
}

.accounting-email-modal-backdrop[hidden] {
  display: none;
}

.accounting-email-modal {
  width: min(520px, 100%);
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--mwc-color-line-soft);
  border-radius: 14px;
  background: var(--mwc-color-card);
  box-shadow: 0 28px 80px rgba(15, 23, 42, .28);
}

.accounting-email-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.accounting-email-modal-header h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.accounting-email-modal-header p {
  margin: 0;
  color: var(--mwc-color-muted);
  -webkit-text-fill-color: var(--mwc-color-muted);
  font-size: 13px;
}

.accounting-email-modal-header .modal-close-btn {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--mwc-color-text);
  -webkit-text-fill-color: var(--mwc-color-text);
  font-size: 20px;
  font-weight: 800;
  box-shadow: none;
}

.accounting-email-modal-header .modal-close-btn:hover {
  background: var(--mwc-btn-hover-bg);
}

.accounting-filter-form select {
  min-width: 190px;
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 10px;
  font-size: 12px;
}

.accounting-edit-control {
  min-height: 32px;
  padding: 6px 8px;
  border-radius: 9px;
  font-size: 12px;
  color: #111827;
  -webkit-text-fill-color: #111827;
}

.accounting-calculated-pct {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
  font-size: 12px;
  font-weight: 800;
}

.accounting-row-save-form {
  margin: 0;
}

.accounting-print-value {
  display: none;
}

.accounting-internal-search {
  margin: 0 0 10px;
}

.accounting-internal-search input[name="internal_locator"] {
  max-width: 260px;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12px;
}

.accounting-month-picker {
  position: relative;
}

.accounting-month-trigger {
  min-height: 34px !important;
  min-width: 142px !important;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px !important;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer;
}

.accounting-month-trigger svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .78;
}

.accounting-month-panel {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 40;
  width: 184px !important;
  padding: 9px !important;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .14);
}

.accounting-month-head {
  display: grid;
  grid-template-columns: 26px 1fr 26px;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}

.accounting-month-head button,
.accounting-month-grid button,
.accounting-year-grid button {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-size: 11px !important;
  font-weight: 650 !important;
  cursor: pointer;
}

.accounting-month-head button {
  min-height: 26px !important;
  padding: 4px 6px !important;
  font-weight: 700;
}

.accounting-month-head .accounting-year-current {
  color: var(--primary);
}

.accounting-month-grid,
.accounting-year-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.accounting-month-grid[hidden],
.accounting-year-grid[hidden],
.accounting-month-panel[hidden] {
  display: none !important;
}

.accounting-month-grid button,
.accounting-year-grid button {
  min-height: 28px !important;
  padding: 4px 6px !important;
}

.accounting-month-grid button.selected,
.accounting-year-grid button.selected {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}

.accounting-sheet {
  width: min(980px, 100%);
  margin: 0 auto 28px;
  padding: 22px;
  background: #fff;
  border: 1px solid #111827;
  color: #111827;
  font-family: Arial, Helvetica, sans-serif;
}

.accounting-sheet-header {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 18px;
  margin-bottom: 12px;
  position: relative;
}

.accounting-sheet-header img {
  max-width: 160px;
  height: auto;
}

.accounting-sheet-header h2 {
  margin: 0;
  text-align: center;
  font-size: 28px;
  letter-spacing: .04em;
}

.accounting-sheet-draft-date {
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
  font-size: 10px;
  line-height: 1.25;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.accounting-sheet-draft-date strong {
  display: block;
  margin-top: 2px;
  color: #111827;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.accounting-sheet h3 {
  margin: 16px 0 0;
  padding: 7px 10px;
  background: #e5e7eb;
  border: 1px solid #111827;
  border-bottom: 0;
  font-size: 13px;
  letter-spacing: .03em;
}

.accounting-info-grid,
.accounting-footer-grid {
  display: grid;
  grid-template-columns: 150px 1fr 170px 1fr;
  border: 1px solid #111827;
  border-bottom: 0;
}

.accounting-footer-grid {
  grid-template-columns: 120px 1fr 120px 1fr 135px 1fr;
}

.accounting-info-grid span,
.accounting-info-grid strong,
.accounting-footer-grid span,
.accounting-footer-grid strong {
  min-height: 31px;
  padding: 7px 8px;
  border-bottom: 1px solid #111827;
}

.accounting-info-grid span,
.accounting-footer-grid span,
.accounting-sheet-table th {
  background: #f3f4f6;
  font-weight: 800;
}

.accounting-sheet-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  border: 1px solid #111827;
}

.accounting-sheet-table th,
.accounting-sheet-table td {
  border: 1px solid #111827;
  padding: 7px 8px;
  font-size: 13px;
  text-align: left;
}

.accounting-sheet-table td:last-child {
  text-align: right;
}

.accounting-recovery-note {
  width: min(360px, 62%);
  margin-left: 10px;
  border: 0;
  border-bottom: 1px solid #94a3b8;
  border-radius: 0;
  background: transparent;
  color: #111827;
  font: inherit;
  font-weight: 700;
  padding: 1px 2px;
  outline: 0;
}

.accounting-two-cols {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
}

.accounting-total-row th,
.accounting-total-row td {
  background: #fef3c7;
  font-weight: 900;
}

.accounting-export-context {
  margin: 3px 0 0;
  color: var(--mwc-color-muted);
  font-size: 11px;
  font-weight: 650;
}

.accounting-sheet table tbody tr td:last-child::after {
  content: none !important;
}

.accounting-total-costs-row th,
.accounting-total-costs-row td {
  background: #fff3c4 !important;
}

.accounting-invoice-row th,
.accounting-invoice-row td {
  background: #dff7ea !important;
}

.accounting-utility-row th,
.accounting-utility-row td {
  background: #e8efff !important;
}



@media(max-width: 900px) {
  .accounting-sheet-header,
  .accounting-info-grid,
  .accounting-footer-grid,
  .accounting-two-cols {
    grid-template-columns: 1fr;
  }
  .accounting-inline-form,
  .accounting-status-form {
    grid-template-columns: 1fr;
    min-width: 0;
  }
}

@media print {
  @page {
    size: A4;
    margin: 8mm;
  }
  .sidebar,
  .page-header,
  .page-header .actions,
  .actions,
  .btn,
  .messages,
  .sticky-actions {
    display: none !important;
  }
  .main {
    margin: 0 !important;
    padding: 0 !important;
  }
  .content,
  main {
    padding: 0 !important;
    margin: 0 !important;
  }
  .card,
  .accounting-sheet,
  .service-preview-sheet {
    box-shadow: none !important;
  }
  .service-preview-card {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .service-liquidation-form {
    display: none !important;
  }
  body.print-accounting-section .accounting-print-section {
    display: none !important;
  }
  body.print-accounting-section.print-accounting-commission #accounting-commission-section,
  body.print-accounting-section.print-accounting-bonus #accounting-bonus-section {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  body.print-accounting-section .pagination-bar {
    display: none !important;
  }
  body.print-accounting-section .topbar,
  body.print-accounting-section .page-header,
  body.print-accounting-section #accounting-internal-section,
  body.print-accounting-section .role-stats {
    display: none !important;
  }
  body.print-accounting-section .card {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
  body.print-accounting-section .card-header {
    display: block !important;
    margin: 0 0 5mm !important;
    padding-bottom: 2mm !important;
    border-bottom: 1px solid #111827 !important;
  }
  body.print-accounting-section h2 {
    margin: 0 !important;
    font-size: 13pt !important;
    text-align: center !important;
    color: #111827 !important;
  }
  body.print-accounting-section .card-header span {
    display: block !important;
    margin-top: 1mm !important;
    color: #334155 !important;
    font-size: 8pt !important;
    text-align: center !important;
  }
  body.print-accounting-section .accounting-export-context {
    display: block !important;
    margin: 1mm 0 0 !important;
    color: #334155 !important;
    font-size: 7.5pt !important;
    font-weight: 600 !important;
    text-align: center !important;
  }
  body.print-accounting-section .accounting-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    font-size: 7pt !important;
    word-break: normal !important;
  }
  body.print-accounting-section .accounting-table th,
  body.print-accounting-section .accounting-table td {
    padding: 1.4mm 1.2mm !important;
    border: 1px solid #111827 !important;
    font-size: 7pt !important;
    line-height: 1.15 !important;
    vertical-align: top !important;
    color: #111827 !important;
    overflow-wrap: anywhere !important;
  }
  body.print-accounting-section .accounting-table th {
    background: #e5e7eb !important;
    font-size: 6.5pt !important;
    letter-spacing: .03em !important;
  }
  body.print-accounting-section .accounting-money,
  body.print-accounting-section .op-code-cell strong {
    font-size: 7pt !important;
  }
  body.print-accounting-section .accounting-edit-control,
  body.print-accounting-section .no-print-column {
    display: none !important;
  }
  body.print-accounting-section .accounting-print-value {
    display: inline !important;
    color: #111827 !important;
    font-weight: 700 !important;
  }
  .service-preview-sheet {
    width: 194mm !important;
    max-width: 194mm !important;
    margin: 0 auto !important;
    padding: 4mm !important;
    border: 1px solid #111827 !important;
    font-size: 8.5pt !important;
    line-height: 1.15 !important;
  }
  .service-preview-sheet h2 {
    margin: 2mm 0 3mm !important;
    padding: 1.5mm 0 !important;
    font-size: 11pt !important;
  }
  .preview-logo-img {
    width: 34mm !important;
    max-height: 20mm !important;
    margin-bottom: 1mm !important;
  }
  .preview-grid {
    grid-template-columns: 33mm 1fr 30mm 1fr !important;
  }
  .preview-grid span,
  .preview-grid strong,
  .preview-totals span,
  .preview-totals strong {
    min-height: 6mm !important;
    padding: 1.2mm 1.6mm !important;
    font-size: 8pt !important;
  }
  .preview-pax {
    grid-template-columns: 1fr 30mm 18mm !important;
    margin-bottom: 2mm !important;
  }
  .preview-pax span {
    min-height: 5mm !important;
    padding: 1mm 1.5mm !important;
    font-size: 8pt !important;
  }
  .preview-notes {
    min-height: 24mm !important;
    margin: 2mm 0 !important;
    padding: 2mm !important;
    font-size: 8pt !important;
    line-height: 1.25 !important;
  }
  .preview-totals {
    grid-template-columns: 1fr 34mm !important;
  }
  .preview-warning {
    margin: 1.5mm 0 0 !important;
    font-size: 7.5pt !important;
  }
  .preview-bank-block {
    margin-top: 3mm !important;
  }
  .preview-bank-block h3 {
    padding: 1.3mm 1.8mm !important;
    font-size: 8pt !important;
  }
  .preview-bank-owner {
    grid-template-columns: 25mm 1fr 20mm 1fr !important;
  }
  .preview-bank-owner span,
  .preview-bank-owner strong {
    min-height: 5mm !important;
    padding: 1mm 1.5mm !important;
    font-size: 7.5pt !important;
  }
  .preview-bank-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .preview-bank-grid div {
    min-height: 22mm !important;
    padding: 2mm !important;
    gap: 1mm !important;
  }
  .preview-bank-grid img {
    max-width: 20mm !important;
    max-height: 9mm !important;
  }
  .preview-bank-grid strong,
  .preview-bank-grid span {
    font-size: 6.8pt !important;
    line-height: 1.15 !important;
  }
  .service-preview-sheet .preview-screen-only {
    display: none !important;
  }
  .accounting-sheet {
    width: 194mm !important;
    max-width: 194mm !important;
    margin: 0 auto !important;
    padding: 4mm !important;
    border: 1px solid #111827 !important;
    font-size: 8pt !important;
    line-height: 1.12 !important;
  }
  .accounting-sheet-header {
    grid-template-columns: 30mm 1fr !important;
    gap: 4mm !important;
    margin-bottom: 2mm !important;
  }
  .accounting-sheet-header img {
    max-width: 28mm !important;
  }
  .accounting-sheet-header h2 {
    font-size: 12pt !important;
  }
  .accounting-sheet h3 {
    margin: 2.5mm 0 0 !important;
    padding: 1.2mm 1.8mm !important;
    font-size: 8pt !important;
  }
  .accounting-info-grid {
    grid-template-columns: 26mm 1fr 28mm 1fr !important;
  }
  .accounting-footer-grid {
    grid-template-columns: 20mm 1fr 22mm 1fr 26mm 1fr !important;
  }
  .accounting-info-grid span,
  .accounting-info-grid strong,
  .accounting-footer-grid span,
  .accounting-footer-grid strong {
    min-height: 5mm !important;
    padding: 1mm 1.5mm !important;
    font-size: 7.5pt !important;
  }
  .accounting-sheet-table {
    margin-bottom: 2mm !important;
  }
  .accounting-sheet-table th,
  .accounting-sheet-table td {
    padding: 1mm 1.4mm !important;
    font-size: 7.4pt !important;
  }
  .accounting-two-cols {
    gap: 2mm !important;
  }
  body {
    background: #fff !important;
  }
}


/* ============================================================
   5. GRIDLISTS / ITEM COLOR BINDINGS
   Color solamente. No cambia font-size, padding ni layout.
   ============================================================ */
@media screen {
  :root{
    --mwc-grid-row-item:var(--mwc-grid-item);
    --mwc-grid-row-meta:var(--mwc-grid-meta);
    --mwc-grid-row-weight:600;
  }

  body .main table tbody td:not(.action-cell),
  body .main table tbody td.muted-cell,
  body .main .compact-table tbody td:not(.action-cell),
  body .main .agencies-table tbody td:not(.action-cell),
  body .main .quotes-table tbody td:not(.action-cell),
  body .main .visits-table tbody td:not(.action-cell),
  body .main .provider-list-table tbody td:not(.action-cell),
  body .main .users-table tbody td:not(.action-cell) {
    color:var(--mwc-grid-row-item) !important;
    -webkit-text-fill-color:var(--mwc-grid-row-item) !important;
    font-weight:var(--mwc-grid-row-weight) !important;
  }

  body .main table tbody td:not(.action-cell) small,
  body .main .compact-table tbody td:not(.action-cell) small,
  body .main .agencies-table tbody td:not(.action-cell) small,
  body .main .quotes-table tbody td:not(.action-cell) small,
  body .main .visits-table tbody td:not(.action-cell) small,
  body .main .provider-list-table tbody td:not(.action-cell) small {
    color:var(--mwc-grid-row-meta) !important;
    -webkit-text-fill-color:var(--mwc-grid-row-meta) !important;
    font-weight:var(--mwc-grid-row-weight) !important;
  }

  body .main table tbody td:not(.action-cell) select,
  body .main .inline-status-form select,
  body .main .compact-table tbody select,
  body .main .agencies-table tbody select,
  body .main .quotes-table tbody select,
  body .main .visits-table tbody select {
    color:var(--mwc-grid-row-item) !important;
    -webkit-text-fill-color:var(--mwc-grid-row-item) !important;
    font-weight:var(--mwc-grid-row-weight) !important;
  }
}


/* Gridlist links: color clickeable centralizado.
   Cambiar solo --mwc-grid-link y --mwc-grid-link-hover en MWC THEME TOKENS. */
@media screen {
  body .main table tbody td a:not(.btn):not(.compact-btn),
  body .main .compact-table tbody td a:not(.btn):not(.compact-btn),
  body .main .agencies-table tbody td a:not(.btn):not(.compact-btn),
  body .main .quotes-table tbody td a:not(.btn):not(.compact-btn),
  body .main .visits-table tbody td a:not(.btn):not(.compact-btn),
  body .main .provider-list-table tbody td a:not(.btn):not(.compact-btn) {
    color:var(--mwc-grid-link) !important;
    -webkit-text-fill-color:var(--mwc-grid-link) !important;
    font-weight:650;
  }

  body .main table tbody td a:not(.btn):not(.compact-btn) strong,
  body .main .compact-table tbody td a:not(.btn):not(.compact-btn) strong,
  body .main .agencies-table tbody td a:not(.btn):not(.compact-btn) strong,
  body .main .quotes-table tbody td a:not(.btn):not(.compact-btn) strong,
  body .main .visits-table tbody td a:not(.btn):not(.compact-btn) strong,
  body .main .provider-list-table tbody td a:not(.btn):not(.compact-btn) strong {
    color:inherit !important;
    -webkit-text-fill-color:inherit !important;
  }

  body .main table tbody td a:not(.btn):not(.compact-btn):hover,
  body .main .compact-table tbody td a:not(.btn):not(.compact-btn):hover,
  body .main .agencies-table tbody td a:not(.btn):not(.compact-btn):hover,
  body .main .quotes-table tbody td a:not(.btn):not(.compact-btn):hover,
  body .main .visits-table tbody td a:not(.btn):not(.compact-btn):hover,
  body .main .provider-list-table tbody td a:not(.btn):not(.compact-btn):hover {
    color:var(--mwc-grid-link-hover) !important;
    -webkit-text-fill-color:var(--mwc-grid-link-hover) !important;
  }
}


/* 3. Component / token bindings para botones, formularios y estados */
.btn.danger, button.danger{
  color:var(--mwc-btn-danger-text) !important;
  background:var(--mwc-btn-danger-bg) !important;
  border-color:var(--mwc-btn-danger-border) !important;
}
.pill,.badge,.status{
  background-color:var(--mwc-badge-bg);
  color:var(--mwc-badge-text);
}
.pill.hot,.badge.hot,.status.hot{
  background-color:var(--mwc-badge-hot-bg);
  color:var(--mwc-badge-hot-text);
}
::placeholder{
  color:var(--mwc-input-placeholder);
  -webkit-text-fill-color:var(--mwc-input-placeholder);
}

/* ============================================================
   MWC Button text-fill fix inside gridlists
   Color solamente. No cambia tamaño, padding ni layout.
   Motivo: las gridlists usan -webkit-text-fill-color para pintar los
   datos de fila en negro; ese valor se hereda dentro de botones y podía
   dejar botones primarios negros con texto negro.
   ============================================================ */
@media screen {
  .btn,
  button,
  input[type="submit"] {
    color:var(--mwc-btn-text) !important;
    -webkit-text-fill-color:var(--mwc-btn-text) !important;
  }

  .btn.primary,
  .btn-primary,
  button.primary,
  input[type="submit"].primary {
    color:var(--mwc-btn-primary-text) !important;
    -webkit-text-fill-color:var(--mwc-btn-primary-text) !important;
  }

  .btn.danger,
  button.danger,
  input[type="submit"].danger {
    color:var(--mwc-btn-danger-text) !important;
    -webkit-text-fill-color:var(--mwc-btn-danger-text) !important;
  }

  body .main table tbody td .btn,
  body .main table tbody td button,
  body .main table tbody td input[type="submit"],
  body .main .users-table tbody td .btn,
  body .main .users-table tbody td button,
  body .main .users-table tbody td input[type="submit"] {
    color:var(--mwc-btn-text) !important;
    -webkit-text-fill-color:var(--mwc-btn-text) !important;
  }

  body .main table tbody td .btn.primary,
  body .main table tbody td .btn-primary,
  body .main table tbody td button.primary,
  body .main table tbody td input[type="submit"].primary,
  body .main .users-table tbody td .btn.primary,
  body .main .users-table tbody td .btn-primary,
  body .main .users-table tbody td button.primary,
  body .main .users-table tbody td input[type="submit"].primary {
    color:var(--mwc-btn-primary-text) !important;
    -webkit-text-fill-color:var(--mwc-btn-primary-text) !important;
  }
}


/* ============================================================
   MWC Theme Switcher + Dark Mode
   Selector Claro/Oscuro. Color solamente, usando tokens del tema.
   ============================================================ */
@media screen {
  .sidebar-user{
    position:relative;
    padding-right:44px !important;
  }

  .theme-control{
    position:absolute;
    top:8px;
    right:8px;
    z-index:90;
    margin:0 !important;
    padding:0 !important;
  }

  .theme-gear-btn{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    min-height:28px !important;
    display:grid !important;
    place-items:center !important;
    padding:0 !important;
    border:1px solid var(--mwc-logout-border) !important;
    background:var(--mwc-logout-bg) !important;
    color:var(--mwc-logout-text) !important;
    -webkit-text-fill-color:var(--mwc-logout-text) !important;
    border-radius:9px !important;
    font-size:14px !important;
    line-height:1 !important;
    font-weight:800 !important;
    cursor:pointer;
    box-shadow:none !important;
  }

  .theme-gear-btn span{
    display:none !important;
  }

  .theme-gear-btn:hover,
  .theme-gear-btn[aria-expanded="true"]{
    background:var(--mwc-logout-hover-bg) !important;
    color:var(--mwc-logout-hover-text) !important;
    -webkit-text-fill-color:var(--mwc-logout-hover-text) !important;
  }

  .theme-gear-btn::after{
    content:"Apariencia";
    position:absolute;
    right:0;
    bottom:calc(100% + 7px);
    display:none;
    padding:5px 8px;
    border-radius:8px;
    background:var(--mwc-color-title);
    color:var(--mwc-color-card);
    -webkit-text-fill-color:var(--mwc-color-card);
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
    box-shadow:0 10px 24px rgba(15,23,42,.18);
    pointer-events:none;
  }

  .theme-gear-btn:hover::after{
    display:block;
  }

  .theme-panel{
    position:absolute;
    right:0;
    bottom:calc(100% + 8px);
    z-index:100;
    width:214px;
    display:grid;
    gap:8px;
    padding:10px;
    border:1px solid var(--mwc-color-line-soft);
    border-radius:14px;
    background:var(--mwc-color-card);
    color:var(--mwc-color-text);
    box-shadow:0 20px 50px rgba(15,23,42,.18);
  }

  .theme-panel[hidden]{
    display:none !important;
  }

  .theme-panel-title{
    color:var(--mwc-color-muted);
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:0 2px;
  }

  .theme-options{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .theme-option{
    min-height:68px !important;
    display:grid !important;
    justify-items:center;
    align-content:center;
    gap:6px !important;
    padding:8px 7px !important;
    border:1px solid var(--mwc-btn-border) !important;
    border-radius:12px !important;
    background:var(--mwc-btn-bg) !important;
    color:var(--mwc-btn-text) !important;
    -webkit-text-fill-color:var(--mwc-btn-text) !important;
    font-size:11px !important;
    font-weight:850 !important;
    cursor:pointer;
  }

  .theme-option:hover{
    border-color:var(--mwc-color-link) !important;
    background:var(--mwc-btn-hover-bg) !important;
  }

  .theme-option.active{
    border-color:var(--mwc-color-link) !important;
    box-shadow:0 0 0 3px rgba(37,99,235,.12);
  }

  .theme-preview{
    width:32px;
    height:24px;
    border-radius:7px;
    border:1px solid var(--mwc-color-line);
    display:block;
    box-shadow:inset 0 -8px 0 rgba(148,163,184,.16);
  }

  .theme-preview-light{
    background:#ffffff;
  }

  .theme-preview-dark{
    background:#0f172a;
    border-color:#334155;
    box-shadow:inset 0 -8px 0 rgba(255,255,255,.10);
  }

  :root[data-theme="dark"] body,
  :root[data-theme="dark"] .main{
    background:var(--mwc-color-bg-soft) !important;
    color:var(--mwc-color-text) !important;
  }

  :root[data-theme="dark"] .card,
  :root[data-theme="dark"] .panel,
  :root[data-theme="dark"] .stat-card,
  :root[data-theme="dark"] .metric-card,
  :root[data-theme="dark"] .table-card,
  :root[data-theme="dark"] .new-agency-box,
  :root[data-theme="dark"] .quote-box,
  :root[data-theme="dark"] .autocomplete-results,
  :root[data-theme="dark"] .quote-contact-modal,
  :root[data-theme="dark"] .liquidation-prompt,
  :root[data-theme="dark"] .date-range-popover,
  :root[data-theme="dark"] .service-isd-result,
  :root[data-theme="dark"] .service-invoice-grid div,
  :root[data-theme="dark"] .provider-edit-row td,
  :root[data-theme="dark"] .login-secure-note{
    background:var(--mwc-color-card) !important;
    color:var(--mwc-color-text) !important;
    border-color:var(--mwc-color-line-soft) !important;
  }

  :root[data-theme="dark"] .card,
  :root[data-theme="dark"] .panel,
  :root[data-theme="dark"] .stat-card,
  :root[data-theme="dark"] .metric-card,
  :root[data-theme="dark"] .table-card{
    background:linear-gradient(180deg, rgba(17,24,39,.98), rgba(15,23,42,.98)) !important;
  }

  :root[data-theme="dark"] table th,
  :root[data-theme="dark"] table thead th,
  :root[data-theme="dark"] .table thead th,
  :root[data-theme="dark"] .dashboard .table-responsive thead th,
  :root[data-theme="dark"] .dashboard table thead th{
    background:#0f172a !important;
    color:var(--mwc-grid-head) !important;
    border-bottom-color:var(--mwc-color-line-soft) !important;
  }

  :root[data-theme="dark"] table td,
  :root[data-theme="dark"] .table tbody td{
    background:transparent !important;
    border-bottom-color:var(--mwc-color-row-line) !important;
  }

  :root[data-theme="dark"] table tbody tr:hover,
  :root[data-theme="dark"] table tbody tr:hover td{
    background:#172033 !important;
  }

  :root[data-theme="dark"] input,
  :root[data-theme="dark"] select,
  :root[data-theme="dark"] textarea,
  :root[data-theme="dark"] .date-range-trigger,
  :root[data-theme="dark"] .date-range-day,
  :root[data-theme="dark"] .autocomplete-item,
  :root[data-theme="dark"] .floating-close-btn,
  :root[data-theme="dark"] .modal-close-btn{
    background:var(--mwc-input-bg) !important;
    color:var(--mwc-input-text) !important;
    -webkit-text-fill-color:var(--mwc-input-text) !important;
    border-color:var(--mwc-input-border) !important;
  }

  :root[data-theme="dark"] input::placeholder,
  :root[data-theme="dark"] textarea::placeholder{
    color:var(--mwc-input-placeholder) !important;
    -webkit-text-fill-color:var(--mwc-input-placeholder) !important;
  }

  :root[data-theme="dark"] h1,
  :root[data-theme="dark"] h2,
  :root[data-theme="dark"] h3,
  :root[data-theme="dark"] h4,
  :root[data-theme="dark"] .card h2,
  :root[data-theme="dark"] .card-header h2,
  :root[data-theme="dark"] .section-title{
    color:var(--mwc-color-title) !important;
  }

  :root[data-theme="dark"] .muted,
  :root[data-theme="dark"] .text-muted,
  :root[data-theme="dark"] .subtitle,
  :root[data-theme="dark"] .description,
  :root[data-theme="dark"] label small,
  :root[data-theme="dark"] .date-range-help{
    color:var(--mwc-color-muted) !important;
  }

  :root[data-theme="dark"] .preview-shell{
    background:#0b1120 !important;
  }

  :root[data-theme="dark"] .birthday-alert-detail,
  :root[data-theme="dark"] .birthday-alert-detail table,
  :root[data-theme="dark"] .birthday-today-item,
  :root[data-theme="dark"] .birthday-today-floating,
  :root[data-theme="dark"] .birthday-floating-header,
  :root[data-theme="dark"] .birthday-floating-item{
    background:var(--mwc-alert-detail-bg) !important;
    color:var(--mwc-color-text) !important;
    border-color:var(--mwc-color-line-soft) !important;
  }

  :root[data-theme="dark"] .btn.primary,
  :root[data-theme="dark"] .btn-primary,
  :root[data-theme="dark"] button.primary,
  :root[data-theme="dark"] input[type="submit"].primary{
    background:var(--mwc-btn-primary-bg) !important;
    color:var(--mwc-btn-primary-text) !important;
    -webkit-text-fill-color:var(--mwc-btn-primary-text) !important;
    border-color:var(--mwc-btn-primary-border) !important;
  }

  :root[data-theme="dark"] .role-row,
  :root[data-theme="dark"] .permission-chip,
  :root[data-theme="dark"] .checkbox,
  :root[data-theme="dark"] .readonly-field,
  :root[data-theme="dark"] .agency-editor-checkbox,
  :root[data-theme="dark"] .agency-inline-checkbox{
    background:var(--mwc-alert-detail-bg) !important;
    color:var(--mwc-color-text) !important;
    border-color:var(--mwc-color-line-soft) !important;
  }

  :root[data-theme="dark"] .role-meta strong,
  :root[data-theme="dark"] .permission-chip span{
    color:var(--mwc-color-text) !important;
    -webkit-text-fill-color:var(--mwc-color-text) !important;
  }

  :root[data-theme="dark"] .role-meta small{
    color:var(--mwc-color-muted) !important;
    -webkit-text-fill-color:var(--mwc-color-muted) !important;
  }
}


/* ============================================================
   MWC v1.0.1 - Grid header filter visual fix
   Los filtros de cabecera deben verse como texto de TH, no como botones.
   El menú desplegable también consume tokens para respetar modo claro/oscuro.
   ============================================================ */
@media screen {
  :root{
    --mwc-filter-menu-bg:var(--mwc-color-card);
    --mwc-filter-menu-border:var(--mwc-color-line-soft);
    --mwc-filter-menu-text:var(--mwc-color-text);
    --mwc-filter-menu-hover-bg:#f1f5f9;
    --mwc-filter-menu-selected-bg:#eff6ff;
    --mwc-filter-menu-selected-text:var(--mwc-color-link);
    --mwc-filter-menu-shadow:0 18px 45px rgba(15,23,42,.18);
  }

  :root[data-theme="dark"]{
    --mwc-filter-menu-bg:#111827;
    --mwc-filter-menu-border:#334155;
    --mwc-filter-menu-text:#e5e7eb;
    --mwc-filter-menu-hover-bg:#172033;
    --mwc-filter-menu-selected-bg:#0b2447;
    --mwc-filter-menu-selected-text:#7dd3fc;
    --mwc-filter-menu-shadow:0 22px 55px rgba(0,0,0,.42);
  }

  table thead th .th-filter,
  .th-filter{
    position:relative;
    display:inline-flex;
    align-items:center;
    max-width:100%;
  }

  table thead th button.th-filter-btn,
  button.th-filter-btn,
  .th-filter-btn{
    appearance:none !important;
    -webkit-appearance:none !important;
    width:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    transform:none !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:4px !important;
    color:inherit !important;
    -webkit-text-fill-color:inherit !important;
    font:inherit !important;
    font-size:inherit !important;
    font-weight:inherit !important;
    line-height:inherit !important;
    letter-spacing:inherit !important;
    text-transform:inherit !important;
    text-align:left !important;
    cursor:pointer;
  }

  table thead th button.th-filter-btn:hover,
  table thead th button.th-filter-btn:active,
  button.th-filter-btn:hover,
  button.th-filter-btn:active,
  .th-filter-btn:hover,
  .th-filter-btn:active{
    background:transparent !important;
    box-shadow:none !important;
    transform:none !important;
    color:var(--mwc-grid-link) !important;
    -webkit-text-fill-color:var(--mwc-grid-link) !important;
  }

  table thead th button.th-filter-btn:focus-visible,
  button.th-filter-btn:focus-visible,
  .th-filter-btn:focus-visible{
    outline:1px solid var(--mwc-grid-link);
    outline-offset:3px;
    border-radius:4px !important;
  }

  .th-filter-menu{
    background:var(--mwc-filter-menu-bg) !important;
    border:1px solid var(--mwc-filter-menu-border) !important;
    box-shadow:var(--mwc-filter-menu-shadow) !important;
    color:var(--mwc-filter-menu-text) !important;
  }

  .th-filter-menu button,
  table thead th .th-filter-menu button{
    appearance:none !important;
    -webkit-appearance:none !important;
    width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:8px 10px !important;
    border:0 !important;
    border-radius:10px !important;
    background:transparent !important;
    box-shadow:none !important;
    transform:none !important;
    display:block !important;
    text-align:left !important;
    color:var(--mwc-filter-menu-text) !important;
    -webkit-text-fill-color:var(--mwc-filter-menu-text) !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    letter-spacing:normal !important;
    text-transform:none !important;
    cursor:pointer;
  }

  .th-filter-menu button:hover,
  .th-filter-menu button:active,
  table thead th .th-filter-menu button:hover,
  table thead th .th-filter-menu button:active{
    background:var(--mwc-filter-menu-hover-bg) !important;
    color:var(--mwc-filter-menu-text) !important;
    -webkit-text-fill-color:var(--mwc-filter-menu-text) !important;
    transform:none !important;
  }

  .th-filter-menu button.selected,
  table thead th .th-filter-menu button.selected{
    background:var(--mwc-filter-menu-selected-bg) !important;
    color:var(--mwc-filter-menu-selected-text) !important;
    -webkit-text-fill-color:var(--mwc-filter-menu-selected-text) !important;
  }

  .th-filter-menu button:focus-visible{
    outline:1px solid var(--mwc-filter-menu-selected-text);
    outline-offset:2px;
  }
}


/* ============================================================
   MWC v1.0.1 - File inputs + stronger secondary text
   Color/peso solamente: no cambia tamaños, padding ni layout.
   ============================================================ */
@media screen {
  /* 3. Component / subtítulos y textos de apoyo */
  .brand span,
  .sidebar-user-info span,
  .hero p,
  .hero .muted,
  .page-header .muted,
  .birthday-alert-main span,
  .card span,
  .stats .card span,
  .role-stats .card span,
  .muted,
  .text-muted,
  .subtitle,
  .description,
  label small,
  .date-range-trigger small,
  .date-range-help,
  .filter-hint,
  .autocomplete-item span {
    font-weight:var(--mwc-secondary-weight) !important;
  }

  .hero p,
  .page-header .muted,
  .birthday-alert-main span,
  .stats .card span,
  .role-stats .card span {
    color:var(--mwc-color-subtitle) !important;
    -webkit-text-fill-color:var(--mwc-color-subtitle) !important;
  }

  input::placeholder,
  textarea::placeholder {
    font-weight:var(--mwc-input-placeholder-weight) !important;
  }

  /* Botón nativo de “Seleccionar archivo” en todos los inputs file */
  input[type="file"] {
    color:var(--mwc-input-text) !important;
    -webkit-text-fill-color:var(--mwc-input-text) !important;
    background:var(--mwc-input-bg) !important;
    border-color:var(--mwc-input-border) !important;
  }

  input[type="file"]::file-selector-button {
    margin:0 10px 0 0;
    padding:6px 10px;
    border:1px solid var(--mwc-file-btn-border);
    border-radius:8px;
    background:var(--mwc-file-btn-bg);
    color:var(--mwc-file-btn-text);
    -webkit-text-fill-color:var(--mwc-file-btn-text);
    font:inherit;
    font-size:12px;
    font-weight:750;
    cursor:pointer;
  }

  input[type="file"]::-webkit-file-upload-button {
    margin:0 10px 0 0;
    padding:6px 10px;
    border:1px solid var(--mwc-file-btn-border);
    border-radius:8px;
    background:var(--mwc-file-btn-bg);
    color:var(--mwc-file-btn-text);
    -webkit-text-fill-color:var(--mwc-file-btn-text);
    font:inherit;
    font-size:12px;
    font-weight:750;
    cursor:pointer;
  }

  input[type="file"]::file-selector-button:hover,
  input[type="file"]::-webkit-file-upload-button:hover {
    background:var(--mwc-file-btn-hover-bg);
  }
}


/* ============================================================
   MWC v1.0.1 - Liquidation preview stays printable/light
   En modo oscuro, la hoja de previsualización debe mantenerse
   igual al formato final exportado: papel blanco + tinta oscura.
   Solo aplica en pantalla; no cambia el PDF/print.
   ============================================================ */
@media screen {
  :root[data-theme="dark"] .service-preview-card {
    background:var(--mwc-color-card) !important;
    color:var(--mwc-color-text) !important;
    border-color:var(--mwc-color-line-soft) !important;
  }

  :root[data-theme="dark"] .service-preview-sheet {
    background:#ffffff !important;
    color:#111827 !important;
    -webkit-text-fill-color:#111827 !important;
    border-color:#111827 !important;
    box-shadow:0 18px 44px rgba(0,0,0,.30);
  }

  :root[data-theme="dark"] .service-preview-sheet h2,
  :root[data-theme="dark"] .service-preview-sheet h3,
  :root[data-theme="dark"] .service-preview-sheet p,
  :root[data-theme="dark"] .service-preview-sheet div,
  :root[data-theme="dark"] .service-preview-sheet span,
  :root[data-theme="dark"] .service-preview-sheet strong,
  :root[data-theme="dark"] .service-preview-sheet b,
  :root[data-theme="dark"] .service-preview-sheet table,
  :root[data-theme="dark"] .service-preview-sheet th,
  :root[data-theme="dark"] .service-preview-sheet td {
    color:#111827 !important;
    -webkit-text-fill-color:#111827 !important;
  }

  :root[data-theme="dark"] .service-preview-sheet h2,
  :root[data-theme="dark"] .preview-grid,
  :root[data-theme="dark"] .preview-totals,
  :root[data-theme="dark"] .preview-pax,
  :root[data-theme="dark"] .preview-notes,
  :root[data-theme="dark"] .preview-bank-block,
  :root[data-theme="dark"] .preview-bank-owner,
  :root[data-theme="dark"] .preview-bank-grid div {
    border-color:#111827 !important;
  }

  :root[data-theme="dark"] .preview-grid span,
  :root[data-theme="dark"] .preview-totals span,
  :root[data-theme="dark"] .preview-bank-owner span,
  :root[data-theme="dark"] .preview-bank-block h3 {
    background:#f8fafc !important;
    color:#111827 !important;
    -webkit-text-fill-color:#111827 !important;
  }

  :root[data-theme="dark"] .preview-pax span,
  :root[data-theme="dark"] .preview-bank-owner span,
  :root[data-theme="dark"] .preview-bank-owner strong {
    border-bottom-color:#e5e7eb !important;
  }

  :root[data-theme="dark"] .preview-logo {
    color:#1f2a5f !important;
    -webkit-text-fill-color:#1f2a5f !important;
    border-color:#f59e0b !important;
  }

  :root[data-theme="dark"] .preview-payment-check,
  :root[data-theme="dark"] .preview-warning {
    color:#334155 !important;
    -webkit-text-fill-color:#334155 !important;
  }

  :root[data-theme="dark"] .preview-payment-check strong,
  :root[data-theme="dark"] .preview-totals .preview-total-mw,
  :root[data-theme="dark"] .preview-totals strong.preview-total-mw {
    background:#dbeafe !important;
    color:#1e3a8a !important;
    -webkit-text-fill-color:#1e3a8a !important;
    border-color:#dbeafe !important;
  }

  :root[data-theme="dark"] .preview-totals .preview-total-agency,
  :root[data-theme="dark"] .preview-totals strong.preview-total-agency {
    background:#dcfce7 !important;
    color:#14532d !important;
    -webkit-text-fill-color:#14532d !important;
  }
}


/* ============================================================
   MWC v1.0.1 - Liquidation previews stay printable/light (both)
   Cubre liquidación de servicios (.service-preview-sheet) y
   liquidación interna (.accounting-sheet). Solo pantalla: no cambia
   exportación PDF / print.
   ============================================================ */
@media screen {
  /* Liquidación interna: la hoja debe verse como documento final */
  :root[data-theme="dark"] .accounting-sheet {
    background:#ffffff !important;
    color:#111827 !important;
    -webkit-text-fill-color:#111827 !important;
    border-color:#111827 !important;
    box-shadow:0 18px 44px rgba(0,0,0,.30);
  }

  :root[data-theme="dark"] .accounting-sheet h2,
  :root[data-theme="dark"] .accounting-sheet h3,
  :root[data-theme="dark"] .accounting-sheet p,
  :root[data-theme="dark"] .accounting-sheet div,
  :root[data-theme="dark"] .accounting-sheet span,
  :root[data-theme="dark"] .accounting-sheet strong,
  :root[data-theme="dark"] .accounting-sheet b,
  :root[data-theme="dark"] .accounting-sheet table,
  :root[data-theme="dark"] .accounting-sheet thead,
  :root[data-theme="dark"] .accounting-sheet tbody,
  :root[data-theme="dark"] .accounting-sheet tr,
  :root[data-theme="dark"] .accounting-sheet th,
  :root[data-theme="dark"] .accounting-sheet td,
  :root[data-theme="dark"] .accounting-sheet .accounting-recovery-note {
    color:#111827 !important;
    -webkit-text-fill-color:#111827 !important;
  }

  :root[data-theme="dark"] .accounting-info-grid,
  :root[data-theme="dark"] .accounting-footer-grid,
  :root[data-theme="dark"] .accounting-sheet-table,
  :root[data-theme="dark"] .accounting-sheet-table th,
  :root[data-theme="dark"] .accounting-sheet-table td,
  :root[data-theme="dark"] .accounting-info-grid span,
  :root[data-theme="dark"] .accounting-info-grid strong,
  :root[data-theme="dark"] .accounting-footer-grid span,
  :root[data-theme="dark"] .accounting-footer-grid strong {
    border-color:#111827 !important;
  }

  :root[data-theme="dark"] .accounting-info-grid span,
  :root[data-theme="dark"] .accounting-footer-grid span,
  :root[data-theme="dark"] .accounting-sheet-table th {
    background:#f3f4f6 !important;
    color:#111827 !important;
    -webkit-text-fill-color:#111827 !important;
  }

  :root[data-theme="dark"] .accounting-sheet-table td,
  :root[data-theme="dark"] .accounting-info-grid strong,
  :root[data-theme="dark"] .accounting-footer-grid strong {
    background:#ffffff !important;
  }

  :root[data-theme="dark"] .accounting-total-row th,
  :root[data-theme="dark"] .accounting-total-row td {
    background:#fef3c7 !important;
    color:#111827 !important;
    -webkit-text-fill-color:#111827 !important;
    font-weight:900 !important;
  }

  /* Contenedor de las hojas: puede seguir en tema oscuro; la hoja no. */
  :root[data-theme="dark"] .card:has(.accounting-sheet),
  :root[data-theme="dark"] .card:has(.service-preview-sheet) {
    background:var(--mwc-color-card) !important;
    border-color:var(--mwc-color-line-soft) !important;
  }
}


/* ============================================================
   MWC Theme Toggle v7 - Sidebar logout width fix
   Mantiene la tuerca absoluta sin recortar el botón Cerrar sesión.
   Color/layout mínimo y controlado por tokens existentes.
   ============================================================ */
@media screen {
  .sidebar-user{
    padding:10px !important;
    padding-right:10px !important;
    grid-template-columns:32px minmax(0,1fr) !important;
  }

  .sidebar-user-info{
    padding-right:36px;
  }

  .sidebar-logout-form{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-width:0 !important;
  }

  .sidebar-logout-form .sidebar-logout,
  .sidebar-user .sidebar-logout{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    justify-content:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .theme-control{
    top:8px !important;
    right:8px !important;
  }
}


/* ============================================================
   MWC v1.0.1 Theme Toggle v8 - Agency detail dark scope
   La ficha individual de agencia usa tokens del tema.
   Corrige Información de agencia / Asignaciones en modo oscuro
   sin tocar PDF, DB ni lógica.
   ============================================================ */
@media screen {
  :root[data-theme="dark"] .agency-detail-editor-page{
    --agency-border:var(--mwc-color-line-soft);
    --agency-soft:#111827;
    --agency-text:var(--mwc-color-text);
    --agency-muted:var(--mwc-color-muted);
    --agency-card-bg:linear-gradient(180deg, rgba(17,24,39,.98), rgba(15,23,42,.98));
    --agency-card-shadow:0 18px 50px rgba(0,0,0,.22);
    --agency-section-bg:linear-gradient(180deg, rgba(17,24,39,.98), rgba(15,23,42,.98));
    --agency-section-soft-bg:linear-gradient(180deg, rgba(30,41,59,.62), rgba(15,23,42,.98));
    --agency-section-title:#93c5fd;
    --agency-section-title-bg:rgba(30,64,175,.28);
    --agency-section-title-border:rgba(96,165,250,.28);
    --agency-field-label:var(--mwc-label-text);
    --agency-checkbox-bg:#111827;
    --agency-input-bg:var(--mwc-input-bg);
    --agency-input-text:var(--mwc-input-text);
    --agency-input-border:var(--mwc-input-border);
  }

  :root[data-theme="dark"] .agency-detail-editor-page .agency-editor-card,
  :root[data-theme="dark"] .agency-detail-editor-page .agency-counter-create-card,
  :root[data-theme="dark"] .agency-detail-editor-page .agency-counters-card,
  :root[data-theme="dark"] .agency-detail-editor-page .agency-quotes-card{
    background:var(--agency-card-bg) !important;
    color:var(--agency-text) !important;
    border-color:var(--agency-border) !important;
    box-shadow:var(--agency-card-shadow) !important;
  }

  :root[data-theme="dark"] .agency-detail-editor-page .agency-form-section{
    background:var(--agency-section-bg) !important;
    border-color:var(--agency-border) !important;
  }

  :root[data-theme="dark"] .agency-detail-editor-page .agency-form-section-soft{
    background:var(--agency-section-soft-bg) !important;
  }

  :root[data-theme="dark"] .agency-detail-editor-page .agency-section-title{
    color:var(--agency-section-title) !important;
  }

  :root[data-theme="dark"] .agency-detail-editor-page .agency-section-title span{
    background:var(--agency-section-title-bg) !important;
    border-color:var(--agency-section-title-border) !important;
    color:var(--agency-section-title) !important;
    -webkit-text-fill-color:var(--agency-section-title) !important;
  }

  :root[data-theme="dark"] .agency-detail-editor-page .field,
  :root[data-theme="dark"] .agency-detail-editor-page .agency-editor-checkbox,
  :root[data-theme="dark"] .agency-detail-editor-page .agency-inline-checkbox{
    color:var(--agency-field-label) !important;
    -webkit-text-fill-color:var(--agency-field-label) !important;
  }

  :root[data-theme="dark"] .agency-detail-editor-page input,
  :root[data-theme="dark"] .agency-detail-editor-page select,
  :root[data-theme="dark"] .agency-detail-editor-page textarea{
    background:var(--agency-input-bg) !important;
    color:var(--agency-input-text) !important;
    -webkit-text-fill-color:var(--agency-input-text) !important;
    border-color:var(--agency-input-border) !important;
  }

  :root[data-theme="dark"] .agency-detail-editor-page input::placeholder,
  :root[data-theme="dark"] .agency-detail-editor-page textarea::placeholder{
    color:var(--mwc-input-placeholder) !important;
    -webkit-text-fill-color:var(--mwc-input-placeholder) !important;
  }

  :root[data-theme="dark"] .agency-detail-editor-page .readonly-field{
    background:var(--agency-soft) !important;
    border-color:var(--agency-border) !important;
  }

  :root[data-theme="dark"] .agency-detail-editor-page .readonly-field span{
    color:var(--agency-muted) !important;
    -webkit-text-fill-color:var(--agency-muted) !important;
  }

  :root[data-theme="dark"] .agency-detail-editor-page .readonly-field strong,
  :root[data-theme="dark"] .agency-detail-editor-page .agency-editor-card-head h2{
    color:var(--agency-text) !important;
    -webkit-text-fill-color:var(--agency-text) !important;
  }
}


/* ============================================================
   MWC v1.0.1 Theme Toggle v9 - Dark scope audit
   Revisión de módulos con estilos propios que aún podían heredar
   superficies/colores claros en modo oscuro. Solo UI en pantalla;
   las hojas de liquidación imprimibles se mantienen blancas por
   los bloques específicos anteriores.
   ============================================================ */
@media screen {
  /* Popovers, modales y paneles sueltos */
  :root[data-theme="dark"] .autocomplete-results,
  :root[data-theme="dark"] .quote-contact-modal,
  :root[data-theme="dark"] .liquidation-prompt,
  :root[data-theme="dark"] .birthday-modal,
  :root[data-theme="dark"] .birthday-today-floating,
  :root[data-theme="dark"] .date-range-popover,
  :root[data-theme="dark"] .th-filter-menu {
    background:var(--mwc-color-card) !important;
    color:var(--mwc-color-text) !important;
    border-color:var(--mwc-color-line-soft) !important;
  }

  :root[data-theme="dark"] .autocomplete-item,
  :root[data-theme="dark"] .birthday-today-item,
  :root[data-theme="dark"] .birthday-floating-item,
  :root[data-theme="dark"] .provider-edit-row td,
  :root[data-theme="dark"] .readonly-field,
  :root[data-theme="dark"] .permission-chip,
  :root[data-theme="dark"] .role-row {
    background:var(--mwc-alert-detail-bg) !important;
    color:var(--mwc-color-text) !important;
    border-color:var(--mwc-color-line-soft) !important;
  }

  :root[data-theme="dark"] .autocomplete-item:hover,
  :root[data-theme="dark"] .birthday-floating-header,
  :root[data-theme="dark"] .modal-close-btn:hover,
  :root[data-theme="dark"] .floating-close-btn:hover,
  :root[data-theme="dark"] .quote-contact-close:hover {
    background:var(--mwc-sidebar-link-hover-bg) !important;
  }

  :root[data-theme="dark"] .quote-contact-close,
  :root[data-theme="dark"] .modal-close-btn,
  :root[data-theme="dark"] .floating-close-btn,
  :root[data-theme="dark"] .date-range-nav {
    background:var(--mwc-input-bg) !important;
    color:var(--mwc-input-text) !important;
    -webkit-text-fill-color:var(--mwc-input-text) !important;
    border-color:var(--mwc-input-border) !important;
  }

  /* Textos secundarios en módulos auxiliares */
  :root[data-theme="dark"] .autocomplete-item span,
  :root[data-theme="dark"] .birthday-today-item span,
  :root[data-theme="dark"] .birthday-today-item small,
  :root[data-theme="dark"] .birthday-floating-header span,
  :root[data-theme="dark"] .birthday-floating-item span,
  :root[data-theme="dark"] .agency-active-filters,
  :root[data-theme="dark"] .filter-hint,
  :root[data-theme="dark"] .service-row-number,
  :root[data-theme="dark"] .service-isd-result span,
  :root[data-theme="dark"] .service-invoice-grid span,
  :root[data-theme="dark"] .service-calculation-card dt,
  :root[data-theme="dark"] .reports-mail-card dt {
    color:var(--mwc-color-muted) !important;
    -webkit-text-fill-color:var(--mwc-color-muted) !important;
  }

  :root[data-theme="dark"] .service-liquidation-form h3,
  :root[data-theme="dark"] .service-isd-result strong,
  :root[data-theme="dark"] .service-invoice-grid strong,
  :root[data-theme="dark"] .service-calculation-card dd,
  :root[data-theme="dark"] .reports-mail-card dd,
  :root[data-theme="dark"] .accounting-money,
  :root[data-theme="dark"] .accounting-print-value,
  :root[data-theme="dark"] .birthday-today-item strong,
  :root[data-theme="dark"] .birthday-floating-header strong,
  :root[data-theme="dark"] .birthday-floating-item strong {
    color:var(--mwc-color-text) !important;
    -webkit-text-fill-color:var(--mwc-color-text) !important;
  }

  /* Calendario de rango de fechas */
  :root[data-theme="dark"] .date-range-trigger,
  :root[data-theme="dark"] .date-range-day {
    background:var(--mwc-input-bg) !important;
    color:var(--mwc-input-text) !important;
    -webkit-text-fill-color:var(--mwc-input-text) !important;
    border-color:var(--mwc-input-border) !important;
  }

  :root[data-theme="dark"] .date-range-day:hover {
    background:var(--mwc-sidebar-link-hover-bg) !important;
    border-color:var(--mwc-color-link) !important;
  }

  :root[data-theme="dark"] .date-range-day.in-range {
    background:rgba(37,99,235,.24) !important;
    border-color:rgba(96,165,250,.34) !important;
    color:#bfdbfe !important;
    -webkit-text-fill-color:#bfdbfe !important;
  }

  :root[data-theme="dark"] .date-range-day.selected {
    background:var(--mwc-color-link) !important;
    border-color:var(--mwc-color-link-hover) !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
  }

  :root[data-theme="dark"] .date-range-day.muted {
    color:var(--mwc-color-muted-soft) !important;
    -webkit-text-fill-color:var(--mwc-color-muted-soft) !important;
    opacity:.85;
  }

  /* Paginación y filtros activos */
  :root[data-theme="dark"] .pagination-link {
    color:var(--mwc-color-muted) !important;
    -webkit-text-fill-color:var(--mwc-color-muted) !important;
  }

  :root[data-theme="dark"] .pagination-link:hover,
  :root[data-theme="dark"] .pagination-link.active {
    background:var(--mwc-sidebar-link-hover-bg) !important;
    color:var(--mwc-color-title) !important;
    -webkit-text-fill-color:var(--mwc-color-title) !important;
  }

  :root[data-theme="dark"] .agency-active-filters strong {
    background:rgba(37,99,235,.18) !important;
    color:var(--mwc-grid-link) !important;
    -webkit-text-fill-color:var(--mwc-grid-link) !important;
    border-color:rgba(96,165,250,.30) !important;
  }

  /* Botones/acciones especiales que tenían tonos claros propios */
  :root[data-theme="dark"] .quote-trash-btn,
  :root[data-theme="dark"] .btn.danger,
  :root[data-theme="dark"] button.danger {
    background:var(--mwc-btn-danger-bg) !important;
    color:var(--mwc-btn-danger-text) !important;
    -webkit-text-fill-color:var(--mwc-btn-danger-text) !important;
    border-color:var(--mwc-btn-danger-border) !important;
  }

  :root[data-theme="dark"] .quote-trash-btn:hover,
  :root[data-theme="dark"] .btn.danger:hover,
  :root[data-theme="dark"] button.danger:hover {
    background:rgba(127,29,29,.28) !important;
  }

  /* Cotización embebida en Bitácora */
  :root[data-theme="dark"] .mw-observation-cell,
  :root[data-theme="dark"] td:has(.mw-quote-label) {
    color:var(--mwc-grid-item) !important;
    -webkit-text-fill-color:var(--mwc-grid-item) !important;
  }

  :root[data-theme="dark"] .mw-quote-box {
    background:linear-gradient(180deg, rgba(17,24,39,.98), rgba(15,23,42,.98)) !important;
    color:var(--mwc-color-text) !important;
    -webkit-text-fill-color:var(--mwc-color-text) !important;
    border-color:rgba(20,184,166,.45) !important;
    border-left-color:#14b8a6 !important;
    box-shadow:0 10px 24px rgba(0,0,0,.20) !important;
  }

  :root[data-theme="dark"] td:has(.mw-quote-label) small,
  :root[data-theme="dark"] td:has(.mw-quote-label) .muted {
    color:var(--mwc-color-muted) !important;
    -webkit-text-fill-color:var(--mwc-color-muted) !important;
  }

  /* Controles inline de contabilidad/proveedores */
  :root[data-theme="dark"] .accounting-inline-form input,
  :root[data-theme="dark"] .accounting-status-form select,
  :root[data-theme="dark"] .accounting-filter-form select,
  :root[data-theme="dark"] .accounting-edit-control,
  :root[data-theme="dark"] .accounting-internal-search input,
  :root[data-theme="dark"] .accounting-internal-search select,
  :root[data-theme="dark"] .accounting-month-trigger,
  :root[data-theme="dark"] .provider-inline-edit input,
  :root[data-theme="dark"] .provider-inline-edit select {
    background:var(--mwc-input-bg) !important;
    color:var(--mwc-input-text) !important;
    -webkit-text-fill-color:var(--mwc-input-text) !important;
    border-color:var(--mwc-input-border) !important;
  }

  :root[data-theme="dark"] .accounting-month-panel {
    background:#0f172a !important;
    border-color:var(--mwc-input-border) !important;
    box-shadow:0 18px 42px rgba(0,0,0,.42) !important;
    opacity:1 !important;
  }

  :root[data-theme="dark"] .accounting-month-head button,
  :root[data-theme="dark"] .accounting-month-grid button,
  :root[data-theme="dark"] .accounting-year-grid button {
    background:var(--mwc-input-bg) !important;
    color:var(--mwc-input-text) !important;
    -webkit-text-fill-color:var(--mwc-input-text) !important;
    border-color:var(--mwc-input-border) !important;
  }

  :root[data-theme="dark"] .accounting-month-head .accounting-year-current {
    color:var(--primary) !important;
    -webkit-text-fill-color:var(--primary) !important;
  }

  :root[data-theme="dark"] .accounting-month-grid button.selected,
  :root[data-theme="dark"] .accounting-year-grid button.selected {
    background:var(--primary) !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    border-color:var(--primary) !important;
  }

  /* WhatsApp / prototipos / código */
  :root[data-theme="dark"] .code-sample {
    background:#020617 !important;
    color:#e2e8f0 !important;
    border:1px solid var(--mwc-color-line-soft);
  }
}


/* ============================================================
   MWC v1.0.1 Theme Toggle v10 - Date range light visibility
   El calendario ya estaba correcto en oscuro, pero en modo claro
   el hover/rango quedaba demasiado suave. Solo refuerza sombreado
   y selección usando tokens; no cambia layout ni lógica.
   ============================================================ */
@media screen {
  .date-range-popover{
    background:var(--mwc-date-popover-bg) !important;
    border-color:var(--mwc-date-popover-border) !important;
    box-shadow:var(--mwc-date-popover-shadow) !important;
  }

  :root:not([data-theme="dark"]) .date-range-day{
    background:var(--mwc-date-day-bg) !important;
    color:var(--mwc-date-day-text) !important;
    -webkit-text-fill-color:var(--mwc-date-day-text) !important;
  }

  :root:not([data-theme="dark"]) .date-range-day:hover{
    background:var(--mwc-date-day-hover-bg) !important;
    border-color:var(--mwc-date-day-hover-border) !important;
    box-shadow:var(--mwc-date-day-hover-shadow) !important;
  }

  :root:not([data-theme="dark"]) .date-range-day.in-range{
    background:var(--mwc-date-range-bg) !important;
    border-color:var(--mwc-date-range-border) !important;
    color:var(--mwc-date-range-text) !important;
    -webkit-text-fill-color:var(--mwc-date-range-text) !important;
  }

  :root:not([data-theme="dark"]) .date-range-day.selected{
    background:var(--mwc-date-selected-bg) !important;
    border-color:var(--mwc-date-selected-border) !important;
    color:var(--mwc-date-selected-text) !important;
    -webkit-text-fill-color:var(--mwc-date-selected-text) !important;
    box-shadow:0 0 0 3px rgba(29,78,216,.18) !important;
  }

  :root:not([data-theme="dark"]) .date-range-day.muted{
    color:var(--mwc-color-muted-soft) !important;
    -webkit-text-fill-color:var(--mwc-color-muted-soft) !important;
    opacity:.82;
  }
}


/* ============================================================
   MWC v1.0.1 - Sticky action bar theme fix
   La barra fija de acciones (Guardar / Previsualizar) consume tokens.
   No afecta previews ni PDF/print.
   ============================================================ */
@media screen {
  .sticky-actions{
    background:var(--mwc-sticky-actions-bg) !important;
    border-color:var(--mwc-sticky-actions-border) !important;
    box-shadow:var(--mwc-sticky-actions-shadow) !important;
  }

  :root[data-theme="dark"] .sticky-actions{
    background:var(--mwc-sticky-actions-bg) !important;
    border-color:var(--mwc-sticky-actions-border) !important;
    box-shadow:var(--mwc-sticky-actions-shadow) !important;
  }
}


/* ============================================================
   MWC 1.0.1 - Login success transition
   Se muestra solo después de credenciales válidas desde Flask.
   No afecta DB, permisos ni el flujo normal de login fallido.
   ============================================================ */
@media screen {
  .login-flow-wrap{
    position:relative;
    min-height:184px;
  }

  .login-card-success{
    overflow:hidden;
  }

  .login-card-success .login-card-header{
    animation:loginHeaderSettle .42s ease both;
  }

  .login-form-exit{
    pointer-events:none;
    animation:loginFormDrop .58s cubic-bezier(.2,.8,.2,1) both;
  }

  .login-secure-note-exit{
    pointer-events:none;
    animation:loginSecureFade .42s ease both;
  }

  .login-success-stage{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    align-content:center;
    gap:10px;
    text-align:center;
    padding:10px 16px;
    opacity:0;
    transform:translateY(-8px) scale(.98);
    animation:loginSuccessIn .56s cubic-bezier(.2,.8,.2,1) .16s both;
  }

  .login-success-orb{
    width:62px;
    height:62px;
    display:grid;
    place-items:center;
    border-radius:22px;
    background:var(--mwc-btn-primary-bg);
    color:var(--mwc-btn-primary-text);
    -webkit-text-fill-color:var(--mwc-btn-primary-text);
    box-shadow:0 18px 45px rgba(15,23,42,.16), 0 0 0 8px rgba(37,99,235,.08);
    transform:scale(.82);
    animation:loginSuccessOrb .62s cubic-bezier(.2,.8,.2,1) .22s both;
  }

  .login-success-orb span{
    font-size:27px;
    line-height:1;
    font-weight:900;
  }

  .login-success-stage h3{
    margin:4px 0 0;
    color:var(--mwc-color-title);
    -webkit-text-fill-color:var(--mwc-color-title);
    font-size:28px;
    line-height:1.05;
    letter-spacing:-.045em;
  }

  .login-success-stage p{
    margin:0;
    color:var(--mwc-color-muted);
    -webkit-text-fill-color:var(--mwc-color-muted);
    font-size:14px;
    font-weight:750;
  }

  .login-success-active .login-submit{
    pointer-events:none;
  }

  @keyframes loginFormDrop{
    0%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
    100%{opacity:0;transform:translateY(42px) scale(.985);filter:blur(3px)}
  }

  @keyframes loginSecureFade{
    0%{opacity:1;transform:translateY(0)}
    100%{opacity:0;transform:translateY(18px)}
  }

  @keyframes loginSuccessIn{
    0%{opacity:0;transform:translateY(-10px) scale(.98)}
    100%{opacity:1;transform:translateY(0) scale(1)}
  }

  @keyframes loginSuccessOrb{
    0%{transform:scale(.72);opacity:0}
    55%{transform:scale(1.06);opacity:1}
    100%{transform:scale(1);opacity:1}
  }

  @keyframes loginHeaderSettle{
    0%{transform:translateY(0)}
    100%{transform:translateY(-2px)}
  }
}

@media (prefers-reduced-motion: reduce){
  .login-card-success .login-card-header,
  .login-form-exit,
  .login-secure-note-exit,
  .login-success-stage,
  .login-success-orb{
    animation:none !important;
  }

  .login-form-exit,
  .login-secure-note-exit{
    opacity:0 !important;
  }

  .login-success-stage{
    opacity:1 !important;
    transform:none !important;
  }
}


/* ============================================================
   MWC 1.0.1 - Login success clean state
   Estado posterior a credenciales válidas: solo animación + mensaje,
   sin header ni formulario, centrado dentro de la card.
   ============================================================ */
@media screen {
  .login-card-success-clean{
    min-height:430px;
    display:grid;
    place-items:center;
    text-align:center;
  }

  .login-card-success-clean .login-card-header,
  .login-card-success-clean .login-form,
  .login-card-success-clean .login-secure-note,
  .login-card-success-clean .login-flashes{
    display:none !important;
  }

  .login-card-success-clean .login-success-stage-clean{
    position:relative;
    inset:auto;
    min-height:260px;
    width:100%;
    display:grid;
    place-items:center;
    align-content:center;
    gap:13px;
    padding:18px;
    opacity:0;
    transform:translateY(8px) scale(.985);
    animation:loginSuccessIn .62s cubic-bezier(.2,.8,.2,1) .08s both;
  }

  .login-card-success-clean .login-success-orb{
    width:70px;
    height:70px;
    border-radius:24px;
  }

  .login-card-success-clean .login-success-stage h3{
    margin:6px 0 0;
    font-size:30px;
  }

  .login-card-success-clean .login-success-stage p{
    max-width:280px;
    line-height:1.35;
  }
}


/* ============================================================
   MWC v1.0.1 Brand Logo v4 - Login card de-duplication
   El branding principal queda en el panel izquierdo. La card de
   login queda limpia y funcional, sin repetir el isotipo.
   ============================================================ */
@media screen {
  .login-card-header-clean{
    display:block !important;
    margin-bottom:28px !important;
  }

  .login-card-header-clean > div{
    max-width:100%;
  }

  .login-card-header-clean h2{
    margin:0 0 6px !important;
  }

  .login-card-header-clean p{
    max-width:360px;
  }
}


/* ============================================================
   MWC Reference Dashboard Skin 2026-06-27
   Replica visual del modelo provisto: sidebar claro, hero blanco,
   tarjetas estadisticas con iconos circulares y tablas limpias.
   ============================================================ */
@media screen {
  :root:not([data-theme="dark"]){
    --mwc-ref-bg:#f5f7fb;
    --mwc-ref-ink:#071f4d;
    --mwc-ref-text:#17345f;
    --mwc-ref-muted:#536a8f;
    --mwc-ref-blue:#0b63ff;
    --mwc-ref-border:#dbe5f4;
    --mwc-ref-soft-border:#e7edf6;
    --mwc-ref-card:#ffffff;
    --mwc-ref-sidebar:#ffffff;
    --mwc-ref-shadow:0 12px 28px rgba(20,44,84,.08);
  }

  body{
    background:var(--mwc-ref-bg) !important;
    color:var(--mwc-ref-ink) !important;
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing:0 !important;
  }

  .sidebar{
    width:272px !important;
    padding:28px 18px 22px !important;
    background:var(--mwc-ref-sidebar) !important;
    border-right:1px solid #edf2f8 !important;
    box-shadow:none !important;
  }

  .brand{
    height:48px !important;
    margin:0 0 24px !important;
    gap:14px !important;
  }

  .brand-mark.brand-logo-mark{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    border-radius:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .brand-mark.brand-logo-mark img{
    width:52px !important;
    height:52px !important;
    object-fit:contain !important;
    filter:brightness(0) saturate(100%) invert(14%) sepia(65%) saturate(1735%) hue-rotate(206deg) brightness(86%) contrast(101%) !important;
  }

  .brand strong{
    display:block !important;
    color:var(--mwc-ref-ink) !important;
    -webkit-text-fill-color:var(--mwc-ref-ink) !important;
    font-size:18px !important;
    font-weight:850 !important;
    line-height:1.1 !important;
  }

  .brand span{
    display:block !important;
    margin-top:4px !important;
    color:var(--mwc-ref-blue) !important;
    -webkit-text-fill-color:var(--mwc-ref-blue) !important;
    font-size:12px !important;
    font-weight:700 !important;
  }

  .sidebar nav{
    gap:7px !important;
    padding:0 !important;
  }

  .sidebar nav a{
    min-height:44px !important;
    padding:0 14px !important;
    border-radius:9px !important;
    color:#31486f !important;
    -webkit-text-fill-color:#31486f !important;
    font-size:14px !important;
    font-weight:650 !important;
    gap:16px !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .sidebar nav a.active{
    background:#eaf1ff !important;
    color:var(--mwc-ref-blue) !important;
    -webkit-text-fill-color:var(--mwc-ref-blue) !important;
    box-shadow:none !important;
    font-weight:850 !important;
  }

  .sidebar nav a:hover{
    background:#f3f7ff !important;
    color:var(--mwc-ref-blue) !important;
    -webkit-text-fill-color:var(--mwc-ref-blue) !important;
  }

  .sidebar nav a.active::before{
    content:none !important;
  }

  .nav-icon{
    width:20px !important;
    height:20px !important;
    flex:0 0 20px !important;
    stroke-width:1.85 !important;
  }

  .mw-sidebar-beta-badge{
    height:22px !important;
    padding:0 9px !important;
    border-radius:999px !important;
    margin-left:auto !important;
    background:#eef3ff !important;
    color:#64779b !important;
    -webkit-text-fill-color:#64779b !important;
    font-size:10px !important;
    font-style:italic !important;
    font-weight:800 !important;
    box-shadow:none !important;
  }

  .sidebar-user{
    position:relative !important;
    grid-template-columns:42px minmax(0,1fr) !important;
    align-items:center !important;
    gap:12px !important;
    margin-top:4px !important;
    min-height:72px !important;
    padding:13px 14px !important;
    border-radius:12px !important;
    background:#fff !important;
    border:1px solid #dce6f4 !important;
    box-shadow:none !important;
  }

  .theme-control{
    display:none !important;
  }

  .sidebar-avatar{
    position:relative !important;
    width:42px !important;
    height:42px !important;
    background:#09245c !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    font-size:13px !important;
    box-shadow:0 0 0 3px rgba(11,99,255,.08) !important;
  }

  .sidebar-avatar::after{
    content:"";
    position:absolute;
    width:10px;
    height:10px;
    border-radius:999px;
    background:#22c55e;
    border:2px solid #fff;
    right:-1px;
    bottom:1px;
  }

  .sidebar-user-info strong{
    color:var(--mwc-ref-ink) !important;
    -webkit-text-fill-color:var(--mwc-ref-ink) !important;
    font-size:14px !important;
    font-weight:750 !important;
  }

  .sidebar-user-info span{
    color:var(--mwc-ref-blue) !important;
    -webkit-text-fill-color:var(--mwc-ref-blue) !important;
    font-size:12px !important;
    font-weight:700 !important;
  }

  .sidebar-user::after{
    content:"⌄";
    position:absolute;
    right:18px;
    top:25px;
    color:#0e2f66;
    font-size:18px;
    font-weight:800;
    line-height:1;
    pointer-events:none;
  }

  .sidebar-logout-form{
    width:100% !important;
    margin-top:24px !important;
  }

  .sidebar-logout{
    min-height:43px !important;
    width:100% !important;
    border-radius:10px !important;
    border:1px solid #dce6f4 !important;
    background:#fff !important;
    color:#102a59 !important;
    -webkit-text-fill-color:#102a59 !important;
    font-size:14px !important;
    font-weight:750 !important;
  }

  .main{
    margin-left:272px !important;
    padding:16px 28px 28px 24px !important;
    max-width:none !important;
  }

  .hero{
    position:relative !important;
    overflow:hidden !important;
    min-height:140px !important;
    margin:0 0 16px !important;
    padding:24px 26px 24px 28px !important;
    border:1px solid var(--mwc-ref-border) !important;
    border-radius:10px !important;
    background:
      radial-gradient(1200px 260px at 70% -60%, rgba(216,230,252,.62), transparent 58%),
      linear-gradient(135deg, #fff 0%, #fff 45%, #f8fbff 100%) !important;
    box-shadow:var(--mwc-ref-shadow) !important;
  }

  .hero h1{
    color:var(--mwc-ref-ink) !important;
    -webkit-text-fill-color:var(--mwc-ref-ink) !important;
    font-size:34px !important;
    line-height:1.02 !important;
    margin:8px 0 9px !important;
    letter-spacing:-.035em !important;
    font-weight:900 !important;
  }

  .hero .eyebrow{
    color:var(--mwc-ref-blue) !important;
    -webkit-text-fill-color:var(--mwc-ref-blue) !important;
    margin:0 !important;
    font-size:11px !important;
    font-weight:900 !important;
    letter-spacing:.16em !important;
  }

  .hero p{
    color:#31486f !important;
    -webkit-text-fill-color:#31486f !important;
    font-size:15px !important;
    font-weight:600 !important;
    line-height:1.45 !important;
  }

  .hero .actions{
    gap:14px !important;
    align-items:center !important;
    z-index:1 !important;
  }

  .hero .actions .btn{
    height:48px !important;
    min-height:48px !important;
    padding:0 22px !important;
    border-radius:8px !important;
  }

  .btn,
  button,
  input[type="submit"]{
    min-height:48px !important;
    padding:0 22px !important;
    border-radius:8px !important;
    background:#fff !important;
    border:1px solid #d7e2f2 !important;
    color:#102a59 !important;
    -webkit-text-fill-color:#102a59 !important;
    font-size:14px !important;
    font-weight:800 !important;
    gap:10px !important;
    box-shadow:none !important;
  }

  .btn.primary,
  .btn-primary,
  button.primary{
    background:#071b48 !important;
    border-color:#071b48 !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    box-shadow:0 8px 20px rgba(7,27,72,.18) !important;
  }

  .hero .actions .btn::before{
    content:"";
    display:inline-block;
    width:18px;
    height:18px;
    flex:0 0 18px;
    background:currentColor;
    -webkit-mask:var(--action-mask) center / contain no-repeat;
    mask:var(--action-mask) center / contain no-repeat;
  }

  .hero .actions .btn[href*="quote_trash"],
  .hero .actions .btn-trash{
    --action-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v5'/%3E%3Cpath d='M14 11v5'/%3E%3C/svg%3E");
  }

  .hero .actions .btn[href*="visits"]::before{
    --action-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3C/svg%3E");
  }

  .hero .actions .btn[href*="service-payments"]{
    --action-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M7 15h4'/%3E%3Cpath d='M16 14v4'/%3E%3Cpath d='M14 16h4'/%3E%3C/svg%3E");
  }

  .hero .actions .btn.primary{
    --action-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  }

  .birthday-alert-bar,
  .ops-alert-bar{
    margin:0 0 14px !important;
    border-radius:10px !important;
    background:#fff !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }

  .birthday-alert-bar{
    border:1px solid #bcd4ff !important;
  }

  .ops-alert-bar{
    border:1px solid #ffd9b4 !important;
    background:#fffdfb !important;
  }

  .birthday-alert-main{
    min-height:66px !important;
    padding:10px 28px 10px 78px !important;
    position:relative !important;
    display:flex !important;
  }

  .birthday-alert-main::before{
    content:"";
    position:absolute;
    left:18px;
    top:50%;
    width:46px;
    height:46px;
    border-radius:999px;
    transform:translateY(-50%);
    background:#e8f0ff;
  }

  .birthday-alert-bar .birthday-alert-main::after{
    content:"";
    position:absolute;
    left:30px;
    top:50%;
    width:22px;
    height:22px;
    transform:translateY(-50%);
    background:#0b63ff;
    -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 1 1 4.5-1.5V8'/%3E%3Cpath d='M16.5 8A2.5 2.5 0 1 0 12 6.5V8'/%3E%3C/svg%3E") center / contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 1 1 4.5-1.5V8'/%3E%3Cpath d='M16.5 8A2.5 2.5 0 1 0 12 6.5V8'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .ops-alert-bar .birthday-alert-main::before{
    background:#fff0df;
  }

  .ops-alert-bar .birthday-alert-main::after{
    content:"";
    position:absolute;
    left:30px;
    top:50%;
    width:23px;
    height:23px;
    transform:translateY(-50%);
    background:#f97316;
    -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.7 18.6-8.5-15a1.4 1.4 0 0 0-2.4 0l-8.5 15A1.4 1.4 0 0 0 3.5 21h17a1.4 1.4 0 0 0 1.2-2.4Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.7 18.6-8.5-15a1.4 1.4 0 0 0-2.4 0l-8.5 15A1.4 1.4 0 0 0 3.5 21h17a1.4 1.4 0 0 0 1.2-2.4Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .birthday-alert-main strong{
    color:var(--mwc-ref-ink) !important;
    -webkit-text-fill-color:var(--mwc-ref-ink) !important;
    display:block !important;
    font-size:15px !important;
    font-weight:850 !important;
    margin-bottom:5px !important;
  }

  .birthday-alert-main span{
    color:#31486f !important;
    -webkit-text-fill-color:#31486f !important;
    font-size:13px !important;
    font-weight:600 !important;
  }

  .alert-chevron,
  .alert-close{
    margin-left:auto !important;
    font-size:24px !important;
    color:#17345f !important;
    -webkit-text-fill-color:#17345f !important;
  }

  .ops-alert-bar .btn{
    min-height:44px !important;
    min-width:99px !important;
    justify-content:center !important;
    margin-left:auto !important;
    margin-right:20px !important;
  }

  .role-stats{
    grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
    gap:16px !important;
    margin:0 0 16px !important;
  }

  .role-stats .card{
    min-height:108px !important;
    margin:0 !important;
    padding:25px 24px 20px 98px !important;
    border-radius:10px !important;
    border:1px solid var(--mwc-ref-soft-border) !important;
    background:#fff !important;
    box-shadow:var(--mwc-ref-shadow) !important;
    justify-content:center !important;
    position:relative !important;
  }

  .role-stats .card::before{
    content:"";
    position:absolute;
    left:24px;
    top:50%;
    width:58px;
    height:58px;
    border-radius:999px;
    transform:translateY(-50%);
    background:var(--stat-bg, #e8f0ff);
  }

  .role-stats .card::after{
    content:"";
    position:absolute;
    left:24px;
    top:50%;
    width:58px;
    height:58px;
    transform:translateY(-50%);
    background:var(--stat-color, var(--mwc-ref-blue));
    -webkit-mask:var(--stat-mask) center / 29px 29px no-repeat;
    mask:var(--stat-mask) center / 29px 29px no-repeat;
  }

  .stat-agencies,
  .stat-liquidations{
    --stat-bg:#e8f0ff;
    --stat-color:#2563eb;
    --stat-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l8-4v18'/%3E%3Cpath d='M19 21V11l-6-4'/%3E%3Cpath d='M9 9h1'/%3E%3Cpath d='M9 13h1'/%3E%3Cpath d='M9 17h1'/%3E%3C/svg%3E");
  }
  .stat-campaigns,
  .stat-commissions{
    --stat-bg:#e9fbe9;
    --stat-color:#16a34a;
    --stat-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 13v-2Z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E");
  }
  .stat-visits{
    --stat-bg:#f0e7ff;
    --stat-color:#7c3aed;
    --stat-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  }
  .stat-pending,
  .stat-bonus-pending,
  .stat-total-pending{
    --stat-bg:#fff0df;
    --stat-color:#f97316;
    --stat-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E");
  }
  .stat-sent,
  .stat-bonus-cross,
  .stat-bonus-paid{
    --stat-bg:#defaf7;
    --stat-color:#06b6d4;
    --stat-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E");
  }
  .stat-closed,
  .stat-total-paid{
    --stat-bg:#ffe3ed;
    --stat-color:#f43f5e;
    --stat-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  }
  .stat-available{
    --stat-bg:#e8f0ff;
    --stat-color:#2563eb;
    --stat-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  }
  .stat-liquidation-pending{
    --stat-bg:#fff0df;
    --stat-color:#f97316;
    --stat-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h12v20l-3-2-3 2-3-2-3 2V2Z'/%3E%3Cpath d='M9 7h6'/%3E%3Cpath d='M9 11h4'/%3E%3Ccircle cx='16' cy='16' r='3'/%3E%3Cpath d='M16 14.7V16l.9.9'/%3E%3C/svg%3E");
  }
  .stat-payments{
    --stat-bg:#e8f0ff;
    --stat-color:#2563eb;
    --stat-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M7 15h4'/%3E%3Cpath d='M16 14v4'/%3E%3Cpath d='M14 16h4'/%3E%3C/svg%3E");
  }

  .role-stats .card span{
    color:#43577d !important;
    -webkit-text-fill-color:#43577d !important;
    font-size:13px !important;
    font-weight:650 !important;
    margin:0 0 7px !important;
  }

  .role-stats .card > strong{
    color:#071f4d !important;
    -webkit-text-fill-color:#071f4d !important;
    font-size:28px !important;
    font-weight:900 !important;
    letter-spacing:-.04em !important;
  }

  .card{
    border:1px solid var(--mwc-ref-soft-border) !important;
    border-radius:10px !important;
    background:#fff !important;
    box-shadow:var(--mwc-ref-shadow) !important;
    padding:22px 28px 12px !important;
    margin-bottom:16px !important;
  }

  .card-header{
    min-height:30px !important;
    margin-bottom:11px !important;
  }

  .card-header h2{
    color:var(--mwc-ref-ink) !important;
    -webkit-text-fill-color:var(--mwc-ref-ink) !important;
    font-size:18px !important;
    font-weight:900 !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }

  .card-header h2::before{
    content:"";
    width:22px;
    height:22px;
    display:inline-block;
    background:currentColor;
    opacity:.85;
    -webkit-mask:var(--section-mask, url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 13v-2Z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E")) center / contain no-repeat;
    mask:var(--section-mask, url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 13v-2Z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E")) center / contain no-repeat;
  }

  .card-header h2.section-visits{
    --section-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  }

  .card-header h2.section-quotes{
    --section-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h5'/%3E%3C/svg%3E");
  }

  .card-header a{
    color:var(--mwc-ref-blue) !important;
    -webkit-text-fill-color:var(--mwc-ref-blue) !important;
    font-size:14px !important;
    font-weight:850 !important;
  }

  .card-header a::after{
    content:"›";
    margin-left:9px;
    font-size:20px;
    line-height:0;
    vertical-align:-1px;
  }

  table{
    border-collapse:separate !important;
    border-spacing:0 !important;
    font-size:14px !important;
  }

  table th{
    height:32px !important;
    padding:8px 12px !important;
    background:#fbfcff !important;
    color:#5d7195 !important;
    -webkit-text-fill-color:#5d7195 !important;
    border-bottom:1px solid #dce5f1 !important;
    font-size:11px !important;
    font-weight:850 !important;
    letter-spacing:.075em !important;
  }

  table td{
    height:38px !important;
    padding:8px 12px !important;
    color:#15325d !important;
    -webkit-text-fill-color:#15325d !important;
    border-bottom:1px solid #e7edf6 !important;
    font-size:13px !important;
    font-weight:600 !important;
    line-height:1.25 !important;
  }

  table td strong,
  table td a{
    color:#0b63ff !important;
    -webkit-text-fill-color:#0b63ff !important;
    font-weight:800 !important;
    font-size:13px !important;
  }

  .pill{
    min-height:24px !important;
    padding:3px 12px !important;
    border-radius:999px !important;
    background:#eaf2ff !important;
    border:1px solid #cfe0ff !important;
    color:#0b63ff !important;
    -webkit-text-fill-color:#0b63ff !important;
    font-size:12px !important;
    font-weight:800 !important;
  }

  .pill.hot{
    background:#fff0df !important;
    border-color:#fed7aa !important;
    color:#c2410c !important;
    -webkit-text-fill-color:#c2410c !important;
  }

  @media(max-width:1280px){
    .role-stats{
      grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    }
  }

  @media(max-width:1000px){
    .sidebar{
      width:auto !important;
    }
    .main{
      margin-left:0 !important;
      padding:16px !important;
    }
    .role-stats{
      grid-template-columns:1fr 1fr !important;
    }
  }
}

/* ============================================================
   MWC Reference Density Corrections 2026-06-27
   Mantiene el look limpio, pero devuelve densidad operativa a gridlists.
   ============================================================ */
@media screen {
  .theme-control{
    display:block !important;
    position:absolute !important;
    top:50% !important;
    right:12px !important;
    transform:translateY(-50%) !important;
    z-index:4 !important;
  }

  .theme-gear-btn{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
    padding:0 !important;
    border-radius:9px !important;
    border:1px solid #dce6f4 !important;
    background:#fff !important;
    color:#102a59 !important;
    -webkit-text-fill-color:#102a59 !important;
    display:grid !important;
    place-items:center !important;
    font-size:14px !important;
    line-height:1 !important;
    box-shadow:none !important;
  }

  .theme-panel{
    right:0 !important;
    left:auto !important;
    top:38px !important;
  }

  .sidebar-user{
    padding-right:54px !important;
  }

  .sidebar-user::after{
    content:none !important;
  }

  .page-header{
    margin-bottom:16px !important;
  }

  .page-header h1{
    font-size:30px !important;
    line-height:1.08 !important;
    letter-spacing:-.03em !important;
  }

  .page-header .btn{
    min-height:42px !important;
    height:42px !important;
    padding:0 18px !important;
    border-radius:9px !important;
  }

  .search.agencies-search-bar{
    gap:10px !important;
    margin-bottom:8px !important;
  }

  .search.agencies-search-bar input{
    min-height:42px !important;
    height:42px !important;
    padding:0 14px !important;
    font-size:14px !important;
  }

  .search.agencies-search-bar .btn,
  .agency-active-filters .btn,
  .pagination-link{
    min-height:32px !important;
    height:32px !important;
    padding:0 12px !important;
    border-radius:8px !important;
    font-size:13px !important;
  }

  .agencies-table-card{
    padding:14px 18px 10px !important;
    margin-bottom:14px !important;
  }

  .compact-table,
  .agencies-table,
  .quotes-table,
  .visits-table,
  .provider-list-table,
  .users-table,
  .accounting-table{
    width:100% !important;
    font-size:12.5px !important;
  }

  .compact-table th,
  .agencies-table th,
  .quotes-table th,
  .visits-table th,
  .provider-list-table th,
  .users-table th,
  .accounting-table th{
    height:30px !important;
    padding:6px 8px !important;
    font-size:10.5px !important;
    letter-spacing:.055em !important;
    line-height:1.2 !important;
  }

  .compact-table td,
  .agencies-table td,
  .quotes-table td,
  .visits-table td,
  .provider-list-table td,
  .users-table td,
  .accounting-table td{
    height:auto !important;
    min-height:34px !important;
    padding:7px 8px !important;
    font-size:12.5px !important;
    line-height:1.2 !important;
    vertical-align:middle !important;
  }

  .compact-table td strong,
  .agencies-table td strong,
  .quotes-table td strong,
  .visits-table td strong,
  .provider-list-table td strong,
  .users-table td strong,
  .accounting-table td strong,
  .compact-table td a:not(.btn),
  .agencies-table td a:not(.btn),
  .quotes-table td a:not(.btn),
  .visits-table td a:not(.btn),
  .provider-list-table td a:not(.btn){
    font-size:12.5px !important;
  }

  .compact-table small,
  .agencies-table small,
  .quotes-table small,
  .visits-table small,
  .provider-list-table small{
    font-size:11.5px !important;
    line-height:1.18 !important;
  }

  .quotes-table th,
  .quotes-table td{
    padding-left:7px !important;
    padding-right:7px !important;
  }

  .quotes-table .agency-cell{
    min-width:130px !important;
    max-width:180px !important;
  }

  .quotes-table td:nth-child(2){
    max-width:135px !important;
  }

  .quotes-table td:nth-child(3){
    max-width:300px !important;
  }

  .quotes-table td:nth-child(4){
    max-width:110px !important;
  }

  .quotes-table td.quote-detail-cell{
    max-width:300px !important;
    width:300px !important;
  }

  .quotes-table .quote-detail-text{
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
    max-height:2.45em !important;
  }

  .quotes-table .quote-detail-cell small{
    display:block !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .quotes-table td:nth-child(5),
  .quotes-table td:nth-child(6){
    max-width:145px !important;
  }

  .quotes-table .pill{
    min-height:22px !important;
    padding:3px 10px !important;
    font-size:11.5px !important;
  }

  .quote-action-wrap{
    gap:6px !important;
    flex-wrap:nowrap !important;
  }

  .quote-action-wrap .btn,
  .compact-table .compact-btn,
  .agencies-table .compact-btn,
  .quotes-table .compact-btn,
  .visits-table .compact-btn,
  .provider-list-table .compact-btn,
  .users-table .compact-btn,
  .accounting-table .compact-btn{
    min-height:30px !important;
    height:30px !important;
    padding:0 10px !important;
    border-radius:8px !important;
    font-size:12.5px !important;
  }

  .quote-delete-inline .btn{
    min-width:34px !important;
    width:34px !important;
    padding:0 !important;
  }

  .hero{
    min-height:124px !important;
    padding:20px 24px 20px 26px !important;
    margin-bottom:14px !important;
  }

  .hero h1{
    font-size:31px !important;
    margin:6px 0 7px !important;
  }

  .hero p{
    font-size:14px !important;
  }

  .hero .actions .btn{
    height:42px !important;
    min-height:42px !important;
    padding:0 18px !important;
  }

  .birthday-alert-main{
    min-height:58px !important;
    padding:8px 24px 8px 70px !important;
  }

  .birthday-alert-main::before{
    left:16px !important;
    width:40px !important;
    height:40px !important;
  }

  .birthday-alert-bar .birthday-alert-main::after,
  .ops-alert-bar .birthday-alert-main::after{
    left:25px !important;
    width:21px !important;
    height:21px !important;
  }

  .birthday-alert-main strong{
    font-size:14px !important;
    margin-bottom:3px !important;
  }

  .birthday-alert-main span{
    font-size:12.5px !important;
  }

  .role-stats{
    gap:12px !important;
    margin-bottom:14px !important;
  }

  .role-stats .card{
    min-height:92px !important;
    padding:18px 18px 16px 82px !important;
  }

  .role-stats .card::before,
  .role-stats .card::after{
    left:20px !important;
    width:48px !important;
    height:48px !important;
  }

  .role-stats .card::after{
    -webkit-mask-size:25px 25px !important;
    mask-size:25px 25px !important;
  }

  .role-stats .card span{
    font-size:12.5px !important;
    margin-bottom:5px !important;
  }

  .role-stats .card > strong{
    font-size:25px !important;
  }

  .card:not(.role-stats .card){
    padding:18px 22px 10px !important;
  }

  .compact-table tbody tr td:last-child::after,
  .agencies-table tbody tr td:last-child::after,
  .quotes-table tbody tr td:last-child::after,
  .visits-table tbody tr td:last-child::after,
  .provider-list-table tbody tr td:last-child::after,
  .users-table tbody tr td:last-child::after,
  .accounting-table tbody tr td:last-child::after{
    content:none !important;
  }
}

/* MWC Final UI Fixes - must stay after density layer */
@media screen {
  .sidebar{padding:24px 18px 18px !important}
  .brand{margin-bottom:18px !important}
  .brand-mark.brand-logo-mark,
  .brand-mark.brand-logo-mark img{width:46px !important;height:46px !important;min-width:46px !important}
  .brand strong{font-size:16px !important}
  .brand span{font-size:11.5px !important;margin-top:2px !important}
  .sidebar nav{gap:3px !important}
  .sidebar nav a{min-height:38px !important;padding:0 12px !important;border-radius:8px !important;gap:13px !important;font-size:13.5px !important}
  .nav-icon{width:18px !important;height:18px !important;flex-basis:18px !important}
  .mw-sidebar-beta-badge{height:18px !important;padding:0 7px !important;font-size:9.5px !important}
  .sidebar-user{margin-top:8px !important;min-height:66px !important;padding:11px 50px 11px 12px !important}
  .sidebar-avatar{width:38px !important;height:38px !important;font-size:12px !important}
  .sidebar-logout-form{margin-top:14px !important}
  .sidebar-logout{min-height:39px !important;font-size:13.5px !important}

  .ops-alert-bar .birthday-alert-main{gap:16px !important}
  .ops-alert-bar .birthday-alert-main > div{min-width:0 !important}
  .ops-alert-bar .btn{margin-left:auto !important;margin-right:0 !important;min-height:40px !important;height:40px !important}
  .alert-close{margin-left:12px !important;cursor:pointer !important;width:28px !important;height:28px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;border-radius:999px !important}
  .alert-close:hover{background:rgba(15,23,42,.06) !important}

  body .main .card table .agency-cell strong{color:var(--mwc-grid-link) !important;-webkit-text-fill-color:var(--mwc-grid-link) !important}

  #accounting-commission-section .accounting-table{table-layout:fixed !important}
  #accounting-commission-section .accounting-table .commission-invoice-col,
  #accounting-commission-report-section .accounting-table .commission-invoice-col{width:86px !important;min-width:74px !important;max-width:96px !important;white-space:nowrap !important}
  #accounting-commission-section .accounting-table .commission-date-col,
  #accounting-commission-report-section .accounting-table .commission-date-col{width:104px !important;min-width:92px !important;max-width:112px !important;white-space:nowrap !important}
  #accounting-commission-section .accounting-table .commission-agency-col,
  #accounting-commission-report-section .accounting-table .commission-agency-col{width:20% !important;min-width:160px !important}
  #accounting-commission-section .accounting-table .commission-payment-col,
  #accounting-commission-report-section .accounting-table .commission-payment-col{width:140px !important;min-width:128px !important}

  #accounting-commission-section .accounting-table .commission-percent-col,
  #accounting-commission-report-section .accounting-table .commission-percent-col{width:58px !important}

  #accounting-commission-section .accounting-table th:nth-child(11),
  #accounting-commission-section .accounting-table td:nth-child(11){width:70px !important}
  #accounting-commission-section .accounting-edit-control{width:100% !important;min-width:0 !important;height:30px !important;min-height:30px !important;padding:0 8px !important;font-size:12px !important}

  .compact-permissions{grid-template-columns:repeat(auto-fit, minmax(128px, max-content)) !important;justify-content:start !important;gap:8px !important}
  .permissions-grid .checkbox,
  .permission-chip{width:auto !important;min-width:0 !important;min-height:30px !important;height:auto !important;padding:6px 9px !important;gap:7px !important;border-radius:9px !important;font-size:12.5px !important;line-height:1.15 !important;display:inline-flex !important;align-items:center !important;justify-content:flex-start !important}
  .permission-chip input,
  .permissions-grid .checkbox input{width:14px !important;height:14px !important;min-height:14px !important;max-height:14px !important;flex:0 0 14px !important;margin:0 !important;padding:0 !important}
  .role-row{gap:12px !important}
  .role-permissions-line{gap:6px !important}
  .card-header h2.section-users{--section-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}

  .theme-panel{width:176px !important;right:0 !important;left:auto !important;top:auto !important;bottom:calc(100% + 8px) !important;padding:9px !important;border-radius:12px !important;gap:7px !important}
  .theme-options{grid-template-columns:1fr !important;gap:6px !important}
  .theme-option{min-height:40px !important;height:40px !important;grid-template-columns:24px 1fr !important;justify-items:start !important;align-content:center !important;padding:6px 8px !important;font-size:12.5px !important}
  .theme-preview{width:22px !important;height:22px !important}
}

@media screen {
  :root[data-theme="dark"]{
    --mwc-ref-bg:#0b1120;
    --mwc-ref-card:#111827;
    --mwc-ref-sidebar:#0f172a;
    --mwc-ref-ink:#f8fafc;
    --mwc-ref-text:#dbeafe;
    --mwc-ref-muted:#94a3b8;
    --mwc-ref-border:#263449;
    --mwc-ref-soft-border:#243244;
    --mwc-ref-shadow:0 16px 36px rgba(0,0,0,.28);
  }
  :root[data-theme="dark"] body,
  :root[data-theme="dark"] .main{background:#0b1120 !important;color:#dbeafe !important}
  :root[data-theme="dark"] .sidebar{background:#0f172a !important;border-right-color:#1e293b !important}
  :root[data-theme="dark"] .brand-mark.brand-logo-mark img{filter:brightness(0) invert(1) !important}
  :root[data-theme="dark"] .brand strong,
  :root[data-theme="dark"] .hero h1,
  :root[data-theme="dark"] .page-header h1,
  :root[data-theme="dark"] .card-header h2{color:#f8fafc !important;-webkit-text-fill-color:#f8fafc !important}
  :root[data-theme="dark"] .sidebar nav a{color:#cbd5e1 !important;-webkit-text-fill-color:#cbd5e1 !important}
  :root[data-theme="dark"] .sidebar nav a.active,
  :root[data-theme="dark"] .sidebar nav a:hover{background:#172554 !important;color:#93c5fd !important;-webkit-text-fill-color:#93c5fd !important}
  :root[data-theme="dark"] .hero,
  :root[data-theme="dark"] .card,
  :root[data-theme="dark"] .agencies-table-card,
  :root[data-theme="dark"] .sidebar-user,
  :root[data-theme="dark"] .sidebar-logout,
  :root[data-theme="dark"] .theme-panel{background:#111827 !important;border-color:#243244 !important;color:#dbeafe !important}
  :root[data-theme="dark"] .hero{background:radial-gradient(900px 220px at 72% -70%, rgba(37,99,235,.22), transparent 58%),linear-gradient(135deg, #111827 0%, #111827 48%, #0f172a 100%) !important}
  :root[data-theme="dark"] .birthday-alert-bar,
  :root[data-theme="dark"] .ops-alert-bar{background:#111827 !important;border-color:#243244 !important}
  :root[data-theme="dark"] .birthday-alert-main strong,
  :root[data-theme="dark"] .birthday-alert-main span,
  :root[data-theme="dark"] .hero p,
  :root[data-theme="dark"] .page-header .muted,
  :root[data-theme="dark"] .muted{color:#cbd5e1 !important;-webkit-text-fill-color:#cbd5e1 !important}
  :root[data-theme="dark"] .role-stats .card{background:#111827 !important;border-color:#243244 !important}
  :root[data-theme="dark"] table th{background:#0f172a !important;color:#93a4bd !important;-webkit-text-fill-color:#93a4bd !important;border-bottom-color:#243244 !important}
  :root[data-theme="dark"] table td{color:#dbeafe !important;-webkit-text-fill-color:#dbeafe !important;border-bottom-color:#1f2937 !important}
  :root[data-theme="dark"] input,
  :root[data-theme="dark"] select,
  :root[data-theme="dark"] textarea{background:#0f172a !important;border-color:#334155 !important;color:#e2e8f0 !important;-webkit-text-fill-color:#e2e8f0 !important}
  :root[data-theme="dark"] .btn,
  :root[data-theme="dark"] button,
  :root[data-theme="dark"] .theme-gear-btn{background:#111827 !important;border-color:#334155 !important;color:#dbeafe !important;-webkit-text-fill-color:#dbeafe !important}
  :root[data-theme="dark"] .btn.primary,
  :root[data-theme="dark"] button.primary{background:#2563eb !important;border-color:#2563eb !important;color:#fff !important;-webkit-text-fill-color:#fff !important}
  :root[data-theme="dark"] .pill{background:#172554 !important;border-color:#1d4ed8 !important;color:#bfdbfe !important;-webkit-text-fill-color:#bfdbfe !important}
  :root[data-theme="dark"] .pill.hot{background:#431407 !important;border-color:#9a3412 !important;color:#fed7aa !important;-webkit-text-fill-color:#fed7aa !important}
}

/* MWC Polish Fixes - final visual details */
@media screen {
  .sidebar-user{
    margin-top:auto !important;
  }

  .card-header h2.section-roles{
    --section-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-8 9-4.5-1.5-8-4-8-9V5l8-3 8 3v8Z'/%3E%3Cpath d='M9 12l2 2 4-5'/%3E%3C/svg%3E");
  }

  .card-header h2.section-mail{
    --section-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  }

  .card-header h2.section-recipients{
    --section-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='m16 11 2 2 4-4'/%3E%3C/svg%3E");
  }

  .card-header h2.section-counters{
    --section-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M22 11h-6'/%3E%3C/svg%3E");
  }

  .quote-delete-inline button,
  .quote-delete-inline .btn,
  .quotes-table .quote-delete-inline .btn{
    width:30px !important;
    min-width:30px !important;
    height:30px !important;
    min-height:30px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1 !important;
    text-align:center !important;
    font-size:14px !important;
  }

  .quote-delete-inline button{
    vertical-align:middle !important;
  }
}

@media screen {
  :root[data-theme="dark"] .role-stats .card span{
    color:#cbd5e1 !important;
    -webkit-text-fill-color:#cbd5e1 !important;
  }

  :root[data-theme="dark"] .role-stats .card > strong{
    color:#f8fafc !important;
    -webkit-text-fill-color:#f8fafc !important;
  }

  :root[data-theme="dark"] .role-stats .card::before{
    background:rgba(148,163,184,.16) !important;
    border:1px solid rgba(226,232,240,.12) !important;
  }

  :root[data-theme="dark"] .role-stats .card::after{
    background:#f8fafc !important;
    opacity:.92 !important;
  }
}

/* MWC Service Liquidation Flow + Dark Mode Fixes */
@media screen {
  .service-status-pill{
    vertical-align:middle;
    margin-left:4px;
  }

  .service-finalize-modal-backdrop{
    position:fixed;
    inset:0;
    z-index:2000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(15,23,42,.58);
    backdrop-filter:blur(10px);
  }

  .service-finalize-modal{
    width:min(960px, calc(100vw - 48px));
    max-height:calc(100vh - 48px);
    overflow:auto;
    border:1px solid var(--mwc-ref-soft-border, #e7edf6);
    border-radius:14px;
    background:#fff;
    box-shadow:0 30px 80px rgba(15,23,42,.26);
  }

  .service-finalize-modal-header{
    position:sticky;
    top:0;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 18px;
    background:#fff;
    border-bottom:1px solid #e7edf6;
  }

  .service-finalize-modal-header h2{
    margin:4px 0 0;
    font-size:22px;
    line-height:1.1;
  }

  .service-finalize-modal .service-preview-card{
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    padding:18px !important;
  }

  .service-finalize-modal .service-preview-sheet{
    margin:0 auto !important;
  }
}

@media screen {
  :root[data-theme="dark"] .service-liquidation-form label,
  :root[data-theme="dark"] .service-liquidation-form h2,
  :root[data-theme="dark"] .service-liquidation-form h3,
  :root[data-theme="dark"] .service-liquidation-form .card h2,
  :root[data-theme="dark"] .service-liquidation-form .section-title{
    color:#f8fafc !important;
    -webkit-text-fill-color:#f8fafc !important;
  }

  :root[data-theme="dark"] body .service-liquidation-form input,
  :root[data-theme="dark"] body .service-liquidation-form select,
  :root[data-theme="dark"] body .service-liquidation-form textarea,
  :root[data-theme="dark"] body .service-liquidation-form .service-pax-stepper button,
  :root[data-theme="dark"] body .service-liquidation-form .service-input-table input,
  :root[data-theme="dark"] body .service-liquidation-form .service-input-table select{
    background:#0f172a !important;
    border-color:#334155 !important;
    color:#e2e8f0 !important;
    -webkit-text-fill-color:#e2e8f0 !important;
    caret-color:#e2e8f0 !important;
    opacity:1 !important;
  }

  :root[data-theme="dark"] body .service-liquidation-form input::placeholder,
  :root[data-theme="dark"] body .service-liquidation-form textarea::placeholder{
    color:#94a3b8 !important;
    -webkit-text-fill-color:#94a3b8 !important;
  }

  :root[data-theme="dark"] .service-liquidation-form .card,
  :root[data-theme="dark"] .service-liquidation-form .service-isd-result,
  :root[data-theme="dark"] .service-liquidation-form .service-invoice-grid div{
    background:#111827 !important;
    border-color:#243244 !important;
    color:#dbeafe !important;
  }

  :root[data-theme="dark"] .service-liquidation-form .service-input-table th{
    background:#0f172a !important;
    color:#93a4bd !important;
    -webkit-text-fill-color:#93a4bd !important;
    border-bottom-color:#243244 !important;
  }

  :root[data-theme="dark"] .service-liquidation-form .service-input-table td,
  :root[data-theme="dark"] .service-liquidation-form .service-calculation-card dt,
  :root[data-theme="dark"] .service-liquidation-form .service-invoice-grid span,
  :root[data-theme="dark"] .service-liquidation-form .service-isd-result span,
  :root[data-theme="dark"] .service-liquidation-form .date-range-help{
    color:#cbd5e1 !important;
    -webkit-text-fill-color:#cbd5e1 !important;
  }

  :root[data-theme="dark"] .service-liquidation-form .service-calculation-card dd,
  :root[data-theme="dark"] .service-liquidation-form .service-invoice-grid strong,
  :root[data-theme="dark"] .service-liquidation-form .service-isd-result strong,
  :root[data-theme="dark"] .service-liquidation-form .commission-value{
    color:#f8fafc !important;
    -webkit-text-fill-color:#f8fafc !important;
  }

  :root[data-theme="dark"] .service-liquidation-form .commission-value{
    background:#172554 !important;
    border-color:#2563eb !important;
    color:#bfdbfe !important;
    -webkit-text-fill-color:#bfdbfe !important;
    box-shadow:inset 0 0 0 1px rgba(96,165,250,.20) !important;
  }

  :root[data-theme="dark"] .service-finalize-modal{
    background:#111827;
    border-color:#243244;
  }

  :root[data-theme="dark"] .service-finalize-modal-header{
    background:#111827;
    border-bottom-color:#243244;
  }

  :root[data-theme="dark"] .service-finalize-modal-header h2{
    color:#f8fafc !important;
    -webkit-text-fill-color:#f8fafc !important;
  }
}

/* MWC Service Liquidation - compact date range popover */
@media screen {
  .service-liquidation-form .date-range-popover{
    width:min(318px, calc(100vw - 36px)) !important;
    padding:10px !important;
    border-radius:14px !important;
  }

  .service-liquidation-form .date-range-calendar{
    gap:8px !important;
  }

  .service-liquidation-form .date-range-calendar-head{
    gap:8px !important;
  }

  .service-liquidation-form .date-range-calendar-head strong{
    font-size:13px !important;
    line-height:1.1 !important;
  }

  .service-liquidation-form .date-range-nav{
    width:30px !important;
    min-width:30px !important;
    height:30px !important;
    min-height:30px !important;
    padding:0 !important;
    border-radius:9px !important;
    font-size:17px !important;
    line-height:1 !important;
  }

  .service-liquidation-form .date-range-weekdays,
  .service-liquidation-form .date-range-days{
    gap:3px !important;
  }

  .service-liquidation-form .date-range-weekdays span{
    font-size:10px !important;
    line-height:1.1 !important;
  }

  .service-liquidation-form .date-range-day{
    width:100% !important;
    min-width:0 !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 !important;
    border-radius:9px !important;
    font-size:12px !important;
    line-height:1 !important;
  }

  .service-liquidation-form .date-range-help{
    font-size:11px !important;
    line-height:1.25 !important;
  }

  .service-liquidation-form .date-range-actions{
    margin-top:8px !important;
  }

  .service-liquidation-form .date-range-actions .btn,
  .service-liquidation-form .date-range-actions .compact-btn{
    min-height:30px !important;
    padding:6px 10px !important;
    border-radius:9px !important;
    font-size:12px !important;
  }
}

/* MWC Accounting - consistent report controls */
@media screen {
  .accounting-table .btn,
  .accounting-table button,
  .accounting-table .compact-btn,
  .accounting-page-header .btn,
  #accounting-commission-section .btn,
  #accounting-commission-section button,
  #accounting-bonus-section .btn,
  #accounting-bonus-section button,
  .accounting-row-save-form .btn,
  .accounting-inline-form .btn{
    font-weight:700 !important;
  }

  #accounting-commission-section .accounting-table .commission-agency-col,
  #accounting-commission-report-section .accounting-table .commission-agency-col{
    min-width:160px;
  }

  #accounting-commission-report-section .accounting-total-row th{
    text-align:left;
  }

  :root[data-theme="dark"] .accounting-page-header .btn,
  :root[data-theme="dark"] .accounting-table .btn,
  :root[data-theme="dark"] .accounting-table button,
  :root[data-theme="dark"] #accounting-commission-section .btn,
  :root[data-theme="dark"] #accounting-commission-section button,
  :root[data-theme="dark"] #accounting-bonus-section .btn,
  :root[data-theme="dark"] #accounting-bonus-section button,
  :root[data-theme="dark"] .accounting-inline-form .btn,
  :root[data-theme="dark"] .accounting-row-save-form .btn{
    background:transparent !important;
    color:#f8fafc !important;
    -webkit-text-fill-color:#f8fafc !important;
    border-color:#60a5fa !important;
    box-shadow:none !important;
  }

  :root[data-theme="dark"] .accounting-page-header .btn:hover,
  :root[data-theme="dark"] .accounting-table .btn:hover,
  :root[data-theme="dark"] .accounting-table button:hover,
  :root[data-theme="dark"] #accounting-commission-section .btn:hover,
  :root[data-theme="dark"] #accounting-commission-section button:hover,
  :root[data-theme="dark"] #accounting-bonus-section .btn:hover,
  :root[data-theme="dark"] #accounting-bonus-section button:hover,
  :root[data-theme="dark"] .accounting-inline-form .btn:hover,
  :root[data-theme="dark"] .accounting-row-save-form .btn:hover{
    background:rgba(96,165,250,.10) !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
  }
}

/* ============================================================
   MWC 1.0.2 - Quote trash icon + alert warning alignment
   UI only: iguala el icono de eliminar cotización con Papelera
   y centra el triángulo de alerta dentro de su círculo.
   ============================================================ */
@media screen {
  .quote-trash-btn{
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    line-height:1 !important;
  }

  .quote-trash-btn::before{
    content:"";
    display:block;
    width:17px;
    height:17px;
    flex:0 0 17px;
    background:currentColor;
    -webkit-text-fill-color:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v5'/%3E%3Cpath d='M14 11v5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v5'/%3E%3Cpath d='M14 11v5'/%3E%3C/svg%3E") center / contain no-repeat;
  }

.quote-trash-btn:hover::before,
.quote-trash-btn:focus-visible::before{
  background:currentColor;
}

.trash-quotes-card .quote-restore-btn{
  width:32px !important;
  min-width:32px !important;
  height:30px !important;
  min-height:30px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}
.trash-quotes-card .quote-restore-btn svg{
  width:17px;
  height:17px;
}

  .ops-alert-bar .birthday-alert-main::before{
    left:16px !important;
    top:50% !important;
    width:40px !important;
    height:40px !important;
    transform:translateY(-50%) !important;
    display:block !important;
    border-radius:999px !important;
    background:#fff0df !important;
  }

  .ops-alert-bar .birthday-alert-main::after{
    content:"" !important;
    position:absolute !important;
    left:36px !important;
    top:50% !important;
    width:22px !important;
    height:22px !important;
    transform:translate(-50%,-50%) !important;
    display:block !important;
    background:#f97316 !important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2.25c.58 0 1.11.31 1.4.82l9.08 15.74A1.62 1.62 0 0 1 21.08 21H2.92a1.62 1.62 0 0 1-1.4-2.19L10.6 3.07c.29-.51.82-.82 1.4-.82Zm0 3.22L4.22 18.95h15.56L12 5.47Zm-.95 4.18h1.9v5.6h-1.9v-5.6Zm0 6.85h1.9v1.9h-1.9v-1.9Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2.25c.58 0 1.11.31 1.4.82l9.08 15.74A1.62 1.62 0 0 1 21.08 21H2.92a1.62 1.62 0 0 1-1.4-2.19L10.6 3.07c.29-.51.82-.82 1.4-.82Zm0 3.22L4.22 18.95h15.56L12 5.47Zm-.95 4.18h1.9v5.6h-1.9v-5.6Zm0 6.85h1.9v1.9h-1.9v-1.9Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  :root[data-theme="dark"] .ops-alert-bar .birthday-alert-main::before{
    background:rgba(249,115,22,.14) !important;
  }
}


/* ============================================================
   MWC 1.0.2 - Theme gear icon refinement
   Reemplaza el emoji de tuerca por un SVG coherente con el
   sistema de iconos. Solo UI; no cambia lógica ni tema.
   ============================================================ */
@media screen {
  .theme-gear-btn{
    font-size:0 !important;
  }

  .theme-gear-icon{
    width:16px;
    height:16px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
    color:inherit;
    -webkit-text-fill-color:currentColor;
    pointer-events:none;
  }

  .theme-gear-btn:hover .theme-gear-icon,
  .theme-gear-btn[aria-expanded="true"] .theme-gear-icon{
    color:inherit;
    stroke:currentColor;
  }
}

/* ============================================================
   MWC 1.0.2 - Login right panel premium refinement
   Scope: solo lado derecho del login. No toca el panel izquierdo.
   ============================================================ */
@media screen {
  .login-card-panel{
    background:
      radial-gradient(circle at 50% 24%, rgba(37,99,235,.08), transparent 34%),
      linear-gradient(135deg, #f8fafc 0%, #f3f6fb 45%, #ffffff 100%);
  }

  .login-card{
    width:min(100%, 520px) !important;
    padding:44px 48px !important;
    border-radius:32px !important;
    border:1px solid rgba(213,222,236,.95) !important;
    background:rgba(255,255,255,.92) !important;
    box-shadow:
      0 30px 90px rgba(15,23,42,.12),
      0 1px 0 rgba(255,255,255,.92) inset !important;
    backdrop-filter:blur(18px);
  }

  .login-card-header-premium{
    display:grid !important;
    justify-items:center;
    text-align:center;
    gap:10px !important;
    margin:0 0 30px !important;
  }

  .login-security-orb{
    width:66px;
    height:66px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:#2563eb;
    background:
      radial-gradient(circle at 35% 28%, rgba(255,255,255,.94), rgba(239,246,255,.96)),
      linear-gradient(135deg, rgba(219,234,254,.92), rgba(255,255,255,.94));
    border:1px solid rgba(191,219,254,.95);
    box-shadow:0 16px 42px rgba(37,99,235,.14);
  }

  .login-security-orb svg{
    width:30px;
    height:30px;
  }

  .login-card-header-premium h2{
    margin:8px 0 0 !important;
    color:#0f172a !important;
    font-size:30px !important;
    line-height:1.05 !important;
    letter-spacing:-.045em !important;
    font-weight:850 !important;
  }

  .login-card-header-premium p{
    margin:0 !important;
    color:#64748b !important;
    font-size:15px !important;
    line-height:1.35 !important;
    font-weight:650 !important;
  }

  .login-form-premium{
    gap:16px !important;
  }

  .login-input-label{
    gap:7px !important;
  }

  .login-input-label > span{
    color:#334155 !important;
    font-size:12.5px !important;
    font-weight:850 !important;
    letter-spacing:.01em;
  }

  .login-input-wrap{
    position:relative;
    display:flex;
    align-items:center;
  }

  .login-input-icon{
    position:absolute;
    left:15px;
    width:20px;
    height:20px;
    color:#2563eb;
    pointer-events:none;
    z-index:2;
  }

  .login-form-premium input{
    min-height:56px !important;
    padding:13px 16px 13px 48px !important;
    border-radius:14px !important;
    border:1px solid rgba(203,213,225,.92) !important;
    background:rgba(255,255,255,.96) !important;
    color:#0f172a !important;
    -webkit-text-fill-color:#0f172a !important;
    font-size:14px !important;
    font-weight:650 !important;
    box-shadow:0 1px 0 rgba(15,23,42,.02) !important;
  }

  .login-form-premium input::placeholder{
    color:#8a98ad !important;
    -webkit-text-fill-color:#8a98ad !important;
    font-weight:650 !important;
  }

  .login-form-premium input:focus{
    border-color:rgba(37,99,235,.55) !important;
    box-shadow:
      0 0 0 4px rgba(37,99,235,.10),
      0 10px 26px rgba(37,99,235,.08) !important;
  }

  .login-submit-premium{
    min-height:58px !important;
    margin-top:8px !important;
    justify-content:center !important;
    gap:12px !important;
    border-radius:14px !important;
    background:linear-gradient(135deg,#2563eb,#1d4ed8) !important;
    border-color:#2563eb !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    box-shadow:0 18px 40px rgba(37,99,235,.28) !important;
    font-size:14px !important;
    font-weight:850 !important;
  }

  .login-submit-premium svg{
    width:21px;
    height:21px;
    transition:transform .18s ease;
  }

  .login-submit-premium:hover{
    background:linear-gradient(135deg,#1d4ed8,#1e40af) !important;
    box-shadow:0 22px 46px rgba(37,99,235,.34) !important;
  }

  .login-submit-premium:hover svg{
    transform:translateX(3px);
  }

  .login-secure-note-premium{
    display:grid;
    grid-template-columns:42px 1fr;
    gap:14px;
    align-items:center;
    margin-top:28px !important;
    padding:18px 20px !important;
    border-radius:18px !important;
    border:1px solid rgba(226,232,240,.98) !important;
    background:linear-gradient(180deg,rgba(248,250,252,.96),rgba(241,245,249,.82)) !important;
    box-shadow:0 14px 34px rgba(15,23,42,.06) inset !important;
  }

  .login-secure-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:#334155;
    background:#eef2f7;
    border:1px solid rgba(203,213,225,.85);
  }

  .login-secure-icon svg{
    width:20px;
    height:20px;
  }

  .login-secure-note-premium strong{
    color:#0f172a !important;
    font-size:14px !important;
    font-weight:850 !important;
    margin:0 0 4px !important;
  }

  .login-secure-note-premium p{
    color:#64748b !important;
    font-size:13px !important;
    line-height:1.45 !important;
    font-weight:600 !important;
  }

  .login-flashes{
    margin:-10px 0 18px !important;
  }

  .login-card-success-clean .login-success-orb{
    background:linear-gradient(135deg,#2563eb,#1d4ed8) !important;
    box-shadow:0 20px 50px rgba(37,99,235,.24), 0 0 0 9px rgba(37,99,235,.10) !important;
  }

  @media(max-width:920px){
    .login-card{
      padding:34px 26px !important;
    }
  }
}


/* ============================================================
   MWC 1.0.2 - Login success focus transition
   Refuerza el estado de acceso exitoso dentro del nuevo login premium.
   Solo visual; no toca backend ni validación.
   ============================================================ */
@media screen {
  .login-card-success-clean{
    position:relative;
    overflow:hidden !important;
    min-height:500px !important;
    padding:48px 46px !important;
    border-radius:34px !important;
    border-color:rgba(191,219,254,.90) !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(37,99,235,.12), transparent 30%),
      linear-gradient(180deg,#ffffff 0%, #f8fbff 100%) !important;
    box-shadow:0 32px 90px rgba(15,23,42,.16) !important;
    animation:loginSuccessCardFocus .68s cubic-bezier(.2,.8,.2,1) both;
  }

  .login-card-success-clean::before{
    content:"";
    position:absolute;
    inset:-45%;
    background:conic-gradient(from 180deg, transparent, rgba(37,99,235,.10), transparent, rgba(96,165,250,.12), transparent);
    opacity:.9;
    animation:loginSuccessGlowSpin 2.6s linear infinite;
    pointer-events:none;
  }

  .login-card-success-clean::after{
    content:"";
    position:absolute;
    left:14%;
    right:14%;
    top:50%;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(37,99,235,.28), transparent);
    opacity:.65;
    pointer-events:none;
  }

  .login-card-success-clean .login-success-stage-clean{
    position:relative !important;
    z-index:1;
    min-height:330px !important;
    gap:16px !important;
    transform:translateY(18px) scale(.96);
    animation:loginSuccessStageFocus .82s cubic-bezier(.16,1,.3,1) .08s both !important;
  }

  .login-card-success-clean .login-success-orb-focus{
    width:96px !important;
    height:96px !important;
    border-radius:30px !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 48%,#0f2f80 100%) !important;
    box-shadow:
      0 26px 62px rgba(37,99,235,.34),
      0 0 0 12px rgba(37,99,235,.10),
      0 0 0 26px rgba(37,99,235,.045) !important;
    animation:loginSuccessOrbFocus .9s cubic-bezier(.16,1,.3,1) .18s both, loginSuccessOrbBreath 1.6s ease-in-out 1.08s infinite alternate !important;
  }

  .login-success-check{
    width:44px;
    height:44px;
    filter:drop-shadow(0 8px 16px rgba(0,0,0,.16));
  }

  .login-success-check path{
    stroke-dasharray:28;
    stroke-dashoffset:28;
    animation:loginSuccessCheckDraw .58s ease .62s forwards;
  }

  .login-card-success-clean .login-success-stage h3{
    margin:12px 0 0 !important;
    font-size:34px !important;
    line-height:1.02 !important;
    letter-spacing:-.055em !important;
    color:#0f172a !important;
    -webkit-text-fill-color:#0f172a !important;
    animation:loginSuccessTextUp .62s ease .34s both;
  }

  .login-card-success-clean .login-success-stage p{
    max-width:320px !important;
    color:#64748b !important;
    -webkit-text-fill-color:#64748b !important;
    font-size:15px !important;
    font-weight:750 !important;
    animation:loginSuccessTextUp .62s ease .44s both;
  }

  @keyframes loginSuccessCardFocus{
    0%{opacity:.82;transform:translateY(10px) scale(.985);filter:blur(.8px)}
    100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
  }

  @keyframes loginSuccessGlowSpin{
    to{transform:rotate(360deg)}
  }

  @keyframes loginSuccessStageFocus{
    0%{opacity:0;transform:translateY(24px) scale(.94)}
    62%{opacity:1;transform:translateY(-4px) scale(1.015)}
    100%{opacity:1;transform:translateY(0) scale(1)}
  }

  @keyframes loginSuccessOrbFocus{
    0%{opacity:0;transform:scale(.62) rotate(-8deg)}
    58%{opacity:1;transform:scale(1.12) rotate(2deg)}
    100%{opacity:1;transform:scale(1) rotate(0)}
  }

  @keyframes loginSuccessOrbBreath{
    from{box-shadow:0 26px 62px rgba(37,99,235,.32),0 0 0 12px rgba(37,99,235,.10),0 0 0 26px rgba(37,99,235,.045)}
    to{box-shadow:0 30px 72px rgba(37,99,235,.40),0 0 0 15px rgba(37,99,235,.12),0 0 0 34px rgba(37,99,235,.055)}
  }

  @keyframes loginSuccessCheckDraw{
    to{stroke-dashoffset:0}
  }

  @keyframes loginSuccessTextUp{
    0%{opacity:0;transform:translateY(10px)}
    100%{opacity:1;transform:translateY(0)}
  }

  @media(max-width:920px){
    .login-card-success-clean{
      min-height:430px !important;
      padding:38px 28px !important;
    }
  }
}

@media (prefers-reduced-motion: reduce){
  .login-card-success-clean,
  .login-card-success-clean::before,
  .login-card-success-clean .login-success-stage-clean,
  .login-card-success-clean .login-success-orb-focus,
  .login-success-check path,
  .login-card-success-clean .login-success-stage h3,
  .login-card-success-clean .login-success-stage p{
    animation:none !important;
  }
  .login-success-check path{stroke-dashoffset:0 !important;}
}

/* ============================================================
   MWC 1.0.2 - Login success smooth exit
   Al validar credenciales, los elementos del login se desvanecen
   con una salida suave antes de mostrar el estado Acceso exitoso.
   Solo afecta el lado derecho del login.
   ============================================================ */
@media screen {
  .login-card-success-smooth{
    position:relative;
    overflow:hidden;
    min-height:560px;
  }

  .login-card-success-smooth .login-header-exit{
    pointer-events:none;
    animation:loginSmoothHeaderExit .72s cubic-bezier(.16,1,.3,1) both;
  }

  .login-card-success-smooth .login-form-exit{
    pointer-events:none;
    animation:loginSmoothFormExit .82s cubic-bezier(.16,1,.3,1) .08s both;
  }

  .login-card-success-smooth .login-form-exit .login-input-label:nth-child(2){
    animation-delay:.04s;
  }

  .login-card-success-smooth .login-form-exit .login-submit-premium{
    animation:loginSmoothButtonExit .78s cubic-bezier(.16,1,.3,1) .14s both;
  }

  .login-card-success-smooth .login-secure-note-exit{
    pointer-events:none;
    animation:loginSmoothSecureExit .76s cubic-bezier(.16,1,.3,1) .18s both;
  }

  .login-card-success-smooth .login-success-stage-smooth{
    position:absolute !important;
    inset:0 !important;
    z-index:4;
    display:grid !important;
    place-items:center !important;
    align-content:center !important;
    min-height:auto !important;
    width:auto !important;
    padding:42px !important;
    gap:16px !important;
    opacity:0;
    transform:translateY(18px) scale(.97);
    animation:loginSmoothSuccessIn .86s cubic-bezier(.16,1,.3,1) .58s both !important;
  }

  .login-card-success-smooth .login-success-stage-smooth::before{
    content:"";
    position:absolute;
    inset:13%;
    border-radius:999px;
    background:radial-gradient(circle, rgba(37,99,235,.13), rgba(37,99,235,0) 62%);
    opacity:0;
    transform:scale(.72);
    animation:loginSmoothSuccessAura .9s ease .56s both;
    pointer-events:none;
  }

  .login-card-success-smooth .login-success-orb-focus{
    position:relative;
    z-index:1;
  }

  .login-card-success-smooth .login-success-stage h3,
  .login-card-success-smooth .login-success-stage p{
    position:relative;
    z-index:1;
  }

  @keyframes loginSmoothHeaderExit{
    0%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
    100%{opacity:0;transform:translateY(18px) scale(.985);filter:blur(4px)}
  }

  @keyframes loginSmoothFormExit{
    0%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
    100%{opacity:0;transform:translateY(34px) scale(.982);filter:blur(5px)}
  }

  @keyframes loginSmoothButtonExit{
    0%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
    100%{opacity:0;transform:translateY(24px) scale(.975);filter:blur(4px)}
  }

  @keyframes loginSmoothSecureExit{
    0%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
    100%{opacity:0;transform:translateY(26px) scale(.985);filter:blur(4px)}
  }

  @keyframes loginSmoothSuccessIn{
    0%{opacity:0;transform:translateY(24px) scale(.955);filter:blur(2px)}
    62%{opacity:1;transform:translateY(-4px) scale(1.012);filter:blur(0)}
    100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
  }

  @keyframes loginSmoothSuccessAura{
    0%{opacity:0;transform:scale(.72)}
    58%{opacity:1;transform:scale(1.08)}
    100%{opacity:.72;transform:scale(1)}
  }

  @media(max-width:920px){
    .login-card-success-smooth{
      min-height:520px;
    }
  }
}

@media (prefers-reduced-motion: reduce){
  .login-card-success-smooth .login-header-exit,
  .login-card-success-smooth .login-form-exit,
  .login-card-success-smooth .login-form-exit .login-submit-premium,
  .login-card-success-smooth .login-secure-note-exit,
  .login-card-success-smooth .login-success-stage-smooth,
  .login-card-success-smooth .login-success-stage-smooth::before{
    animation:none !important;
  }

  .login-card-success-smooth .login-header-exit,
  .login-card-success-smooth .login-form-exit,
  .login-card-success-smooth .login-secure-note-exit{
    opacity:0 !important;
  }

  .login-card-success-smooth .login-success-stage-smooth{
    opacity:1 !important;
    transform:none !important;
  }
}


/* ============================================================
   MWC 1.0.2 - Login centered fix
   Mantiene el formato premium existente; solo centra el login,
   usa el isotipo visible y corrige padding de iconos.
   ============================================================ */
@media screen {
  body.login-page-centered-only{
    min-height:100vh;
    margin:0;
    background:
      radial-gradient(circle at 50% 22%, rgba(37,99,235,.08), transparent 28%),
      radial-gradient(circle at 78% 80%, rgba(15,23,42,.05), transparent 26%),
      linear-gradient(135deg,#f8fafc 0%,#f3f6fb 48%,#ffffff 100%) !important;
    color:#0f172a;
  }

  .login-shell-centered-only{
    min-height:100vh !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    place-items:center !important;
    padding:28px 18px !important;
  }

  .login-shell-centered-only .login-card-panel{
    width:100% !important;
    min-height:auto !important;
    display:grid !important;
    grid-template-columns:minmax(0, 520px) !important;
    justify-content:center !important;
    place-items:center !important;
    padding:0 !important;
    background:transparent !important;
  }

  .login-shell-centered-only .login-card{
    width:100% !important;
    max-width:520px !important;
    box-sizing:border-box !important;
    padding:44px 48px !important;
    border-radius:32px !important;
  }

  .login-shell-centered-only .login-card-header-premium{
    display:grid !important;
    justify-items:center !important;
    text-align:center !important;
    gap:10px !important;
    margin:0 0 30px !important;
  }

  .login-shell-centered-only .login-logo-orb{
    width:78px !important;
    height:78px !important;
    border-radius:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    color:transparent !important;
  }

  .login-shell-centered-only .login-logo-orb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    filter:brightness(0) saturate(100%) invert(12%) sepia(77%) saturate(1813%) hue-rotate(210deg) brightness(86%) contrast(105%);
  }

  .login-shell-centered-only .login-input-wrap{
    position:relative !important;
    display:block !important;
  }

  .login-shell-centered-only .login-input-icon{
    position:absolute !important;
    left:17px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:20px !important;
    height:20px !important;
    color:#2563eb !important;
    pointer-events:none !important;
    z-index:2 !important;
  }

  .login-shell-centered-only .login-form-premium input{
    padding-left:54px !important;
    padding-right:16px !important;
  }

  .login-shell-centered-only .login-card-success-smooth{
    min-height:560px !important;
  }

  @media (max-width:640px){
    .login-shell-centered-only{
      padding:18px 14px !important;
    }

    .login-shell-centered-only .login-card{
      width:100% !important;
      max-width:520px !important;
      padding:34px 24px !important;
      border-radius:28px !important;
    }

    .login-shell-centered-only .login-logo-orb{
      width:68px !important;
      height:68px !important;
    }
  }
}


/* ============================================================
   MWC - Firma de desarrollo COE Software
   Únicamente en el acceso; no agrega un segundo contenedor.
   ============================================================ */
@media screen {
  .login-powered-by{
    display:grid;
    justify-items:center;
    gap:5px;
    margin-top:28px;
    padding-top:20px;
    text-align:center;
    border-top:1px solid rgba(203,213,225,.72);
  }

  .login-powered-by > span{
    color:#94a3b8;
    font-size:9px;
    font-weight:850;
    letter-spacing:.19em;
    line-height:1;
    text-transform:uppercase;
  }

  .login-powered-by > strong{
    color:#123a7a;
    font-size:18.7px;
    font-weight:850;
    letter-spacing:-.025em;
    line-height:1.1;
  }

  .login-powered-by > strong em{
    color:#2563eb;
    font-style:normal;
    font-weight:700;
  }

  @media (max-width:640px){
    .login-powered-by{
      margin-top:24px;
      padding-top:18px;
    }
  }
}


/* ============================================================
   MWC 1.0.3 - Sidebar user name width fix
   Ajuste mínimo: evita reservar doble espacio para la tuerca.
   No toca icono, tema, sidebar layout general ni lógica.
   ============================================================ */
@media screen {
  .sidebar-user-info{
    padding-right:0 !important;
    min-width:0 !important;
  }

  .sidebar-user{
    gap:8px !important;
    padding-right:30px !important;
  }

  .sidebar-user-info strong{
    max-width:100% !important;
    position:relative;
    left:0;
  }

  .sidebar-user-info > span{
    margin-left:0 !important;
  }

}

/* Menú personal compacto en el encabezado de MW Connect. */
@media screen {
  .brand{
    position:relative !important;
  }

  .brand > div:nth-child(2){
    min-width:0;
  }

  .brand > div:nth-child(2) span{
    white-space:nowrap;
  }

  .brand .header-user-menu{
    position:absolute !important;
    top:50%;
    right:-4px;
    display:block !important;
    flex:0 0 auto;
    z-index:120;
    transform:translateY(-50%);
  }

  .header-overflow-btn{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
    display:grid !important;
    place-items:center !important;
    padding:0 !important;
    border:0 !important;
    border-radius:8px !important;
    background:transparent !important;
    color:var(--mwc-ref-ink) !important;
    -webkit-text-fill-color:var(--mwc-ref-ink) !important;
    cursor:pointer;
    box-shadow:none !important;
  }

  .header-overflow-btn:hover,
  .header-overflow-btn[aria-expanded="true"]{
    background:#edf3ff !important;
    color:var(--mwc-ref-blue) !important;
    -webkit-text-fill-color:var(--mwc-ref-blue) !important;
  }

  .header-overflow-btn svg{
    width:18px;
    height:18px;
    display:block;
    fill:currentColor;
  }

  .header-user-panel{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    z-index:130;
    width:184px;
    padding:6px;
    border:1px solid #dce6f4;
    border-radius:12px;
    background:var(--mwc-color-card);
    color:var(--mwc-color-text);
    box-shadow:0 14px 32px rgba(15,23,42,.14);
  }

  .header-user-panel[hidden]{
    display:none !important;
  }

  .header-profile-link,
  .header-theme-row{
    min-height:36px;
    display:flex;
    align-items:center;
    border-radius:8px;
    color:var(--mwc-color-text) !important;
    -webkit-text-fill-color:var(--mwc-color-text) !important;
    font-size:12.5px;
    font-weight:700;
  }

  .header-profile-link{
    padding:0 9px;
    text-decoration:none;
  }

  .header-profile-link:hover{
    background:#f2f6fd;
    color:var(--mwc-ref-blue) !important;
    -webkit-text-fill-color:var(--mwc-ref-blue) !important;
  }

  .header-theme-row{
    justify-content:space-between;
    gap:10px;
    padding:0 9px;
    cursor:pointer;
  }

  .header-theme-row input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
  }

  .ios-theme-switch{
    position:relative;
    width:34px;
    height:20px;
    flex:0 0 34px;
    border-radius:999px;
    background:#cbd5e1;
    transition:background .18s ease;
  }

  .ios-theme-switch::after{
    content:"";
    position:absolute;
    top:2px;
    left:2px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 3px rgba(15,23,42,.24);
    transition:transform .18s ease;
  }

  .header-theme-row input:checked + .ios-theme-switch{
    background:var(--mwc-ref-blue);
  }

  .header-theme-row input:checked + .ios-theme-switch::after{
    transform:translateX(14px);
  }

  .header-theme-row input:focus-visible + .ios-theme-switch{
    outline:2px solid var(--mwc-ref-blue);
    outline-offset:2px;
  }

  .sidebar-user{
    padding-right:12px !important;
  }

  :root[data-theme="dark"] .header-overflow-btn{
    color:#dbeafe !important;
    -webkit-text-fill-color:#dbeafe !important;
  }

  :root[data-theme="dark"] .header-overflow-btn:hover,
  :root[data-theme="dark"] .header-overflow-btn[aria-expanded="true"],
  :root[data-theme="dark"] .header-profile-link:hover{
    background:#172554 !important;
    color:#93c5fd !important;
    -webkit-text-fill-color:#93c5fd !important;
  }

  :root[data-theme="dark"] .header-user-panel{
    background:#111827;
    border-color:#243244;
    color:#dbeafe;
  }

  :root[data-theme="dark"] .header-profile-link,
  :root[data-theme="dark"] .header-theme-row{
    color:#dbeafe !important;
    -webkit-text-fill-color:#dbeafe !important;
  }
}


/* ============================================================
   MWC 1.0.3 - Accounting dashboard stat icons only
   Ajuste mínimo: solo cambia iconos de cards de contabilidad.
   ============================================================ */
@media screen {
  .stat-liquidations{
    --stat-mask:url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%202h12v20l-3-2-3%202-3-2-3%202V2Z'/%3E%3Cpath%20d='M9%207h6'/%3E%3Cpath%20d='M9%2011h6'/%3E%3Cpath%20d='M9%2015h4'/%3E%3C/svg%3E");
  }

  .stat-commissions{
    --stat-mask:url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cellipse%20cx='12'%20cy='6'%20rx='7'%20ry='3'/%3E%3Cpath%20d='M5%206v6c0%201.7%203.1%203%207%203s7-1.3%207-3V6'/%3E%3Cpath%20d='M5%2012v6c0%201.7%203.1%203%207%203s7-1.3%207-3v-6'/%3E%3C/svg%3E");
  }

  .stat-bonus-pending{
    --stat-mask:url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2012v8a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2v-8'/%3E%3Cpath%20d='M2%207h20v5H2z'/%3E%3Cpath%20d='M12%2022V7'/%3E%3Cpath%20d='M12%207H7.5A2.5%202.5%200%201%201%2010%204.5L12%207Z'/%3E%3Cpath%20d='M12%207h4.5A2.5%202.5%200%201%200%2014%204.5L12%207Z'/%3E%3Cpath%20d='M17%2015v3l2%201'/%3E%3C/svg%3E");
  }

  .stat-bonus-paid{
    --stat-mask:url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2012v8a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2v-8'/%3E%3Cpath%20d='M2%207h20v5H2z'/%3E%3Cpath%20d='M12%2022V7'/%3E%3Cpath%20d='M12%207H7.5A2.5%202.5%200%201%201%2010%204.5L12%207Z'/%3E%3Cpath%20d='M12%207h4.5A2.5%202.5%200%201%200%2014%204.5L12%207Z'/%3E%3Cpath%20d='m8.5%2016.5%202%202%204-5'/%3E%3C/svg%3E");
  }

  .stat-bonus-cross{
    --stat-mask:url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M17%203a2.85%202.83%200%201%201%204%204L7%2021H3v-4L17%203Z'/%3E%3Cpath%20d='m15%205%204%204'/%3E%3C/svg%3E");
  }

  .stat-total-pending{
    --stat-mask:url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%207a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202v10a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V7Z'/%3E%3Cpath%20d='M16%2012h5'/%3E%3Cpath%20d='M7%209h5'/%3E%3Ccircle%20cx='17'%20cy='15'%20r='3'/%3E%3Cpath%20d='M17%2013.5V15l1%201'/%3E%3C/svg%3E");
  }

  .stat-total-paid{
    --stat-mask:url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%207a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202v10a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V7Z'/%3E%3Cpath%20d='M16%2012h5'/%3E%3Cpath%20d='M7%209h5'/%3E%3Cpath%20d='m14.5%2015.5%201.7%201.7%203.3-4.2'/%3E%3C/svg%3E");
  }
}


/* ============================================================
   MWC 1.0.3 - Quote status pills dark mode fix
   Estados con relleno en modo claro y outline limpio en modo oscuro.
   ============================================================ */
@media screen {
  .mwc-status-pill.status-closed{
    background:#dcfce7 !important;
    border-color:#86efac !important;
    color:#166534 !important;
    -webkit-text-fill-color:#166534 !important;
  }

  .mwc-status-pill.status-cancelled{
    background:#fee2e2 !important;
    border-color:#fca5a5 !important;
    color:#991b1b !important;
    -webkit-text-fill-color:#991b1b !important;
  }

  .mwc-status-pill.status-pending{
    border-color:#fdba74 !important;
  }

  :root[data-theme="dark"] .mwc-status-pill{
    background:transparent !important;
    color:#f8fafc !important;
    -webkit-text-fill-color:#f8fafc !important;
    box-shadow:none !important;
  }

  :root[data-theme="dark"] .mwc-status-pill.status-neutral,
  :root[data-theme="dark"] .mwc-status-pill.status-sent{
    border-color:#3b82f6 !important;
  }

  :root[data-theme="dark"] .mwc-status-pill.status-pending{
    border-color:#f97316 !important;
  }

  :root[data-theme="dark"] .mwc-status-pill.status-closed{
    border-color:#22c55e !important;
  }

  :root[data-theme="dark"] .mwc-status-pill.status-cancelled{
    border-color:#ef4444 !important;
  }
}


/* ============================================================
   MWC 1.0.3 - Pending status dark mode contrast fix
   Corrige Cotización pendiente: sin relleno, texto claro y borde naranja.
   ============================================================ */
@media screen {
  :root[data-theme="dark"] .mwc-status-pill.status-pending,
  :root[data-theme="dark"] .mwc-status-pill.status-pending.hot{
    background:transparent !important;
    border-color:#f97316 !important;
    color:#f8fafc !important;
    -webkit-text-fill-color:#f8fafc !important;
    box-shadow:none !important;
  }
}


/* ============================================================
   MWC 1.0.3 - Pagination range limit UI
   Mantiene 10 items por página y evita paginaciones largas.
   ============================================================ */
@media screen {
  .pagination-ellipsis{
    min-width:30px;
    height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--mwc-color-muted);
    font-weight:800;
    user-select:none;
  }

  .pagination-bar .pagination-link{
    white-space:nowrap;
  }
}


/* ============================================================
   MWC 1.0.3 - Remove pagination active dot only
   Fix limpio: solo evita que nav a.active::before afecte la paginación.
   ============================================================ */
@media screen {
  .pagination-bar .pagination-link.active::before,
  .pagination-bar .pagination-link.active::after{
    content:none !important;
    display:none !important;
  }
}


/* ============================================================
   MWC 1.0.3 - Providers section headers/icons
   Equilibra títulos de Proveedores/Aerolíneas y usa avión en aerolíneas.
   ============================================================ */
@media screen {
  .card-header h2.section-providers{
    --section-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18'/%3E%3Cpath d='M5 7v13h14V7'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M9 12h6'/%3E%3C/svg%3E");
  }

  .card-header h2.section-airlines{
    --section-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 4.5 14 11l6 1.5a1.5 1.5 0 0 1 .2 2.85L14 18l-3.5 3.5a1 1 0 0 1-1.7-.7l.7-4.8L4 13.5a1.5 1.5 0 0 1 .2-2.85L10 9l-.5-3.8a1 1 0 0 1 1-1.2Z'/%3E%3C/svg%3E");
  }
}


/* ============================================================
   MWC 1.0.3 - Airline header plane icon fix
   Reemplaza el icono anterior por una silueta de avión más clara.
   ============================================================ */
@media screen {
  .card-header h2.section-airlines{
    --section-mask:url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%20%3Cpath%20fill='black'%20d='M21.9%206.6c-.4-1-1.8-1.2-3-.5l-5.2%203-8-4.1-2.1%201.2%206.1%205.5-4.9%202.8-2.4-1.7-1.7%201%203.3%204.6%205.4-2%204.9-2.8%201.4%208.1%202.1-1.2.9-9.1%205.2-3c1.2-.7%201.6-1.8%201.2-2.8z'/%3E%20%3C/svg%3E") !important;
  }
}


/* ============================================================
   MWC 1.0.3 - Management controls consistency
   Botones de gestión compactos, outline en dark mode e iconos de papelera.
   ============================================================ */
@media screen {
  .role-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
  }

  .role-save-btn{
    min-height:28px !important;
    height:28px !important;
    padding:0 9px !important;
    border-radius:8px !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:700 !important;
  }

  .provider-list-table .quote-trash-btn,
  .trash-quotes-card .quote-trash-btn{
    min-width:32px !important;
    width:32px !important;
    height:30px !important;
    min-height:30px !important;
    padding:0 !important;
    border-radius:8px !important;
  }

  .provider-list-table .quote-trash-btn::before,
  .trash-quotes-card .quote-trash-btn::before{
    width:15px !important;
    height:15px !important;
  }

  :root[data-theme="dark"] .provider-list-table .btn,
  :root[data-theme="dark"] .provider-list-table button,
  :root[data-theme="dark"] .users-table .btn,
  :root[data-theme="dark"] .users-table .btn.primary,
  :root[data-theme="dark"] .users-table button,
  :root[data-theme="dark"] .users-table button.primary,
  :root[data-theme="dark"] .roles-list .btn,
  :root[data-theme="dark"] .roles-list .btn.primary,
  :root[data-theme="dark"] .roles-list button,
  :root[data-theme="dark"] .roles-list button.primary,
  :root[data-theme="dark"] .trash-quotes-card .btn,
  :root[data-theme="dark"] .trash-quotes-card button{
    background:transparent !important;
    color:#f8fafc !important;
    -webkit-text-fill-color:#f8fafc !important;
    border-color:#60a5fa !important;
    box-shadow:none !important;
    font-weight:700 !important;
  }

  :root[data-theme="dark"] .provider-list-table .btn:hover,
  :root[data-theme="dark"] .provider-list-table button:hover,
  :root[data-theme="dark"] .users-table .btn:hover,
  :root[data-theme="dark"] .users-table button:hover,
  :root[data-theme="dark"] .roles-list .btn:hover,
  :root[data-theme="dark"] .roles-list button:hover,
  :root[data-theme="dark"] .trash-quotes-card .btn:hover,
  :root[data-theme="dark"] .trash-quotes-card button:hover{
    background:rgba(96,165,250,.10) !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
  }

  :root[data-theme="dark"] .provider-list-table .btn.danger,
  :root[data-theme="dark"] .provider-list-table button.danger,
  :root[data-theme="dark"] .trash-quotes-card .btn.danger,
  :root[data-theme="dark"] .trash-quotes-card button.danger{
    background:transparent !important;
    border-color:#ef4444 !important;
    color:#fecaca !important;
    -webkit-text-fill-color:#fecaca !important;
  }

  :root[data-theme="dark"] .provider-list-table .btn.danger:hover,
  :root[data-theme="dark"] .provider-list-table button.danger:hover,
  :root[data-theme="dark"] .trash-quotes-card .btn.danger:hover,
  :root[data-theme="dark"] .trash-quotes-card button.danger:hover{
    background:rgba(239,68,68,.10) !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
  }

  :root[data-theme="dark"] .campaign-status-pill{
    background:transparent !important;
    border-color:#60a5fa !important;
    color:#f8fafc !important;
    -webkit-text-fill-color:#f8fafc !important;
    box-shadow:none !important;
  }

  #accounting-bonus-section .accounting-table th,
  #accounting-bonus-section .accounting-table td{
    padding-top:4px !important;
    padding-bottom:4px !important;
    line-height:1.15 !important;
  }

  #accounting-bonus-section .accounting-status-form{
    grid-template-columns:minmax(96px, 1fr) !important;
    gap:5px !important;
    min-width:118px !important;
    min-height:0 !important;
    padding:0 !important;
    height:28px !important;
    align-items:center !important;
  }

  #accounting-bonus-section .accounting-status-form select{
    height:28px !important;
    min-height:28px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    border-radius:8px !important;
    font-size:12px !important;
    line-height:1 !important;
  }

  #accounting-commission-report-section .accounting-table,
  #accounting-bonus-report-section .accounting-table{
    table-layout:fixed !important;
    width:100% !important;
    max-width:100% !important;
  }

  #accounting-commission-report-section .accounting-table{
    min-width:1240px !important;
  }

  #accounting-bonus-report-section .accounting-table{
    min-width:1160px !important;
  }

  #accounting-commission-report-section .accounting-table th,
  #accounting-commission-report-section .accounting-table td,
  #accounting-bonus-report-section .accounting-table th,
  #accounting-bonus-report-section .accounting-table td{
    padding-left:6px !important;
    padding-right:6px !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
  }

  #accounting-commission-report-section .accounting-table th:nth-child(1),
  #accounting-commission-report-section .accounting-table td:nth-child(1){
    width:7% !important;
  }

  #accounting-commission-report-section .accounting-table .commission-invoice-col{
    width:7% !important;
  }

  #accounting-commission-report-section .accounting-table .commission-date-col{
    width:9% !important;
  }

  #accounting-commission-report-section .accounting-table .commission-agency-col{
    width:18% !important;
  }

  #accounting-commission-report-section .accounting-table th:nth-child(5),
  #accounting-commission-report-section .accounting-table td:nth-child(5),
  #accounting-commission-report-section .accounting-table th:nth-child(6),
  #accounting-commission-report-section .accounting-table td:nth-child(6),
  #accounting-commission-report-section .accounting-table th:nth-child(7),
  #accounting-commission-report-section .accounting-table td:nth-child(7),
  #accounting-commission-report-section .accounting-table th:nth-child(8),
  #accounting-commission-report-section .accounting-table td:nth-child(8){
    width:7% !important;
  }

  #accounting-commission-report-section .accounting-table .commission-payment-col{
    width:140px !important;
    min-width:128px !important;
  }

  #accounting-commission-report-section .accounting-table .commission-percent-col{
    width:6% !important;
  }

  #accounting-commission-report-section .accounting-inline-form{
    min-width:0 !important;
    grid-template-columns:minmax(74px, 1fr) minmax(72px, auto) !important;
    gap:6px !important;
  }

  #accounting-commission-report-section .accounting-payment-form{
    width:100% !important;
  }

  #accounting-commission-report-section .accounting-inline-form input{
    min-height:28px !important;
    height:28px !important;
    padding:0 7px !important;
    border-radius:8px !important;
    font-size:12px !important;
  }

  #accounting-commission-report-section .accounting-inline-form .btn{
    min-height:28px !important;
    height:28px !important;
    min-width:72px !important;
    padding:0 10px !important;
    border-radius:8px !important;
    font-size:12px !important;
    white-space:nowrap !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  #accounting-bonus-report-section .accounting-table th:nth-child(1),
  #accounting-bonus-report-section .accounting-table td:nth-child(1){
    width:8% !important;
  }

  #accounting-bonus-report-section .accounting-table th:nth-child(2),
  #accounting-bonus-report-section .accounting-table td:nth-child(2){
    width:8% !important;
  }

  #accounting-bonus-report-section .accounting-table th:nth-child(3),
  #accounting-bonus-report-section .accounting-table td:nth-child(3){
    width:7% !important;
  }

  #accounting-bonus-report-section .accounting-table th:nth-child(4),
  #accounting-bonus-report-section .accounting-table td:nth-child(4){
    width:19% !important;
  }

  #accounting-bonus-report-section .accounting-table th:nth-child(5),
  #accounting-bonus-report-section .accounting-table td:nth-child(5),
  #accounting-bonus-report-section .accounting-table th:nth-child(6),
  #accounting-bonus-report-section .accounting-table td:nth-child(6),
  #accounting-bonus-report-section .accounting-table th:nth-child(7),
  #accounting-bonus-report-section .accounting-table td:nth-child(7){
    width:11% !important;
  }

  #accounting-bonus-report-section .accounting-table th:nth-child(8),
  #accounting-bonus-report-section .accounting-table td:nth-child(8){
    width:7% !important;
  }

  #accounting-bonus-report-section .accounting-table th:nth-child(9),
  #accounting-bonus-report-section .accounting-table td:nth-child(9){
    width:18% !important;
  }

  #accounting-bonus-report-section .accounting-status-form{
    min-width:0 !important;
    grid-template-columns:minmax(100px, 1fr) !important;
    gap:6px !important;
    padding:0 !important;
    height:28px !important;
  }

  #accounting-bonus-report-section .accounting-status-form select{
    min-height:28px !important;
    height:28px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    border-radius:8px !important;
    font-size:12px !important;
  }

  .accounting-bonus-summary{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  }

  :root[data-theme="dark"] #accounting-commission-report-section .accounting-total-row th,
  :root[data-theme="dark"] #accounting-commission-report-section .accounting-total-row td{
    background:transparent !important;
    color:#f8fafc !important;
    -webkit-text-fill-color:#f8fafc !important;
    border-top-color:#60a5fa !important;
    border-bottom-color:#60a5fa !important;
  }

  :root[data-theme="dark"] .accounting-bonus-summary .card::before{
    background:#172554 !important;
  }

  :root[data-theme="dark"] .accounting-bonus-summary .card::after{
    background:#93c5fd !important;
  }
}

/* MWC Settings module */
@media screen {
  .settings-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    align-items:start;
  }

  .settings-card{
    margin-bottom:0;
  }

  .settings-card > .card-header{
    min-height:38px;
    align-items:center;
  }

  .settings-card > .card-header h2{
    margin:0;
    line-height:1.2;
  }

  .settings-card > .card-header [data-toggle-role-form]{
    align-self:center;
    margin-top:2px;
  }

  .settings-create-role-form[hidden]{
    display:none !important;
  }

  .settings-create-role-form{
    margin:0 0 14px;
    padding:14px;
    border:1px solid var(--mwc-color-line-soft);
    border-radius:16px;
    background:var(--mwc-color-panel);
  }

  .settings-mail-card .card-header span{
    color:var(--mwc-color-muted);
    font-size:12px;
    font-weight:800;
  }

  .settings-fiscal-card .card-header span{
    color:var(--mwc-color-muted);
    font-size:12px;
    font-weight:800;
  }

  .settings-fiscal-layout{
    display:grid;
    grid-template-columns:240px 1fr;
    gap:16px;
    align-items:start;
  }

  .settings-fiscal-panel{
    display:grid;
    gap:12px;
    padding:14px;
    border:1px solid var(--mwc-color-line-soft);
    border-radius:16px;
    background:var(--mwc-alert-detail-bg);
  }

  .fiscal-current{
    display:grid;
    gap:3px;
  }

  .fiscal-current span,
  .fiscal-history span,
  .fiscal-history small{
    color:var(--mwc-color-muted);
    font-size:12px;
    font-weight:700;
  }

  .fiscal-current strong{
    color:var(--mwc-color-text-strong);
    font-size:30px;
    line-height:1;
    letter-spacing:-.02em;
  }

  .settings-inline-form{
    margin:0;
  }

  .settings-fiscal-form{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
    align-items:end;
  }

  .settings-fiscal-form label{
    font-size:12px;
  }

  .settings-fiscal-form input{
    min-height:34px;
    padding:8px 10px;
    border-radius:10px;
    font-size:13px;
  }

  .settings-fiscal-form .actions{
    margin-top:0;
  }

  .fiscal-history{
    display:grid;
    gap:8px;
    margin-top:14px;
  }

  .fiscal-history div{
    display:grid;
    grid-template-columns:70px minmax(0, 1fr) minmax(180px, .7fr);
    gap:10px;
    align-items:center;
    padding:8px 10px;
    border:1px solid var(--mwc-color-line-soft);
    border-radius:12px;
  }

  .fiscal-history strong{
    color:var(--mwc-color-text-strong);
  }

  .settings-mail-form label{
    font-size:12px;
  }

  .settings-mail-form .form-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }

  .settings-mail-form .form-grid label:nth-child(8),
  .settings-mail-form .form-grid label:nth-child(10){
    grid-column:span 2;
  }

  .settings-mail-form input,
  .settings-mail-form select{
    min-height:34px;
    padding:8px 10px;
    border-radius:10px;
    font-size:13px;
  }

  .settings-mail-checks{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
  }

  .settings-mail-checks .checkbox{
    width:auto;
    margin:0;
  }

  .settings-roles-list .role-save-btn,
  .settings-mail-card .compact-btn{
    min-height:30px;
    height:30px;
    padding:0 12px;
    border-radius:9px;
    font-size:12px;
    white-space:nowrap;
  }

  :root[data-theme="dark"] .settings-create-role-form{
    background:#111827;
    border-color:#243244;
  }

  :root[data-theme="dark"] .settings-fiscal-panel{
    background:#111827;
    border-color:#243244;
  }

  @media(max-width:1200px){
    .settings-mail-form .form-grid{
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .settings-fiscal-layout{
      grid-template-columns:1fr;
    }

    .settings-fiscal-form{
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }
  }

  @media(max-width:760px){
    .settings-card > .card-header{
      align-items:flex-start;
      gap:10px;
    }

    .settings-mail-form .form-grid{
      grid-template-columns:1fr;
    }

    .settings-mail-form .form-grid label:nth-child(8),
    .settings-mail-form .form-grid label:nth-child(10){
      grid-column:auto;
    }

    .settings-fiscal-form,
    .fiscal-history div{
      grid-template-columns:1fr;
    }
  }
}

/* MWC Campaign recipients */
@media screen {
  .campaign-config-card{
    margin-bottom:14px;
    padding:0 18px;
    display:flex;
    align-items:center;
    min-height:72px;
  }

  .campaign-config-grid{
    display:grid;
    grid-template-columns:1.4fr .7fr .9fr .8fr;
    gap:12px 22px;
    align-items:center;
    width:100%;
  }

  .campaign-config-grid p{
    margin:0;
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
    font-size:14px;
    line-height:1.35;
  }

  .campaign-config-grid strong{
    flex:0 0 auto;
    color:var(--mwc-grid-head);
    font-weight:800;
  }

  .campaign-config-grid span:not(.pill){
    min-width:0;
    color:var(--mwc-grid-meta);
    overflow:hidden;
    text-overflow:ellipsis;
  }

  @media(max-width:1100px){
    .campaign-config-grid{
      grid-template-columns:1fr 1fr;
    }
  }

  @media(max-width:680px){
    .campaign-config-grid{
      grid-template-columns:1fr;
    }
  }

  .campaign-recipients-table tbody tr td:last-child::after,
  .campaigns-table tbody tr td:last-child::after{
    content:none !important;
  }

  .campaign-recipients-table th:last-child,
  .campaign-recipients-table td:last-child,
  .campaigns-table th:last-child,
  .campaigns-table td:last-child{
    width:86px;
    text-align:center;
  }

  .campaign-action-cell{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
  }

  .recipient-action-cell form,
  .campaign-action-cell form{
    margin:0;
    display:flex;
    justify-content:center;
  }

  .campaign-preview-action{
    width:18px;
    height:18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--mwc-grid-link);
    -webkit-text-fill-color:var(--mwc-grid-link);
  }

  .campaign-preview-action svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .campaign-preview-action:hover{
    color:var(--mwc-grid-link-hover);
    -webkit-text-fill-color:var(--mwc-grid-link-hover);
    transform:scale(1.06);
  }

  .recipient-delete-btn,
  .plain-delete-action{
    appearance:none !important;
    width:auto !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#dc2626 !important;
    -webkit-text-fill-color:#dc2626 !important;
    background:transparent !important;
    box-shadow:none !important;
    font-size:20px !important;
    font-weight:500 !important;
    line-height:1 !important;
    cursor:pointer !important;
  }

  .recipient-delete-btn:hover,
  .plain-delete-action:hover{
    color:#991b1b !important;
    -webkit-text-fill-color:#991b1b !important;
    transform:scale(1.08);
  }

  :root[data-theme="dark"] .recipient-delete-btn,
  :root[data-theme="dark"] .plain-delete-action{
    color:#fca5a5 !important;
    -webkit-text-fill-color:#fca5a5 !important;
    background:transparent !important;
  }

  :root[data-theme="dark"] .campaign-preview-action{
    color:#93c5fd;
    -webkit-text-fill-color:#93c5fd;
  }

  :root[data-theme="dark"] .campaign-preview-action:hover{
    color:#bfdbfe;
    -webkit-text-fill-color:#bfdbfe;
  }

  :root[data-theme="dark"] .recipient-delete-btn:hover,
  :root[data-theme="dark"] .plain-delete-action:hover{
    color:#fecaca !important;
    -webkit-text-fill-color:#fecaca !important;
  }
}

/* MWC Agencies counters polish */
@media screen {
  .agency-counter-form-collapsible[hidden]{
    display:none !important;
  }

  .agency-counter-form-collapsible{
    margin:0 0 14px;
    padding:14px;
    border:1px solid var(--agency-border);
    border-radius:16px;
    background:var(--agency-section-bg);
  }

  .agency-counters-table tbody tr td:last-child::after,
  .agency-quotes-history-table tbody tr td:last-child::after{
    content:none !important;
  }

  .agency-counter-action-cell{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
  }

  .agency-counter-action-cell .btn{
    width:auto !important;
    min-width:62px !important;
    height:30px !important;
    min-height:30px !important;
    padding:0 10px !important;
    border-radius:9px !important;
    font-size:12px !important;
  }

  .agency-create-counter-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

  .agency-create-counter-head .btn{
    width:auto;
    min-height:30px;
    padding:0 12px;
    border-radius:9px;
    font-size:12px;
  }

  .agency-create-counters{
    display:grid;
    gap:10px;
  }

  .agency-create-counter-row{
    display:grid;
    grid-template-columns:1.1fr 1fr 1fr 1fr 1fr auto;
    gap:10px;
    align-items:end;
    padding:12px;
    border:1px solid var(--mwc-color-line-soft);
    border-radius:14px;
    background:var(--mwc-color-panel);
  }

  .agency-create-counter-row label{
    font-size:12px;
  }

  .agency-create-counter-remove{
    align-self:center;
    margin-top:18px;
  }

  @media(max-width:1200px){
    .agency-create-counter-row{
      grid-template-columns:1fr 1fr;
    }
  }

  @media(max-width:760px){
    .agency-create-counter-row{
      grid-template-columns:1fr;
    }
  }
}

/* MWC Autocomplete density repair */
@media screen {
  .autocomplete-wrap{
    position:relative !important;
  }

  .autocomplete-wrap input{
    height:38px !important;
    min-height:38px !important;
    padding:8px 10px !important;
    line-height:20px !important;
    font-size:13px !important;
    display:block !important;
  }

  .autocomplete-results{
    top:calc(100% + 4px) !important;
    border-radius:10px !important;
    max-height:260px !important;
  }

  .autocomplete-item{
    padding:8px 12px !important;
    gap:2px !important;
    line-height:1.25 !important;
    min-height:0 !important;
  }

  .autocomplete-item strong{
    display:block !important;
    margin:0 !important;
    font-size:13px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
    color:var(--mwc-color-title) !important;
    -webkit-text-fill-color:var(--mwc-color-title) !important;
  }

  .autocomplete-item span{
    display:block !important;
    margin:0 !important;
    font-size:11.5px !important;
    line-height:1.25 !important;
    font-weight:650 !important;
    color:var(--mwc-color-muted) !important;
    -webkit-text-fill-color:var(--mwc-color-muted) !important;
  }

  :root[data-theme="dark"] .autocomplete-item strong{
    color:#dbeafe !important;
    -webkit-text-fill-color:#dbeafe !important;
  }

  :root[data-theme="dark"] .autocomplete-item span{
    color:#cbd5e1 !important;
    -webkit-text-fill-color:#cbd5e1 !important;
  }
}

/* MWC Bitacora quote marker compact */
@media screen {
  .mw-quote-inline{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    margin-top:6px !important;
    color:var(--mwc-grid-item, var(--mwc-color-text)) !important;
    -webkit-text-fill-color:var(--mwc-grid-item, var(--mwc-color-text)) !important;
  }

  .mw-quote-inline .mw-quote-label{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 18px !important;
    width:18px !important;
    height:18px !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid rgba(59,130,246,.22) !important;
    border-radius:999px !important;
    background:rgba(20,184,166,.12) !important;
    box-shadow:none !important;
    line-height:1 !important;
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
  }

  .mw-quote-inline .mw-quote-dot{
    width:7px !important;
    height:7px !important;
    flex:0 0 7px !important;
  }

  :root[data-theme="dark"] .mw-quote-inline{
    color:var(--mwc-color-text) !important;
    -webkit-text-fill-color:var(--mwc-color-text) !important;
  }

  :root[data-theme="dark"] .mw-quote-inline .mw-quote-label{
    border-color:rgba(96,165,250,.38) !important;
    background:rgba(20,184,166,.14) !important;
  }
}

/* MWC Status text contrast repair */
@media screen {
  :root[data-theme="dark"] body .main .mwc-status-pill,
  :root[data-theme="dark"] body .main table tbody td .mwc-status-pill,
  :root[data-theme="dark"] body .main .card .mwc-status-pill{
    color:#f8fafc !important;
    -webkit-text-fill-color:#f8fafc !important;
    font-weight:650 !important;
  }
}

/* MWC Internal liquidation preview keeps document hover light */
@media screen {
  :root[data-theme="dark"] .accounting-sheet tr:hover,
  :root[data-theme="dark"] .accounting-sheet tr:hover th,
  :root[data-theme="dark"] .accounting-sheet tr:hover td,
  :root[data-theme="dark"] .accounting-sheet-table tr:hover,
  :root[data-theme="dark"] .accounting-sheet-table tr:hover th,
  :root[data-theme="dark"] .accounting-sheet-table tr:hover td{
    background:rgba(37,99,235,.035) !important;
    color:#111827 !important;
    -webkit-text-fill-color:#111827 !important;
  }

  :root[data-theme="dark"] .accounting-sheet .accounting-total-row:hover th,
  :root[data-theme="dark"] .accounting-sheet .accounting-total-row:hover td{
    background:inherit !important;
    color:#111827 !important;
    -webkit-text-fill-color:#111827 !important;
  }

  :root[data-theme="dark"] .accounting-sheet .accounting-total-costs-row:hover th,
  :root[data-theme="dark"] .accounting-sheet .accounting-total-costs-row:hover td{
    background:#fff3c4 !important;
  }

  :root[data-theme="dark"] .accounting-sheet .accounting-invoice-row:hover th,
  :root[data-theme="dark"] .accounting-sheet .accounting-invoice-row:hover td{
    background:#dff7ea !important;
  }

  :root[data-theme="dark"] .accounting-sheet .accounting-utility-row:hover th,
  :root[data-theme="dark"] .accounting-sheet .accounting-utility-row:hover td{
    background:#e8efff !important;
  }
}

/* MWC Over receipt modal close button */
@media screen {
  .over-send-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: 6px;
    vertical-align: middle;
  }

  .over-sent-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 9px;
    border: 1px solid #86efac;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    -webkit-text-fill-color: #166534;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
  }

  :root[data-theme="dark"] .over-sent-badge {
    border-color: #22c55e;
    background: rgba(34, 197, 94, .12);
    color: #bbf7d0;
    -webkit-text-fill-color: #bbf7d0;
  }

  .accounting-email-modal-header button.modal-close-btn,
  :root[data-theme="dark"] .accounting-email-modal-header button.modal-close-btn {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--mwc-color-text) !important;
    -webkit-text-fill-color: var(--mwc-color-text) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  .accounting-email-modal-header button.modal-close-btn:hover,
  :root[data-theme="dark"] .accounting-email-modal-header button.modal-close-btn:hover {
    background: var(--mwc-btn-hover-bg) !important;
  }

  .card-header a.btn.export-btn,
  .page-header a.btn.export-btn {
    color: var(--mwc-color-title) !important;
    -webkit-text-fill-color: var(--mwc-color-title) !important;
  }

  :root[data-theme="dark"] .card-header a.btn.export-btn,
  :root[data-theme="dark"] .page-header a.btn.export-btn {
    color: var(--mwc-color-text) !important;
    -webkit-text-fill-color: var(--mwc-color-text) !important;
  }

  .card-header a.btn.export-btn::after,
  .page-header a.btn.export-btn::after {
    content: none !important;
    display: none !important;
  }
}

/* MWC accounting commission tables: keep columns readable on tablet */
@media screen {
  #accounting-commission-section,
  #accounting-commission-report-section {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #accounting-commission-section .accounting-table,
  #accounting-commission-report-section .accounting-table {
    width: max-content !important;
    min-width: 1280px !important;
    max-width: none !important;
    table-layout: auto !important;
  }

  #accounting-commission-section .accounting-table th,
  #accounting-commission-section .accounting-table td,
  #accounting-commission-report-section .accounting-table th,
  #accounting-commission-report-section .accounting-table td {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #accounting-commission-section .accounting-table .commission-agency-col,
  #accounting-commission-report-section .accounting-table .commission-agency-col {
    min-width: 185px !important;
    max-width: 220px !important;
    white-space: normal !important;
  }

  #accounting-commission-section .accounting-table .commission-payment-col,
  #accounting-commission-report-section .accounting-table .commission-payment-col {
    min-width: 150px !important;
  }
}

/* MWC hardening - settings health panel */
.settings-health-card{
  grid-column:1/-1;
}
.system-health-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:10px;
}
.system-health-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 10px;
  align-items:center;
  border:1px solid var(--mwc-color-line-soft);
  background:var(--mwc-alert-detail-bg);
  border-radius:12px;
  padding:10px 12px;
}
.system-health-item strong{
  color:var(--mwc-color-text);
  font-size:13px;
}
.system-health-item span{
  grid-column:1/-1;
  color:var(--mwc-color-muted);
  font-size:12px;
}
.system-health-item em{
  grid-column:2;
  grid-row:1;
  font-style:normal;
  font-weight:800;
  font-size:11px;
  color:var(--mwc-color-blue);
}
.system-health-item.warning em{
  color:var(--mwc-color-danger);
}

/* MWC service payment tracking */
.service-payment-summary-card .card-header .actions{
  gap:14px;
  color:var(--mwc-color-muted);
  -webkit-text-fill-color:var(--mwc-color-muted);
}
.pill.status-closed{
  background:#dcfce7 !important;
  border-color:#86efac !important;
  color:#166534 !important;
  -webkit-text-fill-color:#166534 !important;
}
.pill.status-sent{
  background:#ffedd5 !important;
  border-color:#fdba74 !important;
  color:#9a3412 !important;
  -webkit-text-fill-color:#9a3412 !important;
}
.pill.status-pending{
  background:#fef3c7 !important;
  border-color:#facc15 !important;
  color:#92400e !important;
  -webkit-text-fill-color:#92400e !important;
}
:root[data-theme="dark"] .pill.status-closed{
  background:rgba(34,197,94,.12) !important;
  border-color:#22c55e !important;
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
}
:root[data-theme="dark"] .pill.status-sent{
  background:rgba(249,115,22,.12) !important;
  border-color:#f97316 !important;
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
}
:root[data-theme="dark"] .pill.status-pending{
  background:rgba(234,179,8,.12) !important;
  border-color:#eab308 !important;
  color:#f8fafc !important;
  -webkit-text-fill-color:#f8fafc !important;
}
.service-payment-actions{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.service-payment-status-link{
  font:inherit;
  cursor:pointer;
}
.service-payment-status-link:hover{
  text-decoration:underline;
  filter:brightness(.96);
}
.service-payment-history-btn{
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  min-height:38px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:11px !important;
  color:var(--mwc-color-blue) !important;
  -webkit-text-fill-color:var(--mwc-color-blue) !important;
}
.service-payment-history-btn svg{
  width:17px;
  height:17px;
}
.service-payment-add-btn{
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  min-height:38px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:11px !important;
}
.service-payment-add-btn svg{
  width:18px;
  height:18px;
}
.service-payment-history-modal{
  width:min(760px, calc(100vw - 36px)) !important;
  max-width:760px !important;
  overflow:hidden;
}
.service-payment-history-modal .accounting-email-modal-header{
  align-items:flex-start;
  margin-bottom:4px;
}
.service-payment-history-wrap{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.service-payment-history{
  min-width:680px;
  width:100%;
  margin:0;
}
.service-payment-history th,
.service-payment-history td,
.service-payments-table th,
.service-payments-table td{
  white-space:nowrap;
}
@media screen and (min-width:701px){
  /* Pagos: mantener todos los datos a la vista y reservar Agencia solo lo necesario. */
  .service-payments-table{
    width:100% !important;
    min-width:0 !important;
    table-layout:fixed !important;
  }
  .service-payments-table th,
  .service-payments-table td{
    padding-left:7px !important;
    padding-right:7px !important;
  }
  .service-payments-table th:nth-child(1), .service-payments-table td:nth-child(1){width:8% !important}
  .service-payments-table th:nth-child(2), .service-payments-table td:nth-child(2){width:31% !important}
  .service-payments-table th:nth-child(3), .service-payments-table td:nth-child(3){width:12% !important}
  .service-payments-table th:nth-child(4), .service-payments-table td:nth-child(4){width:6% !important}
  .service-payments-table th:nth-child(5), .service-payments-table td:nth-child(5),
  .service-payments-table th:nth-child(6), .service-payments-table td:nth-child(6),
  .service-payments-table th:nth-child(7), .service-payments-table td:nth-child(7){width:7% !important}
  .service-payments-table th:nth-child(8), .service-payments-table td:nth-child(8){width:4% !important;text-align:center}
  .service-payments-table th:nth-child(9), .service-payments-table td:nth-child(9){width:9% !important}
  .service-payments-table th:nth-child(10), .service-payments-table td:nth-child(10){width:9% !important}
  .service-payments-table .service-payment-agency > span{
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

/* Liquidación interna: jerarquía de encabezados con alto contraste. */
.accounting-sheet h3,
.accounting-sheet .accounting-footer-grid span{
  background:#111111 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* El PDF usa reglas de impresión propias; se fuerza el mismo contraste del preview. */
@media print{
  .accounting-sheet h3,
  .accounting-sheet .accounting-footer-grid span{
    background:#111111 !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    print-color-adjust:exact !important;
    -webkit-print-color-adjust:exact !important;
  }
}

.service-payment-modal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.receipt-file-control{
  display:flex;
  align-items:center;
  gap:8px;
}
.receipt-file-control input[type="file"]{
  flex:1 1 auto;
  width:100%;
  min-width:0;
}
.receipt-clipboard-btn{
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  padding:0 !important;
  display:inline-grid !important;
  place-items:center;
}
.receipt-clipboard-btn svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.service-payments-search{
  align-items:stretch;
}
.service-payments-search select{
  max-width:220px;
}
.service-payments-card .service-table-wrap{
  overflow-x:auto;
}

/* Auditoría y control */
.audit-kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
  gap:12px;
  margin:20px 0;
}
.audit-kpi{
  min-height:86px;
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.audit-kpi span,
.audit-insight-card .card-header > span{
  color:var(--mwc-color-muted);
  font-size:13px;
  font-weight:700;
}
.audit-kpi strong{
  margin-top:7px;
  color:var(--mwc-color-ink);
  font-size:26px;
  line-height:1;
}
.audit-kpi small{
  margin-top:6px;
  color:var(--mwc-color-muted);
  font-size:11px;
  font-weight:800;
}
.audit-insights-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:16px;
  margin-bottom:20px;
}
.audit-insight-card{padding:22px 24px;}
.audit-insight-card .card-header{margin-bottom:20px;}
.audit-insight-card .card-header h2,.audit-events-header h2{margin:0;}
.audit-funnel{display:grid;gap:9px;}
.audit-funnel-row{
  width:var(--funnel-width);
  min-width:175px;
  min-height:40px;
  margin-inline:auto;
  padding:0 13px;
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:10px;
  border-radius:8px;
  color:#fff;
  transition:width .2s ease;
}
.audit-funnel-row strong{font-size:16px;}
.audit-funnel-row span,
.audit-funnel-row strong,
.audit-funnel-row em{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.audit-funnel-row em{font-size:12px;font-style:normal;opacity:.9;}
.audit-funnel-requested{background:#0f3e93;}
.audit-funnel-sent{background:#1765d6;}
.audit-funnel-closed{background:#4d91ec;}
.audit-funnel-cancelled{background:#9ec5f7;}
.audit-bars{
  height:178px;
  padding:0 12px 0 18px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:end;
  justify-content:space-around;
  gap:18px;
}
.audit-bar-group{height:100%;min-width:78px;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:5px;}
.audit-bar-group strong{font-size:12px;color:var(--mwc-color-muted);white-space:nowrap;}
.audit-bar-group small{color:var(--mwc-color-muted);font-size:10px;line-height:1.25;text-align:center;white-space:nowrap;}
.audit-bars-columns{height:118px;display:flex;align-items:end;gap:7px;}
.audit-bar{display:block;width:20px;min-height:5px;border-radius:5px 5px 0 0;}
.audit-bar-collected{background:#102a62 !important;box-shadow:0 0 0 1px rgba(16,42,98,.12);}
.audit-bar-pending{background:#70aaf4;}
.audit-chart-legend{display:flex;justify-content:center;gap:20px;margin-top:14px;color:var(--mwc-color-muted);font-size:12px;font-weight:700;}
.audit-chart-legend span{display:inline-flex;align-items:center;gap:6px;}
.audit-chart-legend i{width:10px;height:10px;border-radius:50%;background:var(--mwc-color-ink);}
.audit-chart-legend .audit-legend-collected{background:#102a62;}
.audit-chart-legend .audit-legend-pending{background:#70aaf4;}
.audit-events-card{padding-top:18px;}
.audit-events-header{align-items:end;gap:16px;}
.audit-period-form label{display:grid;gap:4px;color:var(--mwc-color-muted);font-size:11px;font-weight:800;}
.audit-period-form input{width:150px;min-height:34px;padding:6px 9px;font:inherit;font-size:13px;}
.audit-events-card .agency-active-filters{margin:0 0 12px;}
@media (max-width:1050px){
  .audit-insights-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .audit-kpis{grid-template-columns:1fr;gap:10px;}
  .audit-kpi{min-height:88px;padding:18px;}
  .audit-kpi strong{font-size:28px;}
  .audit-insight-card{padding:18px;}
  .audit-period-form{width:100%;}
  .audit-period-form label{width:100%;}
  .audit-period-form input{width:100%;}
}
@media (max-width:760px){
  .service-payment-modal-grid{
    grid-template-columns:1fr;
  }
  .service-payments-search{
    flex-direction:column;
  }
  .service-payments-search select{
    max-width:none;
  }
}


/* MWC - Nueva cotización / modal de nuevo contacto */
.quote-contact-modal{
  width:min(460px,100%);
  max-width:460px;
}
.quote-contact-modal > .actions{
  margin-top:12px;
}
.quote-contact-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 28px;
  width:28px;
  height:28px;
  min-width:28px;
  min-height:28px;
  padding:0;
  border-radius:9px;
  font-size:18px;
  font-weight:500;
  line-height:1;
}
.quote-contact-close:hover{
  background:#eef2f7;
}

/* Envío de cotización: el grid no debe sobrescribir el atributo hidden. */
#email_send_fields[hidden]{
  display:none !important;
}


/* ============================================================
   MWC - Liquidación interna: conservar colores al exportar PDF
   Scope exclusivo: .accounting-sheet / impresión.
   ============================================================ */
@media print {
  .accounting-sheet,
  .accounting-sheet * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Los títulos de sección y rótulos finales deben conservar el contraste del preview. */
  .accounting-sheet h3,
  .accounting-sheet .accounting-footer-grid span {
    background-color: #111111 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  .accounting-sheet .accounting-info-grid span,
  .accounting-sheet .accounting-sheet-table th {
    background: #f3f4f6 !important;
  }

  /* Totales con los mismos colores del preview */
  .accounting-sheet .accounting-total-row th,
  .accounting-sheet .accounting-total-row td,
  .accounting-sheet .accounting-total-costs-row th,
  .accounting-sheet .accounting-total-costs-row td {
    background: #fff3c4 !important;
  }

  .accounting-sheet .accounting-invoice-row th,
  .accounting-sheet .accounting-invoice-row td {
    background: #dff7ea !important;
  }

  .accounting-sheet .accounting-utility-row th,
  .accounting-sheet .accounting-utility-row td {
    background: #e8efff !important;
  }
}


/* ============================================================
   MW Connect - Sistema global de alertas / confirmaciones
   ============================================================ */
.mwc-dialog-backdrop{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.mwc-dialog-backdrop[hidden]{
  display:none !important;
}
body.mwc-dialog-open{
  overflow:hidden;
}
.mwc-dialog{
  width:min(100%,460px);
  border:1px solid var(--mwc-card-border);
  border-radius:24px;
  padding:22px;
  background:var(--mwc-card-bg);
  color:var(--mwc-text-primary);
  box-shadow:0 28px 80px rgba(15,23,42,.22);
}
.mwc-dialog-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.mwc-dialog-eyebrow{
  display:block;
  margin-bottom:5px;
  color:var(--mwc-label-help);
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
}
.mwc-dialog-header h2{
  margin:0;
  color:var(--mwc-text-primary);
  font-size:22px;
  line-height:1.15;
}
.mwc-dialog-message{
  margin:18px 0 22px;
  color:var(--mwc-text-secondary);
  font-size:15px;
  line-height:1.55;
  white-space:pre-line;
}
.mwc-dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.mwc-dialog-actions .btn{
  min-width:96px;
  justify-content:center;
}
.mwc-dialog-actions .btn.danger{
  border-color:#dc2626;
  background:#dc2626;
  color:#fff;
}
.mwc-dialog-actions .btn.danger:hover{
  background:#b91c1c;
  border-color:#b91c1c;
}
.mwc-dialog-x{
  flex:0 0 30px !important;
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  min-height:30px !important;
  padding:0 !important;
  border-radius:9px !important;
  font-size:18px !important;
  line-height:1 !important;
}
@media (max-width:560px){
  .mwc-dialog-backdrop{
    padding:16px;
  }
  .mwc-dialog{
    padding:20px;
    border-radius:20px;
  }
  .mwc-dialog-actions{
    flex-direction:column-reverse;
  }
  .mwc-dialog-actions .btn{
    width:100%;
  }
}


/* ============================================================
   MWC - FIX ACUMULATIVO
   Modal global centrado + fondo sólido + indicador rojo.
   ============================================================ */

/* El backdrop SIEMPRE ocupa toda la ventana y centra el modal */
.mwc-dialog-backdrop{
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(15, 23, 42, .50) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
}

.mwc-dialog-backdrop[hidden]{
  display: none !important;
}

body.mwc-dialog-open{
  overflow: hidden !important;
}

/* Tarjeta visible del diálogo */
.mwc-dialog{
  position: relative !important;
  width: min(100%, 460px) !important;
  max-width: 460px !important;
  margin: 0 !important;
  padding: 22px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow:
    0 30px 80px rgba(15, 23, 42, .24),
    0 8px 24px rgba(15, 23, 42, .10) !important;
}

.mwc-dialog-header h2{
  color: #0f172a !important;
}

.mwc-dialog-eyebrow{
  color: #64748b !important;
}

.mwc-dialog-message{
  color: #475569 !important;
}

.mwc-dialog-x{
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

.mwc-dialog-x:hover{
  background: #f1f5f9 !important;
}

/* Tema oscuro */
html[data-theme="dark"] .mwc-dialog,
body[data-theme="dark"] .mwc-dialog,
.theme-dark .mwc-dialog{
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .mwc-dialog-header h2,
body[data-theme="dark"] .mwc-dialog-header h2,
.theme-dark .mwc-dialog-header h2{
  color: #f8fafc !important;
}

html[data-theme="dark"] .mwc-dialog-eyebrow,
body[data-theme="dark"] .mwc-dialog-eyebrow,
.theme-dark .mwc-dialog-eyebrow{
  color: #94a3b8 !important;
}

html[data-theme="dark"] .mwc-dialog-message,
body[data-theme="dark"] .mwc-dialog-message,
.theme-dark .mwc-dialog-message{
  color: #cbd5e1 !important;
}

/* Indicador de liquidación pendiente */
.quote-liquidation-pending-mark{
  display: inline-block !important;
  margin-left: 7px !important;
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* Lista compacta de cotizaciones: prioriza la agencia sin ocultar responsables. */
@media screen {
  .quotes-table .agency-cell{
    min-width:220px !important;
    max-width:360px !important;
  }

  .quotes-table th:nth-child(1),
  .quotes-table td:nth-child(1){
    width:96px !important;
    min-width:96px !important;
  }

  .quotes-table th:nth-child(3),
  .quotes-table td:nth-child(3){
    width:165px !important;
    min-width:140px !important;
    max-width:165px !important;
  }

  .quotes-table .quote-detail-cell{
    width:260px !important;
    max-width:260px !important;
  }

  .quotes-table .quote-responsible-cell{
    min-width:154px !important;
    max-width:190px !important;
    color:var(--mwc-grid-item, var(--mwc-color-text));
    line-height:1.28;
  }

  .quotes-table .quote-responsible-cell span{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .quotes-table .quote-responsible-cell b{
    color:var(--mwc-color-muted);
    font-size:10px;
    font-weight:800;
    letter-spacing:.02em;
  }

  .quotes-table .quote-send-btn{
    width:34px;
    min-width:34px;
    height:34px;
    min-height:34px;
    display:grid;
    place-items:center;
    justify-content:center;
    align-items:center;
    box-sizing:border-box;
    padding:0 !important;
    line-height:0;
    border:1px solid var(--mwc-btn-border);
    border-radius:8px;
    background:var(--mwc-btn-bg);
    color:var(--mwc-btn-text) !important;
    -webkit-text-fill-color:var(--mwc-btn-text) !important;
  }

  .quotes-table .quote-send-btn:hover{
    border-color:var(--mwc-color-link);
    background:var(--mwc-btn-hover-bg);
    color:var(--mwc-color-link) !important;
    -webkit-text-fill-color:var(--mwc-color-link) !important;
  }

  .quotes-table .quote-send-btn svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .quotes-table .quote-delete-inline .quote-trash-btn{
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
    min-height:34px !important;
    box-sizing:border-box;
  }

  .quotes-table .action-cell{
    width:74px !important;
    min-width:74px !important;
  }

  .visits-table .mw-quote-link{
    text-decoration:none !important;
    cursor:pointer;
  }

  .visits-table .mw-quote-link:hover > span:last-child{
    color:var(--mwc-color-link) !important;
    -webkit-text-fill-color:var(--mwc-color-link) !important;
  }

  .service-commission-mode .service-include-agency-commission{
    width:max-content !important;
    margin-top:8px !important;
    margin-bottom:0 !important;
  }

  .quote-sort-filter{
    flex:0 0 auto;
  }

  .quote-list-display-control{
    display:flex;
    align-items:center;
    gap:8px;
    margin:10px 0 7px;
    color:var(--mwc-color-muted);
    font-size:12.5px;
    font-weight:700;
  }

  .quote-sort-filter .th-filter-btn{
    min-height:34px;
    padding:0 11px;
    border:1px solid var(--mwc-btn-border);
    border-radius:9px;
    background:var(--mwc-btn-bg);
    color:var(--mwc-color-muted);
    font-size:12.5px;
    font-weight:750;
    line-height:1;
  }

  .quote-sort-filter .th-filter-btn:hover{
    border-color:var(--mwc-color-link);
    background:var(--mwc-btn-hover-bg);
  }

  .quote-month-picker .accounting-month-panel{
    width:202px !important;
  }

  .quote-month-clear{
    width:100%;
    min-height:28px;
    margin-top:8px;
    padding:4px 7px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--mwc-color-muted);
    font-size:11px;
    font-weight:700;
    cursor:pointer;
  }

  .quote-month-clear:hover{
    background:var(--mwc-btn-hover-bg);
    color:var(--mwc-color-link);
  }

  /* Cierre discreto para la alerta flotante de cumpleaños. */
  .birthday-today-floating .floating-close-btn{
    flex:0 0 32px !important;
    width:32px !important;
    min-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:8px !important;
    background:transparent !important;
    color:var(--mwc-color-title) !important;
    -webkit-text-fill-color:var(--mwc-color-title) !important;
    font-size:24px !important;
    font-weight:600 !important;
    line-height:1 !important;
    display:grid !important;
    place-items:center !important;
    align-self:center !important;
  }

  .birthday-today-floating .floating-close-btn:hover{
    background:rgba(15,23,42,.07) !important;
  }
}

/* Dashboard operativo: cabecera y alertas con densidad útil. */
.dashboard-hero-compact{
  min-height:0;
  margin-bottom:12px;
  padding:18px 24px;
  border-radius:20px;
}

.dashboard-hero-compact h1{
  margin-bottom:3px;
  font-size:28px;
}

.dashboard-hero-compact p{
  line-height:1.3;
}

.dashboard-hero-compact .actions{
  gap:8px;
}

.dashboard-hero-compact .dashboard-top-alerts{
  display:grid;
  grid-template-columns:repeat(2, 180px);
  gap:8px;
  align-items:start;
  line-height:0;
}

.dashboard-hero-compact .dashboard-top-alerts.is-single > .dashboard-top-alert{
  grid-column:2;
}

.dashboard-hero-compact .dashboard-top-alerts > .dashboard-top-alert{
  align-self:start !important;
  margin:0 !important;
  vertical-align:top;
}

.dashboard-alert{
  margin-bottom:8px !important;
  border-radius:12px !important;
}

.dashboard-alert .birthday-alert-main{
  min-height:52px !important;
  padding:8px 18px 8px 64px !important;
}

.dashboard-alert .birthday-alert-main::before{
  left:14px !important;
  width:36px !important;
  height:36px !important;
}

.dashboard-alert .birthday-alert-bar .birthday-alert-main::after,
.dashboard-alert.birthday-alert-bar .birthday-alert-main::after{
  left:23px !important;
  width:18px !important;
  height:18px !important;
}

.dashboard-alert.ops-alert-bar .birthday-alert-main::after{
  left:23px !important;
  width:18px !important;
  height:18px !important;
}

.dashboard-alert .birthday-alert-main strong{
  font-size:12.5px !important;
}

.dashboard-alert .birthday-alert-main span{
  font-size:11.5px !important;
}

.dashboard-alert .birthday-alert-main .btn{
  min-height:32px !important;
  padding:6px 11px !important;
  font-size:12px !important;
}

.dashboard-hero-compact .dashboard-top-alert{
  box-sizing:border-box;
  width:100% !important;
  height:46px !important;
  min-height:46px !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:6px 9px;
  border:1px solid var(--mwc-color-line-soft);
  border-radius:12px;
  background:#fff !important;
  color:var(--mwc-color-title);
  font-family:inherit !important;
  font-size:12px !important;
  font-weight:700;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-decoration:none;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}

.dashboard-hero-compact .dashboard-top-alert > span:last-child{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font:inherit !important;
  font-size:12px !important;
  line-height:1 !important;
  white-space:nowrap;
}

.dashboard-hero-compact .dashboard-top-alert:hover,
.dashboard-hero-compact .dashboard-top-alert:focus-visible{
  border-color:var(--mwc-color-link) !important;
  background:#f5f8ff !important;
}

.dashboard-hero-compact .dashboard-top-alert-icon{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:9px;
}

.dashboard-hero-compact .dashboard-top-alert-icon svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.dashboard-hero-compact .dashboard-top-birthday .dashboard-top-alert-icon{
  background:#eaf1ff;
  color:#0b63ff;
}

.dashboard-hero-compact .dashboard-top-pending .dashboard-top-alert-icon{
  background:#fff0df;
  color:#d85b05;
}

.dashboard-hero-compact .dashboard-top-alert strong{
  display:inline-grid;
  min-width:18px;
  height:18px;
  margin:0;
  place-items:center;
  border-radius:999px;
  background:#e8f0ff;
  color:#1259dc !important;
  -webkit-text-fill-color:#1259dc !important;
  font-family:inherit !important;
  font-size:10px !important;
  font-weight:700;
  line-height:1 !important;
}

.dashboard-hero-compact .dashboard-top-pending strong{
  background:#fff0df;
  color:#c6530a !important;
  -webkit-text-fill-color:#c6530a !important;
}

.dashboard-birthday-detail{
  display:none;
  margin:0 0 10px;
  padding:10px 12px !important;
  border:1px solid var(--mwc-birthday-border);
  border-radius:12px;
  background:var(--mwc-alert-detail-bg);
}

.dashboard-birthday-detail.open{
  display:block;
}

/* Dashboard operativo: cartera y gestión personal. */
.operative-financial-panel{
  margin:0 0 16px;
  padding:18px 20px;
  border:1px solid var(--mwc-color-line-soft);
  border-radius:18px;
  background:var(--mwc-color-card);
  box-shadow:var(--mwc-soft-shadow);
}

.operative-financial-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.operative-financial-heading .eyebrow{
  margin:0 0 2px;
  font-size:10px;
}

.operative-financial-heading h2{
  margin:0;
  font-size:19px;
}

.operative-financial-heading a{
  font-size:13px;
}

.operative-financial-donuts{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}

.operative-donut-card{
  display:grid;
  justify-items:center;
  min-width:0;
  padding:10px 8px 8px;
  border:1px solid #edf1f6;
  border-radius:14px;
  background:#fbfcfe;
  text-align:center;
}

.operative-donut{
  --donut-color:#2563eb;
  position:relative;
  display:grid;
  width:92px;
  height:92px;
  place-items:center;
  border-radius:50%;
  background:conic-gradient(var(--donut-color) calc(var(--donut-progress) * 1%), #e9eef5 0);
}

.operative-donut::before{
  content:"";
  position:absolute;
  inset:9px;
  border-radius:50%;
  background:#fbfcfe;
}

.operative-donut > div{
  position:relative;
  z-index:1;
  display:grid;
  gap:2px;
  max-width:72px;
}

.operative-donut strong{
  overflow:hidden;
  color:var(--mwc-color-title);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  line-height:1.05;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.operative-donut span{
  color:var(--mwc-color-muted);
  font-size:10px;
  font-weight:700;
}

.donut-cartera{--donut-color:#315fe8}
.donut-cobrado{--donut-color:#16a66a}
.donut-pendiente{--donut-color:#f08a24}
.donut-comision{--donut-color:#8b5cf6}

/* Reporte interno: la factura se ajusta en línea sin ensanchar la grilla. */
.accounting-invoice-inline-cell{
  min-width:92px;
  white-space:nowrap;
}

.accounting-invoice-inline-form{
  margin:0;
}

.accounting-invoice-inline-form input{
  width:88px;
  min-width:0;
  min-height:30px;
  padding:5px 7px;
  border:1px solid var(--mwc-color-border, #d8e2f2);
  border-radius:8px;
  background:#fff;
  color:var(--mwc-color-title);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}

.accounting-invoice-inline-form input:focus{
  border-color:var(--mwc-color-primary, #1769ff);
  outline:2px solid color-mix(in srgb, var(--mwc-color-primary, #1769ff) 18%, transparent);
}

.operative-donut-card h3{
  margin:9px 0 2px;
  color:var(--mwc-color-title);
  font-size:13px;
}

.operative-donut-card p{
  overflow:hidden;
  width:100%;
  margin:0;
  color:var(--mwc-color-muted);
  font-size:10.5px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Comisiones MW: columnas compactas; el espacio libre queda al final de la grilla. */
@media screen{
  #accounting-commission-section .accounting-table{
    width:max-content !important;
    min-width:1280px !important;
    table-layout:auto !important;
  }

  #accounting-commission-section .accounting-table th,
  #accounting-commission-section .accounting-table td{
    padding-left:6px !important;
    padding-right:6px !important;
  }

  #accounting-commission-section .accounting-table .commission-invoice-col{
    width:152px !important;
    min-width:152px !important;
    max-width:152px !important;
    overflow:hidden;
    font-size:13px;
    font-variant-numeric:tabular-nums;
    text-overflow:ellipsis;
    white-space:nowrap !important;
  }

  #accounting-commission-section .accounting-table .commission-date-col{
    width:100px !important;
    min-width:100px !important;
    max-width:100px !important;
    font-variant-numeric:tabular-nums;
  }

  #accounting-commission-section .accounting-table .commission-agency-col{
    width:300px !important;
    min-width:240px !important;
    max-width:320px !important;
  }

  #accounting-commission-section .accounting-table th:nth-child(5),
  #accounting-commission-section .accounting-table td:nth-child(5){
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;
    text-align:center;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #accounting-commission-section .accounting-table th:nth-child(6),
  #accounting-commission-section .accounting-table td:nth-child(6),
  #accounting-commission-section .accounting-table th:nth-child(7),
  #accounting-commission-section .accounting-table td:nth-child(7),
  #accounting-commission-section .accounting-table th:nth-child(8),
  #accounting-commission-section .accounting-table td:nth-child(8),
  #accounting-commission-section .accounting-table th:nth-child(9),
  #accounting-commission-section .accounting-table td:nth-child(9){
    width:86px !important;
    min-width:86px !important;
    font-variant-numeric:tabular-nums;
  }

  #accounting-commission-section .accounting-table .commission-payment-col{
    width:120px !important;
    min-width:120px !important;
  }

  #accounting-commission-section .accounting-table .commission-percent-col{
    width:38px !important;
    min-width:38px !important;
  }

  #accounting-commission-section .accounting-table th:nth-child(12),
  #accounting-commission-section .accounting-table td:nth-child(12){
    width:88px !important;
    min-width:88px !important;
  }
}

/* Comisiones MW: una sola escala visual, sin expansión horizontal. */
@media screen and (min-width:701px){
  #accounting-commission-section .accounting-table{
    width:100% !important;
    min-width:0 !important;
    table-layout:fixed !important;
  }
  #accounting-commission-section .accounting-table th,
  #accounting-commission-section .accounting-table td{
    padding:6px 5px !important;
  }
  #accounting-commission-section .accounting-table th:nth-child(1), #accounting-commission-section .accounting-table td:nth-child(1){width:7% !important;min-width:0 !important;max-width:none !important}
  #accounting-commission-section .accounting-table th:nth-child(2), #accounting-commission-section .accounting-table td:nth-child(2){width:12% !important;min-width:0 !important;max-width:none !important}
  #accounting-commission-section .accounting-table th:nth-child(3), #accounting-commission-section .accounting-table td:nth-child(3){width:7% !important;min-width:0 !important;max-width:none !important}
  #accounting-commission-section .accounting-table th:nth-child(4), #accounting-commission-section .accounting-table td:nth-child(4){width:17% !important;min-width:0 !important;max-width:none !important}
  #accounting-commission-section .accounting-table th:nth-child(5), #accounting-commission-section .accounting-table td:nth-child(5){width:4% !important;min-width:0 !important;max-width:none !important}
  #accounting-commission-section .accounting-table th:nth-child(6), #accounting-commission-section .accounting-table td:nth-child(6),
  #accounting-commission-section .accounting-table th:nth-child(7), #accounting-commission-section .accounting-table td:nth-child(7){width:8% !important;min-width:0 !important;max-width:none !important}
  #accounting-commission-section .accounting-table th:nth-child(8), #accounting-commission-section .accounting-table td:nth-child(8){width:7% !important;min-width:0 !important;max-width:none !important}
  #accounting-commission-section .accounting-table th:nth-child(9), #accounting-commission-section .accounting-table td:nth-child(9){width:8% !important;min-width:0 !important;max-width:none !important}
  #accounting-commission-section .accounting-table th:nth-child(10), #accounting-commission-section .accounting-table td:nth-child(10){width:9% !important;min-width:0 !important;max-width:none !important}
  #accounting-commission-section .accounting-table th:nth-child(11), #accounting-commission-section .accounting-table td:nth-child(11){width:4% !important;min-width:0 !important;max-width:none !important}
  #accounting-commission-section .accounting-table th:nth-child(12), #accounting-commission-section .accounting-table td:nth-child(12){width:9% !important;min-width:0 !important;max-width:none !important}
  #accounting-commission-section .accounting-table th:nth-child(11):last-child, #accounting-commission-section .accounting-table td:nth-child(11):last-child{width:13% !important}
  #accounting-commission-section .commission-agency-col{overflow:hidden}
  #accounting-commission-section .commission-agency-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* Over agencia: columnas compactas; el espacio libre queda al final, no entre datos. */
@media screen{
  #accounting-bonus-section .accounting-table{
    width:max-content !important;
    min-width:1180px !important;
    table-layout:auto !important;
  }

  #accounting-bonus-section .accounting-table th,
  #accounting-bonus-section .accounting-table td{
    padding-left:6px !important;
    padding-right:6px !important;
  }

  #accounting-bonus-section .accounting-table .bonus-date-col{
    width:96px !important;
    min-width:96px !important;
    max-width:96px !important;
    font-variant-numeric:tabular-nums;
  }

  #accounting-bonus-section .accounting-table .bonus-code-col{
    width:96px !important;
    min-width:96px !important;
    max-width:96px !important;
  }

  #accounting-bonus-section .accounting-table .bonus-invoice-col{
    width:150px !important;
    min-width:150px !important;
    max-width:150px !important;
    overflow:hidden;
    font-size:13px;
    font-variant-numeric:tabular-nums;
    text-overflow:ellipsis;
    white-space:nowrap !important;
  }

  #accounting-bonus-section .accounting-table .bonus-agency-col{
    width:320px !important;
    min-width:260px !important;
    max-width:340px !important;
  }

  #accounting-bonus-section .accounting-table th:nth-child(5),
  #accounting-bonus-section .accounting-table td:nth-child(5){
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;
    text-align:center;
  }

  #accounting-bonus-section .accounting-table th:nth-child(6),
  #accounting-bonus-section .accounting-table td:nth-child(6){
    width:128px !important;
    min-width:118px !important;
  }

  #accounting-bonus-section .accounting-table th:nth-child(7),
  #accounting-bonus-section .accounting-table td:nth-child(7){
    width:144px !important;
    min-width:128px !important;
  }

  #accounting-bonus-section .accounting-table th:nth-child(8),
  #accounting-bonus-section .accounting-table td:nth-child(8){
    width:92px !important;
    min-width:92px !important;
    font-variant-numeric:tabular-nums;
  }

  #accounting-bonus-section .accounting-table th:nth-child(9),
  #accounting-bonus-section .accounting-table td:nth-child(9){
    width:142px !important;
    min-width:132px !important;
  }
}

/* Liquidaciones internas: columnas compactas, sin estirar ni superponer factura. */
@media screen{
  #accounting-internal-section .accounting-table{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    table-layout:fixed !important;
  }

  #accounting-internal-section .accounting-table th,
  #accounting-internal-section .accounting-table td{
    padding:4px 6px !important;
  }

  /* La paginación conserva la misma altura aunque cambien agencia o programa. */
  #accounting-internal-section .accounting-table tbody tr,
  #accounting-internal-section .accounting-table tbody td{
    height:58px;
    vertical-align:middle;
  }

  #accounting-internal-section .accounting-table th:nth-child(1),
  #accounting-internal-section .accounting-table td:nth-child(1){width:7% !important;min-width:0 !important;max-width:none !important}
  #accounting-internal-section .accounting-table th:nth-child(2),
  #accounting-internal-section .accounting-table td:nth-child(2){width:10% !important;min-width:0 !important;max-width:none !important}
  #accounting-internal-section .accounting-table th:nth-child(3),
  #accounting-internal-section .accounting-table td:nth-child(3){width:4% !important;min-width:0 !important;max-width:none !important;text-align:center}
  #accounting-internal-section .accounting-table th:nth-child(4),
  #accounting-internal-section .accounting-table td:nth-child(4){width:7% !important;min-width:0 !important;max-width:none !important}
  #accounting-internal-section .accounting-table th:nth-child(5),
  #accounting-internal-section .accounting-table td:nth-child(5){width:10% !important;min-width:0 !important;max-width:none !important}
  #accounting-internal-section .accounting-table th:nth-child(6),
  #accounting-internal-section .accounting-table td:nth-child(6){width:7% !important;min-width:0 !important;max-width:none !important;white-space:nowrap !important;font-variant-numeric:tabular-nums}
  #accounting-internal-section .accounting-table th:nth-child(8),
  #accounting-internal-section .accounting-table td:nth-child(8),
  #accounting-internal-section .accounting-table th:nth-child(9),
  #accounting-internal-section .accounting-table td:nth-child(9),
  #accounting-internal-section .accounting-table th:nth-child(10),
  #accounting-internal-section .accounting-table td:nth-child(10),
  #accounting-internal-section .accounting-table th:nth-child(11),
  #accounting-internal-section .accounting-table td:nth-child(11),
  #accounting-internal-section .accounting-table th:nth-child(12),
  #accounting-internal-section .accounting-table td:nth-child(12){
    width:7% !important;
    min-width:0 !important;
    max-width:none !important;
    white-space:nowrap !important;
    font-variant-numeric:tabular-nums;
  }
  #accounting-internal-section .accounting-table th:nth-child(7),
  #accounting-internal-section .accounting-table td:nth-child(7){
    width:13% !important;
    min-width:0 !important;
    max-width:none !important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap !important;
  }
  #accounting-internal-section .accounting-table th:nth-child(13),
  #accounting-internal-section .accounting-table td:nth-child(13){width:7% !important;min-width:0 !important;max-width:none !important}

  #accounting-internal-section .accounting-internal-agency strong,
  #accounting-internal-section .accounting-internal-pax > span,
  #accounting-internal-section .accounting-internal-destination > span{
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }

  #accounting-internal-section .accounting-internal-agency strong{
    -webkit-line-clamp:1;
    min-height:1.18em;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  #accounting-internal-section .accounting-internal-agency small,
  #accounting-internal-section .accounting-internal-pax small{
    margin-top:1px;
    min-height:1.18em;
    white-space:nowrap;
  }

  #accounting-internal-section .accounting-internal-agency small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #accounting-internal-section .accounting-internal-pax > span,
  #accounting-internal-section .accounting-internal-destination > span{
    min-height:2.36em;
  }

  #accounting-internal-section .accounting-internal-pax > span{
    -webkit-line-clamp:1;
    min-height:1.18em;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  #accounting-internal-section .accounting-internal-destination > span{
    -webkit-line-clamp:2;
  }

  #accounting-internal-section .accounting-invoice-inline-cell{
    min-width:0 !important;
  }

  #accounting-internal-section .accounting-invoice-inline-form,
  #accounting-internal-section .accounting-invoice-inline-form input{
    width:100% !important;
  }
}

@media (max-width:700px){
  .dashboard-hero-compact{
    padding:17px 18px;
  }

  .dashboard-hero-compact h1{
    font-size:25px;
  }

  .dashboard-hero-compact .dashboard-top-alerts{
    grid-template-columns:1fr;
    width:100%;
    gap:8px;
  }

  .dashboard-hero-compact .dashboard-top-alert{
    width:100% !important;
    height:44px !important;
    min-height:44px !important;
    padding:6px 9px 6px 7px;
  }

  .operative-financial-panel{
    padding:15px;
  }

  .operative-financial-donuts{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .dashboard-alert .birthday-alert-main{
    min-height:50px !important;
    padding-right:12px !important;
  }
}

/* Cotizaciones: grilla estable, compacta y con detalles disponibles al pasar el cursor. */
@media screen and (min-width:701px){
  .quotes-table{
    width:100% !important;
    min-width:0 !important;
    table-layout:fixed !important;
  }
  .quotes-table th,
  .quotes-table td{
    padding-left:7px !important;
    padding-right:7px !important;
    padding-top:6px !important;
    padding-bottom:6px !important;
  }
  .quotes-table th:nth-child(1), .quotes-table td:nth-child(1){width:8% !important}
  .quotes-table th:nth-child(2), .quotes-table td:nth-child(2){width:18% !important}
  .quotes-table th:nth-child(3), .quotes-table td:nth-child(3){width:13% !important}
  .quotes-table th:nth-child(4), .quotes-table td:nth-child(4){width:26% !important}
  .quotes-table th:nth-child(5), .quotes-table td:nth-child(5){width:18% !important}
  .quotes-table th:nth-child(6), .quotes-table td:nth-child(6){width:9% !important}
  .quotes-table th:nth-child(7), .quotes-table td:nth-child(7){width:8% !important}
  .quotes-table .agency-cell,
  .quotes-table .quote-detail-cell{
    min-width:0 !important;
    max-width:none !important;
  }
  .quotes-table .agency-cell strong{
    display:block !important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .quotes-table .quote-detail-text{
    min-height:2.44em;
    max-height:2.44em !important;
  }
}

/* Cotizaciones: la fecha de envío es solo una referencia corta; no debe robar espacio a la gestión. */
@media screen and (min-width:701px){
  .quotes-table th:nth-child(1), .quotes-table td:nth-child(1){width:8% !important}
  .quotes-table th:nth-child(2), .quotes-table td:nth-child(2){width:7% !important;min-width:72px !important}
  .quotes-table th:nth-child(3), .quotes-table td:nth-child(3){width:18% !important}
  .quotes-table th:nth-child(4), .quotes-table td:nth-child(4){width:13% !important}
  .quotes-table th:nth-child(5), .quotes-table td:nth-child(5){width:25% !important}
  .quotes-table th:nth-child(6), .quotes-table td:nth-child(6){width:16% !important}
  .quotes-table th:nth-child(7), .quotes-table td:nth-child(7){width:8% !important}
  .quotes-table th:nth-child(8), .quotes-table td:nth-child(8){width:5% !important}
  .quotes-table .quote-sent-date{white-space:nowrap;font-variant-numeric:tabular-nums}
}

/* Grillas operativas: en tablet/móvil conservan su retícula y se desplazan
   horizontalmente; nunca se comprimen hasta superponer columnas. */
@media screen and (max-width:1100px){
  .mwc-grid-scroll{
    width:100%;
    max-width:100%;
    overflow-x:auto !important;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }

  .mwc-grid-scroll > table{
    max-width:none !important;
  }

  .agencies-table-card{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  .agencies-table-card > .compact-table{
    width:920px !important;
    min-width:920px !important;
    max-width:none !important;
  }

  .mwc-grid-scroll > .compact-table,
  .mwc-grid-scroll > .agencies-table,
  .mwc-grid-scroll > .provider-list-table{
    width:920px !important;
    min-width:920px !important;
  }

  .mwc-grid-scroll > .users-table{
    width:980px !important;
    min-width:980px !important;
  }

  #accounting-internal-section,
  .visits-table-card,
  .dashboard .agencies-table-card,
  .audit-events-card .table-responsive{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  #accounting-internal-section .accounting-table{
    width:1380px !important;
    min-width:1380px !important;
    max-width:none !important;
    table-layout:fixed !important;
  }

  .visits-table-card .visits-table{
    width:1120px !important;
    min-width:1120px !important;
    max-width:none !important;
  }

  .dashboard .agencies-table-card .agencies-table{
    width:780px !important;
    min-width:780px !important;
    max-width:none !important;
  }

  .main > .card > .mwc-grid-scroll,
  .main .birthday-alert-detail > .mwc-grid-scroll{
    max-height:390px;
  }

  .main > .card > .mwc-grid-scroll > table:not(.compact-table),
  .main .birthday-alert-detail > .mwc-grid-scroll > table{
    width:780px !important;
    min-width:780px !important;
  }

  .audit-events-card .audit-events-table{
    width:920px !important;
    min-width:920px !important;
    max-width:none !important;
  }
}

/* Centro de notificaciones y actividad de operación. */
.sidebar{z-index:900!important}
.brand > div:nth-child(2){flex:1 1 auto!important;max-width:none!important;margin-right:0!important;padding-right:0!important;overflow:visible!important}
.brand > div:nth-child(2) strong{display:block;overflow:visible!important;text-overflow:clip!important;white-space:nowrap}
.brand > div:nth-child(2) span{display:block;overflow:visible!important;text-overflow:clip!important;white-space:nowrap}
.brand .header-user-menu{right:-14px!important;top:calc(50% - 7px)!important}
.mwc-notification-menu{position:absolute!important;right:12px!important;top:calc(50% - 7px)!important;width:30px!important;height:30px!important;min-width:30px!important;transform:translateY(-50%);z-index:121}
.mwc-notification-toggle{box-sizing:border-box!important;position:relative!important;width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;max-width:30px!important;max-height:30px!important;margin:0!important;padding:0!important;border:0!important;border-radius:8px!important;background:transparent!important;color:var(--mwc-color-title)!important;display:grid!important;place-items:center!important;cursor:pointer;box-shadow:none!important}
.mwc-notification-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mwc-notification-badge{position:absolute;top:-5px;right:-6px;min-width:15px;height:15px;padding:0 4px;border-radius:999px;background:#e86018;color:#fff;font-size:9px;font-weight:900;line-height:15px;box-shadow:0 0 0 2px var(--mwc-color-surface)}
.mwc-notification-popover{position:absolute;left:0;right:auto;top:38px;width:300px;max-height:360px;overflow:auto;z-index:9999;border:1px solid rgba(203,213,225,.92);border-radius:12px;background:rgba(255,255,255,.96);color:var(--mwc-color-text);box-shadow:0 18px 40px rgba(15,23,42,.18);backdrop-filter:blur(10px)}
.mwc-notification-head{min-height:42px;padding:0 12px;border-bottom:1px solid var(--mwc-color-line-soft);display:flex;align-items:center;justify-content:space-between;font-size:12px}.mwc-notification-head strong{color:var(--mwc-color-title)}
.mwc-notification-head form{margin:0}.mwc-notification-head button{min-width:auto!important;min-height:24px!important;height:24px!important;margin:0!important;padding:0 6px!important;border:0!important;border-radius:6px!important;background:transparent!important;color:var(--mwc-color-link)!important;font:inherit!important;font-size:10.5px!important;font-weight:800!important;cursor:pointer}
.mwc-notification-list{display:grid}.mwc-notification-item{display:grid;gap:3px;padding:10px 12px;color:var(--mwc-color-text);text-decoration:none;border-bottom:1px solid var(--mwc-color-line-soft);font-size:12px}.mwc-notification-item:last-child{border-bottom:0}.mwc-notification-item strong{font-size:12px;color:inherit}.mwc-notification-item span,.mwc-notification-empty{color:var(--mwc-color-muted);font-size:11px}.mwc-notification-item.is-unread{background:rgba(37,99,235,.08)}.mwc-notification-item.priority-high strong{color:#c4530a}.mwc-notification-empty{padding:14px 12px}
.operation-timeline{display:grid;gap:0}.operation-timeline-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--mwc-color-line-soft)}.operation-timeline-item:last-child{border-bottom:0}.operation-timeline-item div{display:grid;gap:2px}.operation-timeline-item strong{font-size:13px}.operation-timeline-item span,.operation-timeline-item small{font-size:11.5px;color:var(--mwc-color-muted)}.operation-timeline-item small{text-align:right}
.operation-timeline-item.quote-followup-line{display:block}.quote-followup-line div{display:block}.quote-followup-line span{margin-left:2px}
.followup-quotes-card{display:grid;gap:10px}.followup-count{margin:0}.followup-quote-filters{display:flex;gap:6px;align-items:center}.followup-quote-list{border:1px solid var(--mwc-color-line-soft);border-radius:10px;overflow:hidden}.followup-quote-item{border-bottom:1px solid var(--mwc-color-line-soft)}.followup-quote-item:last-child{border-bottom:0}.followup-quote-item summary{min-height:44px;padding:8px 12px;display:grid;grid-template-columns:110px minmax(180px,1.3fr) minmax(130px,.8fr) 76px;gap:10px;align-items:center;cursor:pointer;list-style:none}.followup-quote-item summary::-webkit-details-marker{display:none}.followup-quote-item summary::after{content:'›';justify-self:end;color:var(--mwc-color-muted);font-size:18px;line-height:1;transform:rotate(0deg);transition:transform .16s ease}.followup-quote-item[open] summary{background:var(--mwc-color-surface-soft)}.followup-quote-item[open] summary::after{transform:rotate(90deg)}.followup-quote-code{font-weight:900;color:var(--mwc-color-link);white-space:nowrap}.followup-quote-agency{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.followup-quote-responsible,.followup-quote-date{font-size:12px;color:var(--mwc-color-muted);white-space:nowrap}.followup-quote-date{text-align:right}.followup-quote-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1.15fr);gap:16px;padding:12px;border-top:1px solid var(--mwc-color-line-soft);background:var(--mwc-color-surface-soft)}.followup-quote-meta{display:grid;align-content:start;gap:7px}.followup-quote-meta p{margin:0;font-size:12px;line-height:1.38}.followup-quote-history{min-width:0}.followup-quote-history h3{margin:0 0 6px;font-size:13px}.followup-quote-history form{grid-template-columns:minmax(0,1fr) auto;align-items:end;margin:0 0 6px}.followup-quote-history textarea{min-height:48px!important;margin:0}.compact-timeline{max-height:190px;overflow:auto}.compact-timeline .operation-timeline-item{padding:7px 0}.followup-campaign-card{margin-top:14px}.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:700px){.mwc-notification-menu{right:12px!important}.mwc-notification-popover{position:fixed;right:16px;left:16px;top:58px;width:auto;max-height:calc(100vh - 80px)}.operation-timeline-item{grid-template-columns:1fr;gap:4px}.operation-timeline-item small{text-align:left}}
@media(max-width:700px){.followup-quote-item summary{grid-template-columns:92px minmax(0,1fr) 34px;padding:8px 10px}.followup-quote-responsible{display:none}.followup-quote-date{font-size:10.5px}.followup-quote-detail{grid-template-columns:1fr;gap:12px;padding:10px}.followup-quote-history form{grid-template-columns:1fr}.followup-quote-history form .actions{justify-content:flex-start}.followup-quote-agency{font-size:12px}.followup-quote-code{font-size:12px}}
/* Panel compacto de cotizaciones dentro de Seguimiento. */
.followup-workbench{display:grid;grid-template-columns:170px minmax(0,1fr);min-height:360px;border:1px solid var(--mwc-color-line-soft);border-radius:10px;overflow:hidden}.followup-quote-tabs{display:grid;align-content:start;background:var(--mwc-color-surface-soft);border-right:1px solid var(--mwc-color-line-soft);max-height:560px;overflow:auto}.followup-quote-tab{appearance:none;width:100%;min-height:36px;padding:7px 10px;border:0;border-bottom:1px solid var(--mwc-color-line-soft);background:transparent;color:var(--mwc-color-text);text-align:left;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer}.followup-quote-tab strong{color:var(--mwc-color-link);font-size:12px;line-height:1.2}.followup-quote-tab small{font-size:10px;color:var(--mwc-color-muted);white-space:nowrap}.followup-quote-tab.active{background:var(--mwc-color-surface);box-shadow:inset 3px 0 0 var(--mwc-color-link)}.followup-quote-panels{min-width:0}.followup-quote-panel{display:none;padding:14px}.followup-quote-panel.active{display:block}.followup-panel-head{display:flex;align-items:start;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--mwc-color-line-soft)}.followup-panel-head .eyebrow{margin:0 0 2px}.followup-panel-head h2{margin:0;font-size:18px}.followup-panel-head>span{font-size:11px;color:var(--mwc-color-muted);white-space:nowrap}.followup-panel-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(300px,1.1fr);gap:16px;padding-top:12px}.followup-summary-card,.followup-campaign-card{margin-top:14px}.followup-summary-card h2,.followup-campaign-card h2{margin-bottom:2px}.followup-summary-card .muted{margin:0 0 8px;font-size:12px}
@media(max-width:800px){.followup-workbench{grid-template-columns:1fr;min-height:0}.followup-quote-tabs{grid-auto-flow:column;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));grid-template-rows:1fr;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--mwc-color-line-soft);max-height:none}.followup-quote-tab{min-width:132px;min-height:36px}.followup-panel-grid{grid-template-columns:1fr;gap:12px}.followup-quote-panel{padding:10px}.followup-panel-head h2{font-size:16px}}
/* Bandeja de atención: el último movimiento se lee sin abrir la cotización. */
.followup-inbox-list{border:1px solid var(--mwc-color-line-soft);border-radius:10px;overflow:hidden}.followup-inbox-item{border-bottom:1px solid var(--mwc-color-line-soft)}.followup-inbox-item:last-child{border-bottom:0}.followup-inbox-item summary{display:grid;grid-template-columns:112px minmax(180px,.85fr) minmax(240px,1.35fr) 104px;gap:12px;align-items:center;min-height:56px;padding:8px 12px;cursor:pointer;list-style:none}.followup-inbox-item summary::-webkit-details-marker{display:none}.followup-inbox-item summary::after{content:'›';position:absolute;right:8px;color:var(--mwc-color-muted);font-size:18px}.followup-inbox-item{position:relative}.followup-inbox-item[open] summary{background:var(--mwc-color-surface-soft)}.followup-inbox-item[open] summary::after{transform:rotate(90deg)}.followup-inbox-reference{display:grid;gap:2px}.followup-inbox-reference strong{font-size:12px;color:var(--mwc-color-link)}.followup-inbox-reference small,.followup-inbox-agency small,.followup-inbox-last small{font-size:10.5px;color:var(--mwc-color-muted)}.followup-inbox-agency,.followup-inbox-last{min-width:0;display:grid;gap:2px}.followup-inbox-agency strong,.followup-inbox-last strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.followup-inbox-last span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;color:var(--mwc-color-muted)}.followup-inbox-state{justify-self:end;min-width:88px;padding:4px 7px;border:1px solid var(--mwc-color-line);border-radius:999px;text-align:center;font-size:10.5px;font-weight:800;white-space:nowrap}.followup-inbox-state.attention{border-color:#f6b21b;color:#9a5a00;background:#fff9e9}.followup-inbox-state.pending{border-color:#f1b68a;color:#a54712;background:#fff5ed}.followup-inbox-state.current{border-color:#8be7ad;color:#20733b;background:#edfff2}.followup-inbox-expanded{display:grid;grid-template-columns:minmax(0,.8fr) minmax(320px,1.2fr);gap:16px;padding:12px;border-top:1px solid var(--mwc-color-line-soft);background:var(--mwc-color-surface-soft)}
@media(max-width:800px){.followup-inbox-item summary{grid-template-columns:92px minmax(0,1fr) 82px;gap:8px;min-height:54px;padding:8px 18px 8px 10px}.followup-inbox-last{grid-column:2/4}.followup-inbox-last small{display:none}.followup-inbox-agency small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.followup-inbox-state{min-width:0;padding:3px 5px;font-size:9.5px}.followup-inbox-expanded{grid-template-columns:1fr;gap:12px;padding:10px}.followup-inbox-item summary::after{right:4px}}
@media(max-width:1100px){.mwc-notification-popover{position:fixed;right:16px;left:16px;top:58px;width:auto;max-height:calc(100vh - 80px)}}