@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

/* ============================================================
   FormVault — Design System v2
   Tema: Dark luxury / Corporate premium
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --fv-bg:       #080810;
  --fv-bg2:      #0d0b18;
  --fv-bg3:      #111020;
  --fv-card:     rgba(255,255,255,.028);
  --fv-border:   rgba(255,255,255,.08);
  --fv-border2:  rgba(255,255,255,.05);

  --fv-gold:     #c9a84c;
  --fv-gold-l:   #f0d080;
  --fv-gold-d:   #a08030;

  --fv-text:     #e2ddd6;
  --fv-text2:    #b8b0c8;
  --fv-muted:    #5c566e;
  --fv-sub:      #8c84a0;

  --fv-green:    #4ecb7a;
  --fv-red:      #e85555;
  --fv-blue:     #5aaaf0;
  --fv-orange:   #e8903a;
  --fv-purple:   #9b6dff;

  --fv-radius:   12px;
  --fv-radius-s: 8px;
  --fv-font:     'Montserrat', sans-serif;
  --fv-mono:     'JetBrains Mono', 'Courier New', monospace;

  --fv-shadow:   0 4px 24px rgba(0,0,0,.45);
  --fv-shadow-s: 0 2px 10px rgba(0,0,0,.3);
}


/* ══════════════════════════════════════════════════════════════
   BOOTSTRAP 5.3 CSS VARIABLE OVERRIDES
   These override Bootstrap's own custom properties system
   ══════════════════════════════════════════════════════════════ */
:root,
[data-bs-theme="dark"] {
  /* Body */
  --bs-body-bg:                    #080810;
  --bs-body-bg-rgb:                8, 8, 16;
  --bs-body-color:                 #e2ddd6;
  --bs-body-color-rgb:             226, 221, 214;

  /* Forms */
  --bs-form-control-bg:            rgba(255,255,255,.055);
  --bs-form-control-border-color:  rgba(255,255,255,.12);
  --bs-form-control-color:         #e2ddd6;
  --bs-form-select-bg:             rgba(255,255,255,.055);
  --bs-input-bg:                   rgba(255,255,255,.055);
  --bs-input-border-color:         rgba(255,255,255,.12);
  --bs-input-color:                #e2ddd6;
  --bs-input-placeholder-color:    #5c566e;

  /* Surfaces */
  --bs-tertiary-bg:                rgba(255,255,255,.04);
  --bs-secondary-bg:               rgba(255,255,255,.06);
  --bs-border-color:               rgba(255,255,255,.1);
  --bs-border-color-translucent:   rgba(255,255,255,.08);

  /* Modal */
  --bs-modal-bg:                   #111020;
  --bs-modal-border-color:         rgba(255,255,255,.1);
  --bs-modal-header-border-color:  rgba(255,255,255,.07);
  --bs-modal-footer-border-color:  rgba(255,255,255,.07);

  /* Dropdown */
  --bs-dropdown-bg:                #0d0b18;
  --bs-dropdown-border-color:      rgba(255,255,255,.1);
  --bs-dropdown-link-color:        #e2ddd6;
  --bs-dropdown-link-hover-bg:     rgba(255,255,255,.06);
  --bs-dropdown-link-hover-color:  #f0d080;

  color-scheme: dark;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  background: var(--fv-bg);
  color: var(--fv-text);
  font-family: var(--fv-font);
  font-size: 13px;
  min-height: 100vh;
  line-height: 1.5;
  color-scheme: dark;
}

/* Autofill override — prevent Chrome's yellow/white autofill bg */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px rgba(255,255,255,.07) inset !important;
  -webkit-text-fill-color: #e2ddd6 !important;
  caret-color: #e2ddd6 !important;
}

/* ══════════════════════════════════════════════════════════════
   BOOTSTRAP DARK OVERRIDES
   Force ALL Bootstrap form elements to use our dark theme
   ══════════════════════════════════════════════════════════════ */

/* All inputs, selects, textareas — dark by default */
.form-control,
.form-select,
input[type="text"]:not(.portal-input),
input[type="email"]:not(.portal-input),
input[type="password"]:not(.portal-input),
input[type="number"]:not(.portal-input),
input[type="date"]:not(.portal-input),
input[type="time"]:not(.portal-input),
input[type="tel"]:not(.portal-input),
input[type="url"]:not(.portal-input),
input[type="search"]:not(.portal-input),
textarea:not(.portal-input),
select:not(.portal-input) {
  background-color: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: var(--fv-radius-s) !important;
  color: var(--fv-text) !important;
  font-family: var(--fv-font) !important;
  font-size: .85rem !important;
  padding: .48rem .75rem !important;
  transition: border-color .15s, box-shadow .15s !important;
  outline: none !important;
}
.form-control:focus,
.form-select:focus,
input[type="text"]:not(.portal-input):focus,
input[type="email"]:not(.portal-input):focus,
input[type="password"]:not(.portal-input):focus,
input[type="number"]:not(.portal-input):focus,
input[type="date"]:not(.portal-input):focus,
input[type="time"]:not(.portal-input):focus,
input[type="tel"]:not(.portal-input):focus,
input[type="url"]:not(.portal-input):focus,
input[type="search"]:not(.portal-input):focus,
textarea:not(.portal-input):focus,
select:not(.portal-input):focus {
  background-color: rgba(255,255,255,.08) !important;
  border-color: rgba(201,168,76,.5) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,.15) !important;
  color: var(--fv-text) !important;
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--fv-muted) !important;
  opacity: 1 !important;
}

/* Select: custom arrow, force dark options */
select,
.form-select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(201,168,76,.65)'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .75rem center !important;
  background-size: 10px !important;
  padding-right: 2.25rem !important;
  cursor: pointer;
}
select option,
.form-select option {
  background: #0d0b18 !important;
  color: #e2ddd6 !important;
}

/* File input */
input[type="file"] {
  background: transparent !important;
  border: 1px dashed rgba(255,255,255,.12) !important;
  padding: .38rem .6rem !important;
  font-size: .78rem !important;
  color: var(--fv-sub) !important;
  cursor: pointer;
}
input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button {
  background: rgba(201,168,76,.12) !important;
  border: 1px solid rgba(201,168,76,.25) !important;
  border-radius: 5px !important;
  color: var(--fv-gold) !important;
  font-family: var(--fv-font) !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  padding: .22rem .65rem !important;
  margin-right: .5rem !important;
  cursor: pointer !important;
  transition: background .15s !important;
}
input[type="file"]::-webkit-file-upload-button:hover,
input[type="file"]::file-selector-button:hover {
  background: rgba(201,168,76,.22) !important;
}

/* Labels */
label,
.form-label {
  font-size: .72rem !important;
  font-weight: 600 !important;
  color: var(--fv-sub) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin-bottom: .3rem !important;
  font-family: var(--fv-font) !important;
}

/* Checkboxes & Radios */
.form-check-input {
  background-color: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  width: 15px !important;
  height: 15px !important;
}
.form-check-input:checked {
  background-color: var(--fv-gold) !important;
  border-color: var(--fv-gold) !important;
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(201,168,76,.2) !important;
}
.form-check-label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: .82rem !important;
  color: var(--fv-text2) !important;
}

/* Disabled state */
input:disabled,
select:disabled,
textarea:disabled,
.form-control:disabled,
.form-select:disabled {
  opacity: .4 !important;
  cursor: not-allowed !important;
}

/* Input group */
.input-group-text {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: var(--fv-sub) !important;
  font-size: .82rem !important;
}

/* Bootstrap alert overrides */
.alert {
  border-radius: var(--fv-radius-s) !important;
  font-size: .84rem !important;
  border: 1px solid !important;
}
.alert-success {
  background: rgba(78,203,122,.07) !important;
  border-color: rgba(78,203,122,.25) !important;
  color: #5dde8a !important;
}
.alert-danger {
  background: rgba(232,85,85,.07) !important;
  border-color: rgba(232,85,85,.25) !important;
  color: #ff7878 !important;
}
.alert-warning {
  background: rgba(232,144,58,.07) !important;
  border-color: rgba(232,144,58,.25) !important;
  color: #f0a050 !important;
}
.alert-info {
  background: rgba(90,170,240,.07) !important;
  border-color: rgba(90,170,240,.25) !important;
  color: #7ec4ff !important;
}

/* Bootstrap modal — full dark */
.modal-content {
  background: var(--fv-bg3) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 16px !important;
  color: var(--fv-text) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.7) !important;
}
.modal-header {
  background: rgba(201,168,76,.04) !important;
  border-bottom: 1px solid rgba(201,168,76,.12) !important;
  padding: 1.1rem 1.4rem !important;
}
.modal-title {
  color: var(--fv-gold-l) !important;
  font-weight: 800 !important;
  font-size: .95rem !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.modal-body {
  padding: 1.4rem !important;
}
.modal-footer {
  border-top: 1px solid rgba(255,255,255,.06) !important;
  padding: .9rem 1.4rem !important;
  background: rgba(255,255,255,.015) !important;
}
.modal-backdrop.show { opacity: .7 !important; }
.btn-close {
  filter: invert(1) brightness(.55) !important;
}
.btn-close:hover { filter: invert(1) brightness(.9) !important; }

/* Bootstrap table */
.table {
  color: var(--fv-text) !important;
  border-color: var(--fv-border) !important;
}
.table > :not(caption) > * > * {
  background: transparent !important;
  border-bottom: 1px solid var(--fv-border2) !important;
  color: var(--fv-text) !important;
  padding: .65rem .75rem !important;
}
.table thead th {
  color: var(--fv-sub) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(201,168,76,.18) !important;
}
.table-hover > tbody > tr:hover > * {
  background: rgba(255,255,255,.025) !important;
}

/* Bootstrap buttons reset */
.btn {
  font-family: var(--fv-font) !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  border-radius: var(--fv-radius-s) !important;
  transition: all .18s !important;
  letter-spacing: .04em !important;
}

/* ══════════════════════════════════════════════════════════════
   FV CLASSES — Design System
   ══════════════════════════════════════════════════════════════ */

/* ── Navbar ──────────────────────────────────────────────── */
.navbar-fv {
  background: rgba(8,8,16,.98) !important;
  border-bottom: 1px solid rgba(201,168,76,.1);
  backdrop-filter: blur(16px);
  padding: .5rem 0;
}
.fv-logo {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: .2em;
  background: linear-gradient(135deg, var(--fv-gold), var(--fv-gold-l));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fv-nav-link {
  color: var(--fv-sub) !important;
  font-size: .78rem !important;
  letter-spacing: .05em;
  border-radius: 7px;
  padding: .38rem .8rem !important;
  transition: all .18s;
  font-weight: 500 !important;
}
.fv-nav-link:hover,
.fv-nav-link.active {
  color: var(--fv-gold-l) !important;
  background: rgba(201,168,76,.1);
}
.fv-username { font-size: .78rem; color: var(--fv-text2); }

/* ── Cards ──────────────────────────────────────────────── */
.card-fv {
  background: var(--fv-card);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1rem;
}
.card-fv-gold {
  background: rgba(201,168,76,.03);
  border: 1px solid rgba(201,168,76,.2);
  border-radius: var(--fv-radius);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1rem;
}

/* ── FV Form Classes (aliases — map to global overrides) ── */
/* These classes exist for backwards-compat with older templates */
.fv-input {
  width: 100%;
  display: block;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: var(--fv-radius-s) !important;
  color: var(--fv-text) !important;
  font-family: var(--fv-font) !important;
  font-size: .85rem !important;
  padding: .48rem .75rem !important;
  outline: none !important;
  transition: border-color .15s !important;
}
.fv-input:focus {
  border-color: rgba(201,168,76,.5) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,.14) !important;
  background: rgba(255,255,255,.08) !important;
}
.fv-input::placeholder { color: var(--fv-muted) !important; }
select.fv-input {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(201,168,76,.65)'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .75rem center !important;
  background-size: 10px !important;
  padding-right: 2.25rem !important;
  cursor: pointer;
}
select.fv-input option {
  background: #0d0b18 !important;
  color: #e2ddd6 !important;
}
.fv-label {
  display: block;
  font-size: .7rem !important;
  font-weight: 700 !important;
  color: var(--fv-sub) !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  margin-bottom: .32rem !important;
  font-family: var(--fv-font) !important;
}
.form-control-fv,
.form-select-fv {
  width: 100%;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: var(--fv-radius-s) !important;
  color: var(--fv-text) !important;
  font-family: var(--fv-font) !important;
  font-size: .85rem !important;
  padding: .48rem .75rem !important;
  outline: none !important;
  transition: border-color .15s !important;
}
.form-control-fv:focus,
.form-select-fv:focus {
  border-color: rgba(201,168,76,.5) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,.14) !important;
  background: rgba(255,255,255,.08) !important;
  color: var(--fv-text) !important;
}
.form-control-fv::placeholder { color: var(--fv-muted) !important; }
select.form-control-fv,
select.form-select-fv {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(201,168,76,.65)'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .75rem center !important;
  background-size: 10px !important;
  padding-right: 2.25rem !important;
}
select.form-control-fv option,
select.form-select-fv option {
  background: #0d0b18 !important;
  color: #e2ddd6 !important;
}
.form-label-fv {
  display: block;
  font-size: .7rem !important;
  font-weight: 700 !important;
  color: var(--fv-sub) !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  margin-bottom: .3rem !important;
  font-family: var(--fv-font) !important;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-fv {
  background: linear-gradient(135deg, var(--fv-gold), var(--fv-gold-l));
  color: #08080f !important;
  font-weight: 700;
  border: none;
  border-radius: var(--fv-radius-s);
  letter-spacing: .06em;
  font-family: var(--fv-font);
  transition: opacity .18s;
}
.btn-fv:hover { opacity: .88; color: #08080f !important; }

.btn-fv-gold {
  background: linear-gradient(135deg, var(--fv-gold), var(--fv-gold-l));
  color: #08080f !important;
  font-weight: 700;
  border: none;
  border-radius: var(--fv-radius-s);
  letter-spacing: .05em;
  font-family: var(--fv-font);
  transition: opacity .18s;
}
.btn-fv-gold:hover { opacity: .88; color: #08080f !important; }

.btn-fv-ghost {
  background: transparent;
  border: 1px solid rgba(201,168,76,.3);
  color: var(--fv-gold) !important;
  border-radius: var(--fv-radius-s);
  font-family: var(--fv-font);
  transition: all .18s;
}
.btn-fv-ghost:hover {
  border-color: var(--fv-gold);
  background: rgba(201,168,76,.1);
  color: var(--fv-gold-l) !important;
}
.btn-fv-danger {
  background: rgba(232,85,85,.1);
  border: 1px solid rgba(232,85,85,.3);
  color: var(--fv-red) !important;
  border-radius: var(--fv-radius-s);
  font-family: var(--fv-font);
  transition: all .18s;
}
.btn-fv-danger:hover {
  background: rgba(232,85,85,.18);
  border-color: rgba(232,85,85,.5);
}
.btn-fv-success {
  background: rgba(78,203,122,.1);
  border: 1px solid rgba(78,203,122,.3);
  color: var(--fv-green) !important;
  border-radius: var(--fv-radius-s);
  font-family: var(--fv-font);
  transition: all .18s;
}
.btn-fv-success:hover { background: rgba(78,203,122,.18); }
.btn-fv-info {
  background: rgba(90,170,240,.1);
  border: 1px solid rgba(90,170,240,.3);
  color: var(--fv-blue) !important;
  border-radius: var(--fv-radius-s);
  font-family: var(--fv-font);
}

/* ── Badges ──────────────────────────────────────────────── */
.fv-badge {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  padding: .18rem .6rem;
  border-radius: 20px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.fv-badge-green   { background: rgba(78,203,122,.1);  color: #5dde8a; border: 1px solid rgba(78,203,122,.25); }
.fv-badge-gold    { background: rgba(201,168,76,.1);  color: var(--fv-gold-l); border: 1px solid rgba(201,168,76,.25); }
.fv-badge-red     { background: rgba(232,85,85,.1);   color: #ff7878; border: 1px solid rgba(232,85,85,.25); }
.fv-badge-blue    { background: rgba(90,170,240,.1);  color: #7ec4ff; border: 1px solid rgba(90,170,240,.25); }
.fv-badge-purple  { background: rgba(155,109,255,.12);color: #b87fff; border: 1px solid rgba(155,109,255,.3); }
.fv-badge-orange  { background: rgba(232,144,58,.1);  color: #f0a050; border: 1px solid rgba(232,144,58,.25); }
.fv-badge-muted   { background: rgba(255,255,255,.04);color: var(--fv-sub); border: 1px solid var(--fv-border); }

/* Role badges */
.badge-role { font-size: .65rem; font-weight: 700; padding: .18rem .55rem; border-radius: 20px; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
.badge-admin      { background: rgba(201,168,76,.12); color: var(--fv-gold-l); border: 1px solid rgba(201,168,76,.25); }
.badge-supervisor { background: rgba(90,170,240,.12); color: #7ec4ff;          border: 1px solid rgba(90,170,240,.25); }

/* ── Typography ──────────────────────────────────────────── */
.fv-h1  { font-size: 1.55rem; font-weight: 900; color: var(--fv-gold-l); letter-spacing: .04em; margin-bottom: .2rem; }
.fv-h2  { font-size: 1.1rem;  font-weight: 700; color: var(--fv-text); }
.fv-h3  { font-size: .75rem;  color: var(--fv-gold); letter-spacing: .12em; text-transform: uppercase; margin-bottom: .65rem; font-weight: 700; }
.fv-sub { font-size: .78rem;  color: var(--fv-sub); }
.fv-mono{ font-family: var(--fv-mono); }
.fv-hint{ font-size: .7rem; color: var(--fv-muted); line-height: 1.4; }

/* ── Stats ───────────────────────────────────────────────── */
.fv-stat {
  background: rgba(201,168,76,.04);
  border: 1px solid rgba(201,168,76,.15);
  border-radius: var(--fv-radius);
  padding: 1.15rem;
  text-align: center;
  transition: border-color .18s;
}
.fv-stat:hover { border-color: rgba(201,168,76,.28); }
.fv-stat-num { font-size: 2.1rem; font-weight: 900; color: var(--fv-gold-l); line-height: 1; }
.fv-stat-lbl { font-size: .65rem; color: var(--fv-muted); margin-top: .3rem; letter-spacing: .1em; text-transform: uppercase; }

/* ── Tables ──────────────────────────────────────────────── */
.table-fv { color: var(--fv-text); }
.table-fv thead tr { border-bottom: 1px solid rgba(201,168,76,.15); }
.table-fv thead th { color: var(--fv-sub); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; padding: .65rem .75rem; font-weight: 700; background: transparent; }
.table-fv tbody tr { border-bottom: 1px solid var(--fv-border2); transition: background .12s; }
.table-fv tbody tr:hover { background: rgba(255,255,255,.02); }
.table-fv td { padding: .6rem .75rem; font-size: .83rem; vertical-align: middle; }

/* ── Divider ─────────────────────────────────────────────── */
hr.fv-hr { border-color: var(--fv-border); opacity: 1; margin: 1.15rem 0; }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--fv-bg2); }
::-webkit-scrollbar-thumb { background: rgba(201,168,76,.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,.35); }

/* ── Login ───────────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 65% 15%, rgba(201,168,76,.07) 0%, transparent 55%), var(--fv-bg);
}

/* ── Public portal ───────────────────────────────────────── */
.portal-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem 1rem;
}
.portal-card {
  width: 100%;
  max-width: 620px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1); /* overridden by inline style when form has border settings */
  border-radius: 16px;                    /* overridden by inline style */
  padding: 2rem;
}
/* En móvil: pantalla completa sin márgenes ni bordes redondeados */
@media (max-width: 600px) {
  .portal-wrap {
    padding: 0;
    align-items: stretch;
  }
  .portal-card {
    max-width: 100% !important;
    width: 100% !important;
    min-height: 100vh;
    /* border-radius y padding los controla el CSS inline generado por PHP */
  }
  .portal-header-block {
    max-width: 100% !important;
  }
}
/* Portal labels — fuente y tamaño controlados por CSS inline del formulario */
.portal-label,
.portal-field-label {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
}
/* Portal placeholder — color controlado por CSS inline del formulario */
.portal-input::placeholder {
  opacity: .45 !important;
}

/* ── Bar chart ───────────────────────────────────────────── */
.fv-bar-track { background: rgba(255,255,255,.05); border-radius: 4px; height: 20px; overflow: hidden; }
.fv-bar-fill  { height: 100%; background: linear-gradient(90deg, var(--fv-gold-d), var(--fv-gold-l)); border-radius: 4px; transition: width .6s ease; }

/* ── QR ──────────────────────────────────────────────────── */
.qr-box { display: inline-block; padding: 12px; background: #fff; border-radius: 12px; line-height: 0; }

/* ── Scale picker ────────────────────────────────────────── */
.scale-btn {
  width: 42px; height: 42px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.45);
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.scale-btn.active {
  border-color: var(--fv-gold);
  background: rgba(201,168,76,.12);
  color: var(--fv-gold-l);
}

/* ── Field builder ───────────────────────────────────────── */
.field-row {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--fv-border);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: .55rem;
  position: relative;
  transition: opacity .15s;
}
/* Minimized field body */
.field-body {
  margin-top: .65rem;
  transition: none;
}
.field-row.minimized {
  opacity: .6;
}
.field-row.minimized .field-body {
  display: none;
}
.field-type-tag { font-size: .7rem; color: var(--fv-gold); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.field-row-section { border-radius: 10px; padding: 1rem !important; margin-bottom: .5rem !important; position: relative; }
.field-row-section::before {
  content: 'SECCIÓN';
  position: absolute; top: -8px; right: 10px;
  font-size: .6rem; font-weight: 700; letter-spacing: .12em;
  color: var(--fv-gold); background: var(--fv-bg3);
  padding: 0 6px; border-radius: 4px;
}

/* ── HEX Color Picker ────────────────────────────────────── */
.fv-hex-picker { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.fv-hex-swatch {
  width: 34px; height: 34px; border-radius: 7px;
  border: 2px solid rgba(255,255,255,.18); cursor: pointer;
  flex-shrink: 0; transition: border-color .15s, transform .1s;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.fv-hex-swatch:hover { border-color: rgba(201,168,76,.5); transform: scale(1.07); }
.fv-hex-swatch-icon { font-size: .7rem; opacity: 0; transition: opacity .15s; pointer-events: none; }
.fv-hex-swatch:hover .fv-hex-swatch-icon { opacity: .7; }
.fv-hex-input { width: 100px !important; font-family: var(--fv-mono) !important; font-size: .8rem !important; letter-spacing: .04em !important; text-transform: uppercase; }
.fv-hex-reset { background: none; border: none; color: rgba(255,255,255,.28); cursor: pointer; padding: 0; font-size: 1rem; flex-shrink: 0; transition: color .15s; }
.fv-hex-reset:hover { color: var(--fv-gold); }

/* ══════════════════════════════════════════════════════════════
   RRHH MODULE — Design System
   ══════════════════════════════════════════════════════════════ */

/* ── RRHH Grid ───────────────────────────────────────────── */
.rrhh-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.rrhh-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 920px) { .rrhh-grid, .rrhh-grid-3 { grid-template-columns: 1fr; } }

/* ── RRHH Cards ──────────────────────────────────────────── */
.rrhh-card {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  min-width: 0;
  overflow: hidden;
}
.rrhh-card-title {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fv-gold);
  font-weight: 700;
  margin-bottom: .65rem;
  padding-bottom: .38rem;
  border-bottom: 1px solid rgba(201,168,76,.1);
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* ── RRHH Form rows ──────────────────────────────────────── */
.rrhh-row {
  display: flex;
  flex-direction: column;
  gap: .22rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.rrhh-row:last-child { border-bottom: none; }
.rrhh-row label {
  font-size: .68rem !important;
  color: rgba(255,255,255,.35) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 600 !important;
  margin-bottom: 0 !important;
  white-space: nowrap;
}

/* Layout vertical — label arriba, campo abajo */
.rrhh-row-v {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.rrhh-row-v:last-child { border-bottom: none; }
.rrhh-row-v label {
  font-size: .68rem !important;
  color: rgba(255,255,255,.35) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 600 !important;
  margin-bottom: 0 !important;
  white-space: nowrap;
}
.rrhh-row-v input,
.rrhh-row-v select {
  width: 100% !important;
  min-width: 0 !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 6px !important;
  color: var(--fv-text) !important;
  font-family: var(--fv-font) !important;
  font-size: .82rem !important;
  padding: .38rem .65rem !important;
  outline: none !important;
  transition: border .15s !important;
}
.rrhh-row-v input:focus,
.rrhh-row-v select:focus {
  border-color: rgba(201,168,76,.45) !important;
  box-shadow: none !important;
}
.rrhh-row-v select {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(201,168,76,.6)'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .65rem center !important;
  background-size: 9px !important;
  padding-right: 2rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rrhh-row-v select option { background: #0d0b18 !important; color: #e2ddd6 !important; }
/* RRHH inputs — inherit global dark style but override label rules */
.rrhh-row input,
.rrhh-row select,
.rrhh-row textarea {
  width: 100% !important;
  min-width: 0 !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 6px !important;
  color: var(--fv-text) !important;
  font-family: var(--fv-font) !important;
  font-size: .82rem !important;
  padding: .38rem .65rem !important;
  outline: none !important;
  transition: border .15s !important;
}
.rrhh-row input:focus,
.rrhh-row select:focus,
.rrhh-row textarea:focus {
  border-color: rgba(201,168,76,.45) !important;
  box-shadow: none !important;
}
.rrhh-row input::placeholder { color: rgba(255,255,255,.2) !important; }
.rrhh-row select {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(201,168,76,.6)'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .65rem center !important;
  background-size: 9px !important;
  padding-right: 2rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rrhh-row select option { background: #0d0b18 !important; color: #e2ddd6 !important; }
.rrhh-row input[type="file"] {
  background: transparent !important;
  border: none !important;
  padding: .28rem 0 !important;
  font-size: .75rem !important;
  color: var(--fv-sub) !important;
}
.rrhh-row textarea { resize: vertical; }

.rrhh-section-head {
  font-size: .68rem; color: var(--fv-gold); font-weight: 700;
  padding: .55rem 0 .3rem; display: block; letter-spacing: .08em;
}
.rrhh-save-row { display: flex; justify-content: flex-end; padding-top: .65rem; }

/* ── RRHH Records (list rows) ────────────────────────────── */
.rrhh-rec { display: flex; align-items: flex-start; gap: .65rem; padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.rrhh-rec:last-child { border-bottom: none; }
.rrhh-rec-title { font-size: .83rem; font-weight: 600; line-height: 1.3; }
.rrhh-rec-sub   { font-size: .7rem; color: rgba(255,255,255,.38); margin-top: .1rem; }

/* ── RRHH Badges ─────────────────────────────────────────── */
.rrhh-badge {
  font-size: .62rem;
  padding: .14rem .42rem;
  border-radius: 5px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .05em;
}

/* ── RRHH Delete button ──────────────────────────────────── */
.rrhh-del {
  background: none; border: none;
  color: rgba(232,85,85,.4);
  cursor: pointer; font-size: .75rem;
  padding: .1rem .28rem; border-radius: 4px;
  line-height: 1; flex-shrink: 0;
  transition: color .15s;
}
.rrhh-del:hover { color: #e85555; }

/* ── RRHH Download link ──────────────────────────────────── */
.rrhh-dl {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .71rem; color: var(--fv-gold); text-decoration: none; margin-top: .15rem;
}
.rrhh-dl:hover { color: var(--fv-gold-l); }

/* ── Vacation balance ────────────────────────────────────── */
.vac-balance { display: flex; align-items: center; gap: 1.1rem; border-radius: 10px; padding: .9rem 1.1rem; margin-bottom: 1rem; }
.vac-num { font-size: 2.5rem; font-weight: 900; line-height: 1; }

/* ── Employee profile tabs ───────────────────────────────── */
.tabs {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 0 1rem;
  overflow-x: auto;
  scrollbar-width: none;
  gap: .1rem;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
  background: none; border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255,255,255,.35);
  font-family: var(--fv-font);
  font-size: .72rem; font-weight: 600;
  padding: .65rem .8rem;
  cursor: pointer; margin-bottom: -1px;
  white-space: nowrap; transition: all .15s;
  letter-spacing: .04em;
}
.tab-btn.active, .tab-btn:hover { color: var(--fv-gold); border-bottom-color: var(--fv-gold); }
.tab-btn.active { font-weight: 700; }
.tab-pane { display: none; padding: 1.1rem; }
.tab-pane.active { display: block; }

/* ── Waiter / portal wraps ───────────────────────────────── */
.waiter-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--fv-bg); padding: 2rem 1rem; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 576px) {
  .fv-h1 { font-size: 1.2rem; }
  .fv-stat-num { font-size: 1.6rem; }
}