:root {
  --blue: #007abc;
  --navy: #071f35;
  --ink: #172b3a;
  --muted: #6e7e8b;
  --line: #dfe7ec;
  --bg: #f4f7f9;
  --white: #fff;
  --green: #159b6b;
  --amber: #ef9d22;
  --shadow: 0 12px 35px rgba(24, 55, 76, 0.08);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: 'DM Sans', Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
button,
input,
select,
textarea {
  font: inherit;
}
.hidden {
  display: none !important;
}
.login-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  background: #fff;
}
.login-art {
  position: relative;
  padding: 48px 64px;
  color: #fff;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(0, 66, 108, 0.94), rgba(0, 122, 188, 0.72)),
    url('login-image.jpg') center/cover;
}
.login-art:before,
.login-art:after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  width: 520px;
  height: 520px;
  right: -170px;
  top: -120px;
}
.login-art:after {
  width: 300px;
  height: 300px;
  right: -70px;
  top: -10px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.05em;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 64px;
  flex: 0 0 64px;
  font-size: 14px;
  letter-spacing: -0.04em;
  height: 34px;
  border-radius: 4px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}
.brand-light .brand-mark {
  background: #fff;
  color: var(--blue);
}
.art-caption {
  position: absolute;
  left: 64px;
  bottom: 100px;
  max-width: 540px;
}
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin: 0 0 8px;
}
.eyebrow.blue {
  color: var(--blue);
}
.art-caption h1 {
  font-size: 48px;
  line-height: 1.08;
  margin: 10px 0 18px;
  letter-spacing: -0.035em;
}
.art-caption p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.8);
}
.image-hint {
  position: absolute;
  right: 32px;
  bottom: 28px;
  border: 1px dashed rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 9px 14px;
  border-radius: 8px;
}
.login-panel {
  display: grid;
  place-items: center;
  padding: 32px;
}
.login-card {
  width: min(480px, 100%);
  padding: 30px;
  border-radius: 22px;
  background: var(--white);
  box-shadow: var(--shadow);
}
.login-card .identity-notice {
  border-radius: 10px;
}
.login-card .password-wrap {
  margin-top: 8px;
  border-radius: 8px;
}
.login-card .password-wrap input {
  margin-top: 0;
}
.login-card .demo-note {
  line-height: 1.5;
}
@media (max-width: 480px) {
  .login-card {
    padding: 24px 20px;
    border-radius: 18px;
  }
}
.login-card h2 {
  font-size: 36px;
  margin: 5px 0 8px;
}
.muted {
  color: var(--muted);
  margin: 0 0 32px;
}
.login-card > label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin: 18px 0;
}
.login-card input:not([type='checkbox']) {
  width: 100%;
  margin-top: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
}
.login-card input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 122, 188, 0.1);
}
.login-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.login-row a {
  color: var(--blue);
  text-decoration: none;
}
.check {
  display: flex;
  gap: 7px;
  align-items: center;
}
.primary,
.secondary,
.dark-btn {
  border: 0;
  border-radius: 8px;
  padding: 12px 17px;
  font-weight: 700;
  cursor: pointer;
}
.primary {
  background: var(--blue);
  color: #fff;
}
.primary:hover {
  background: #006ca7;
}
.wide {
  width: 100%;
  margin-top: 25px;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.demo-note {
  text-align: center;
  font-size: 11px;
  color: #8b99a3;
}
.mobile-brand {
  display: none;
}
.app {
  min-height: 100vh;
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 235px;
  background: var(--navy);
  color: #fff;
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.sidebar > .brand {
  padding: 0 10px 32px;
}
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nav-item {
  border: 0;
  color: #c5d0d8;
  background: transparent;
  text-align: left;
  padding: 13px 15px;
  border-radius: 7px;
  font-weight: 600;
  cursor: pointer;
}
.nav-item span {
  margin-right: 11px;
}
.nav-item.active {
  background: var(--blue);
  color: #fff;
}
.nav-item.disabled {
  opacity: 0.45;
  cursor: default;
}

.siged-workspace {
  display: grid;
  gap: 16px;
  padding: 22px 0 40px;
}
.siged-workspace[hidden] {
  display: none;
}
.siged-heading {
  margin-bottom: 0;
}
.siged-heading h2 {
  margin: 4px 0;
}
.siged-local-note {
  padding: 14px 16px;
  border: 1px solid #e7c98b;
  border-radius: 12px;
  background: #fff8e8;
  color: #59451e;
}
.siged-panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line, #dce3e8);
  border-radius: 14px;
  background: var(--surface, #fff);
}
.siged-toolbar,
.siged-school-form,
.siged-entry-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  align-items: end;
  gap: 12px;
}
.siged-toolbar {
  grid-template-columns: repeat(3, minmax(140px, 1fr));
}
.siged-toolbar label,
.siged-school-form label,
.siged-entry-fields label {
  display: grid;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
}
.siged-toolbar input,
.siged-toolbar select,
.siged-school-form input,
.siged-school-form select,
.siged-entry-fields input,
.siged-workspace textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line, #cbd5dc);
  border-radius: 9px;
  color: inherit;
  background: var(--surface, #fff);
  font: inherit;
}
.siged-school-form {
  grid-template-columns: 1.2fr 0.8fr 2fr auto;
}
.siged-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.siged-school-list,
.siged-roster {
  display: grid;
  gap: 8px;
}
.siged-school-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line, #dce3e8);
  border-radius: 10px;
}
.siged-school-row > div {
  display: grid;
  gap: 4px;
}
.siged-school-row small,
.siged-roster-item small {
  color: var(--muted, #657581);
}
.siged-work-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(0, 2fr);
  gap: 18px;
}
.siged-roster-item {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 9px 11px;
  text-align: left;
  color: inherit;
  border: 1px solid var(--line, #dce3e8);
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
}
.siged-roster-item.selected {
  border-color: #008f8c;
  box-shadow: 0 0 0 1px #008f8c;
}
.siged-roster-item.omitted {
  opacity: 0.58;
  text-decoration: line-through;
}
.siged-instructions {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.siged-instructions summary {
  cursor: pointer;
  font-weight: 700;
}
.siged-instructions details {
  flex: 1;
  min-width: 0;
}
.siged-instructions textarea {
  margin: 10px 0;
}
.siged-input-wrap {
  width: 100%;
}
.siged-input-wrap input {
  padding-right: 104px;
  text-transform: uppercase;
}
.siged-input-wrap .tool-btn svg {
  display: block;
  width: 18px;
  height: 20px;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.siged-phone-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.siged-phone-row .siged-input-wrap {
  flex: 1;
}
.siged-add-phone {
  flex: 0 0 40px;
  min-width: 40px;
  height: 42px;
  padding: 0;
  font-size: 1.3rem;
}
.siged-entry-fields [hidden] {
  display: none !important;
}
.siged-manual-form {
  display: grid;
  gap: 10px;
}
.siged-manual-field {
  display: flex;
  gap: 5px;
  align-items: center;
}
.siged-manual-field input {
  flex: 1;
  width: 10px;
}
.siged-manual-field .tool-btn {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
}
.siged-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.siged-table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.siged-table th,
.siged-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
.siged-table th {
  position: sticky;
  top: 0;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}
.siged-table tbody tr {
  cursor: pointer;
}
.siged-table tbody tr:hover {
  background: rgba(0, 143, 140, 0.07);
}
.siged-table tbody tr.selected {
  background: rgba(0, 143, 140, 0.13);
  box-shadow: inset 3px 0 #008f8c;
}
.siged-table tbody tr.omitted {
  color: var(--muted);
  text-decoration: line-through;
}
.siged-table tbody tr:focus-visible {
  outline: 2px solid #008f8c;
  outline-offset: -2px;
}
.siged-entry-fields {
  grid-template-columns: repeat(3, minmax(130px, 1fr));
}
.siged-entry-form[hidden] {
  display: none;
}
.siged-footnote {
  margin: 0;
  color: var(--muted, #657581);
  font-size: 0.86rem;
}
@media (max-width: 850px) {
  .siged-toolbar,
  .siged-school-form,
  .siged-entry-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .siged-work-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .siged-toolbar,
  .siged-school-form,
  .siged-entry-fields {
    grid-template-columns: 1fr;
  }
  .siged-school-row {
    align-items: flex-start;
    flex-direction: column;
  }
}
.sidebar-user {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  gap: 9px;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #d8f0fd;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}
.sidebar-user div:nth-child(2) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.sidebar-user strong {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user small {
  color: #63d7a8;
  font-size: 10px;
}
.sidebar-user button {
  background: none;
  border: 0;
  color: #afbdc6;
  cursor: pointer;
  font-size: 18px;
}
main {
  margin-left: 235px;
  padding: 0 34px 50px;
  max-width: 1600px;
}
.topbar {
  min-height: 105px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}
.topbar h1 {
  margin: 0;
  font-size: 27px;
}
.header-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
}
.secondary {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
.sync-pill {
  font-size: 11px;
  color: var(--muted);
  margin-right: 8px;
}
.sync-pill i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 5px;
}
.menu-btn {
  display: none;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}
.stats article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 17px 20px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.stat-icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 8px;
}
.blue-bg {
  background: #e4f3fb;
  color: var(--blue);
}
.green-bg {
  background: #e2f6ef;
  color: var(--green);
}
.amber-bg {
  background: #fff0d9;
  color: var(--amber);
}
.stats div:nth-child(2) {
  display: flex;
  flex-direction: column;
}
.stats span {
  font-size: 11px;
  color: var(--muted);
}
.stats strong {
  font-size: 20px;
  margin-top: 2px;
}
.import-card,
.form-card,
.records-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}
.import-card {
  border-left: 4px solid var(--blue);
}
.section-heading,
.form-title,
.records-head {
  display: flex;
  align-items: center;
  padding: 20px 24px;
}
.heading-icon {
  background: #e5f3fb;
  color: var(--blue);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin-right: 13px;
}
.section-heading h2,
.form-title h2,
.records-head h2 {
  font-size: 18px;
  margin: 0;
}
.section-heading p {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 0;
}
.link-btn {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--blue);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.import-body {
  padding: 0 24px 20px;
}
.import-body textarea {
  width: 100%;
  resize: vertical;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
  line-height: 1.5;
}
.import-footer {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.import-footer small {
  color: var(--muted);
}
.dark-btn {
  margin-left: auto;
  background: var(--navy);
  color: #fff;
}
.form-title {
  border-bottom: 1px solid var(--line);
}
.fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 20px;
  padding: 23px 24px;
}
.field {
  min-width: 0;
}
.field.span-2 {
  grid-column: span 2;
}
.field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 7px;
}
.cell-tag {
  color: #9aabb6;
  font-weight: 600;
}
.input-wrap {
  display: flex;
  position: relative;
}
.input-wrap input,
.input-wrap select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  padding: 11px 72px 11px 12px;
  outline: none;
  height: 43px;
}
.input-wrap select {
  padding-right: 12px;
}
.input-wrap input:focus,
.input-wrap select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 122, 188, 0.08);
}
.tools {
  position: absolute;
  right: 5px;
  top: 5px;
  display: flex;
}
.tool-btn {
  border: 0;
  background: transparent;
  width: 31px;
  height: 33px;
  color: #82939e;
  cursor: pointer;
  border-radius: 5px;
}
.tool-btn:hover,
.tool-btn.listening {
  background: #e4f3fb;
  color: var(--blue);
}
.field-help {
  font-size: 10px;
  color: #93a1aa;
  margin-top: 5px;
  display: block;
}
.form-actions {
  border-top: 1px solid var(--line);
  padding: 17px 24px;
  display: flex;
  align-items: center;
}
.form-actions p {
  color: var(--muted);
  font-size: 11px;
}
.form-actions p span {
  color: var(--green);
}
.save-btn {
  margin-left: auto;
  padding-inline: 26px;
}
.records-head {
  justify-content: space-between;
}
.search {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  color: #81909a;
}
.search input {
  border: 0;
  outline: 0;
  margin-left: 5px;
}
.table-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--line);
}
.records-scroll-viewport {
  scrollbar-width: none;
}
.records-scroll-viewport::-webkit-scrollbar {
  display: none;
}
.records-horizontal-scroll {
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-color: var(--blue) var(--line);
  background: var(--bg);
}
.records-horizontal-scroll:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
.records-scroll-track {
  height: 1px;
}
.records-horizontal-scroll::-webkit-scrollbar {
  height: 16px;
}
.records-horizontal-scroll::-webkit-scrollbar-thumb {
  background: var(--blue);
  border: 3px solid var(--line);
  border-radius: 8px;
}
.records-horizontal-scroll::-webkit-scrollbar-track {
  background: var(--line);
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}
th {
  text-align: left;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #82909a;
  background: #f8fafb;
  padding: 11px 16px;
}
td {
  font-size: 11px;
  padding: 13px 16px;
  border-top: 1px solid #edf1f3;
}
.empty {
  text-align: center;
  padding: 40px;
  color: var(--muted);
}
.empty span {
  font-size: 28px;
}
.empty h3 {
  color: var(--ink);
  margin: 9px 0 3px;
}
.empty p {
  font-size: 12px;
  margin: 0;
}
.toast {
  position: fixed;
  right: 25px;
  bottom: 25px;
  background: var(--navy);
  color: #fff;
  border-radius: 10px;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(120px);
  opacity: 0;
  transition: 0.3s;
  z-index: 50;
  box-shadow: var(--shadow);
}
.toast.show {
  transform: none;
  opacity: 1;
}
.toast > span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green);
  display: grid;
  place-items: center;
}
.toast div {
  display: flex;
  flex-direction: column;
}
.toast small {
  color: #b6c3cc;
}
.icon-btn {
  border: 0;
  background: transparent;
  font-size: 20px;
}
@media (max-width: 1050px) {
  .fields {
    grid-template-columns: repeat(2, 1fr);
  }
  .sync-pill {
    display: none;
  }
  .login-art {
    padding: 40px;
  }
  .art-caption {
    left: 40px;
  }
  .art-caption h1 {
    font-size: 40px;
  }
}
@media (max-width: 760px) {
  .login-screen {
    display: block;
  }
  .login-art {
    min-height: 220px;
  }
  .art-caption {
    left: 25px;
    bottom: 25px;
  }
  .art-caption h1 {
    font-size: 28px;
    margin: 7px 0;
  }
  .art-caption p,
  .image-hint {
    display: none;
  }
  .login-panel {
    padding: 36px 24px;
  }
  .sidebar {
    transform: translateX(-100%);
    transition: 0.25s;
  }
  .sidebar.open {
    transform: none;
  }
  .sidebar.open:after {
    content: '';
    position: fixed;
    inset: 0 0 0 235px;
    background: rgba(3, 19, 31, 0.4);
  }
  main {
    margin-left: 0;
    padding: 0 15px 35px;
  }
  .topbar {
    flex-wrap: wrap;
    padding: 16px 0;
  }
  .menu-btn {
    display: block;
  }
  .header-actions {
    width: 100%;
    margin: 3px 0 0;
  }
  .header-actions button {
    flex: 1;
    padding: 10px 6px;
    font-size: 12px;
  }
  .stats {
    grid-template-columns: 1fr;
    margin: 16px 0;
    gap: 9px;
  }
  .fields {
    grid-template-columns: 1fr;
    padding: 18px 16px;
  }
  .field.span-2 {
    grid-column: span 1;
  }
  .section-heading,
  .form-title,
  .records-head {
    padding: 17px 16px;
  }
  .section-heading p {
    display: none;
  }
  .import-body {
    padding: 0 16px 16px;
  }
  .import-footer {
    align-items: flex-end;
    gap: 10px;
  }
  .import-footer small {
    flex: 1;
  }
  .form-actions {
    padding: 15px 16px;
    gap: 8px;
  }
  .form-actions p {
    display: none;
  }
  .save-btn {
    width: 100%;
    margin: 0;
  }
  .records-head {
    align-items: flex-start;
    gap: 12px;
    flex-direction: column;
  }
  .search {
    width: 100%;
  }
  .search input {
    width: calc(100% - 28px);
  }
}

/* Identidad azul-verde y temas */
:root {
  --blue: #0076a8;
  --navy: #052e3d;
  --green: #00a88f;
  --surface: #fff;
  --input: #fff;
  --brand-gradient: linear-gradient(135deg, #0076a8 0%, #0097a5 48%, #00a88f 100%);
}
.login-art {
  background:
    linear-gradient(145deg, rgba(0, 95, 143, 0.93), rgba(0, 168, 143, 0.76)),
    url('login-image.jpg') center/cover;
}
.hero-logo {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  position: relative;
  z-index: 2;
}
.hero-logo > img {
  display: block;
  width: min(100%, 480px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.personal-wordmark {
  color: #fff;
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: clamp(64px, 7.5vw, 112px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  max-width: 100%;
  filter: drop-shadow(0 3px 5px #003c5033);
}
.mlpro-emblem {
  position: relative;
  display: inline-block;
  width: 44px;
  aspect-ratio: 1.1;
  flex: 0 0 auto;
  overflow: hidden;
}
.mlpro-emblem img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(1.15) contrast(1.06);
}
.hero-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
}
.hero-logo .mlpro-emblem {
  width: clamp(62px, 8vw, 100px);
}
.brand .login-brand-text,
.drawer-heading .brand > span:last-child {
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.045em;
}
#sidebarToggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 152px;
  flex-basis: 152px;
  height: 52px;
  padding: 6px 8px;
}
#sidebarToggle .mlpro-emblem {
  width: 32px;
}
#sidebarToggle .drawer-letter {
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.05em;
}
@media (max-width: 760px) {
  #sidebarToggle {
    width: 132px;
    flex-basis: 132px;
    height: 46px;
    gap: 6px;
  }
  #sidebarToggle .mlpro-emblem {
    width: 28px;
  }
  #sidebarToggle .drawer-letter {
    font-size: 26px;
  }
}
.login-screen .login-art {
  background: var(--brand-gradient);
}
.login-screen .login-art .login-brand-text {
  color: #fff !important;
}
.identity-notice {
  margin: 20px 0;
  padding: 14px 16px;
  border-left: 3px solid var(--green);
  background: linear-gradient(135deg, #edf7fc, #eaf9f3);
  color: #164b58;
  font-size: 14px;
  line-height: 1.55;
}
.connection-notice {
  margin: 16px 0;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  overflow-wrap: anywhere;
}
.connection-notice p {
  margin: 0 0 8px;
}
.connection-notice p:first-child {
  color: var(--muted);
  font-size: 13px;
}
.hero-symbol {
  position: relative;
  display: block;
  flex: 0 0 clamp(120px, 18vw, 230px);
  aspect-ratio: 1.08;
  overflow: hidden;
}
.hero-symbol img {
  position: absolute;
  height: 206%;
  width: auto;
  max-width: none;
  left: -24%;
  top: -51%;
  filter: drop-shadow(0 14px 24px rgba(0, 28, 43, 0.22));
}
.hero-wordmark {
  color: #fff;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: clamp(62px, 9vw, 132px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.065em;
  text-shadow: 0 14px 24px rgba(0, 28, 43, 0.22);
  white-space: nowrap;
}
.login-art > .brand,
.art-caption {
  position: absolute;
  z-index: 3;
}
.login-art .login-brand-text,
.mobile-brand .login-brand-text,
.sidebar .sidebar-brand-text {
  color: #000 !important;
}
.brand-mark,
.primary,
.nav-item.active {
  background: var(--brand-gradient);
}
.primary:hover {
  filter: brightness(0.92);
}
.image-hint {
  border-style: solid;
  cursor: default;
}
.password-wrap {
  position: relative;
}
.password-wrap input {
  padding-right: 48px !important;
}
.password-wrap button {
  position: absolute;
  right: 6px;
  top: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 17px;
}
.password-wrap button:hover {
  background: rgba(0, 118, 168, 0.1);
  color: var(--blue);
}
.eye-icon {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.eye-slash {
  display: none;
}
.password-wrap button.password-visible .eye-slash {
  display: block;
}
.login-error {
  min-height: 18px;
  margin: 12px 0 -10px;
  color: #d94c57;
  font-size: 12px;
  font-weight: 600;
}
.topbar-titleline {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-titleline .eyebrow {
  margin: 0;
}
.theme-toggle {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(0, 35, 54, 0.08);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}
.theme-icon {
  font-size: 16px;
}
.theme-toggle:hover {
  transform: translateY(-1px);
}
body.dark {
  --ink: #e8f1f3;
  --muted: #9db0b8;
  --line: #274853;
  --bg: #071d26;
  --surface: #0c2731;
  --input: #102f3a;
  --shadow: 0 12px 35px rgba(0, 0, 0, 0.22);
}
body.dark .login-screen,
body.dark .login-panel,
body.dark .stats article,
body.dark .import-card,
body.dark .form-card,
body.dark .records-card {
  background: var(--surface);
}
body.dark .secondary,
body.dark .input-wrap input,
body.dark .input-wrap select,
body.dark textarea,
body.dark .search input {
  background: var(--input);
  color: var(--ink);
  border-color: var(--line);
}
body.dark th {
  background: #0a222c;
  color: #9bb0b8;
}
body.dark td {
  border-color: #193a46;
}
body.dark .topbar,
body.dark .form-title,
body.dark .form-actions,
body.dark .table-wrap {
  border-color: var(--line);
}
body.dark .theme-toggle {
  background: linear-gradient(135deg, #0076a8, #00a88f);
  border-color: transparent;
}
body.dark input::placeholder,
body.dark textarea::placeholder {
  color: #718a94;
}
@media (max-width: 760px) {
  .theme-label {
    display: none;
  }
  .theme-toggle {
    width: 32px;
    height: 32px;
    justify-content: center;
    padding: 0;
  }
  .login-art {
    min-height: 310px;
  }
  .hero-logo > img {
    width: min(100%, 240px);
  }
  .hero-symbol {
    flex-basis: 92px;
  }
  .hero-wordmark {
    font-size: 46px;
  }
  .art-caption {
    bottom: 20px;
  }
  .art-caption .eyebrow,
  .art-caption p {
    display: none;
  }
  .art-caption h1 {
    font-size: 22px;
    max-width: 390px;
  }
}

/* Keep the cover artwork independent of the login form's readable size. */
.login-screen {
  min-height: 100svh;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}
.login-art {
  display: grid;
  grid-template-rows: auto minmax(200px, 1fr) auto;
  gap: 32px;
  padding: clamp(28px, 4vw, 64px);
}
.login-art > .brand,
.login-art .art-caption {
  position: relative;
  inset: auto;
}
.login-art .brand {
  font-size: 16px;
  gap: 8px;
}
.login-art .brand-mark {
  width: 64px;
  height: 28px;
}
.login-art .art-caption {
  max-width: 500px;
}
.login-art .art-caption h1 {
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.12;
  margin: 0 0 16px;
}
.login-art .art-caption p {
  display: block;
  margin: 0;
  font-size: 18px;
}
.login-card input:not([type='checkbox']) {
  font-size: 16px;
}
@media (max-width: 760px) {
  .login-art {
    min-height: 0;
    grid-template-rows: auto auto;
    gap: 8px;
    padding: 20px 24px 24px;
  }
  .login-art > .brand {
    display: none;
  }
  .login-art .art-caption {
    text-align: center;
    justify-self: center;
    max-width: 340px;
  }
  .login-art .art-caption h1 {
    font-size: 25px;
    margin-bottom: 8px;
  }
  .login-art .art-caption p {
    font-size: 16px;
  }
  .login-panel {
    padding: 30px 24px;
  }
}

/* Navegación lateral adaptable */
.sidebar,
main {
  transition:
    transform 0.28s ease,
    margin-left 0.28s ease,
    width 0.28s ease;
}
.menu-btn {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  flex: 0 0 auto;
}
.menu-btn:hover {
  color: var(--blue);
  border-color: var(--blue);
  background: rgba(0, 118, 168, 0.07);
}
.brand-menu {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 0;
  border-radius: 5px;
  background: #031c2b;
  color: #33b5df;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: visible;
}
.brand-letter {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}
.mini-bars {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 15px;
  height: 15px;
  padding: 3px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--blue), var(--green));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.mini-bars i {
  display: block;
  width: 9px;
  height: 1.5px;
  border-radius: 2px;
  background: #fff;
}
.sidebar .brand-menu:hover {
  transform: scale(1.04);
}
.sidebar .brand-menu:focus-visible,
.menu-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.menu-btn.brand-menu {
  border: 0;
  background: #052e3d;
  color: #35b7df;
}
.menu-btn.brand-menu:hover {
  background: #073b4d;
  color: #58c8ec;
}
.app:not(.sidebar-collapsed) .menu-btn .mini-bars i:first-child {
  transform: translateY(3.5px) rotate(45deg);
}
.app:not(.sidebar-collapsed) .menu-btn .mini-bars i:nth-child(2) {
  opacity: 0;
}
.app:not(.sidebar-collapsed) .menu-btn .mini-bars i:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}
.mini-bars i {
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}
.app.sidebar-collapsed .sidebar {
  width: 64px;
  padding-inline: 13px;
  transform: none;
}
.app.sidebar-collapsed .sidebar > .brand {
  padding: 0;
  justify-content: center;
}
.app.sidebar-collapsed .sidebar > .brand > span,
.app.sidebar-collapsed .sidebar nav,
.app.sidebar-collapsed .sidebar-user {
  display: none;
}
.app.sidebar-collapsed main {
  margin-left: 64px;
  max-width: none;
}
@media (min-width: 761px) {
  .app:not(.sidebar-collapsed) .menu-btn {
    margin-left: 0;
  }
}
@media (max-width: 760px) {
  .sidebar {
    width: min(280px, 82vw);
    transform: translateX(calc(-100% + 64px));
    box-shadow: 16px 0 42px rgba(0, 20, 30, 0.25);
  }
  .sidebar:not(.open) {
    padding-inline: 13px;
  }
  .sidebar:not(.open) > .brand {
    padding: 0;
    justify-content: flex-end;
  }
  .sidebar:not(.open) > .brand > span,
  .sidebar:not(.open) nav,
  .sidebar:not(.open) .sidebar-user {
    display: none;
  }
  .sidebar.open {
    transform: none;
  }
  .sidebar.open:after {
    inset: 0 0 0 min(280px, 82vw);
  }
  main {
    width: 100%;
    max-width: none;
    padding-left: 76px;
  }
  .topbar > div:first-child {
    min-width: 0;
  }
  .topbar h1 {
    font-size: 23px;
  }
  .fields {
    width: 100%;
  }
  .input-wrap input,
  .input-wrap select {
    font-size: 16px;
  }
  .table-wrap {
    -webkit-overflow-scrolling: touch;
  }
  .stats article {
    min-width: 0;
  }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .sidebar {
    width: 210px;
  }
  main {
    margin-left: 210px;
    padding-inline: 22px;
  }
  .fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .header-actions .secondary,
  .header-actions .primary {
    padding-inline: 12px;
  }
  .topbar {
    gap: 10px;
  }
}
@media (min-width: 1101px) {
  .fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.form-action-buttons {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-action-buttons .save-btn {
  margin-left: 0;
}
.download-btn {
  color: var(--blue);
  border-color: rgba(0, 118, 168, 0.35);
}
.download-btn:hover {
  background: rgba(0, 118, 168, 0.07);
  border-color: var(--blue);
}
@media (max-width: 760px) {
  .form-actions {
    display: block;
  }
  .form-action-buttons {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .form-action-buttons .save-btn {
    width: auto;
  }
  .download-btn,
  .form-action-buttons .save-btn {
    min-height: 45px;
    padding-inline: 8px;
    font-size: 12px;
  }
}

/* Historial de archivos Excel */
.history-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.history-head {
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}
.history-head h2 {
  font-size: 19px;
  margin: 0;
}
.history-head p:last-child {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.history-save {
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(0, 118, 168, 0.06), rgba(0, 168, 143, 0.06));
  border-bottom: 1px solid var(--line);
}
.history-save > label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 7px;
}
.history-save > div {
  display: flex;
  gap: 10px;
}
.history-save input {
  flex: 1;
  min-width: 0;
  height: 43px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 13px;
  background: var(--input);
  color: var(--ink);
  outline: none;
}
.history-save input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 118, 168, 0.09);
}
.history-save small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 7px;
}
.history-list {
  display: grid;
  gap: 10px;
  padding: 16px 24px;
}
.history-item {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 14px 16px;
}
.history-info {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.history-file-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(0, 118, 168, 0.14), rgba(0, 168, 143, 0.17));
  color: var(--green);
  font-size: 20px;
}
.history-info > div {
  min-width: 0;
}
.history-info strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-meta {
  display: flex;
  gap: 12px;
  color: var(--muted);
  font-size: 10px;
  margin-top: 4px;
}
.history-actions {
  display: flex;
  gap: 6px;
}
.history-action {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.history-action:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.history-action.delete:hover {
  border-color: #d94c57;
  color: #d94c57;
  background: rgba(217, 76, 87, 0.06);
}
.history-item.current {
  border-color: rgba(0, 168, 143, 0.55);
  box-shadow: 0 0 0 2px rgba(0, 168, 143, 0.08);
}
.current-badge {
  color: var(--green);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.history-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 13px;
  padding: 28px;
  color: var(--muted);
}
.history-empty > span {
  font-size: 27px;
}
.history-empty strong {
  color: var(--ink);
}
.history-empty p {
  font-size: 11px;
  margin: 3px 0 0;
}
.history-card button:disabled,
.header-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}
@media (max-width: 760px) {
  .history-head,
  .history-save {
    padding: 17px 16px;
  }
  .history-save > div {
    display: grid;
  }
  .history-list {
    padding: 13px;
  }
  .history-item {
    grid-template-columns: 1fr;
  }
  .history-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .history-action {
    padding: 8px 4px;
    font-size: 10px;
  }
  .history-meta {
    flex-wrap: wrap;
    gap: 5px 10px;
  }
}
.duplicate-warning {
  display: none;
  margin: 0 24px 18px;
  padding: 13px 15px;
  border: 1px solid var(--amber);
  border-left: 5px solid var(--amber);
  border-radius: 8px;
  background: #fff4df;
  color: #8a5200;
  font-size: 12px;
  font-weight: 600;
}
.duplicate-warning.show {
  display: block;
}
.toast.warning {
  background: #8a5200;
}
.toast.warning > span {
  background: var(--amber);
}

/* Selección y copia a Excel */
.mic-icon {
  display: block;
  width: 19px;
  height: 22px;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.records-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 24px 18px;
}
.select-all {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.records-toolbar input,
.record-select {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
  cursor: pointer;
}
.selection-cell {
  width: 65px;
  text-align: center;
}
.record-select {
  vertical-align: middle;
}
.records-toolbar p {
  flex-basis: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
#selectionCount {
  color: var(--muted);
  font-size: 12px;
}
#copyRecordsBtn {
  margin-left: auto;
  color: var(--blue);
}
#copyRecordsBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
#recordsBody tr.selected {
  background: rgba(0, 168, 143, 0.09);
}
.record-select:focus-visible,
.select-all input:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
@media (max-width: 760px) {
  .records-toolbar {
    padding: 0 16px 16px;
    gap: 12px;
  }
  #copyRecordsBtn {
    width: 100%;
    margin-left: 0;
  }
}

/* Espacio de trabajo sin barra lateral */
#app main {
  margin-left: 0;
  width: 100%;
  max-width: none;
  padding: 0 34px 50px;
}
.header-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.header-user {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--muted);
}
.trash-icon {
  display: block;
  width: 19px;
  height: 20px;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.clear-field:hover {
  background: rgba(217, 76, 87, 0.1);
  color: #d94c57;
}
.tool-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
@media (max-width: 1100px) {
  #app main {
    padding-inline: 22px;
  }
  .header-user {
    max-width: 140px;
  }
}
@media (max-width: 760px) {
  #app main {
    padding: 0 15px 35px;
  }
  .header-user {
    max-width: 100%;
    width: 100%;
    text-align: right;
  }
  .header-actions {
    gap: 8px;
  }
}

/* Menu superpuesto: oculto no reserva espacio */
#sidebarPanel {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(280px, 85vw);
  padding: 24px 18px;
  transform: none;
  z-index: 41;
  box-shadow: 12px 0 32px rgba(0, 0, 0, 0.25);
}
#sidebarPanel:after {
  display: none;
}
.drawer-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
}
.drawer-heading .brand {
  font-size: 18px;
}
.drawer-close {
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  width: 36px;
  height: 36px;
  font-size: 26px;
  cursor: pointer;
}
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(3, 19, 31, 0.4);
  z-index: 40;
  cursor: pointer;
}
.drawer-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.drawer-toggle svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.drawer-toggle:hover {
  color: var(--blue);
  border-color: var(--blue);
}
.drawer-toggle:focus-visible,
.drawer-close:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
@media (max-width: 760px) {
  .topbar > div:nth-child(2) {
    min-width: 0;
  }
}

/* Marca del boton de menu */
.drawer-toggle {
  background: #031c2b;
  border-color: transparent;
  color: #35b7df;
  border-radius: 5px;
}
.drawer-toggle:hover {
  background: #073b4d;
  border-color: transparent;
  color: #58c8ec;
}
.drawer-letter {
  font-size: 11px;
  letter-spacing: -0.04em;
  font-weight: 800;
  line-height: 1;
}

/* Escaneo local y busqueda de clientes */
.scan-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}
.scan-body {
  padding: 0 24px 22px;
}
.scan-hint {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 12px;
}
.scan-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.scan-card button:disabled,
.scan-crop-dialog button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.scan-status {
  font-size: 13px;
  margin: 16px 0 0;
  line-height: 1.5;
}
.scan-status.warning,
.client-lookup .warning {
  color: #bd6a00;
  background: rgba(239, 156, 36, 0.12);
  border-radius: 7px;
  padding: 12px;
}
.camera-panel {
  margin-top: 16px;
}
.camera-panel video {
  display: block;
  width: 100%;
  max-height: 65vh;
  background: #052e3d;
  object-fit: contain;
  border-radius: 9px;
  margin-bottom: 12px;
}
.document-preview {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
}
.document-preview img {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef2f4;
}
.document-preview p {
  font-size: 12px;
  line-height: 1.6;
}
.scan-review {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.scan-review h3 {
  margin: 0;
  font-size: 17px;
}
.scan-review > p {
  font-size: 12px;
  color: var(--muted);
}
.scan-review-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.scan-review-field {
  min-width: 0;
}
.scan-field-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}
.scan-field-tools button {
  padding: 6px 9px;
  font-size: 12px;
}
.scan-field-tools button.listening {
  background: #b42318;
  color: white;
}
.scan-candidate {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.scan-review-field label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.scan-review-field input,
.scan-review-field select,
.crop-coordinates input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px;
  background: var(--input);
  color: var(--ink);
  min-width: 0;
}
.scan-review-field small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
  margin: 5px 0;
}
.read-zone {
  padding: 4px 0;
}
.scan-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin: 0 10px 16px 0;
}
.scan-remember input {
  accent-color: var(--green);
}
.scan-crop-dialog {
  width: min(800px, 95vw);
  max-height: 92vh;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  background: var(--surface);
  color: var(--ink);
}
.scan-crop-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
.crop-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.crop-heading h2 {
  font-size: 18px;
  margin: 0;
}
.scan-crop-dialog p {
  font-size: 12px;
  line-height: 1.5;
}
.crop-surface {
  max-height: 52vh;
  overflow: auto;
  background: #dbe3e7;
}
.crop-surface canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none;
  cursor: crosshair;
}
.crop-coordinates {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.crop-coordinates label {
  font-size: 10px;
}
.crop-coordinates input {
  margin-top: 4px;
}
.with-lookup input {
  padding-right: 104px;
}
.search-icon {
  display: block;
  margin: auto;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.client-lookup {
  margin: 18px 24px 0;
}
.client-lookup > p {
  margin: 0 0 10px;
  font-size: 13px;
}
.lookup-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.lookup-result {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input);
  color: var(--ink);
  padding: 12px;
  text-align: left;
  cursor: pointer;
}
.lookup-result:hover {
  border-color: var(--blue);
}
.lookup-result strong,
.lookup-result small {
  display: block;
  overflow-wrap: anywhere;
}
.lookup-result strong {
  font-size: 12px;
}
.lookup-result small {
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
}
#lookupMoreBtn {
  margin-top: 10px;
}
body.dark .scan-status.warning,
body.dark .client-lookup .warning {
  color: #ffbc5c;
}
@media (max-width: 1050px) {
  .scan-review-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .scan-body {
    padding: 0 16px 18px;
  }
  .document-preview {
    grid-template-columns: 1fr;
  }
  .document-preview img {
    max-height: 260px;
  }
  .scan-actions > button {
    flex: 1;
    min-height: 44px;
  }
  .scan-review-fields {
    grid-template-columns: 1fr;
  }
  .scan-review-field input,
  .scan-review-field select {
    font-size: 16px;
  }
  .client-lookup {
    margin: 16px 16px 0;
  }
  .lookup-results {
    grid-template-columns: 1fr;
  }
  .crop-coordinates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .scan-crop-dialog {
    padding: 14px;
  }
}

.scan-raw {
  margin: 12px 0;
  font-size: 12px;
  color: var(--muted);
}
.scan-raw summary {
  cursor: pointer;
}
.scan-raw textarea {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  resize: vertical;
  background: var(--input);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.scan-review-field .scan-doubt {
  color: #bd6a00;
  font-weight: 700;
}
body.dark .scan-review-field .scan-doubt {
  color: #ffbc5c;
}

/* Estado de sincronizacion y camaras */
.sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sync-pill.offline {
  color: #bd6a00;
}
.sync-pill.offline i {
  background: var(--amber);
}
.cloud-conflict {
  margin: 16px 24px;
  padding: 14px;
  border: 1px solid var(--amber);
  border-radius: 8px;
  background: rgba(239, 156, 36, 0.1);
  font-size: 12px;
}
.cloud-conflict p {
  margin: 0 0 10px;
}
.cloud-conflict button {
  margin: 0 8px 6px 0;
  font-size: 12px;
}
.camera-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  font-size: 12px;
}
.camera-selector select {
  max-width: 100%;
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px;
  background: var(--input);
  color: var(--ink);
}
@media (max-width: 1050px) {
  .sync-pill {
    display: inline-flex;
    max-width: 100%;
    font-size: 10px;
  }
}
@media (max-width: 760px) {
  .sync-pill {
    flex-basis: 100%;
    justify-content: flex-end;
    margin-right: 0;
  }
  .cloud-conflict {
    margin: 14px 16px;
  }
}

#recoveredDrafts label {
  display: block;
  margin-bottom: 10px;
}
#recoveredDraftSelect {
  display: block;
  margin-top: 6px;
  width: 100%;
  padding: 8px;
  background: var(--input);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.scan-mode {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  max-width: 280px;
  font-size: 13px;
}
.scan-mode select {
  width: 100%;
  min-height: 40px;
}

.workflow-card {
  margin: 24px 0;
  border: 1px solid var(--border, #d8e2e5);
  border-radius: 18px;
  padding: 20px;
}
.workflow-card details + details {
  border-top: 1px solid #879ca344;
  margin-top: 18px;
  padding-top: 18px;
}
.workflow-card summary {
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
}
.workflow-card p {
  font-size: 14px;
  line-height: 1.5;
}
.workflow-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.workflow-list article {
  border: 1px solid #879ca355;
  border-radius: 12px;
  padding: 14px;
  overflow-wrap: anywhere;
}
.workflow-list article > button {
  margin-left: 14px;
}
.workflow-actions,
.seller-tools,
.records-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.seller-tools {
  padding: 0 24px 16px;
}
.records-pagination {
  padding: 12px 20px;
}
.workflow-dialog {
  background: var(--card, #fff);
  color: inherit;
  border: 1px solid #879ca3;
  border-radius: 16px;
  padding: 24px;
  width: min(900px, 94vw);
  max-height: 90dvh;
  overflow: auto;
}
.workflow-dialog::backdrop {
  background: #00141cb3;
}
.workflow-dialog label {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}
.workflow-dialog input,
.workflow-dialog select {
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
}
.workflow-dialog table {
  min-width: 580px;
}
.changed-value td {
  background: #e6a03920;
}
.validation-hint {
  display: block;
  color: #bd6900;
  margin-top: 7px;
  font-size: 12px;
}
.needs-review {
  outline: 1px solid #d18a27;
}
.field-proof,
.scan-proof {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.proof-button {
  border: 1px solid #81979b;
  border-radius: 8px;
  background: #fff;
  padding: 4px;
  cursor: zoom-in;
  max-width: 100%;
  color: #132f38;
}
.proof-button img {
  display: block;
  max-width: 100%;
  width: 230px;
  height: 64px;
  object-fit: contain;
}
.proof-button span {
  display: block;
  font-size: 11px;
}
.image-dialog img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  margin: 16px auto;
}
.dark .workflow-dialog {
  background: #102a34;
  color: #e8f4f6;
}
.dark .validation-hint {
  color: #f4b761;
}
.records-toolbar select {
  min-height: 38px;
  max-width: 100%;
}
@media (max-width: 600px) {
  .workflow-dialog {
    padding: 16px;
    width: 95vw;
  }
  .workflow-actions button,
  .form-action-buttons button {
    flex: 1 1 180px;
  }
  .form-action-buttons {
    flex-wrap: wrap;
  }
  .workflow-card {
    padding: 14px;
  }
  .proof-button img {
    width: 170px;
  }
  .seller-tools {
    padding: 0 16px 12px;
  }
}
/* Review remains visible until the next save or edit. */
.save-review {
  margin: 16px 24px;
  padding: 18px;
  border: 1px solid #cb8b19;
  border-radius: 12px;
  background: #fff7df;
  color: #59400e;
}
.save-review[hidden],
.field-suggestion[hidden] {
  display: none;
}
.save-review ul {
  padding-left: 20px;
  margin: 10px 0;
}
.save-review .link-btn {
  text-align: left;
  white-space: normal;
  color: inherit;
}
.field-suggestion {
  display: block;
  margin-top: 8px;
  text-align: left;
  white-space: normal;
}
.dark .save-review {
  background: #382d15;
  color: #ffe3a1;
}
.sidebar-footer {
  margin-top: auto;
  padding-top: 18px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.sidebar-footer #logoutBtn {
  width: 100%;
}
#recoveredDrafts label {
  display: block;
  margin-bottom: 10px;
}
#recoveredDraftSelect {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--input, #fff);
  color: var(--ink);
}
.capture-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 14px 24px;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.capture-context strong {
  color: var(--blue);
}
.capture-context[hidden] {
  display: none;
}
.capture-options,
.record-filters {
  margin: 16px 24px;
  font-size: 13px;
}
.capture-options summary,
.record-filters summary {
  cursor: pointer;
  font-weight: 700;
  padding: 8px 0;
}
.capture-options label {
  display: block;
  margin: 12px 0;
}
.capture-options textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input, #fff);
  color: var(--ink);
  resize: vertical;
}
.source-hint {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 5px;
  white-space: normal;
}
.source-hint[hidden] {
  display: none;
}
.review-badge {
  display: block;
  width: fit-content;
  margin-top: 5px;
  padding: 3px 7px;
  background: #fff0ce;
  color: #725000;
  border-radius: 5px;
  font-size: 10px;
}
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.filter-grid label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.filter-grid input,
.filter-grid select {
  width: 100%;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--input, #fff);
  color: var(--ink);
}
.summary-table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}
.summary-table td,
.summary-table th {
  overflow-wrap: anywhere;
  white-space: normal;
  padding: 9px;
  text-align: left;
}
#versionsDialog details {
  margin: 15px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
}
#versionsDialog summary {
  cursor: pointer;
  overflow-wrap: anywhere;
}
#recordsBody td:last-child .link-btn {
  display: inline-flex;
  text-align: left;
  margin: 0;
  white-space: nowrap;
}
#voiceStatus {
  padding: 12px;
  background: rgba(0, 122, 188, 0.08);
  border-radius: 8px;
}
#archiveSyncStatus {
  color: var(--muted);
}
@media (max-width: 760px) {
  .capture-context,
  .capture-options,
  .record-filters {
    margin-left: 16px;
    margin-right: 16px;
  }
  .summary-table td,
  .summary-table th {
    font-size: 11px;
    padding: 6px;
  }
}
.edit-orange,
.delete-red {
  border: 0;
  border-radius: 8px;
  padding: 11px 18px;
  font-weight: 700;
  cursor: pointer;
}
.edit-orange {
  background: #f39a23;
  color: #332008;
}
.edit-orange:hover {
  background: #e88b13;
}
.delete-red {
  background: #ba2525;
  color: white;
}
.delete-red:hover {
  background: #991d1d;
}
.location-notice {
  margin: 16px 24px;
  padding: 18px;
  border: 1px solid var(--blue);
  border-radius: 10px;
  background: rgba(0, 122, 188, 0.07);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.location-notice[hidden] {
  display: none;
}
.location-notice p {
  margin: 0 0 12px;
}
#selectedClientActions strong {
  flex-basis: 100%;
}
#recordScope {
  max-width: 100%;
}
@media (max-width: 760px) {
  .location-notice {
    margin: 14px 16px;
  }
  .history-actions {
    flex-wrap: wrap;
  }
}
/* Keyboard navigation and reduced motion apply to all capture tools. */
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 3px solid #d36a00;
  outline-offset: 3px;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 10000;
  background: #fff;
  color: #123945;
  padding: 12px;
  border: 2px solid #007d7b;
}
.skip-link:focus {
  top: 12px;
}
#workspaceTools button,
#templateColumns button {
  min-height: 40px;
}
#workspaceTools > label {
  display: block;
  margin: 12px 0;
}
#workspaceTools > details {
  margin: 14px 0;
}
#templateColumns > div {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
#templateColumns label {
  flex: 1;
}
#bulkEditDialog input,
#bulkEditDialog select {
  display: block;
  width: 100%;
  margin: 12px 0;
}
.workflow-dialog {
  max-height: 85vh;
  overflow: auto;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* Action colors are shared by Archivador and Control de pagos T. */
body :is(#copyRecordsBtn, #payCopy, #paySaveCopy, .action-copy, .record-copy-client) {
  background: #eee7fb;
  color: #57358c;
  border: 1px solid #c9b6e8;
}
body :is(#downloadBtn, #downloadPaymentsBtn, .history-action.download, .action-download) {
  background: #e1f3e9;
  color: #176440;
  border: 1px solid #9bcfb1;
}
body
  :is(#saveHistoryBtn, #archiveRecordsBtn, #payArchive, #paySaveHistory, #paySave, .action-save) {
  background: #007f76;
  color: #fff;
  border: 1px solid #007268;
}
body :is(#newExcelBtn, #payNewFile, .history-action.view, .action-open, #bulkAttachBtn) {
  background: #e1f1fb;
  color: #005e91;
  border: 1px solid #97c9e5;
}
body :is(.history-action.rename, .record-edit, .action-edit, #payPending, #savePendingBtn) {
  background: #e6ecfb;
  color: #344f91;
  border: 1px solid #b4c3e7;
}
body :is(.history-action.delete, .record-trash, .action-delete) {
  background: #fbe9ea;
  color: #9b3440;
  border: 1px solid #e5b4bb;
}
body
  :is(
    #copyRecordsBtn,
    #payCopy,
    #downloadBtn,
    #downloadPaymentsBtn,
    #saveHistoryBtn,
    #archiveRecordsBtn,
    #payArchive,
    #paySaveHistory,
    #payNewFile,
    #newExcelBtn,
    .history-action,
    .payment-row-actions button
  ):not(:disabled):hover {
  filter: brightness(0.94);
}
body
  :is(
    #copyRecordsBtn,
    #payCopy,
    #downloadBtn,
    #downloadPaymentsBtn,
    #payArchive,
    #paySaveHistory,
    #payNewFile,
    #paySaveCopy,
    #paySave,
    .payment-row-actions button
  ):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#payNewFileDialog {
  width: min(540px, calc(100% - 32px));
}
#payNewFileForm {
  display: grid;
  gap: 16px;
}
#payNewFileForm h2,
#payNewFileForm p {
  margin: 0;
}
#payNewFileForm p {
  line-height: 1.5;
}
#payNewFileName {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input);
  color: var(--ink);
  font-size: 16px;
}
#payNewFileError:not(:empty) {
  color: var(--blue);
  font-weight: 600;
}
#payNewFileForm .workflow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Compact capture controls and a consistent corporate palette. */
#fields .field {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  min-width: 0;
}
#fields .field > label {
  color: var(--blue);
  font-weight: 700;
}
#fields .cell-tag {
  background: #e5f3f9;
  color: #146584;
  border-radius: 5px;
  padding: 3px 6px;
}
#fields .input-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
}
#fields .input-wrap input {
  padding-right: 10px;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
}
#fields .input-wrap .tools {
  position: static;
  transform: none;
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
}
#fields .tools .tool-btn {
  width: 32px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 6px;
}
#fields .lookup-client {
  color: #0076a8;
  background: #e9f5fc;
}
#fields .voice {
  color: #7650a1;
  background: #f2ecfb;
}
#fields .clear-field {
  color: #b44956;
  background: #fbeef0;
}
#fields .tool-btn:hover {
  filter: brightness(0.95);
}
#fields .voice.listening {
  color: #fff;
  background: #7650a1;
}
#fields .field-help {
  color: var(--muted);
  line-height: 1.45;
}
#fields #nombre {
  color: var(--blue);
  font-weight: 600;
}
#clientForm .form-title h2 {
  color: var(--blue);
}
body.dark #fields .cell-tag {
  background: #173d4c;
  color: #b1dfed;
}
@media (max-width: 760px) {
  #fields .field {
    padding: 10px;
  }
  #fields .input-wrap input {
    font-size: 16px;
  }
}

.archive-additional {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}
.archive-additional > summary {
  cursor: pointer;
  color: var(--blue);
  font-weight: 700;
}
.archive-additional > p {
  color: var(--muted);
  font-size: 13px;
}
.archive-additional > .fields {
  padding: 0;
  margin-top: 16px;
}
#payFields select.payment-paid,
#payRows td.payment-paid {
  color: #187440;
  font-weight: 700;
  background: #e5f6ec;
}
#payFields select.payment-due,
#payRows td.payment-due {
  color: #a12e40;
  font-weight: 700;
  background: #fcebee;
}
#pay_pago option[value='PAGO'] {
  color: #187440;
  background: #e5f6ec;
}
#pay_pago option[value='FTA PAGAR'] {
  color: #a12e40;
  background: #fcebee;
}

/* Independent payment workspace. */
.draft-dismissed,
.payment-hide-archive {
  display: none !important;
}
.payment-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 20px;
}
.payment-filters label,
.payment-file-info {
  display: grid;
  gap: 8px;
}
.payment-input-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.payment-field-tools {
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
}
.payment-field-tools .tool-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 40px;
  padding: 6px;
  color: var(--blue);
  border-radius: 7px;
}
.payment-field-tools [data-pay-clear] {
  color: #b44956;
}
.payment-field-tools svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#paymentPanel {
  min-width: 0;
}
#paymentPanel .records-card table {
  min-width: 780px;
}
#paymentPanel .payment-row-actions {
  min-width: 190px;
}
#paymentPanel .payment-row-actions button {
  margin: 3px;
}
#paymentPanel .payment-row-actions small {
  display: block;
}

/* Keep each policy's actions in a single compact toolbar below its data. */
:is(#recordsBody, #payRows) > tr {
  position: relative;
}
:is(#recordsBody, #payRows) > tr > td {
  padding: 10px 8px 62px;
  vertical-align: top;
}
:is(#recordsBody, #payRows) > tr > :is(.record-row-actions, .payment-row-actions) {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 6px 8px;
  border-top: 0;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
}
:is(.record-row-actions, .payment-row-actions) > * {
  flex-shrink: 0;
}
#recordsBody .record-row-actions button,
#paymentPanel .payment-row-actions button {
  margin: 0;
  padding: 6px 9px;
  white-space: nowrap;
}
.records-card table:has(#recordsBody) thead th:last-child,
.records-card table:has(#payRows) thead th:last-child {
  display: none;
}
#paymentPanel input:not([type='checkbox']),
#paymentPanel textarea,
#paymentPanel select {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--white);
}
#payForm > p {
  line-height: 1.6;
}
#payFormStatus:not(:empty) {
  padding: 12px;
  background: var(--bg);
  border-radius: 8px;
}
#payFields .listening {
  outline: 2px solid var(--amber);
}
#paymentPanel .history-actions {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}
#paymentPanel .history-actions button {
  white-space: normal;
  padding: 9px 12px;
}
#paymentPanel .workflow-list article {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
#paymentPanel .workflow-list article strong {
  flex-basis: 100%;
  overflow-wrap: anywhere;
}
#paymentPanel .history-item strong {
  overflow-wrap: anywhere;
}
#paymentPanel .records-pagination {
  padding: 16px;
}
#paymentPanel .workflow-list {
  max-height: 400px;
  overflow: auto;
}
#paymentPanel .form-actions > p {
  max-width: 360px;
}
#paymentPanel .records-head {
  gap: 16px;
}
@media (max-width: 700px) {
  .payment-filters {
    grid-template-columns: 1fr;
  }
  #paymentPanel .records-head {
    flex-wrap: wrap;
  }
}
.excel-import-dialog {
  width: min(1100px, 94vw);
  max-width: 94vw;
}
.excel-import-mapping {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.excel-import-mapping label {
  display: grid;
  gap: 6px;
  color: #17658b;
  font-weight: 600;
}
#excelImportPreview {
  max-height: 320px;
  overflow: auto;
  margin: 14px 0;
}
#excelImportErrors {
  max-height: 240px;
  overflow: auto;
}
#importClientsExcel {
  margin-left: auto;
  color: #17658b;
  background: #e5f3ff;
  border-color: #b7dff5;
}
.multi-text-card {
  border: 2px solid #a9d9ec;
  background: linear-gradient(110deg, #eff9ff, #f4fcf4);
}
.multi-text-dialog {
  width: min(1180px, 94vw);
  max-width: 94vw;
}
.multi-text-dialog label {
  display: grid;
  gap: 7px;
  margin: 12px 0;
}
.multi-text-dialog textarea {
  width: 100%;
}
.multi-review-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 20px;
}
.multi-review-layout aside {
  background: #f2f7fb;
  padding: 14px;
  border-radius: 12px;
  min-width: 0;
}
#multiSource {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
}
#multiPhoto {
  max-width: 100%;
  max-height: 550px;
  object-fit: contain;
}
.multi-text-dialog .multi-confirm {
  display: flex;
  align-items: center;
  background: #edf8ef;
  padding: 14px;
  border-radius: 10px;
}
.multi-confirm input {
  width: auto;
}
@media (max-width: 700px) {
  .multi-review-layout {
    grid-template-columns: 1fr;
  }
  .multi-text-card .section-heading {
    flex-wrap: wrap;
  }
}
/* Personal table views and client follow-up. */
.page-excluded,
.column-excluded {
  display: none !important;
}
.view-pager,
.column-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
}
.column-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.column-options input {
  width: auto;
}
.visible-columns {
  margin: 12px 0;
}
.followup-dialog {
  width: min(960px, 94vw);
}
.followup-dialog > details {
  margin: 18px 0;
  padding: 12px;
  border: 1px solid #b9c8d5;
  border-radius: 10px;
}
.followup-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  margin: 15px 0;
}
.followup-form label {
  display: grid;
  gap: 5px;
  flex: 1 1 180px;
  min-width: 0;
}
.followup-form p {
  flex-basis: 100%;
}
.followup-form input,
.followup-form select {
  width: 100%;
  min-width: 0;
}
.profile-grid {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(0, 2fr);
  gap: 8px 16px;
}
.profile-grid dt {
  font-size: 12px;
  font-weight: bold;
}
.profile-grid dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.followup-item {
  padding: 12px;
  margin: 10px 0;
  border: 1px solid #b9c8d5;
  border-radius: 8px;
  overflow-wrap: anywhere;
}
.followup-dialog .table-wrap {
  max-width: 100%;
}
#amountTranscript {
  display: block;
  width: 100%;
}

/* Shared interior palette: accent surfaces and readable dark-mode controls. */
:root {
  --accent-surface: linear-gradient(115deg, #edf8ff, #eaf9f2);
  --action-gradient: linear-gradient(135deg, #006a94, #007969);
}
.app .primary,
.app .nav-item.active,
.workflow-dialog .primary {
  background: var(--action-gradient);
  color: #fff;
}
.app .form-title,
.app .records-head,
.app .connection-notice,
.app .multi-text-card {
  background: var(--accent-surface);
}
.app .form-title,
.app .records-head {
  border-radius: 10px 10px 0 0;
}
.app .stats article {
  border-top: 3px solid var(--blue);
}
.app .stats article:nth-child(2) {
  border-top-color: var(--green);
}
body.dark {
  color-scheme: dark;
  --ink: #edf7fa;
  --muted: #b6cbd4;
  --blue: #76d7ff;
  --green: #64e1b4;
  --amber: #ffd080;
  --line: #426370;
  --bg: #081b25;
  --surface: #102c38;
  --white: #102c38;
  --card: #102c38;
  --border: #426370;
  --input: #0a2230;
  --accent-surface: linear-gradient(115deg, #103950, #104236);
}
body.dark input:not([type='checkbox']):not([type='radio']):not([type='range']),
body.dark select,
body.dark textarea,
body.dark option {
  background: var(--input);
  color: var(--ink);
  border-color: var(--line);
  caret-color: var(--green);
}
body.dark input::placeholder,
body.dark textarea::placeholder {
  color: #aec6d0;
  opacity: 1;
}
body.dark input:disabled,
body.dark select:disabled {
  color: var(--muted);
  opacity: 1;
}
body.dark :is(input, select, textarea, button, summary, a):focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
body.dark :is(.workflow-dialog, .multi-review-layout aside, .proof-button) {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
body.dark .multi-text-card,
body.dark .identity-notice,
body.dark .multi-text-dialog .multi-confirm {
  background: var(--accent-surface);
  color: var(--ink);
  border-color: var(--green);
}
body.dark :is(.excel-import-mapping label, #fields .field > label) {
  color: var(--blue);
}
body.dark :is(.demo-note, .field-help, .cell-tag, .search, .tool-btn) {
  color: var(--muted);
}
body.dark .mobile-brand .login-brand-text {
  color: var(--ink) !important;
}
body.dark .brand-light .brand-mark {
  background: #123f50;
  color: var(--blue);
}
body.dark :is(.blue-bg, .heading-icon, .avatar, #importClientsExcel, #fields .lookup-client) {
  background: #143e54;
  color: #8cdeff;
  border-color: #426b7c;
}
body.dark .green-bg {
  background: #124737;
  color: #8aefc4;
}
body.dark .amber-bg {
  background: #4a3716;
  color: #ffdb9c;
}
body.dark #fields .voice {
  background: #382750;
  color: #dfc4ff;
}
body.dark #fields .voice.listening {
  background: #674197;
  color: #fff;
}
body.dark #fields .clear-field {
  background: #512a37;
  color: #ffbdcc;
}
body.dark th {
  background: #123849;
  color: #c6e8f3;
}
body.dark td {
  border-color: var(--line);
}
body.dark tr:hover td:not(.payment-paid):not(.payment-due) {
  background: #163c46;
}
body.dark :is(.primary, .nav-item.active, .theme-toggle) {
  background: var(--action-gradient);
  color: #fff;
}
body.dark :is(.duplicate-warning, .review-badge) {
  background: #463818;
  color: #ffe0a4;
}
body.dark .login-error,
body.dark .history-action.delete {
  color: #ffb2be;
}
body.dark #payFields select.payment-paid,
body.dark #payRows td.payment-paid,
body.dark #pay_pago option[value='PAGO'] {
  background: #153e30;
  color: #9ff0c3;
}
body.dark #payFields select.payment-due,
body.dark #payRows td.payment-due,
body.dark #pay_pago option[value='FTA PAGAR'] {
  background: #4d2632;
  color: #ffc0cf;
}
/* Import decisions remain visible until their cloud-backed review is acknowledged. */
.import-review-notice {
  margin: 12px 0;
  padding: 14px;
  border: 2px solid #b85a00;
  border-radius: 12px;
  background: #fff0d8;
  color: #713500;
  white-space: normal;
  min-width: 240px;
}
.import-review-notice summary {
  cursor: pointer;
  font-weight: 700;
}
.import-review-notice table {
  color: inherit;
}
body.dark .import-review-notice {
  background: #39270f;
  color: #ffd495;
  border-color: #ffb453;
}
#excelDuplicateDialog {
  width: min(900px, 94vw);
}
.import-review-badge {
  display: block;
  margin-top: 8px;
  background: #fff0d8;
  color: #713500;
  border: 2px solid #b85a00;
  border-radius: 8px;
  padding: 8px;
  font-weight: 700;
}
body.dark .import-review-badge {
  background: #39270f;
  color: #ffd495;
  border-color: #ffb453;
}
#importReviewDialog {
  width: min(900px, 94vw);
}
:is(#importReviewDialog, #excelDuplicateDialog, #selectedClientImportReview) table {
  min-width: 0;
}
:is(#importReviewDialog, #excelDuplicateDialog, #selectedClientImportReview) td {
  white-space: normal;
  overflow-wrap: anywhere;
}
#workReadiness {
  overflow-wrap: anywhere;
}
#localRecoveryDialog,
#localBackupDialog,
#backupClientRestore {
  width: min(850px, 94vw);
}
#localRecoveryDialog pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 240px;
  overflow-y: auto;
}

/* Deeper neutral surfaces let lighting stand out without dimming text. */
body.dark {
  --bg: #030507;
  --surface: #0a0e13;
  --white: #0a0e13;
  --card: #0a0e13;
  --input: #06090e;
  --line: #34404d;
  --border: #34404d;
  --ink: #edf2f8;
  --muted: #b0bdce;
  --accent-surface: linear-gradient(115deg, #101923, #0c1c18);
  background: var(--bg);
}
body.dark :is(.sidebar, .login-panel, .login-screen) {
  background: #05080c;
}
body.dark :is(.connection-notice, .history-card, .scan-card, .workflow-card) {
  background: var(--surface);
}
body.dark th {
  background: #10161e;
}
body.dark td {
  border-color: #28323e;
}
body.dark tr:hover td:not(.payment-paid):not(.payment-due) {
  background: #141d28;
}
body.dark .lighting-preview {
  box-shadow: 0 12px 32px #0008;
}
.save-preview {
  width: min(860px, calc(100vw - 28px));
  max-height: 90dvh;
  border-radius: 22px;
  padding: 26px;
}
.save-preview::backdrop {
  background: rgb(10 20 38 / 65%);
  backdrop-filter: blur(5px);
}
.save-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0;
}
.save-preview-grid > div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  min-width: 0;
}
.save-preview-grid dt {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
}
.save-preview-grid dd {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 16px;
}
.save-preview-grid small {
  display: block;
  margin-top: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.save-preview-grid .save-preview-changed {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 6%, var(--white));
}
.save-preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  position: sticky;
  bottom: -26px;
  padding: 18px 0;
  background: var(--white);
  border-top: 1px solid var(--line);
}
.save-preview-actions button {
  min-height: 48px;
  padding-inline: 24px;
}
@media (max-width: 560px) {
  .save-preview-grid {
    grid-template-columns: 1fr;
  }
  .save-preview-actions button {
    flex: 1;
    padding-inline: 12px;
  }
}
/* The shared client editor never reuses the current capture form. */
.collaboration-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.collaboration-fields label {
  display: grid;
  gap: 6px;
}
.collaboration-fields input,
.collaboration-fields select {
  width: 100%;
  min-width: 0;
}
#collaborativeClientEditor {
  width: min(900px, 94vw);
  max-height: 88vh;
  overflow: auto;
}
#sharedArchiveViewer {
  width: min(1200px, 94vw);
  max-height: 88vh;
  overflow: auto;
}
@media (max-width: 600px) {
  .collaboration-fields {
    grid-template-columns: 1fr;
  }
}
.records-card .table-wrap:has(#recordsBody) {
  max-height: 65vh;
  overflow: auto;
  scrollbar-width: auto;
  scrollbar-color: #1673ac #dce9f3;
  scrollbar-gutter: stable;
}
.records-card .table-wrap:has(#recordsBody) thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}
#recordsBody .record-select {
  width: 22px;
  height: 22px;
  cursor: pointer;
}
#recordsBody tr {
  cursor: pointer;
}
#recordsBody .recent-poliza,
#recordsBody .recent-nombre,
#recordsBody .recent-fecha {
  font-family: 'Outfit', 'Segoe UI', sans-serif !important;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.015em;
}
#recordsBody .recent-poliza {
  color: #006e65;
  font-size: 0.95rem !important;
}
#recordsBody .recent-fecha {
  color: #305cad;
  font-size: 0.9rem !important;
  font-variant-numeric: tabular-nums;
}
#recordsBody .recent-nombre {
  color: #69508b;
  font-size: 0.85rem !important;
}
body.dark #recordsBody .recent-poliza {
  color: #74dfcf;
}
body.dark #recordsBody .recent-nombre {
  color: #d5b9ff;
}
body.dark #recordsBody .recent-fecha {
  color: #a7c5ff;
}
#multiDeferredPanel {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #91b8d2;
  border-radius: 12px;
}
#multiDeferredPanel button {
  margin: 8px;
}
.multi-groups-panel {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.multi-groups-panel > summary {
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 8px 0;
}
.multi-groups-panel > summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  border-radius: 4px;
}
.multi-unregistered {
  color: #b42338;
  font-weight: 700;
}
body.dark .multi-unregistered {
  color: #ff9ba8;
}
#multiRemove {
  margin: 10px 0;
  color: #b42338;
}
body.dark #multiRemove {
  color: #ff9ba8;
}

/* Near-black dark theme and Firebase account panel. */
body.dark {
  --bg: #030405;
  --surface: #080a0c;
  --surface-2: #0d1013;
  --input: #090c0f;
  --line: #1b2025;
  --text: #f3f5f7;
  --muted: #a4adb6;
  background: #030405 !important;
  color: #f3f5f7;
}
body.dark :is(.app, main, .sidebar, .topbar, .form-card, .records-card, .import-card,
  .stats article, .login-screen, .login-panel, .connection-notice, .history-card,
  .scan-card, .workflow-card, .siged-panel, .multi-text-card, .multi-text-dialog,
  .lighting-preview, .sidebar-footer) {
  background-color: #030405 !important;
  color: #f3f5f7;
}
body.dark :is(.form-card, .records-card, .import-card, .stats article, .connection-notice,
  .history-card, .scan-card, .workflow-card, .siged-panel, .multi-text-card) {
  border-color: #1b2025;
}
body.dark :is(input:not([type='checkbox']):not([type='radio']):not([type='range']), select, textarea,
  .secondary, .search input, .tool-btn, .workflow-dialog, .nav-item:not(.active)) {
  background-color: #090c0f;
  color: #f3f5f7;
}
body.dark .workflow-dialog {
  background: #080a0c;
  border-color: #29313a;
  color: #f3f5f7;
}
body.dark .workflow-dialog::backdrop {
  background: rgb(0 0 0 / 88%);
}
.firebase-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: min(88vh, 900px);
  overflow: auto;
}
.firebase-dialog-heading,
.firebase-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.firebase-dialog-heading h2 { margin: 4px 0 14px; }
.firebase-info-card {
  margin: 12px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.firebase-info-card h3 { margin: 0 0 10px; }
.firebase-info-card p,
.firebase-info-card li { line-height: 1.55; }
.firebase-info-card ol { padding-left: 22px; }
.firebase-info-card code { overflow-wrap: anywhere; }
.firebase-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  text-decoration: none;
}
.firebase-nav-item { width: 100%; text-align: left; }
.sidebar-footer { display: grid; gap: 10px; }
@media (max-width: 600px) {
  .firebase-dialog { padding: 16px; }
  .firebase-actions { align-items: stretch; flex-direction: column; }
  .firebase-link { justify-content: center; }
}
.multi-groups-panel article {
  display: grid;
  gap: 8px;
}
.multi-groups-panel article button {
  justify-self: start;
}