/* ===== vz-design/tokens/fonts.css ===== */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Nunito+Sans:wght@500;600&display=swap");

/* ===== vz-design/tokens/colors.css ===== */
:root{
  --vz-gold:#A08B5B; --vz-gold-deep:#836F43; --vz-gold-soft:#C7B48A;
  --vz-tan:#DCC6A9; --vz-tan-light:#E9DAC4;
  --vz-cream:#F7F3EA; --vz-cream-deep:#EFE8D9; --vz-ink:#1E1F1A;
  --vz-brown:#5E503F; --vz-lilac:#8B95C9; --vz-navy:#052F5F;
  --vz-sage-light:#BDC696; --vz-sage:#7A9B76;
  --vz-green-100:#DAD7CD; --vz-green-200:#A3B18A; --vz-green-400:#588157;
  --vz-green-600:#3A5A40; --vz-green-700:#344E41; --vz-green-900:#20301F;
  --vz-warm-0:#FFFFFF; --vz-warm-50:#FBF9F4; --vz-warm-100:#F4F0E7;
  --vz-warm-200:#E8E1D3; --vz-warm-300:#D6CCB8; --vz-warm-400:#B4A992;
  --vz-warm-500:#8C8371; --vz-warm-600:#6B6455; --vz-warm-700:#4A463C;
  --vz-warm-800:#2E2C25; --vz-warm-900:#1E1D18;
  --vz-success:#588157; --vz-warning:#B5842F; --vz-danger:#A6412F;
  --vz-info:#052F5F; --vz-accent-lilac:#8B95C9;

  --surface-page:#FBF9F4; --surface-page-alt:#F4F0E7;
  --surface-card:#FFFFFF; --surface-card-hover:#FBF9F4;
  --surface-sunken:#F1EBDF;
  --surface-brand:#DCC6A9; --surface-brand-strong:#3A5A40;
  --surface-inverse:#20301F;
  --surface-accent-soft:#EAEFE1; --surface-gold-soft:#F5EEE0;
  --surface-lilac-soft:#EBEDF7; --surface-navy-soft:#E4EAF1;
  --surface-overlay:rgba(30,29,24,.46);

  --text-strong:#20301F; --text-heading:#344E41; --text-body:#3F3B32;
  --text-muted:#7A7364; --text-subtle:#9A927F; --text-inverse:#FBF9F4;
  --text-on-brand:#3A3123; --text-link:#3A5A40; --text-link-hover:#588157;
  --text-gold:#836F43;

  --border-subtle:#EAE3D5; --border-default:#DED5C2; --border-strong:#C6BAA1;
  --border-focus:#588157; --border-inverse:rgba(251,249,244,.18);

  --action-primary:#3A5A40; --action-primary-hover:#344E41;
  --action-primary-active:#20301F; --action-primary-fg:#FBF9F4;
  --action-secondary:#FFFFFF; --action-secondary-hover:#F4F0E7;
  --action-secondary-fg:#3F3B32; --action-tertiary-hover:rgba(58,90,64,.08);
  --action-gold:#A08B5B; --action-gold-hover:#836F43;
  --action-danger:#A6412F; --action-danger-hover:#8C3627;
  --action-disabled:#E8E1D3; --action-disabled-fg:#A79E8B;

  --status-success-bg:#E4EDDF;--status-success-fg:#33562F;--status-success-bd:#BBD2B3;
  --status-warning-bg:#F7EDD8;--status-warning-fg:#7A5717;--status-warning-bd:#E4CFA3;
  --status-danger-bg:#F6E2DD;--status-danger-fg:#8C3627;--status-danger-bd:#E1BFB6;
  --status-info-bg:#E4EAF1;--status-info-fg:#052F5F;--status-info-bd:#BECDDD;
  --status-neutral-bg:#F1EBDF;--status-neutral-fg:#5C564A;--status-neutral-bd:#DED5C2;
  --status-accent-bg:#EBEDF7;--status-accent-fg:#414C86;--status-accent-bd:#C5CAE6;

  --chart-1:#3A5A40;--chart-2:#A08B5B;--chart-3:#8B95C9;--chart-4:#BDC696;--chart-5:#052F5F;--chart-6:#5E503F;
}
[data-theme="dark"]{
  --surface-page:#232722; --surface-page-alt:#282D28;
  --surface-card:#2B302B; --surface-card-hover:#333930; --surface-sunken:#20241F;
  --surface-brand:#3A4038; --surface-brand-strong:#588157; --surface-inverse:#EFE8D9;
  --surface-accent-soft:#33402F; --surface-gold-soft:#3A3527;
  --surface-lilac-soft:#33354A; --surface-navy-soft:#28323F;
  --surface-overlay:rgba(20,22,19,.62);

  --text-strong:#F2EFE4; --text-heading:#E6E2D2; --text-body:#D9D4C4;
  --text-muted:#9EA091; --text-subtle:#7C7F71; --text-inverse:#20301F;
  --text-on-brand:#EFE8D9; --text-link:#A3B18A; --text-link-hover:#BDC696;
  --text-gold:#C7B48A;

  --border-subtle:#2A322A; --border-default:#354036; --border-strong:#4A574A;
  --border-focus:#A3B18A; --border-inverse:rgba(20,25,19,.24);

  --action-primary:#588157; --action-primary-hover:#6B9668;
  --action-primary-active:#3A5A40; --action-primary-fg:#0F140E;
  --action-secondary:#262E25; --action-secondary-hover:#303A2E;
  --action-secondary-fg:#E6E2D2; --action-tertiary-hover:rgba(163,177,138,.14);
  --action-gold:#C7B48A; --action-gold-hover:#DBCAA4;
  --action-danger:#C2543F; --action-danger-hover:#D0654F;
  --action-disabled:#2A322A; --action-disabled-fg:#6E7367;

  --status-success-bg:#22301F;--status-success-fg:#A9C79F;--status-success-bd:#3A5A40;
  --status-warning-bg:#332B18;--status-warning-fg:#E0BC72;--status-warning-bd:#5C4A22;
  --status-danger-bg:#361F19;--status-danger-fg:#E2A294;--status-danger-bd:#5C3227;
  --status-info-bg:#182333;--status-info-fg:#A9C2DE;--status-info-bd:#2B4262;
  --status-neutral-bg:#252B23;--status-neutral-fg:#B8B7A6;--status-neutral-bd:#3A423A;
  --status-accent-bg:#242741;--status-accent-fg:#B4BBE2;--status-accent-bd:#3C4270;

  --chart-1:#A3B18A;--chart-2:#C7B48A;--chart-3:#8B95C9;--chart-4:#BDC696;--chart-5:#7FA6D0;--chart-6:#B39B7C;
}

/* ===== vz-design/tokens/typography.css ===== */
:root{
  --font-display:"DM Sans",sans-serif;
  --font-heading:"DM Sans",sans-serif;
  --font-body:"DM Sans",sans-serif;
  --font-mono:"DM Sans",sans-serif;

  --text-2xs:10px; --text-xs:11px; --text-sm:12.5px; --text-md:14px; --text-lg:16px;
  --text-xl:18px; --text-2xl:22px; --text-3xl:22px; --text-4xl:30px; --text-5xl:38px; --text-6xl:50px;

  --leading-tight:1.15; --leading-snug:1.3; --leading-normal:1.5; --leading-relaxed:1.65;
  --weight-light:300; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --tracking-tight:-0.01em; --tracking-normal:0; --tracking-wide:0.04em; --tracking-brand:0.18em;

  --type-page-title:var(--weight-semibold) var(--text-3xl)/var(--leading-tight) var(--font-heading);
  --type-section-title:var(--weight-bold) var(--text-lg)/var(--leading-snug) var(--font-body);
  --type-card-title:var(--weight-bold) var(--text-sm)/var(--leading-snug) var(--font-body);
  --type-body:var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-body);
  --type-body-sm:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
  --type-label:var(--weight-semibold) var(--text-xs)/1.2 var(--font-body);
  --type-overline:var(--weight-semibold) var(--text-2xs)/1.2 var(--font-body);
  --type-metric:var(--weight-bold) var(--text-3xl)/1 var(--font-body);
}

/* ===== vz-design/tokens/spacing.css ===== */
:root{
  --space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
  --space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;

  --control-h-sm:32px; --control-h-md:40px; --control-h-lg:44px; --control-px:14px;
  --card-pad:18px; --card-pad-lg:24px; --table-cell-py:9px; --table-cell-px:14px;

  --topbar-h:72px; --sidebar-w:212px; --sidebar-w-collapsed:56px;
  --content-max:1280px; --content-gutter:32px; --stack-gap:24px;
}

/* ===== vz-design/tokens/shape.css ===== */
:root{
  --radius-xs:6px;--radius-sm:10px;--radius-md:14px;--radius-lg:18px;--radius-xl:24px;
  --radius-pill:999px;--radius-card:16px;--radius-control:10px;
  --border-w:1px;--border-w-strong:1.5px;
  --focus-ring:0 0 0 3px rgba(88,129,87,.28);
  --focus-ring-danger:0 0 0 3px rgba(166,65,47,.24);
  --shadow-xs:0 1px 2px rgba(45,38,24,.06);
  --shadow-sm:0 1px 3px rgba(45,38,24,.07),0 1px 1px rgba(45,38,24,.04);
  --shadow-md:0 4px 14px rgba(45,38,24,.09);
  --shadow-lg:0 12px 32px rgba(45,38,24,.13);
  --shadow-modal:0 24px 64px rgba(28,24,15,.24);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.5);
  --blur-overlay:blur(3px);
}
[data-theme="dark"]{
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 1px 3px rgba(0,0,0,.45);
  --shadow-md:0 6px 18px rgba(0,0,0,.5);
  --shadow-lg:0 16px 40px rgba(0,0,0,.55);
  --shadow-modal:0 28px 70px rgba(0,0,0,.65);
  --focus-ring:0 0 0 3px rgba(163,177,138,.3);
}

/* ===== vz-design/tokens/motion.css ===== */
:root{
  --ease-standard:cubic-bezier(.2,.6,.2,1);
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --ease-in:cubic-bezier(.5,0,.75,0);
  --dur-instant:90ms; --dur-fast:140ms; --dur-base:200ms; --dur-slow:320ms;
  --transition-control:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);
}
@media (prefers-reduced-motion:reduce){:root{--dur-instant:0ms;--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms}}

/* ===== vz-design/tokens/base.css ===== */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{margin:0;color:var(--text-heading);font-family:var(--font-heading);font-weight:var(--weight-semibold);line-height:var(--leading-snug)}
h1{font-size:var(--text-3xl);line-height:var(--leading-tight)} h2{font-size:var(--text-xl)} h3{font-size:var(--text-lg)} h4{font-size:var(--text-md)}
p{margin:0 0 var(--space-3)}
a{color:var(--text-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:2px}
code,kbd{font-family:var(--font-mono);font-size:.92em}
hr{border:0;border-top:1px solid var(--border-subtle);margin:var(--space-6) 0}
::selection{background:var(--vz-sage-light);color:var(--vz-green-900)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
::placeholder{color:var(--text-subtle)}
.vz-overline{font:var(--type-overline);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted)}

/* ===== vz-design/components/components.css ===== */
/* ================= Botón ================= */
.vz-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);white-space:nowrap;transition:var(--transition-control),transform var(--dur-instant) var(--ease-standard)}
.vz-btn:active{transform:translateY(1px)}

.vz-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:var(--radius-pill);cursor:pointer;transition:var(--transition-control);border:1px solid transparent;background:transparent;color:var(--text-body);}

.vz-icon-btn-onbrand{background:transparent;color:var(--icon, var(--text-on-brand));border:1.5px solid var(--input-border, rgba(255,255,255,.5))}
.vz-icon-btn-onbrand:hover{background:rgba(0,0,0,.06)}

/* ================= Tarjeta ================= */
.vz-card{border-radius:var(--radius-card);padding:var(--card-pad);background:var(--surface-card);
  border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);}
.vz-card-sunken{background:var(--surface-sunken)}
.vz-card-sage{background:var(--surface-accent-soft);border-color:var(--status-success-bd)}
.vz-card-gold{background:var(--surface-gold-soft);border-color:var(--vz-gold-soft)}
.vz-card-brand{background:var(--surface-brand-strong);border-color:transparent;color:var(--text-inverse)}
.vz-card-brand .vz-card-title,.vz-card-brand .vz-card-subtitle{color:var(--text-inverse)}
.vz-card-dashed{background:transparent;border:1px dashed var(--border-strong);box-shadow:none;color:var(--text-muted)}
.vz-card-interactive{cursor:pointer}
.vz-card-interactive:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.vz-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}
.vz-card-title{font:var(--type-card-title);color:var(--text-heading);margin:0}
.vz-card-subtitle{margin:4px 0 0;font:var(--type-body-sm);color:var(--text-muted)}
.vz-card-actions{display:flex;gap:var(--space-2);flex:0 0 auto}
.vz-card-footer{margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--border-subtle);font:var(--type-body-sm);color:var(--text-muted);display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}

/* ================= Badge / Tag ================= */
.vz-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-pill);
  font:var(--type-label);font-size:var(--text-xs);white-space:nowrap;border:1px solid transparent;}
.vz-badge-sm{height:20px;padding:0 8px;font-size:var(--text-2xs)}
.vz-badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto;display:inline-block}
.vz-badge-success{background:var(--status-success-bg);color:var(--status-success-fg);border-color:var(--status-success-bd)}
.vz-badge-warning{background:var(--status-warning-bg);color:var(--status-warning-fg);border-color:var(--status-warning-bd)}
.vz-badge-danger{background:var(--status-danger-bg);color:var(--status-danger-fg);border-color:var(--status-danger-bd)}
.vz-badge-info{background:var(--status-info-bg);color:var(--status-info-fg);border-color:var(--status-info-bd)}
.vz-badge-neutral{background:var(--status-neutral-bg);color:var(--status-neutral-fg);border-color:var(--status-neutral-bd)}
.vz-badge-accent{background:var(--status-accent-bg);color:var(--status-accent-fg);border-color:var(--status-accent-bd)}

.vz-tag{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--radius-pill);
  font:var(--type-body-sm);font-size:var(--text-xs);border:1px solid;}
.vz-tag-removable{padding:0 6px 0 10px}
.vz-tag-x{display:inline-flex;width:15px;height:15px;align-items:center;justify-content:center;border-radius:50%;background:rgba(0,0,0,.07);font-size:10px;cursor:pointer;border:none}
.vz-tag-neutral{background:var(--surface-sunken);color:var(--text-body);border-color:var(--border-default)}
.vz-tag-sage{background:var(--surface-accent-soft);color:var(--status-success-fg);border-color:var(--status-success-bd)}
.vz-tag-gold{background:var(--surface-gold-soft);color:var(--text-gold);border-color:var(--vz-gold-soft)}
.vz-tag-lilac{background:var(--surface-lilac-soft);color:var(--status-accent-fg);border-color:var(--status-accent-bd)}
.vz-tag-navy{background:var(--surface-navy-soft);color:var(--status-info-fg);border-color:var(--status-info-bd)}

/* ================= Formularios ================= */
.vz-field{display:flex;flex-direction:column;gap:var(--space-2)}
.vz-label{font:var(--type-label);color:var(--text-heading);letter-spacing:.01em}
.vz-label-req{color:var(--action-danger);margin-left:3px}
.vz-hint{font:var(--type-body-sm);font-size:var(--text-xs);color:var(--text-muted)}
.vz-hint-error{color:var(--action-danger)}
.vz-input,.vz-select,textarea.vz-input{width:100%;height:var(--control-h-md);padding:0 var(--control-px);
  background:var(--surface-card);color:var(--text-body);font:var(--type-body);font-size:var(--text-sm);
  border:1px solid var(--border-default);border-radius:var(--radius-control);outline:none;transition:var(--transition-control);}
textarea.vz-input{height:auto;min-height:96px;padding:10px 14px;resize:vertical}
.vz-input:focus,.vz-select:focus{border-color:var(--border-focus);box-shadow:var(--focus-ring)}
.vz-input.vz-invalid,.vz-select.vz-invalid{border-color:var(--action-danger)}
.vz-input.vz-invalid:focus{box-shadow:var(--focus-ring-danger)}
.vz-input:disabled,.vz-select:disabled{background:var(--surface-sunken);cursor:not-allowed}
.vz-select{appearance:none;padding-right:36px;cursor:pointer;background-image:none;}
.vz-select-wrap{position:relative;display:flex;align-items:center}
.vz-select-wrap::after{content:"▾";position:absolute;right:12px;color:var(--text-muted);font-size:10px;pointer-events:none}
.vz-input-wrap{position:relative;display:flex;align-items:center}
.vz-input-icon{position:absolute;left:13px;color:var(--text-subtle);display:flex}
.vz-input-icon ~ .vz-input{padding-left:38px}
.vz-input-suffix{position:absolute;right:13px;font:var(--type-body-sm);color:var(--text-muted)}

.vz-checkbox,.vz-radio-item{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer}
.vz-checkbox input,.vz-radio-item input{position:absolute;opacity:0;width:0;height:0}
.vz-checkbox-box{width:18px;height:18px;flex:0 0 auto;border-radius:var(--radius-xs);display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-card);border:1px solid var(--border-strong);color:var(--action-primary-fg);font-size:12px;transition:var(--transition-control);}
.vz-checkbox input:checked ~ .vz-checkbox-box{background:var(--action-primary);border-color:var(--action-primary)}
.vz-switch{display:inline-flex;align-items:center;gap:var(--space-3);cursor:pointer}
.vz-switch input{position:absolute;opacity:0;width:0;height:0}
.vz-switch-track{width:38px;height:22px;border-radius:var(--radius-pill);background:var(--border-strong);position:relative;transition:background-color var(--dur-base) var(--ease-standard);flex:0 0 auto}
.vz-switch input:checked ~ .vz-switch-track{background:var(--action-primary)}
.vz-switch-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--shadow-xs);transition:left var(--dur-base) var(--ease-out)}
.vz-switch input:checked ~ .vz-switch-track .vz-switch-thumb{left:19px}

/* Chip de selección (restricciones, permisos, módulos) */
.vz-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-sunken);border:1px solid var(--border-default);
  color:var(--text-body);padding:6px 14px;border-radius:var(--radius-pill);font:var(--type-body-sm);font-size:var(--text-xs);margin:3px 6px 3px 0;cursor:pointer;transition:var(--transition-control);}
.vz-chip:has(input:checked){background:var(--surface-accent-soft);border-color:var(--status-success-bd);color:var(--status-success-fg);font-weight:600}
.vz-chip input{margin:0}

/* Multiselect */
.vz-multiselect{position:relative}
.vz-multiselect-box{min-height:var(--control-h-md);display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  padding:6px 34px 6px 8px;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-control);
  cursor:pointer;transition:var(--transition-control);position:relative;}
.vz-multiselect-box.vz-open{border-color:var(--border-focus);box-shadow:var(--focus-ring)}
.vz-multiselect-placeholder{font:var(--type-body);font-size:var(--text-sm);color:var(--text-subtle);padding-left:6px}
.vz-multiselect-tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 6px 0 10px;background:var(--surface-accent-soft);
  color:var(--status-success-fg);border:1px solid var(--status-success-bd);border-radius:var(--radius-pill);font:var(--type-body-sm);font-size:var(--text-xs);}
.vz-multiselect-tag-x{display:inline-flex;width:14px;height:14px;align-items:center;justify-content:center;border-radius:50%;background:rgba(51,86,47,.14);font-size:10px;border:none;cursor:pointer;color:inherit}
.vz-multiselect-caret{position:absolute;right:12px;color:var(--text-muted);font-size:10px;pointer-events:none}
.vz-multiselect-panel{position:absolute;z-index:400;top:calc(100% + 6px);left:0;right:0;background:var(--surface-card);
  border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);overflow:hidden;}
.vz-multiselect-search{padding:8px;border-bottom:1px solid var(--border-subtle)}
.vz-multiselect-search input{width:100%;height:var(--control-h-sm);padding:0 10px;background:var(--surface-sunken);
  border:1px solid var(--border-subtle);border-radius:var(--radius-xs);outline:none;font:var(--type-body-sm);color:var(--text-body)}
.vz-multiselect-list{max-height:208px;overflow-y:auto;padding:4px}
.vz-multiselect-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-xs);
  font:var(--type-body-sm);color:var(--text-body);cursor:pointer;}
.vz-multiselect-opt:hover{background:var(--surface-card-hover)}
.vz-multiselect-opt.vz-on{background:var(--surface-accent-soft)}
.vz-multiselect-check{width:16px;height:16px;border-radius:var(--radius-xs);display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-card);border:1px solid var(--border-strong);color:#fff;font-size:11px;flex:0 0 auto}
.vz-multiselect-opt.vz-on .vz-multiselect-check{background:var(--action-primary);border-color:var(--action-primary)}
.vz-multiselect-empty{padding:12px 10px;font:var(--type-body-sm);color:var(--text-muted)}

/* ================= Topbar / Sidebar ================= */
.vz-topbar{position:sticky;top:0;z-index:600;height:var(--topbar-h);display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--space-4);
  padding:0 var(--space-4);background:var(--surface-brand);color:var(--text-on-brand);
  border-bottom:1px solid var(--border-strong);box-shadow:var(--shadow-xs);margin:0;}
.vz-topbar-left{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-width:0;margin:0;padding:0;}
.vz-topbar-right{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0;margin:0!important;padding:0;}
.vz-topbar-center{display:flex;align-items:center;justify-content:center;margin:0;padding:0;}
.vz-topbar-pill{display:inline-flex;align-items:center;gap:var(--space-2);height:40px;padding:0 14px;border-radius:var(--radius-pill);
  border:1.5px solid var(--input-border, rgba(255,255,255,.55));background:transparent;color:var(--icon, var(--text-on-brand));
  font:var(--type-label);letter-spacing:var(--tracking-wide);text-transform:uppercase;cursor:pointer;transition:var(--transition-control);text-decoration:none;box-sizing:border-box;}
.vz-topbar-pill:hover{background:rgba(0,0,0,.06);text-decoration:none}
.vz-topbar-pill i[data-lucide]{color:inherit;}
.vz-topbar-avatar{width:40px;height:40px;border-radius:50%;background:var(--primary, var(--vz-green-600));color:var(--text-on-primary, var(--text-inverse));
  display:inline-flex;align-items:center;justify-content:center;font:var(--type-label);flex:0 0 auto;box-sizing:border-box;}
.vz-topbar .vz-icon-btn{width:40px;height:40px;box-sizing:border-box;flex:0 0 auto;}

.vz-sidebar{width:var(--sidebar-w);flex:0 0 auto;align-self:stretch;background:var(--surface-card);
  border-right:1px solid var(--border-subtle);padding:var(--space-4) var(--space-3);display:flex;flex-direction:column;gap:2px;}
.vz-sidebar-item{width:100%;display:flex;align-items:center;gap:var(--space-3);height:36px;padding:0 10px;border:none;
  border-radius:var(--radius-control);background:transparent;color:var(--text-body);font:var(--type-body-sm);font-weight:500;
  cursor:pointer;transition:var(--transition-control);text-align:left;text-decoration:none;}
.vz-sidebar-item:hover{background:var(--surface-card-hover);text-decoration:none}
.vz-sidebar-item.vz-active{background:var(--surface-accent-soft);color:var(--status-success-fg);font-weight:600}
.vz-sidebar-item-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.vz-sidebar-badge{font:var(--type-overline);color:var(--text-gold)}
.vz-sidebar-caret{font-size:9px;color:var(--text-muted);transition:transform var(--dur-fast) var(--ease-standard)}
.vz-sidebar-caret.vz-open{transform:rotate(180deg)}
.vz-sidebar-children{margin:2px 0 6px 14px;padding-left:10px;border-left:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:1px}
.vz-sidebar-child{display:flex;align-items:center;height:32px;padding:0 10px;border:none;border-radius:var(--radius-control);
  text-align:left;cursor:pointer;background:transparent;color:var(--text-muted);font:var(--type-body-sm);font-weight:400;
  transition:var(--transition-control);text-decoration:none;}
.vz-sidebar-child:hover{color:var(--text-body);text-decoration:none}
.vz-sidebar-child.vz-active{background:var(--surface-accent-soft);color:var(--status-success-fg);font-weight:600}
.vz-sidebar-footer{margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--border-subtle);font:var(--type-body-sm);font-size:var(--text-xs);color:var(--text-subtle)}

/* ================= Tabla ================= */
.vz-table-wrap{border:1px solid var(--border-subtle);border-radius:var(--radius-card);background:var(--surface-card);
  box-shadow:var(--shadow-sm);overflow:hidden;}
.vz-table-scroll{overflow-x:auto}
.vz-table{width:100%;border-collapse:collapse;font:var(--type-body-sm)}
.vz-table thead tr{background:var(--surface-accent-soft)}
.vz-table th{padding:10px var(--table-cell-px);text-align:left;font:var(--type-overline);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--status-success-fg);white-space:nowrap;}
.vz-table td{padding:var(--table-cell-py) var(--table-cell-px);border-top:1px solid var(--border-subtle);color:var(--text-body)}
.vz-table tbody tr{transition:background-color var(--dur-fast) var(--ease-standard)}
.vz-table tbody tr:hover{background:var(--surface-card-hover)}
.vz-table tbody tr.vz-selected{background:var(--surface-accent-soft)}
.vz-table td:first-child a,.vz-table td.vz-link-cell{color:var(--text-link);font-weight:500}
.vz-table td.vz-mono,.vz-table th.vz-mono{font-family:var(--font-mono)}
.vz-table td.vz-right{text-align:right;font-variant-numeric:tabular-nums}
.vz-table-empty{padding:var(--space-8);text-align:center;color:var(--text-muted);font-style:italic}
.vz-table-footer{padding:10px var(--table-cell-px);border-top:1px solid var(--border-subtle);background:var(--surface-page-alt);
  font:var(--type-body-sm);font-size:var(--text-xs);color:var(--text-muted);display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);}

/* ================= Encabezado de sección ================= */
.vz-section-header{display:flex;flex-direction:column;gap:var(--space-2)}
.vz-section-header-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.vz-section-header-actions{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.vz-page-title{font:var(--type-page-title);color:var(--text-heading)}
.vz-section-title{font:var(--type-section-title);color:var(--text-heading)}
.vz-section-desc{margin:0;font:var(--type-body-sm);color:var(--text-muted);max-width:68ch}
.vz-section-rule{height:1px;margin-top:var(--space-2);background:linear-gradient(90deg,var(--border-strong),transparent)}

/* ================= StatCard / ModuleTile / EmptyState ================= */
.vz-statcard{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);
  padding:var(--card-pad);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--space-2);min-width:0;}
.vz-statcard-sage{background:var(--surface-accent-soft)}
.vz-statcard-gold{background:var(--surface-gold-soft)}
.vz-statcard-brand{background:var(--surface-brand-strong);border-color:transparent;color:var(--text-inverse)}
.vz-statcard-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.vz-statcard-value{font:var(--type-metric);letter-spacing:-.01em;display:flex;align-items:baseline;gap:4px}
.vz-statcard-icon{width:34px;height:34px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-accent-soft);color:var(--action-primary)}
.vz-statcard-brand .vz-statcard-icon{background:rgba(251,249,244,.16);color:var(--text-inverse)}
.vz-statcard-label{font:var(--type-body-sm);font-size:var(--text-xs);color:var(--text-muted)}
.vz-statcard-brand .vz-statcard-label{color:rgba(251,249,244,.76)}
.vz-statcard-delta{font:var(--type-body-sm);font-size:var(--text-xs);font-weight:600}
.vz-statcard-up{color:var(--status-success-fg)} .vz-statcard-down{color:var(--status-danger-fg)}

.vz-tile{text-align:left;cursor:pointer;background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);padding:var(--card-pad);display:flex;flex-direction:column;gap:var(--space-3);
  box-shadow:var(--shadow-sm);transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);width:100%;}
.vz-tile:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.vz-tile-icon{width:40px;height:40px;border-radius:var(--radius-md);display:inline-flex;align-items:center;justify-content:center}
.vz-tile-title{font:var(--type-card-title);color:var(--text-heading)}
.vz-tile-desc{font:var(--type-body-sm);font-size:var(--text-xs);color:var(--text-muted)}
.vz-tile-meta{margin-top:auto;font:var(--type-overline);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-gold)}
.vz-tile-sage{background:var(--surface-accent-soft)}.vz-tile-sage .vz-tile-icon{background:rgba(58,90,64,.14);color:var(--status-success-fg)}
.vz-tile-gold{background:var(--surface-gold-soft)}.vz-tile-gold .vz-tile-icon{background:rgba(160,139,91,.2);color:var(--text-gold)}
.vz-tile-lilac{background:var(--surface-lilac-soft)}.vz-tile-lilac .vz-tile-icon{background:rgba(65,76,134,.14);color:var(--status-accent-fg)}
.vz-tile-navy{background:var(--surface-navy-soft)}.vz-tile-navy .vz-tile-icon{background:rgba(5,47,95,.12);color:var(--status-info-fg)}

.vz-empty{border:1px dashed var(--border-strong);border-radius:var(--radius-card);padding:var(--space-10) var(--space-6);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center;background:transparent;}
.vz-empty-compact{padding:var(--space-6)}
.vz-empty-icon{color:var(--vz-green-200)}
.vz-empty-title{font:var(--type-card-title);color:var(--text-heading)}
.vz-empty-desc{font:var(--type-body-sm);color:var(--text-muted);max-width:46ch}

/* ================= Tabs / Breadcrumb / Modal ================= */
.vz-tabs{display:flex;align-items:center;gap:var(--space-5);border-bottom:1px solid var(--border-subtle)}
.vz-tabs-pill{gap:6px;padding:4px;background:var(--surface-sunken);border-radius:var(--radius-pill);border-bottom:none}
.vz-tab{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:none;background:transparent;
  padding:0 0 10px;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--text-muted);font:var(--type-body-sm);font-weight:500;transition:var(--transition-control);}
.vz-tab.vz-active{border-bottom-color:var(--action-primary);color:var(--text-heading);font-weight:600}
.vz-tabs-pill .vz-tab{padding:7px 14px;margin-bottom:0;border-radius:var(--radius-pill);border-bottom:none}
.vz-tabs-pill .vz-tab.vz-active{background:var(--surface-card);box-shadow:var(--shadow-xs)}
.vz-tab-count{font:var(--type-overline);padding:2px 6px;border-radius:var(--radius-pill);background:var(--surface-sunken);color:var(--text-muted)}
.vz-tab.vz-active .vz-tab-count{background:var(--surface-accent-soft);color:var(--status-success-fg)}

.vz-breadcrumb{display:flex;align-items:center;gap:8px;font:var(--type-body-sm);font-size:var(--text-xs);color:var(--text-muted)}
.vz-breadcrumb a{color:var(--text-link)}
.vz-breadcrumb-sep{color:var(--text-subtle)}
.vz-breadcrumb-current{color:var(--text-body)}

.vz-modal-scrim{position:fixed;inset:0;z-index:900;background:var(--surface-overlay);backdrop-filter:var(--blur-overlay);
  display:flex;align-items:center;justify-content:center;padding:var(--space-6);}
.vz-modal{width:100%;background:var(--surface-card);color:var(--text-body);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-modal);border:1px solid var(--border-subtle);overflow:hidden;}
.vz-modal-sm{max-width:420px} .vz-modal-md{max-width:560px} .vz-modal-lg{max-width:760px}
.vz-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-5) var(--space-6) var(--space-4);border-bottom:1px solid var(--border-subtle);}
.vz-modal-body{padding:var(--space-6)}
.vz-modal-footer{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-4) var(--space-6) var(--space-5);
  background:var(--surface-page-alt);border-top:1px solid var(--border-subtle);}
.vz-modal-close{width:30px;flex:0 0 auto}

/* ================= Layout general ================= */
.vz-app{min-height:100vh;background:var(--surface-page)}
.vz-body{display:flex;align-items:stretch;min-height:calc(100vh - var(--topbar-h))}
.vz-main{flex:1;min-width:0;padding:var(--space-8) var(--content-gutter)}
.vz-content{max-width:var(--content-max);margin:0 auto;display:flex;flex-direction:column;gap:var(--stack-gap)}
.vz-grid-2{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space-4)}
.vz-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.vz-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
@media (max-width:1024px){.vz-grid-4{grid-template-columns:repeat(2,1fr)}.vz-grid-3{grid-template-columns:repeat(2,1fr)}.vz-grid-2{grid-template-columns:1fr}}
@media (max-width:720px){.vz-grid-4,.vz-grid-3,.vz-grid-2{grid-template-columns:1fr}
  .vz-topbar{grid-template-columns:auto 1fr auto}
  .vz-sidebar{position:fixed;left:0;top:var(--topbar-h);bottom:0;z-index:500;box-shadow:var(--shadow-lg)}}

/* ===== vz-design/legacy-bridge.css ===== */
/* Puente: aplica el design system nuevo (VVZ) a las clases que ya usan
   todas las páginas PHP existentes, sin tener que reescribir cada pantalla. */

body{background:var(--surface-page);color:var(--text-body);font:var(--type-body);font-family:var(--font-body)}
.contenedor{max-width:var(--content-max);margin:0 auto;padding:var(--space-10) var(--content-gutter)}
h2{font:var(--type-page-title);color:var(--text-heading);margin:0 0 var(--space-5);padding-bottom:var(--space-3);
  border-bottom:none;background:none;}
h3{font:var(--type-section-title);color:var(--text-heading);margin:var(--space-8) 0 var(--space-3)}
a{color:var(--text-link)}
a:hover{color:var(--text-link-hover)}

/* Topbar */
.topbar,header.topbar{background:var(--surface-brand)!important;color:var(--text-on-brand);height:var(--topbar-h);
  border-bottom:1px solid var(--border-strong);box-shadow:var(--shadow-xs);display:flex;align-items:center;padding:0 var(--space-4);}
.topbar-izquierda,.topbar-derecha{display:flex;align-items:center;gap:var(--space-3)}
.menu-trigger{color:var(--text-on-brand)!important;cursor:pointer}

/* Sidebar / menú desplegable */
.menu-flyout{display:none;width:340px;max-width:90vw;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);padding:var(--space-3);flex-direction:column;gap:2px;overflow-x:hidden;}
.menu-flyout a,.menu-padre{white-space:normal;word-break:break-word;overflow:visible;}
.menu-flyout.abierto{display:flex;}

/* =========================================================================
   MENÚ LATERAL — reconstruido desde cero. Cada fila es un grid de 2
   columnas (texto flexible + flecha fija de 24px), con 3 clases únicas
   de nivel que son las ÚNICAS responsables de la sangría horizontal.
   Nada más en el sistema le agrega padding-left a una fila de menú.
   ========================================================================= */
.menu-level-1,.menu-level-2,.menu-level-3{
    display:grid;grid-template-columns:minmax(0,1fr) 24px;align-items:center;
    height:36px;border-radius:var(--radius-control);
    color:var(--text-body);font:var(--type-body-sm);font-weight:500;
    cursor:pointer;transition:var(--transition-control);text-decoration:none;
    margin:0;padding-right:10px;box-sizing:border-box;
}
.menu-level-1 .menu-level-texto,.menu-level-2 .menu-level-texto,.menu-level-3 .menu-level-texto{
    overflow:visible;white-space:normal;word-break:break-word;color:inherit;text-decoration:none;font:inherit;
    text-align:left;justify-self:start;width:100%;display:block;
}
.menu-level-1 .menu-level-flecha,.menu-level-2 .menu-level-flecha,.menu-level-3 .menu-level-flecha{
    display:flex;align-items:center;justify-content:center;justify-self:end;
}
.menu-level-1:hover,.menu-level-2:hover,.menu-level-3:hover{background:var(--surface-card-hover);text-decoration:none}
.menu-level-1.activo,.menu-level-2.activo,.menu-level-3.activo,
.menu-level-1 .menu-level-texto.activo,.menu-level-2 .menu-level-texto.activo,.menu-level-3 .menu-level-texto.activo{
    background:var(--surface-accent-soft);color:var(--status-success-fg);font-weight:600;
}

.menu-level-1{padding-left:20px !important;font-weight:500;color:var(--text-body);}
.menu-level-2{padding-left:48px !important;height:32px;font-weight:400;color:var(--text-muted);}
.menu-level-3{padding-left:78px !important;height:32px;font-weight:400;color:var(--text-muted);}
.menu-level-1 > *, .menu-level-2 > *, .menu-level-3 > * { padding-left:0 !important; margin-left:0 !important; text-indent:0 !important; }

.submenu,.nivel-3-contenedor{display:flex;flex-direction:column;gap:1px;margin:0;padding:0;}

/* Botones */
button,
.boton-toggle-alta,
input[type="submit"]{display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:var(--transition-control),transform var(--dur-instant) var(--ease-standard)}

button:active{transform:translateY(1px)}

.link{background:none;border:none;color:var(--text-link);box-shadow:none;padding:0;height:auto;text-decoration:underline}
.link:hover{background:none;color:var(--text-link-hover)}

/* Formularios */
input,select,textarea{width:100%;max-width:420px;height:var(--control-h-md);padding:0 var(--control-px);
  background:var(--surface-card);color:var(--text-body);font:var(--type-body);font-size:var(--text-sm);
  border:1px solid var(--border-default);border-radius:var(--radius-control);outline:none;transition:var(--transition-control);}
select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B7280' stroke-width='2'><path d='M5 8l5 5 5-5'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:14px;
}
select::-ms-expand{display:none}
textarea{height:auto;min-height:96px;padding:10px 14px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--border-focus);box-shadow:var(--focus-ring)}
input[type="checkbox"],input[type="radio"]{width:auto;height:auto;max-width:none}
input[type="checkbox"]:focus,input[type="radio"]:focus,
input[type="checkbox"]:focus-visible,input[type="radio"]:focus-visible,
input[type="checkbox"]:active,input[type="radio"]:active,
input[type="checkbox"]:checked,input[type="radio"]:checked{
    outline:none!important;box-shadow:none!important;border:none!important;
}
/* El foco visible se traslada al chip/label completo, no al checkbox suelto. */
.chip-restriccion:focus-within,.chip-personal:focus-within,.chip-modulo-dashboard:focus-within{
    outline:2px solid var(--focus,var(--primary));outline-offset:2px;
}
label{font:var(--type-label);color:var(--text-heading);display:block;margin-bottom:4px}
.req{color:var(--action-danger)}

/* Chips */
.chip-restriccion,.chip-personal{display:inline-flex;align-items:center;gap:6px;background:var(--surface-sunken);
  border:1px solid var(--border-default);color:var(--text-body);padding:6px 14px;border-radius:var(--radius-pill);
  font-size:var(--text-xs);margin:3px 6px 3px 0;cursor:pointer;transition:var(--transition-control);}
.chip-restriccion:has(input:checked){background:var(--surface-accent-soft);border-color:var(--status-success-bd);color:var(--status-success-fg);font-weight:700}

/* Chips de selección de columnas para exportar — reemplazan los checkboxes
   tradicionales. Toda la tarjeta es clickeable (label envolviendo un
   checkbox real, oculto solo visualmente para no romper accesibilidad). */
.chip-export-columna{
    display:inline-flex;align-items:center;justify-content:center;
    background:transparent;border:1.5px solid var(--border, var(--input-border));
    color:var(--text, var(--text-body));padding:8px 16px;border-radius:10px;
    font-size:var(--text-sm);margin:4px 8px 4px 0;cursor:pointer;
    transition:var(--transition-control);user-select:none;
}
.chip-export-columna input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.chip-export-columna:has(input:checked){
    border-color:var(--primary, var(--color-primario));
    background:var(--selected-bg, var(--surface-accent-soft));
    color:var(--primary, var(--color-primario));
    font-weight:600;
}
.chip-export-columna:has(input:focus-visible){outline:2px solid var(--focus, var(--primary)); outline-offset:2px;}
.chips-selector-multiple{display:flex;flex-wrap:wrap;gap:0;align-items:center;}

/* Tablas */
table{width:100%;border-collapse:collapse;border-spacing:0;table-layout:auto;background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);box-shadow:var(--shadow-sm);overflow:hidden;font-size:var(--text-sm);}
thead{display:table-header-group}
tbody{display:table-row-group}
thead tr{background:var(--surface-accent-soft)}
th{padding:10px var(--table-cell-px);text-align:left;font:var(--type-overline);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--status-success-fg);white-space:nowrap;vertical-align:middle;}
td{padding:var(--table-cell-py) var(--table-cell-px);border-top:1px solid var(--border-subtle);vertical-align:middle;height:auto;}
tr{position:static;height:auto;}
tbody tr:hover,tr:hover{background:var(--surface-card-hover)}
td a{color:var(--text-link);font-weight:500}

/* Badges / estados */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:var(--radius-pill);
  font-size:var(--text-xs);font-weight:700;letter-spacing:.2px;white-space:nowrap;border:1px solid transparent;}
.badge-exito,.badge-confirmado{background:var(--status-success-bg);color:var(--status-success-fg);border-color:var(--status-success-bd)}
.badge-advertencia,.badge-pendiente{background:var(--status-warning-bg);color:var(--status-warning-fg);border-color:var(--status-warning-bd)}
.badge-error,.badge-cancelado{background:var(--status-danger-bg);color:var(--status-danger-fg);border-color:var(--status-danger-bd)}
.badge-info{background:var(--status-info-bg);color:var(--status-info-fg);border-color:var(--status-info-bd)}
.badge-neutro{background:var(--status-neutral-bg);color:var(--text-body);border-color:var(--border-default)}
.chip-rol-persona {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 6px 2px 10px !important;
    border-radius: 999px !important;
    background: var(--status-info-bg, var(--color-info-fondo)) !important;
    color: var(--status-info-fg, var(--color-info)) !important;
    border: 1px solid transparent !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    margin: 3px 6px 3px 0 !important;
}
.chip-rol-persona a { color: inherit !important; text-decoration: none !important; }
.chip-rol-persona a:hover { text-decoration: underline !important; }
.chip-rol-persona-quitar{opacity: .65}
.chip-rol-persona-quitar:hover{opacity: 1}
.pendiente{color:var(--text-muted)}
.exito{color:var(--status-success-fg);background:var(--status-success-bg);border:1px solid var(--status-success-bd);border-radius:var(--radius-md);padding:10px 14px;}
.error{color:var(--status-danger-fg);background:var(--status-danger-bg);border:1px solid var(--status-danger-bd);border-radius:var(--radius-md);padding:10px 14px;}

/* Bloques / tarjetas genéricas usadas con class="bloque" en varias pantallas */
.bloque,.resumen,.seccion{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);
  padding:var(--card-pad);box-shadow:var(--shadow-sm);margin-bottom:var(--space-6);}
table{margin-bottom:var(--space-6);}
p{margin:0 0 var(--space-3);}
label{margin-bottom:var(--space-2);}
form > div, .campo{margin-bottom:var(--space-4)!important;}
.alta-contenido{background:var(--surface-sunken);border:1px solid var(--border-subtle);border-radius:var(--radius-card);
  padding:var(--card-pad);margin-top:var(--space-3);}

/* KPI cards existentes (dashboard viejo, se mantiene por compatibilidad) */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.kpi-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-left:4px solid var(--action-primary);
  border-radius:var(--radius-card);padding:var(--card-pad);box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);}
.kpi-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.kpi-numero{font:var(--type-metric);color:var(--text-strong)}
.kpi-titulo,.kpi-detalle{font-size:var(--text-xs);color:var(--text-muted)}

/* Login */
.pantalla-login{background-color:var(--surface-inverse);}
.tarjeta-login{background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-modal);}

/* Calendario propio (nav.php) */
.popup-calendario{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);}
.cal-pop-dia:hover{background:var(--surface-accent-soft)}
.cal-pop-dia.seleccionado{background:var(--action-primary)!important;color:var(--action-primary-fg)!important}
.cal-pop-dia.hoy{border:1.5px solid var(--action-primary)}

/* Layout con sidebar (CRM contactos, etc.) */
.layout-con-sidebar{display:flex;gap:var(--space-6);align-items:flex-start}

/* Estado vacío genérico */
.estado-vacio{border:1px dashed var(--border-strong);border-radius:var(--radius-card);padding:var(--space-8);
  text-align:center;color:var(--text-muted);background:transparent;}

/* Selector con buscador (personal / usuarios) */
.selector-personal input[type="text"]{width:100%}
.sugerencias-personal{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);}
.sugerencias-personal div:hover{background:var(--surface-card-hover)}
.chip-personal{background:var(--surface-accent-soft);color:var(--status-success-fg);border-color:var(--status-success-bd)}

::selection{background:var(--vz-sage-light);color:var(--vz-green-900)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* Forzar Manrope en todo salvo el h2 de página (serif solo ahí) */
h3,h4,h3 *,h4 *,.vz-card-title,[style*="DM Sans"],[style*="Fraunces"],[style*="Montserrat"]{font-family:var(--font-body)!important;font-weight:700!important;}
h2{font-family:var(--font-heading)}

/* Bordes más marcados para definir bloques */
.bloque,.resumen,.seccion,.vz-card,table,.kpi-card,.alta-contenido,.estado-vacio,.tarjeta-login{
  border-width:1.5px!important;border-color:var(--border-strong)!important;}

/* Fondo cálido blanco */
body{background:var(--vz-warm-50)}
.surface-page,.vz-app{background:var(--vz-warm-50)}

/* Íconos Lucide: tamaño y alineación consistente */
i[data-lucide],svg.lucide{width:16px;height:16px;vertical-align:middle;stroke-width:1.9;flex:0 0 auto;}
.vz-topbar-pill i[data-lucide],.menu-trigger i[data-lucide]{width:15px;height:15px}
button i[data-lucide],.link i[data-lucide]{width:14px;height:14px}

/* ---- Chips seleccionables (reemplaza checkboxes del dashboard) ---- */
.barra-filtros-dashboard{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.chip-modulo-dashboard{position:relative;display:inline-flex!important;align-items:center;gap:8px;
  height:38px;padding:0 14px;border-radius:12px;border:1.5px solid var(--border-strong);
  background:var(--surface-card);font-size:var(--text-xs)!important;font-weight:700!important;cursor:pointer;
  transition:var(--transition-control);color:var(--text-muted);opacity:.65;}
.chip-modulo-dashboard.activo{opacity:1;border-color:var(--action-primary);background:var(--surface-accent-soft);color:var(--status-success-fg)}
.chip-modulo-dashboard .chip-modulo-check{display:none;width:14px;height:14px;color:var(--status-success-fg)}
.chip-modulo-dashboard.activo .chip-modulo-check{display:inline-block}
.chip-modulo-dashboard:nth-of-type(1).activo{background:var(--status-accent-bg);border-color:var(--status-accent-bd);color:var(--status-accent-fg)}
.chip-modulo-dashboard:nth-of-type(2).activo{background:var(--status-warning-bg);border-color:var(--status-warning-bd);color:var(--status-warning-fg)}
.chip-modulo-dashboard:nth-of-type(3).activo{background:var(--status-info-bg);border-color:var(--status-info-bd);color:var(--status-info-fg)}
.chip-modulo-dashboard:nth-of-type(4).activo{background:#F9EDF3;border-color:#E5C2D6;color:#8C3F6C}
.chip-modulo-dashboard:nth-of-type(5).activo{background:var(--status-success-bg);border-color:var(--status-success-bd);color:var(--status-success-fg)}
@media (max-width:600px){.chip-modulo-dashboard{flex:1 1 calc(50% - 10px);justify-content:center}}

/* Mis tareas + botón, sin superposición */
#seccion-tareas > div:first-child,.vz-section-header-row{flex-wrap:wrap;row-gap:8px;align-items:center!important;}

/* ---- Tablas: nada de position:absolute, altura y alineación estables ---- */
table{table-layout:auto;position:static;max-width:100%;}
td,th{vertical-align:middle;position:static;overflow:visible;line-height:1.4;}
td{white-space:normal;word-break:break-word;}
td .badge,td .vz-badge{position:static;display:inline-flex;margin:1px 4px 1px 0;vertical-align:middle;}
td select,td input{position:static;max-width:100%;}
.vz-table-wrap,table{overflow:visible;}
.vz-table-wrap{overflow-x:auto}

/* Colores variados y delicados: tiles, kpi-card, badges por posición */
.kpi-grid .kpi-card:nth-child(6n+1){border-left-color:#E8A94C;background:linear-gradient(180deg,#FFF7E8 0%,var(--surface-card) 55%)}
.kpi-grid .kpi-card:nth-child(6n+2){border-left-color:#E08A5B;background:linear-gradient(180deg,#FDEEE4 0%,var(--surface-card) 55%)}
.kpi-grid .kpi-card:nth-child(6n+3){border-left-color:#D97D74;background:linear-gradient(180deg,#FCEBE9 0%,var(--surface-card) 55%)}
.kpi-grid .kpi-card:nth-child(6n+4){border-left-color:#6FA8C7;background:linear-gradient(180deg,#E9F3F8 0%,var(--surface-card) 55%)}
.kpi-grid .kpi-card:nth-child(6n+5){border-left-color:#7A9B76;background:linear-gradient(180deg,#EEF4EA 0%,var(--surface-card) 55%)}
.kpi-grid .kpi-card:nth-child(6n+6){border-left-color:#C98BB0;background:linear-gradient(180deg,#F9EDF3 0%,var(--surface-card) 55%)}
.bloque:nth-of-type(4n+1) h4:first-child{color:#B5842F}
.bloque:nth-of-type(4n+2) h4:first-child{color:#B5602F}
.bloque:nth-of-type(4n+3) h4:first-child{color:#052F5F}
.bloque:nth-of-type(4n+4) h4:first-child{color:#33562F}

/* ============================================
   Viña Varela Zarranz — Sistema de Eventos
   Hoja de estilos general, basada en el manual de marca
   ============================================ */

:root {
    /* Colores de marca — paleta renovada: menos marrón, más verde musgo
       claro y blanco, para una estética más fresca y moderna. */
    --color-oscuro: #263422;         /* verde bosque oscuro — antes marrón, ahora texto fuerte y header */
    --color-oscuro-2: #32432c;
    --color-primario: #6b8c53;       /* verde musgo más claro y vivo — botones, activos */
    --color-primario-oscuro: #56703f; /* hover del verde musgo */
    --color-primario-clarito: #e7f0e0; /* verde musgo bien clarito — fondos suaves, hover de filas */
    --color-secundario: #9ab37e;     /* verde salvia — acentos secundarios */
    --color-dorado: #c9a55c;         /* dorado como detalle puntual, ya no protagonista */
    --color-dorado-claro: #ddc38c;
    --color-crema: #ffffff;          /* fondo general — blanco puro */
    --color-crema-2: #eef4e9;        /* verde clarito — headers de tabla, filtros, chips */
    --color-blanco-calido: #ffffff;  /* tarjetas, formularios, modales */
    --color-borde: #dde6d5;
    --color-texto: #263422;
    --color-texto-suave: #6d7a65;

    /* Estados */
    --color-exito: #3f7a3f;
    --color-exito-fondo: #e6f2e3;
    --color-advertencia: #a17a1a;
    --color-advertencia-fondo: #fbf1d9;
    --color-error: #b0504f;
    --color-error-fondo: #fbebea;
    --color-info: #052F5F;
    --color-info-fondo: #eef0fa;
    --color-cancelado: #b0504f;
    --color-cancelado-fondo: #fbebea;
    --color-pendiente-estado: #6d7a65;
    --color-pendiente-fondo: #eef1ea;
    --color-confirmado: #3f7a3f;
    --color-confirmado-fondo: #e6f2e3;

    /* Paleta de acento nueva — se usa en botones secundarios, estados,
       etiquetas y detalles de encabezado, para sumar variedad de color
       sin recargar la página (los fondos y textos base siguen iguales). */
    --acento-marron: #5E503F;
    --acento-azul: #8B95C9;
    --acento-azul-fondo: #eef0fa;
    --acento-marino: #052F5F;
    --acento-oliva: #BDC696;
    --acento-oliva-fondo: #f3f5e9;
    --acento-salvia: #7A9B76;

    /* Espaciado, radios y sombras reutilizables — más redondeado, más aire */
    --espacio-xs: 6px;
    --espacio-sm: 10px;
    --espacio-md: 16px;
    --espacio-lg: 24px;
    --espacio-xl: 36px;
    --radio-sm: 8px;
    --radio-md: 14px;
    --radio-lg: 20px;
    --sombra-sm: 0 1px 4px rgba(38, 52, 34, 0.06);
    --sombra: 0 3px 12px rgba(38, 52, 34, 0.08);
    --sombra-md: 0 6px 20px rgba(38, 52, 34, 0.10);
    --sombra-lg: 0 12px 40px rgba(38, 52, 34, 0.16);
}

* { box-sizing: border-box; }

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--color-crema);
    color: var(--color-texto);
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

.contenedor {
    width: 95%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 100px 0 60px;
}

h1, h2, h3, h4 {
    font-family: 'DM Sans', sans-serif;
    color: var(--color-oscuro);
    font-weight: 600;
    letter-spacing: 0.2px;
}

h2 { font-size: 30px; margin: 20px 0 16px; padding-bottom: 8px; border-bottom: none; }
h3 { font-size: 19px; margin: 24px 0 10px; }
h4 { font-size: 16px; margin: 0 0 8px; }

/* (el header/topbar y el menú lateral se manejan con las reglas .vz-topbar*
   y .menu-flyout/.menu-padre modernas, definidas más arriba — este bloque
   legacy duplicado y con colores fijos fue eliminado). */

.menu-contenedor {
    position: relative;
    z-index: 301;
}

.submenu {
    padding-left: 12px;
    margin-bottom: 4px;
}

.submenu a {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--color-texto);
}

/* Unificación final de color del menú lateral — normal/hover/activo, igual
   para ítems principales y submódulos (antes el submenú heredaba el color
   de los links genéricos en vez del color de texto normal). */
.menu-flyout a, .menu-padre, .submenu a {
    color: var(--text-2, var(--color-texto)) !important;
}
.menu-flyout a:hover, .menu-padre:hover, .submenu a:hover {
    color: var(--text, var(--color-oscuro)) !important;
}
.menu-flyout a.activo, .submenu a.activo {
    color: var(--selected-text, var(--color-oscuro)) !important;
    background: var(--selected-bg, var(--color-crema-2)) !important;
}
.menu-flyout a.disabled, .menu-padre.disabled, .submenu a.disabled {
    color: var(--text-muted, var(--color-texto-suave)) !important;
    cursor: not-allowed;
    pointer-events: none;
}

/* Modo oscuro: el menú lateral completo usa blanco puro para texto, links,
   flechas e íconos — sin variar por sección ni por estado (solo cambia el
   fondo entre normal/hover/activo). */
html[data-palette="oscura"] .menu-flyout,
html[data-palette="oscura"] .menu-flyout a,
html[data-palette="oscura"] .menu-flyout a:link,
html[data-palette="oscura"] .menu-flyout a:visited,
html[data-palette="oscura"] .menu-flyout a:hover,
html[data-palette="oscura"] .menu-flyout a:active,
html[data-palette="oscura"] .menu-flyout a.activo,
html[data-palette="oscura"] .menu-padre,
html[data-palette="oscura"] .submenu a,
html[data-palette="oscura"] .submenu a:hover,
html[data-palette="oscura"] .submenu a.activo,
html[data-palette="oscura"] .menu-flyout .flecha,
html[data-palette="oscura"] .menu-flyout .vz-sidebar-caret,
html[data-palette="oscura"] .menu-flyout i,
html[data-palette="oscura"] .menu-flyout i[data-lucide],
html[data-palette="oscura"] .menu-flyout svg {
    color: #FFFFFF !important;
    opacity: 1 !important;
}
html[data-palette="oscura"] .menu-flyout a.disabled {
    color: #FFFFFF !important;
    opacity: .5 !important;
}

/* ---------- Enlaces generales ---------- */
a {
    color: var(--color-primario);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

.volver {
    display: inline-block;
    margin: 18px 0 6px;
    font-size: 14px;
    color: var(--color-texto-suave);
}
.volver:hover { color: var(--color-dorado); }

/* ---------- Formularios ---------- */
form div, .campo { margin-bottom: 14px; }

label {
    display: block;
    font-size: 13.5px;
    color: var(--color-texto-suave);
    margin-bottom: 4px;
    font-weight: 500;
}

.req {
    color: var(--color-error);
    font-weight: 700;
}

input, select, textarea {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    padding: 10px 13px;
    border: 1.5px solid var(--color-borde);
    border-radius: var(--radio-sm);
    background: var(--surface, var(--input-bg, #fff));
    color: var(--color-texto);
    width: 100%;
    max-width: 420px;
}

/* Campos de fecha/hora: el ícono toma el verde de la marca, y el foco se
   ve más suave — el calendario emergente en sí lo dibuja el sistema
   operativo/navegador y no se puede re-diseñar por CSS. */
input[type="date"], input[type="time"], input[type="month"] {
    cursor: pointer;
}
/* El input de fecha ya tiene nuestro propio botón de calendario al lado
   (ver nav.php) — se oculta el ícono nativo para no tener dos superpuestos. */
input[type="date"].tiene-calendario-bonito::-webkit-calendar-picker-indicator {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert(48%) sepia(15%) saturate(1200%) hue-rotate(50deg) brightness(90%);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
}
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover {
    background: var(--color-primario-clarito);
}
input[type="date"]:focus, input[type="time"]:focus, input[type="month"]:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px var(--color-primario-clarito);
    outline: none;
}

input[type="checkbox"] { width: auto; max-width: none; }

textarea { min-height: 70px; max-width: 100%; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(86, 99, 63, 0.15);
}

button,
input[type="submit"]{transition: background 0.15s, box-shadow 0.15s, transform 0.05s}

button:active,
input[type="submit"]:active{transform: translateY(1px)}
button:disabled,
input[type="submit"]:disabled{transform: none}

/* Botón secundario: fondo claro, para volver/cancelar/acciones no principales */
.btn-secundario,
a.btn-secundario{transition: background 0.15s, box-shadow 0.15s, transform 0.05s;display: inline-flex;align-items: center;justify-content: center;box-sizing: border-box}

a.btn-secundario:active,
.btn-secundario:active{transform: translateY(1px)}

/* Botón de peligro: para eliminar / cancelar acciones destructivas */

/* Botones tipo "link" usados en acciones de tablas */

/* ---------- Tablas ---------- */
table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 14px;
    background: var(--surface, #fff);
    box-shadow: var(--sombra);
}

th, td {
    border: 1px solid var(--color-borde);
    padding: 10px 12px;
    text-align: left;
    font-size: 14px;
}

th {
    background: var(--color-crema-2);
    color: var(--color-oscuro);
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    position: sticky;
    top: 68px;
    z-index: 50;
}

tr:hover td { background: var(--selected-bg, var(--surface-2, #fdfbf8)); color: var(--text, inherit); }

/* ---------- Bloques / tarjetas ---------- */
.bloque, .seccion {
    background: var(--color-blanco-calido);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: var(--espacio-lg);
    margin-bottom: var(--espacio-lg);
    box-shadow: var(--sombra-sm);
}

.secciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-md);
    margin-top: var(--espacio-lg);
}

.seccion { width: 230px; margin-bottom: 0; }

.resumen {
    background: var(--color-crema-2);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: 18px 22px;
    margin-bottom: 22px;
}

/* ---------- Badges de estado (etiquetas de estado consistentes) ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.badge-exito, .badge-confirmado { background: var(--color-confirmado-fondo); color: var(--color-confirmado); }
.badge-advertencia, .badge-pendiente { background: var(--color-pendiente-fondo); color: var(--color-pendiente-estado); }
.badge-error, .badge-cancelado { background: var(--color-cancelado-fondo); color: var(--color-cancelado); }
.badge-info { background: var(--color-info-fondo); color: var(--color-info); }
.badge-neutro { background: var(--color-crema-2); color: var(--color-texto); }

/* Chips de selección (restricciones, permisos, módulos, etc.) — tono oliva
   para diferenciarlos de los botones y badges de estado. */
.chip-restriccion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--acento-oliva-fondo);
    border: 1px solid var(--acento-oliva);
    color: var(--color-texto);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    margin: 3px 6px 3px 0;
    cursor: pointer;
}
.chip-restriccion:has(input:checked) { background: var(--acento-oliva); border-color: var(--acento-salvia); font-weight: 700; }

/* ---------- Tarjetas KPI (dashboard) ---------- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--espacio-md);
    margin: var(--espacio-lg) 0;
}
.kpi-card {
    background: var(--color-blanco-calido);
    border: 1px solid var(--color-borde);
    border-left: 4px solid var(--color-primario);
    border-radius: var(--radio-md);
    padding: var(--espacio-md) var(--espacio-lg);
    box-shadow: var(--sombra-sm);
    transition: transform 0.15s, box-shadow 0.15s;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); }
.kpi-grid .kpi-card:nth-child(4n+1) { border-left-color: #7A9B76; }
.kpi-grid .kpi-card:nth-child(4n+2) { border-left-color: #8B95C9; }
.kpi-grid .kpi-card:nth-child(4n+3) { border-left-color: #052F5F; }
.kpi-grid .kpi-card:nth-child(4n+4) { border-left-color: #5E503F; }
.kpi-card .kpi-titulo {
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-texto-suave);
    font-weight: 600;
    margin-bottom: 6px;
}
.kpi-card .kpi-numero {
    font-family: 'DM Sans', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--color-oscuro);
    line-height: 1.1;
}
.kpi-card .kpi-detalle {
    font-size: 12.5px;
    color: var(--color-texto-suave);
    margin-top: 4px;
}

/* ---------- Estado vacío ---------- */
.estado-vacio {
    text-align: center;
    padding: var(--espacio-xl) var(--espacio-lg);
    color: var(--color-texto-suave);
    background: var(--color-crema);
    border: 1px dashed var(--color-borde);
    border-radius: var(--radio-md);
}
.estado-vacio .icono { font-size: 30px; margin-bottom: 8px; display: block; }

/* ---------- Mensajes de estado ---------- */
.exito {
    background: var(--color-exito-fondo);
    color: var(--color-exito);
    border: 1px solid #cddab6;
    padding: 10px 16px;
    border-radius: var(--radio-sm);
    font-size: 14px;
    font-weight: 500;
}

.error {
    background: var(--color-error-fondo);
    color: var(--color-error);
    border: 1px solid #e3c3c3;
    padding: 10px 16px;
    border-radius: var(--radio-sm);
    font-size: 14px;
    font-weight: 500;
}

.advertencia {
    background: var(--color-advertencia-fondo);
    color: var(--color-advertencia);
    border: 1px solid #f0d878;
    padding: 10px 16px;
    border-radius: var(--radio-sm);
    font-size: 14px;
    font-weight: 500;
}

.info {
    background: var(--color-info-fondo);
    color: var(--color-info);
    border: 1px solid #c3d6e6;
    padding: 10px 16px;
    border-radius: var(--radio-sm);
    font-size: 14px;
    font-weight: 500;
}

.pendiente {
    color: var(--color-texto-suave);
    font-size: 13px;
    font-style: italic;
}

.dato-faltante {
    background: #fbe4e4 !important;
    color: var(--color-error);
    font-style: italic;
}

/* ---------- Login ---------- */
.pantalla-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(rgba(38,52,34,0.55), rgba(38,52,34,0.55)), url('login_fondo.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 20px;
}

.tarjeta-login {
    background: var(--color-crema);
    border-radius: var(--radio-lg);
    padding: 44px 40px 36px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
    text-align: center;
}

.tarjeta-login img.logo-login {
    height: 78px;
    margin-bottom: 22px;
}

.tarjeta-login h2 {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-texto-suave);
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    margin: 0 0 22px;
}

.tarjeta-login label { text-align: left; }
.tarjeta-login input { max-width: 100%; }
.tarjeta-login button{width: 100%;margin-top: 6px}

/* ---------- Alertas ---------- */
.banner-alerta {
    background: #fdf3d0;
    color: #8a6d00;
    border: 1px solid #f0d878;
    border-radius: 8px;
    padding: 12px 18px;
    margin-bottom: 18px;
    font-size: 14px;
}

.fila-pendiente-sena { background: #fdf3d0 !important; }

/* ---------- Selector de personal con autocompletar ---------- */
.selector-personal { position: relative; margin-bottom: 10px; }
.selector-personal input[type="text"] { width: 100%; }
.sugerencias-personal {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--surface, #fff);
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    max-height: 200px;
    overflow-y: auto;
    z-index: 50;
}
.sugerencias-personal div { padding: 8px 12px; cursor: pointer; font-size: 14px; }
.sugerencias-personal div:hover { background: var(--color-crema-2); }
.chips-personal { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip-personal {
    background: var(--color-crema-2);
    border: 1px solid var(--color-borde);
    border-radius: 16px;
    padding: 5px 10px 5px 14px;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ---------- Secciones de alta colapsables ---------- */
.boton-toggle-alta{margin-bottom: 14px}

.alta-contenido { display: none; margin-bottom: 20px; }
.alta-contenido.abierto { display: block; }

/* ---------- Responsive / Mobile ---------- */
.topbar-derecha input::placeholder { color: rgba(38,52,34,0.5); }
.topbar-derecha input:focus { outline: none; border-color: #263422; background: #ffffff; }

@media (max-width: 900px) {
    .topbar-derecha { display: none !important; }
}

@media (max-width: 768px) {
    .contenedor { padding: 90px 16px 40px; }

    .kpi-grid { grid-template-columns: 1fr; }

    .fila-vino, .fila-producto, .fila-personal, .fila-edades,
    .fila-producto-editable, .fila-consumo {
        flex-wrap: wrap;
    }

    .fila-vino input, .fila-producto input, .fila-producto select,
    .fila-consumo input {
        width: auto;
        flex: 1 1 70px;
    }

    table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

    .menu-flyout { width: 82vw; max-width: 300px; }

    .logo-central { height: 32px; }

    .publica { padding: 30px 16px 60px; }

    input, select, textarea { max-width: 100%; }
}

/* ---------- Sidebar de la sección Eventos (Calendario + Agendas de proveedores) ---------- */
.sidebar-eventos { width: 200px; flex-shrink: 0; }
.sidebar-eventos .sidebar-titulo-agendas { font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--color-texto-suave); font-weight: 600; margin: 20px 0 10px; }
.sidebar-eventos .sidebar-titulo-agendas:first-child { margin-top: 0; }
.sidebar-eventos a {
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    color: #4a5943;
    font-weight: 700;
    font-size: 14.5px;
    margin-bottom: 8px;
}
.sidebar-eventos a:hover { background: var(--color-crema-2); text-decoration: none; }
.sidebar-eventos a.activo {
    background: var(--color-crema-2);
    border-color: var(--color-primario);
    color: var(--color-oscuro);
}
.layout-con-sidebar { display: flex; gap: 28px; align-items: flex-start; }
.layout-con-sidebar .contenido-principal { flex: 1; min-width: 0; }

/* ---------- Calendario personalizado para los inputs de fecha ---------- */
.popup-calendario {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    z-index: 500;
    background: var(--surface-card, #fff);
    border: 1px solid var(--border-strong, var(--color-borde));
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-lg);
    padding: 14px;
    width: 264px;
    font-family: 'DM Sans', sans-serif;
}
.popup-calendario .cal-pop-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; font-family: 'DM Sans', sans-serif; font-weight: 600; color: var(--color-oscuro);
}
.popup-calendario .cal-pop-titulo { font-size: 14px; }

.popup-calendario .cal-pop-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.popup-calendario .cal-pop-dia-nombre { text-align: center; font-size: 10.5px; color: var(--color-texto-suave); font-weight: 600; padding: 4px 0; }
.popup-calendario .cal-pop-dia {
    text-align: center; font-size: 13px; padding: 7px 0; border-radius: 8px; cursor: pointer; color: var(--color-texto);
}
.popup-calendario .cal-pop-dia:hover { background: var(--color-primario-clarito); }
.popup-calendario .cal-pop-dia:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 1px; }
.popup-calendario .cal-pop-dia.hoy { border: 1.5px solid var(--color-primario); font-weight: 700; }
.popup-calendario .cal-pop-dia.seleccionado { background: var(--color-primario); color: var(--text-on-primary, #fff); font-weight: 700; }
.popup-calendario .cal-pop-dia.fuera-de-mes { opacity: .38; }
.popup-calendario .cal-pop-dia.vacio { visibility: hidden; }
.popup-calendario .cal-pop-pie { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-subtle, var(--color-borde)); }

.popup-calendario .cal-pop-hoy-link { text-align: center; margin-top: 8px; }
.popup-calendario .cal-pop-hoy-link a { font-size: 12px; }
.fecha-clickeable-dia { cursor: pointer; }
.fecha-clickeable-dia:hover { opacity: 0.75; }
/* (el botón de calendario se rediseñó más abajo como parte del control único de fecha) */

/* =========================================================================
   TIPOGRAFÍA ÚNICA DEL SISTEMA — DM Sans en todos lados, sin mezclar con
   ninguna otra familia. Esta regla va al final a propósito, para que gane
   por sobre cualquier font-family anterior.
   ========================================================================= */
body,
input,
select,
textarea,
table,
th,
td,
nav,
a,
label,
.badge,
.chip,
.chip-restriccion,
.chip-personal,
.sidebar,
.menu-flyout,
.submenu,
.topbar,
.vz-topbar,
.vz-sidebar,
[style*="DM Sans"],
[style*="Fraunces"],
[style*="Montserrat"],
[style*="Cormorant"],
[style*="Playfair"],
[style*="Lora"],
[style*="Arial"],
[style*="Inter"]{
    font-family: "DM Sans", sans-serif !important;
}

/* Tamaños pedidos */
body, td, .fila-tarea, p { font-size: 14px; }
.menu-flyout a,
.submenu a,
.menu-padre,
input,
select,
textarea{ font-size: 14px; }
th { font-size: 14px; }
h3 { font-size: 22px; }
h2 { font-size: 30px; }

/* Pesos: 400 texto/filas, 500 menú/labels/enlaces/campos, 600 botones/th/activos, 700 títulos principales */
body, td, p, .fila-tarea { font-weight: 400; }
.menu-flyout a, .submenu a, label, a, input, select, textarea { font-weight: 500; }
th,
.menu-flyout a.activo,
.submenu a.activo,
.activo{ font-weight: 600; }
h2 { font-weight: 700; }

/* =========================================================================
   MENÚ LATERAL — única excepción a DM Sans, usa Nunito Sans.
   ========================================================================= */
.menu-flyout, .menu-flyout *, .menu-padre, .menu-padre *, .submenu, .submenu * {
    font-family: "Nunito Sans", sans-serif !important;
    font-size: 14px !important;
}
.menu-flyout > a, .menu-padre {
    height: 44px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; line-height: 1; font-weight: 500 !important; margin: 0;
}
.submenu a {
    height: 42px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px 0 22px; line-height: 1; font-weight: 500 !important; margin: 0;
}
.menu-flyout > a.activo, .submenu a.activo { font-weight: 600 !important; }
.menu-padre .flecha, .menu-padre .vz-sidebar-caret { margin-left: auto; display: inline-flex; align-items: center; }

/* =========================================================================
   CONTRASTE GENERAL
   ========================================================================= */
i[data-lucide], svg.lucide {
    background: #F4F0E7;
    color: #2E3440;
    border-radius: 999px;
    padding: 3px;
    box-sizing: content-box;
}
.vz-multiselect-tag-x i, .chip-personal button i, .vz-tag-x, .tag-x, button.link i, td i[data-lucide] {
    background: transparent !important;
    padding: 0 !important;
    color: inherit !important;
}
.cal-pop-dia{ color: #2E3440; }
.boton-calendario-bonito i, .boton-calendario-bonito svg { background: transparent; }

label, .vz-label { color: #5E503F !important; font-weight: 600 !important; }

input, select, textarea {
    color: #2E3440 !important;
    background: #FFFFFF !important;
    border: 2px solid #CFC4B3 !important;
}
input::placeholder, textarea::placeholder { color: #6B7280 !important; opacity: 1; }
input:disabled, select:disabled, textarea:disabled { color: #6B7280 !important; background: #F4F0E7 !important; }

a,
.badge,
.chip-restriccion,
.chip-personal,
option{
    color-scheme: light;
}
button{color-scheme: light}
.badge, .chip-restriccion, .chip-personal { color: #2E3440; }

/* Mismo nivel de contraste en modo oscuro */
html[data-theme="dark"] label, html[data-theme="dark"] .vz-label { color: #E6DCC8 !important; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea {
    color: #EFE8D9 !important; background: #2B302B !important; border-color: #4A574A !important;
}
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #9EA091 !important; }
html[data-theme="dark"] i[data-lucide], html[data-theme="dark"] svg.lucide { background: #3A4038; color: #EFE8D9; }
html[data-theme="dark"] .badge, html[data-theme="dark"] .chip-restriccion, html[data-theme="dark"] .chip-personal { color: #EFE8D9; }

/* =========================================================================
   ESCALA GENERAL — resto de valores pedidos
   ========================================================================= */
.contenedor{padding-left:32px!important;padding-right:32px!important;}
.seccion-dashboard, .bloque, .resumen, .seccion, table{margin-bottom:24px!important;}
.vz-topbar, .topbar, header.topbar{height:68px!important;}
input,
select,
textarea{height:40px!important;}
textarea{height:auto!important;}

/* =========================================================================
   ÍCONOS SIN FONDO INTERNO — botón Calendario, chips de módulos del
   dashboard y controles similares: el ícono va directo sobre el fondo
   del botón/chip, sin círculo ni recuadro propio detrás.
   ========================================================================= */
.vz-topbar-pill,
.chip-modulo-dashboard,
.menu-flyout a,
.menu-padre,
.submenu a,
.vz-icon-btn,
.vz-tile,
.kpi-card{
    gap: 10px;
}
.boton-calendario-bonito{gap: 10px}
.vz-topbar-pill i[data-lucide], .chip-modulo-dashboard i[data-lucide],
.menu-flyout a i[data-lucide], .menu-padre i[data-lucide],
.boton-calendario-bonito i[data-lucide], .vz-icon-btn i[data-lucide],
.vz-tile-icon i[data-lucide], .kpi-card i[data-lucide] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 18px !important;
    height: 18px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.vz-topbar-pill, .chip-modulo-dashboard {
    display: inline-flex !important;
    align-items: center !important;
}
.chip-modulo-dashboard .chip-modulo-check { display: inline-flex; align-items: center; }

/* =========================================================================
   CAMPOS DE FECHA — input + botón forman UN solo control, con un único
   borde exterior, misma altura, sin superposición ni margen negativo.
   ========================================================================= */
.envoltorio-fecha-unico {
    border: 1px solid var(--input-border, var(--color-borde));
    border-radius: 8px;
    background: var(--input-bg, #fff);
    overflow: hidden;
    height: 40px;
}
.envoltorio-fecha-unico input[type="date"] {
    border: none !important;
    background: transparent !important;
    flex: 1;
    height: 100%;
    min-width: 0;
}
.boton-calendario-bonito{width: 40px !important;min-width: 40px;flex: 0 0 auto;display: flex !important;align-items: center !important;justify-content: center !important}

.boton-calendario-bonito i, .boton-calendario-bonito svg { pointer-events: none; color: var(--icon, inherit); }
.boton-calendario-bonito::before, .boton-calendario-bonito::after { content: none !important; }

/* =========================================================================
   HEADER — colores exactos pedidos
   ========================================================================= */
.vz-topbar, .topbar, header.topbar {
    background: #FFFDF9 !important;
    border-bottom: 2px solid #D9DEE8 !important;
    box-shadow: 0 2px 10px rgba(36,48,66,.08) !important;
}
.vz-topbar-avatar, a.vz-topbar-avatar { background: var(--primary, #1F4D3A) !important; color: var(--text-on-primary, #fff) !important; }

/* =========================================================================
   MENÚ LATERAL — debajo del header, sin superposición
   ========================================================================= */
.menu-flyout {
    top: 68px !important;
    max-height: calc(100vh - 68px) !important;
}

/* =========================================================================
   CALENDARIO — colores semánticos por tipo, fijos y bien diferenciados
   entre sí (azul / violeta / rojo), con buen contraste con texto blanco
   en cualquier paleta o tema.
   ========================================================================= */
:root {
    --cal-evento: #A8D8B9;
    --cal-evento-text: #1D4B31;
    --cal-visita: #8FCBEA;
    --cal-visita-text: #0B2E42;
    --cal-visita-lugar: #B79FD9;
    --cal-visita-lugar-text: #33234A;
    --cal-cancelado: #8C3332;
    --cal-cancelado-text: #FFFFFF;
    --cal-evento-pendiente: #E4DEC9;
    --cal-evento-pendiente-text: #5B5340;
    --cal-hoy-borde: #7A9B76;
    --cal-hoy-fondo: rgba(122,155,118,.12);
}
.cal-celda.hoy { border: 2px solid var(--cal-hoy-borde) !important; background: var(--cal-hoy-fondo) !important; box-shadow: none !important; }

/* =========================================================================
   PALETAS POR USUARIO — Clásica (por defecto), Amarilla, Verde, Azul, Oscura.
   Variables exactas pedidas, con --primary NUNCA usado como color de texto
   general (para eso está --text/--text-2/--text-muted).
   ========================================================================= */
html[data-palette="clasica"], html:not([data-palette]) {
    --bg:#FFFDF9; --surface:#FFFFFF; --surface-2:#F7F4EE; --header-bg:#F6EFE2; --menu-bg:#F8F3EA;
    --input-bg:#FFFFFF; --input-border:#B8C59F; --primary:#6F9658; --primary-hover:#5D8249;
    --secondary:#8B95C9; --accent:#D8B7BE; --text:#24313A; --text-2:#495662; --text-muted:#6B7280;
    --text-on-primary:#FFFFFF; --icon:#35424C; --icon-muted:#5B6670; --link:#4D6F99;
    --success:#5F8F4E; --warning:#C58B18; --danger:#B75D5D; --selected-bg:#EDF4E7; --selected-text:#24313A; --focus:#AAC895;
}
html[data-palette="amarilla"] {
    --bg:#FFFDF8; --surface:#FFFFFF; --surface-2:#FFF6D8; --header-bg:#FFF2C2; --menu-bg:#FFF5D2;
    --input-bg:#FFFFFF; --input-border:#D9B85C; --primary:#C58B18; --primary-hover:#A87310;
    --secondary:#E8B84E; --accent:#F4D77E; --text:#3A3325; --text-2:#5B5344; --text-muted:#746B58;
    --text-on-primary:#FFFFFF; --icon:#5A4823; --icon-muted:#7A6A44; --link:#8C6512;
    --success:#6D8A4B; --warning:#C58B18; --danger:#B75D5D; --selected-bg:#FFF1B8; --selected-text:#3A3325; --focus:#E8B84E;
}
html[data-palette="verde"] {
    --bg:#FBFDF9; --surface:#FFFFFF; --surface-2:#EAF4E4; --header-bg:#DDEED5; --menu-bg:#E5F1DE;
    --input-bg:#FFFFFF; --input-border:#9EBB8E; --primary:#5F8F4E; --primary-hover:#4D783F;
    --secondary:#91B879; --accent:#BDD6A9; --text:#263329; --text-2:#47584A; --text-muted:#657069;
    --text-on-primary:#FFFFFF; --icon:#314334; --icon-muted:#56675A; --link:#4D783F;
    --success:#5F8F4E; --warning:#B68A2E; --danger:#B75D5D; --selected-bg:#DDEED5; --selected-text:#263329; --focus:#91B879;
}
html[data-palette="azul"] {
    --bg:#FBFCFE; --surface:#FFFFFF; --surface-2:#EAF3FB; --header-bg:#DDEBF7; --menu-bg:#E7F0F8;
    --input-bg:#FFFFFF; --input-border:#9EBBD2; --primary:#4779A8; --primary-hover:#38658E;
    --secondary:#7FA8CC; --accent:#B8D5EB; --text:#253342; --text-2:#455565; --text-muted:#637180;
    --text-on-primary:#FFFFFF; --icon:#304355; --icon-muted:#586B7C; --link:#38658E;
    --success:#5F8F4E; --warning:#B68A2E; --danger:#B75D5D; --selected-bg:#DCECF8; --selected-text:#253342; --focus:#7FA8CC;
}
html[data-palette="oscura"] {
    --bg:#1F252C; --surface:#2A3139; --surface-2:#343D47; --header-bg:#252C34; --menu-bg:#2B323B;
    --input-bg:#333C46; --input-border:#5E6975; --primary:#98B883; --primary-hover:#AAC895;
    --secondary:#AAB3DF; --accent:#D6B8C2; --text:#F4F1EA; --text-2:#D5D9DF; --text-muted:#B6BEC8;
    --text-on-primary:#20252B; --icon:#F4F1EA; --icon-muted:#C2C7CF; --link:#BFD0FF;
    --success:#98B883; --warning:#D6B35A; --danger:#D88888; --selected-bg:#414D45; --selected-text:#F4F1EA; --focus:#AAC895;
}

/* Puente: aplica las variables de paleta a TODAS las variables que ya usa
   el sitio, para no reescribir cada selector existente. */
html[data-palette] {
    --surface-page: var(--bg); --surface-page-alt: var(--surface-2); --surface-card: var(--surface);
    --surface-card-hover: var(--selected-bg); --surface-sunken: var(--surface-2); --surface-brand: var(--header-bg);
    --surface-accent-soft: var(--selected-bg); --surface-gold-soft: var(--surface-2); --surface-lilac-soft: var(--surface-2);
    --surface-navy-soft: var(--surface-2);
    --text-strong: var(--text); --text-heading: var(--text); --text-body: var(--text-2); --text-muted: var(--text-muted);
    --text-subtle: var(--text-muted); --text-link: var(--link); --text-link-hover: var(--primary-hover);
    --border-subtle: var(--input-border); --border-default: var(--input-border); --border-strong: var(--input-border); --border-focus: var(--focus);
    --action-primary: var(--primary); --action-primary-hover: var(--primary-hover); --action-primary-fg: var(--text-on-primary);
    --action-secondary: var(--surface); --action-secondary-hover: var(--selected-bg); --action-secondary-fg: var(--text);
    --action-gold: var(--secondary); --action-gold-hover: var(--primary-hover);
    --status-success-bg: var(--surface-2); --status-success-bg: color-mix(in srgb, var(--success) 18%, var(--surface)); --status-success-fg: var(--success); --status-success-bd: var(--success);
    --status-warning-bg: var(--surface-2); --status-warning-bg: color-mix(in srgb, var(--warning) 18%, var(--surface)); --status-warning-fg: var(--warning); --status-warning-bd: var(--warning);
    --status-danger-bg: var(--surface-2); --status-danger-bg: color-mix(in srgb, var(--danger) 18%, var(--surface)); --status-danger-fg: var(--danger); --status-danger-bd: var(--danger);
    --status-neutral-bg: var(--surface-2); --status-neutral-fg: var(--text-2); --status-neutral-bd: var(--input-border);
    --status-info-bg: var(--surface-2); --status-info-bg: color-mix(in srgb, var(--secondary) 18%, var(--surface)); --status-info-fg: var(--secondary); --status-info-bd: var(--secondary);
    --status-accent-bg: var(--surface-2); --status-accent-bg: color-mix(in srgb, var(--secondary) 18%, var(--surface)); --status-accent-fg: var(--secondary); --status-accent-bd: var(--secondary);

    --color-crema: var(--bg); --color-crema-2: var(--surface-2); --color-blanco-calido: var(--surface);
    --color-oscuro: var(--text); --color-texto: var(--text-2); --color-texto-suave: var(--text-muted);
    --color-borde: var(--input-border); --color-primario: var(--primary); --color-primario-oscuro: var(--primary-hover);
    --color-primario-clarito: var(--selected-bg); --color-secundario: var(--secondary); --color-dorado: var(--accent);
    --acento-marino: var(--secondary); --acento-oliva-fondo: var(--selected-bg); --acento-azul-fondo: var(--surface-2);

    --cal-hoy-borde: var(--primary); --cal-hoy-fondo: var(--selected-bg);

    background: var(--bg); color: var(--text-2);
}
html[data-palette] body { background: var(--bg); color: var(--text-2); }
html[data-palette] h1, html[data-palette] h2, html[data-palette] h3, html[data-palette] h4,
html[data-palette] .vz-page-title, html[data-palette] .vz-section-title, html[data-palette] .vz-card-title {
    color: var(--text) !important;
}
html[data-palette] .vz-topbar, html[data-palette] .topbar, html[data-palette] header.topbar { background: var(--header-bg) !important; }
html[data-palette] .menu-flyout, html[data-palette] .vz-sidebar { background: var(--menu-bg) !important; }
html[data-palette] input, html[data-palette] select, html[data-palette] textarea {
    background: var(--input-bg) !important; color: var(--text) !important; border: 1px solid var(--input-border) !important;
}
html[data-palette] label, html[data-palette] .vz-label { color: var(--text-2) !important; }
html[data-palette] .bloque, html[data-palette] .resumen, html[data-palette] .seccion,
html[data-palette] table, html[data-palette] .kpi-card, html[data-palette] .vz-modal,
html[data-palette] .popup-calendario, html[data-palette] .alta-contenido {
    background: var(--surface) !important; border: 1px solid var(--input-border) !important;
}
html[data-palette] .chip-restriccion, html[data-palette] .chip-personal, html[data-palette] .chip-modulo-dashboard {
    background: var(--surface-2) !important; border-color: var(--input-border) !important; color: var(--text-2) !important;
}
html[data-palette] ::placeholder { color: var(--text-muted) !important; opacity: 1; }
html[data-palette] :focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 1px; }
html[data-palette] i[data-lucide], html[data-palette] svg.lucide { color: var(--icon) !important; }
html[data-palette] .pendiente, html[data-palette] .vz-hint { color: var(--text-muted) !important; }
html[data-palette] a:not(.vz-topbar-avatar):not(.vz-topbar-pill):not(.btn-secundario):not(.btn-peligro):not(.boton-toggle-alta):not(.cal-evento):not(.calc-modos .activo):not([style*="background:var(--primary"]):not([style*="background: var(--primary"]):not(th a):not(.vz-btn-sm):not(.vz-btn):not(.ficha-tab-btn):not(.vz-icon-btn) { color: var(--link) !important; }
html[data-palette] .cal-pop-dia.seleccionado{
    background: var(--btn-fill) !important; color: var(--btn-fill-fg) !important;
}
html[data-palette] button:not(.btn-secundario):not(.btn-peligro):not(.link):not(.tarjeta-paleta):not(.ficha-tab-btn):not(.ficha-subtab-btn):not(.vz-icon-btn-limpio):not(.vz-btn-ghost):not(.vz-btn-gold) i[data-lucide] { color: var(--btn-fill-fg) !important; }

/* Tarjetas de paleta en Mi Perfil — siempre transparentes, se distinguen
   solo por el borde (2px normal / 4px si está seleccionada). Sin fondo,
   sin check, sin pseudo-elementos, en ningún estado. */
.tarjeta-paleta,
.tarjeta-paleta:hover,
.tarjeta-paleta:focus,
.tarjeta-paleta:active,
html[data-palette] .tarjeta-paleta,
html[data-palette] .tarjeta-paleta:hover,
html[data-palette] .tarjeta-paleta:focus,
html[data-palette] .tarjeta-paleta:active{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 8px;min-width: 120px;margin: 0}
.tarjeta-paleta::before, .tarjeta-paleta::after { content: none !important; }
.tarjeta-paleta-activa,
html[data-palette] .tarjeta-paleta-activa {
    border: 4px solid var(--primary, var(--color-primario)) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
}

html[data-palette] .chip-restriccion:has(input:checked), html[data-palette] .chip-modulo-dashboard.activo,
html[data-palette] tr.vz-selected, html[data-palette] .cal-celda.hoy,
html[data-palette] .menu-flyout a.activo, html[data-palette] .submenu a.activo {
    background: var(--selected-bg) !important; color: var(--selected-text) !important;
}

/* Refuerzo: ningún ícono lleva fondo/borde/sombra/radio propio en ningún
   contexto — el ícono va directo sobre el fondo del contenedor. */
i[data-lucide], svg.lucide,
.vz-topbar-pill i, .chip-modulo-dashboard i, .menu-flyout a i, .menu-padre i,
.boton-calendario-bonito i, .vz-icon-btn i, .vz-tile-icon i, .kpi-card i,
button i, .badge i, .chip-restriccion i, .cal-boton-crear i {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: 18px; height: 18px;
}
i[data-lucide]::before, i[data-lucide]::after,
.vz-icon-btn::before, .vz-icon-btn::after,
.chip-modulo-dashboard::before, .chip-modulo-dashboard::after {
    content: none !important;
    background: transparent !important;
}

/* =========================================================================
   CONTRASTE — pantallas puntuales con estilos en línea fijos (dashboard:
   accesos rápidos, tarjetas KPI) que no se adaptaban a la paleta Oscura.
   ========================================================================= */
html[data-palette="oscura"] [style*="background:#ffffff"],
html[data-palette="oscura"] [style*="background: #ffffff"] {
    background: var(--surface) !important;
}
html[data-palette="oscura"] [style*="color:#263422"],
html[data-palette="oscura"] [style*="color: #263422"] {
    color: var(--text) !important;
}
html[data-palette="oscura"] [style*="color:#6d7a65"],
html[data-palette="oscura"] [style*="color: #6d7a65"],
html[data-palette="oscura"] [style*="color:#a3968a"] {
    color: var(--text-muted) !important;
}
html[data-palette="oscura"] [style*="border:1px solid #dde6d5"],
html[data-palette="oscura"] [style*="border: 1px solid #dde6d5"],
html[data-palette="oscura"] [style*="border:1.5px dashed #a3b98f"] {
    border-color: var(--border) !important;
}
html[data-palette="oscura"] [style*="box-shadow:0 1px"],
html[data-palette="oscura"] [style*="box-shadow: 0 1px"] {
    box-shadow: 0 1px 4px rgba(0,0,0,.35) !important;
}
/* Buscador del header: legible en cualquier paleta */
.link-limpiar-filtros{display: inline-block}

/* Botón "+ Crear usuario nuevo para esta persona" — mismo lenguaje visual
   que el resto de los botones secundarios del sistema, con medidas
   explícitas para que no quede apretado ni cuadrado. */
.boton-crear-usuario-persona{display:inline-flex;align-items:center;justify-content:center;text-align:center;transition:var(--transition-control)}

/* =========================================================================
   BUSCADOR DEL HEADER — construido desde cero, clases nuevas (hs-*),
   sin relación con ningún intento anterior.
   ========================================================================= */
.vz-topbar-right{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:nowrap;}

.hs-caja{
    display:flex;align-items:center;
    width:300px;height:40px;padding:0;margin:0;box-sizing:border-box;
    background:var(--surface-2,#F7F8FA);border:1px solid var(--border,var(--input-border,#CFC4B3));
    border-radius:999px;overflow:hidden;flex:0 1 300px;min-width:180px;
}
.hs-lupa-bloque{
    display:flex;align-items:center;justify-content:center;
    width:50px;height:100%;flex:0 0 50px;
    border-right:1px solid var(--border,var(--input-border,#CFC4B3));
    background:transparent;
}
.hs-lupa{
    width:18px;height:18px;color:var(--text-muted,#6B7280);
    background:transparent;border:0;pointer-events:none;display:block;
}
.hs-input{
    flex:1;min-width:0;height:100%;margin:0;
    padding-top:0;padding-bottom:0;padding-right:14px;padding-left:12px;
    border:0!important;outline:0!important;background:transparent!important;
    box-shadow:none!important;border-radius:0!important;
    -webkit-appearance:none;appearance:none;
    color:var(--text,#2E3440);font:var(--type-body-sm,14px/1.4 inherit);
}
.hs-input::placeholder{color:var(--text-muted,#6B7280);opacity:1;}
.hs-input::-webkit-search-cancel-button,
.hs-input::-webkit-search-decoration,
.hs-input::-webkit-search-results-button,
.hs-input::-webkit-search-results-decoration{
    -webkit-appearance:none;appearance:none;display:none;
}
.hs-input::before,.hs-input::after,
.hs-caja::before,.hs-caja::after{content:none!important;}

@media (max-width:900px){.hs-caja{width:220px;flex-basis:220px;}}
@media (max-width:720px){.hs-caja{width:180px;flex-basis:180px;min-width:0;}}

/* === VVZ v137: proveedores ERP === */
.check-inline-proveedor {
    display:flex;
    align-items:center;
    gap:10px;
    margin:10px 0;
}
.check-inline-proveedor input {
    width:auto !important;
    margin:0 !important;
}
.alerta-reemplazo-predeterminado {
    padding:14px;
    border:1px solid var(--warning,#C58B25);
    border-radius:10px;
    background:color-mix(in srgb,var(--warning,#C58B25) 10%,transparent);
}
.alerta-reemplazo-predeterminado label {
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin:10px 12px 0 0;
}
.proveedores-evento-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:16px;
}
.proveedor-evento-card {
    margin:0 !important;
}
.proveedor-evento-precio {
    display:grid;
    grid-template-columns:minmax(0,1fr) 110px;
    gap:10px;
}
.acciones-proveedor-evento {
    display:flex;
    gap:10px;
    margin-top:12px;
}
@media(max-width:768px){
    .proveedores-evento-grid{grid-template-columns:1fr;}
    .proveedor-evento-precio{grid-template-columns:1fr;}
    .acciones-proveedor-evento{flex-direction:column;}
    .acciones-proveedor-evento>*{width:100% !important;}
}

/* === VVZ v139: detalles desde perfiles y eliminación asistida === */
.modal-eliminacion-perfil[hidden]{display:none !important;}
.modal-eliminacion-perfil{
    position:fixed;inset:0;z-index:7000;display:flex;align-items:center;justify-content:center;
    padding:20px;background:rgba(17,23,29,.62);
}
.modal-eliminacion-panel{
    position:relative;width:min(680px,calc(100vw - 32px));max-height:calc(100vh - 40px);
    overflow:auto;padding:26px;border:1px solid var(--input-border,var(--color-borde));
    border-radius:16px;background:var(--surface,#fff);color:var(--text,var(--color-texto));
    box-shadow:0 24px 70px rgba(0,0,0,.28);
}
.modal-eliminacion-panel-grande{width:min(900px,calc(100vw - 32px));}
.modal-eliminacion-cerrar{position:absolute;top:12px;right:12px;width:38px !important;min-width:38px !important}
.alerta-eliminacion-vinculos{
    padding:12px 14px;margin:12px 0;border:1px solid var(--warning,#c58b25);
    border-radius:10px;background:color-mix(in srgb,var(--warning,#c58b25) 10%,transparent);
}
.detalle-vinculos-perfil{display:none;max-height:330px;overflow:auto;margin:14px 0;}
.detalle-vinculos-perfil.visible{display:block;}
.detalle-vinculos-perfil section,.revision-perfil-card{
    padding:12px 14px;margin:10px 0;border:1px solid var(--input-border,var(--color-borde));
    border-radius:10px;background:var(--surface-2,#f7f4ee);
}
.detalle-vinculos-perfil ul,.lista-actividad-perfil{margin:8px 0;padding-left:20px;}
.acciones-eliminacion-perfil{
    display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:18px;
}
.lista-revision-perfiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;}
.actividad-perfil h4{margin:16px 0 6px;}
body.modal-abierto{overflow:hidden;}
@media(max-width:768px){
    .modal-eliminacion-perfil{align-items:flex-end;padding:10px;}
    .modal-eliminacion-panel{width:100%;padding:22px 16px 16px;border-radius:18px;}
    .acciones-eliminacion-perfil{display:grid;grid-template-columns:1fr;}
    .acciones-eliminacion-perfil>*{width:100% !important;}
    .lista-revision-perfiles{grid-template-columns:1fr;}
}

/* === VVZ v140: más aire entre acciones de Agenda === */
.agenda-acciones-tabla {
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:14px !important;
    margin:22px 0 20px !important;
}

.agenda-acciones-tabla > a{
    margin:0 !important;
}
.agenda-acciones-tabla > .btn-secundario,
.agenda-acciones-tabla > button{margin:0 !important}

.agenda-barra-seleccion {
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:12px !important;
    margin-top:2px !important;
}

@media (max-width:768px) {
    .agenda-acciones-tabla {
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:14px !important;
        margin:20px 0 !important;
    }

    .agenda-acciones-tabla > *,
    .agenda-barra-seleccion > * {
        width:100% !important;
    }

    .agenda-barra-seleccion {
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:12px !important;
    }
}

/* === VVZ v142: espaciado vertical uniforme del menú lateral === */

/* Todas las filas del menú usan exactamente la misma altura y separación. */
.menu-flyout {
    gap:0 !important;
}

.menu-level-1,
.menu-level-2,
.menu-level-3 {
    height:44px !important;
    min-height:44px !important;
    margin:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    line-height:1.2 !important;
}

/* Los contenedores de subniveles no agregan espacios diferentes. */
.menu-flyout .submenu,
.menu-flyout .nivel-3-contenedor {
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    margin:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
}

/* Anula el margen legacy que hacía que Proveedores quedara pegado a Agenda. */
.menu-flyout .submenu {
    margin-bottom:0 !important;
}

/* Texto y flechas perfectamente centrados en altura. */
.menu-level-1 .menu-level-texto,
.menu-level-2 .menu-level-texto,
.menu-level-3 .menu-level-texto,
.menu-level-1 .menu-level-flecha,
.menu-level-2 .menu-level-flecha,
.menu-level-3 .menu-level-flecha {
    align-self:center !important;
}

/* Mantiene únicamente la jerarquía horizontal. */
.menu-level-1 { padding-left:20px !important; }
.menu-level-2 { padding-left:48px !important; }
.menu-level-3 { padding-left:78px !important; }

/* === VVZ v144: submódulos cerrados + filas uniformes === */

/* Respeta el estado abierto/cerrado que controla nav.php.
   Corrige la regla anterior que forzaba todos los submenús a display:flex. */
.menu-flyout .submenu[style*="display: none"],
.menu-flyout .nivel-3-contenedor[style*="display: none"] {
    display:none !important;
}

.menu-flyout .submenu[style*="display: block"],
.menu-flyout .nivel-3-contenedor[style*="display: block"] {
    display:block !important;
}

/* Los contenedores no agregan espacios propios; la altura pertenece a cada fila. */
.menu-flyout .submenu,
.menu-flyout .nivel-3-contenedor {
    margin:0 !important;
    padding:0 !important;
    gap:0 !important;
}

/* Misma altura y separación para todas las filas visibles. */
.menu-flyout .menu-level-1,
.menu-flyout .menu-level-2,
.menu-flyout .menu-level-3 {
    box-sizing:border-box !important;
    height:44px !important;
    min-height:44px !important;
    margin:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    align-items:center !important;
}

/* === VVZ v146: centrado vertical real de Proveedores === */

/* El texto puede ser span o enlace. Ambos ocupan toda la altura de la fila
   y centran el contenido verticalmente de la misma manera. */
.menu-flyout .menu-level-1 > .menu-level-texto,
.menu-flyout .menu-level-2 > .menu-level-texto,
.menu-flyout .menu-level-3 > .menu-level-texto {
    display:flex !important;
    align-items:center !important;
    align-self:stretch !important;
    height:100% !important;
    min-height:0 !important;
    box-sizing:border-box !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    line-height:1.2 !important;
}

/* Proveedores usa un <a> dentro de una fila <div>; anulamos las reglas
   genéricas de enlaces que alteraban su posición vertical. */
.menu-flyout .menu-level-2 > a.menu-level-texto {
    padding-right:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

/* La flecha también ocupa toda la altura y queda exactamente centrada. */
.menu-flyout .menu-level-1 > .menu-level-flecha,
.menu-flyout .menu-level-2 > .menu-level-flecha,
.menu-flyout .menu-level-3 > .menu-level-flecha {
    height:100% !important;
    align-self:stretch !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    margin:0 !important;
}

/* === VVZ v148: Reservas directo desde el título === */
.menu-flyout a.menu-level-con-submenu {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 34px !important;
    align-items:center !important;
    height:44px !important;
    min-height:44px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    text-decoration:none !important;
}

.menu-flyout a.menu-level-con-submenu > .menu-level-texto {
    display:flex !important;
    align-items:center !important;
    height:100% !important;
}

.menu-flyout a.menu-level-con-submenu > .menu-level-flecha {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:34px !important;
    height:100% !important;
    cursor:pointer !important;
    border-radius:8px !important;
}

.menu-flyout a.menu-level-con-submenu > .menu-level-flecha:hover,
.menu-flyout a.menu-level-con-submenu > .menu-level-flecha:focus-visible {
    background:var(--surface-2,rgba(127,127,127,.12)) !important;
    outline:none !important;
}

/* Elimina cualquier espacio que hubiera quedado reservado para el hijo duplicado. */
#submenu-reservas {
    margin:0 !important;
    padding:0 !important;
}

/* === VVZ v149: resúmenes de actividad y retorno a ficha del cliente === */
.enlace-resumen-asociado {
    display:inline !important;
    width:auto !important;
    min-width:0 !important;
    height:auto !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:var(--link,var(--color-enlace,#436b9e)) !important;
    font:inherit !important;
    text-decoration:underline !important;
    box-shadow:none !important;
    cursor:pointer !important;
}
.enlace-resumen-asociado:hover {
    text-decoration:none !important;
}

.modal-resumen-asociado[hidden] { display:none !important; }
.modal-resumen-asociado {
    position:fixed;
    inset:0;
    z-index:7200;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(17,23,29,.62);
}
.modal-resumen-panel {
    position:relative;
    width:min(680px,calc(100vw - 32px));
    max-height:calc(100vh - 40px);
    overflow:auto;
    padding:28px;
    border:1px solid var(--input-border,var(--color-borde));
    border-radius:16px;
    background:var(--surface,#fff);
    color:var(--text,var(--color-texto));
    box-shadow:0 24px 70px rgba(0,0,0,.28);
}
.modal-resumen-cerrar{position:absolute;top:12px;right:12px;width:38px !important;min-width:38px !important}
.resumen-asociado-grid {
    display:grid;
    grid-template-columns:minmax(150px,190px) minmax(0,1fr);
    gap:0;
    margin:18px 0 4px;
    border:1px solid var(--input-border,var(--color-borde));
    border-radius:12px;
    overflow:hidden;
}
.resumen-asociado-grid dt,
.resumen-asociado-grid dd {
    margin:0;
    padding:11px 14px;
    border-bottom:1px solid var(--input-border,var(--color-borde));
}
.resumen-asociado-grid dt {
    font-weight:700;
    background:var(--surface-2,#f5f3ee);
}
.resumen-asociado-grid dd {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}
.resumen-asociado-grid dt:nth-last-of-type(1),
.resumen-asociado-grid dd:last-child {
    border-bottom:0;
}
.acciones-resumen-asociado {
    display:flex;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:10px;
    margin-top:20px;
}
.btn-enlace-principal{display:inline-flex;align-items:center;justify-content:center}

@media(max-width:768px) {
    .modal-resumen-asociado {
        align-items:flex-end;
        padding:10px;
    }
    .modal-resumen-panel {
        width:100%;
        padding:24px 16px 16px;
        border-radius:18px;
    }
    .resumen-asociado-grid {
        grid-template-columns:1fr;
    }
    .resumen-asociado-grid dt {
        padding-bottom:4px;
        border-bottom:0;
    }
    .resumen-asociado-grid dd {
        padding-top:4px;
    }
    .acciones-resumen-asociado {
        display:grid;
        grid-template-columns:1fr;
    }
    .acciones-resumen-asociado > * {
        width:100% !important;
    }
}

/* === VVZ v150: más aire en visita y ocultar secciones vacías === */
.acciones-cabecera-visita {
    display:flex;
    align-items:center;
    margin:20px 0 22px;
}

.acciones-cabecera-visita #boton-editar-visita {
    margin:0 !important;
}

.actividad-cliente-seccion {
    margin-top:30px;
}

.actividad-cliente-seccion > h3 {
    margin:0 0 14px;
}

.actividad-cliente-seccion > table,
.actividad-cliente-seccion > .tabla-scroll {
    margin-top:0;
}

@media (max-width:768px) {
    .acciones-cabecera-visita {
        margin:18px 0 20px;
    }

    .acciones-cabecera-visita #boton-editar-visita {
        width:auto !important;
        min-width:110px;
    }

    .actividad-cliente-seccion {
        margin-top:24px;
    }
}

/* === VVZ v151: "Ver resumen" sin fondo === */
.enlace-resumen-asociado,
.enlace-resumen-asociado:hover,
.enlace-resumen-asociado:focus,
.enlace-resumen-asociado:focus-visible,
.enlace-resumen-asociado:active {
    display:inline !important;
    width:auto !important;
    min-width:0 !important;
    height:auto !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    background-color:transparent !important;
    box-shadow:none !important;
    outline:none !important;
    color:var(--link,var(--color-enlace,#436b9e)) !important;
    font:inherit !important;
    text-decoration:underline !important;
    appearance:none !important;
    -webkit-appearance:none !important;
}

.enlace-resumen-asociado:hover {
    text-decoration:none !important;
}

/* === VVZ v152: menú de Eventos más limpio === */

/* Deja aire entre el botón móvil "Menú" y el título Principal. */
.sidebar-eventos-titulo-principal {
    margin-top:14px !important;
}

/* Calendario y Consultas deben verse exactamente iguales:
   sin fondo, sin recuadro, sin borde ni sombra. */
.sidebar-eventos a.sidebar-eventos-link-principal,
.sidebar-eventos a.sidebar-eventos-link-principal:hover,
.sidebar-eventos a.sidebar-eventos-link-principal:focus,
.sidebar-eventos a.sidebar-eventos-link-principal:focus-visible,
.sidebar-eventos a.sidebar-eventos-link-principal:active,
.sidebar-eventos a.sidebar-eventos-link-principal.activo {
    display:block !important;
    padding:12px 14px !important;
    margin:0 0 8px !important;
    border:0 !important;
    border-color:transparent !important;
    border-radius:0 !important;
    background:transparent !important;
    background-color:transparent !important;
    box-shadow:none !important;
    outline:none !important;
    color:var(--link,var(--color-enlace,#4f73a6)) !important;
    text-decoration:none !important;
}

/* El hover solo cambia suavemente el texto, sin crear un fondo. */
.sidebar-eventos a.sidebar-eventos-link-principal:hover {
    text-decoration:underline !important;
}

/* En mobile el botón Menú queda visualmente separado del bloque lateral,
   incluso si fue agregado por una versión posterior de eventos.php. */
@media (max-width:768px) {
    .sidebar-eventos {
        padding-top:10px !important;
    }

    .sidebar-eventos-titulo-principal {
        margin-top:12px !important;
    }

    .sidebar-eventos-toggle,
[data-toggle="menu-eventos"]{
        margin-bottom:12px !important;
    }

}

/* === VVZ v153: Ver resumen como texto de celda + contraste de Roles === */

/* "Ver resumen" conserva la función de botón, pero visualmente se integra
   a la tabla igual que PERSONAS, ESTADO y el resto de las celdas. */
td .enlace-resumen-asociado,
td .enlace-resumen-asociado:hover,
td .enlace-resumen-asociado:focus,
td .enlace-resumen-asociado:focus-visible,
td .enlace-resumen-asociado:active {
    display:inline !important;
    width:auto !important;
    min-width:0 !important;
    height:auto !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:none !important;
    background-color:transparent !important;
    box-shadow:none !important;
    outline:none !important;
    color:inherit !important;
    font:inherit !important;
    font-weight:400 !important;
    line-height:inherit !important;
    text-decoration:none !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    cursor:pointer !important;
    vertical-align:baseline !important;
}

td .enlace-resumen-asociado:hover,
td .enlace-resumen-asociado:focus-visible {
    text-decoration:underline !important;
}

/* Roles legibles en modo oscuro. */
html[data-theme="dark"] .badge-info,
html[data-theme="dark"] .badge-info a{
    color:var(--text,#F4F1E8) !important;
}

html[data-theme="dark"] .badge-info {
    background:var(--surface-2,#343D47) !important;
    border-color:var(--border-strong,#718096) !important;
    box-shadow:none !important;
}

/* También cubre la variante de paleta oscura guardada por nombre. */
html[data-palette="oscura"] .badge-info,
html[data-palette="oscura"] .badge-info a{
    color:var(--text,#F4F1E8) !important;
}

html[data-palette="oscura"] .badge-info {
    background:var(--surface-2,#343D47) !important;
    border-color:var(--border-strong,#718096) !important;
}

/* === VVZ v154: Calendario y Consultas con el mismo formato que Proveedores === */

/* Estado normal: sin subrayado, sin borde visible y fondo transparente. */
.sidebar-eventos a.sidebar-eventos-link-principal,
.sidebar-eventos a.sidebar-eventos-link-principal:link,
.sidebar-eventos a.sidebar-eventos-link-principal:visited {
    display:block !important;
    padding:12px 14px !important;
    margin:0 0 8px !important;
    border:0 !important;
    border-radius:12px !important;
    background:transparent !important;
    box-shadow:none !important;
    color:var(--link,var(--color-enlace,#4f73a6)) !important;
    text-decoration:none !important;
    transition:background-color .16s ease !important;
}

/* Hover/focus: fondo apenas más claro, bordes redondeados, sin subrayado. */
.sidebar-eventos a.sidebar-eventos-link-principal:hover,
.sidebar-eventos a.sidebar-eventos-link-principal:focus,
.sidebar-eventos a.sidebar-eventos-link-principal:focus-visible {
    background:var(--surface-2,rgba(127,127,127,.12)) !important;
    border:0 !important;
    border-radius:12px !important;
    box-shadow:none !important;
    outline:none !important;
    text-decoration:none !important;
}

/* Activo: mismo criterio visual que los proveedores activos. */
.sidebar-eventos a.sidebar-eventos-link-principal.activo,
.sidebar-eventos a.sidebar-eventos-link-principal:active {
    background:var(--surface-2,rgba(127,127,127,.12)) !important;
    border:0 !important;
    border-radius:12px !important;
    box-shadow:none !important;
    text-decoration:none !important;
}

/* === VVZ v155: "Ver resumen" idéntico al texto de una celda === */

/* Reinicia por completo el estilo de botón para que visualmente sea igual
   al texto normal de ESTADO, PERSONAS y las demás celdas. */
table td button.enlace-resumen-asociado,
table td button.enlace-resumen-asociado:hover,
table td button.enlace-resumen-asociado:focus,
table td button.enlace-resumen-asociado:focus-visible,
table td button.enlace-resumen-asociado:active{display:inline !important;box-sizing:border-box !important;text-align:inherit !important;vertical-align:baseline !important}

/* Solo al pasar el mouse se indica que es clickeable, sin cambiar fondo,
   tamaño, color ni formato de la celda. */

/* === VVZ v156: Eventos, Consultas, proveedores y calendario === */

/* Altas: conserva ambos botones y evita que futuras versiones pisen uno. */
.acciones-altas-eventos {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;
    margin:14px 0 16px;
}
.acciones-altas-eventos > * {
    margin:0 !important;
}
.acciones-altas-eventos .btn-nueva-consulta{display:inline-flex;align-items:center;justify-content:center}

/* Lista / Tablero con aire real entre ambos. */
.selector-vista-consultas {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:4px;
    border-radius:10px;
    background:var(--surface-2,#f4f1ea);
}
.selector-vista-consultas button{margin:0 !important}

/* Tablero: exactamente cuatro columnas en la primera fila y tres en la segunda. */
.tablero-consultas-grid {
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:16px !important;
    align-items:start !important;
    overflow:visible !important;
    padding-bottom:14px;
}
.columna-tablero-consultas {
    min-width:0 !important;
    width:auto !important;
    background:var(--surface-2,#f4f1ea) !important;
    border-radius:14px !important;
    padding:14px !important;
}

/* Proveedores: página completa visible, nunca panel vacío. */
.agenda-proveedores-layout {
    display:flex;
    gap:28px;
    align-items:flex-start;
}
.agendas-contenido {
    flex:1;
    min-width:0;
}
.agendas-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

/* Calendario de eventos: mismo criterio de superficies que el calendario general. */
html[data-theme="dark"] #vista-calendario-eventos .cal-celda,
html[data-palette="oscura"] #vista-calendario-eventos .cal-celda {
    background:var(--surface,#2A3139) !important;
    color:var(--text,#F4F1E8) !important;
    border-color:var(--input-border,#596675) !important;
}
html[data-theme="dark"] #vista-calendario-eventos .cal-numero,
html[data-theme="dark"] #vista-calendario-eventos .cal-dia-nombre,
html[data-palette="oscura"] #vista-calendario-eventos .cal-numero,
html[data-palette="oscura"] #vista-calendario-eventos .cal-dia-nombre {
    color:var(--text,#F4F1E8) !important;
}
html[data-theme="dark"] #vista-calendario-eventos .cal-celda.hoy,
html[data-palette="oscura"] #vista-calendario-eventos .cal-celda.hoy {
    background:var(--selected-bg,#34463A) !important;
    border-color:var(--primary,#9CC386) !important;
}
html[data-theme="dark"] .cal-nav-lista a,
html[data-palette="oscura"] .cal-nav-lista a {
    background:var(--surface,#2A3139) !important;
    color:var(--text,#F4F1E8) !important;
    border-color:var(--input-border,#596675) !important;
}

@media(max-width:1100px) {
    .tablero-consultas-grid {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}
@media(max-width:768px) {
    .acciones-altas-eventos {
        display:grid;
        grid-template-columns:1fr;
        gap:12px;
    }
    .acciones-altas-eventos > * {
        width:100% !important;
    }
    .selector-vista-consultas {
        gap:10px;
        width:auto;
    }
    .tablero-consultas-grid {
        grid-template-columns:1fr !important;
    }
    .agenda-proveedores-layout {
        display:block;
    }
    .agenda-proveedores-layout .sidebar-eventos {
        margin-bottom:20px;
    }
    .agendas-header {
        align-items:flex-start;
    }
}

/* === VVZ v157: "Ver resumen" con el mismo fondo que la celda === */

/* La celda completa conserva exactamente el fondo y formato de la tabla. */
table td:has(> .enlace-resumen-asociado) {
    background:inherit !important;
    color:inherit !important;
}

/* El botón ocupa solo el texto y hereda todo de la celda:
   mismo fondo, mismo color, misma tipografía y sin recuadro propio. */
table td > .enlace-resumen-asociado,
table td > .enlace-resumen-asociado:hover,
table td > .enlace-resumen-asociado:focus,
table td > .enlace-resumen-asociado:focus-visible,
table td > .enlace-resumen-asociado:active {
    all:unset !important;
    display:inline !important;
    box-sizing:border-box !important;
    background:transparent !important;
    background-color:transparent !important;
    color:inherit !important;
    font:inherit !important;
    line-height:inherit !important;
    text-decoration:none !important;
    cursor:pointer !important;
    vertical-align:baseline !important;
}

/* No cambia el fondo ni aparece ningún resaltado al pasar el mouse. */
table td > .enlace-resumen-asociado:hover,
table td > .enlace-resumen-asociado:focus-visible {
    background:transparent !important;
    color:inherit !important;
    text-decoration:underline !important;
    text-underline-offset:2px !important;
    outline:none !important;
    box-shadow:none !important;
}

/* Refuerzo específico para modo oscuro. */
html[data-theme="dark"] table td > .enlace-resumen-asociado,
html[data-palette="oscura"] table td > .enlace-resumen-asociado {
    background:transparent !important;
    color:inherit !important;
}

/* === VVZ v158: filtro de Conversión de Consultas alineado === */
.filtros-conversion {
    display:flex !important;
    align-items:flex-end !important;
    flex-wrap:wrap !important;
    gap:12px !important;
}

.filtros-conversion > label {
    display:flex !important;
    flex-direction:column !important;
    gap:4px !important;
    margin:0 !important;
}

.filtros-conversion > a{
    margin:0 !important;
    align-self:flex-end !important;
}
.filtros-conversion > button{margin:0 !important;align-self:flex-end !important}

@media (max-width:768px) {
    .filtros-conversion {
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        align-items:end !important;
    }

    .filtros-conversion > a{
        width:auto !important;
    }
.filtros-conversion > button{width:auto !important}
}

/* === VVZ v159: eliminar resaltado verde de selección en "Ver resumen" === */

/* El fondo verde no provenía del botón: era el color global de selección
   de texto (::selection). Impedimos que este control pueda seleccionarse. */
table td > button.enlace-resumen-asociado{-webkit-user-select:none !important;user-select:none !important;-webkit-touch-callout:none !important}

/* Refuerzo para navegadores que mantienen una selección previa. */
table td > button.enlace-resumen-asociado::selection,
table td > button.enlace-resumen-asociado *::selection {
    background:transparent !important;
    color:inherit !important;
}

table td > button.enlace-resumen-asociado::-moz-selection,
table td > button.enlace-resumen-asociado *::-moz-selection {
    background:transparent !important;
    color:inherit !important;
}

/* Mantiene el control visualmente idéntico al texto de la celda. */

/* === VVZ v160: alineación exacta del filtro de Conversión === */
.filtros-conversion-exactos {
    display:flex !important;
    align-items:flex-start !important;
    flex-wrap:wrap !important;
    gap:12px !important;
}

.campo-filtro-conversion{
    display:grid !important;
    grid-template-rows:20px 46px !important;
    gap:4px !important;
    margin:0 !important;
    align-items:stretch !important;
}
.accion-filtro-conversion{display:grid !important;grid-template-rows:20px 46px !important;gap:4px !important;margin:0 !important;align-items:stretch !important}

.campo-filtro-conversion > span,
.accion-filtro-conversion > .espaciador-etiqueta {
    display:flex !important;
    align-items:flex-end !important;
    height:20px !important;
    margin:0 !important;
    font-weight:600 !important;
    line-height:1 !important;
}

.accion-filtro-conversion > .espaciador-etiqueta {
    visibility:hidden !important;
    user-select:none !important;
}

.campo-filtro-conversion input[type="date"]{
    box-sizing:border-box !important;
    height:46px !important;
    min-height:46px !important;
    margin:0 !important;
}
.accion-filtro-conversion button{box-sizing:border-box !important;margin:0 !important}

.accion-filtro-conversion button{align-self:stretch !important}

.accion-quitar-conversion > a {
    display:flex !important;
    align-items:center !important;
    height:46px !important;
    margin:0 !important;
    padding:0 4px !important;
}

@media (max-width:768px) {
    .filtros-conversion-exactos {
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:12px !important;
    }

    .accion-filtro-conversion button{width:100% !important}

    .accion-quitar-conversion{grid-column:span 1}
}

/* === VVZ v161: Ver resumen reconstruido desde cero === */

/*
La celda ya no contiene un BUTTON.
La propia TD es clickeable, por lo que recibe exactamente el mismo fondo,
tipografía, color, altura y bordes que las demás celdas de la fila.
*/
table td.celda-resumen-asociado {
    background:inherit !important;
    background-color:inherit !important;
    color:inherit !important;
    font:inherit !important;
    font-weight:inherit !important;
    line-height:inherit !important;
    text-decoration:none !important;
    box-shadow:none !important;
    outline:none !important;
    cursor:pointer !important;
    user-select:none !important;
    -webkit-user-select:none !important;
}

/* No se agrega ningún fondo, borde interno ni color especial. */
table td.celda-resumen-asociado:hover,
table td.celda-resumen-asociado:active,
table td.celda-resumen-asociado:focus,
table td.celda-resumen-asociado:focus-visible {
    background:inherit !important;
    background-color:inherit !important;
    color:inherit !important;
    box-shadow:inset 0 0 0 2px var(--primary,var(--color-primario)) !important;
    outline:none !important;
    text-decoration:none !important;
}

/* Elimina cualquier resaltado de selección dentro de esta celda. */
table td.celda-resumen-asociado::selection {
    background:transparent !important;
    color:inherit !important;
}
table td.celda-resumen-asociado::-moz-selection {
    background:transparent !important;
    color:inherit !important;
}

/* === VVZ v162: resumen clickeable + hover sutil === */

/* Anula el borde fuerte agregado en v161. */
table td.celda-resumen-asociado:hover,
table td.celda-resumen-asociado:active,
table td.celda-resumen-asociado:focus,
table td.celda-resumen-asociado:focus-visible {
    outline:none !important;
    box-shadow:none !important;
    border-color:inherit !important;
    text-decoration:none !important;
}

/* Al pasar el mouse o enfocar, cambia apenas el fondo de toda la celda. */
table td.celda-resumen-asociado:hover,
table td.celda-resumen-asociado:focus-visible {
    background:color-mix(
        in srgb,
        var(--surface-2, #e8ede3) 28%,
        transparent
    ) !important;
}

/* Compatibilidad para navegadores sin color-mix. */
@supports not (background: color-mix(in srgb, white 10%, transparent)) {
    table td.celda-resumen-asociado:hover,
    table td.celda-resumen-asociado:focus-visible {
        background:rgba(127,127,127,.08) !important;
    }
}

/* === VVZ v163: contraste del botón "Ir a ficha..." en el popup === */

/* Fuerza contraste correcto sobre el botón principal del resumen,
   sin depender del color global de enlaces. */
.modal-resumen-asociado .btn-enlace-principal,
.modal-resumen-asociado .btn-enlace-principal:link,
.modal-resumen-asociado .btn-enlace-principal:visited,
.modal-resumen-asociado .btn-enlace-principal:hover,
.modal-resumen-asociado .btn-enlace-principal:focus,
.modal-resumen-asociado .btn-enlace-principal:focus-visible,
.modal-resumen-asociado .btn-enlace-principal:active{opacity:1 !important}

/* En modo oscuro también conserva texto claro y legible. */

/* Hover apenas más oscuro, sin perder contraste. */

/* === VVZ v164: botón Ir a ficha reconstruido sin estilos de enlace === */

/* Ya no es un <a>: ahora es un <button>, por lo que ningún color global
   de enlaces visitados, hover o navegación puede volverlo azul. */
.modal-resumen-asociado button.btn-ir-ficha-resumen,
.modal-resumen-asociado button.btn-ir-ficha-resumen:hover,
.modal-resumen-asociado button.btn-ir-ficha-resumen:focus,
.modal-resumen-asociado button.btn-ir-ficha-resumen:focus-visible,
.modal-resumen-asociado button.btn-ir-ficha-resumen:active{display:inline-flex !important;align-items:center !important;justify-content:center !important;margin:0 !important;opacity:1 !important}

/* === VVZ v167: selector de mes del calendario general === */

/* Mes/año arriba e ícono perfectamente centrado debajo. */
.cal-titulo-selector-vertical {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    text-align:center !important;
}

.cal-titulo-selector-vertical h2 {
    margin:0 !important;
    text-align:center !important;
}

/* Ícono de calendario visible y con alto contraste. */
.boton-selector-mes-general,
.boton-selector-mes-general:hover,
.boton-selector-mes-general:focus,
.boton-selector-mes-general:focus-visible,
.boton-selector-mes-general:active{display:inline-flex !important;align-items:center !important;justify-content:center !important;width:46px !important;min-width:46px !important;margin:0 auto !important}

.boton-selector-mes-general svg {
    display:block !important;
    width:22px !important;
    height:22px !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.9 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}

/* El selector debe ser un popup real, no quedar abierto debajo del calendario. */
.modal-selector-mes[hidden] {
    display:none !important;
}

.modal-selector-mes {
    position:fixed !important;
    inset:0 !important;
    z-index:9500 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:20px !important;
    background:rgba(17,23,29,.55) !important;
}

.modal-selector-mes-panel {
    position:relative !important;
    width:min(360px,calc(100vw - 32px)) !important;
    max-width:360px !important;
    max-height:calc(100vh - 40px) !important;
    overflow:auto !important;
    padding:24px !important;
    border:1px solid var(--input-border,var(--color-borde)) !important;
    border-radius:16px !important;
    background:var(--surface,#ffffff) !important;
    color:var(--text,var(--color-texto)) !important;
    box-shadow:0 24px 70px rgba(0,0,0,.28) !important;
}

.modal-selector-mes-panel h3 {
    margin:0 44px 18px 0 !important;
}

.modal-selector-mes-cerrar{position:absolute !important;top:12px !important;right:12px !important;width:36px !important;min-width:36px !important}

.modal-selector-mes-campos {
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    align-items:end !important;
}

.modal-selector-mes-campos label {
    display:block !important;
    margin-bottom:6px !important;
}

.modal-selector-mes-campos select {
    width:100% !important;
    height:44px !important;
    margin:0 !important;
}

.modal-selector-mes-acciones {
    display:flex !important;
    justify-content:flex-end !important;
    gap:10px !important;
    margin-top:20px !important;
}

@media (max-width:600px) {
    .modal-selector-mes {
        padding:14px !important;
    }

    .modal-selector-mes-panel {
        width:min(330px,100%) !important;
        padding:22px 16px 16px !important;
    }

    .modal-selector-mes-campos {
        grid-template-columns:1fr 1fr !important;
        gap:10px !important;
    }

    .modal-selector-mes-acciones {
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
    }

    .modal-selector-mes-acciones > * {
        width:100% !important;
    }
}

/* === VVZ v168: filtro de Reservas por rango de fechas === */

.form-filtros-reservas-rango {
    display:grid !important;
    grid-template-columns:minmax(280px,1.4fr) minmax(180px,1fr) minmax(180px,1fr) auto !important;
    gap:14px !important;
    align-items:end !important;
}

.grupo-filtro-fechas-reservas {
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    grid-column:1 / -1 !important;
}

.grupo-filtro-fechas-reservas > div,
.form-filtros-reservas-rango > div {
    min-width:0 !important;
}

.grupo-filtro-fechas-reservas input[type="date"] {
    width:100% !important;
    box-sizing:border-box !important;
}

.ayuda-filtro-rango-reservas {
    grid-column:1 / -1 !important;
    margin:-4px 0 2px !important;
    color:var(--text-muted,var(--color-texto-suave)) !important;
    font-size:13px !important;
    font-style:italic !important;
}

.acciones-filtro-rango-reservas {
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:10px !important;
}

.acciones-filtro-rango-reservas > * {
    margin:0 !important;
}

.encabezado-rango-reservas {
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:7px !important;
    margin:18px 0 14px !important;
    padding:12px 16px !important;
    border:1px solid var(--input-border,var(--color-borde)) !important;
    border-radius:12px !important;
    background:var(--surface-2,var(--fondo-secundario,#f4f1ea)) !important;
    color:var(--text,var(--color-texto)) !important;
}

.volver-listado-reservas {
    margin:0 0 18px !important;
}

.volver-listado-reservas .volver {
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    color:var(--link,var(--color-enlace,#436b9e)) !important;
    text-decoration:none !important;
}

@media (max-width:900px) {
    .form-filtros-reservas-rango {
        grid-template-columns:1fr 1fr !important;
    }

    .grupo-filtro-fechas-reservas {
        grid-column:1 / -1 !important;
    }

    .acciones-filtro-rango-reservas {
        grid-column:1 / -1 !important;
    }
}

@media (max-width:600px) {
    .form-filtros-reservas-rango,
    .grupo-filtro-fechas-reservas {
        grid-template-columns:1fr !important;
    }

    .acciones-filtro-rango-reservas {
        display:grid !important;
        grid-template-columns:1fr !important;
    }

    .acciones-filtro-rango-reservas > * {
        width:100% !important;
    }

    .encabezado-rango-reservas {
        align-items:flex-start !important;
        justify-content:flex-start !important;
    }
}

/* === VVZ v169: botón Mes actual en el selector del calendario === */

.modal-selector-mes-acciones-tres {
    display:grid !important;
    grid-template-columns:auto auto auto !important;
    justify-content:end !important;
    align-items:center !important;
    gap:10px !important;
}

.modal-selector-mes-acciones-tres > * {
    margin:0 !important;
    white-space:nowrap !important;
}

@media (max-width:600px) {
    .modal-selector-mes-acciones-tres {
        grid-template-columns:1fr !important;
        justify-content:stretch !important;
    }

    .modal-selector-mes-acciones-tres > * {
        width:100% !important;
    }
}

/* === VVZ v170: días no disponibles en calendario público === */
#popup-calendario-reserva .cal-pop-dia.no-disponible,
#popup-calendario-reserva .cal-pop-dia.no-disponible:hover,
#popup-calendario-reserva .cal-pop-dia.no-disponible:focus {
    color:#d6d1ca !important;
    background:transparent !important;
    border-color:transparent !important;
    font-weight:400 !important;
    text-decoration:none !important;
    cursor:default !important;
    pointer-events:none !important;
    opacity:.72 !important;
    box-shadow:none !important;
    outline:none !important;
}

/* Mantiene una diferencia suave y legible también si la página pública
   llegara a mostrarse con una paleta oscura. */
html[data-theme="dark"] #popup-calendario-reserva .cal-pop-dia.no-disponible,
html[data-palette="oscura"] #popup-calendario-reserva .cal-pop-dia.no-disponible {
    color:#707985 !important;
    opacity:.68 !important;
}

/* === VVZ v171: popup de mes sin botón Cancelar === */
.modal-selector-mes-acciones-dos {
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    width:100% !important;
    margin-top:20px !important;
}

.modal-selector-mes-acciones-dos > * {
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    white-space:nowrap !important;
}

@media (max-width:600px) {
    .modal-selector-mes-acciones-dos {
        grid-template-columns:1fr 1fr !important;
    }
}

/* === VVZ v172: reservas públicas ordenadas y datos completos de traslado === */

/* Experiencias centradas, manteniendo el selector a la izquierda. */
.publica .exp-card {
    display:grid !important;
    grid-template-columns:24px minmax(0,1fr) 24px !important;
    align-items:center !important;
    gap:10px !important;
    min-height:104px !important;
    padding:16px 18px !important;
}

.publica .exp-card > input[type="radio"] {
    grid-column:1 !important;
    grid-row:1 !important;
    align-self:center !important;
    justify-self:center !important;
    width:16px !important;
    height:16px !important;
    margin:0 !important;
}

.publica .exp-card-contenido {
    grid-column:2 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    min-width:0 !important;
    text-align:center !important;
}

.publica .exp-card-titulo,
.publica .exp-card-contenido .pendiente {
    display:block !important;
    width:100% !important;
    text-align:center !important;
}

/* Todos los checkboxes quedan exactamente al costado del texto. */
.publica .fila-checkbox-publica {
    margin:12px 0 18px !important;
}

.publica .fila-checkbox-publica > label {
    display:inline-flex !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:10px !important;
    width:auto !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    cursor:pointer !important;
}

.publica .fila-checkbox-publica input[type="checkbox"] {
    position:static !important;
    flex:0 0 18px !important;
    width:18px !important;
    min-width:18px !important;
    height:18px !important;
    margin:2px 0 0 !important;
    padding:0 !important;
    transform:none !important;
    appearance:auto !important;
    -webkit-appearance:checkbox !important;
    box-shadow:none !important;
    outline:none !important;
}

.publica .fila-checkbox-publica input[type="checkbox"]:focus,
.publica .fila-checkbox-publica input[type="checkbox"]:focus-visible,
.publica .fila-checkbox-publica input[type="checkbox"]:checked {
    outline:none !important;
    box-shadow:none !important;
}

.publica .fila-checkbox-publica label > span {
    display:block !important;
    min-width:0 !important;
    line-height:1.45 !important;
}

/* Datos del traslado compactos y ordenados. */
.publica .bloque-datos-traslado {
    margin:10px 0 24px !important;
    padding:16px !important;
    border:1px solid var(--input-border,var(--color-borde)) !important;
    border-radius:12px !important;
    background:var(--surface-2,var(--color-crema-2,#f7f4ed)) !important;
}

.publica .grid-datos-traslado {
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:14px !important;
    align-items:end !important;
}

.publica .campo-direccion-traslado {
    grid-column:1 / -1 !important;
}

.publica .grid-datos-traslado input,
.publica .grid-datos-traslado select {
    width:100% !important;
    box-sizing:border-box !important;
}

.publica .zonas-cubiertas-traslado {
    margin:12px 0 0 !important;
    font-size:13px !important;
}

/* Chips internos de restricciones: mismo criterio de alineación. */
.publica .chip-restriccion {
    display:inline-flex !important;
    align-items:center !important;
    gap:7px !important;
}

.publica .chip-restriccion input[type="checkbox"] {
    position:static !important;
    width:16px !important;
    height:16px !important;
    margin:0 !important;
    appearance:auto !important;
    -webkit-appearance:checkbox !important;
    box-shadow:none !important;
}

@media (max-width:600px) {
    .publica .exp-card {
        grid-template-columns:24px minmax(0,1fr) !important;
        min-height:0 !important;
        padding:16px 14px !important;
    }

    .publica .exp-card-contenido {
        grid-column:2 !important;
    }

    .publica .grid-datos-traslado {
        grid-template-columns:1fr !important;
    }

    .publica .campo-direccion-traslado {
        grid-column:auto !important;
    }
}

/* === VVZ v173: filtro rápido activo en Tareas === */
.filtros-rapidos-tareas {
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    margin:14px 0 !important;
}

.filtros-rapidos-tareas .filtro-rapido-tarea {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:38px !important;
    padding:7px 16px !important;
    border-width:1px !important;
    border-style:solid !important;
    border-radius:999px !important;
    text-decoration:none !important;
    box-sizing:border-box !important;
    transition:border-width .12s ease, box-shadow .12s ease !important;
}

/* La opción seleccionada se distingue por un borde más grueso,
   sin cambiar el color propio de cada filtro. */
.filtros-rapidos-tareas .filtro-rapido-tarea.activo {
    border-width:3px !important;
    box-shadow:0 0 0 1px color-mix(in srgb, currentColor 18%, transparent) !important;
    font-weight:700 !important;
}

/* Evita que el aumento de borde mueva los botones. */
.filtros-rapidos-tareas .filtro-rapido-tarea:not(.activo) {
    box-shadow:inset 0 0 0 1px transparent !important;
}

@media (max-width:768px) {
    .filtros-rapidos-tareas {
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px !important;
    }

    .filtros-rapidos-tareas .filtro-rapido-tarea {
        width:100% !important;
    }
}

/* === VVZ v174: alerta de traslado a medida === */

/* Aviso público: rojo y negrita. */
.publica .aviso-traslado-cotizacion {
    margin:8px 0 12px !important;
    color:#b42318 !important;
    font-weight:800 !important;
    font-style:normal !important;
    line-height:1.45 !important;
}

/* Listado interno: destaca toda la reserva sin perder legibilidad. */
#tabla-visitas-principal tbody tr.fila-traslado-a-cotizar > td {
    background:color-mix(in srgb, #f4b740 16%, var(--surface,#ffffff)) !important;
    border-top:2px solid #d98b00 !important;
    border-bottom:2px solid #d98b00 !important;
}

#tabla-visitas-principal tbody tr.fila-traslado-a-cotizar > td:first-child {
    border-left:5px solid #d98b00 !important;
}

#tabla-visitas-principal tbody tr.fila-traslado-a-cotizar:hover > td {
    background:color-mix(in srgb, #f4b740 24%, var(--surface,#ffffff)) !important;
}

.alerta-traslado-medida-listado {
    color:#a15c00 !important;
    font-weight:800 !important;
}

html[data-theme="dark"] #tabla-visitas-principal tbody tr.fila-traslado-a-cotizar > td,
html[data-palette="oscura"] #tabla-visitas-principal tbody tr.fila-traslado-a-cotizar > td {
    background:color-mix(in srgb, #d98b00 20%, var(--surface,#2A3139)) !important;
    color:var(--text,#F4F1E8) !important;
}

html[data-theme="dark"] .alerta-traslado-medida-listado,
html[data-palette="oscura"] .alerta-traslado-medida-listado {
    color:#ffd27a !important;
}

/* Calendario general: el día queda suavemente destacado. */
.cal-celda.dia-con-traslado-a-cotizar {
    border:2px solid #d98b00 !important;
    background:color-mix(in srgb, #f4b740 10%, var(--surface,#ffffff)) !important;
}

.cal-alerta-traslado {
    display:block !important;
    margin-top:5px !important;
    padding:4px 6px !important;
    border:1px solid #d98b00 !important;
    border-radius:7px !important;
    background:#fff3cd !important;
    color:#7a4300 !important;
    font-size:10.5px !important;
    font-weight:800 !important;
    line-height:1.25 !important;
    text-decoration:none !important;
}

.cal-alerta-traslado:hover,
.cal-alerta-traslado:focus-visible {
    background:#ffe69c !important;
    color:#5f3500 !important;
    text-decoration:none !important;
}

html[data-theme="dark"] .cal-celda.dia-con-traslado-a-cotizar,
html[data-palette="oscura"] .cal-celda.dia-con-traslado-a-cotizar {
    background:color-mix(in srgb, #d98b00 16%, var(--surface,#2A3139)) !important;
    border-color:#f0b64f !important;
}

html[data-theme="dark"] .cal-alerta-traslado,
html[data-palette="oscura"] .cal-alerta-traslado {
    background:#594014 !important;
    border-color:#f0b64f !important;
    color:#ffe2a6 !important;
}

@media (max-width:768px) {
    .cal-alerta-traslado {
        font-size:9.5px !important;
        padding:3px 4px !important;
    }
}

/* === VVZ v180: acciones compactas en Reservas === */
.acciones-tabla-reservas {
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:12px !important;
    margin:14px 0 !important;
}

.acciones-tabla-reservas .accion-tabla-reserva{display:inline-flex !important;align-items:center !important;justify-content:center !important;width:auto !important;min-width:0 !important;margin:0 !important}

/* === VVZ v180: To-do rápido === */
.todo-rapido-bloque {
    margin:22px 0 20px !important;
    padding:18px !important;
    border:1px solid var(--input-border,var(--color-borde)) !important;
    border-radius:14px !important;
    background:var(--surface,var(--color-fondo-tarjeta,#fff)) !important;
}

.todo-rapido-encabezado {
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:14px !important;
    margin-bottom:14px !important;
}

.todo-rapido-encabezado h3 {
    margin:0 0 4px !important;
}

.todo-rapido-encabezado p {
    margin:0 !important;
    color:var(--text-muted,var(--color-texto-suave)) !important;
    font-size:13px !important;
    font-style:italic !important;
}

.todo-rapido-form {
    display:grid !important;
    grid-template-columns:minmax(240px,1fr) minmax(170px,230px) auto !important;
    align-items:center !important;
    gap:10px !important;
    margin:0 0 14px !important;
}

.todo-rapido-form input,
.todo-rapido-form select{
    height:42px !important;
    min-height:42px !important;
    margin:0 !important;
}
.todo-rapido-form button{margin:0 !important}

.todo-rapido-lista {
    display:grid !important;
    gap:8px !important;
}

.todo-rapido-item {
    display:grid !important;
    grid-template-columns:32px minmax(0,1fr) 32px !important;
    align-items:center !important;
    gap:10px !important;
    padding:9px 10px !important;
    border:1px solid var(--border-subtle,var(--color-borde)) !important;
    border-radius:10px !important;
    background:var(--surface-2,var(--color-crema-2,#f7f4ed)) !important;
}

.todo-toggle-form,
.todo-eliminar-form {
    margin:0 !important;
}

.todo-check,
.todo-eliminar-form button{display:inline-flex !important;align-items:center !important;justify-content:center !important;width:30px !important;min-width:30px !important;margin:0 !important}

.todo-rapido-texto {
    display:flex !important;
    flex-direction:column !important;
    min-width:0 !important;
    gap:2px !important;
}

.todo-rapido-texto span {
    overflow-wrap:anywhere !important;
}

.todo-rapido-texto small {
    color:var(--text-muted,var(--color-texto-suave)) !important;
}

.todo-rapido-item.completado .todo-rapido-texto span {
    text-decoration:line-through !important;
    opacity:.65 !important;
}

.todo-vacio {
    margin:2px 0 0 !important;
}

@media (max-width:700px) {
    .acciones-tabla-reservas {
        gap:14px !important;
    }

    .todo-rapido-bloque {
        padding:14px !important;
    }

    .todo-rapido-form {
        grid-template-columns:1fr !important;
    }

    .todo-rapido-form button{width:100% !important}
}

/* === VVZ v182: To-do personal y compacto === */
.todo-rapido-bloque {
    margin:18px 0 18px !important;
    padding:14px !important;
}

.todo-rapido-encabezado {
    margin-bottom:10px !important;
}

.todo-rapido-encabezado h3 {
    margin:0 !important;
}

.todo-rapido-form {
    grid-template-columns:minmax(220px,1fr) auto !important;
    gap:8px !important;
    margin-bottom:10px !important;
}

.todo-rapido-form input{
    height:38px !important;
    min-height:38px !important;
}

.todo-rapido-lista {
    gap:6px !important;
}

.todo-rapido-item {
    grid-template-columns:28px minmax(0,1fr) 28px !important;
    gap:8px !important;
    padding:6px 8px !important;
    min-height:40px !important;
}

.todo-check,
.todo-eliminar-form button{width:26px !important;min-width:26px !important}

.todo-rapido-texto {
    display:block !important;
}

.todo-rapido-texto span {
    line-height:1.3 !important;
}

@media (max-width:700px) {
    .todo-rapido-form {
        grid-template-columns:minmax(0,1fr) auto !important;
    }

    .todo-rapido-form button{width:auto !important}
}

/* === VVZ v183: filtros de Tareas perfectamente alineados === */
.filtros-tareas-grid {
    display:grid !important;
    grid-template-columns:repeat(4,minmax(180px,1fr)) !important;
    gap:14px !important;
    align-items:start !important;
}
.filtros-tareas-grid > div {
    display:grid !important;
    grid-template-rows:22px 44px !important;
    gap:6px !important;
    min-width:0 !important;
    margin:0 !important;
    align-self:start !important;
}
.filtros-tareas-grid > div > label {
    display:flex !important;
    align-items:flex-end !important;
    min-height:22px !important;
    margin:0 !important;
    line-height:1.1 !important;
}
.filtros-tareas-grid input[type="text"],
.filtros-tareas-grid input[type="date"],
.filtros-tareas-grid select {
    width:100% !important;
    height:44px !important;
    min-height:44px !important;
    margin:0 !important;
    box-sizing:border-box !important;
}
.filtros-tareas-grid .filtros-tareas-checks {
    grid-column:1 / -1 !important;
    display:grid !important;
    grid-template-columns:repeat(5,minmax(150px,1fr)) !important;
    grid-template-rows:auto !important;
    gap:10px 14px !important;
    padding:4px 0 !important;
}
.filtros-tareas-grid .filtros-tareas-checks > label {
    display:flex !important;
    align-items:center !important;
    min-height:38px !important;
    margin:0 !important;
    padding:8px 10px !important;
    border:1px solid var(--input-border,var(--color-borde)) !important;
    border-radius:10px !important;
    background:var(--surface-2,var(--fondo-secundario)) !important;
}
.filtros-tareas-grid .filtros-tareas-checks input[type="checkbox"] {
    flex:0 0 18px !important;
    width:18px !important;
    height:18px !important;
    margin:0 !important;
}
.filtros-tareas-grid .filtros-tareas-acciones {
    grid-column:1 / -1 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:12px !important;
    min-height:44px !important;
    grid-template-rows:auto !important;
}
@media (max-width:1100px) {
    .filtros-tareas-grid { grid-template-columns:repeat(3,minmax(170px,1fr)) !important; }
    .filtros-tareas-grid .filtros-tareas-checks { grid-template-columns:repeat(3,minmax(150px,1fr)) !important; }
}
@media (max-width:768px) {
    .filtros-tareas-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
    .filtros-tareas-grid .filtros-tareas-checks { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:480px) {
    .filtros-tareas-grid { grid-template-columns:1fr !important; }
    .filtros-tareas-grid .filtros-tareas-checks { grid-template-columns:1fr 1fr !important; }
    .filtros-tareas-grid .filtros-tareas-acciones { display:grid !important; grid-template-columns:1fr !important; }
}

/* === VVZ v184: asociación opcional de tareas a eventos === */
.asociar-evento-tarea {
    grid-column:1 / -1 !important;
    margin:2px 0 !important;
}

.fila-checkbox-tarea {
    display:inline-flex !important;
    align-items:center !important;
    gap:10px !important;
    width:auto !important;
    margin:0 !important;
    cursor:pointer !important;
}

.fila-checkbox-tarea input[type="checkbox"] {
    position:static !important;
    width:18px !important;
    min-width:18px !important;
    height:18px !important;
    margin:0 !important;
    box-shadow:none !important;
}

.bloque-evento-asociado {
    margin-top:12px !important;
    padding:14px !important;
    border:1px solid var(--input-border,var(--color-borde)) !important;
    border-radius:12px !important;
    background:var(--surface-2,var(--fondo-secundario,#f7f4ed)) !important;
}

.bloque-evento-asociado > label {
    margin-bottom:6px !important;
}

@media (max-width:768px) {
    .bloque-evento-asociado {
        padding:12px !important;
    }
}

/* === VVZ v206: header + menú móvil corregidos === */
.vz-topbar-mobile-search-toggle{display:none !important;}
.vz-topbar-theme-toggle{display:inline-flex;}

@media (max-width:900px){
    .layout-con-sidebar,
    .agenda-proveedores-layout{
        display:block !important;
    }

    .layout-con-sidebar > .sidebar-eventos,
    .agenda-proveedores-layout > .sidebar-eventos,
    .sidebar-eventos{
        width:100% !important;
        max-width:none !important;
        position:static !important;
        top:auto !important;
        align-self:auto !important;
        max-height:none !important;
        overflow:visible !important;
        margin:0 0 18px !important;
        padding-top:0 !important;
        box-sizing:border-box !important;
    }

    .layout-con-sidebar .contenido-principal,
    .agenda-proveedores-layout .agendas-contenido{
        width:100% !important;
        min-width:0 !important;
    }

    .sidebar-eventos a,
    .sidebar-eventos .sidebar-eventos-link-principal{
        width:100% !important;
        box-sizing:border-box !important;
    }
}

@media (max-width:768px){
    :root{ --topbar-h:72px; }

    .contenedor{
        width:100% !important;
        padding:88px 16px 40px !important;
    }

    .vz-topbar,
    .topbar,
    header.topbar{
        display:grid !important;
        grid-template-columns:44px minmax(0,1fr) auto !important;
        align-items:center !important;
        gap:10px !important;
        height:72px !important;
        min-height:72px !important;
        padding:10px 14px !important;
        overflow:visible !important;
    }

    .vz-topbar-left,
    .vz-topbar-center,
    .vz-topbar-right{
        min-width:0 !important;
        margin:0 !important;
        padding:0 !important;
    }

    .vz-topbar-left{
        gap:0 !important;
    }

    .vz-topbar-left .vz-topbar-pill{
        display:none !important;
    }

    .vz-topbar-center{
        justify-content:center !important;
        overflow:hidden !important;
    }

    .vz-topbar-center > a,
    .vz-topbar-center > img{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        max-width:100% !important;
    }

    .logo-central{
        height:30px !important;
        width:auto !important;
        max-width:min(180px, 48vw) !important;
        object-fit:contain !important;
    }

    .vz-topbar-right{
        justify-content:flex-end !important;
        gap:8px !important;
    }

    .hs-caja{
        display:none !important;
    }

    .hs-caja.abierto-mobile{
        display:flex !important;
        position:fixed !important;
        top:82px !important;
        left:14px !important;
        right:14px !important;
        width:auto !important;
        min-width:0 !important;
        max-width:none !important;
        z-index:750 !important;
        box-shadow:0 12px 30px rgba(38,52,34,.14) !important;
        background:var(--surface,#fff) !important;
    }

    .hs-caja.abierto-mobile .hs-input{
        display:block !important;
    }

    .vz-topbar-mobile-search-toggle{
        display:inline-flex !important;
    }

    .vz-topbar-theme-toggle{
        display:none !important;
    }

    .vz-topbar-avatar,
    a.vz-topbar-avatar,
    .vz-topbar .vz-icon-btn{
        width:40px !important;
        height:40px !important;
        flex:0 0 40px !important;
    }

    .menu-contenedor{
        position:relative !important;
    }

    .menu-flyout{
        position:fixed !important;
        top:80px !important;
        left:14px !important;
        right:14px !important;
        width:auto !important;
        max-width:none !important;
        max-height:calc(100vh - 96px) !important;
        overflow-y:auto !important;
        border-radius:18px !important;
        z-index:760 !important;
    }

    .menu-flyout .menu-level-1,
    .menu-flyout .menu-level-2,
    .menu-flyout .menu-level-3{
        min-height:46px !important;
        height:auto !important;
    }

    .menu-flyout .menu-level-texto{
        white-space:normal !important;
        word-break:break-word !important;
    }
}

@media (max-width:480px){
    .contenedor{
        padding:86px 12px 34px !important;
    }

    .vz-topbar,
    .topbar,
    header.topbar{
        grid-template-columns:44px minmax(0,1fr) 88px !important;
        gap:8px !important;
        padding:10px 12px !important;
    }

    .logo-central{
        max-width:42vw !important;
        height:28px !important;
    }

    .vz-topbar-right{
        gap:6px !important;
    }

    .hs-caja.abierto-mobile{
        left:12px !important;
        right:12px !important;
    }

    .menu-flyout{
        left:12px !important;
        right:12px !important;
    }
}

/* === VVZ v207: menú móvil uniforme + tablas sin encabezados superpuestos === */
.tabla-mobile-scroll{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    box-sizing:border-box;
}

@media (max-width:768px){
    /* Menú lateral: cada fila mide exactamente lo mismo. */
    .menu-flyout{
        display:none;
        flex-direction:column !important;
        justify-content:flex-start !important;
        align-content:stretch !important;
        align-items:stretch !important;
        align-self:auto !important;
        gap:0 !important;
        height:auto !important;
        min-height:0 !important;
        padding:8px !important;
    }

    .menu-flyout .menu-level-1,
    .menu-flyout .menu-level-2,
    .menu-flyout .menu-level-3{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) 32px !important;
        align-items:center !important;
        width:100% !important;
        height:48px !important;
        min-height:48px !important;
        max-height:48px !important;
        margin:0 !important;
        padding-top:0 !important;
        padding-right:8px !important;
        padding-bottom:0 !important;
        border-radius:10px !important;
        box-sizing:border-box !important;
        line-height:1.2 !important;
        flex:0 0 48px !important;
    }

    .menu-flyout .menu-level-1{ padding-left:16px !important; }
    .menu-flyout .menu-level-2{ padding-left:34px !important; }
    .menu-flyout .menu-level-3{ padding-left:52px !important; }

    .menu-flyout .menu-level-1 > .menu-level-texto,
    .menu-flyout .menu-level-2 > .menu-level-texto,
    .menu-flyout .menu-level-3 > .menu-level-texto{
        display:flex !important;
        align-items:center !important;
        align-self:center !important;
        width:100% !important;
        height:48px !important;
        min-height:48px !important;
        margin:0 !important;
        padding:0 !important;
        line-height:1.2 !important;
        white-space:normal !important;
        word-break:normal !important;
        overflow-wrap:normal !important;
    }

    .menu-flyout .menu-level-1 > .menu-level-flecha,
    .menu-flyout .menu-level-2 > .menu-level-flecha,
    .menu-flyout .menu-level-3 > .menu-level-flecha{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        align-self:center !important;
        width:32px !important;
        height:48px !important;
        min-height:48px !important;
        margin:0 !important;
        padding:0 !important;
    }

    .menu-flyout .submenu,
    .menu-flyout .nivel-3-contenedor{
        margin:0 !important;
        padding:0 !important;
        gap:0 !important;
        height:auto !important;
        min-height:0 !important;
    }

    .menu-flyout .submenu[style*="display: block"],
    .menu-flyout .nivel-3-contenedor[style*="display: block"]{
        display:block !important;
    }

    .menu-flyout .submenu[style*="display: none"],
    .menu-flyout .nivel-3-contenedor[style*="display: none"]{
        display:none !important;
    }

    /* Tablas: se desplazan horizontalmente y el encabezado queda en su fila real. */
    .tabla-mobile-scroll{
        margin:14px 0 24px !important;
        border:1px solid var(--border-subtle,var(--color-borde)) !important;
        border-radius:16px !important;
        background:var(--surface,#fff) !important;
        box-shadow:var(--sombra-sm,0 2px 10px rgba(38,52,34,.06)) !important;
    }

    .tabla-mobile-scroll > table,
    .tabla-scroll > table,
    .vz-table-scroll > table,
    .vz-table-wrap > table{
        display:table !important;
        width:max-content !important;
        min-width:100% !important;
        max-width:none !important;
        margin:0 !important;
        table-layout:auto !important;
        border-collapse:collapse !important;
        overflow:visible !important;
        white-space:normal !important;
        box-shadow:none !important;
    }

    .tabla-mobile-scroll thead,
    .tabla-scroll thead,
    .vz-table-scroll thead,
    .vz-table-wrap thead{
        display:table-header-group !important;
        position:static !important;
        top:auto !important;
        z-index:auto !important;
    }

    .tabla-mobile-scroll tbody,
    .tabla-scroll tbody,
    .vz-table-scroll tbody,
    .vz-table-wrap tbody{
        display:table-row-group !important;
        position:static !important;
    }

    .tabla-mobile-scroll tr,
    .tabla-scroll tr,
    .vz-table-scroll tr,
    .vz-table-wrap tr{
        display:table-row !important;
        position:static !important;
        height:auto !important;
    }

    .tabla-mobile-scroll th,
    .tabla-mobile-scroll td,
    .tabla-scroll th,
    .tabla-scroll td,
    .vz-table-scroll th,
    .vz-table-scroll td,
    .vz-table-wrap th,
    .vz-table-wrap td{
        display:table-cell !important;
        position:static !important;
        top:auto !important;
        z-index:auto !important;
        min-width:120px !important;
        max-width:280px !important;
        height:auto !important;
        padding:10px 12px !important;
        vertical-align:middle !important;
        white-space:normal !important;
        word-break:normal !important;
        overflow-wrap:break-word !important;
        line-height:1.35 !important;
    }

    .tabla-mobile-scroll th,
    .tabla-scroll th,
    .vz-table-scroll th,
    .vz-table-wrap th{
        background:var(--surface-2,var(--color-crema-2)) !important;
    }

    /* Ningún encabezado de tabla queda pegado al header en mobile. */
    table th,
    table thead th{
        position:static !important;
        top:auto !important;
        z-index:auto !important;
    }
}

/* === VVZ v208: columna de selección oculta hasta pedirla === */
/* Las reglas responsive de tablas no deben volver visibles los checkboxes. */
table .col-seleccion,
.tabla-mobile-scroll .col-seleccion,
.tabla-scroll .col-seleccion,
.vz-table-scroll .col-seleccion,
.vz-table-wrap .col-seleccion {
    display:none !important;
}

body.modo-seleccion-filas table .col-seleccion,
body.modo-seleccion-filas .tabla-mobile-scroll .col-seleccion,
body.modo-seleccion-filas .tabla-scroll .col-seleccion,
body.modo-seleccion-filas .vz-table-scroll .col-seleccion,
body.modo-seleccion-filas .vz-table-wrap .col-seleccion {
    display:table-cell !important;
    width:58px !important;
    min-width:58px !important;
    max-width:58px !important;
    padding-left:10px !important;
    padding-right:10px !important;
    text-align:center !important;
}

body.modo-seleccion-filas .col-seleccion input[type="checkbox"] {
    display:inline-block !important;
    width:20px !important;
    min-width:20px !important;
    height:20px !important;
    margin:0 !important;
    vertical-align:middle !important;
}

/* Segundo listado seleccionable en la misma página (ej: Stock > Últimos
   movimientos, junto al listado de Productos que ya usa .col-seleccion). */
table .col-seleccion-mov,
.tabla-mobile-scroll .col-seleccion-mov,
.tabla-scroll .col-seleccion-mov,
.vz-table-scroll .col-seleccion-mov,
.vz-table-wrap .col-seleccion-mov {
    display:none !important;
}
body.modo-seleccion-filas-mov table .col-seleccion-mov,
body.modo-seleccion-filas-mov .tabla-mobile-scroll .col-seleccion-mov,
body.modo-seleccion-filas-mov .tabla-scroll .col-seleccion-mov,
body.modo-seleccion-filas-mov .vz-table-scroll .col-seleccion-mov,
body.modo-seleccion-filas-mov .vz-table-wrap .col-seleccion-mov {
    display:table-cell !important;
    width:58px !important;
    min-width:58px !important;
    max-width:58px !important;
    padding-left:10px !important;
    padding-right:10px !important;
    text-align:center !important;
}
body.modo-seleccion-filas-mov .col-seleccion-mov input[type="checkbox"] {
    display:inline-block !important;
    width:20px !important;
    min-width:20px !important;
    height:20px !important;
    margin:0 !important;
    vertical-align:middle !important;
}

/* === VVZ v209: confirmación de estados, consultas alineadas e historial === */
body.vvz-modal-abierto { overflow: hidden !important; }
.vvz-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(31, 37, 44, .42);
    backdrop-filter: blur(2px);
}
.vvz-confirm-overlay.activo { display: flex; }
.vvz-confirm-card {
    position: relative;
    width: min(100%, 560px);
    padding: 28px;
    border: 1px solid var(--input-border, var(--color-borde));
    border-radius: 22px;
    background: var(--surface, #fffdf9);
    color: var(--text, #263422);
    box-shadow: 0 24px 65px rgba(31, 37, 44, .22);
}
.vvz-confirm-card h3 { margin: 0 48px 12px 0 !important; font-size: 24px !important; }
.vvz-confirm-card p { margin: 0; line-height: 1.55; color: var(--text-muted, #5f6a75); }
.vvz-confirm-close{position: absolute;top: 16px;right: 16px;width: 38px !important;min-width: 38px !important;display: inline-flex !important;align-items: center;justify-content: center}
.vvz-confirm-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
}
.estado-guardado-inline {
    display: inline-block;
    min-width: 72px;
    margin-left: 7px;
    font-size: 12px;
    vertical-align: middle;
}

#form-crear-consulta.form-consulta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 18px !important;
    align-items: start !important;
}
#form-crear-consulta.form-consulta-grid > .consulta-campo,
#form-crear-consulta.form-consulta-grid .consulta-subcampo {
    display: flex;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
    margin: 0 !important;
}
#form-crear-consulta.form-consulta-grid label {
    display: flex !important;
    align-items: flex-end !important;
    min-height: 22px !important;
    margin: 0 !important;
    line-height: 1.25 !important;
}
#form-crear-consulta.form-consulta-grid input,
#form-crear-consulta.form-consulta-grid select,
#form-crear-consulta.form-consulta-grid textarea {
    width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
#form-crear-consulta.form-consulta-grid textarea { min-height: 104px !important; }
#form-crear-consulta .consulta-span-2 { grid-column: 1 / -1 !important; }
#form-crear-consulta .consulta-dos-columnas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 18px !important;
    align-items: start !important;
}
#form-crear-consulta .consulta-tres-columnas {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: end !important;
}
#form-crear-consulta .consulta-bloque-interior {
    display: grid !important;
    gap: 14px !important;
    margin-top: 12px !important;
    padding: 16px !important;
    border: 1px solid var(--input-border, var(--color-borde)) !important;
    border-radius: 14px !important;
    background: var(--surface-2, var(--color-crema-2)) !important;
}
#form-crear-consulta .consulta-acciones {
    grid-column: 1 / -1 !important;
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 2px !important;
}
#form-crear-consulta .consulta-acciones button{min-width: 190px !important}
#mini_cliente_nuevo_consulta .consulta-mini-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.visita-salon-panel,
.historial-estados-panel {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--input-border, var(--color-borde));
    border-radius: 14px;
    background: var(--surface, #fff);
}
.visita-salon-panel h3,
.historial-estados-panel h3 { margin: 0 0 12px !important; }
.visita-salon-form {
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) minmax(150px, .7fr) auto !important;
    align-items: end !important;
    gap: 12px !important;
}
.visita-salon-form > div { min-width: 0; }
.visita-salon-form label { margin-bottom: 6px !important; }
.visita-salon-form input { width: 100% !important; }
.visita-salon-actual {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.historial-estados-lista {
    position: relative;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.historial-estados-item {
    position: relative;
    display: grid;
    grid-template-columns: 14px minmax(130px, 180px) minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-subtle, var(--color-borde));
}
.historial-estados-item:last-child { border-bottom: 0; }
.historial-estados-punto {
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--primary, #719c53);
}
.historial-estados-fecha { font-size: 12.5px; color: var(--text-muted, #6b7280); }
.historial-estados-detalle { min-width: 0; }
.historial-estados-detalle strong { display: block; margin-bottom: 3px; }
.historial-estados-meta { font-size: 12px; color: var(--text-muted, #6b7280); }

@media (max-width: 768px) {
    .vvz-confirm-card { padding: 24px 18px 18px; border-radius: 18px; }
    .vvz-confirm-card h3 { font-size: 21px !important; }
    .vvz-confirm-actions { display: grid; grid-template-columns: 1fr; }
    .vvz-confirm-actions > * { width: 100% !important; }

    #form-crear-consulta.form-consulta-grid,
    #form-crear-consulta .consulta-dos-columnas,
    #form-crear-consulta .consulta-tres-columnas,
    #mini_cliente_nuevo_consulta .consulta-mini-grid {
        grid-template-columns: 1fr !important;
    }
    #form-crear-consulta .consulta-acciones button{width: 100% !important}

    .visita-salon-form { grid-template-columns: 1fr !important; }
    .visita-salon-form button{width: 100% !important}
    .historial-estados-item { grid-template-columns: 14px 1fr; }
    .historial-estados-fecha { grid-column: 2; }
    .historial-estados-detalle { grid-column: 2; }
}

/* === VVZ v210: edición desde ficha + historial persistente de visitas === */
[hidden] { display: none !important; }

.ficha-encabezado-edicion {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:14px;
}
.ficha-encabezado-edicion h2 { margin-bottom:0 !important; }

.ficha-datos-generales { margin-bottom:20px; }
.ficha-form-edicion {
    border:1px solid var(--input-border,var(--color-borde));
    border-radius:18px;
    padding:20px;
    background:var(--surface,var(--color-fondo-tarjeta,#fff));
    box-shadow:var(--shadow-sm,var(--sombra-sm));
}
.ficha-edicion-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    align-items:start;
}
.ficha-campo {
    display:grid;
    grid-template-rows:minmax(22px,auto) auto;
    gap:6px;
    min-width:0;
    margin:0 !important;
}
.ficha-campo > label {
    display:flex;
    align-items:flex-end;
    min-height:22px;
    margin:0 !important;
    line-height:1.25;
    font-weight:600;
}
.ficha-campo input:not([type="checkbox"]),
.ficha-campo select,
.ficha-campo textarea {
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    box-sizing:border-box !important;
}
.ficha-campo input:not([type="checkbox"]),
.ficha-campo select { min-height:46px !important; }
.ficha-span-2 { grid-column:1 / -1; }
.ficha-checkbox-campo {
    align-self:end;
    grid-template-rows:auto;
    min-height:46px;
    display:flex;
    align-items:center;
}
.ficha-checkbox-campo label {
    min-height:46px;
    width:100%;
    align-items:center;
    gap:10px;
    border:1px solid var(--input-border,var(--color-borde));
    border-radius:12px;
    padding:0 14px;
    box-sizing:border-box;
    background:var(--input-bg,var(--surface,#fff));
}
.ficha-checkbox-campo input[type="checkbox"] {
    position:static !important;
    width:18px !important;
    min-width:18px !important;
    height:18px !important;
    margin:0 !important;
}
.ficha-edicion-acciones-finales {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:12px;
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid var(--border-subtle,var(--color-borde));
}
.ficha-edicion-acciones-finales > * { margin:0 !important; }

.visita-salon-historial {
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid var(--border-subtle,var(--color-borde));
}
.visita-salon-historial h4 { margin:0 0 10px !important; }
.visita-salon-historial-lista {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.visita-salon-historial-item {
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:36px;
    padding:7px 12px;
    border:1px solid var(--input-border,var(--color-borde));
    border-radius:999px;
    background:var(--surface-2,var(--color-crema-2));
    font-size:13px;
}
.visita-salon-historial-item span {
    color:var(--text-muted,var(--color-texto-suave));
    font-size:12px;
}
.visita-salon-historial-item.estado-cancelada,
.visita-salon-historial-item.estado-reprogramada { opacity:.72; }
.visita-salon-historial-ayuda { margin:10px 0 0 !important; }

@media (max-width:768px) {
    .ficha-encabezado-edicion {
        align-items:flex-start;
    }
    .ficha-form-edicion { padding:16px; }
    .ficha-edicion-grid { grid-template-columns:1fr; gap:13px; }
    .ficha-span-2 { grid-column:auto; }
    .ficha-edicion-acciones-finales {
        display:grid;
        grid-template-columns:1fr 1fr;
    }
    .ficha-edicion-acciones-finales > * { width:100% !important; }
    .visita-salon-historial-lista { display:grid; grid-template-columns:1fr; }
    .visita-salon-historial-item { border-radius:12px; justify-content:flex-start; }
}

@media (max-width:480px) {
    .ficha-encabezado-edicion {
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
    }
    .ficha-edicion-acciones-finales { grid-template-columns:1fr; }
}

/* === VVZ v213: altas de consultas/eventos más compactas y cliente nuevo desplegable === */
.boton-enlace-cliente{display: inline-flex !important;align-items: center !important;align-self: flex-start !important;width: auto !important;margin: 2px 0 0 !important;text-align: left !important}
.boton-enlace-cliente:hover{transform: none !important}
.boton-enlace-cliente[aria-expanded="true"]{margin-bottom: 2px !important}

#mini_cliente_nuevo_consulta[hidden],
#mini_cliente_nuevo[hidden] { display: none !important; }

#form-crear-consulta.form-consulta-grid {
    gap: 12px 16px !important;
}
#form-crear-consulta.form-consulta-grid > .consulta-campo,
#form-crear-consulta.form-consulta-grid .consulta-subcampo {
    gap: 5px !important;
}
#form-crear-consulta.form-consulta-grid label {
    min-height: 18px !important;
    line-height: 1.2 !important;
}
#form-crear-consulta.form-consulta-grid input,
#form-crear-consulta.form-consulta-grid select {
    min-height: 42px !important;
}
#form-crear-consulta.form-consulta-grid textarea { min-height: 88px !important; }
#form-crear-consulta .consulta-dos-columnas { gap: 12px 16px !important; }
#form-crear-consulta .consulta-tres-columnas { gap: 10px 12px !important; }
#form-crear-consulta .consulta-bloque-interior {
    gap: 10px !important;
    margin-top: 6px !important;
    padding: 12px !important;
    border-radius: 10px !important;
}
#mini_cliente_nuevo_consulta .consulta-mini-grid { gap: 10px 12px !important; }
#bloque_fecha_tentativa > .consulta-bloque-interior { margin-top: 2px !important; }
#bloque_visita_salon.consulta-bloque-interior { margin-top: 0 !important; }

#form-crear-evento.form-evento-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 16px !important;
    align-items: start !important;
}
#form-crear-evento.form-evento-grid > div,
#form-crear-evento .mini-cliente-grid > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    min-width: 0 !important;
    margin: 0 !important;
}
#form-crear-evento.form-evento-grid label {
    min-height: 18px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}
#form-crear-evento.form-evento-grid input,
#form-crear-evento.form-evento-grid select,
#form-crear-evento.form-evento-grid textarea {
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
#form-crear-evento.form-evento-grid textarea { min-height: 88px !important; }
#form-crear-evento.form-evento-grid > button[type="submit"]{grid-column: 1 / -1 !important;justify-self: end !important;margin-top: 2px !important}
#form-crear-evento .mini-cliente-evento {
    display: grid !important;
    gap: 10px !important;
    margin-top: 6px !important;
    padding: 12px !important;
    border: 1px solid var(--input-border, var(--color-borde)) !important;
    border-radius: 10px !important;
    background: var(--surface-2, var(--color-crema-2)) !important;
}
#form-crear-evento .mini-cliente-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
}
#form-crear-evento .mini-cliente-acciones {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
}

@media (max-width: 768px) {
    #form-crear-evento.form-evento-grid,
    #form-crear-evento .mini-cliente-grid { grid-template-columns: 1fr !important; }
    #form-crear-evento.form-evento-grid > button[type="submit"]{width: 100% !important}
}

/* Mismo estilo del mini-formulario de "cliente nuevo" para los modales
   rápidos del calendario (form-modal-evento, form-modal-visita,
   form-modal-cita), que no usan la grilla de 2 columnas de eventos.php
   pero sí reutilizan este mismo sub-componente. */
#form-modal-evento .mini-cliente-evento,
#form-modal-visita .mini-cliente-evento,
#form-modal-cita .mini-cliente-evento {
    display: grid !important;
    gap: 10px !important;
    margin-top: 6px !important;
    padding: 12px !important;
    border: 1px solid var(--input-border, var(--color-borde)) !important;
    border-radius: 10px !important;
    background: var(--surface-2, var(--color-crema-2)) !important;
}
#form-modal-evento .mini-cliente-grid,
#form-modal-visita .mini-cliente-grid,
#form-modal-cita .mini-cliente-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
}
#form-modal-evento .mini-cliente-grid > div,
#form-modal-visita .mini-cliente-grid > div,
#form-modal-cita .mini-cliente-grid > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    min-width: 0 !important;
    margin: 0 !important;
}
#form-modal-evento .mini-cliente-acciones,
#form-modal-visita .mini-cliente-acciones,
#form-modal-cita .mini-cliente-acciones {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
}
/* Esta regla tiene que ir DESPUÉS de las de arriba: misma especificidad
   (id + selector), y en un empate por especificidad gana la última regla
   del CSS — así el [hidden] nativo del navegador no queda pisado por el
   "display: grid !important" de .mini-cliente-evento. */
#form-modal-evento [hidden],
#form-modal-visita [hidden],
#form-modal-cita [hidden] { display: none !important; }
@media (max-width: 768px) {
    #form-modal-evento .mini-cliente-grid,
    #form-modal-visita .mini-cliente-grid,
    #form-modal-cita .mini-cliente-grid { grid-template-columns: 1fr !important; }
}

/* === VVZ v214: retícula uniforme de formularios y enlaces de acción === */
:root {
    --vvz-form-gap-x: 16px;
    --vvz-form-gap-y: 14px;
    --vvz-label-control-gap: 6px;
    --vvz-control-height: 42px;
}

/* Enlace secundario: mismo lenguaje visual que “Volver”. */
a.boton-enlace-cliente,
button.boton-enlace-cliente{display: inline !important;width: auto !important;min-width: 0 !important;margin: 2px 0 0 !important}
a.boton-enlace-cliente::before,
a.boton-enlace-cliente::after,
button.boton-enlace-cliente::before,
button.boton-enlace-cliente::after { content: none !important; display: none !important; }
a.boton-enlace-cliente:hover,
button.boton-enlace-cliente:hover{transform: none !important}

/* Un solo ritmo: separación entre grupos y entre etiqueta/control. */
#form-crear-consulta.form-consulta-grid,
#form-crear-evento.form-evento-grid {
    column-gap: var(--vvz-form-gap-x) !important;
    row-gap: var(--vvz-form-gap-y) !important;
}
#form-crear-consulta.form-consulta-grid > .consulta-campo,
#form-crear-consulta.form-consulta-grid .consulta-subcampo,
#form-crear-evento.form-evento-grid > div,
#form-crear-evento .mini-cliente-grid > div {
    gap: var(--vvz-label-control-gap) !important;
    margin: 0 !important;
}
#form-crear-consulta .consulta-dos-columnas,
#form-crear-consulta .consulta-tres-columnas,
#form-crear-evento .mini-cliente-grid {
    column-gap: var(--vvz-form-gap-x) !important;
    row-gap: var(--vvz-form-gap-y) !important;
}
#form-crear-consulta .consulta-bloque-interior,
#form-crear-evento .mini-cliente-evento {
    gap: var(--vvz-form-gap-y) !important;
    margin-top: var(--vvz-label-control-gap) !important;
    padding: 14px !important;
}
#form-crear-consulta input:not([type="checkbox"]),
#form-crear-consulta select,
#form-crear-evento input:not([type="checkbox"]),
#form-crear-evento select {
    min-height: var(--vvz-control-height) !important;
}

/* Los bloques condicionales ocultos no deben reaparecer por reglas display:grid !important. */
#form-crear-consulta [hidden],
#form-crear-evento [hidden] { display: none !important; }

/* En el selector de fecha tentativa solo ocupa lugar la opción elegida. */
#bloque_fecha_tentativa > .consulta-bloque-interior > * { margin: 0 !important; }
#campo_tentativa_rango_meses,
#campo_tentativa_rango { align-items: start !important; }
#campo_tentativa_rango_meses > .consulta-subcampo,
#campo_tentativa_rango > .consulta-subcampo { margin: 0 !important; }

@media (max-width: 768px) {
    :root { --vvz-form-gap-x: 12px; --vvz-form-gap-y: 12px; }
}

/* === VVZ v215: bloques condicionales de Consultas, prioridad definitiva === */
#form-crear-consulta #mini_cliente_nuevo_consulta[hidden],
#form-crear-consulta #mini_cliente_nuevo_consulta[aria-hidden="true"],
#form-crear-consulta #campo_tentativa_mes_anio[hidden],
#form-crear-consulta #campo_tentativa_anio[hidden],
#form-crear-consulta #campo_tentativa_rango_meses[hidden],
#form-crear-consulta #campo_tentativa_rango[hidden],
#form-crear-consulta #campo_tentativa_rangos_multiples[hidden],
#form-crear-consulta #campo_tentativa_exacta[hidden],
#form-crear-consulta #campo_tentativa_mes_anio[aria-hidden="true"],
#form-crear-consulta #campo_tentativa_anio[aria-hidden="true"],
#form-crear-consulta #campo_tentativa_rango_meses[aria-hidden="true"],
#form-crear-consulta #campo_tentativa_rango[aria-hidden="true"],
#form-crear-consulta #campo_tentativa_rangos_multiples[aria-hidden="true"],
#form-crear-consulta #campo_tentativa_exacta[aria-hidden="true"] {
    display: none !important;
}

/* =========================================================================
   VVZ v20 — CONSISTENCIA VISUAL GLOBAL
   - El encabezado usa siempre la misma variable de paleta en todas las páginas.
   - En modo claro, el fondo general de la pantalla es blanco puro.
   - Los botones/acciones con contorno conservan siempre esquinas redondeadas.
   ========================================================================= */

/* Fondo general: blanco puro en cualquier paleta clara. Las superficies
   secundarias (chips, paneles, estados, etc.) conservan sus tonos propios. */
html[data-theme="light"] {
    --bg: #FFFFFF !important;
    --surface-page: #FFFFFF !important;
    --color-crema: #FFFFFF !important;
    background: #FFFFFF !important;
}
html[data-theme="light"] body,
html[data-theme="light"] .vz-app {
    background: #FFFFFF !important;
}

/* Encabezado: una sola regla para todas las variantes históricas del header.
   Respeta la paleta elegida por el usuario, pero ya no cambia según la página. */
html[data-theme="light"] .vz-topbar,
html[data-theme="light"] .topbar,
html[data-theme="light"] header.topbar {
    background: var(--header-bg, #F6EFE2) !important;
}
html[data-theme="dark"] .vz-topbar,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] header.topbar {
    background: var(--header-bg, #252C34) !important;
}

/* Acciones con contorno: evita enlaces/botones rectangulares con esquinas
   rectas, incluidos los accesos de Tareas usados en Dashboard y Tareas. */

/* =========================================================================
   FONDO UNIFICADO — encabezado + menú lateral = fondo general de la página
   2026-08-28
   El fondo se toma de --surface-page para respetar tema claro/oscuro y la
   configuración visual activa, evitando bloques de color distintos.
   ========================================================================= */
html .vz-topbar,
html .topbar,
html header.topbar {
    background: var(--surface-page, var(--bg, #FFFFFF)) !important;
}

html .menu-flyout,
html .vz-sidebar {
    background: var(--surface-page, var(--bg, #FFFFFF)) !important;
}

/* =========================================================================
   VVZ — FONDO UNIFICADO REAL (override de paleta)
   Header y menú lateral usan EXACTAMENTE el mismo fondo que la página.
   Esta regla replica la especificidad de las reglas de data-palette para
   evitar que --header-bg / --menu-bg vuelvan a imponerse.
   ========================================================================= */
html[data-palette] .vz-topbar,
html[data-palette] .topbar,
html[data-palette] header.topbar {
    background-color: var(--bg) !important;
    background-image: none !important;
}

html[data-palette] .menu-flyout,
html[data-palette] .vz-sidebar,
html[data-palette] .menu-flyout.vz-sidebar {
    background-color: var(--bg) !important;
    background-image: none !important;
}

/* === VVZ v209: tablas globales compactas y encabezados estables ===
   Evita que los TH sticky se desplacen/superpongan y reduce la altura de filas. */
table thead,
table thead tr,
table thead th,
table th,
.vz-table thead,
.vz-table thead tr,
.vz-table thead th,
.tabla-scroll thead,
.tabla-scroll thead tr,
.tabla-scroll thead th,
.tabla-mobile-scroll thead,
.tabla-mobile-scroll thead tr,
.tabla-mobile-scroll thead th,
.vz-table-scroll thead,
.vz-table-scroll thead tr,
.vz-table-scroll thead th,
.vz-table-wrap thead,
.vz-table-wrap thead tr,
.vz-table-wrap thead th {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    transform: none !important;
}

/* Encabezados: una sola fila real, sin alturas artificiales ni solapamientos. */
table thead th,
.vz-table thead th {
    padding: 7px 10px !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

/* Cuerpo más compacto. */
table tbody td,
.vz-table tbody td {
    padding: 6px 10px !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.25 !important;
    vertical-align: middle !important;
}

/* Los controles no deben inflar innecesariamente una fila de tabla. */
table td input:not([type="checkbox"]):not([type="radio"]),
table td select,
table td textarea,
.vz-table td input:not([type="checkbox"]):not([type="radio"]),
.vz-table td select,
.vz-table td textarea {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Checkbox centrado y sin agregar altura extra. */
table th input[type="checkbox"],
table td input[type="checkbox"],
.vz-table th input[type="checkbox"],
.vz-table td input[type="checkbox"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle !important;
}

/* =========================================================================
   VVZ — FILTRO DE CATEGORÍAS DE STOCK UNIFICADO
   Stock actual / Movimientos / Ajustes comparten exactamente el mismo estilo.
   ========================================================================= */
.stock-category-filter {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

html body .stock-category-filter .stock-category-btn,
html[data-palette] body .stock-category-filter .stock-category-btn,
html[data-palette] body .stock-category-filter a.stock-category-btn,
html[data-palette] body .stock-category-filter button.stock-category-btn{box-sizing: border-box !important;display: inline-flex !important;align-items: center !important;justify-content: center !important;margin: 0 !important;white-space: nowrap !important}

/* =========================================================================
   VVZ — ALINEACIÓN GLOBAL DE CAMPOS Y BOTONES EN FILAS
   El calendario personalizado envuelve cada input[type="date"] en un <div>.
   Ese envoltorio es parte del propio control: no debe heredar separación de
   `form div` ni alterar la altura con la que el campo fue diseñado. De esta
   forma fechas, selects, inputs y botones que comparten una fila conservan
   la misma línea superior/inferior en todo el ERP.
   ========================================================================= */
.envoltorio-fecha-unico {
    margin: 0 !important;
}
.envoltorio-fecha-unico input[type="date"] {
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
}
.envoltorio-fecha-unico .boton-calendario-bonito{align-self: stretch !important;margin: 0 !important}

/* =========================================================================
   VVZ — PALETA MULTICOLOR PASTEL
   Nueva opción independiente. No modifica las paletas existentes ni cambia
   tipografías, tamaños, espaciados o estructura. Los tonos pastel se usan
   solamente como superficies/acento decorativo; estados funcionales
   (éxito/advertencia/error) conservan sus colores semánticos.
   ========================================================================= */

/* La estructura general sigue blanca y limpia; el color aparece en bloques. */

/* Bloques principales: rotación suave de tonos, sin tocar dimensiones. */

/* KPI / tarjetas repetidas: cada una conserva el mismo componente y cambia
   solamente fondo + borde izquierdo dentro de esta paleta. */

/* Tarjetas de navegación/catálogos que ya existen (por ejemplo Base de datos).
   La activa mantiene el color de acción del sistema. */

/* Algunos paneles compactos del Dashboard no usan .bloque. */

/* Inputs y tablas se mantienen blancos para no perder lectura sobre bloques
   coloreados. No se alteran filas de error/alerta/estado. */

/* Modal/popover permanece neutro: no usar decoración pastel donde el color
   podría confundirse con un estado o confirmación. */

/* Las clases semánticas mantienen el significado por encima de la decoración. */

/* ============================================================
   Geolocalización y mapa de traslados
   ============================================================ */
.geo-autocomplete { position: relative; }
.geo-sugerencias {
    display: none;
    position: absolute;
    z-index: 1005;
    left: 0;
    right: 0;
    top: calc(100% - 2px);
    max-height: 260px;
    overflow-y: auto;
    background: var(--card-bg, var(--color-blanco, #fff));
    border: 1px solid var(--border-color, var(--color-borde, #d8cfbc));
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.geo-sugerencia {
    display: block;
    width: 100%;
    padding: 9px 11px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--border-color, var(--color-borde, #e8e2d8));
    border-radius: 0;
    background: var(--card-bg, var(--color-blanco, #fff));
    color: var(--text, var(--color-texto, #2b2320));
    text-align: left;
    cursor: pointer;
    box-shadow: none;
}
.geo-sugerencia:last-child { border-bottom: 0; }
.geo-sugerencia:hover { background: var(--selected-bg, var(--color-crema-2, #f6f1e7)); }
.geo-sugerencia strong { display: block; font-size: 13px; font-weight: 600; }
.geo-sugerencia small { display: block; margin-top: 2px; opacity: .72; font-size: 11.5px; }
.geo-estado { margin-top: 5px; font-size: 12px; color: var(--color-texto-suave, #777); }
.geo-estado-confirmado { color: var(--success, #5c7f45); }
.geo-estado-pendiente { color: var(--color-texto-suave, #777); }
.geo-map-mini {
    display: none;
    width: 100%;
    height: 210px;
    margin-top: 10px;
    border: 1px solid var(--border-color, var(--color-borde, #d8cfbc));
    border-radius: 10px;
    overflow: hidden;
}
.encabezado-mapa-traslados { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 14px; }
.filtro-fecha-mapa { display: flex; align-items: center; gap: 8px; margin: 0; }
.filtro-fecha-mapa label { margin: 0; }
.filtro-fecha-mapa input { width: auto; min-width: 155px; }
.texto-secundario-mapa { margin: 0; color: var(--color-texto-suave, #777); font-size: 13px; }
.resumen-mapa-traslados { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; font-size: 13px; }
.mapa-traslados-dia {
    width: 100%;
    height: min(68vh, 650px);
    min-height: 430px;
    border: 1px solid var(--border-color, var(--color-borde, #d8cfbc));
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
}
.mapa-sin-puntos { margin-bottom: 22px; }
.pendientes-ubicar-traslados { margin-top: 24px; }
.pendientes-ubicar-traslados h3 { margin-bottom: 4px; }
.pendientes-ubicar-traslados .tabla-responsive { overflow-x: auto; margin-top: 12px; }
.popup-traslado { min-width: 210px; line-height: 1.45; }
.popup-normalizada { font-size: 11px; opacity: .72; }
@media (max-width: 700px) {
    .encabezado-mapa-traslados { align-items: stretch; flex-direction: column; }
    .filtro-fecha-mapa { align-items: stretch; flex-direction: column; }
    .filtro-fecha-mapa input { width: 100%; }
    .mapa-traslados-dia { min-height: 360px; height: 58vh; }
}

/* ===== Mapa de traslados: cobertura incluida ===== */
.bloque-info-zonas-traslado {
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.5;
}

.resumen-mapa-traslados {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 10px 0 18px;
}

.resumen-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #B9C8AE;
    border-radius: 999px;
    background: #F4F8EF;
    color: #2E4734;
    font-size: 14px;
}

.resumen-chip-alerta {
    background: #FDF2EC;
    border-color: #E2B199;
    color: #8C4C33;
}

.fila-fuera-zona td {
    background: #FFF8F4;
}

.estado-fuera-zona {
    color: #8C4C33;
    font-weight: 600;
}

/* ===== Mapa de traslados: pins y autorización fuera de zona ===== */
.mapa-traslados-dia .leaflet-overlay-pane path {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vvz-map-pin-icon {
    background: transparent !important;
    border: 0 !important;
}

.vvz-pin-svg {
    display: block;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.22));
}

.resumen-chip-autorizado {
    background: #EEF7EC;
    border-color: #A9C9A2;
    color: #356A35;
}

.fila-fuera-zona-autorizada td {
    background: #F5FAF3;
}

.estado-fuera-zona-autorizado {
    color: #356A35;
    font-weight: 600;
    white-space: nowrap;
}

.btn-autorizar-fuera-zona.link{white-space: nowrap}

/* ===== Fichas compactas: estructura prolija y homogénea ===== */
.ficha-cabecera-compacta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:14px;
}
.ficha-cabecera-compacta h2 { margin:0; }

/* Un dato por fila: etiqueta fija a la izquierda y valor a la derecha.
   Evita desalineaciones cuando hay cantidad impar de campos o campos condicionales. */
.ficha-form-compacta {
    display:block;
    width:100%;
    border:1px solid var(--color-borde, var(--border-color, #cfd8c7));
    border-radius:12px;
    overflow:hidden;
    margin:16px 0;
    background:var(--surface-card, #fff);
}
.ficha-form-compacta > div:not(.ficha-tabla-seccion) {
    display:grid;
    grid-template-columns:190px minmax(0,1fr);
    align-items:stretch;
    width:100%;
    min-height:44px;
    margin:0 !important;
    border:0;
    border-bottom:1px solid var(--color-borde, var(--border-color, #cfd8c7));
    background:var(--surface-card, #fff);
}
.ficha-form-compacta > div:not(.ficha-tabla-seccion):last-of-type {
    border-bottom:0;
}
.ficha-form-compacta > .ficha-campo-ancho,
.ficha-form-compacta > .ficha-tabla-seccion {
    width:100%;
}
.ficha-form-compacta > div > label,
.ficha-form-compacta > .ficha-campo-estatico > label {
    display:flex;
    align-items:center;
    min-height:44px;
    margin:0 !important;
    padding:9px 12px;
    font-size:12px;
    font-weight:650;
    line-height:1.25;
    background:var(--surface-2, var(--color-crema-2, #f7f4ed));
    border-right:1px solid var(--color-borde, var(--border-color, #cfd8c7));
    box-sizing:border-box;
}
.ficha-form-compacta > div > input:not([type="hidden"]),
.ficha-form-compacta > div > select,
.ficha-form-compacta > div > textarea,
.ficha-form-compacta > div > .selector-restricciones-visita,
.ficha-form-compacta > div > .ficha-valor-celda,
.ficha-form-compacta > .ficha-campo-estatico > span,
.ficha-form-compacta > div > .envoltorio-fecha-unico {
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box;
    margin:0 !important;
    border-radius:0 !important;
    min-height:44px;
}
.ficha-form-compacta > div > input:not([type="hidden"]),
.ficha-form-compacta > div > select {
    height:44px;
    padding:7px 11px;
}
.ficha-form-compacta > div > textarea {
    min-height:82px;
    padding:10px 11px;
    resize:vertical;
}
.ficha-form-compacta > div > .selector-restricciones-visita,
.ficha-form-compacta > .ficha-campo-estatico > span,
.ficha-form-compacta > div > .ficha-valor-celda {
    display:flex;
    align-items:center;
    padding:9px 11px;
}
.ficha-form-compacta > div > .selector-restricciones-visita {
    display:block;
}
.ficha-form-compacta > div > .pendiente {
    grid-column:2;
    margin:0 !important;
    padding:0 11px 9px;
    font-size:11.5px;
}

/* Modo lectura: parece una tabla, no una colección de inputs. */
.ficha-form-compacta input:disabled,
.ficha-form-compacta select:disabled,
.ficha-form-compacta textarea:disabled {
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
    color:var(--text, var(--color-texto, #273128)) !important;
    opacity:1;
    cursor:default;
    border-radius:0 !important;
}
.ficha-form-compacta select:disabled {
    appearance:none;
    -webkit-appearance:none;
    background-image:none !important;
}

/* Checkbox ocupa una fila normal y mantiene la misma geometría. */
.ficha-form-compacta .fila-checkbox-visita {
    grid-template-columns:190px minmax(0,1fr) !important;
}
.ficha-form-compacta .fila-checkbox-visita > label {
    grid-column:1 / -1;
    border-right:0;
    background:var(--surface-card, #fff);
    padding:9px 12px;
}

/* Secciones complejas (traslado/mapa) siguen siendo una fila completa. */
.ficha-form-compacta > .ficha-tabla-seccion {
    display:block;
    padding:12px;
    margin:0 !important;
    border-bottom:1px solid var(--color-borde, var(--border-color, #cfd8c7));
    background:var(--surface-card, #fff);
    box-sizing:border-box;
}
.ficha-form-compacta > button[type="submit"]{display:block;margin:14px 14px 14px auto}

/* Fecha: input + calendario son una única celda rectangular de la tabla. */
.ficha-form-compacta .envoltorio-fecha-unico {
    display:flex !important;
    align-items:stretch !important;
    height:44px !important;
    border:0 !important;
    border-radius:0 !important;
    overflow:hidden;
    background:transparent !important;
}
.ficha-form-compacta .envoltorio-fecha-unico input[type="date"] {
    flex:1 1 auto;
    min-width:0;
    height:44px !important;
    min-height:44px !important;
    border:0 !important;
    border-radius:0 !important;
    margin:0 !important;
    box-shadow:none !important;
}
.ficha-form-compacta .envoltorio-fecha-unico .boton-calendario-bonito{flex:0 0 44px !important;width:44px !important;min-width:44px !important;margin:0 !important}

/* Resúmenes que ya son tablas: dimensiones constantes y lectura pareja. */
.ficha-matriz-wrap {
    overflow-x:auto;
    margin:10px 0 18px;
}
.ficha-matriz {
    width:100%;
    min-width:680px;
    table-layout:fixed;
    border-collapse:collapse;
    margin:0;
}
.ficha-matriz col.ficha-label { width:18%; }
.ficha-matriz col.ficha-value { width:32%; }
.ficha-matriz th {
    text-align:left;
    vertical-align:middle;
    padding:9px 11px;
    font-size:12px;
    font-weight:650;
    white-space:normal;
    background:var(--surface-2, var(--color-crema-2, #f7f4ed));
    color:var(--color-texto-suave, var(--text-muted, #667066));
}
.ficha-matriz td {
    vertical-align:middle;
    padding:9px 11px;
    background:var(--surface-card, #fff);
    line-height:1.35;
}
.ficha-resumen-tabla td { font-size:13.5px; }
.ficha-usuario-resumen {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:18px;
    align-items:start;
    padding:18px !important;
    margin-bottom:20px;
}
.ficha-usuario-avatar { padding-top:10px; }
.ficha-usuario-resumen .ficha-matriz-wrap { margin:0; }

@media (max-width:700px) {
    .ficha-form-compacta > div:not(.ficha-tabla-seccion) {
        grid-template-columns:145px minmax(0,1fr);
    }
    .ficha-form-compacta .fila-checkbox-visita {
        grid-template-columns:145px minmax(0,1fr) !important;
    }
    .ficha-matriz { min-width:620px; }
    .ficha-usuario-resumen { grid-template-columns:1fr; }
}
@media (max-width:520px) {
    .ficha-form-compacta > div:not(.ficha-tabla-seccion) {
        grid-template-columns:1fr;
    }
    .ficha-form-compacta > div > label,
    .ficha-form-compacta > .ficha-campo-estatico > label {
        border-right:0;
        border-bottom:1px solid var(--color-borde, var(--border-color, #cfd8c7));
    }
    .ficha-form-compacta > div > .pendiente { grid-column:1; }
}

/* ===== Feedback global del ERP ===== */
.vvz-feedback-topbar{
  position:relative;
  flex:0 0 auto;
  background:transparent!important;
  color:var(--icon, var(--text-on-brand))!important;
  border:1.5px solid var(--input-border, rgba(255,255,255,.55))!important;
  text-decoration:none!important;
}
.vvz-feedback-topbar:hover{background:rgba(0,0,0,.06)!important;text-decoration:none!important}
.vvz-feedback-topbar.cargando{opacity:.58;pointer-events:none}
.vvz-feedback-badge{
  position:absolute;right:-5px;top:-5px;min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;border-radius:999px;background:#B84A4A;color:#fff;
  font-size:9px;font-weight:700;line-height:1;border:2px solid var(--surface-brand);z-index:2;
}
.vvz-feedback-capturando .vvz-feedback-no-capturar{visibility:hidden!important}
.vvz-feedback-modal{max-height:92vh;overflow:auto}
.vvz-feedback-pagina-actual{font-size:var(--text-xs);color:var(--text-muted);margin-bottom:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vvz-feedback-preview-wrap{
  width:100%;max-height:270px;overflow:hidden;border:1px solid var(--border-default);border-radius:var(--radius-md);
  background:var(--surface-sunken);margin-bottom:16px;
}
.vvz-feedback-preview-wrap img{display:block;width:100%;height:auto;max-height:270px;object-fit:contain;background:var(--surface-page)}
.vvz-feedback-label{display:block;margin:0 0 7px;font-weight:600;color:var(--text-heading)}
.vvz-feedback-textarea{
  width:100%;box-sizing:border-box;resize:vertical;min-height:120px;padding:12px 14px;
  background:var(--surface-card);color:var(--text-body);border:1px solid var(--border-default);
  border-radius:var(--radius-control);font:var(--type-body);outline:none;
}
.vvz-feedback-textarea:focus{border-color:var(--border-focus);box-shadow:var(--focus-ring)}
.vvz-feedback-estado{min-height:20px;margin-top:9px;font-size:var(--text-xs);color:var(--text-muted)}
.vvz-feedback-estado.ok{color:var(--status-success-fg)}
.vvz-feedback-estado.error{color:var(--status-danger-fg)}
.vvz-feedback-estado.aviso{color:var(--status-warning-fg)}
.vvz-feedback-estado.cargando{color:var(--text-muted)}

.vvz-feedback-admin-page{max-width:1180px}
.vvz-feedback-filtros{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.vvz-feedback-filtros a{
  display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1px solid var(--border-default);
  border-radius:999px;background:var(--surface-card);color:var(--text-link);font-size:var(--text-sm);font-weight:600;
}
.vvz-feedback-filtros a:hover{text-decoration:none;background:var(--surface-card-hover)}
.vvz-feedback-filtros a.activo{background:var(--action-primary);border-color:var(--action-primary);color:var(--action-primary-fg)!important}
.vvz-feedback-lista{display:flex;flex-direction:column;gap:14px}
.vvz-feedback-card{
  background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-xs)
}
.vvz-feedback-card.resuelto{opacity:.78}
.vvz-feedback-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:14px 16px;border-bottom:1px solid var(--border-subtle)}
.vvz-feedback-usuario{font-weight:700;color:var(--text-heading)}
.vvz-feedback-meta{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px}
.vvz-feedback-status{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.vvz-feedback-status.abierto{background:var(--surface-gold-soft);color:var(--text-gold);border:1px solid var(--vz-gold-soft)}
.vvz-feedback-status.resuelto{background:var(--surface-accent-soft);color:var(--status-success-fg);border:1px solid var(--status-success-bd)}
.vvz-feedback-card-body{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:18px;padding:16px}
.vvz-feedback-captura-link{display:block;border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;background:var(--surface-sunken);align-self:start}
.vvz-feedback-captura-link img{display:block;width:100%;height:auto;max-height:230px;object-fit:cover;object-position:top left}
.vvz-feedback-mensaje{white-space:normal;color:var(--text-body);font-size:var(--text-md);line-height:1.5}
.vvz-feedback-pagina{margin-top:16px;font-size:var(--text-sm);color:var(--text-muted);word-break:break-word}
.vvz-feedback-card-actions{display:flex;justify-content:flex-end;padding:10px 16px 14px;border-top:1px solid var(--border-subtle)}
.vvz-feedback-card-actions form{margin:0}

@media (max-width:800px){
  .vvz-feedback-card-body{grid-template-columns:1fr}
  .vvz-feedback-captura-link img{max-height:260px;object-fit:contain}
  .vvz-feedback-modal{width:calc(100vw - 24px)}
}

/* Feedback: filtros con contraste reforzado */
.vvz-feedback-filtros a {
    background: var(--surface-card, #ffffff) !important;
    border: 1.5px solid #789b61 !important;
    color: var(--text-heading, #1f2e3a) !important;
    font-weight: 650 !important;
    text-decoration: none !important;
}
.vvz-feedback-filtros a:hover {
    background: #eef5e9 !important;
    border-color: #5f844b !important;
    color: #20301f !important;
    text-decoration: none !important;
}
.vvz-feedback-filtros a.activo,
.vvz-feedback-filtros a.activo:hover {
    background: #6f9d59 !important;
    border-color: #6f9d59 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 1px rgba(60, 95, 45, .08) !important;
}
html[data-theme="dark"] .vvz-feedback-filtros a:not(.activo) {
    background: var(--surface-card, #242424) !important;
    border-color: #86a970 !important;
    color: #f3f5f1 !important;
}
html[data-theme="dark"] .vvz-feedback-filtros a:not(.activo):hover {
    background: rgba(134, 169, 112, .16) !important;
    color: #ffffff !important;
}

/* ===== Feedback visual v2: modal grande, filtros legibles y botones unificados ===== */
.vz-topbar-right .vvz-feedback-topbar-unificado,
.vz-topbar-right a.vvz-feedback-topbar-unificado,
.vz-topbar-right button.vvz-feedback-topbar-unificado {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--surface-card, #ffffff) !important;
    border: 1.5px solid #789b61 !important;
    color: #2f4a2d !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.vz-topbar-right .vvz-feedback-topbar-unificado svg,
.vz-topbar-right .vvz-feedback-topbar-unificado i {
    width: 17px !important;
    height: 17px !important;
    color: currentColor !important;
    stroke: currentColor !important;
}
.vz-topbar-right .vvz-feedback-topbar-unificado:hover {
    background: #eef5e9 !important;
    border-color: #5f844b !important;
    color: #294129 !important;
}
html[data-theme="dark"] .vz-topbar-right .vvz-feedback-topbar-unificado {
    background: var(--surface-card, #252525) !important;
    border-color: #86a970 !important;
    color: #f4f7f2 !important;
}
html[data-theme="dark"] .vz-topbar-right .vvz-feedback-topbar-unificado:hover {
    background: rgba(134,169,112,.16) !important;
}

/* Modal de feedback más grande para revisar realmente la captura. */
.vvz-feedback-modal {
    width: min(96vw, 1380px) !important;
    max-width: 1380px !important;
    max-height: 96vh !important;
    overflow: hidden !important;
}
.vvz-feedback-modal .vz-modal-body {
    overflow-y: auto !important;
    max-height: calc(96vh - 150px) !important;
    padding: 18px 22px !important;
}
.vvz-feedback-preview-wrap {
    width: 100% !important;
    max-height: none !important;
    height: min(58vh, 650px) !important;
    overflow: hidden !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
    background: #f6f7f4 !important;
    margin-bottom: 18px !important;
    display: flex;
    flex-direction: column;
}
.vvz-feedback-preview-titulo {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-card, #fff);
    color: var(--text-heading, #1f2e3a);
    font-size: 12px;
    font-weight: 700;
}
.vvz-feedback-preview-wrap img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #ffffff !important;
}
.vvz-feedback-textarea {
    min-height: 130px !important;
}

/* Filtros de la bandeja: contraste explícito, sin depender de variables de tema. */
.vvz-feedback-filtros a,
.vvz-feedback-filtros a:link,
.vvz-feedback-filtros a:visited {
    background: #ffffff !important;
    border: 1.5px solid #6f9258 !important;
    color: #263b24 !important;
    -webkit-text-fill-color: #263b24 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    opacity: 1 !important;
}
.vvz-feedback-filtros a:hover {
    background: #eef5e9 !important;
    border-color: #557941 !important;
    color: #1f321d !important;
    -webkit-text-fill-color: #1f321d !important;
}
.vvz-feedback-filtros a.activo,
.vvz-feedback-filtros a.activo:link,
.vvz-feedback-filtros a.activo:visited,
.vvz-feedback-filtros a.activo:hover {
    background: #557b43 !important;
    border-color: #557b43 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 750 !important;
    opacity: 1 !important;
}
html[data-theme="dark"] .vvz-feedback-filtros a:not(.activo) {
    background: #252a25 !important;
    border-color: #8eae77 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

@media (max-width: 800px) {
    .vvz-feedback-modal {
        width: calc(100vw - 16px) !important;
        max-height: 97vh !important;
    }
    .vvz-feedback-modal .vz-modal-body {
        max-height: calc(97vh - 140px) !important;
        padding: 14px !important;
    }
    .vvz-feedback-preview-wrap {
        height: 45vh !important;
    }
}

/* ===== Feedback: ambos botones superiores con el mismo formato (igual al de bandeja) ===== */
.vz-topbar-right #vvz-feedback-open.vvz-feedback-topbar-unificado,
.vz-topbar-right a.vvz-feedback-topbar-unificado,
.vz-topbar-right button.vvz-feedback-topbar-unificado,
.vz-topbar-right .vvz-feedback-topbar-unificado {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1.5px solid #789b61 !important;
    color: #2f4a2d !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    vertical-align: middle !important;
}

.vz-topbar-right #vvz-feedback-open.vvz-feedback-topbar-unificado:hover,
.vz-topbar-right a.vvz-feedback-topbar-unificado:hover,
.vz-topbar-right button.vvz-feedback-topbar-unificado:hover,
.vz-topbar-right .vvz-feedback-topbar-unificado:hover {
    background: #eef5e9 !important;
    border-color: #5f844b !important;
    color: #294129 !important;
    text-decoration: none !important;
}

.vz-topbar-right #vvz-feedback-open.vvz-feedback-topbar-unificado i,
.vz-topbar-right a.vvz-feedback-topbar-unificado i,
.vz-topbar-right button.vvz-feedback-topbar-unificado i,
.vz-topbar-right .vvz-feedback-topbar-unificado i,
.vz-topbar-right #vvz-feedback-open.vvz-feedback-topbar-unificado svg,
.vz-topbar-right a.vvz-feedback-topbar-unificado svg,
.vz-topbar-right button.vvz-feedback-topbar-unificado svg,
.vz-topbar-right .vvz-feedback-topbar-unificado svg {
    width: 17px !important;
    height: 17px !important;
    color: currentColor !important;
    stroke: currentColor !important;
}

html[data-theme="dark"] .vz-topbar-right #vvz-feedback-open.vvz-feedback-topbar-unificado,
html[data-theme="dark"] .vz-topbar-right a.vvz-feedback-topbar-unificado,
html[data-theme="dark"] .vz-topbar-right button.vvz-feedback-topbar-unificado,
html[data-theme="dark"] .vz-topbar-right .vvz-feedback-topbar-unificado {
    background: var(--surface-card, #252525) !important;
    border-color: #86a970 !important;
    color: #f4f7f2 !important;
}

html[data-theme="dark"] .vz-topbar-right #vvz-feedback-open.vvz-feedback-topbar-unificado:hover,
html[data-theme="dark"] .vz-topbar-right a.vvz-feedback-topbar-unificado:hover,
html[data-theme="dark"] .vz-topbar-right button.vvz-feedback-topbar-unificado:hover,
html[data-theme="dark"] .vz-topbar-right .vvz-feedback-topbar-unificado:hover {
    background: rgba(134,169,112,.16) !important;
}

/* ===== Accesos rápidos reutilizables por sección ===== */
.modulo-accesos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 320px));
    gap: 16px;
    align-items: stretch;
    margin: 14px 0 18px;
}
.modulo-accesos-grid-unico {
    grid-template-columns: minmax(230px, 320px);
}
.modulo-acceso-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-height: 126px;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid var(--border-subtle, #d8ded2);
    border-radius: 16px;
    background: var(--surface-card, #fff);
    color: var(--text-primary, #2e3440);
    text-decoration: none !important;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.modulo-acceso-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 5px 18px rgba(0,0,0,.08));
    border-color: var(--action-primary, #7a9b76);
    text-decoration: none !important;
}
.modulo-acceso-card:focus-visible {
    outline: 2px solid var(--action-primary, #7a9b76);
    outline-offset: 2px;
}
.modulo-acceso-card-titulo {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-heading, var(--text-primary, #2e3440));
}
.modulo-acceso-card-titulo i,
.modulo-acceso-card-titulo svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}
.modulo-acceso-card-descripcion {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text-muted, #6b7280);
}
.modulo-acceso-card-abrir {
    margin-top: auto;
    font-size: 12.5px;
    color: var(--text-link, inherit);
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (max-width: 600px) {
    .modulo-accesos-grid,
    .modulo-accesos-grid-unico {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .modulo-acceso-card {
        min-height: 0;
        padding: 15px 16px;
        gap: 6px;
    }
    .modulo-acceso-card-descripcion { font-size: 13px; }
}

/* ===== Eventos: acciones secundarias sin relleno ===== */
.boton-eventos-outline,
a.boton-eventos-outline,
button.boton-eventos-outline,
.acciones-altas-eventos .btn-nueva-consulta.boton-eventos-outline{display: inline-flex !important;align-items: center !important;justify-content: center !important;box-sizing: border-box !important;margin: 0 !important}

/* =========================================================================
   VVZ — LISTADOS: filas de altura uniforme
   Mantiene todos los listados en una sola línea para que ninguna fila crezca
   por textos más largos. Las tablas de ficha/formulario quedan excluidas.
   ========================================================================= */
table:not(.ficha-matriz):not(.ficha-tabla-general):not(.ficha-tabla-pareja) tbody tr {
    height: 34px !important;
}

table:not(.ficha-matriz):not(.ficha-tabla-general):not(.ficha-tabla-pareja) tbody td {
    height: 34px !important;
    max-height: 34px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
}

@media (max-width: 700px) {
    table:not(.ficha-matriz):not(.ficha-tabla-general):not(.ficha-tabla-pareja) tbody tr,
    table:not(.ficha-matriz):not(.ficha-tabla-general):not(.ficha-tabla-pareja) tbody td {
        height: 30px !important;
        max-height: 30px !important;
    }
}

/* === Ajuste mini alta de cliente en Consultas === */
#mini_cliente_nuevo_consulta .consulta-mini-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 14px !important;
    align-items: start !important;
}
#mini_cliente_nuevo_consulta .consulta-subcampo {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    min-width: 0 !important;
}
#mini_cliente_nuevo_consulta .consulta-subcampo label {
    min-height: 18px !important;
    margin: 0 !important;
}
#mini_cliente_nuevo_consulta .consulta-subcampo input,
#mini_cliente_nuevo_consulta .consulta-subcampo select {
    width: 100% !important;
    box-sizing: border-box !important;
}
#mini_cliente_nuevo_consulta .consulta-mini-email {
    grid-column: 1 / -1 !important;
}
#mini_cliente_nuevo_consulta .consulta-mini-email input {
    width: 100% !important;
}
#mini_cliente_nuevo_consulta > div:last-child {
    margin-top: 14px !important;
}
@media (max-width: 620px) {
    #mini_cliente_nuevo_consulta .consulta-mini-grid {
        grid-template-columns: 1fr !important;
    }
    #mini_cliente_nuevo_consulta .consulta-mini-email {
        grid-column: auto !important;
    }
}

/* === Visita al salón opcional en Consultas === */
.consulta-visita-opcional { display:block; }
button.consulta-link-accion,
button.consulta-link-accion:hover,
button.consulta-link-accion:focus,
button.consulta-link-accion:active{margin: 2px 0 8px !important;width: auto !important}

/* Visita al salón: ocultar hasta hacer clic en "Agendar visita al salón" */
#form-crear-consulta #bloque_visita_salon.consulta-visita-campos {
    display: none !important;
}
#form-crear-consulta #bloque_visita_salon.consulta-visita-campos.abierto {
    display: grid !important;
}

/* =========================================================================
   BOTONES — TOKENS POR PALETA (contraste AA garantizado en todas)
   Todo el catálogo A–H toma color SOLO de estas variables.
   ========================================================================= */
:root{
  --btn-fill:#3A5A40; --btn-fill-hover:#344E41; --btn-fill-fg:#FBF9F4;
  --btn-line:#3A5A40; --btn-tint:rgba(58,90,64,.10);
  --btn-gold:#836F43; --btn-gold-hover:#6E5C36; --btn-gold-fg:#FFFFFF;
  --btn-danger:#A6412F; --btn-danger-hover:#8C3627; --btn-danger-fg:#FFFFFF;
  --btn-link:#836F43;
}
[data-theme="dark"]{
  --btn-fill:#A3B18A; --btn-fill-hover:#B7C3A1; --btn-fill-fg:#1B1F1A;
  --btn-line:#A3B18A; --btn-tint:rgba(163,177,138,.14);
  --btn-gold:#C7B48A; --btn-gold-hover:#DBCAA4; --btn-gold-fg:#1A1A1A;
  --btn-danger:#E07A66; --btn-danger-hover:#EA9282; --btn-danger-fg:#1A1A1A;
  --btn-link:#C7B48A;
}
html[data-palette="amarilla"]{
  --btn-fill:#8C6512; --btn-fill-hover:#74530E; --btn-fill-fg:#FFFFFF;
  --btn-line:#7A5810; --btn-tint:rgba(140,101,18,.10);
  --btn-gold:#F4D77E; --btn-gold-hover:#EDCB60; --btn-gold-fg:#3A3325;
  --btn-danger:#A84A4A; --btn-danger-hover:#8F3D3D; --btn-danger-fg:#FFFFFF;
  --btn-link:#8C6512;
}
html[data-palette="verde"]{
  --btn-fill:#4D783F; --btn-fill-hover:#3F6634; --btn-fill-fg:#FFFFFF;
  --btn-line:#3F6634; --btn-tint:rgba(77,120,63,.10);
  --btn-gold:#8A6A1F; --btn-gold-hover:#735818; --btn-gold-fg:#FFFFFF;
  --btn-danger:#A84A4A; --btn-danger-hover:#8F3D3D; --btn-danger-fg:#FFFFFF;
  --btn-link:#3F6634;
}
html[data-palette="azul"]{
  --btn-fill:#38658E; --btn-fill-hover:#2E5576; --btn-fill-fg:#FFFFFF;
  --btn-line:#2E5576; --btn-tint:rgba(56,101,142,.10);
  --btn-gold:#8A6A1F; --btn-gold-hover:#735818; --btn-gold-fg:#FFFFFF;
  --btn-danger:#A84A4A; --btn-danger-hover:#8F3D3D; --btn-danger-fg:#FFFFFF;
  --btn-link:#2E5576;
}
html[data-palette="oscura"]{
  --btn-fill:#98B883; --btn-fill-hover:#AAC895; --btn-fill-fg:#20252B;
  --btn-line:#98B883; --btn-tint:rgba(152,184,131,.14);
  --btn-gold:#D6B35A; --btn-gold-hover:#E2C373; --btn-gold-fg:#20252B;
  --btn-danger:#E09A9A; --btn-danger-hover:#EAB0B0; --btn-danger-fg:#20252B;
  --btn-link:#BFD0FF;
}

/* =========================================================================
   CATÁLOGO DE BOTONES A–H — único sistema permitido (tamaño chico por defecto)
   Colores SOLO con variables --btn-*. Cualquier <button> o submit sin clase
   del catálogo se muestra como A.
   ========================================================================= */
html :where(button,input[type="submit"],input[type="button"],input[type="reset"],
  a.vz-btn-sm,a.vz-btn,a.btn-secundario,a.btn-peligro,a.ficha-tab-btn,a.link,a.vz-icon-btn):not(.vz-icon-btn-onbrand,.vz-topbar-pill){
  display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;
  height:30px!important;min-height:30px!important;padding:0 12px!important;
  font-family:inherit!important;font-size:13px!important;font-weight:600!important;line-height:1!important;
  border-radius:999px!important;border:1px solid transparent!important;box-shadow:none!important;
  text-decoration:none!important;text-transform:none!important;letter-spacing:normal!important;white-space:nowrap;
  cursor:pointer!important;-webkit-appearance:none;appearance:none;
  background:var(--btn-fill)!important;color:var(--btn-fill-fg)!important;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease}
html :where(button,input[type="submit"],input[type="button"],input[type="reset"],a.vz-btn-sm):not(.vz-icon-btn-onbrand,.vz-topbar-pill):hover{background:var(--btn-fill-hover)!important}
html :where(button,a,input)[hidden]{display:none!important}
html :is(button,a).vz-btn-sm:not(.vz-icon-btn-onbrand) :is(svg,i[data-lucide]),
html :is(button,a):is(.btn-secundario,.btn-peligro,.vz-btn,.link,.ficha-tab-btn) :is(svg,i[data-lucide]),
html button:not([class]) :is(svg,i[data-lucide]){width:14px!important;height:14px!important;flex:0 0 auto;color:currentColor!important}

/* Tamaño grande (solo si se pide) */
html :is(button,a,input).vz-btn-lg{height:38px!important;min-height:38px!important;padding:0 18px!important;font-size:14px!important}

/* A · Principal */
html :is(button,a,input).vz-btn-sm{background:var(--btn-fill)!important;color:var(--btn-fill-fg)!important;border-color:transparent!important}
html :is(button,a,input).vz-btn-sm:hover{background:var(--btn-fill-hover)!important}

/* B · Secundario */
html :is(button,a,input).btn-secundario{background:transparent!important;color:var(--btn-line)!important;border:1px solid var(--btn-line)!important}
html :is(button,a,input).btn-secundario:hover{background:var(--btn-tint)!important}

/* C · Peligro */
html :is(button,a,input).btn-peligro{background:var(--btn-danger)!important;color:var(--btn-danger-fg)!important;border-color:transparent!important}
html :is(button,a,input).btn-peligro:hover{background:var(--btn-danger-hover)!important}

/* D · Dorado */
html :is(button,a).vz-btn.vz-btn-gold{background:var(--btn-gold)!important;color:var(--btn-gold-fg)!important;border-color:transparent!important}
html :is(button,a).vz-btn.vz-btn-gold:hover{background:var(--btn-gold-hover)!important}

/* E · Fantasma */
html :is(button,a).vz-btn.vz-btn-ghost{background:transparent!important;color:var(--btn-line)!important;border-color:transparent!important}
html :is(button,a).vz-btn.vz-btn-ghost:hover{background:var(--btn-tint)!important}

/* F · Link de tabla */
html :is(button,a).link{background:transparent!important;color:var(--btn-link)!important;border:none!important;
  height:auto!important;min-height:0!important;padding:0 2px!important;text-decoration:underline!important;text-underline-offset:2px}
html :is(button,a).link:hover{background:transparent!important;opacity:.85}

/* G1 · Ícono relleno y G2 · Ícono sin fondo */
html :is(button,a).vz-icon-btn:is(.vz-icon-btn-verde,.vz-icon-btn-limpio){
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;
  width:30px!important;height:30px!important;min-width:0!important;min-height:0!important;padding:0!important;
  border-radius:999px!important;line-height:1!important;cursor:pointer!important;box-shadow:none!important}
html :is(button,a).vz-icon-btn.vz-icon-btn-verde{background:var(--btn-fill)!important;color:var(--btn-fill-fg)!important;border:1px solid transparent!important}
html :is(button,a).vz-icon-btn.vz-icon-btn-verde:hover{background:var(--btn-fill-hover)!important}
html :is(button,a).vz-icon-btn.vz-icon-btn-limpio{background:transparent!important;color:var(--btn-line)!important;border:1px solid var(--btn-line)!important}
html :is(button,a).vz-icon-btn.vz-icon-btn-limpio:hover{background:var(--btn-tint)!important}
html :is(button,a).vz-icon-btn.vz-icon-btn-lg{width:38px!important;height:38px!important}
html :is(button,a).vz-icon-btn:is(.vz-icon-btn-verde,.vz-icon-btn-limpio) :is(svg,i[data-lucide]){width:15px!important;height:15px!important;margin:0!important;color:currentColor!important}

/* H · Pestaña (activa: .activo y estados equivalentes que ya usa el JS) */
html :is(button,a).ficha-tab-btn{background:transparent!important;color:var(--btn-line)!important;border:1px solid var(--btn-line)!important}
html :is(button,a).ficha-tab-btn:hover{background:var(--btn-tint)!important}
html :is(button,a).ficha-tab-btn:is(.activo,.activa,.seleccionada,.tarjeta-paleta-activa,.esta-activo,[aria-selected="true"],[aria-pressed="true"]){
  background:var(--btn-fill)!important;color:var(--btn-fill-fg)!important;border-color:transparent!important}
/* Pestañas con imagen o muestras (medios de pago, galería, paletas): mismo estilo, alto libre */
html :is(button,a).ficha-tab-btn:is(:has(img),.tarjeta-paleta){height:auto!important;min-height:30px!important;padding:6px 14px!important;white-space:normal;flex-direction:column;gap:4px}
html :is(button,a).ficha-tab-btn:has(img) img{max-height:28px;width:auto}
html :is(button,a).ficha-tab-btn.fp-opcion-galeria{padding:4px!important;overflow:hidden}
html :is(button,a).ficha-tab-btn.fp-opcion-galeria img{max-height:none;width:100%;height:100%;object-fit:cover;border-radius:999px}

/* Deshabilitado y foco */
html :is(button,input[type="submit"],input[type="button"],a.vz-btn,a.vz-btn-sm):disabled{opacity:.45!important;cursor:not-allowed!important}
html :focus-visible:is(button,a.vz-btn,a.vz-btn-sm,a.btn-secundario,a.btn-peligro,a.ficha-tab-btn,a.link,a.vz-icon-btn):not(.vz-icon-btn-onbrand){outline:2px solid var(--btn-line)!important;outline-offset:2px}

/* ===== Alta de consulta: tabla de dos columnas (dato | valor) ===== */
html body #form-crear-consulta.cq-tabla{display:block!important;padding:0!important;margin:0!important;gap:0!important;border:1px solid var(--color-borde)!important;border-radius:8px!important;overflow:visible!important;background:var(--surface-card,#fff)!important;max-width:900px!important;box-shadow:none!important}
html body #form-crear-consulta .cq-fila{display:grid!important;grid-template-columns:210px minmax(0,1fr)!important;gap:0!important;margin:0!important;padding:0!important;border:none!important;border-bottom:1px solid var(--color-borde)!important;align-items:stretch!important;min-height:0!important}
html body #form-crear-consulta .cq-et{display:flex!important;align-items:center!important;margin:0!important;padding:0 12px!important;min-height:36px!important;font-size:13px!important;font-weight:600!important;color:var(--text-body,#2b2b2b)!important;background:transparent!important;border:none!important;border-right:1px solid var(--color-borde)!important}
html body #form-crear-consulta .cq-et .req{color:var(--btn-danger,#b23b3b)!important;margin-left:3px}
html body #form-crear-consulta .cq-opc{font-weight:400!important;color:var(--color-texto-suave)!important;margin-left:4px}
html body #form-crear-consulta .cq-val{display:block!important;margin:0!important;padding:0!important;min-width:0!important;position:relative!important;align-self:center!important}
html body #form-crear-consulta .cq-val input,html body #form-crear-consulta .cq-val select,html body #form-crear-consulta .cq-val textarea{display:block!important;width:100%!important;max-width:none!important;height:36px!important;min-height:36px!important;margin:0!important;padding:0 12px!important;font-size:13px!important;line-height:36px!important;border:none!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
html body #form-crear-consulta .cq-val textarea{height:auto!important;min-height:56px!important;padding:8px 12px!important;line-height:1.4!important;resize:vertical}
html body #form-crear-consulta .cq-val input:focus,html body #form-crear-consulta .cq-val select:focus,html body #form-crear-consulta .cq-val textarea:focus{outline:2px solid var(--btn-line)!important;outline-offset:-2px!important;background:transparent!important}
html body #form-crear-consulta .cq-doble{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0!important}
html body #form-crear-consulta .cq-doble > input + input{border-left:1px solid var(--color-borde)!important}
html body #form-crear-consulta .cq-ayuda{font-size:11px!important;color:var(--color-texto-suave)!important;padding:0 12px 6px!important;margin:0!important}
html body #form-crear-consulta .cq-elegido{font-weight:600!important}
html body #form-crear-consulta .cq-sugerencias{position:absolute!important;left:0;right:0;top:36px;z-index:30;background:var(--surface-card,#fff)!important;border:1px solid var(--color-borde)!important;border-radius:0 0 8px 8px!important;box-shadow:0 6px 18px rgba(0,0,0,.12)!important;overflow:hidden}
html body #form-crear-consulta .cq-sugerencias button.cq-sug{display:block!important;width:100%!important;height:auto!important;min-height:0!important;padding:8px 12px!important;text-align:left!important;justify-content:flex-start!important;border:none!important;border-bottom:1px solid var(--color-borde)!important;border-radius:0!important;background:transparent!important;color:var(--text-body,#2b2b2b)!important;font-size:13px!important;font-weight:400!important;white-space:normal!important}
html body #form-crear-consulta .cq-sugerencias button.cq-sug:hover{background:var(--btn-tint)!important}
/* Fecha tentativa: el tipo arriba y debajo una línea de celdas día / mes / año según lo elegido */
html body #form-crear-consulta #bloque_fecha_tentativa .cq-tent{display:block!important;margin:0!important;padding:0!important;border:none!important;border-top:1px solid var(--color-borde)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
html body #form-crear-consulta .cq-tent-fila:not([style*="none"]){display:flex!important;flex-wrap:wrap;align-items:stretch;gap:0;margin:0!important;padding:0!important}
html body #form-crear-consulta .cq-tent-fila + .cq-tent-fila{border-top:1px solid var(--color-borde)!important}
html body #form-crear-consulta .cq-tramo{display:flex;align-items:stretch}
html body #form-crear-consulta .cq-tent-fila select,html body #form-crear-consulta .cq-tent-fila input:not([type="hidden"]){width:auto!important;flex:0 0 auto}
html body #form-crear-consulta .cq-tent-fila select{min-width:130px!important}
html body #form-crear-consulta .cq-tent-fila input[data-t="anio"],html body #form-crear-consulta .cq-tent-fila input[name="fecha_tentativa_valor_anio"]{width:90px!important}
html body #form-crear-consulta .cq-tent-fila input[data-t="dia"]{width:70px!important}
html body #form-crear-consulta .cq-tent-fila select + select,html body #form-crear-consulta .cq-tent-fila select + input,html body #form-crear-consulta .cq-tent-fila input + select,html body #form-crear-consulta .cq-tent-fila input:not([type="hidden"]) + input:not([type="hidden"]){border-left:1px solid var(--color-borde)!important}
html body #form-crear-consulta .cq-a{display:flex;align-items:center;padding:0 12px;font-size:12px;color:var(--color-texto-suave);border-left:1px solid var(--color-borde);border-right:1px solid var(--color-borde)}
html body #form-crear-consulta #filas_rangos_multiples .fila-rango-multiple + .fila-rango-multiple{border-top:1px solid var(--color-borde)!important}
html body #form-crear-consulta #campo_tentativa_rangos_multiples > button{margin:6px 12px!important}
html body #form-crear-consulta .consulta-visita-opcional{padding:0 12px 6px!important;margin:0!important}
html body #form-crear-consulta #bloque_visita_salon.consulta-visita-campos.abierto{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0!important;padding:0!important;margin:0!important;border:none!important;border-top:1px solid var(--color-borde)!important;background:transparent!important}
html body #form-crear-consulta #bloque_visita_salon .consulta-subcampo{display:block!important;margin:0!important;padding:0!important}
html body #form-crear-consulta #bloque_visita_salon label{font-size:12px!important;color:var(--color-texto-suave)!important;padding:4px 12px 0!important;margin:0!important}
html body #form-crear-consulta .consulta-acciones{display:flex!important;justify-content:flex-end!important;padding:8px 12px!important;margin:0!important;border:none!important}
@media (max-width:700px){html body #form-crear-consulta .cq-fila{grid-template-columns:120px minmax(0,1fr)!important}html body #form-crear-consulta .cq-doble{grid-template-columns:1fr!important}}
/* Respetar los campos que el formulario oculta (display:none en línea) */
html body #form-crear-consulta [style*="display:none"],
html body #form-crear-consulta [style*="display: none"]{display:none!important}
html body #form-crear-consulta #bloque_fecha_tentativa [style*="display:none"],html body #form-crear-consulta #bloque_fecha_tentativa [style*="display: none"]{display:none!important}
html body #form-crear-consulta .cq-tent-fila > .cq-a{display:flex!important;align-items:center!important;justify-content:center!important;align-self:stretch!important;height:auto!important;min-height:36px!important;margin:0!important;padding:0 12px!important;line-height:1!important;vertical-align:middle!important}
html body #form-crear-consulta .cq-tent-fila > .cq-tramo{align-self:stretch!important;align-items:center!important}
/* Consultas: búsqueda simple y filtros desplegables */
.barra-consultas{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.barra-consultas-fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.barra-consultas-fila .barra-consultas-buscar{flex:1 1 320px;max-width:460px}
.barra-consultas-panel:not([hidden]){display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.barra-consultas-panel[hidden]{display:none!important}
.barra-consultas-panel .filtro-consulta-campo{display:flex!important;flex-direction:column!important;gap:4px!important;flex:0 0 220px!important;margin:0!important;font-size:12px!important;font-weight:600}
.barra-consultas-panel .filtro-consulta-campo select{width:100%!important;max-width:none!important;margin:0!important}
html body #form-crear-consulta .cq-val input.cq-solo-boda[style*="none"]{display:none!important}
html body #form-crear-consulta .cq-subfila:not([style*="none"]){display:block!important;border-top:1px solid var(--color-borde)!important;margin:0!important;padding:0!important}
/* Alta de consulta: un solo borde (el de la tabla) */
html body #alta-consulta-contenido.alta-contenido{border:none!important;padding:0!important;background:transparent!important;box-shadow:none!important}
/* Alta de consulta: el campo de fecha sin recuadro propio dentro de la celda */
html body #form-crear-consulta .cq-val .envoltorio-fecha-unico{display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;border:none!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
html body #form-crear-consulta .cq-val .envoltorio-fecha-unico input{border:none!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
/* Consultas: encabezado de tabla y selector Lista / Tablero sin relleno */
html body #vista-tabla-consultas table th{background:transparent!important}
html body .selector-vista-consultas{background:transparent!important;box-shadow:none!important;padding:0!important}
html body .selector-vista-consultas button.ficha-tab-btn,
html body .selector-vista-consultas button.ficha-tab-btn:is(.activo,.activa){background:transparent!important;color:var(--btn-line)!important;border:1px solid var(--btn-line)!important}
html body .selector-vista-consultas button.ficha-tab-btn:is(.activo,.activa){border-width:2px!important;font-weight:700!important}
/* Todas las tablas: los títulos ordenables con el mismo color que el resto del encabezado */
html body table th a,
html body table th a:visited,
html body table th a:hover{color:inherit!important;text-decoration:none!important}
html body table th a,
html body table th a:visited{font-weight:inherit!important;font-size:inherit!important;font-family:inherit!important;letter-spacing:inherit!important;text-transform:inherit!important}
/* Consultas: el selector de estado de cada fila, legible */
html body .form-cambiar-estado-consulta select{display:block!important;width:auto!important;min-width:170px!important;max-width:none!important;height:32px!important;min-height:32px!important;padding:0 28px 0 10px!important;font-size:13px!important;line-height:30px!important;color:var(--text-body,#2b2b2b)!important;background-color:var(--surface-card,#fff)!important;-webkit-appearance:auto!important;appearance:auto!important}
/* Consultas: tabla compacta */
html body #vista-tabla-consultas .col-estado-consulta{width:1%;white-space:nowrap}
html body #vista-tabla-consultas .form-cambiar-estado-consulta select{min-width:0!important;width:130px!important;max-width:130px!important;text-overflow:ellipsis}
.punto-pendiente{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--btn-danger,#c0392b);margin-right:6px;vertical-align:middle}

/* ===================================================================
   Prolijidad general (2026-10): espacios, alineación de formularios y botones.
   =================================================================== */
/* La barra superior es "sticky" (ocupa su lugar): el contenido no necesita los 100 px de margen que dejaba la barra fija vieja. */
html body .contenedor{padding-top:32px!important}
@media (max-width:768px){html body .contenedor{padding-top:20px!important}}
html body .contenedor > :is(h1,h2):first-child,
html body .contenedor > a:first-child + :is(h1,h2){margin-top:8px}

/* Etiqueta que envuelve al campo ("Cliente: [select]"): el campo va debajo, igual que en el resto de los formularios. */
html body label > :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){display:block;margin-top:6px}

/* Casillas y opciones: la casilla y su texto en la misma línea, centrados. */
html body label:has(> input[type=checkbox]),
html body label:has(> input[type=radio]){display:inline-flex;align-items:center;gap:8px;width:auto;max-width:100%;cursor:pointer}
html body label > input[type=checkbox],
html body label > input[type=radio]{display:inline-block;margin:0;flex:0 0 auto}

/* Botón al lado de un campo (agregar al To-do): misma altura que el campo. */
html body .dashboard-todo-form > button{min-height:40px!important}

/* Barras de los indicadores del inicio: el relleno no se veía (era un elemento en línea sin ancho). */
html body .kpi-barra-fill{display:block}

/* Tablas anchas: se desplazan dentro de su caja en lugar de romper el ancho de la página. */
html body .contenedor .tabla-scroll{overflow-x:auto;max-width:100%}
/* Filtros en fila (Desde / Hasta / Filtrar): en pantallas angostas bajan de línea en lugar de salirse. */
html body .contenedor form:is([style*="display:flex"],[style*="display: flex"]){flex-wrap:wrap}
html body .contenedor form:is([style*="display:flex"],[style*="display: flex"]) > :is(button,a.btn-secundario,input[type=submit]){min-height:40px!important}
/* Botón suelto debajo del título (ej. "Editar"): que no quede pegado al primer campo. */
html body .contenedor > :is(h1,h2) + :is(button,a.btn-secundario){margin-bottom:16px}

/* Formularios en columnas (.form-columnas): cada campo en una celda; notas, opciones y botones a lo ancho. */
html body .form-columnas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;row-gap:4px;align-items:start}
@media (max-width:1024px){html body .form-columnas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){html body .form-columnas{grid-template-columns:minmax(0,1fr)}}
html body .form-columnas > *{min-width:0}
html body .form-columnas :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){max-width:100%!important;width:100%}
html body .form-columnas > :is(.campo-ancho,.acciones-form,h2,h3,h4,p,hr,.seccion-form,fieldset){grid-column:1/-1}
html body .form-columnas > :is(h3,h4){margin:18px 0 6px;padding-top:12px;border-top:1px solid var(--border-subtle,#e7e2d6)}
html body .acciones-form{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:12px}
/* Campo con dos controles (tipo + valor): uno al lado del otro. */
html body .campo-doble{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:8px;align-items:end}
html body .campo-doble > label{grid-column:1/-1}
/* Alta de evento: los campos ocupan todo el ancho de su columna (no quedan cortos con un hueco a la derecha). */
html body #form-crear-evento.form-evento-grid :is(input:not([type=checkbox]):not([type=radio]),select,textarea){max-width:100%!important}
html body .form-columnas > :is(div:has(> textarea),.fila-edades,.chips-restricciones){grid-column:1/-1}
html body .form-columnas > :is(button,input[type=submit]){grid-column:1/-1;justify-self:start;margin-top:12px}
html body .form-columnas > :is(h3,h4):first-of-type{border-top:0;padding-top:0;margin-top:4px}
/* "Cambiar foto" (etiqueta con forma de botón): que se vea como botón, igual que los demás secundarios. */
html body label.btn-secundario{display:inline-flex!important;align-items:center;border:1px solid var(--btn-line)!important;color:var(--btn-line)!important;background:transparent!important;border-radius:999px!important;margin:0}
/* Grupo de campos que aparece según una opción (ej. funcionario externo): mantiene las columnas del formulario. */
html body .form-columnas .sub-columnas:not([style*="none"]){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;row-gap:4px}
@media (max-width:1024px){html body .form-columnas .sub-columnas:not([style*="none"]){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){html body .form-columnas .sub-columnas:not([style*="none"]){grid-template-columns:minmax(0,1fr)}}
html body .form-columnas .sub-columnas > div:has(> textarea){grid-column:1/-1;order:9}
/* Casilla sola en una celda del formulario: alineada con la línea de los campos vecinos. */
html body .form-columnas > div:has(input[type=checkbox]):not(:has(input:not([type=checkbox]):not([type=hidden]),select,textarea)){align-self:end;padding-bottom:10px}
/* Fichas tipo tabla: la fecha ocupa toda la celda (el ícono del calendario queda al final del campo, no flotando en el medio). */
html body .ficha-form-compacta .envoltorio-fecha-unico > input{width:100%!important;max-width:none!important}
/* Fichas tipo tabla: la fila de casilla (ej. "Necesita traslado") respeta las dos columnas. */
html body .ficha-form-compacta .fila-checkbox-visita{display:grid!important}
html body .ficha-form-compacta .fila-checkbox-visita::before{content:"";grid-column:1;grid-row:1;background:var(--surface-2,var(--color-crema-2,#f7f4ed));border-right:1px solid var(--color-borde,var(--border-color,#cfd8c7))}
html body .ficha-form-compacta .fila-checkbox-visita > label{grid-column:2!important;grid-row:1}

/* ===================================================================
   Paleta Oliva (2026-10): Clásica (modo claro) y Oscura (modo oscuro).
   Verde oliva oscuro, blanco, crema y beige. Contrastes WCAG AA o mejores:
   texto ≥ 7:1, botones y enlaces ≥ 6:1, bordes de campos ≥ 3:1.
   =================================================================== */
html[data-palette="clasica"], html:not([data-palette]) {
    --bg:#FBF8F1; --surface:#FFFFFF; --surface-2:#F1ECDF; --header-bg:#EFE8D8; --menu-bg:#F5F0E4;
    --input-bg:#FFFFFF; --input-border:#8C8A70; --primary:#4A5A26; --primary-hover:#3B4820;
    --secondary:#7C7A4E; --accent:#D8CCAE; --text:#2A2E22; --text-2:#474C3A; --text-muted:#5F6450;
    --text-on-primary:#FFFFFF; --icon:#3A4030; --icon-muted:#5F6450; --link:#4A5A26;
    --success:#4F6B2C; --warning:#8A6416; --danger:#A13D2C; --selected-bg:#E9E4CF; --selected-text:#2A2E22; --focus:#9CA46C;
    --btn-fill:#4A5A26; --btn-fill-hover:#3B4820; --btn-fill-fg:#FFFFFF;
    --btn-line:#4A5A26; --btn-tint:rgba(74,90,38,.10);
    --btn-gold:#7A5F24; --btn-gold-hover:#644E1D; --btn-gold-fg:#FFFFFF;
    --btn-danger:#A13D2C; --btn-danger-hover:#873325; --btn-danger-fg:#FFFFFF;
    --btn-link:#6E5826;
}
html[data-palette="oscura"] {
    --bg:#1B1D16; --surface:#272A21; --surface-2:#31352A; --header-bg:#22251C; --menu-bg:#272A21;
    --input-bg:#2F3328; --input-border:#7D8169; --primary:#B3BF86; --primary-hover:#C5CF9E;
    --secondary:#D4C08C; --accent:#CDBF98; --text:#F2EEE3; --text-2:#D9D4C5; --text-muted:#B5B09F;
    --text-on-primary:#1B1D16; --icon:#F2EEE3; --icon-muted:#C3BEAF; --link:#D3C892;
    --success:#A9C07F; --warning:#DDB862; --danger:#E39482; --selected-bg:#3A3F31; --selected-text:#F2EEE3; --focus:#B3BF86;
    --btn-fill:#B3BF86; --btn-fill-hover:#C5CF9E; --btn-fill-fg:#1B1D16;
    --btn-line:#B3BF86; --btn-tint:rgba(179,191,134,.14);
    --btn-gold:#D4C08C; --btn-gold-hover:#E1D1A6; --btn-gold-fg:#1B1D16;
    --btn-danger:#E39482; --btn-danger-hover:#EBAA9B; --btn-danger-fg:#1B1D16;
    --btn-link:#D3C892;
}
/* Bordes de tarjetas y tablas: suaves (beige), separados del borde de los campos, que es más marcado. */
html[data-palette="clasica"], html:not([data-palette]) { --border-subtle:#DDD5C2; --border-default:#D3CAB4; --color-borde:#D8CFBB; }
html[data-palette="oscura"] { --border-subtle:#3E4236; --border-default:#474B3E; --color-borde:#434739; }
/* To-do rápido (Tareas): el campo llena su columna y el botón queda pegado, a la misma altura. */
html body .todo-rapido-form input{max-width:none!important}
html body .todo-rapido-form button{min-height:38px!important}

/* Contraste en el resto de las paletas: bordes de campos ≥ 3:1 (tarjetas y tablas siguen con borde suave),
   círculo del usuario y enlaces más firmes, textos de ayuda legibles sobre los fondos pastel. */
html[data-palette="amarilla"]{--input-border:#A1802E;--border-subtle:#EADBB0;--border-default:#E2CF98;--color-borde:#E6D5A4;--link:#8C6512}
html[data-palette="verde"]{--input-border:#6F8A5E;--border-subtle:#CFE0C5;--border-default:#C2D6B6;--color-borde:#C8DBBD;--link:#3F6634}
html[data-palette="azul"]{--input-border:#6C8AA6;--border-subtle:#CDDDEB;--border-default:#BFD3E4;--color-borde:#C6D8E8}
html[data-palette] .vz-topbar-avatar, html[data-palette] a.vz-topbar-avatar{background:var(--btn-fill)!important;color:var(--btn-fill-fg)!important}
html[data-palette] input, html[data-palette] select, html[data-palette] textarea{border-color:var(--input-border)!important}

/* Modo oscuro: cajas que tenían un fondo claro fijo (avisos, etiquetas de estado, bloques especiales). */
html[data-theme="dark"] :is(.advertencia,.bloque-especial,details.ficha-apartado-etapa2){background:var(--surface-2)!important;color:var(--text-2)!important;border-color:var(--border-default)!important}
html[data-theme="dark"] .advertencia{background:color-mix(in srgb,var(--warning) 16%,var(--surface))!important;border-color:color-mix(in srgb,var(--warning) 45%,var(--surface))!important}
html[data-theme="dark"] .bloque-especial{background:color-mix(in srgb,var(--danger) 14%,var(--surface))!important;border-color:color-mix(in srgb,var(--danger) 40%,var(--surface))!important}
html[data-theme="dark"] tr.fila-reputacion-roja > td{background:color-mix(in srgb,var(--danger) 14%,var(--surface))!important;color:var(--text)!important}
html[data-theme="dark"] :is(.badge-error,.badge-peligro){background:color-mix(in srgb,var(--danger) 22%,var(--surface))!important;color:#F6D3CB!important;border-color:color-mix(in srgb,var(--danger) 50%,var(--surface))!important}
html[data-theme="dark"] :is(.badge-confirmado,.badge-exito,.badge-ok){background:color-mix(in srgb,var(--success) 22%,var(--surface))!important;color:#E3EDCF!important;border-color:color-mix(in srgb,var(--success) 50%,var(--surface))!important}
html[data-theme="dark"] :is(.badge-advertencia,.badge-pendiente){background:color-mix(in srgb,var(--warning) 22%,var(--surface))!important;color:#F4E3B8!important;border-color:color-mix(in srgb,var(--warning) 50%,var(--surface))!important}
html[data-theme="dark"] :is(.advertencia,.bloque-especial,details.ficha-apartado-etapa2) :is(h3,h4,p,label,li,strong,span:not(.badge)){color:var(--text-2)!important}
/* Contenedor que solo agrupa campos (ej. Nombre + Apellido): sus campos pasan a ser celdas del formulario en columnas. */
html body .form-columnas > .campo-contenido{display:contents!important}
html[data-theme="dark"] tr.fila-reputacion-roja{background:color-mix(in srgb,var(--danger) 14%,var(--surface))!important}
html[data-theme="dark"] tr.fila-reputacion-roja > td, html[data-theme="dark"] tr.fila-reputacion-roja a{color:var(--text)!important}
/* Pestaña/categoría activa: el texto usa el color pensado para el relleno de la paleta (oscuro en modo oscuro). */
html[data-palette] body a.ficha-tab-btn.activo, html[data-palette] body .categorias-stock-mov a.activo{color:var(--btn-fill-fg)!important;background:var(--btn-fill)!important}
/* Base de datos: tarjetas y notas con los colores de la paleta. */
html[data-palette] body .bd-card{background:var(--surface)!important;border-color:var(--border-default)!important}
html[data-palette] body .bd-section-note{color:var(--text-muted)!important}
/* Calendario: flechas de mes con el fondo de la paleta (eran blancas fijas, ilegibles en modo oscuro). */
html[data-palette] body .cal-nav a{background:var(--surface)!important;border-color:var(--border-default)!important}
html[data-palette] body .bd-card.activa{background:var(--btn-fill)!important;color:var(--btn-fill-fg)!important;border-color:transparent!important}
/* Amarilla y Verde: el color principal (fondo de elementos activos con texto blanco) un tono más firme. */
html[data-palette="amarilla"]{--primary:#8C6512;--primary-hover:#74530E}
html[data-palette="verde"]{--primary:#4D783F;--primary-hover:#3F6634}

/* ===================================================================
   Dashboard (2026-10): dos columnas. Indicadores a la izquierda,
   To-do y tareas en una columna lateral fija a la derecha.
   =================================================================== */
html body .dash-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"principal lateral";column-gap:28px;align-items:start;margin-top:20px}
html body .dash-principal{grid-area:principal;min-width:0}
html body .dash-lateral{grid-area:lateral;min-width:0;position:sticky;top:calc(var(--topbar-h,68px) + 16px)}
@media (max-width:1100px){
  html body .dash-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"lateral" "principal"}
  html body .dash-lateral{position:static}
}
/* Columna lateral: To-do y Mis tareas como tarjetas compactas */
html body .dash-lateral .seccion-dashboard{background:var(--surface);border:1px solid var(--border-subtle);border-radius:14px;padding:16px 18px;margin:0 0 16px!important;box-shadow:0 1px 3px rgba(0,0,0,.04)}
html body .dash-lateral .seccion-dashboard h3{font-size:17px!important}
html body .dash-lateral .seccion-dashboard > div:first-child{padding:0!important;margin-bottom:12px!important}
html body .dash-lateral .estado-vacio{padding:14px 12px!important;border-style:dashed!important;font-size:13px}
html body .dash-lateral .kpi-grid{grid-template-columns:minmax(0,1fr)!important;gap:10px!important;margin:8px 0 0!important}
html body .dash-lateral .kpi-card{padding:12px 14px!important;box-shadow:none!important}
html body .dash-lateral .dashboard-todo-form{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px}
html body .dash-lateral .dashboard-todo-form input{max-width:none!important}
/* Columna principal: secciones con título y separador, tarjetas parejas */
html body .dash-principal .seccion-dashboard{margin:0 0 28px!important}
html body .dash-principal .seccion-dashboard > h3{font-size:18px;margin:0 0 4px!important;padding-bottom:8px;border-bottom:1px solid var(--border-subtle)}
html body .dash-principal .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;gap:14px!important;margin:14px 0 0!important}
html body .dash-principal .kpi-card{padding:14px 18px!important;border-color:var(--border-subtle)!important;box-shadow:0 1px 3px rgba(0,0,0,.04)!important;min-width:0}
html body .dash-principal a.kpi-card{transition:border-color .15s,box-shadow .15s}
html body .dash-principal a.kpi-card:hover{border-color:var(--btn-line)!important;box-shadow:0 2px 8px rgba(0,0,0,.07)!important}
html body .dash-principal .kpi-card .kpi-numero{font-size:26px!important}
html body .dash-principal .kpi-card h4{margin-top:0}
/* Encabezado: saludo y botones con aire, sin espacio vacío arriba */
html body .contenedor > h2:first-of-type{margin-bottom:10px}
html body .dashboard-pie-acciones{margin-top:8px;padding-top:16px;border-top:1px solid var(--border-subtle)}
/* Alertas de stock del inicio: el estado se indica con color (punto y texto), sin la etiqueta escrita. */
html body .punto-stock{display:inline-block;width:10px;height:10px;border-radius:50%;flex:0 0 auto;vertical-align:middle;margin-right:8px;background:var(--text-muted)}
html body .punto-stock-critico{background:var(--danger)}
html body .punto-stock-bajo{background:var(--warning)}
html body .punto-stock-exceso{background:var(--link)}
html body .texto-stock-critico{color:var(--danger)}
html body .leyenda-stock{display:flex;gap:14px;margin:2px 0 8px;font-size:11.5px;color:var(--text-muted)}
html body .leyenda-stock > span{display:inline-flex;align-items:center}
html body .leyenda-stock .punto-stock{width:8px;height:8px;margin-right:5px}
/* Pie del dashboard: Modificar módulos, Filtrar y Editar juntos, abajo de todo. */
html body .dashboard-pie-acciones{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
html body .dashboard-pie-acciones .dashboard-modulos-cabecera{display:flex;gap:10px;flex-wrap:wrap;margin:0!important}
html body .dashboard-pie-acciones .dashboard-modulos-cabecera > button{flex:0 0 auto!important;width:auto!important}
html body .dashboard-pie-acciones + .dashboard-modulos-panel, html body .dashboard-pie-acciones ~ .dashboard-modulos-panel{margin-top:14px}
/* Mi perfil: cerrar sesión al final. */
html body .mi-perfil-cerrar-sesion{margin-top:28px;padding-top:18px;border-top:1px solid var(--border-subtle);display:flex;justify-content:flex-end}

/* ===================================================================
   Aire y alineación general (2026-10): campos y botones de la misma altura
   (38 px) para que, uno al lado del otro, queden alineados; separación pareja
   entre controles. Las tablas y las fichas tipo tabla conservan su tamaño.
   =================================================================== */
html body .contenedor :is(button,input[type=submit],input[type=button],a.vz-btn-sm,a.btn-secundario,a.btn-peligro,a.vz-btn):not(.vz-icon-btn,.ficha-tab-btn,.link,.vz-topbar-pill):not(td *,.ficha-form-compacta *,.chip-restriccion *,.kpi-card *,.cal-celda *){height:38px!important;min-height:38px!important;padding:0 16px!important}
html body .contenedor :is(input:not([type=checkbox],[type=radio],[type=hidden],[type=file],[type=submit],[type=button],[type=color],[type=range]),select):not(td *,.ficha-form-compacta *){height:38px!important;min-height:38px!important}
html body .contenedor .envoltorio-fecha-unico:not(td *,.ficha-form-compacta *){height:38px!important}
/* Filas de controles: separación pareja y alineadas por la base (etiqueta arriba, campo y botón en la misma línea). */
html body .contenedor :is(div,form,p,span)[style*="display:flex"]:not([style*="gap"]),
html body .contenedor :is(div,form,p,span)[style*="display: flex"]:not([style*="gap"]){gap:10px}
html body .contenedor form:is([style*="display:flex"],[style*="display: flex"]):not([style*="align-items"]){align-items:flex-end}
html body .contenedor form:is([style*="display:flex"],[style*="display: flex"]) > div{margin-bottom:0}
/* Botones seguidos sin contenedor flex (dentro de un párrafo): un poco de aire entre ellos. */
html body .contenedor p > :is(button,a.btn-secundario,a.vz-btn-sm,a.btn-peligro) + :is(button,a.btn-secundario,a.vz-btn-sm,a.btn-peligro){margin-left:8px}
/* Grupos de botones al final de un formulario o bloque */
html body .contenedor :is(form,.bloque) > :is(button,a.btn-secundario,a.vz-btn-sm,a.btn-peligro) + :is(button,a.btn-secundario,a.vz-btn-sm,a.btn-peligro,a){margin-left:8px}
/* Dashboard: todos los títulos de módulo miden lo mismo, así la primera tarjeta de cada módulo
   arranca a la misma altura; el To-do lateral empieza alineado con esa primera tarjeta. */
html body .dash-principal .seccion-dashboard > h3,
html body .dash-principal #seccion-tareas > div:first-child{box-sizing:content-box;height:34px;display:flex;align-items:center;gap:12px;margin:0 0 14px!important;padding:0 0 8px!important;border-bottom:1px solid var(--border-subtle);font-size:18px}
html body .dash-principal #seccion-tareas > div:first-child h3{font-size:18px;margin:0}
html body .dash-principal .seccion-dashboard > h3 + .kpi-grid{margin-top:0!important}
html body .dash-principal #seccion-tareas{margin-top:0!important}
html body .dash-principal #seccion-tareas .estado-vacio{padding:18px 16px!important;margin:0}
html body .dash-principal #seccion-tareas .kpi-grid{margin-top:0!important}
html body .dash-lateral{margin-top:57px}
@media (max-width:1100px){html body .dash-lateral{margin-top:0}}
/* Cruz para quitar un acceso rápido: sin borde ni fondo, dentro de la píldora. */
html body .contenedor button.boton-quitar-chip.boton-quitar-chip.boton-quitar-chip{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--text-muted)!important;height:24px!important;min-height:24px!important;width:24px;padding:0!important;font-size:18px!important;line-height:1!important;border-radius:50%!important}
html body .contenedor button.boton-quitar-chip.boton-quitar-chip.boton-quitar-chip:hover{color:var(--danger)!important;background:var(--btn-tint)!important}
/* Botones uno al lado del otro (sin contenedor con separación): 10 px entre ellos. */
html body .contenedor :is(button,a.btn-secundario,a.vz-btn-sm,a.btn-peligro,a.ficha-tab-btn,form[style*="inline"]) + :is(button,a.btn-secundario,a.vz-btn-sm,a.btn-peligro,a.ficha-tab-btn,form[style*="inline"]):not(td *){margin-left:6px}
html body .contenedor :is(select,input:not([type=hidden],[type=checkbox],[type=radio])) + :is(select,input:not([type=hidden],[type=checkbox],[type=radio])):not(td *,.form-columnas *,.campo-doble *){margin-left:8px}
/* Recuperar contraseña: mismo estilo que el login, con texto de ayuda y confirmación clara. */
html body .tarjeta-recuperar .recuperar-texto{font-size:14px;line-height:1.5;color:var(--text-2);margin:-4px 0 18px;text-align:center}
html body .tarjeta-recuperar form{text-align:left}
html body .tarjeta-recuperar form > div{margin-bottom:16px}
html body .tarjeta-recuperar form button{width:100%}
html body .tarjeta-recuperar .recuperar-volver{margin:18px 0 0;font-size:14px;text-align:center}
html body .tarjeta-recuperar .recuperar-enviado{text-align:center;padding:6px 4px 2px}
html body .tarjeta-recuperar .recuperar-enviado svg{width:40px;height:40px;fill:none;stroke:var(--btn-fill);stroke-width:1.6;stroke-linejoin:round;margin:0 auto 6px;display:block}
html body .tarjeta-recuperar .recuperar-enviado p{margin:6px 0;font-size:14px;line-height:1.5;color:var(--text-2)}
html body .tarjeta-recuperar .recuperar-enviado strong{color:var(--text);font-size:16px}
html body .tarjeta-recuperar .recuperar-ayuda{font-size:12.5px!important;color:var(--text-muted)!important}

/* ---- Buscador de la barra superior: una sola pieza, sin fondo detrás de la lupa ni línea divisoria ---- */
html body .vz-topbar .hs-caja{background:var(--input-bg,#fff)!important;border:1px solid var(--input-border,var(--border))!important}
html body .vz-topbar .hs-lupa-bloque{background:transparent!important;border:0!important;width:38px;flex:0 0 38px;padding-left:4px}
html body .vz-topbar .hs-caja .hs-input{background:transparent!important;border:0!important;box-shadow:none!important;padding-left:2px!important}
html body .vz-topbar .hs-caja:focus-within{border-color:var(--btn-fill,var(--primary))!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--btn-fill,#5a6b3a) 18%,transparent)!important}

/* ---- Barra superior en pantallas medianas: el logo deja de competir con los botones ---- */
@media (min-width:769px) and (max-width:1240px){
  html body .vz-topbar{grid-template-columns:auto auto minmax(0,1fr)!important}
  html body .vz-topbar .vz-topbar-center{justify-content:flex-start}
  html body .vz-topbar .vz-topbar-pill-texto{display:none}
  html body .vz-topbar .vz-topbar-pill{width:40px;padding:0;justify-content:center;gap:0}
  html body .vz-topbar .vz-topbar-right{gap:10px}
  html body .vz-topbar .hs-caja{flex:1 1 300px;width:auto;min-width:150px;max-width:300px}
}

/* ---- Dashboard: encabezado de Eventos con su propio filtro de fechas ---- */
html body .seccion-dashboard > .seccion-eventos-encabezado{box-sizing:content-box;height:34px;display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:0 0 8px;border-bottom:1px solid var(--border-subtle)}
html body .seccion-eventos-encabezado h3{font-size:18px;margin:0!important;padding:0!important;border:0!important;height:auto!important}
html body .seccion-eventos-encabezado .boton-filtro-eventos{display:inline-flex;align-items:center;gap:6px;height:32px!important;min-height:32px!important;padding:0 12px!important;font-size:12.5px!important;border-radius:999px!important;margin:0 0 0 4px!important;width:auto!important}
html body .seccion-eventos-encabezado .boton-filtro-eventos i,html body .seccion-eventos-encabezado .boton-filtro-eventos svg{width:15px;height:15px}
html body .seccion-eventos-encabezado .boton-filtro-eventos.activo{background:var(--btn-fill)!important;color:var(--btn-fill-fg)!important;border-color:var(--btn-fill)!important}
html body .filtro-eventos-dashboard{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:12px 14px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--surface,#fff)}
html body .filtro-eventos-dashboard[hidden]{display:none}
html body .filtro-eventos-dashboard label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;margin:0}
html body .filtro-eventos-dashboard input[type=date]{height:38px;margin:0}
html body .filtro-eventos-dashboard :is(button,a){height:38px;margin:0!important;display:inline-flex;align-items:center}

/* ---- Reuniones: filas parejas, controles con borde y botones alineados ---- */
html body #form-reunion .reu-fila{grid-template-columns:210px minmax(0,1fr)!important;align-items:stretch!important}
html body #form-reunion .reu-fila > label{padding:8px 14px!important;margin:0!important;color:var(--text-2)}
html body #form-reunion .reu-celda{display:flex;align-items:center;gap:8px;padding:6px 12px!important;margin:0!important;min-width:0}
html body #form-reunion .reu-celda > :is(select,input:not([type=checkbox]):not([type=radio])),
html body #form-reunion .proveedor-reunion-fila select{height:36px!important;min-height:36px!important;border:1px solid var(--input-border,var(--border))!important;border-radius:8px!important;background:var(--input-bg,#fff)!important;padding:0 10px!important;margin:0!important;width:auto;min-width:220px;max-width:100%;box-shadow:none!important}
html body #form-reunion .reu-celda textarea{width:100%;margin:0!important}
html body #form-reunion .proveedor-reunion-fila{display:flex!important;align-items:center;gap:8px;margin:0!important;padding:0!important;flex-wrap:wrap}
html body #form-reunion .proveedor-reunion-fila .boton-crear-proveedor{height:36px!important;min-height:36px!important;padding:0 14px!important;margin:0!important;font-size:13px!important}
html body #form-reunion .tema-reunion{border-radius:12px;overflow:hidden}
html body #form-reunion .tema-reunion textarea{border-radius:10px}
@media (max-width:640px){html body #form-reunion .reu-fila{grid-template-columns:1fr!important}html body #form-reunion .reu-fila > label{border-right:0!important;padding-bottom:0!important}html body #form-reunion .reu-celda > :is(select,input){min-width:0;width:100%}}
html body #form-reunion .proveedor-reunion-control{padding:0!important;margin:0!important;border:0!important}
html body #form-reunion .detalle-servicio{padding:0!important}
html body #form-reunion .reu-celda{justify-content:flex-start!important}
html body #form-reunion .reu-celda{flex-direction:row!important;flex-wrap:wrap}
html body #form-reunion .reu-celda > select,html body #form-reunion .proveedor-reunion-fila select{width:320px!important;max-width:100%!important;flex:0 1 auto!important;align-self:center}
html body #form-reunion .proveedor-reunion-fila{width:100%;justify-content:flex-start!important}

/* ---- Cabecera de las áreas del evento (gastronomía, bebidas, etc.) ---- */
html body .area-cabecera{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px}
html body .area-cabecera h2{margin:0}
html body .area-cabecera-meta{margin:4px 0 0;color:var(--text-muted);font-size:13.5px}
html body .area-cabecera-acciones{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html body .area-cabecera-acciones > *{margin:0!important}
html body .area-cabecera-acciones :is(a,button){height:36px!important;min-height:36px!important;padding:0 14px!important;font-size:13px!important;display:inline-flex;align-items:center}
html body .boton-historial-area{height:32px!important;min-height:32px!important;padding:0 12px!important;font-size:12.5px!important;display:inline-flex!important;align-items:center;margin:0 0 0 8px}

/* ======== Reuniones (primera y final): una tarjeta por área, sin bordes dobles, campos parejos ======== */
html body #form-reunion > .bloque,html body #form-reunion .bloque:has(> details.reunion-area-desplegable){border:0!important;padding:0!important;background:transparent!important;box-shadow:none!important}
html body #form-reunion details.reunion-area-desplegable{border:1px solid var(--border-subtle)!important;border-radius:14px!important;margin:0 0 14px!important;background:var(--surface,#fff)!important;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.03)}
html body #form-reunion details.reunion-area-desplegable>summary{padding:13px 18px!important;font-weight:700;font-size:15px;background:var(--surface-2,#f6f2e9);cursor:pointer;list-style-position:inside}
html body #form-reunion details.reunion-area-desplegable[open]>summary{border-bottom:1px solid var(--border-subtle)}
html body #form-reunion .tema-reunion{border:0!important;border-radius:0!important;margin:0!important;padding:0!important;box-shadow:none!important;background:transparent!important}
html body #form-reunion .tema-reunion-header,html body #form-reunion .estado-servicio,html body #form-reunion .detalle-servicio,html body #form-reunion .servicio-reunion{border:0!important;margin:0!important;padding:0!important;background:transparent!important;box-shadow:none!important}
html body #form-reunion .reu-fila{border-bottom:1px solid var(--border-subtle)!important;background:transparent!important}
html body #form-reunion .reu-fila > label{border-right:0!important;background:transparent!important;align-items:center}
/* Todos los textos largos con el mismo borde y aire */
html body #form-reunion textarea{display:block;border:1px solid var(--input-border,var(--border))!important;border-radius:10px!important;background:var(--input-bg,#fff)!important;padding:10px 12px!important;width:100%!important;box-sizing:border-box;min-height:64px;resize:vertical}
html body #form-reunion .reu-celda textarea{min-height:52px}
html body #form-reunion .tema-reunion > textarea,html body #form-reunion .detalle-servicio > textarea{margin:12px 16px!important}
html body #form-reunion .tema-reunion > p,html body #form-reunion .detalle-servicio > p,html body #form-reunion .tema-reunion > .nota-origen{margin:12px 16px!important;padding:0!important;border:0!important}
html body #form-reunion .tema-reunion > textarea,html body #form-reunion .detalle-servicio > textarea{width:calc(100% - 32px)!important}
/* Carpas: una fila liviana por carpa, con el botón separado */
html body #form-reunion .carpa-piso-grid{border:0!important;padding:0!important;margin:0!important}
html body #form-reunion .carpas-lista{margin:12px 16px 0!important;padding:0!important;border:0!important}
html body #form-reunion .carpa-fila{display:flex!important;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--border-subtle)!important;border-radius:10px!important;padding:10px 12px!important;margin:0 0 10px!important;background:var(--surface-2,#faf8f3)!important}
html body #form-reunion .carpa-fila > div{flex:1 1 320px;min-width:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
html body #form-reunion .carpa-fila select{height:36px!important;min-height:36px!important;flex:0 1 360px;max-width:100%;margin:0!important;border:1px solid var(--input-border,var(--border))!important;border-radius:8px!important;background:var(--input-bg,#fff)!important}
html body #form-reunion .carpa-detalle{font-size:12.5px;color:var(--text-muted);margin:0!important}
html body #form-reunion .carpa-fila > button{margin:0 0 0 auto!important;height:34px!important;min-height:34px!important;padding:0 14px!important}
html body #form-reunion .total-piso{margin:6px 16px 12px!important;font-weight:600}
html body #form-reunion .carpa-piso-grid + *, html body #form-reunion .carpas-lista + button{margin:0 16px 12px!important}
/* Resúmenes y notas de origen */
html body #form-reunion .gastronomia-resumen{margin:12px 16px!important;padding:12px 14px!important;border:1px solid var(--border-subtle)!important;border-radius:10px!important;background:var(--surface-2,#faf8f3)!important}
html body #form-reunion .nota-origen{font-size:12.5px;color:var(--text-muted)}
html body #form-reunion .gastronomia-acciones{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0!important}
/* Botones nunca pegados a los campos */
html body #form-reunion :is(input,select,textarea) + :is(button,a.btn-secundario){margin-left:8px!important}
html body #form-reunion button:not(.vz-icon-btn){white-space:nowrap}
/* Detalles generales y fecha de la reunión */
html body .reunion-generales{border:1px solid var(--border-subtle)!important;border-radius:14px!important;padding:16px 18px!important;margin:0 0 16px!important}
html body .reunion-generales-grilla{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px 18px;align-items:end}
html body .reunion-generales-grilla > label{display:flex;flex-direction:column;gap:6px;margin:0!important;font-size:13px;font-weight:600}
html body .reunion-generales-grilla :is(input,select){height:38px!important;margin:0!important;width:100%}
html body .reunion-generales-grilla textarea{grid-column:1/-1}
@media (max-width:640px){html body #form-reunion .carpa-fila > button{margin-left:0!important}}
html body #form-reunion .tema-reunion > .detalle-servicio:not(.x1):not(.x2):not(.x3):not(.x4):not(.x5),html body #form-reunion .detalle-servicio > .proveedor-reunion-control:not(.x1):not(.x2):not(.x3):not(.x4):not(.x5){padding:0!important;margin:0!important;border:0!important}
/* Detalles generales de la reunión: grilla de campos (reemplaza el formato tabla) */
html body .contenedor form.reunion-generales{padding:0!important;overflow:hidden}
html body .contenedor form.reunion-generales > h3{padding:13px 18px!important;margin:0!important;font-size:15px!important;background:var(--surface-2,#f6f2e9);border-bottom:1px solid var(--border-subtle)!important}
html body .contenedor form.reunion-generales .reunion-generales-grilla{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important;gap:14px 18px!important;padding:16px 18px!important;align-items:start}
html body .contenedor form.reunion-generales .reunion-generales-grilla > label{display:flex!important;flex-direction:column!important;gap:6px!important;border:0!important;min-height:0!important;font-size:12.5px!important;color:var(--text-2);padding:0!important;margin:0!important}
html body .contenedor form.reunion-generales .reunion-generales-grilla > label.reunion-generales-ancho{grid-column:1/-1!important}
html body .contenedor form.reunion-generales .reunion-generales-grilla > label > :is(input,select,textarea){grid-column:auto!important;border:1px solid var(--input-border,var(--border))!important;border-radius:8px!important;background:var(--input-bg,#fff)!important;height:38px!important;padding:0 10px!important;width:100%!important;box-sizing:border-box;font-size:14px}
html body .contenedor form.reunion-generales .reunion-generales-grilla > label > textarea{height:auto!important;min-height:60px;padding:8px 10px!important}
html body .contenedor form.reunion-generales .reunion-generales-grilla > label > .envoltorio-fecha-unico{grid-column:auto!important;border:1px solid var(--input-border,var(--border))!important;border-radius:8px!important;background:var(--input-bg,#fff)!important;height:38px!important;max-width:none!important;padding:0 4px 0 10px!important;box-sizing:border-box}
html body .contenedor form.reunion-generales > .pendiente,html body .contenedor form.reunion-generales > .exito{padding:0 18px 12px!important;margin:0!important}
/* Fecha de la reunión (arriba de las áreas) */
html body #form-reunion > .bloque > label:first-child,html body #form-reunion .envoltorio-fecha-unico{max-width:260px}
html body #form-reunion .envoltorio-fecha-unico{border:1px solid var(--input-border,var(--border))!important;border-radius:8px!important;background:var(--input-bg,#fff)!important;height:38px;padding:0 4px 0 10px!important;box-sizing:border-box}
html body .contenedor form.reunion-generales .reunion-generales-grilla > label{text-align:left!important;align-items:stretch!important}
html body #form-reunion .envoltorio-fecha-unico{max-width:260px!important}

/* ---- Base de datos: menú agrupado ---- */
html body #bdPage .bd-menu{display:flex;flex-direction:column;gap:14px;margin:12px 0 20px}
html body #bdPage .bd-menu-grupo h3{margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
html body #bdPage .bd-menu .bd-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;gap:10px!important;margin:0!important}
html body #bdPage .bd-menu .bd-card{display:flex!important;flex-direction:column;align-items:flex-start!important;justify-content:flex-start!important;gap:3px;min-height:0!important;padding:12px 14px!important;border:1px solid var(--border-subtle)!important;border-radius:12px!important;background:var(--surface,#fff)!important;color:var(--text)!important;text-decoration:none!important;text-align:left!important}
html body #bdPage .bd-menu .bd-card strong{font-size:14px}
html body #bdPage .bd-menu .bd-card span{font-size:12px;color:var(--text-muted);font-weight:400;line-height:1.35}
html body #bdPage .bd-menu .bd-card:hover{border-color:var(--btn-fill)!important}
html body #bdPage .bd-menu .bd-card.activa{border-color:var(--btn-fill)!important;box-shadow:inset 3px 0 0 var(--btn-fill)}
html body #bdPage .bd-menu .bd-card.activa span{color:var(--text-muted)!important}
html body #bdPage .bd-menu .bd-card.activa strong{color:var(--text)!important}
html body #bdPage .bd-menu a.bd-card.activa,html body #bdPage .bd-menu a.bd-card.activa *{color:var(--text)!important;-webkit-text-fill-color:currentColor;background-color:transparent}
html body #bdPage .bd-menu a.bd-card.activa{background:var(--surface,#fff)!important}
html body #bdPage .bd-menu a.bd-card.activa span{color:var(--text-muted)!important}
html body .kpi-oculto-monto{display:none!important}

/* ---- Reuniones: cronograma simple ---- */
html body #reunion-cronograma .crono{padding:12px 16px 14px}
html body #reunion-cronograma .crono-fila{display:grid;grid-template-columns:118px minmax(0,2fr) minmax(0,1fr) 34px;gap:8px;align-items:center;margin:0 0 6px}
html body #reunion-cronograma .crono-cab{font-size:12px;color:var(--text-muted);font-weight:600;margin:0 0 2px}
html body #reunion-cronograma .crono-fila input{height:36px!important;min-height:36px!important;margin:0!important;width:100%!important;border:1px solid var(--input-border,var(--border))!important;border-radius:8px!important;padding:0 10px!important;background:var(--input-bg,#fff)!important;box-shadow:none!important}
html body #reunion-cronograma button.crono-quitar{width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;color:var(--text-muted)!important;font-size:20px!important;margin:0!important;box-shadow:none!important}
html body #reunion-cronograma button.crono-quitar:hover{background:var(--surface-2,#f1ede3)!important}
html body #reunion-cronograma .crono-acciones{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 0}
html body #reunion-cronograma .crono-acciones > *{margin:0!important}
html body #reunion-cronograma .nota-origen{margin:10px 0 0!important}
html body #reunion-cronograma .crono-historial{margin:12px 0 0;border:0!important;background:transparent!important}
html body #reunion-cronograma .crono-historial summary{cursor:pointer;font-size:13px;color:var(--text-2);padding:0!important;background:transparent!important;border:0!important}
html body #reunion-cronograma .crono-historial table{width:100%;margin-top:8px;font-size:13px;border-collapse:collapse}
html body #reunion-cronograma .crono-historial td{padding:5px 8px;border-bottom:1px solid var(--border-subtle)}
html body #reunion-cronograma .crono-historial td:first-child{width:70px;color:var(--text-muted)}
html body #reunion-cronograma .crono-version{margin:12px 0 0!important;font-size:12px;color:var(--text-muted)}
html body #reunion-cronograma button.crono-link{background:none!important;border:0!important;padding:0!important;height:auto!important;min-height:0!important;color:var(--btn-fill)!important;text-decoration:underline;font-size:12px!important;box-shadow:none!important;margin:0!important}
@media (max-width:640px){html body #reunion-cronograma .crono-fila{grid-template-columns:96px minmax(0,1fr) 34px}html body #reunion-cronograma .crono-fila input[name="responsable[]"]{grid-column:2}html body #reunion-cronograma .crono-cab span:nth-child(3){display:none}}
/* Reuniones: todos los campos con el mismo formato y más aire */
html body #form-reunion :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=date]),select){height:38px!important;min-height:38px!important;border:1px solid var(--input-border,var(--border))!important;border-radius:8px!important;background:var(--input-bg,#fff)!important;padding:0 12px!important;box-shadow:none!important;font-size:14px!important;color:var(--text)!important}
html body #form-reunion textarea{font-size:14px!important;color:var(--text)!important;line-height:1.45}
html body #form-reunion .reu-fila{min-height:54px}
html body #form-reunion .reu-celda{padding:8px 14px!important}
html body #form-reunion .reu-fila > label{font-size:13px!important;font-weight:600!important;color:var(--text-2)!important;padding:8px 16px!important}
html body #form-reunion .reu-celda > :is(select,input:not([type=checkbox])){width:340px!important;max-width:100%!important}
html body #form-reunion .reu-celda > textarea{width:100%!important}
html body #form-reunion :is(input,select,textarea):focus{border-color:var(--btn-fill)!important;outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--btn-fill) 16%,transparent)!important}
html body #form-reunion input::placeholder,html body #form-reunion textarea::placeholder{color:var(--text-muted);opacity:.8}

/* ======== Campos de fecha: un solo borde (el del campo) y el ícono del calendario centrado adentro, sin aro propio ======== */
html body .envoltorio-fecha-unico{position:relative!important;display:flex!important;align-items:center!important;gap:0!important}
html body .envoltorio-fecha-unico > input[type="date"]{width:100%!important;padding-right:44px!important;margin:0!important;box-sizing:border-box}
html body .envoltorio-fecha-unico > .boton-calendario-bonito,
html body .envoltorio-fecha-unico > button.boton-calendario-bonito.vz-icon-btn{position:absolute!important;right:6px!important;top:50%!important;transform:translateY(-50%)!important;
  width:32px!important;min-width:32px!important;max-width:32px!important;height:32px!important;min-height:32px!important;flex:none!important;align-self:auto!important;
  padding:0!important;margin:0!important;border:0!important;outline:0;border-radius:8px!important;background:transparent!important;box-shadow:none!important;
  display:flex!important;align-items:center!important;justify-content:center!important;color:var(--text-muted,#6b7160)!important;cursor:pointer}
html body .envoltorio-fecha-unico > .boton-calendario-bonito:hover{background:var(--surface-2,#f1ede3)!important;color:var(--btn-fill)!important}
html body .envoltorio-fecha-unico > .boton-calendario-bonito:focus-visible{box-shadow:0 0 0 2px var(--btn-fill)!important}
html body .envoltorio-fecha-unico > .boton-calendario-bonito :is(svg,i){width:18px!important;height:18px!important;margin:0!important;border:0!important;background:transparent!important}
/* Si el borde lo pone el envoltorio (reuniones), el campo de adentro no lleva otro */
html body #form-reunion .envoltorio-fecha-unico > input[type="date"],html body .contenedor form.reunion-generales .envoltorio-fecha-unico > input[type="date"]{border:0!important;box-shadow:none!important;background:transparent!important;height:100%!important;padding-left:0!important}

/* Carteles de aviso (éxito, error, advertencia): siempre con aire respecto de lo que sigue */
html body .contenedor > :is(.exito,.error,.advertencia),html body .contenedor > :is(p,div):is(.exito,.error){margin-bottom:18px!important}

/* ---- Áreas de la empresa: botón de área actual arriba y en el menú ---- */
html body .vz-topbar .vz-area-pill{font-weight:700;letter-spacing:.03em}
html body .menu-flyout .menu-area-actual{background:var(--surface-2,#f3efe6)!important;border-bottom:1px solid var(--border-subtle);font-weight:700}
html body .menu-flyout .menu-area-actual .menu-level-flecha{font-size:11.5px;font-weight:600;color:var(--btn-fill);letter-spacing:0}

/* === Menú lateral: ancho fijo (no cambia al desplegar) y sin barra de desplazamiento visible === */
.menu-flyout {
    width: 320px !important;
    min-width: 0 !important;
    max-width: 90vw !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    overscroll-behavior: contain;
}
.menu-flyout::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.menu-flyout .menu-level-1 > .menu-level-texto,
.menu-flyout .menu-level-2 > .menu-level-texto,
.menu-flyout .menu-level-3 > .menu-level-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* === Dashboard: el nombre de cada sección se lee como título (no se pierde al lado de los botones y KPIs) === */
html[data-palette] body .dash-principal .seccion-dashboard > h3,
html[data-palette] body .dash-principal .seccion-eventos-encabezado h3,
html[data-palette] body.v2 .dash-principal .seccion-dashboard > h3,
html[data-palette] body.v2 .dash-principal .seccion-eventos-encabezado h3 {
    font-size: 22px !important; font-weight: 600 !important; letter-spacing: -.3px; line-height: 1.2 !important; margin: 0 0 12px !important;
}
html[data-palette] body .dash-principal .seccion-eventos-encabezado { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; }
html[data-palette] body .dash-principal .seccion-eventos-encabezado h3 { margin: 0 !important; }
html[data-palette] body .dash-principal .seccion-dashboard { margin-top: 30px; }

/* ===================================================================
   COLOR POR ÁREA (data-acento en <html>): Turismo verde (el de siempre), Bodega bordó,
   Comercial azul marino y Administración magenta. Cada usuario puede cambiarlo por área.
   Solo cambian los acentos (botones, enlaces, selección, menú); fondos y textos son los del modo.
   =================================================================== */
html[data-palette="clasica"][data-acento="bordo"] {
    --primary:#7A2335; --primary-hover:#63192A; --link:#7A2335; --focus:#C98A97; --selected-bg:#F4E3E6;
    --btn-fill:#7A2335; --btn-fill-hover:#63192A; --btn-line:#7A2335; --btn-tint:rgba(122,35,53,.10); --btn-link:#7A2335;
    --surface-brand-strong:#7A2335; --acento-oscuro:#3B141D; --acento-medio:#5C2131; --acento-claro:#F4E3E6; --acento-texto:#3B141D;
}
html[data-palette="clasica"][data-acento="azul"] {
    --primary:#1F3A5F; --primary-hover:#172D4A; --link:#24467A; --focus:#8FA8C8; --selected-bg:#E2E9F3;
    --btn-fill:#1F3A5F; --btn-fill-hover:#172D4A; --btn-line:#1F3A5F; --btn-tint:rgba(31,58,95,.10); --btn-link:#24467A;
    --surface-brand-strong:#1F3A5F; --acento-oscuro:#13233A; --acento-medio:#22385A; --acento-claro:#E2E9F3; --acento-texto:#13233A;
}
html[data-palette="clasica"][data-acento="magenta"] {
    --primary:#8E2766; --primary-hover:#741F53; --link:#8E2766; --focus:#D58CB8; --selected-bg:#F6E2EE;
    --btn-fill:#8E2766; --btn-fill-hover:#741F53; --btn-line:#8E2766; --btn-tint:rgba(142,39,102,.10); --btn-link:#8E2766;
    --surface-brand-strong:#8E2766; --acento-oscuro:#3A1430; --acento-medio:#5B2049; --acento-claro:#F6E2EE; --acento-texto:#3A1430;
}
html[data-palette="clasica"][data-acento="verde"], html[data-palette="clasica"]:not([data-acento]) {
    --acento-oscuro:#2F3A1F; --acento-medio:#46562A; --acento-claro:#E9EDDC; --acento-texto:#26301A;
}
html[data-palette="oscura"][data-acento="bordo"] {
    --primary:#E3A3B1; --primary-hover:#ECBAC5; --link:#EBB0BD; --focus:#E3A3B1; --selected-bg:#45282E;
    --btn-fill:#E3A3B1; --btn-fill-hover:#ECBAC5; --btn-fill-fg:#1B1D16; --btn-line:#E3A3B1; --btn-tint:rgba(227,163,177,.14); --btn-link:#EBB0BD;
}
html[data-palette="oscura"][data-acento="azul"] {
    --primary:#A8C1E4; --primary-hover:#BDD0EC; --link:#B3CAEC; --focus:#A8C1E4; --selected-bg:#26344A;
    --btn-fill:#A8C1E4; --btn-fill-hover:#BDD0EC; --btn-fill-fg:#1B1D16; --btn-line:#A8C1E4; --btn-tint:rgba(168,193,228,.14); --btn-link:#B3CAEC;
}
html[data-palette="oscura"][data-acento="magenta"] {
    --primary:#E8A6CB; --primary-hover:#F0BDDA; --link:#F0B3D5; --focus:#E8A6CB; --selected-bg:#43263A;
    --btn-fill:#E8A6CB; --btn-fill-hover:#F0BDDA; --btn-fill-fg:#1B1D16; --btn-line:#E8A6CB; --btn-tint:rgba(232,166,203,.14); --btn-link:#F0B3D5;
}

/* Insignias que son enlaces: el color global de los enlaces no pisa el de la insignia (contraste). */
a.badge-advertencia, a.badge-pendiente { --link: var(--status-warning-fg); --text-link: var(--status-warning-fg); }
a.badge-error, a.badge-cancelado { --link: var(--status-danger-fg); --text-link: var(--status-danger-fg); }
a.badge-info { --link: var(--status-info-fg); --text-link: var(--status-info-fg); }
a.badge-neutro { --link: var(--text-body, var(--text)); --text-link: var(--text-body, var(--text)); }
a.badge-exito, a.badge-ok, a.badge-confirmado { --link: var(--status-success-fg, var(--success)); --text-link: var(--status-success-fg, var(--success)); }
html[data-theme="dark"] a:is(.badge-error, .badge-peligro) { --link: #F6D3CB; }
html[data-theme="dark"] a:is(.badge-advertencia, .badge-pendiente) { --link: #F4E3B8; }

/* Elementos activos con fondo del color principal: su texto (aunque sean enlaces) usa el color de texto sobre ese fondo. */
:is(.vr-dia.activo, .asis-tab.activa, .bd-card.activa, .boton-filtro-eventos.activo, .ficha-tab-btn.activo, .categorias-stock-mov a.activo, .cg-vistas a.activa, .cg-celda.hoy .cg-num, .filtro-rapido-tarea.activo.badge-neutro) { --link: var(--btn-fill-fg); --text-link: var(--btn-fill-fg); }

/* Variables de estado heredadas: en modo oscuro usan los colores de estado del modo (contraste). */
html[data-theme="dark"] { --color-cancelado: var(--danger); --color-confirmado: var(--success); --color-pendiente-estado: var(--warning); --color-info: #A9C2DE; }

/* Menú lateral: un poco de aire entre ítems (el resaltado al pasar el mouse no se pega al ítem activo) y bajo el área. */
html body .menu-flyout { gap: 3px !important; }
html body .menu-flyout :is(.menu-level-1, .menu-level-2, .menu-level-3) { margin: 0 !important; }
html body .menu-flyout .submenu, html body .menu-flyout .nivel-3-contenedor { gap: 3px !important; }
html body .menu-flyout .menu-area-actual { margin-bottom: 8px !important; }
/* Alta de consulta: nombre y apellido del cliente en dos campos, uno al lado del otro. */
html body #form-crear-consulta .cq-val .cq-nombre-apellido{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
@media (max-width:560px){html body #form-crear-consulta .cq-val .cq-nombre-apellido{grid-template-columns:1fr}}
/* Tabla de consultas: descarga directa del presupuesto. */
html[data-palette] body a.cq-pdf{display:inline-flex!important;align-items:center;gap:5px;height:32px!important;min-height:32px!important;padding:0 12px!important;font-size:12.5px!important;margin:0!important;border-radius:999px!important}
html[data-palette] body a.cq-pdf svg{width:15px;height:15px}
html[data-palette] body a.cq-pdf-generar{font-size:12.5px}
/* Consultas: rango de invitados ("100 a 150"); el segundo campo es opcional. */
html[data-palette] body .cq-rango-invitados{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px}
html[data-palette] body .cq-rango-invitados>input{width:100%!important;max-width:none!important;margin:0!important}
html[data-palette] body .cq-rango-invitados>span{color:var(--text-muted);font-size:13px}
/* Consulta: enviar mail armado (programa de correo o Gmail). */
html[data-palette] body .fc-mail{display:inline-flex;gap:6px;align-items:center}
html[data-palette] body .fc-mail a{margin:0!important;display:inline-flex!important;align-items:center;gap:6px}
html[data-palette] body .fc-mail svg{width:16px;height:16px}
html[data-palette] body a.cq-mail{margin-left:6px!important}
/* Primera reunión: "Otra duración" muestra la cantidad de horas al lado del selector, sin agregar una fila */
html body .contenedor form.reunion-generales .reunion-generales-grilla > label.reunion-duracion{flex-direction:row!important;flex-wrap:wrap!important;column-gap:8px!important}
html body .contenedor form.reunion-generales .reunion-generales-grilla > label.reunion-duracion > span{flex:0 0 100%}
html body .contenedor form.reunion-generales .reunion-generales-grilla > label.reunion-duracion > select{flex:1 1 0!important;min-width:0!important;width:auto!important}
html body .contenedor form.reunion-generales .reunion-generales-grilla > label.reunion-duracion > input{flex:0 0 86px!important;width:86px!important}

/* Importar consultas desde Excel */
.imp-pasos{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:12px 0}
.imp-paso{border:1px solid var(--border,#e2ddd3);border-radius:12px;padding:14px 16px;background:var(--surface,#fff);display:flex;flex-direction:column;gap:8px}
.imp-paso h4{margin:0;font-size:15px}.imp-paso p{margin:0;color:var(--text-muted,#6b6459);font-size:13px}
.imp-paso .vz-btn-sm,.imp-paso .btn-secundario{align-self:flex-start;margin-top:auto}
.imp-paso input[type=file]{font-size:13px;max-width:100%}
.imp-scroll{overflow-x:auto}
table.imp-tabla{width:100%;font-size:13px}table.imp-tabla td{vertical-align:top}
tr.imp-error td{background:var(--status-danger-bg,#fbe9e9)}
.imp-chip{font-size:11px;padding:1px 7px;border-radius:999px;background:var(--surface-2,#eee8dc)}