:root {
  --blue: #2f7de1;
  --blue-deep: #1f5fb8;
  --cyan: #38c4e8;
  --ink: #102451;
  --muted: #6a7a9a;
  --line: #dbe5f5;
  --soft: #f4f8ff;
  --white: #fff;
  --success: #087f5b;
  --danger: #c92a2a;
  --shadow: 0 18px 45px rgba(27, 67, 136, .12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, Arial, sans-serif; color: var(--ink); background: #f7faff; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.eyebrow { margin: 0 0 8px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(520px, 1.02fr) minmax(480px, .98fr); }
.login-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 64px clamp(52px, 8vw, 132px); color: var(--white); background: linear-gradient(145deg, #052b94, #074fd2 62%, #0875dc); }
.login-brand::after { content: ""; position: absolute; right: -190px; bottom: -250px; width: 620px; height: 620px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; }
.brand-logo { display: block; object-fit: contain; }
.login-logo { position: relative; z-index: 1; width: min(265px, 65%); height: auto; padding: 14px 18px; border-radius: 14px; background: rgba(255,255,255,.98); box-shadow: 0 15px 36px rgba(0,28,103,.18); }
.brand-copy { position: relative; z-index: 1; max-width: 590px; margin-top: auto; margin-bottom: 52px; }
.brand-copy .eyebrow { color: #9ae6f8; }
.brand-copy h1 { margin: 0; max-width: 570px; font-size: clamp(42px, 4.3vw, 66px); line-height: 1.04; letter-spacing: -.9px; }
.brand-copy p:last-child { max-width: 490px; color: #cfebff; font-size: 18px; line-height: 1.6; }
.brand-orbits i { position: absolute; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; animation: drift 7s ease-in-out infinite; }
.brand-orbits i:nth-child(1) { width: 270px; height: 270px; left: -90px; bottom: -60px; }
.brand-orbits i:nth-child(2) { width: 170px; height: 170px; right: 12%; top: 19%; animation-delay: -2s; }
.brand-orbits i:nth-child(3) { width: 85px; height: 85px; right: 30%; bottom: 12%; animation-delay: -4s; }
.login-panel { display: grid; place-items: center; padding: 54px; background: #fbfdff; }
.login-card { width: min(440px, 100%); padding: 38px; border: 1px solid #e5edf9; border-radius: 22px; background: var(--white); box-shadow: 0 22px 55px rgba(31,72,142,.1); animation: rise .6s ease-out; }
.login-heading { margin-bottom: 30px; }
.login-heading h2 { margin: 0; font-size: 34px; }
.login-heading p:last-child { color: var(--muted); }
.soft-icon { float: right; display: grid; place-items: center; width: 58px; height: 58px; color: var(--blue); font-weight: 900; border-radius: 18px; background: #edf4ff; }
.field { display: grid; gap: 8px; margin-bottom: 16px; }
.field span { color: #405478; font-size: 13px; font-weight: 800; }
.field input, .field select { width: 100%; min-height: 47px; padding: 0 14px; color: var(--ink); border: 1px solid var(--line); border-radius: 11px; outline: none; background: var(--white); transition: .2s ease; }
.field input:focus, .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(7,63,200,.1); transform: translateY(-1px); }
.primary-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 50px; color: var(--white); font-weight: 800; border: 0; border-radius: 11px; cursor: pointer; background: linear-gradient(100deg, var(--blue-deep), var(--blue)); box-shadow: 0 10px 22px rgba(7,63,200,.22); transition: .2s ease; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(7,63,200,.3); }
.security-note { color: var(--muted); font-size: 12px; text-align: center; }
.alert { margin-bottom: 16px; padding: 12px 14px; border-radius: 9px; font-size: 13px; }
.alert-error { color: #8b1a1a; background: #fff1f1; }

.topbar { position: sticky; z-index: 5; top: 0; min-height: 82px; display: flex; align-items: center; gap: 24px; padding: 0 24px; color: var(--white); background: linear-gradient(100deg, #06319d, #064be0); box-shadow: 0 5px 20px rgba(5,54,160,.2); }
.logo { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.topbar-logo { width: 154px; height: auto; padding: 7px 11px; border-radius: 10px; background: rgba(255,255,255,.98); box-shadow: 0 5px 12px rgba(0,25,92,.15); }
.topbar-title { display: grid; padding-left: 22px; border-left: 1px solid rgba(255,255,255,.3); }
.topbar-title span, .user-menu small { color: #bcd9ff; font-size: 12px; }
.user-menu { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.user-menu div { display: grid; }
.profile-badge, .read-only-pill { padding: 6px 9px; border-radius: 20px; font-size: 11px; font-weight: 900; letter-spacing: .6px; }
.profile-badge { color: #08419a; background: #bdeeff; }
.topbar-nav { display: flex; align-items: center; gap: 7px; margin-left: 10px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.24); }
.topbar-nav::before { content: "Módulos"; color: #9fc8ff; font-size: 10px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; margin-right: 3px; }
.topbar-nav-item,
button.topbar-nav-item {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  color: #eaf4ff;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  cursor: pointer;
  transition: .2s ease;
  white-space: nowrap;
}
.topbar-nav-item:hover,
button.topbar-nav-item:hover {
  color: white;
  border-color: rgba(255,255,255,.48);
  background: rgba(255,255,255,.18);
}
.topbar-nav-item.active {
  color: #073fc8;
  border-color: white;
  background: white;
  box-shadow: 0 8px 18px rgba(0,25,92,.18);
}
button.topbar-nav-item.account-action {
  color: #073fc8;
  border-color: #cfe3ff;
  background: #f7fbff;
}
button.topbar-nav-item.account-action:hover {
  color: #06277c;
  background: white;
}
.logout-link { margin-left: 8px; color: white; font-size: 13px; text-decoration: none; opacity: .88; }
button.logout-link { min-height: 34px; padding: 0 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; cursor: pointer; background: rgba(255,255,255,.08); }
button.logout-link:hover { opacity: 1; background: rgba(255,255,255,.16); }
.sidebar { position: fixed; z-index: 4; top: 82px; bottom: 0; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 24px; background: var(--white); border-right: 1px solid var(--line); }
.side-item { width: 42px; height: 42px; display: grid; place-items: center; color: #6fa1e8; font-size: 13px; font-weight: 900; text-decoration: none; border: 0; border-radius: 12px; background: transparent; cursor: pointer; transition: .2s ease; }
.side-item:hover, .side-item.active { color: var(--blue); background: #eaf2ff; transform: translateY(-2px); }
.content { margin-left: 72px; padding: 36px clamp(20px, 4vw, 62px) 50px; }
.hero { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.hero h1 { margin: 0; font-size: clamp(30px, 4vw, 45px); }
.hero p:last-child { color: var(--muted); }
.hero-status { display: flex; align-items: center; gap: 10px; padding: 12px 15px; color: #246547; border: 1px solid #c9efde; border-radius: 12px; background: #f3fff9; font-size: 13px; }
.hero-status i, .active-filter-note i { width: 9px; height: 9px; border-radius: 50%; background: #20b26b; box-shadow: 0 0 0 5px rgba(32,178,107,.13); }
.hero-status small { color: #62927a; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 20px; }
.stat-card, .panel, .help-card { border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: 0 9px 22px rgba(32,70,128,.05); }
.stat-card { display: grid; gap: 5px; padding: 18px; transition: .2s ease; }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.stat-card span, .stat-card small { color: var(--muted); font-size: 12px; }
.stat-card strong { color: var(--blue); font-size: 29px; }
.panel { margin-top: 18px; padding: 22px; }
.panel-heading { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.panel-heading h2 { margin: 0; font-size: 22px; }
.panel-heading p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.ghost-button { height: 38px; padding: 0 13px; color: var(--blue); font-weight: 800; border: 1px solid #bfd2f5; border-radius: 9px; cursor: pointer; background: #f7faff; transition: .2s ease; }
.ghost-button:hover { background: #eaf2ff; }
.filter-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 13px; }
.filter-grid .field { margin: 0; }
.filter-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 8px; }
.active-filter-note { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.search-button { width: auto; min-width: 210px; padding: 0 18px; }
.read-only-pill { align-self: flex-start; color: #0b7251; background: #e6fbf2; white-space: nowrap; }
.empty-state { display: grid; justify-items: center; padding: 45px 20px; text-align: center; }
.empty-state h3 { margin: 8px 0 3px; }
.empty-state p { margin: 0; color: var(--muted); font-size: 14px; }
.empty-icon { display: grid; place-items: center; width: 62px; height: 62px; color: var(--blue); font-size: 32px; border-radius: 20px; background: #eaf2ff; }
.table-wrap { overflow: auto; max-height: 560px; border: 1px solid var(--line); border-radius: 11px; }
table { width: 100%; min-width: 1450px; border-collapse: collapse; font-size: 12px; }
th { position: sticky; z-index: 1; top: 0; padding: 12px; color: #405478; text-align: left; background: #eff5ff; }
td { padding: 11px 12px; border-top: 1px solid #edf1f8; vertical-align: top; }
tbody tr { transition: .16s ease; }
tbody tr:hover { background: #f7faff; }
.company-chip, .status-chip { display: inline-block; padding: 4px 7px; border-radius: 20px; font-weight: 800; white-space: nowrap; }
.company-chip { color: #1752b5; background: #eaf2ff; }
.status-chip { color: #14724f; background: #ebfbf4; }
.help-card { display: flex; gap: 15px; margin-top: 18px; padding: 16px 20px; font-size: 13px; }
.help-card span { color: var(--muted); }
.page-loader { position: fixed; z-index: 20; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--ink); background: rgba(246,250,255,.9); backdrop-filter: blur(5px); }
.page-loader span { color: var(--muted); font-size: 13px; }
.loader-ring { width: 54px; height: 54px; margin-bottom: 8px; border: 5px solid #d7e5ff; border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
.toast { position: fixed; z-index: 90; right: 24px; bottom: 24px; max-width: 380px; padding: 14px 17px; color: white; border-radius: 10px; background: var(--success); box-shadow: var(--shadow); animation: rise .3s ease-out; font-size: 13px; }
.toast.error { background: var(--danger); }
.toast.info { background: var(--blue); }
.module-banner { display: flex; align-items: center; gap: 18px; margin: 0 0 20px; padding: 20px; color: var(--ink); border: 1px solid #cbdcff; border-radius: 16px; background: linear-gradient(120deg, #eef5ff, #fff); box-shadow: 0 9px 22px rgba(32,70,128,.06); }
.module-banner h2, .module-banner p { margin: 0; }
.module-banner p:last-child { margin-top: 5px; color: var(--muted); font-size: 13px; }
.module-icon { display: grid; place-items: center; flex: 0 0 auto; width: 58px; height: 58px; color: var(--white); font-weight: 900; border-radius: 16px; background: linear-gradient(135deg, var(--blue-deep), var(--blue)); }
.module-button { width: auto; min-width: 210px; margin-left: auto; padding: 0 17px; text-decoration: none; }
.rh-hero { display: flex; align-items: stretch; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.rh-hero h1 { margin: 0; font-size: clamp(32px,4vw,48px); }
.rh-hero p:last-child { color: var(--muted); }
.period-card { min-width: 240px; display: grid; align-content: center; gap: 5px; padding: 18px 20px; color: #17345f; border: 1px solid #cfe1f8; border-radius: 16px; background: linear-gradient(120deg,#eef6ff,#d9ecff); box-shadow: var(--shadow); }
.period-card span, .period-card small { color: #557399; font-size: 12px; }
.period-card strong { font-size: 22px; }
.rh-filter-panel { padding: 0; overflow: hidden; }
.rh-tabs { display: flex; gap: 4px; padding: 7px; background: #eef5ff; }
.rh-tab { min-width: 150px; padding: 11px 18px; color: #5e7195; font-weight: 900; border: 0; border-radius: 9px; cursor: pointer; background: transparent; }
.rh-tab.active { color: var(--blue); background: white; box-shadow: 0 3px 10px rgba(16,36,81,.08); }
.rh-filter-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr 2fr auto; gap: 12px; align-items: end; padding: 17px; }
.rh-filter-grid .field { margin: 0; }
.rh-filter-button { width: auto; min-width: 155px; padding: 0 14px; }
.rh-stats { margin-top: 18px; }
.rh-stats .stat-card { gap: 8px; }
.rh-stats .stat-card span,
.rh-stats .stat-card strong,
.rh-stats .stat-card small {
  display: inline-block !important;
}
.rh-stats .stat-card strong {
  margin: 0 8px !important;
}
.rh-list-heading { align-items: center; }
.rh-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.rh-actions .primary-button { width: auto; min-height: 38px; padding: 0 13px; }
.rh-table { min-width: 1180px; }
.rh-table-wrap { max-height: 620px; }
.sheet-status { display: inline-block; min-width: 88px; padding: 5px 8px; font-weight: 900; text-align: center; border-radius: 6px; }
.sheet-status.done { color: #074b30; background: #b9f0d9; }
.sheet-status.waiting { color: #9f210c; background: #ffdf9c; }
.sheet-status.neutral { color: #57657c; background: #edf1f6; }
.responsible-badge { display: inline-block; padding: 5px 9px; color: #102451; font-weight: 900; border-radius: 20px; background: color-mix(in srgb,var(--responsible-color) 42%,white); border: 1px solid var(--responsible-color); }
.muted { color: var(--muted); }
.table-actions { display: flex; flex-wrap: wrap; gap: 8px; white-space: nowrap; }
.table-actions button { padding: 0; color: var(--blue); font-size: 12px; font-weight: 900; border: 0; cursor: pointer; background: transparent; }
.table-actions .danger-link { color: var(--danger); }
.modal-backdrop { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(6,25,69,.52); backdrop-filter: blur(4px); }
.modal-card { width: min(680px,100%); max-height: calc(100vh - 44px); overflow: auto; padding: 22px; border-radius: 17px; background: white; box-shadow: 0 30px 80px rgba(0,20,70,.25); animation: rise .22s ease-out; }
.modal-wide { width: min(980px,100%); }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.modal-heading h2 { margin: 0; }
.modal-close { width: 35px; height: 35px; color: #5c6d8c; font-size: 24px; line-height: 1; border: 0; border-radius: 9px; cursor: pointer; background: #eef4ff; }
.modal-form #record-fields { display: grid; grid-template-columns: repeat(2,1fr); gap: 4px 13px; }
.field-full { grid-column: 1 / -1; }
.field textarea { min-height: 88px; padding: 12px 14px; color: var(--ink); border: 1px solid var(--line); border-radius: 11px; resize: vertical; outline: none; }
.field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(7,63,200,.1); }
.field-with-action { display: grid; grid-template-columns: 1fr 47px; gap: 8px; }
.field-with-action select { min-width: 0; }
.field-add-button { display: grid; place-items: center; min-height: 47px; color: white; font-size: 25px; font-weight: 900; border: 0; border-radius: 11px; cursor: pointer; background: linear-gradient(100deg,var(--blue-deep),var(--blue)); box-shadow: 0 8px 18px rgba(7,63,200,.2); transition: .2s ease; }
.field-add-button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(7,63,200,.28); }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 12px; }
.modal-actions .primary-button { width: auto; min-width: 160px; padding: 0 14px; }
.timeline { display: grid; gap: 12px; }
.timeline-item { position: relative; display: flex; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #fbfdff; }
.timeline-item i { width: 11px; height: 11px; margin-top: 4px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(7,63,200,.1); }
.timeline-item div { display: grid; gap: 4px; }
.timeline-item span { color: var(--muted); font-size: 12px; }
.audit-changes { display: grid; gap: 5px; margin: 9px 0 0; padding: 10px 12px 10px 27px; color: #405478; border-radius: 8px; background: #f2f6ff; font-size: 12px; }
.audit-changes span { color: var(--blue); font-weight: 900; }
.audit-empty { margin-top: 7px; color: var(--muted); }
.catalog-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.catalog-tabs button { padding: 8px 10px; color: #526585; font-weight: 800; border: 1px solid var(--line); border-radius: 20px; cursor: pointer; background: #fbfdff; }
.catalog-tabs button.active { color: white; border-color: var(--blue); background: var(--blue); }
.inline-form { display: grid; grid-template-columns: repeat(5,1fr); gap: 9px; margin-bottom: 15px; padding: 12px; border-radius: 11px; background: #f5f8ff; }
.inline-form input, .inline-form select { min-width: 0; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.inline-form .primary-button { min-height: 40px; }
.mini-table-wrap { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.mini-table { min-width: 680px; font-size: 12px; }
.quick-modal { z-index: 60; }
.quick-collaborator-card { width: min(560px,100%); }
.modal-intro { margin: -6px 0 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.feedback-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(6,25,69,.62); backdrop-filter: blur(5px); }
.feedback-card { display: grid; justify-items: center; width: min(430px,100%); padding: 30px 27px 25px; text-align: center; border-radius: 18px; background: white; box-shadow: 0 30px 90px rgba(0,20,70,.32); animation: rise .22s ease-out; }
.feedback-icon { display: grid; place-items: center; width: 64px; height: 64px; color: white; font-size: 34px; font-weight: 900; border-radius: 50%; background: var(--success); }
.feedback-card h2 { margin: 15px 0 7px; }
.feedback-card p { margin: 0 0 19px; color: var(--muted); line-height: 1.5; }
.feedback-card .primary-button { width: 130px; }
.feedback-backdrop.error .feedback-icon { background: var(--danger); }
.feedback-details { display: grid; gap: 8px; width: 100%; margin: -3px 0 20px; padding: 13px; text-align: left; border-radius: 10px; background: #f5f8ff; }
.feedback-details div { display: grid; grid-template-columns: 115px 1fr; gap: 9px; padding-bottom: 7px; border-bottom: 1px solid #e2eafa; }
.feedback-details div:last-child { padding-bottom: 0; border-bottom: 0; }
.feedback-details strong { color: #405478; font-size: 12px; }
.feedback-details span { color: var(--ink); font-size: 13px; }
.profile-card { width: min(560px,100%); }
.profile-summary { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 15px; border: 1px solid #dce7f8; border-radius: 13px; background: #f7faff; }
.profile-avatar { display: grid; place-items: center; width: 58px; height: 58px; color: white; font-size: 24px; font-weight: 900; border-radius: 16px; background: linear-gradient(135deg,var(--blue-deep),var(--blue)); }
.profile-summary div:last-child { display: grid; gap: 3px; }
.profile-summary strong { font-size: 20px; }
.profile-summary span { color: var(--muted); font-size: 13px; font-weight: 800; }
.profile-form { display: grid; grid-template-columns: repeat(2,1fr); gap: 4px 13px; }
.profile-form .field { margin-bottom: 10px; }
.profile-password-box { grid-column: 1 / -1; display: grid; gap: 4px; margin-top: 4px; padding: 12px; border-radius: 11px; background: #eef5ff; }
.profile-password-box strong { color: var(--ink); }
.profile-password-box span { color: var(--muted); font-size: 12px; }
.logout-modal { z-index: 120; background: rgba(6,25,69,.64); }
.logout-card { display: grid; justify-items: center; width: min(460px,100%); padding: 30px; text-align: center; border: 1px solid #d8e5fb; border-radius: 18px; background: linear-gradient(145deg,#fff,#f7fbff); box-shadow: 0 34px 100px rgba(0,20,70,.34); animation: logoutPop .24s ease-out; }
.logout-symbol { position: relative; display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 14px; border-radius: 22px; background: #eaf2ff; }
.logout-symbol::after { content: ""; position: absolute; right: -12px; width: 24px; height: 42px; border: 2px solid #8fb3f5; border-left: 0; border-radius: 0 10px 10px 0; }
.logout-symbol span { display: grid; place-items: center; width: 46px; height: 46px; color: white; font-weight: 900; border-radius: 50%; background: linear-gradient(135deg,var(--blue-deep),var(--blue)); box-shadow: 0 9px 20px rgba(7,63,200,.22); }
.logout-card h2 { margin: 0 0 8px; font-size: 28px; }
.logout-card p:not(.eyebrow) { max-width: 330px; margin: 0 0 22px; color: var(--muted); line-height: 1.5; }
.logout-actions { display: flex; width: 100%; gap: 10px; }
.logout-actions .ghost-button, .logout-actions .primary-button { flex: 1; min-height: 46px; }
.logout-exit-screen { position: fixed; z-index: 130; inset: 0; display: grid; place-items: center; color: white; background: linear-gradient(120deg,#06277c,#064be0); }
.logout-exit-card { display: grid; justify-items: center; gap: 10px; animation: rise .24s ease-out; }
.logout-exit-card strong { font-size: 24px; }
.logout-exit-card span { color: #cce5ff; }
.logout-exit-door { position: relative; width: 92px; height: 92px; margin-bottom: 8px; border: 2px solid rgba(255,255,255,.42); border-radius: 18px; }
.logout-exit-door i { position: absolute; left: 17px; top: 15px; width: 36px; height: 62px; border-radius: 8px; background: white; animation: exitStep 1s ease-in-out infinite; }
.logout-exit-door i::after { content: ""; position: absolute; right: 7px; top: 29px; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.is-logging-out .content, .is-logging-out .topbar, .is-logging-out .sidebar { pointer-events: none; }
.welcome-choice-backdrop { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(6,25,69,.66); backdrop-filter: blur(7px); }
.welcome-choice-card { width: min(1120px,100%); max-height: calc(100vh - 64px); overflow: auto; padding: clamp(22px,3vw,34px); border-radius: 22px; background: linear-gradient(145deg,#fff,#f8fbff); box-shadow: 0 32px 100px rgba(0,20,70,.35); animation: rise .3s ease-out; }
.welcome-choice-card h2 { margin: 0; color: var(--ink); font-size: clamp(28px,3.3vw,42px); letter-spacing: -.5px; }
.welcome-choice-card > p:last-of-type { margin: 8px 0 20px; color: var(--muted); font-size: 15px; }
.welcome-choice-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.welcome-option { display: grid; grid-template-columns: 58px 1fr; gap: 8px 16px; min-height: 166px; align-content: center; padding: 22px; color: var(--ink); text-decoration: none; border: 2px solid var(--line); border-radius: 17px; background: #fbfdff; transition: .2s ease; }
.welcome-option:hover { border-color: #8fb3f5; box-shadow: var(--shadow); transform: translateY(-3px); }
.welcome-option.featured { border-color: #9bbcff; background: linear-gradient(140deg,#edf4ff,#fff); }
.welcome-option-icon { grid-row: 1 / 4; display: grid; place-items: center; width: 58px; height: 58px; color: white; font-size: 20px; font-weight: 900; border-radius: 16px; background: linear-gradient(135deg,var(--blue-deep),var(--blue)); }
.welcome-option strong { align-self: end; font-size: 22px; }
.welcome-option small { color: var(--muted); font-size: 14px; line-height: 1.45; }
.welcome-option b { align-self: start; color: var(--blue); font-size: 14px; }
.dashboard-rooms-now { margin-bottom: 25px; padding: 18px; border: 1px solid #cbdcff; border-radius: 16px; background: linear-gradient(120deg,#f5f9ff,#fff); box-shadow: 0 9px 22px rgba(32,70,128,.05); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.section-title h2 { margin: 0; font-size: 22px; }
.section-title a { color: var(--blue); font-size: 13px; font-weight: 900; text-decoration: none; }
.dashboard-rooms-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.dashboard-room { display: flex; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.dashboard-room i, .room-dot { flex: 0 0 auto; width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; background: #20b26b; box-shadow: 0 0 0 5px rgba(32,178,107,.13); }
.dashboard-room.reservada i { background: #df3f3f; box-shadow: 0 0 0 5px rgba(223,63,63,.13); }
.dashboard-room.proxima i { background: #e3a008; box-shadow: 0 0 0 5px rgba(227,160,8,.16); }
.dashboard-room div { display: grid; gap: 3px; }
.dashboard-room span { color: var(--ink); font-weight: 800; }
.dashboard-room small { color: var(--muted); }
.rooms-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 23px; }
.rooms-hero h1 { margin: 0; font-size: clamp(32px,4vw,48px); }
.rooms-hero p:last-child { color: var(--muted); }
.rooms-new-button { width: auto; min-width: 190px; padding: 0 17px; }
.rooms-live-pill { display: flex; align-items: center; gap: 8px; color: #087f5b; font-size: 12px; font-weight: 900; }
.rooms-live-pill i { width: 10px; height: 10px; border-radius: 50%; background: #20b26b; box-shadow: 0 0 0 5px rgba(32,178,107,.13); }
.rooms-now-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 15px; }
.room-now-card { display: grid; gap: 13px; padding: 18px; border: 1px solid #cdeedc; border-radius: 15px; background: #f6fff9; box-shadow: 0 8px 20px rgba(20,85,70,.06); }
.room-now-card.reservada { border-color: #f4c3c3; background: #fff8f8; }
.room-now-card.proxima { border-color: #f2dda8; background: #fffbef; }
.room-now-card.reservada .room-dot { background: #df3f3f; box-shadow: 0 0 0 5px rgba(223,63,63,.13); }
.room-now-card.proxima .room-dot { background: #e3a008; box-shadow: 0 0 0 5px rgba(227,160,8,.16); }
.room-now-heading { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.room-now-heading h3 { margin: 0; }
.room-now-heading b { color: #087f5b; font-size: 12px; }
.reservada .room-now-heading b { color: #b72c2c; }
.proxima .room-now-heading b { color: #a36e00; }
.room-now-card p { margin: 0; color: var(--muted); }
.room-now-details { display: grid; gap: 4px; }
.room-now-details span, .room-now-details small { color: var(--muted); }
.room-now-card button { justify-self: start; padding: 0; color: var(--blue); font-weight: 900; border: 0; cursor: pointer; background: transparent; }
.rooms-stats { margin-top: 18px; }
.rooms-agenda-heading { align-items: center; }
.rooms-view-actions { display: flex; gap: 7px; }
.rooms-view-actions .active { color: white; border-color: var(--blue); background: var(--blue); }
.rooms-agenda { display: grid; gap: 9px; }
.agenda-reservation { display: grid; grid-template-columns: 145px 1fr 120px 130px 1.4fr; gap: 12px; align-items: center; padding: 13px; color: var(--ink); text-align: left; border: 1px solid var(--line); border-left: 5px solid var(--blue); border-radius: 9px; cursor: pointer; background: #fbfdff; }
.agenda-reservation:hover { background: #f2f7ff; }
.agenda-date, .agenda-reservation small { color: var(--muted); }
.reservation-form { display: grid; grid-template-columns: repeat(2,1fr); gap: 4px 13px; }
.room-day-list { display: grid; gap: 7px; }
.room-day-slot { display: flex; justify-content: space-between; gap: 12px; padding: 11px 13px; border-radius: 8px; font-size: 13px; }
.room-day-slot.free { color: #087f5b; background: #eefcf5; }
.room-day-slot.busy { color: #a72828; background: #fff2f2; }
.room-day-slot.past { color: #6f7d94; background: #f0f3f7; }
.room-day-slot.finished { color: #1752b5; background: #edf4ff; }
.reservation-summary { display: grid; gap: 8px; padding: 15px; border-radius: 10px; background: #f4f8ff; }
.reservation-room-name { margin-bottom: 5px; font-size: 18px; }
.reservation-detail-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.reservation-detail-grid div { display: grid; gap: 4px; padding: 10px; border-radius: 8px; background: white; }
.reservation-detail-grid small { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.reservation-detail-grid span { color: var(--ink); line-height: 1.45; }
.reservation-detail-grid .detail-full { grid-column: 1 / -1; }
.rooms-timeline { margin-top: 18px; }
.danger-button { color: var(--danger); border-color: #f1b7b7; }
.rooms-cancelled-list { display: grid; gap: 9px; }
.cancelled-reservation { display: grid; grid-template-columns: 1.1fr 1.1fr .9fr 1.5fr; gap: 13px; padding: 13px; color: var(--ink); text-align: left; border: 1px solid #efc5c5; border-left: 5px solid var(--danger); border-radius: 9px; cursor: pointer; background: #fffafa; }
.cancelled-reservation:hover { background: #fff3f3; }
.cancelled-reservation div { display: grid; gap: 4px; }
.cancelled-reservation small { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; }
.rooms-cancelled-empty { padding: 18px; color: var(--muted); text-align: center; border: 1px dashed var(--line); border-radius: 9px; }
.cancel-card { width: min(590px,100%); }
.cancel-summary { display: grid; gap: 5px; margin-bottom: 15px; padding: 13px; color: var(--ink); border-radius: 10px; background: #f4f8ff; }
.cancel-summary span, .cancel-summary small { color: var(--muted); }
.cancel-confirm-button { width: auto; min-width: 220px; padding: 0 14px; background: var(--danger); box-shadow: 0 10px 22px rgba(201,42,42,.22); }
.cancelled-details { display: grid; gap: 6px; margin-top: 12px; padding: 13px; color: #9b2727; border: 1px solid #efc5c5; border-radius: 9px; background: #fff5f5; }
.operations-hero { display: flex; align-items: stretch; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.operations-hero h1 { margin: 0; font-size: clamp(32px,4vw,48px); }
.operations-hero p:last-child { color: var(--muted); }
.operations-today { min-width: 180px; display: grid; align-content: center; gap: 5px; padding: 17px 19px; color: white; border-radius: 15px; background: linear-gradient(120deg,#073fc8,#0875dc); }
.operations-today span { color: #cce5ff; font-size: 12px; }
.operations-today strong { font-size: 22px; }
.operations-new-button { width: auto; min-width: 185px; padding: 0 15px; }
.operations-team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.operation-person { display: grid; gap: 12px; padding: 16px; border: 1px solid #cdeedc; border-radius: 14px; background: #f6fff9; }
.operation-person.somente_urgencias { border-color: #f2dda8; background: #fffbef; }
.operation-person.nao_interromper { border-color: #f4c3c3; background: #fff8f8; }
.operation-person-heading { display: flex; align-items: center; gap: 10px; }
.operation-person-heading i { width: 12px; height: 12px; border-radius: 50%; background: #20b26b; box-shadow: 0 0 0 5px rgba(32,178,107,.13); }
.somente_urgencias .operation-person-heading i { background: #e3a008; box-shadow: 0 0 0 5px rgba(227,160,8,.16); }
.nao_interromper .operation-person-heading i { background: #df3f3f; box-shadow: 0 0 0 5px rgba(223,63,63,.13); }
.operation-person-heading div, .operation-current { display: grid; gap: 4px; }
.operation-person-heading span, .operation-current small, .operation-person p { color: var(--muted); font-size: 12px; }
.operation-current em { justify-self: start; padding: 4px 7px; color: #405478; font-size: 11px; font-style: normal; font-weight: 900; border-radius: 20px; background: white; }
.operations-stats { grid-template-columns: repeat(5,1fr); margin-top: 18px; }
.operations-filter-panel { padding: 14px; }
.operations-filter-grid { display: grid; grid-template-columns: auto repeat(4,1fr) auto; gap: 10px; align-items: end; }
.operations-filter-grid .field { margin: 0; }
.operations-period-buttons { display: flex; gap: 6px; align-self: center; }
.operations-period-buttons .active { color: white; border-color: var(--blue); background: var(--blue); }
.operations-filter-button { width: auto; min-width: 135px; padding: 0 13px; }
.operations-activity-list { display: grid; gap: 8px; }
.operation-activity { display: grid; grid-template-columns: 100px 120px 1fr 95px 120px; gap: 12px; align-items: center; padding: 13px; color: var(--ink); text-align: left; border: 1px solid var(--line); border-left: 5px solid #e3a008; border-radius: 9px; cursor: pointer; background: #fbfdff; }
.operation-activity:hover { background: #f3f7ff; }
.operation-activity.priority-critica { border-left-color: #df3f3f; }
.operation-activity.priority-alta { border-left-color: #ed7b2f; }
.operation-activity.priority-baixa { border-left-color: #1e7ed8; }
.operation-activity div { display: grid; gap: 3px; }
.operation-activity span, .operation-activity small { color: var(--muted); }
.operation-activity em, .operation-activity mark { justify-self: start; padding: 4px 7px; color: #405478; font-size: 11px; font-style: normal; font-weight: 900; border-radius: 20px; background: #edf3ff; }
.operation-activity mark { color: #087f5b; background: #e9fbf2; }
.activity-form { display: grid; grid-template-columns: repeat(2,1fr); gap: 4px 13px; }
.operation-detail-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
.operation-detail-grid div { display: grid; gap: 4px; padding: 11px; border-radius: 8px; background: #f4f8ff; }
.operation-detail-grid small { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; }
.operation-detail-grid .detail-full { grid-column: 1 / -1; }
.operations-timeline { margin-top: 18px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes drift { 50% { transform: translateY(-18px) scale(1.05); } }
@keyframes logoutPop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes exitStep { 0% { transform: translateX(0) rotateY(0); opacity: 1; } 60% { transform: translateX(22px) rotateY(-22deg); opacity: 1; } 100% { transform: translateX(44px) rotateY(-35deg); opacity: 0; } }
@media (max-width: 1100px) { .filter-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-brand { min-height: 285px; padding: 25px 30px; }
  .login-logo { width: 205px; padding: 9px 12px; }
  .brand-copy { position: relative; margin: auto 0 0; }
  .brand-copy h1 { font-size: 34px; }
  .brand-copy p:last-child { display: none; }
  .login-panel { padding: 32px 20px; }
  .topbar { height: 70px; padding: 0 16px; gap: 14px; }
  .topbar-title { display: none; }
  .topbar-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; justify-content: center; margin: 0; padding: 9px; border-left: 0; background: white; border-top: 1px solid var(--line); box-shadow: 0 -8px 22px rgba(32,70,128,.08); }
  .topbar-nav-item { color: #5e7195; border-color: #dbe5f5; background: #f7faff; }
  .topbar-nav-item.active { color: white; border-color: var(--blue); background: var(--blue); }
  .user-menu { gap: 7px; }
  .user-menu > div { display: none; }
  .sidebar { display: none; }
  .content { margin-left: 0; padding: 25px 15px 88px; }
  .hero-status { display: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-grid { grid-template-columns: 1fr; }
  .panel { padding: 16px; }
  .filter-actions { align-items: stretch; flex-direction: column; }
  .search-button { width: 100%; }
  .help-card { flex-direction: column; gap: 5px; }
  .module-banner { align-items: flex-start; flex-direction: column; }
  .module-button { width: 100%; margin-left: 0; }
  .rh-hero { flex-direction: column; }
  .period-card { min-width: 0; }
  .rh-filter-grid { grid-template-columns: 1fr; }
  .rh-list-heading { align-items: stretch; flex-direction: column; }
  .rh-actions { justify-content: stretch; }
  .rh-actions button { flex: 1 1 auto; }
  .modal-form #record-fields { grid-template-columns: 1fr; }
  .profile-form { grid-template-columns: 1fr; }
  .inline-form { grid-template-columns: 1fr; }
  .welcome-choice-grid { grid-template-columns: 1fr; }
  .welcome-option { min-height: 180px; }
  .dashboard-rooms-grid, .rooms-now-grid { grid-template-columns: 1fr; }
  .rooms-hero { align-items: stretch; flex-direction: column; }
  .rooms-new-button { width: 100%; }
  .rooms-agenda-heading { align-items: stretch; flex-direction: column; }
  .agenda-reservation { grid-template-columns: 1fr; gap: 5px; }
  .reservation-form { grid-template-columns: 1fr; }
  .reservation-detail-grid { grid-template-columns: 1fr; }
  .reservation-detail-grid .detail-full { grid-column: auto; }
  .feedback-details div { grid-template-columns: 1fr; gap: 3px; }
  .cancelled-reservation { grid-template-columns: 1fr; }
  .operations-hero { flex-direction: column; }
  .operations-team-grid { grid-template-columns: 1fr; }
  .operations-stats { grid-template-columns: repeat(2,1fr); }
  .operations-filter-grid { grid-template-columns: 1fr; }
  .operations-period-buttons { flex-wrap: wrap; }
  .operations-filter-button { width: 100%; }
  .operation-activity { grid-template-columns: 1fr; gap: 5px; }
  .activity-form, .operation-detail-grid { grid-template-columns: 1fr; }
  .operation-detail-grid .detail-full { grid-column: auto; }
  .logout-actions { flex-direction: column; }
}

.home-label{
    font-size: 13px;
    line-height: 1.15;
}


.password-field-wrap { position: relative; display: flex; align-items: center; }
.password-field-wrap input { padding-right: 52px; }
.password-toggle {
  position: absolute;
  right: 8px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1f5fb8;
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  transition: .2s ease;
}
.password-toggle:hover,
.password-toggle:focus-visible {
  color: #074fd2;
  background: #edf7ff;
  outline: none;
}