@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Editor detallado de horarios */
.schedule-editor,
.schedule-editor-section,
.schedule-days-list,
.schedule-block-list,
.schedule-rotation-sequence {
  display: grid;
}

.schedule-editor {
  gap: 20px;
  padding: 18px;
}

.schedule-editor-loading {
  display: flex;
  min-height: 220px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--app-muted);
}

.schedule-type-step {
  display: grid;
  width: min(560px, 100%);
  gap: 18px;
  padding: 20px 18px;
}

.schedule-type-step header {
  display: grid;
  gap: 4px;
}

.schedule-type-step header small {
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 700;
}

.schedule-type-step header h3,
.schedule-type-step header p {
  margin: 0;
}

.schedule-type-step header h3 {
  color: var(--app-text);
  font-size: 20px;
  font-weight: 500;
}

.schedule-type-step header p {
  color: var(--app-muted);
  font-size: 13px;
}

.schedule-type-field {
  width: min(420px, 100%);
}

.schedule-type-field select {
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-control);
}

.schedule-type-step .schedule-editor-actions {
  justify-content: flex-start;
}
.schedule-main-fields {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.4fr) auto;
  gap: 14px;
  align-items: end;
}

.schedule-active-field {
  min-height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
}

.schedule-editor-section {
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--app-border);
}

.schedule-editor-section-header {
  display: flex;
  min-width: 0;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.schedule-editor-section-header small {
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 700;
}

.schedule-editor-section-header h3 {
  margin: 3px 0 0;
  color: var(--app-text);
  font-size: 18px;
  font-weight: 500;
}

.schedule-total-output {
  display: grid;
  justify-items: end;
  color: var(--app-muted);
}

.schedule-total-output strong {
  color: var(--teal-dark);
  font-size: 22px;
}

.schedule-days-list {
  gap: 0;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-panel);
  overflow: hidden;
}

.schedule-day-card {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  min-width: 0;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-surface-strong);
}

.schedule-day-card:last-child {
  border-bottom: 0;
}

.schedule-day-card > header {
  display: flex;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  background: var(--app-surface-soft);
  border-right: 1px solid var(--app-border);
}

.schedule-day-card:not(.is-active) {
  opacity: 0.62;
}

.schedule-day-total {
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.schedule-block-list {
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
}

.schedule-block-list > p,
.schedule-rotation-sequence > p {
  margin: 0;
  color: var(--app-muted);
  font-size: 13px;
}

.schedule-block-row {
  display: grid;
  grid-template-columns: minmax(100px, 140px) 116px 18px 116px 36px;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.schedule-block-row > span {
  text-align: center;
}

.schedule-block-row select,
.schedule-block-row input,
.schedule-total-input input,
.schedule-rotation-fields input,
.schedule-rotation-add select,
.schedule-flexible-grid input {
  width: 100%;
  height: 36px;
  padding: 0 9px;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-control);
}

.schedule-remove-action {
  width: 36px;
  height: 36px;
}

.schedule-add-row {
  display: inline-flex;
  width: max-content;
  min-height: 32px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  color: var(--teal-dark);
  background: transparent;
  border: 1px dashed var(--teal);
  border-radius: var(--app-radius-control);
  cursor: pointer;
}

.schedule-add-row:hover {
  color: var(--app-text);
  background: rgba(98, 194, 196, 0.14);
}

.schedule-add-row .button-icon {
  width: 16px;
  height: 16px;
}

.schedule-total-input {
  width: 150px;
}

.schedule-total-input > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.schedule-flexible-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(110px, 1fr));
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-panel);
  overflow: hidden;
}

.schedule-flexible-grid .schedule-day-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 12px;
  border-right: 1px solid var(--app-border);
  border-bottom: 0;
}

.schedule-flexible-grid .schedule-day-card:last-child {
  border-right: 0;
}

.schedule-editor-note {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
}

.schedule-rotation-fields,
.schedule-rotation-add {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}

.schedule-rotation-fields .field-group,
.schedule-rotation-add .field-group {
  width: min(260px, 100%);
}

.schedule-rotation-add .primary-modal-action {
  min-height: 40px;
}

.schedule-rotation-sequence {
  gap: 0;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-panel);
  overflow: hidden;
}

.schedule-rotation-sequence > article {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  min-height: 58px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--app-surface-strong);
  border-bottom: 1px solid var(--app-border);
}

.schedule-rotation-sequence > article:last-child {
  border-bottom: 0;
}

.schedule-rotation-sequence article > span:nth-child(2) {
  display: grid;
  gap: 3px;
}

.schedule-rotation-sequence article small {
  color: var(--app-muted);
}

.schedule-sequence-number {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--teal-dark);
  font-weight: 700;
  background: rgba(98, 194, 196, 0.13);
  border-radius: 50%;
}

.schedule-sequence-actions,
.schedule-editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.schedule-editor-actions {
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--app-border);
}

.schedule-editor-actions .primary-modal-action,
.schedule-rotation-add .primary-modal-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.schedule-editor-actions .button-icon,
.schedule-rotation-add .button-icon {
  width: 17px;
  height: 17px;
}

@media (max-width: 1100px) {
  .schedule-main-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-active-field {
    width: max-content;
  }

  .schedule-flexible-grid {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    overflow-x: auto;
  }

  .schedule-flexible-grid .schedule-day-card {
    border-bottom: 1px solid var(--app-border);
  }
}

@media (max-width: 760px) {
  .schedule-editor {
    padding: 12px;
  }

  .schedule-main-fields {
    grid-template-columns: 1fr;
  }


  .schedule-day-card {
    grid-template-columns: 1fr;
  }

  .schedule-day-card > header {
    border-right: 0;
    border-bottom: 1px solid var(--app-border);
  }

  .schedule-block-row {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(95px, 0.8fr) auto minmax(95px, 0.8fr) 36px;
  }

  .schedule-flexible-grid {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }

  .schedule-editor-section-header {
    align-items: start;
    flex-direction: column;
  }

  .schedule-total-output {
    justify-items: start;
  }
}

@media (max-width: 520px) {
  .schedule-block-row {
    grid-template-columns: minmax(0, 1fr) 36px;
  }

  .schedule-block-row > span {
    display: none;
  }

  .schedule-block-row select {
    grid-column: 1 / -1;
  }

  .schedule-block-row input {
    grid-column: 1;
  }

  .schedule-block-row .schedule-remove-action {
    grid-column: 2;
    grid-row: 2 / span 2;
  }

  .schedule-add-row {
    max-width: 100%;
  }

  .schedule-flexible-grid {
    grid-template-columns: 1fr;
  }

  .schedule-rotation-sequence > article {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .schedule-sequence-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .schedule-editor-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }
}

@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Pildoras semanticas: pareja fondo/texto estable en ambos temas. */
  --app-status-success-bg: #d8f6e7;
  --app-status-success-text: #075f3d;
  --app-status-success-border: #43b982;
  --app-status-warning-bg: #fff0c1;
  --app-status-warning-text: #704e00;
  --app-status-warning-border: #d8a62e;
  --app-status-danger-bg: #ffe2e0;
  --app-status-danger-text: #8e211b;
  --app-status-danger-border: #de726a;
  --app-status-info-bg: #eaf3ff;
  --app-status-info-text: #26618f;
  --app-status-info-border: #8ab9e8;
  --panel-width: 468px;
  --viewport-height: 100svh;
  /* Identidad GP 2026. Ver docs/identidad-visual-gp-2026.md. */
  --gp-primary: #62c2c4;
  --gp-secondary: #394b58;
  --gp-tertiary: #5dcbac;
  --gp-contrast: #24676f;
  --app-radius-control: 10px;
  --app-font-small: .8125rem;
  --app-table-font-size: 14px;
  --app-table-caption-size: 11px;
  --app-table-cell-padding: 10px 12px;
  --app-font-caption: .75rem;
  --app-on-primary: #062423;
  --app-radius-compact: 8px;
  --app-radius-panel: 14px;
  --app-radius-dialog: 16px;
  --app-form-control-radius: var(--app-radius-control);
  --app-warning-accent: #e8ad2c;
  --gold: var(--gp-tertiary);
  --teal: var(--gp-primary);
  --teal-dark: var(--gp-contrast);
  --ink: var(--gp-secondary);
  --muted: #526977;
  --border: #d6e3e7;
  --danger: #d01818;
  --danger-bg: #fff1f1;
  --danger-border: #efb5b5;
}

@supports not (height: 100svh) {
  :root {
    --viewport-height: 100vh;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  font-family: "Roboto", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: #253235;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
}

/* app-ui.js captura el scroll antes de aplicar el bloqueo. :has(backdrop)
   cambiaba el contenedor desplazable antes de esa captura y lo devolvia a cero. */
html.app-modal-open,
body.app-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.app-modal-open {
  /* El body fijo conserva todo el contenido trasladado, tambien con scroll largo. */
  height: auto;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

#app,
.auth-shell,
.loading-shell {
  width: 100%;
  min-height: var(--viewport-height);
}

.auth-shell,
.loading-shell {
  display: flex;
}

.auth-shell {
  --app-text: var(--ink);
  --app-muted: var(--muted);
  --app-border: var(--border);
  --app-surface: #fff;
  --app-surface-strong: #fff;
  --modal-bg: #fff;
  --modal-border: var(--border);
  --modal-overlay: rgba(20, 28, 30, 0.54);
}

.brand-panel {
  position: relative;
  z-index: 1;
  width: var(--panel-width);
  min-width: 0;
  min-height: var(--viewport-height);
  flex: 0 0 var(--panel-width);
  background: linear-gradient(165deg, #fff 60%, #edf7f7);
  border-right: 4px solid var(--teal);
}

.brand-content,
.loading-content {
  width: 100%;
  min-height: var(--viewport-height);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 108px 43px 42px;
}

.brand-logo-img {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.brand-content {
  padding-top: 82px;
}

.brand-content .brand-logo-img {
  width: 275px;
  margin-bottom: 42px;
}

.auth-brand-logo-frame {
  position: relative;
  width: 300px;
  max-width: 100%;
  aspect-ratio: 640 / 384;
  margin: 0 auto 42px;
  overflow: hidden;
}

.brand-content .auth-brand-logo-frame .brand-logo-img {
  content: image-set(url("/images/gp-logo-acceso-2026.png") 1x, url("/images/gp-logo-acceso-2026-2x.png") 2x, url("/images/gp-logo-acceso-2026-3x.png") 3x);
  position: static;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
}

.loading-content {
  justify-content: center;
  gap: 64px;
}

.loading-content .brand-logo-img {
  width: 260px;
}

.visual-panel {
  flex: 1;
  min-height: var(--viewport-height);
  background-image:
    linear-gradient(115deg, rgba(35, 54, 68, 0.98) 0%, rgba(57, 75, 88, 0.94) 55%, rgba(36, 103, 111, 0.88) 100%),
    radial-gradient(ellipse at top right, rgba(98, 194, 196, 0.22), transparent 65%),
    url("/images/fondo-laboral.jpg");
  background-position: center;
  background-size: cover;
  color: #fff;
}

.visual-content {
  min-height: var(--viewport-height);
  display: flex;
  align-items: center;
  padding: 76px clamp(48px, 8vw, 116px) 68px 50px;
}

.visual-copy {
  width: min(760px, 100%);
}

.form-kicker,
.hero-kicker {
  margin: 0;
  color: #62c2c4;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

.login-form {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 16px;
}

.login-form .form-kicker {
  margin-bottom: 8px;
}

.auth-shell.is-registration {
  --panel-width: 560px;
}

.auth-shell.is-registration .brand-content {
  padding-top: 34px;
  padding-bottom: 34px;
}

.auth-shell.is-registration .brand-logo-img {
  width: 200px;
  margin-bottom: 22px;
}

.auth-shell.is-registration .auth-brand-logo-frame {
  width: 174px;
  margin-bottom: 26px;
}

.registration-form {
  gap: 12px;
}

.registration-heading {
  display: grid;
  gap: 5px;
  margin-bottom: 2px;
}

.registration-heading h1,
.registration-heading p {
  margin: 0;
}

.registration-heading h1 {
  color: var(--ink);
  font-size: 23px;
  font-weight: 500;
}

.registration-heading > p:last-child {
  color: var(--muted);
  font-size: 12px;
}

.registration-section-title {
  margin: 4px 0 -2px;
  padding-bottom: 6px;
  color: var(--teal-dark);
  border-bottom: 1px solid #d8eeee;
  font-size: 12px;
  font-weight: 700;
}

.registration-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 10px;
  margin-top: 4px;
}

.registration-form .field-group.has-error input {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(198, 59, 59, 0.12);
}

.field-group {
  display: grid;
  gap: 7px;
}

.field-group label {
  font-size: 12px;
  color: var(--muted);
}

.field-group input {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  color: var(--ink);
  background: #fbfdfd;
  border: 1px solid var(--border);
  border-radius: var(--app-radius-control);
  outline: none;
}

.field-group input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(98, 194, 196, 0.16);
}

.password-control {
  position: relative;
  display: grid;
}

.password-control input {
  padding-right: calc(var(--app-form-control-height, 40px) + 5px);
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 5px;
  width: calc(var(--app-form-control-height, 40px) - 10px);
  height: calc(var(--app-form-control-height, 40px) - 10px);
  padding: 0;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: var(--teal-dark);
  background: #effefe;
  border: 1px solid #b8e8e5;
  border-radius: var(--app-radius-control);
}

.password-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-alert {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 9px 13px;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  font-size: 13px;
}

.login-alert.is-info {
  color: #125c5a;
  background: #effdfc;
  border-color: #b8e8e5;
}

.recovery-form {
  display: grid;
  gap: 12px;
}

.development-code {
  padding: 10px 13px;
  color: #5c4914;
  background: #fff8df;
  border: 1px solid #ead48b;
  font-size: 13px;
}

.development-code strong {
  margin-left: 4px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.08em;
}

.login-legal-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 11px;
}

.login-legal-links button {
  padding: 0;
  color: var(--muted);
  background: none;
  border: 0;
  text-decoration: underline;
}

.login-legal-links button:hover,
.login-legal-links button:focus-visible {
  color: var(--teal-dark);
  text-decoration: underline;
}

.primary-action,
.secondary-action,
.outline-action {
  width: 100%;
  height: 46px;
  border-radius: var(--app-radius-control);
  border: 1px solid transparent;
  font-size: 15px;
}

.primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #0e2f31;
  background: var(--teal);
}

.primary-action:hover,
.primary-action:focus-visible {
  background: #83d0d2;
}

.primary-action.is-loading {
  cursor: wait;
  opacity: 0.86;
  background: var(--teal);
}

.primary-action.is-loading::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 2px solid rgba(14, 47, 49, 0.24);
  border-top-color: #0e2f31;
  border-radius: 999px;
  animation: spin 0.75s linear infinite;
}

.primary-action:disabled:not(.is-loading) {
  cursor: not-allowed;
  opacity: 0.65;
}

.secondary-action {
  color: #fff;
  background: #394b58;
}

.secondary-action:hover,
.secondary-action:focus-visible {
  background: #2b3d49;
}

.demo-entry-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.demo-entry-action .button-icon {
  width: 19px;
  height: 19px;
}

.outline-action {
  color: #344448;
  background: #eefafa;
  border-color: #b9d8dc;
}

.outline-action:hover,
.outline-action:focus-visible {
  background: #e0f5f5;
}

.text-action {
  width: fit-content;
  justify-self: center;
  padding: 0;
  color: var(--teal-dark);
  background: transparent;
  border: 0;
  font-size: 13px;
}

.text-action:hover,
.text-action:focus-visible {
  text-decoration: underline;
}

.login-separator {
  position: relative;
  height: 18px;
}

.login-separator::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  right: 0;
  height: 1px;
  background: #ebeff0;
}

.login-separator span {
  position: absolute;
  top: 4px;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1px solid #cfd9dc;
  border-radius: 999px;
}

.loading-bar {
  width: 350px;
  max-width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 12px;
  color: var(--gp-contrast);
  background: #e7f5f5;
  border: 1px solid var(--gp-primary);
}

.loading-bar span {
  min-width: 0;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loading-bar i {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 3px solid rgba(98, 194, 196, 0.25);
  border-top-color: var(--teal);
  animation: spin 0.85s linear infinite;
}

.loading-bar.is-error {
  height: auto;
  min-height: 42px;
  color: #a83f36;
  background: #fff0ee;
  border-color: #efb2ab;
}

.loading-retry {
  min-height: 28px;
  flex: 0 0 auto;
  padding: 0 12px;
  color: #fff;
  background: #12c6bf;
  border: 1px solid #0ba9a3;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}

.loading-retry:hover,
.loading-retry:focus-visible {
  background: #0faea8;
  outline: none;
}

.hero-title {
  max-width: 690px;
  margin: 24px 0 20px;
  color: #fff;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
}

.hero-text {
  max-width: 710px;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 17px;
  line-height: 1.55;
}

.hero-action {
  height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
  padding: 0 18px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(93, 220, 216, 0.72);
  border-radius: var(--app-radius-control);
  font-size: 14px;
  text-decoration: none;
}

.hero-action:hover,
.hero-action:focus-visible {
  background: rgba(98, 194, 196, 0.2);
}

.feature-grid {
  width: min(760px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  margin-top: 28px;
}

.feature-item {
  min-height: 116px;
  padding: 18px 17px 16px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-top: 4px solid var(--teal);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.14);
  overflow-wrap: anywhere;
}

.feature-item h2 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
}

.feature-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.45;
}

.login-mobile-downloads { display: none; }

.login-showcase { min-width: 0; background-image: radial-gradient(ellipse at 100% 0, rgba(98, 194, 196, .2), transparent 60%), linear-gradient(145deg, #243844, #394b58 60%, #28545b); }
.login-showcase .visual-content { padding: 40px clamp(28px, 4vw, 68px); }
.login-showcase-copy { width: min(800px, 100%); margin: 0 auto; }
.login-showcase-kicker { margin: 0; color: #9af0ec; font-size: 11px; font-weight: 700; letter-spacing: .09em; }
.login-showcase-title { margin: 20px 0 18px; color: #fff; font-size: clamp(32px, 3.2vw, 48px); font-weight: 500; line-height: 1.12; letter-spacing: -.025em; }
.login-showcase-text { max-width: 620px; margin: 0; color: #d9e7eb; font-size: 16px; line-height: 1.6; }
.login-showcase .hero-action { margin-top: 20px; }
.login-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.login-benefits article { min-width: 0; padding: 16px; border: 1px solid rgba(154, 240, 236, .24); border-radius: var(--app-radius-panel); background: linear-gradient(145deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .035)); box-shadow: 0 6px 18px rgba(15, 35, 45, .08); }
.login-benefit-symbol { display: grid; place-items: center; width: 36px; height: 36px; color: #9af0ec; background: rgba(98, 194, 196, .14); border: 1px solid rgba(154, 240, 236, .2); border-radius: var(--app-radius-control); }
.login-benefits .login-benefit-icon { width: 24px; height: 24px; color: #9af0ec; }
.login-benefits h2 { margin: 10px 0 6px; color: #fff; font-size: 14px; font-weight: 650; line-height: 1.35; }
.login-benefits p { margin: 0; color: #d9e7eb; font-size: 12px; line-height: 1.5; }


@media (max-width: 1100px) and (min-width: 901px) {
  .login-showcase .visual-content { padding: 32px 24px; }
  .login-benefits { gap: 12px; }
  .login-showcase-title { font-size: 34px; }
}

@media (min-width: 901px) and (max-height: 840px) {
  .login-showcase .visual-content { padding-top: 32px; padding-bottom: 32px; }
}

@media (max-width: 900px) {
  .login-mobile-downloads { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .login-mobile-download { display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--gp-contrast); font-size: 13px; text-decoration: none; }
  .login-mobile-download .button-icon { width: 18px; height: 18px; }
  .login-mobile-download:hover { text-decoration: underline; }
  .login-mobile-download:focus-visible { outline: 2px solid var(--gp-contrast); outline-offset: 3px; }
  .login-showcase .visual-content { min-height: auto; padding: 36px 24px; }
  .login-showcase-title { font-size: clamp(30px, 6vw, 38px); }
  .login-benefits { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 24px; }
  .login-benefits article { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 3px 12px; }
  .login-benefit-symbol { grid-row: span 2; }
  .login-benefits h2 { margin: 0; }
  .login-benefits p { grid-column: 2; }
}

.app-start-screen {
  min-height: var(--viewport-height);
  background: #f5f7f8;
}

.app-dashboard,
.app-modal-layer,
.gp-theme {
  --sidebar-width: 232px;
  --sidebar-collapsed-width: 76px;
  --app-bg: #f4f8f9;
  --app-bg-rgb: 244, 248, 249;
  --app-surface: #fff;
  --app-surface-strong: #fff;
  --app-surface-soft: rgba(255, 255, 255, 0.86);
  --app-text: #394b58;
  --app-muted: #607480;
  --app-border: #d6e3e7;
  --app-topbar: #394b58;
  --app-topbar-border: #2b3d49;
  --app-topbar-text: #fff;
  --app-sidebar: #f8fbfb;
  --app-sidebar-background: linear-gradient(160deg, #fff 0%, #e9f6f6 52%, #d5eeee 100%);
  --app-sidebar-hover: #edf6f7;
  --app-sidebar-active: #e4f4f5;
  --app-shadow: 0 10px 28px rgba(57, 75, 88, 0.08);
  --app-form-control-height: 40px;
  --app-form-control-radius: var(--app-radius-control);
  --app-form-action-height: 40px;
  --modal-bg: var(--app-surface);
  --modal-border: var(--app-border);
  --modal-overlay: rgba(20, 28, 30, 0.44);
  --app-logout-text: #263b49;
  --app-logout-border: var(--gp-contrast);
}

.app-dashboard,
.app-modal-layer {
  min-height: var(--viewport-height);
  display: flex;
  color: var(--app-text);
  background: var(--app-bg);
}

.app-dashboard.theme-dark,
.app-modal-layer.theme-dark,
.gp-theme[data-theme="dark"] {
  --teal-dark: var(--gp-primary);
  --app-bg: #17232c;
  --app-bg-rgb: 23, 35, 44;
  --app-surface: #21313d;
  --app-surface-strong: #293d4b;
  --app-surface-soft: rgba(33, 49, 61, 0.88);
  --app-text: #eef6f6;
  --app-muted: #a8babd;
  --app-border: #3d5666;
  --app-topbar: #131f28;
  --app-topbar-border: #26363a;
  --app-topbar-text: #f5fbfb;
  --app-sidebar: #1b2a35;
  --app-sidebar-background: linear-gradient(160deg, #1b2a35 0%, #223d48 58%, #28545b 100%);
  --app-sidebar-hover: #293d4b;
  --app-sidebar-active: rgba(98, 194, 196, 0.19);
  --app-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
  --modal-overlay: rgba(0, 0, 0, 0.66);
  --app-logout-text: #f4ffff;
  --app-logout-border: #9af0ec;
  color-scheme: dark;
}

.app-modal-layer {
  display: contents;
  --app-accent: var(--teal-dark);
}

/* El texto de acento necesita mas luminosidad sobre superficies oscuras. */
.theme-dark,
[data-theme="dark"],
.kiosk-shell.is-dark {
  --teal-dark: var(--gp-primary);
}

/* Solo tratamiento de la imagen: las cajas de marca conservan sus medidas. */
.technical-brand .brand-logo-img,
[data-theme="dark"] .forced-password-card .brand-logo-img {
  background-color: #fff;
  border-radius: var(--app-radius-control);
}

.auth-shell :is(.field-group input, .primary-action, .secondary-action, .outline-action, .password-toggle),
.auth-shell .feature-item {
  border-radius: var(--app-radius-control);
}

.auth-shell .feature-item {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(98, 194, 196, 0.25);
  border-top-color: var(--gp-primary);
}

.auth-shell .login-form .form-kicker {
  color: var(--gp-contrast);
}

.app-icon,
.topbar-icon,
.topbar-user-icon,
.metric-icon,
.table-sort-icon,
.notice-svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-sidebar {
  position: sticky;
  top: 0;
  z-index: 60;
  width: var(--sidebar-width);
  height: var(--viewport-height);
  flex: 0 0 var(--sidebar-width);
  display: flex;
  flex-direction: column;
  color: var(--app-text);
  background: var(--app-sidebar-background);
  border-right: 3px solid var(--gold);
  box-shadow: 2px 0 18px rgba(16, 37, 40, 0.08);
  transition: width var(--gp-motion-panel) ease-out, flex-basis var(--gp-motion-panel) ease-out;
  will-change: width, flex-basis;
}

/* En escritorio el menu no depende del limite inferior del contenido:
   sticky puede desplazarse al redondear el ultimo pixel del scroll. */
@media (min-width: 901px) {
  .app-dashboard {
    padding-inline-start: var(--sidebar-width);
    transition: padding-inline-start var(--gp-motion-panel) ease-out;
  }

  .app-dashboard:has(> .app-sidebar.is-collapsed) {
    padding-inline-start: var(--sidebar-collapsed-width);
  }

  .app-sidebar {
    position: fixed;
    left: 0;
  }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .app-dashboard { transition: none; }
}

.app-dashboard:not(.theme-dark) .app-sidebar {
  --app-muted: #566c78;
}

.sidebar-brand {
  position: relative;
  min-height: 0;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--app-border);
  transition: none;
}

.theme-dark .sidebar-brand {
  --teal-dark: var(--gp-contrast);
  color: var(--gp-secondary);
  background: #fff;
}

.theme-dark .sidebar-brand .sidebar-mobile-close {
  color: var(--gp-contrast);
  background: #edf6f7;
  border-color: #d6e3e7;
}

.theme-dark .sidebar-brand .sidebar-mobile-close:hover,
.theme-dark .sidebar-brand .sidebar-mobile-close:focus-visible {
  background: #e4f4f5;
  border-color: var(--gp-primary);
}

.sidebar-brand-action {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: grid;
  place-items: center;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
}

.sidebar-brand-action:hover,
.sidebar-brand-action:focus-visible {
  outline: none;
}

.sidebar-brand-action:focus-visible .brand-logo-img {
  filter: drop-shadow(0 0 0 rgba(98, 194, 196, 0.01)) drop-shadow(0 0 6px rgba(98, 194, 196, 0.45));
}

.sidebar-brand .brand-logo-img {
  position: relative;
  z-index: 1;
  width: 156px;
  height: 112px;
  object-fit: cover;
  max-width: 100%;
  content: image-set(url("/images/gp-logo-menu-2026.png") 1x, url("/images/gp-logo-menu-2026-2x.png") 2x, url("/images/gp-logo-menu-2026-3x.png") 3x);
  transition: transform var(--gp-motion-fast) ease-out, filter var(--gp-motion-fast) ease-out;
}

.sidebar-workspace-context {
  display: grid;
  gap: 7px;
  padding: 11px 10px 10px;
  border-bottom: 1px solid var(--app-border);
}

.sidebar-workspace-label {
  padding: 0 4px;
  color: var(--app-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.045em;
}

.sidebar-workspace-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-control);
}

.sidebar-workspace-option {
  position: relative;
  min-width: 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 7px;
  color: var(--app-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--app-radius-control);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--gp-motion-fast) ease, background var(--gp-motion-fast) ease, border-color var(--gp-motion-fast) ease, box-shadow var(--gp-motion-fast) ease;
}

.sidebar-workspace-option:hover,
.sidebar-workspace-option:focus-visible {
  color: var(--teal-dark);
  background: var(--app-sidebar-hover);
  border-color: var(--teal-border);
  outline: none;
}

.sidebar-workspace-option.is-active {
  color: var(--teal-dark);
  background: var(--app-sidebar-active);
  border-color: rgba(98, 194, 196, 0.8);
  box-shadow: 0 2px 8px rgba(26, 160, 154, 0.1);
}

.theme-dark .sidebar-workspace-option.is-active {
  color: #f4ffff;
  background: rgba(98, 194, 196, 0.28);
  border-color: #72e0db;
}

.sidebar-workspace-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-nav {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 10px 12px;
}

.app-nav-group {
  margin: 12px 10px 6px;
  color: var(--app-muted);
  font-size: 11px;
  line-height: 1;
}

.app-nav-link,
.sidebar-logout {
  position: relative;
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 13px;
  color: var(--app-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--app-radius-control);
  text-align: left;
  transition: background var(--gp-motion-fast) ease, border-color var(--gp-motion-fast) ease, color var(--gp-motion-fast) ease, transform var(--gp-motion-fast) ease, box-shadow var(--gp-motion-fast) ease;
}

.app-nav-link .app-icon,
.sidebar-logout .app-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  color: var(--app-muted);
  transition: color var(--gp-motion-fast) ease, transform var(--gp-motion-fast) ease;
}

.app-nav-link:hover,
.app-nav-link:focus-visible,
.app-nav-link.active {
  color: var(--teal-dark);
  background: var(--app-sidebar-active);
  border-color: rgba(98, 194, 196, 0.8);
  box-shadow: inset 4px 0 0 var(--teal);
}

.app-nav-link:hover .app-icon,
.app-nav-link:focus-visible .app-icon,
.app-nav-link.active .app-icon {
  color: var(--teal-dark);
}

.app-dashboard.theme-dark .app-nav-link.active,
.app-dashboard.theme-dark .app-nav-link.active:hover,
.app-dashboard.theme-dark .app-nav-link.active:focus-visible {
  color: #f4ffff;
  background: rgba(98, 194, 196, 0.28);
  border-color: #72e0db;
  box-shadow: inset 4px 0 0 #72e0db;
}

.app-dashboard.theme-dark .app-nav-link.active .app-icon {
  color: #9af0ec;
}

.sidebar-nav .app-nav-link[data-title="Permisos"] {
  display: none;
}

.app-nav-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  transform: translateX(0);
  transition: opacity var(--gp-motion-fast) ease-out, transform var(--gp-motion-fast) ease-out;
}

.sidebar-footer {
  padding: 10px 10px 12px;
  border-top: 1px solid var(--app-border);
}

.sidebar-logout {
  --app-logout-text: #263b49;
  --app-logout-border: var(--gp-contrast);
  color: var(--app-logout-text);
  background: transparent;
  border-color: var(--app-logout-border);
}

.theme-dark .sidebar-logout {
  --app-logout-text: #f4ffff;
  --app-logout-border: #9af0ec;
}

.sidebar-logout .app-icon {
  color: inherit;
}

.sidebar-logout:hover,
.sidebar-logout:focus-visible {
  background: var(--app-sidebar-active);
  border-color: var(--app-logout-border);
}

.sidebar-logout:focus-visible {
  outline: 2px solid var(--app-logout-border);
  outline-offset: 2px;
}

.app-sidebar.is-collapsed {
  width: var(--sidebar-collapsed-width);
  flex-basis: var(--sidebar-collapsed-width);
  overflow: visible;
  background: var(--app-sidebar-background);
  box-shadow: 4px 0 18px rgba(16, 37, 40, 0.1), inset -1px 0 0 rgba(98, 194, 196, 0.18);
}

.theme-dark .app-sidebar.is-collapsed {
  background: var(--app-sidebar-background);
  box-shadow: 4px 0 18px rgba(0, 0, 0, 0.22), inset -1px 0 0 rgba(98, 194, 196, 0.2);
}

.app-sidebar.is-collapsed .sidebar-brand {
  min-height: 118px;
  place-items: center;
  padding: 0 8px;
  overflow: hidden;
}

.app-sidebar.is-collapsed .sidebar-brand .brand-logo-img {
  width: 48px;
  height: auto;
  max-width: 100%;
  content: url("/images/gp-simbolo-2026.png");
  transform: translateY(0);
  filter: drop-shadow(0 4px 8px rgba(13, 60, 62, 0.12));
  cursor: pointer;
}

.app-sidebar.is-collapsed .sidebar-workspace-context {
  gap: 0;
  padding: 8px;
}

.app-sidebar.is-collapsed .sidebar-workspace-label,
.app-sidebar.is-collapsed .sidebar-workspace-option span {
  display: none;
}

.app-sidebar.is-collapsed .sidebar-workspace-switch {
  grid-template-columns: 1fr;
  width: 48px;
  box-sizing: border-box;
  margin: 0 auto;
}

.app-sidebar.is-collapsed .sidebar-workspace-option {
  width: 40px;
  min-height: 36px;
  padding: 0;
}

.app-sidebar.is-collapsed .sidebar-workspace-option:hover::after,
.app-sidebar.is-collapsed .sidebar-workspace-option:focus-visible::after {
  content: attr(data-title);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  z-index: 90;
  min-width: max-content;
  transform: translateY(-50%);
  padding: 8px 10px;
  color: var(--app-topbar-text);
  background: var(--app-topbar);
  border: 1px solid var(--app-topbar-border);
  border-radius: var(--app-radius-compact);
  box-shadow: var(--app-shadow);
  font-size: 13px;
  font-weight: 400;
  pointer-events: none;
}

.app-sidebar.is-collapsed .sidebar-nav {
  overflow: visible;
  padding: 12px 8px;
}

.app-sidebar.is-collapsed .app-nav-group {
  color: transparent;
  pointer-events: none;
}

.app-sidebar.is-collapsed .app-nav-text {
  width: 0;
  opacity: 0;
  transform: translateX(-8px);
}

.app-sidebar.is-collapsed .app-nav-link,
.app-sidebar.is-collapsed .sidebar-logout {
  width: 48px;
  min-height: 44px;
  justify-content: center;
  gap: 0;
  margin: 0 auto;
  padding: 0;
  border-radius: var(--app-radius-control);
}

.app-sidebar.is-collapsed .app-nav-link .app-icon,
.app-sidebar.is-collapsed .sidebar-logout .app-icon {
  width: 23px;
  height: 23px;
  flex-basis: 23px;
}

.app-sidebar.is-collapsed .app-nav-link:hover,
.app-sidebar.is-collapsed .app-nav-link:focus-visible,
.app-sidebar.is-collapsed .app-nav-link.active {
  border-color: rgba(98, 194, 196, 0.8);
  box-shadow: 0 0 0 1px rgba(98, 194, 196, 0.32), 0 10px 20px rgba(26, 160, 154, 0.16);
}

.app-sidebar.is-collapsed .sidebar-logout:hover,
.app-sidebar.is-collapsed .sidebar-logout:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(18, 58, 62, 0.1);
}

.app-sidebar.is-collapsed .app-nav-link:hover::after,
.app-sidebar.is-collapsed .app-nav-link:focus-visible::after,
.app-sidebar.is-collapsed .sidebar-logout:hover::after,
.app-sidebar.is-collapsed .sidebar-logout:focus-visible::after {
  content: attr(data-title);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  z-index: 90;
  min-width: max-content;
  transform: translateY(-50%);
  padding: 8px 10px;
  color: var(--app-topbar-text);
  background: var(--app-topbar);
  border: 1px solid var(--app-topbar-border);
  border-radius: var(--app-radius-compact);
  box-shadow: var(--app-shadow);
  font-size: 13px;
  pointer-events: none;
}

.app-workspace {
  min-width: 0;
  min-height: var(--viewport-height);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.help-center-host {
  position: sticky;
  top: 0;
  z-index: 55;
  min-width: 0;
  height: var(--viewport-height);
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .help-center-host.is-modal-help { inset: 0; width: 100%; background: var(--modal-overlay, rgba(15, 23, 42, .55)); }
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  color: var(--app-topbar-text);
  background: var(--app-topbar);
  border-bottom: 3px solid var(--gold);
}

.topbar-left,
.topbar-right {
  min-width: 0;
  display: flex;
  align-items: center;
}

.topbar-left {
  flex: 1;
  gap: 16px;
}

.topbar-right {
  gap: 14px;
  margin-left: auto;
}

.topbar-icon-button {
  flex-shrink: 0;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--app-radius-control);
}

.topbar-icon-button:hover,
.topbar-icon-button:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.topbar-icon {
  width: 24px;
  height: 24px;
}

.topbar-company {
  min-width: 0;
  max-width: min(560px, 44vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}

.topbar-company-selector {
  position: relative;
  min-width: 0;
  width: min(430px, 100%);
  display: flex;
  align-items: center;
}

.topbar-company-selector select {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 38px 0 14px;
  color: var(--app-topbar-text);
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(98, 194, 196, 0.38);
  border-radius: var(--app-radius-control);
  outline: none;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}

.topbar-company-selector select:hover,
.topbar-company-selector select:focus {
  border-color: var(--teal);
  background: rgba(98, 194, 196, 0.15);
  box-shadow: 0 0 0 2px rgba(98, 194, 196, 0.16);
}

.topbar-company-selector select option {
  color: #243536;
  background: #ffffff;
}

.theme-dark .topbar-company-selector select option {
  color: #eef8f8;
  background: #253438;
}

.theme-toggle {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 9px 0 12px;
  color: #dbe9eb;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--app-radius-control);
}

.theme-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-toggle-track {
  width: 42px;
  height: 22px;
  display: flex;
  align-items: center;
  padding: 2px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  transition: background var(--gp-motion-fast) ease;
}

.theme-toggle-thumb {
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
  transition: transform var(--gp-motion-fast) ease;
}

.theme-toggle input:checked + .theme-toggle-track {
  background: var(--teal);
  border-color: var(--teal);
}

.theme-toggle input:checked + .theme-toggle-track .theme-toggle-thumb {
  transform: translateX(18px);
}

.theme-toggle input:focus-visible + .theme-toggle-track {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.theme-toggle-text {
  font-size: 13px;
  white-space: nowrap;
}

.topbar-user {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: -18px;
  padding: 0 22px;
  background: rgba(0, 0, 0, 0.14);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--gp-motion-fast) ease, box-shadow var(--gp-motion-fast) ease;
  max-width: 260px;
}

.topbar-user:hover,
.topbar-user:focus-visible {
  background: rgba(98, 194, 196, 0.16);
  box-shadow: inset 0 -3px 0 var(--cyan);
  outline: none;
}

.topbar-user-icon {
  width: 30px;
  height: 30px;
}

.topbar-user span {
  min-width: 0;
  display: grid;
  line-height: 1.12;
}

.topbar-user strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-user small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-content {
  flex: 1;
  padding: 24px clamp(20px, 1.75vw, 24px) 32px;
  background-color: var(--app-bg);
  background-image:
    linear-gradient(135deg, rgba(var(--app-bg-rgb), 0.96), rgba(var(--app-bg-rgb), 0.91)),
    url("/images/fondo-laboral.jpg");
  background-position: center;
  background-size: cover;
}

.dashboard-title-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 14px;
}

.dashboard-title-row h1 {
  margin: 0;
  color: var(--app-text);
  font-size: 18px;
  font-weight: 400;
}

.dashboard-title-row p {
  display: none;
  margin: 0 0 0 auto;
  color: var(--app-muted);
  font-size: 13px;
  white-space: nowrap;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 26px;
}

.dashboard-heading-search-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
    min-width: 0;
    padding-bottom: 16px;
}

.dashboard-heading-search-row.is-single {
    grid-template-columns: 1fr;
}

.dashboard-heading-search-row .dashboard-title-row {
    min-width: 0;
    min-height: 54px;
    margin-bottom: 0;
}

.dashboard-global-search {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px 12px;
    min-width: 0;
    min-height: 54px;
    padding: 8px 10px;
}

.dashboard-global-search > label {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--app-text);
    font-weight: 700;
}

.dashboard-global-search > input {
    width: 100%;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-control);
    background: var(--app-surface-soft);
    color: var(--app-text);
    padding: 10px 12px;
}

.dashboard-global-search > input:focus {
    border-color: var(--teal-dark);
    outline: 2px solid color-mix(in srgb, var(--teal) 18%, transparent);
    outline-offset: 1px;
}

.dashboard-search-state {
    grid-column: 2;
    color: var(--app-muted);
    font-size: .8rem;
}

.dashboard-search-results {
    grid-column: 2;
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    left: 0;
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-panel);
    background: var(--app-surface);
    box-shadow: 0 14px 34px rgba(10, 35, 45, .18);
}

.dashboard-search-results > p {
    margin: 0;
    padding: 16px;
    color: var(--app-muted);
}

.dashboard-search-results > button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border: 0;
    border-bottom: 1px solid var(--app-border);
    background: transparent;
    color: var(--app-text);
    padding: 11px 13px;
    text-align: left;
    cursor: pointer;
}

.dashboard-search-results > button:last-child {
    border-bottom: 0;
}

.dashboard-search-results > button:hover,
.dashboard-search-results > button:focus-visible {
    background: color-mix(in srgb, var(--teal) 12%, transparent);
    outline: none;
}

.dashboard-search-results > button > span {
    display: grid;
    gap: 3px;
}

.dashboard-search-results > button > span:last-child {
    justify-items: end;
}

.dashboard-search-results small {
    color: var(--app-muted);
}

.dashboard-search-results em {
    width: max-content;
    border-radius: 999px;
    padding: 2px 7px;
    font-size: .68rem;
    font-style: normal;
    font-weight: 750;
}

.dashboard-search-results em.is-active {
    background: color-mix(in srgb, var(--success) 14%, transparent);
    color: var(--success);
}

.dashboard-search-results em.is-inactive {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
}

@media (max-width: 760px) {
    .dashboard-heading-search-row {
        grid-template-columns: 1fr;
    }

    .dashboard-global-search {
        grid-template-columns: 1fr;
    }

    .dashboard-search-state,
    .dashboard-search-results {
        grid-column: 1;
    }

    .dashboard-search-results {
        right: 12px;
        left: 12px;
    }
}

.metric-card,
.dashboard-panel {
  color: var(--app-text);
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-panel);
  box-shadow: var(--app-shadow);
  backdrop-filter: blur(4px);
}

.metric-card {
  min-height: 126px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  padding: 18px;
  border-color: var(--app-border);
  text-align: center;
}

.metric-action {
  cursor: pointer;
  transition: transform var(--gp-motion-fast) ease, border-color var(--gp-motion-fast) ease, box-shadow var(--gp-motion-fast) ease, background var(--gp-motion-fast) ease;
}

.metric-action:hover,
.metric-action:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(98, 194, 196, 0.92);
  background: var(--app-surface-strong);
  box-shadow: 0 28px 54px rgba(25, 45, 49, 0.18), 0 0 0 2px rgba(98, 194, 196, 0.16);
}

.theme-dark .metric-action:hover,
.theme-dark .metric-action:focus-visible {
  box-shadow: 0 28px 54px rgba(0, 0, 0, 0.38), 0 0 0 2px rgba(98, 194, 196, 0.2);
}

.metric-icon {
  width: 20px;
  height: 20px;
  color: var(--teal-dark);
  transition: color var(--gp-motion-fast) ease, transform var(--gp-motion-fast) ease;
}

.theme-dark .metric-icon {
  color: var(--teal);
}

.metric-action:hover .metric-icon,
.metric-action:focus-visible .metric-icon {
  color: var(--teal);
  transform: scale(1.15);
}

.metric-card strong {
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}

.metric-card span {
  color: var(--app-muted);
  font-size: 14px;
}

.metric-action.is-active {
  border-color: var(--teal);
  background: var(--app-surface-strong);
  box-shadow: 0 18px 38px rgba(25, 45, 49, 0.16), 0 0 0 2px rgba(98, 194, 196, 0.18);
}

.pending-entry-panel {
  margin: -8px 0 26px;
}

.pending-entry-list {
  margin: 0;
  padding: 0 20px;
  list-style: none;
}

.pending-entry-list li {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--app-border);
}

.pending-entry-list li:last-child {
  border-bottom: 0;
}

.pending-entry-person {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.pending-entry-person strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pending-entry-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--teal-dark);
}

.pending-entry-time {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pending-entry-time small {
  color: var(--app-muted);
}

.pending-entry-time time {
  min-width: 58px;
  padding: 6px 9px;
  color: var(--teal-dark);
  background: var(--teal-soft);
  border: 1px solid var(--teal-border);
  border-radius: var(--app-radius-compact);
  font-weight: 700;
  text-align: center;
}

.theme-dark .pending-entry-icon,
.theme-dark .pending-entry-time time {
  color: var(--teal);
}
.dashboard-panels {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(340px, 0.95fr);
  gap: 26px;
}

.dashboard-panel {
  overflow: hidden;
}

.dashboard-panel.dashboard-global-search {
  overflow: visible;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--app-text) 8%, transparent);
}

.panel-header {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  border-bottom: 1px solid var(--app-border);
}

.panel-header h2 {
  margin: 0;
  color: var(--app-text);
  font-size: 20px;
  font-weight: 600;
}

.panel-action {
  height: 36px;
  padding: 0 13px;
  color: #147b7a;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-control);
  font-size: 14px;
  transition: color var(--gp-motion-fast) ease, background var(--gp-motion-fast) ease, border-color var(--gp-motion-fast) ease, transform var(--gp-motion-fast) ease;
}

.theme-dark .panel-action {
  color: #91d5d6;
}

.panel-action:hover,
.panel-action:focus-visible {
  color: #053f3d;
  background: var(--teal);
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(23, 147, 142, 0.2);
}

.theme-dark .panel-action:hover,
.theme-dark .panel-action:focus-visible {
  color: #062423;
}

.dashboard-empty {
  margin: 0;
  padding: 28px 22px;
  color: var(--app-muted);
}

.notice-list,
.absence-list {
  margin: 0;
  padding: 0 22px;
  list-style: none;
}

.notice-list li,
.absence-list li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--app-border);
}

.notice-list li {
  display: block;
  padding: 0;
}

.notice-action {
  width: calc(100% + 24px);
  min-height: 90px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 -12px;
  padding: 20px 12px;
  color: var(--app-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--app-radius-control);
  text-align: left;
  transition: transform var(--gp-motion-fast) ease, background var(--gp-motion-fast) ease, border-color var(--gp-motion-fast) ease, box-shadow var(--gp-motion-fast) ease;
}

.notice-action:hover,
.notice-action:focus-visible {
  transform: translateX(6px);
  background: rgba(98, 194, 196, 0.13);
  border-color: rgba(98, 194, 196, 0.46);
  box-shadow: inset 4px 0 0 var(--teal), 0 12px 28px rgba(25, 45, 49, 0.08);
}

.dashboard-certification-employee {
  display: grid;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 12px;
  text-align: left;
  font: inherit;
  color: var(--app-text);
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-compact);
  overflow-wrap: anywhere;
  cursor: pointer;
}

.dashboard-certification-employee span {
  color: var(--app-muted);
  font-size: 12px;
}

.dashboard-certification-employee:hover,
.dashboard-certification-employee:focus-visible {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 10%, var(--app-surface));
}

.notice-list li:last-child,
.absence-list li:last-child {
  border-bottom: 0;
}

.notice-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.notice-icon.warning {
  color: #dc8b17;
  background: #fff4dc;
  border: 1px solid #f1cf92;
}

.notice-icon.info {
  color: #1e86c8;
  background: #e8f5ff;
  border: 1px solid #b9dbf1;
}

.notice-icon.teal {
  color: #0f9f9a;
  background: #e1f7f6;
  border: 1px solid #b9e8e5;
}

.theme-dark .notice-icon.warning {
  background: rgba(220, 139, 23, 0.16);
}

.theme-dark .notice-icon.info {
  background: rgba(30, 134, 200, 0.16);
}

.theme-dark .notice-icon.teal {
  background: rgba(15, 159, 154, 0.16);
}

.notice-svg {
  width: 20px;
  height: 20px;
}

.notice-list strong,
.absence-list strong {
  display: block;
  margin-bottom: 6px;
  color: var(--app-text);
  font-weight: 400;
}

.notice-list small,
.absence-list small {
  color: var(--app-muted);
  font-size: 14px;
}

.absence-list li {
  align-items: flex-start;
}

.absence-list time {
  width: 90px;
  flex: 0 0 90px;
  color: #0e8f8a;
  font-size: 13px;
  white-space: nowrap;
}

.theme-dark .absence-list time {
  color: #74e1dc;
}

.absence-today {
  padding: 22px;
  background: var(--teal-soft);
  border-bottom: 1px solid var(--teal-border);
}

.absence-today-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.absence-today h3 {
  margin: 0;
  color: var(--app-text);
  font-size: 17px;
  font-weight: 600;
}

.absence-today-count {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  min-height: 30px;
  padding: 2px 8px;
  border: 1px solid var(--teal-border);
  border-radius: var(--app-radius-compact);
  background: var(--app-surface);
  color: var(--app-text);
  font-size: 16px;
  font-weight: 600;
}

.absence-upcoming-title {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 500;
}

.absence-today p {
  margin: 14px 0 0;
  color: var(--app-text);
  font-size: 15px;
}

.absence-today ul {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.absence-today li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 14px;
  padding: 12px 14px;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--teal-border);
  border-radius: var(--app-radius-control);
  font-size: 15px;
}

.absence-person {
  display: grid;
  min-width: 0;
  gap: 4px;
  overflow-wrap: anywhere;
}

.absence-today li strong {
  font-weight: 600;
}

.absence-today li small {
  color: var(--app-muted);
  font-size: 13px;
}

.absence-time {
  color: var(--app-text);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.absence-upcoming-title {
  padding: 15px 22px 0;
}

.absence-upcoming-empty {
  margin: 0;
  padding: 10px 22px 18px;
  color: var(--app-muted);
  font-size: 12px;
}

.absence-panel .absence-list li {
  gap: 12px;
  padding: 12px 0;
  font-size: 13px;
}

.absence-panel .absence-list time {
  width: auto;
  flex: 0 1 100px;
  color: var(--app-muted);
  font-size: 12px;
  white-space: normal;
}

.absence-panel .absence-list li > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.absence-panel .absence-list strong {
  margin-bottom: 3px;
  font-size: 13px;
}

.absence-panel .absence-list small {
  font-size: 12px;
}

.absence-upcoming-time {
  display: block;
  margin-top: 3px;
}

.company-content {
  display: grid;
  align-content: start;
  gap: 20px;
}

.company-panels-layout {
  display: grid;
  grid-template-columns: minmax(0, 13fr) minmax(320px, 7fr);
  align-items: start;
  gap: 20px;
}

.company-title-row p {
  margin: 0 0 8px;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 500;
}

.theme-dark .company-title-row p {
  color: var(--teal);
}

.company-title-row h1 {
  margin: 0;
  color: var(--app-text);
  font-size: 24px;
  font-weight: 400;
}

.company-message {
  width: min(100%, 560px);
  padding: 11px 13px;
  color: var(--teal-dark);
  background: rgba(98, 194, 196, 0.12);
  border: 1px solid rgba(98, 194, 196, 0.38);
  border-radius: var(--app-radius-panel);
  font-size: 14px;
}

.company-message.is-error {
  color: #ad332c;
  background: #fff1f0;
  border-color: #f1b6b1;
}

.theme-dark .company-message.is-error {
  color: #ffc7c3;
  background: rgba(174, 58, 49, 0.18);
  border-color: rgba(255, 155, 148, 0.36);
}

.company-manager-panel {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
}

.company-manager-panel .panel-header,
.company-data-panel .panel-header {
  min-height: 74px;
}

.company-manager-panel .panel-header span,
.company-data-panel .panel-header span {
  display: grid;
  gap: 6px;
}

.company-manager-panel .panel-header small,
.company-data-panel .panel-header small {
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 500;
}

.theme-dark .company-manager-panel .panel-header small,
.theme-dark .company-data-panel .panel-header small {
  color: var(--teal);
}

.icon-action {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-control);
  transition: color var(--gp-motion-fast) ease, background var(--gp-motion-fast) ease, border-color var(--gp-motion-fast) ease, transform var(--gp-motion-fast) ease, box-shadow var(--gp-motion-fast) ease;
}

.button-icon {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.large-icon-action {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
}

.large-button-icon {
  width: 22px;
  height: 22px;
  stroke-width: 2.25;
}

.save-button-icon {
  width: 23px;
  height: 23px;
  stroke-width: 2;
}

.primary-icon-action {
  color: var(--app-on-primary);
  background: var(--teal);
  border-color: var(--teal);
}

.soft-icon-action {
  color: var(--teal-dark);
  background: var(--app-surface-strong);
}

.round-icon-action {
  border-radius: 999px;
}

.danger-icon-action {
  color: #b13a34;
  background: #fff3f2;
  border-color: #f0b9b4;
}

.theme-dark .danger-icon-action {
  color: #ffc3bf;
  background: rgba(156, 58, 52, 0.22);
  border-color: rgba(255, 147, 141, 0.42);
}

.icon-action:hover,
.icon-action:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(23, 147, 142, 0.16);
}

.icon-action:disabled {
  cursor: not-allowed;
  opacity: 0.44;
  transform: none;
  box-shadow: none;
}

.inline-spinner {
  width: 17px;
  height: 17px;
  display: inline-block;
  flex: 0 0 17px;
  border: 2px solid rgba(14, 47, 49, 0.24);
  border-top-color: #0e2f31;
  border-radius: 999px;
  animation: spin 0.75s linear infinite;
}

.theme-dark .inline-spinner {
  border-color: rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
}

.danger-modal-action .inline-spinner {
  border-color: rgba(255, 255, 255, 0.28);
  border-top-color: #ffffff;
}

.company-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 18px 22px;
  list-style: none;
}

.company-list-item {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-panel);
}

.company-list-item.is-active {
  background: rgba(98, 194, 196, 0.13);
  border-color: rgba(98, 194, 196, 0.68);
}

.company-select-action {
  min-width: 0;
  min-height: 38px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
  color: var(--app-text);
  background: transparent;
  border: 0;
  text-align: left;
}

.company-select-action span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-select-action strong,
.company-select-action small {
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}

.company-inline-editor {
  display: grid;
  gap: 16px;
  margin: 0 22px 22px;
  padding: 16px;
  background: rgba(98, 194, 196, 0.08);
  border: 1px solid rgba(98, 194, 196, 0.24);
  border-radius: var(--app-radius-panel);
}

.company-inline-editor h3 {
  margin: 0;
  color: var(--app-text);
  font-size: 16px;
  font-weight: 500;
}

.company-editor-grid {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) minmax(120px, 0.6fr);
  gap: 12px;
}

.company-data-panel {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
}

.company-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
  padding: 22px;
}

.company-content .field-group label {
  color: var(--app-muted);
}

.company-content .field-group input,
.company-content .field-group select {
  width: 100%;
  height: var(--app-form-control-height);
  padding: 0 11px;
  color: var(--app-text);
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  border-radius: var(--app-form-control-radius);
  outline: none;
}

.company-content .field-group input:focus,
.company-content .field-group select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(98, 194, 196, 0.16);
}

.company-form-grid .span-2 {
  grid-column: span 2;
}

.settings-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 20px;
}

.settings-title-row,
.settings-detail-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.settings-title-row span,
.settings-detail-title-row span {
  display: grid;
  gap: 6px;
}

.settings-title-row p,
.settings-detail-title-row p {
  margin: 0;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 500;
}

.theme-dark .settings-title-row p,
.theme-dark .settings-detail-title-row p {
  color: var(--teal);
}

.settings-title-row h1,
.settings-detail-title-row h1 {
  margin: 0;
  color: var(--app-text);
  font-size: 24px;
  font-weight: 400;
}

.settings-title-row strong,
.settings-detail-title-row small {
  margin-top: 28px;
  color: var(--app-muted);
  font-size: 13px;
  font-weight: 400;
}

.settings-detail-title-icon {
  flex: 0 0 42px;
}

.settings-detail-title-copy {
  min-width: 0;
}


.settings-card-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  align-items: stretch;
  gap: 16px;
}

.settings-group-card {
  grid-column: span 3;
  min-width: 0;
  min-height: 182px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 16px;
  padding: 18px;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-panel);
  text-align: left;
  box-shadow: 0 18px 38px rgba(18, 48, 48, 0.06);
  transition: transform var(--gp-motion-fast) ease, border-color var(--gp-motion-fast) ease, background var(--gp-motion-fast) ease, box-shadow var(--gp-motion-fast) ease;
}

.settings-group-card--grouped {
  grid-column: span 4;
}

.settings-group-card--sistema {
  grid-column: 1 / -1;
  min-height: 104px;
  grid-template-columns: minmax(280px, 0.45fr) minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  column-gap: 28px;
}

.settings-group-card--independent {
  grid-column: span 4;
  min-height: 104px;
  grid-template-rows: 1fr;
  align-self: start;
  align-items: center;
  cursor: pointer;
  box-shadow: none;
  transition: color var(--gp-motion-fast) ease, background var(--gp-motion-fast) ease, border-color var(--gp-motion-fast) ease, box-shadow var(--gp-motion-fast) ease;
}

.settings-group-card--sistema .settings-group-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
}

.settings-group-card-header {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.settings-card-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  color: var(--teal-dark);
  background: rgba(98, 194, 196, 0.15);
  border-radius: 999px;
}

.settings-icon {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-card-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.settings-card-copy strong {
  color: var(--app-text);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.25;
}

.settings-card-copy small {
  color: var(--app-muted);
  font-size: 13px;
  line-height: 1.45;
}

.settings-group-options {
  display: grid;
  align-content: start;
  gap: 7px;
}

.settings-group-link {
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  color: var(--app-text);
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-control);
  text-align: left;
  cursor: pointer;
  transition: color var(--gp-motion-fast) ease, background var(--gp-motion-fast) ease, border-color var(--gp-motion-fast) ease, box-shadow var(--gp-motion-fast) ease;
}

.settings-group-card--independent:hover,
.settings-group-card--independent:focus-visible,
.settings-group-link:hover,
.settings-group-link:focus-visible {
  color: var(--teal-dark);
  background: color-mix(in srgb, var(--gp-primary) 12%, var(--app-surface));
  border-color: var(--teal-dark);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--gp-secondary) 8%, transparent);
  transform: none;
}

.settings-group-card--independent:focus-visible,
.settings-group-link:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 2px; }

.settings-group-card--independent:is(:hover, :focus-visible) .settings-card-copy strong { color: var(--teal-dark); }

.settings-group-link span {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-group-link-icon,
.settings-group-arrow {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-group-link-icon {
  color: var(--teal-dark);
}

.settings-group-arrow {
  width: 16px;
  height: 16px;
  justify-self: end;
  color: var(--app-muted);
}

.settings-group-direct-arrow {
  width: 20px;
  height: 20px;
  margin-left: auto;
  flex: 0 0 20px;
  color: var(--teal-dark);
}

.settings-group-card--independent:hover .settings-group-arrow,
.settings-group-card--independent:focus-visible .settings-group-arrow,
.settings-group-link:hover .settings-group-arrow,
.settings-group-link:focus-visible .settings-group-arrow {
  color: var(--teal-dark);
}

.back-action {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  color: var(--teal-dark);
  background: rgba(98, 194, 196, 0.12);
  border: 1px solid rgba(98, 194, 196, 0.42);
  border-radius: var(--app-radius-control);
  transition: transform var(--gp-motion-fast) ease, background var(--gp-motion-fast) ease, border-color var(--gp-motion-fast) ease;
}

.back-action:hover,
.back-action:focus-visible {
  transform: translateX(-2px);
  background: rgba(98, 194, 196, 0.2);
  border-color: var(--teal);
}

.settings-detail-title-row {
  justify-content: flex-start;
}

.settings-detail-title-row small {
  margin: 0;
}

.settings-detail-panel {
  max-width: 920px;
}

.settings-detail-panel-wide {
  width: 100%;
  max-width: none;
}

.settings-detail-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-detail-heading > span:last-child {
  display: grid;
  gap: 5px;
}

.settings-detail-icon {
  flex: 0 0 42px;
}

.settings-detail-panel .panel-header small {
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 500;
}

.read-only-badge {
  padding: 6px 10px;
  color: #6f4b00;
  background: #fff4d7;
  border: 1px solid #f0ce78;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.theme-dark .read-only-badge {
  color: #ffd889;
  background: rgba(201, 148, 24, 0.18);
  border-color: rgba(255, 205, 105, 0.38);
}

.contract-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 360px) auto;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 0;
}

.contract-search {
  max-width: 360px;
}

/* Superficies compartidas: controles legibles en ambos temas. */
.contract-search input,
.schedule-editor .field-group input:not([type="checkbox"]):not([type="radio"]),
.schedule-editor .field-group select,
.schedule-editor .field-group textarea {
  color: var(--app-text);
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-control);
  font: inherit;
}
.contract-search input:focus-visible,
.schedule-editor .field-group :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--teal-dark);
  outline-offset: 2px;
  border-color: var(--gp-primary);
}
.contract-search input::placeholder,
.schedule-editor .field-group :is(input, textarea)::placeholder { color: var(--app-muted); opacity: 1; }
.schedule-editor .field-group :is(input, select, textarea):disabled,
.schedule-editor .field-group :is(input, textarea)[readonly] { color: var(--app-muted); background: var(--app-surface-soft); }

.contract-table-wrap {
  margin: 18px 22px 22px;
  overflow-x: auto;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-panel);
  background: var(--app-surface-soft);
}

.contract-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  color: var(--app-text);
  font-size: 14px;
}

.contract-table th,
.contract-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--app-border);
  text-align: left;
  vertical-align: middle;
}

.contract-table th {
  color: var(--app-muted);
  background: var(--app-surface-strong);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.table-sort-button {
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--app-radius-compact);
  font: inherit;
  font-weight: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.table-sort-button:hover,
.table-sort-button:focus-visible,
.table-sort-button.is-active {
  color: var(--teal-dark);
  background: rgba(98, 194, 196, 0.12);
  outline: none;
}

.table-sort-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

.contract-table tbody tr:last-child td {
  border-bottom: 0;
}

.contract-table tbody tr:hover {
  background: rgba(98, 194, 196, 0.08);
}

.contract-key {
  width: 80px;
  color: var(--teal-dark);
  font-weight: 600;
}

.contract-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.contract-status-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contract-status.is-active {
  color: var(--teal-dark);
  background: rgba(98, 194, 196, 0.13);
  border-color: rgba(98, 194, 196, 0.35);
}

.contract-status.is-active .contract-status-icon {
  stroke-width: 2.35;
}

.contract-status.is-active .contract-status-icon circle {
  fill: #16a34a;
  stroke: #16a34a;
}

.contract-status.is-active .contract-status-icon path {
  stroke: #ffffff;
}

.contract-status.is-inactive {
  color: #a83f36;
  background: rgba(220, 82, 70, 0.12);
  border-color: rgba(220, 82, 70, 0.28);
}

.contract-empty {
  margin: 0;
  padding: 22px;
  color: var(--app-muted);
  font-size: 14px;
}

.contract-empty-error {
  color: #b23d33;
  background: rgba(220, 82, 70, 0.08);
}

.theme-dark .contract-key {
  color: var(--teal);
}

.theme-dark .contract-table tbody tr:hover {
  background: rgba(98, 194, 196, 0.12);
}

.theme-dark .table-sort-button:hover,
.theme-dark .table-sort-button:focus-visible,
.theme-dark .table-sort-button.is-active {
  color: #7bf2ec;
}

.theme-dark .contract-status.is-active {
  color: #7bf2ec;
  background: rgba(98, 194, 196, 0.16);
}

.theme-dark .contract-status.is-inactive {
  color: #ffaaa3;
  background: rgba(220, 82, 70, 0.16);
}

.config-crud-toolbar,
.trace-toolbar {
  display: flex;
  align-items: end;
  gap: 14px;
  flex-wrap: wrap;
  padding: 18px 22px 0;
}

.config-crud-toolbar {
  justify-content: space-between;
}

.config-crud-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-detail-panel:has(.bulk-users-dialog) {
  min-width: 0;
  overflow: visible;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.trace-filter-action {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 1px;
}

.config-search {
  width: min(100%, 390px);
}

.config-crud-toolbar .field-group input,
.config-crud-toolbar .field-group select,
.trace-toolbar .field-group input,
.trace-toolbar .field-group select,
.config-modal-form .field-group input,
.config-modal-form .field-group select,
.config-modal-form .field-group textarea {
  width: 100%;
  height: 38px;
  padding: 0 11px;
  color: var(--app-text);
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-control);
  outline: none;
}

.config-modal-form .field-group textarea {
  min-height: 96px;
  padding-top: 10px;
  resize: vertical;
}

.config-modal-form .field-group input[type="color"] {
  height: 42px;
  padding: 4px;
  cursor: pointer;
}

.config-modal-form .field-group input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.config-modal-form .field-group input[type="color"]::-webkit-color-swatch {
  border: 0;
}

.config-crud-toolbar .field-group input:focus,
.config-crud-toolbar .field-group select:focus,
.trace-toolbar .field-group input:focus,
.trace-toolbar .field-group select:focus,
.config-modal-form .field-group input:focus,
.config-modal-form .field-group select:focus,
.config-modal-form .field-group textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(98, 194, 196, 0.16);
}

.config-table {
  min-width: 920px;
}

.calendar-toolbar-config {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px 22px 0;
}

.calendar-selector {
  width: min(100%, 420px);
}

.calendar-selector select {
  width: 100%;
  height: 40px;
  padding: 0 11px;
  color: var(--app-text);
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  outline: none;
}

.calendar-selector select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(98, 194, 196, 0.16);
}

.calendar-toolbar-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
}

.calendar-toolbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.calendar-sites-action,
.calendar-import-action {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.calendar-sites-action .button-icon,
.calendar-import-action .button-icon {
  width: 17px;
  height: 17px;
}

.calendar-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 22px 0;
  padding: 12px 14px;
  color: var(--app-text);
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-panel);
}

.calendar-soft-badge {
  padding: 5px 9px;
  color: var(--teal-dark);
  background: rgba(98, 194, 196, 0.13);
  border: 1px solid rgba(98, 194, 196, 0.35);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.calendar-site-assignment-modal {
  gap: 14px;
}

.calendar-site-assignment-help,
.calendar-site-assignment-empty {
  margin: 0;
  color: var(--app-muted);
  font-size: 13px;
}

.calendar-site-assignment-list {
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-panel);
}

.calendar-site-assignment-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(240px, 420px);
  align-items: center;
  gap: 18px;
  min-height: 58px;
  padding: 0 12px;
  border-bottom: 1px solid var(--app-border);
}

.calendar-site-assignment-row:last-child {
  border-bottom: 0;
}

.calendar-site-assignment-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--app-text);
}

.calendar-site-assignment-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-site-assignment-name small {
  color: var(--app-muted);
}

.calendar-site-assignment-control {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.calendar-site-assignment-control select {
  width: 100%;
  height: 40px;
  padding: 0 36px 0 11px;
  color: var(--app-text);
  background-color: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  outline: none;
}

.calendar-site-assignment-control select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(98, 194, 196, 0.16);
}

.calendar-site-assignment-control .inline-spinner {
  flex: 0 0 auto;
}

@media (max-width: 700px) {
  .calendar-site-assignment-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 10px 12px;
  }
}

.calendar-year-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px 22px 8px;
}

.calendar-year-header h3 {
  min-width: 84px;
  margin: 0;
  color: var(--app-text);
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

.calendar-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 10px 22px 0;
  color: var(--app-muted);
  font-size: 13px;
}

.calendar-status-bottom {
  margin: 14px 22px 0;
}

.calendar-year-legend {
  margin-top: 2px;
  padding-bottom: 18px;
}

.calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.calendar-legend i {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.legend-national {
  background: #dc2626;
}

.legend-regional {
  background: #2563eb;
}

.legend-local {
  background: #84cc16;
}

.calendar-year-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px;
  margin: 16px 22px 6px;
}

.calendar-year-month {
  min-width: 0;
  padding: 12px;
  background: #f8fbfb;
  border: 1px solid #cfdddf;
  border-radius: var(--app-radius-panel);
  box-shadow: 0 6px 16px rgba(31, 58, 62, 0.1);
}

.calendar-year-month h4 {
  margin: -12px -12px 10px;
  padding: 10px 12px;
  color: var(--app-text);
  background: #edf4f4;
  border-bottom: 1px solid #d5e2e3;
  border-radius: var(--app-radius-panel) var(--app-radius-panel) 0 0;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-transform: capitalize;
}

.calendar-mini-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.calendar-mini-weekday {
  display: grid;
  place-items: center;
  height: 24px;
  color: var(--app-muted);
  font-size: var(--app-font-caption);
  font-weight: 700;
  text-transform: uppercase;
}

.calendar-mini-weekday:nth-child(6),
.calendar-mini-weekday:nth-child(7) {
  background: #e7edef;
  border-radius: 3px;
}

.calendar-mini-day {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  aspect-ratio: auto;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--app-text);
  background: transparent;
  border: 0;
  border-radius: var(--app-radius-compact);
  font: inherit;
  font-size: var(--app-font-small);
  cursor: pointer;
  transition: background-color var(--gp-motion-fast) ease, box-shadow var(--gp-motion-fast) ease, color var(--gp-motion-fast) ease;
}

.calendar-mini-day:hover,
.calendar-mini-day:focus-visible {
  z-index: 1;
  background: rgba(98, 194, 196, 0.16);
  box-shadow: inset 0 0 0 2px var(--teal);
  outline: none;
}

.calendar-mini-day.is-weekend {
  color: var(--app-muted);
  background: #e7edef;
  box-shadow: inset 0 0 0 1px #dce5e7;
}

.calendar-mini-day.is-outside {
  visibility: hidden;
  pointer-events: none;
}

.calendar-mini-day.is-holiday-national {
  z-index: 1;
  color: #8f1111;
  background: #fecaca;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px #ef8d93;
}

.calendar-mini-day.is-holiday-regional {
  z-index: 1;
  color: #1e40af;
  background: #bfdbfe;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px #82b7f4;
}

.calendar-mini-day.is-holiday-local {
  z-index: 1;
  color: #3f6212;
  background: #e2f5a8;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px #afd85c;
}

.calendar-mini-day:is(.is-holiday-national, .is-holiday-regional, .is-holiday-local):hover,
.calendar-mini-day:is(.is-holiday-national, .is-holiday-regional, .is-holiday-local):focus-visible {
  box-shadow: inset 0 0 0 2px currentColor, 0 2px 5px rgba(31, 58, 62, 0.2);
}

.calendar-mini-day.is-today {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

.calendar-year-empty {
  margin: -8px 22px 22px;
  color: var(--app-muted);
  text-align: center;
}

.calendar-manager-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.calendar-manager-select {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-control);
  text-align: left;
  cursor: pointer;
}

.calendar-manager-select:hover,
.calendar-manager-select:focus-visible {
  border-color: var(--teal);
  box-shadow: 0 8px 20px rgba(98, 194, 196, 0.16);
  outline: none;
}

.calendar-manager-select span {
  display: grid;
  gap: 3px;
}

.calendar-manager-select small {
  color: var(--app-muted);
}

.calendar-manager-modal {
  display: grid;
  gap: 14px;
}

.calendar-manager-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.calendar-manager-toolbar p {
  margin: 0;
  color: var(--app-muted);
}

.calendar-manager-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.calendar-manager-item.is-active .calendar-manager-select {
  border-color: var(--teal);
  background: rgba(98, 194, 196, 0.1);
}

.calendar-manager-select em {
  margin-left: auto;
  color: var(--teal-dark);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.calendar-empty-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 22px 22px;
  padding: 18px;
  color: var(--app-text);
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-panel);
}

.calendar-date-fixed {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  color: var(--app-text);
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-compact);
  text-transform: capitalize;
}

.calendar-date-fixed small {
  color: var(--app-muted);
  font-size: 12px;
  text-transform: uppercase;
}

.calendar-icon-actions {
  justify-content: flex-end;
}

.theme-dark .calendar-soft-badge,
.theme-dark .calendar-manager-select em {
  color: #7bf2ec;
}

.theme-dark .calendar-year-month {
  background: #1b2528;
  border-color: #3b5054;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.34);
}

.theme-dark .calendar-year-month h4 {
  background: #26363a;
  border-bottom-color: #3b5054;
}

.theme-dark .calendar-mini-weekday:nth-child(6),
.theme-dark .calendar-mini-weekday:nth-child(7),
.theme-dark .calendar-mini-day.is-weekend {
  background: #2a393d;
}

.theme-dark .calendar-mini-day.is-weekend {
  box-shadow: inset 0 0 0 1px #3a4d51;
}

.theme-dark .calendar-mini-day.is-holiday-national {
  color: #fecaca;
  background: #8f2525;
  box-shadow: inset 0 0 0 1px #dc6363;
}

.theme-dark .calendar-mini-day.is-holiday-regional {
  color: #bfdbfe;
  background: #24499c;
  box-shadow: inset 0 0 0 1px #5d8fe2;
}

.theme-dark .calendar-mini-day.is-holiday-local {
  color: #d9f99d;
  background: #46681b;
  box-shadow: inset 0 0 0 1px #88ae48;
}

@media (max-width: 1200px) {
  .calendar-year-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  }
}

@media (max-width: 900px) {
  .calendar-toolbar-config {
    align-items: stretch;
  }

  .calendar-toolbar-actions {
    margin-left: 0;
    width: 100%;
  }

  .calendar-year-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  }
}

@media (max-width: 560px) {
  .calendar-summary-row,
  .calendar-year-header,
  .calendar-legend,
  .calendar-year-grid {
    margin-left: 14px;
    margin-right: 14px;
  }

  .calendar-toolbar-config {
    padding-left: 14px;
    padding-right: 14px;
  }

  .calendar-selector {
    width: calc(100% - 104px);
  }

  .calendar-toolbar-actions {
    flex-wrap: wrap;
  }

  .calendar-sites-action,
  .calendar-import-action {
    flex: 1 1 220px;
    min-width: 0;
    white-space: normal;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .calendar-year-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-year-month {
    padding: 10px;
  }

  .calendar-mini-day {
    font-size: var(--app-font-small);
    min-height: 40px;
  }

  .calendar-manager-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .calendar-manager-item .danger-icon-action {
    grid-column: 2;
  }
}
.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.config-actions-header {
  width: 118px;
}

.config-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.config-subpanel {
  margin: 0 22px 22px;
}

.config-help {
  margin: 0;
  padding: 14px 22px 0;
  color: var(--app-muted);
  font-size: 14px;
}

.config-modal-form {
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.config-modal-content {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.config-modal-form > .modal-actions {
  position: static;
  margin: 0;
}

.user-role-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 13px 14px;
  color: var(--app-text);
  background: rgba(98, 194, 196, 0.09);
  border: 1px solid rgba(98, 194, 196, 0.28);
  border-radius: var(--app-radius-panel);
}

.user-role-profile-badge {
  min-width: 94px;
  padding: 5px 9px;
  color: var(--teal-dark);
  background: var(--app-surface-strong);
  border: 1px solid rgba(98, 194, 196, 0.32);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.user-role-profile strong,
.user-role-profile p,
.user-role-profile small {
  display: block;
}

.user-role-profile p {
  margin: 4px 0;
  color: var(--app-muted);
  font-size: 13px;
  line-height: 1.4;
}

.user-role-profile small {
  color: var(--app-muted);
  font-size: 11px;
  line-height: 1.35;
}

.config-modal-form .config-check-grid input:disabled {
  cursor: not-allowed;
}

.config-modal-form .config-check-grid:has(input:disabled) {
  background: var(--app-surface-soft);
}

.config-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.config-form-grid .span-2 {
  grid-column: span 2;
}

.config-permission-help {
  display: block;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.4;
}

.config-permission-advanced {
  margin-top: 14px;
  border-top: 1px solid var(--app-border);
  padding-top: 12px;
}

.config-permission-advanced summary {
  cursor: pointer;
  color: var(--app-text);
  font-size: 14px;
}

.check-field {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--app-text);
  font-size: 14px;
}

.check-field input {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  accent-color: var(--teal-dark);
}

.config-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
  padding: 10px 12px;
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
}

.config-employee-picker {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-control);
  background: var(--app-surface-strong);
}

.config-employee-picker-summary > span {
  display: grid;
  gap: 2px;
}

.config-employee-picker-summary small,
.config-employee-picker-empty small,
.config-employee-picker-limit {
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.35;
}

.config-employee-picker-selected {
  max-height: 112px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
  overflow: auto;
}

.config-employee-picker-selected button {
  min-width: 0;
  max-width: min(100%, 280px);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 10px;
  color: var(--teal-dark);
  background: color-mix(in srgb, var(--teal) 10%, var(--app-surface));
  border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--app-border));
  border-radius: 999px;
  cursor: pointer;
}

.config-employee-picker-selected button:hover,
.config-employee-picker-selected button:focus-visible {
  border-color: var(--teal);
  outline: none;
}

.config-employee-picker-selected button:disabled {
  cursor: not-allowed;
  opacity: .6;
}

.config-employee-picker-selected button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.config-employee-picker-selected .button-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.config-employee-picker-search {
  display: grid;
  gap: 5px;
}

.config-employee-picker-results {
  max-height: 228px;
  overflow: auto;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-panel);
  background: var(--app-surface);
}

.config-employee-picker-results .check-field {
  min-height: 42px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--app-border);
  cursor: pointer;
}

.config-employee-picker-results .check-field:last-child {
  border-bottom: 0;
}

.config-employee-picker-results .check-field:hover {
  background: var(--app-surface-strong);
}

.config-employee-picker-empty {
  min-height: 86px;
  display: grid;
  place-content: center;
  gap: 3px;
  padding: 14px;
  border: 1px dashed var(--app-border);
  border-radius: var(--app-radius-panel);
  text-align: center;
}

.config-employee-picker-limit {
  display: block;
  margin-top: -4px;
}

.schedule-mode-help {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  color: var(--app-muted);
  background: rgba(98, 194, 196, 0.1);
  border: 1px solid rgba(98, 194, 196, 0.25);
  border-radius: var(--app-radius-panel);
  font-size: 13px;
}

.schedule-mode-help strong {
  color: var(--app-text);
  font-size: 14px;
}

.schedule-detail-editor {
  display: grid;
  gap: 14px;
}

.schedule-detail-toolbar,
.schedule-sequence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 12px;
}

.schedule-sequence-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.schedule-detail-table {
  min-width: 760px;
}

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

.schedule-detail-table .compact-check {
  min-height: 0;
  justify-content: center;
}

.table-input {
  width: 100%;
  height: 34px;
  padding: 0 8px;
  color: var(--app-text);
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  outline: none;
}

.table-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(98, 194, 196, 0.16);
}

.time-input {
  min-width: 98px;
}

.short-input {
  max-width: 96px;
}

.trace-description {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 22px 14px;
  padding: 12px 14px;
  color: var(--app-text);
  background: var(--teal-soft);
  border: 1px solid color-mix(in srgb, var(--teal) 38%, var(--app-border));
  border-radius: var(--app-radius-panel);
  line-height: 1.45;
}

.trace-description .app-icon {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  color: var(--teal-dark);
}

.trace-toolbar {
  align-items: end;
}

.trace-toolbar .field-group {
  min-width: 170px;
}

.trace-table {
  min-width: 1040px;
}

.trace-detail-cell {
  min-width: 300px;
  line-height: 1.45;
}

.trace-result {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.trace-result.is-ok {
  color: #137b38;
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.34);
}

.trace-result.is-error {
  color: #b13a34;
  background: rgba(220, 82, 70, 0.12);
  border: 1px solid rgba(220, 82, 70, 0.3);
}

.trace-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 22px 22px;
  color: var(--app-muted);
  font-size: 14px;
}

.trace-pagination-actions {
  display: flex;
  gap: 8px;
}

.theme-dark .trace-result.is-ok {
  color: #86efac;
  background: rgba(22, 163, 74, 0.16);
}

.theme-dark .trace-result.is-error {
  color: #ffb5af;
  background: rgba(220, 82, 70, 0.16);
}

.settings-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 22px;
}

.settings-data-item {
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 14px;
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-panel);
}

.settings-data-item small {
  color: var(--app-muted);
  font-size: 12px;
}

.settings-data-item strong {
  color: var(--app-text);
  font-size: 15px;
  font-weight: 500;
}

.app-footer {
  width: 100%;
  min-height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: auto;
  padding: 10px 18px;
  color: var(--app-muted);
  background: var(--app-surface);
  border-top: 1px solid var(--app-border);
  font-size: 12px;
}

.app-footer a,
.footer-link {
  color: #147b7a;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  text-decoration: none;
}

.theme-dark .app-footer a,
.theme-dark .footer-link {
  color: #91d5d6;
}

.app-footer a:hover,
.app-footer a:focus-visible,
.footer-link:hover,
.footer-link:focus-visible {
  text-decoration: underline;
}

.app-version-link {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.app-modal.app-version-modal {
  width: min(960px, 100%);
  height: min(720px, calc(100svh - 48px));
}

.app-version-modal > .modal-header {
  flex-shrink: 0;
}

.app-modal.app-legal-modal {
  width: min(1040px, 100%);
  height: min(820px, calc(100svh - 48px));
}

.modal-backdrop {
  grid-template-columns: minmax(0, 1fr);
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--modal-overlay);
  backdrop-filter: none;
  overscroll-behavior: contain;
}

.app-field-error { display: block; color: var(--danger-text, #a72d2d); font-size: 12px; font-weight: 400; line-height: 1.4; }
.app-field-help { color: var(--app-muted); font-size: 12px; font-weight: 400; line-height: 1.4; }
.app-form-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--app-text); }
.app-form-check > input { width: auto; min-height: auto; accent-color: var(--teal-dark); }
.modal-backdrop :is(input, select, textarea)[aria-invalid="true"], .app-file-picker.is-invalid { border-color: var(--danger); }
.app-form-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--app-border); border-radius: var(--app-radius-control); }
.app-form-section legend { padding: 0 6px; color: var(--app-text); font-size: 13px; font-weight: 600; }
.app-form-details { grid-column: 1 / -1; min-width: 0; padding: 12px; border: 1px solid var(--app-border); border-radius: var(--app-radius-control); }
.app-form-details > summary { color: var(--teal-dark); font-size: 13px; font-weight: 600; cursor: pointer; }
.app-form-details[open] > summary { margin-bottom: 12px; }
.app-form-complements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
@media (max-width: 620px) { .app-form-complements { grid-template-columns: minmax(0, 1fr); } }
.app-file-field { display: grid; min-width: 0; gap: 6px; }
.app-file-control { display: flex; align-items: center; gap: 8px; min-width: 0; }
.app-file-picker { position: relative; display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 10px 12px; border: 1px dashed var(--teal-dark); border-radius: var(--app-radius-control); background: var(--app-surface-soft); color: var(--teal-dark); font-size: 13px; cursor: pointer; }
.app-file-picker > span { min-width: 0; overflow-wrap: anywhere; }
.app-file-picker svg, .app-file-control button svg { width: 18px; height: 18px; flex: 0 0 18px; }
.app-file-control .app-file-picker input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: inherit; }
.app-file-picker:focus-within { outline: 2px solid var(--teal-dark); outline-offset: 2px; }
.app-file-picker:hover { border-style: solid; }
.app-file-picker:has(input:disabled) { opacity: .65; cursor: wait; }
@media (max-width: 620px) { .app-form-section { grid-template-columns: minmax(0, 1fr); } }

.app-modal {
  width: min(760px, 100%);
  max-height: min(760px, calc(100svh - 48px));
  display: flex;
  flex-direction: column;
  color: var(--app-text);
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  border-radius: var(--app-radius-dialog);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.demo-selector-modal {
  width: min(720px, 100%);
}

.demo-selector-header {
  min-height: 74px;
}

.demo-selector-body {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  gap: 20px;
  padding: 24px;
}

.demo-selector-body > p {
  margin: 0;
  color: var(--app-muted);
  line-height: 1.5;
}

.demo-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.demo-profile-card {
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 13px;
  padding: 18px;
  color: var(--app-text);
  text-align: left;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-panel);
  transition: color var(--gp-motion-fast) ease, background var(--gp-motion-fast) ease, border-color var(--gp-motion-fast) ease, box-shadow var(--gp-motion-fast) ease, transform var(--gp-motion-fast) ease;
}

.demo-profile-card:hover,
.demo-profile-card:focus-visible {
  color: #1b5058;
  background: #f4fdfc;
  border-color: var(--teal);
  box-shadow: 0 8px 22px rgba(10, 78, 76, 0.12);
  transform: translateY(-1px);
}

.demo-profile-card:disabled {
  cursor: wait;
  opacity: 0.68;
}

.demo-profile-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--teal-dark);
  background: rgba(98, 194, 196, 0.12);
  border: 1px solid rgba(98, 194, 196, 0.34);
  border-radius: 999px;
}

.demo-profile-icon .app-icon {
  width: 22px;
  height: 22px;
}

.demo-profile-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.demo-profile-copy strong {
  font-size: 15px;
  font-weight: 600;
}

.demo-profile-copy small {
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.4;
}

.demo-profile-arrow {
  width: 18px;
  height: 18px;
  color: var(--app-muted);
}

.demo-profile-card:hover .demo-profile-arrow,
.demo-profile-card:focus-visible .demo-profile-arrow {
  color: var(--teal-dark);
  transform: translateX(2px);
}

@media (max-width: 640px) {
  .demo-selector-backdrop {
    place-items: center;
    padding: 12px;
  }

  .demo-selector-modal {
    width: 100%;
    max-height: calc(100svh - 24px);
    border-radius: var(--app-radius-dialog);
  }

  .demo-selector-body {
    padding: 18px;
    overflow-y: auto;
  }

  .demo-profile-grid {
    grid-template-columns: 1fr;
  }

  .demo-profile-card {
    min-height: 92px;
    padding: 14px;
  }
}

.modal-header {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--app-border);
}

.modal-header > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.modal-header small {
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 500;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.modal-close,
.secondary-modal-action,
.primary-modal-action,
.danger-modal-action {
  height: var(--app-form-action-height, 40px);
  padding: 0 14px;
  border-radius: var(--app-radius-control);
  border: 1px solid var(--app-border);
  transition: background var(--gp-motion-fast) ease, border-color var(--gp-motion-fast) ease, color var(--gp-motion-fast) ease;
}

.modal-close,
.secondary-modal-action {
  color: var(--app-text);
  background: var(--app-surface);
}

.modal-close {
  width: var(--app-form-action-height, 40px);
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.modal-close:hover,
.modal-close:focus-visible,
.secondary-modal-action:hover,
.secondary-modal-action:focus-visible {
  border-color: var(--teal);
}

.modal-close:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.primary-modal-action,
.danger-modal-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.primary-modal-action {
  color: #062423;
  background: var(--teal);
  border-color: var(--teal);
}

.primary-modal-action:hover,
.primary-modal-action:focus-visible {
  background: #83d0d2;
  border-color: var(--gp-primary);
}

.danger-modal-action {
  color: #ffffff;
  background: #b13a34;
  border-color: #b13a34;
}

.danger-modal-action:hover,
.danger-modal-action:focus-visible {
  background: #9b2f2a;
  border-color: #9b2f2a;
}

.modal-close:disabled,
.secondary-modal-action:disabled,
.primary-modal-action:disabled,
.danger-modal-action:disabled {
  cursor: wait;
  opacity: 0.72;
}

.modal-body {
  display: grid;
  gap: 16px;
  padding: 22px;
  overflow: auto;
}

.modal-body p {
  margin: 0;
  color: var(--app-text);
  line-height: 1.5;
}

.modal-status {
  padding: 10px 12px;
  color: var(--teal-dark);
  background: rgba(98, 194, 196, 0.12);
  border: 1px solid rgba(98, 194, 196, 0.38);
  border-radius: var(--app-radius-panel);
  font-size: 14px;
}

.modal-status.is-error {
  color: #ad332c;
  background: #fff1f0;
  border-color: #f1b6b1;
}

.theme-dark .modal-status.is-error {
  color: #ffc7c3;
  background: rgba(174, 58, 49, 0.18);
  border-color: rgba(255, 155, 148, 0.36);
}

.support-form {
  display: grid;
  gap: 15px;
  padding: 22px;
  overflow: auto;
}

.employee-confirm-dialog.support-contact-dialog {
  width: min(620px, 100%);
  grid-template-rows: auto minmax(0, 1fr);
}

.support-contact-form {
  min-height: 0;
  padding-bottom: 0;
}

.support-contact-form textarea {
  font-family: inherit;
}

.support-contact-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.support-contact-hint {
  color: var(--app-muted);
}

.support-contact-dialog .field-group label,
.support-contact-dialog .soft-icon-action,
.support-contact-options {
  color: var(--app-text);
}

.support-contact-dialog input::placeholder,
.support-contact-dialog textarea::placeholder {
  color: var(--app-muted);
  opacity: 1;
}

.support-contact-options summary {
  cursor: pointer;
  font-size: 13px;
}

.support-contact-options[open] .support-contact-fields {
  margin-top: 15px;
}

.support-contact-form .modal-actions {
  position: sticky;
  bottom: 0;
  margin: 0 -22px;
  padding: 12px 22px;
  background: var(--app-surface-strong);
  border-top: 1px solid var(--app-border);
  z-index: 1;
}

@media (max-width: 520px) {
  .support-contact-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

.support-form .field-group input,
.support-form .field-group select,
.support-form .field-group textarea {
  width: 100%;
  color: var(--app-text);
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  border-radius: var(--app-form-control-radius, 4px);
  outline: none;
}

.support-form .field-group input,
.support-form .field-group select {
  height: var(--app-form-control-height, 40px);
  padding: 0 12px;
}

.support-form .field-group textarea {
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
}

.support-form .field-group input:focus,
.support-form .field-group select:focus,
.support-form .field-group textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(98, 194, 196, 0.16);
}

.support-context-notice {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  color: var(--app-text);
  background: color-mix(in srgb, var(--teal) 8%, var(--app-surface-strong));
  border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--app-border));
  border-radius: var(--app-radius-panel);
}

.support-context-notice-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--teal-dark);
  background: color-mix(in srgb, var(--teal) 14%, var(--app-surface-strong));
  border: 1px solid color-mix(in srgb, var(--teal) 32%, var(--app-border));
  border-radius: 50%;
}

.support-context-notice-icon .button-icon {
  width: 18px;
  height: 18px;
}

.support-context-notice > span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.support-context-notice strong {
  font-size: 13px;
}

.support-context-notice small {
  color: var(--app-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.legal-frame {
  width: 100%;
  height: min(68svh, 660px);
  min-height: 0;
  flex: 1;
  background: var(--app-surface-strong);
  border: 0;
}

.theme-dark .legal-frame {
  background: #111b1e;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1040px) {
  :root {
    --panel-width: 398px;
  }

  .dashboard-content {
    padding: 24px 20px 32px;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-panels {
    grid-template-columns: 1fr;
  }

  .brand-content,
  .loading-content {
    padding-left: 34px;
    padding-right: 34px;
  }

  .brand-content {
    padding-top: 64px;
  }

  .brand-content .brand-logo-img {
    width: 250px;
    margin-bottom: 34px;
  }

  .auth-brand-logo-frame {
    width: 218px;
    margin-bottom: 36px;
  }

  .visual-content {
    padding: 58px 34px 52px;
  }

  .hero-title {
    font-size: 38px;
  }

  .hero-text {
    font-size: 16px;
  }

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

  .feature-item {
    min-height: auto;
  }

  .company-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .config-form-grid {
    grid-template-columns: 1fr;
  }

  .config-form-grid .span-2 {
    grid-column: auto;
  }

  .settings-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-group-card,
  .settings-group-card--grouped {
    grid-column: auto;
  }

  .settings-group-card--sistema {
    grid-column: 1 / -1;
  }
}

@media (min-width: 901px) and (max-height: 840px) {
  .brand-content {
    padding-top: 46px;
    padding-bottom: 28px;
  }

  .brand-content .brand-logo-img {
    width: 230px;
    margin-bottom: 28px;
  }

  .auth-brand-logo-frame {
    width: 200px;
    margin-bottom: 48px;
  }

  .login-form {
    gap: 12px;
  }

  .field-group {
    gap: 5px;
  }

  .field-group input,
  .primary-action,
  .secondary-action,
  .outline-action {
    height: 42px;
  }

  .login-separator {
    height: 14px;
  }

  .login-separator::before {
    top: 7px;
  }

  .login-separator span {
    top: 2px;
  }

  .visual-content {
    padding-top: 52px;
    padding-bottom: 48px;
  }

  .hero-title {
    margin: 18px 0 16px;
    font-size: 42px;
  }

  .feature-grid {
    margin-top: 22px;
  }

  .feature-item {
    padding: 15px 16px;
  }
}

@media (max-width: 900px) {
  .app-dashboard {
    --sidebar-width: 76px;
    --sidebar-collapsed-width: 76px;
  }

  .app-sidebar {
    overflow: visible;
  }

  .app-sidebar .sidebar-brand {
    min-height: 98px;
    place-items: center;
    padding: 0 8px;
    overflow: hidden;
  }

  .app-sidebar.is-collapsed .sidebar-brand {
    min-height: 98px;
  }

  .app-sidebar .sidebar-brand .brand-logo-img {
    width: 48px;
    height: auto;
    max-width: 100%;
    content: url("/images/gp-simbolo-2026.png");
    transform: translateY(0);
    filter: drop-shadow(0 4px 8px rgba(13, 60, 62, 0.12));
    cursor: pointer;
  }

  .app-sidebar .sidebar-workspace-context {
    gap: 0;
    padding: 8px;
  }

  .app-sidebar .sidebar-workspace-label,
  .app-sidebar .sidebar-workspace-option span {
    display: none;
  }

  .app-sidebar .sidebar-workspace-switch {
    grid-template-columns: 1fr;
    width: 48px;
    box-sizing: border-box;
    margin: 0 auto;
  }

  .app-sidebar .sidebar-workspace-option {
    width: 40px;
    min-height: 36px;
    padding: 0;
  }

  .app-sidebar .sidebar-workspace-option:hover::after,
  .app-sidebar .sidebar-workspace-option:focus-visible::after {
    content: attr(data-title);
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    z-index: 90;
    min-width: max-content;
    transform: translateY(-50%);
    padding: 8px 10px;
    color: var(--app-topbar-text);
    background: var(--app-topbar);
    border: 1px solid var(--app-topbar-border);
    border-radius: var(--app-radius-compact);
    box-shadow: var(--app-shadow);
    font-size: 13px;
    font-weight: 400;
    pointer-events: none;
  }

  .app-sidebar .sidebar-nav {
    overflow: visible;
    padding: 12px 8px;
  }

  .app-sidebar .app-nav-group {
    color: transparent;
    pointer-events: none;
  }

  .app-sidebar .app-nav-text {
    width: 0;
    opacity: 0;
    transform: translateX(-8px);
  }

  .app-sidebar .app-nav-link,
  .app-sidebar .sidebar-logout {
    width: 48px;
    min-height: 44px;
    justify-content: center;
    gap: 0;
    margin: 0 auto;
    padding: 0;
    border-radius: var(--app-radius-control);
  }

  .app-sidebar .app-nav-link .app-icon,
  .app-sidebar .sidebar-logout .app-icon {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
  }

  .app-sidebar .app-nav-link:hover,
  .app-sidebar .app-nav-link:focus-visible,
  .app-sidebar .app-nav-link.active {
    border-color: rgba(98, 194, 196, 0.8);
    box-shadow: 0 0 0 1px rgba(98, 194, 196, 0.32), 0 10px 20px rgba(26, 160, 154, 0.16);
  }

  .app-sidebar .sidebar-logout:hover,
  .app-sidebar .sidebar-logout:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(18, 58, 62, 0.1);
  }

  .app-sidebar .app-nav-link:hover::after,
  .app-sidebar .app-nav-link:focus-visible::after,
  .app-sidebar .sidebar-logout:hover::after,
  .app-sidebar .sidebar-logout:focus-visible::after {
    content: attr(data-title);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    z-index: 90;
    min-width: max-content;
    transform: translateY(-50%);
    padding: 8px 10px;
    color: var(--app-topbar-text);
    background: var(--app-topbar);
    border: 1px solid var(--app-topbar-border);
    border-radius: var(--app-radius-compact);
    box-shadow: var(--app-shadow);
    font-size: 13px;
    pointer-events: none;
  }

  .app-topbar {
    gap: 12px;
    padding: 0 14px;
  }

  .topbar-company {
    max-width: 280px;
  }

  .topbar-company-selector {
    min-width: 0;
    width: min(300px, 100%);
  }

  .topbar-user {
    margin-right: -14px;
    padding: 0 16px;
  }

  .dashboard-title-row {
    display: block;
  }

  .dashboard-title-row p {
    margin: 8px 0 0;
    white-space: normal;
  }

  .auth-shell,
  .loading-shell {
    display: block;
  }

  .brand-panel {
    width: 100%;
    min-height: auto;
    flex-basis: auto;
    border-right: 0;
    border-bottom: 4px solid var(--gold);
  }

  .brand-content,
  .loading-content {
    min-height: auto;
    padding: 44px 28px 38px;
  }

  .brand-content .brand-logo-img {
    width: min(250px, 100%);
    margin-bottom: 36px;
  }

  .auth-brand-logo-frame {
    width: min(218px, 100%);
    margin-bottom: 36px;
  }

  .login-form {
    max-width: 420px;
    margin: 0 auto;
  }

  .loading-shell .brand-panel {
    min-height: var(--viewport-height);
    border-bottom: 0;
  }

  .loading-content {
    min-height: var(--viewport-height);
  }

  .loading-shell .visual-panel {
    display: none;
  }

  .visual-panel {
    min-height: auto;
  }

  .visual-content {
    min-height: auto;
    align-items: flex-start;
    padding: 44px 28px 52px;
  }

  .visual-copy,
  .feature-grid {
    width: 100%;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-title {
    margin: 18px 0 16px;
    font-size: 34px;
    line-height: 1.14;
  }

  .hero-action {
    width: 100%;
    max-width: 320px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
    margin-top: 24px;
  }

  .company-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-panels-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .company-data-panel {
    grid-column: 1;
    grid-row: 1;
  }

  .company-manager-panel {
    grid-column: 1;
    grid-row: 2;
  }

  .company-editor-grid {
    grid-template-columns: 1fr;
  }

  .settings-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-group-card,
  .settings-group-card--grouped {
    grid-column: auto;
  }

  .settings-group-card--sistema {
    grid-column: 1 / -1;
  }

  .settings-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .app-dashboard {
    --sidebar-width: 66px;
    --sidebar-collapsed-width: 66px;
  }

  .app-topbar {
    gap: 6px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .app-sidebar .sidebar-brand {
    min-height: 72px;
    place-items: center;
    padding: 0 7px;
  }

  .app-sidebar .sidebar-brand .brand-logo-img {
    width: 52px;
    transform: translateY(0);
  }

  .app-sidebar .sidebar-workspace-context {
    padding-right: 7px;
    padding-left: 7px;
  }

  .app-sidebar .sidebar-workspace-switch {
    width: 44px;
  }

  .app-sidebar .sidebar-workspace-option {
    width: 36px;
    min-height: 34px;
  }

  .app-sidebar .sidebar-nav {
    padding-left: 7px;
    padding-right: 7px;
  }

  .app-sidebar .app-nav-link,
  .app-sidebar .sidebar-logout {
    width: 44px;
    min-height: 40px;
    border-radius: var(--app-radius-control);
  }

  .topbar-left {
    flex: 1 1 auto;
    gap: 4px;
  }

  .topbar-company {
    display: none;
  }

  .topbar-company.is-personal {
    display: block;
    max-width: min(140px, 34vw);
    font-size: 14px;
  }

  .topbar-company-selector {
    min-width: 0;
    flex: 1;
  }

  .topbar-company-selector span {
    display: none;
  }

  .topbar-company-selector select {
    min-width: 0;
  }

  .topbar-right {
    flex: 0 0 auto;
    gap: 4px;
  }

  .theme-toggle {
    padding: 0 6px;
  }

  .theme-toggle-text {
    display: none;
  }

  .topbar-user {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    justify-content: center;
    margin-right: -8px;
    padding: 0;
  }

  .topbar-user-icon {
    width: 24px;
    height: 24px;
  }

  .topbar-user span {
    display: none;
  }

  .dashboard-content {
    padding: 22px 16px 30px;
  }

  .dashboard-title-row h1 {
    font-size: 17px;
  }

  .metric-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .metric-card {
    min-height: 108px;
  }

  .dashboard-panels {
    gap: 18px;
  }

  .panel-header {
    min-height: auto;
    align-items: flex-start;
    padding: 16px;
  }

  .panel-header h2 {
    font-size: 18px;
  }

  .notice-list,
  .absence-list {
    padding: 0 18px;
  }

  .notice-list li,
  .absence-list li {
    gap: 13px;
    padding: 18px 0;
  }

  .absence-list time {
    width: 78px;
    flex-basis: 78px;
  }

  .app-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .company-title-row h1 {
    font-size: 21px;
  }

  .company-form-grid {
    grid-template-columns: 1fr;
  }

  .company-form-grid .span-2 {
    grid-column: auto;
  }

  .company-list-item {
    flex-wrap: wrap;
  }

  .company-select-action {
    flex-basis: 100%;
  }

  .settings-title-row,
  .settings-detail-title-row {
    align-items: flex-start;
  }

  .config-crud-toolbar,
  .trace-toolbar,
  .trace-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .trace-description {
    align-items: flex-start;
    margin: 16px 12px 14px;
    padding: 11px 12px;
    font-size: 13px;
  }

  .config-search,
  .trace-toolbar .field-group {
    width: 100%;
    min-width: 0;
  }

  .config-crud-actions {
    justify-content: flex-end;
    width: 100%;
  }

  .config-check-grid {
    grid-template-columns: 1fr;
  }

  .config-employee-picker {
    padding: 10px;
  }

  .config-employee-picker-selected button {
    max-width: 100%;
  }

  .config-employee-picker-results {
    max-height: 190px;
  }

  .user-role-profile {
    grid-template-columns: minmax(0, 1fr);
  }

  .user-role-profile-badge {
    justify-self: start;
  }

  .settings-title-row {
    display: grid;
  }

  .settings-title-row strong {
    margin-top: 0;
  }

  .settings-card-grid {
    grid-template-columns: 1fr;
  }

  .settings-group-card,
  .settings-group-card--grouped {
    grid-column: auto;
    min-height: 0;
  }

  .settings-group-card--sistema {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  .settings-group-card--sistema .settings-group-options {
    grid-template-columns: 1fr;
  }

  .brand-content,
  .loading-content {
    padding: 32px 20px 28px;
  }

  .brand-content .brand-logo-img {
    width: min(220px, 100%);
    margin-bottom: 30px;
  }

  .auth-brand-logo-frame {
    width: min(191px, 100%);
    margin-bottom: 30px;
  }

  .primary-action,
  .secondary-action,
  .outline-action,
  .field-group input {
    height: 44px;
  }

  .visual-content {
    padding: 36px 20px 44px;
  }

  .hero-title {
    font-size: 30px;
  }

  .feature-item {
    padding: 16px;
  }

  .feature-item h2 {
    font-size: 16px;
  }

  .feature-item p {
    font-size: 15px;
  }
}

@media (max-width: 360px) {
  .app-dashboard {
    --sidebar-width: 58px;
    --sidebar-collapsed-width: 58px;
  }

  .app-sidebar .sidebar-brand .brand-logo-img {
    width: 42px;
  }

  .app-sidebar .app-nav-link,
  .app-sidebar .sidebar-logout {
    width: 38px;
  }

  .app-sidebar .app-nav-link .app-icon,
  .app-sidebar .sidebar-logout .app-icon {
    width: 18px;
    height: 18px;
  }

  .app-topbar {
    padding-left: 10px;
    padding-right: 10px;
  }

  .topbar-icon-button {
    width: 32px;
  }

  .topbar-user {
    margin-right: -10px;
    padding: 0 10px;
  }

  .dashboard-content {
    padding-left: 14px;
    padding-right: 14px;
  }

  .panel-header,
  .notice-list,
  .absence-list {
    padding-left: 14px;
    padding-right: 14px;
  }

  .brand-content,
  .loading-content {
    padding: 24px 16px;
  }

  .visual-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .brand-content .brand-logo-img {
    width: min(180px, 100%);
    margin-bottom: 22px;
  }

  .auth-brand-logo-frame {
    width: min(157px, 100%);
    margin-bottom: 24px;
  }

  .login-form {
    gap: 10px;
  }

  .field-group {
    gap: 5px;
  }

  .field-group input,
  .primary-action,
  .secondary-action,
  .outline-action {
    height: 40px;
  }

  .login-separator {
    height: 12px;
  }

  .login-separator::before {
    top: 6px;
  }

  .login-separator span {
    top: 1px;
  }

  .hero-title {
    font-size: 28px;
  }
}

.backup-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 420px;
}

.backup-layout.backup-layout-export-only {
  grid-template-columns: minmax(0, 1fr);
}

.backup-section {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
}

.backup-restore-section {
  border-left: 1px solid var(--app-border);
}

.backup-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.backup-section-header > span:last-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.backup-section-header h3 {
  margin: 0;
  color: var(--app-text);
  font-size: 18px;
  font-weight: 500;
}

.backup-section-header small {
  color: var(--app-muted);
  font-size: 12px;
}

.backup-section-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  color: var(--teal-dark);
  background: rgba(98, 194, 196, 0.14);
  border-radius: 50%;
}

.theme-dark .backup-section-icon {
  color: var(--teal);
}

.backup-company-list {
  display: grid;
  gap: 8px;
}

.backup-company-option {
  min-width: 0;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  color: var(--app-text);
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-control);
  cursor: pointer;
  transition: background var(--gp-motion-fast) ease, border-color var(--gp-motion-fast) ease, box-shadow var(--gp-motion-fast) ease, transform var(--gp-motion-fast) ease;
}

.backup-company-option:hover,
.backup-company-option:focus-within,
.backup-company-option.is-selected {
  background: var(--app-sidebar-active);
  border-color: var(--teal);
  box-shadow: 0 6px 16px rgba(8, 170, 164, 0.12);
}

.backup-company-option:hover {
  transform: translateY(-1px);
}

.backup-company-option input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  accent-color: var(--teal-dark);
}

.backup-company-option > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.backup-company-option strong,
.backup-company-option small {
  overflow-wrap: anywhere;
}

.backup-company-option strong {
  font-size: 14px;
  font-weight: 500;
}

.backup-company-option small {
  color: var(--app-muted);
  font-size: 12px;
}

.backup-section-actions,
.backup-restore-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 4px;
}

.backup-restore-action {
  justify-content: flex-end;
}

.backup-file-picker {
  min-height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  overflow: hidden;
  color: var(--teal-dark);
  background: var(--app-surface-strong);
  border: 1px dashed var(--teal-dark);
  border-radius: var(--app-radius-control);
  cursor: pointer;
  transition: background var(--gp-motion-fast) ease, border-color var(--gp-motion-fast) ease;
}

.backup-file-picker:hover,
.backup-file-picker:focus-within {
  background: var(--app-sidebar-active);
  border-color: var(--teal);
}

.theme-dark .backup-file-picker {
  color: var(--teal);
}

.backup-file-picker > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backup-file-picker input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.backup-file-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--app-border);
  border-bottom: 1px solid var(--app-border);
}

.backup-file-summary > span {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 11px;
}

.backup-file-summary > span + span {
  border-left: 1px solid var(--app-border);
}

.backup-file-summary small {
  color: var(--app-muted);
  font-size: 11px;
}

.backup-file-summary strong {
  overflow-wrap: anywhere;
  color: var(--app-text);
  font-size: 13px;
  font-weight: 500;
}

.restore-company-list {
  max-height: 190px;
  overflow: auto;
  padding-right: 3px;
}

.backup-restore-options {
  display: grid;
  gap: 5px;
}

.backup-license-notice,
.backup-destructive-warning,
.backup-new-company-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid;
  border-radius: var(--app-radius-panel);
  font-size: 13px;
}

.backup-license-notice.is-allowed,
.backup-new-company-notice {
  color: #087463;
  background: rgba(45, 178, 131, 0.1);
  border-color: rgba(45, 178, 131, 0.35);
}

.backup-license-notice.is-blocked,
.backup-destructive-warning {
  color: #ad332c;
  background: #fff1f0;
  border-color: #f1b6b1;
}

.theme-dark .backup-license-notice.is-allowed,
.theme-dark .backup-new-company-notice {
  color: #8de0c1;
  background: rgba(45, 178, 131, 0.14);
  border-color: rgba(92, 214, 170, 0.34);
}

.theme-dark .backup-license-notice.is-blocked,
.theme-dark .backup-destructive-warning {
  color: #ffc7c3;
  background: rgba(174, 58, 49, 0.18);
  border-color: rgba(255, 155, 148, 0.36);
}

.backup-license-notice .button-icon,
.backup-destructive-warning .button-icon,
.backup-new-company-notice .button-icon {
  flex: 0 0 18px;
}

.backup-confirmation-summary {
  margin: 0;
  display: grid;
  border-top: 1px solid var(--app-border);
}

.backup-confirmation-summary > div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--app-border);
}

.backup-confirmation-summary dt {
  color: var(--app-muted);
}

.backup-confirmation-summary dd {
  margin: 0;
  color: var(--app-text);
  font-weight: 500;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .backup-layout {
    grid-template-columns: 1fr;
  }

  .backup-restore-section {
    border-top: 1px solid var(--app-border);
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .backup-section {
    padding: 18px 14px;
  }

  .backup-file-summary {
    grid-template-columns: 1fr;
  }

  .backup-file-summary > span + span {
    border-top: 1px solid var(--app-border);
    border-left: 0;
  }

  .backup-section-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .backup-section-actions > button {
    align-self: flex-end;
  }

  .backup-confirmation-summary > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
/* Estado común de sesión, carga, avisos y validación */
.session-loading-shell {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  min-height: 100dvh;
  background: #f7faf9;
  color: #243536;
}

.session-loading-shell strong {
  max-width: 42rem;
  overflow-wrap: anywhere;
}

.session-loading-shell-delayed {
  visibility: hidden;
  animation: mostrar-verificacion-sesion 400ms step-end forwards;
}

@keyframes mostrar-verificacion-sesion {
  to { visibility: visible; }
}

.session-loading-shell.gp-theme {
  background: var(--app-bg);
  color: var(--app-text);
}

.session-loading-shell.gp-theme .brand-logo-img {
  background: #fff;
  padding: 12px;
  border-radius: var(--app-radius-panel);
}

.session-loading-shell .brand-logo-img {
  width: min(230px, 58vw);
  height: auto;
}

.session-loading-shell .inline-spinner,
.view-loading-state .inline-spinner {
  width: 28px;
  height: 28px;
  border-width: 3px;
}

.view-loading-state {
  min-height: calc(100dvh - 112px);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: var(--muted-color, #617072);
}

.app-toast-region {
  position: fixed;
  top: 70px;
  right: 18px;
  z-index: 3000;
  display: grid;
  gap: 10px;
  width: min(390px, calc(100vw - 32px));
  pointer-events: none;
}

.app-toast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  min-height: 54px;
  padding: 10px 8px 10px 14px;
  border: 1px solid #c8d7d6;
  border-left-width: 5px;
  border-radius: var(--app-radius-panel);
  background: #ffffff;
  color: #233334;
  box-shadow: 0 12px 30px rgb(20 45 46 / 18%);
  pointer-events: auto;
  animation: app-toast-enter 180ms ease-out both;
}

.app-toast.is-success {
  border-left-color: #188754;
}

.app-toast.is-error {
  border-left-color: #cf3d3d;
}

.app-toast.is-info {
  border-left-color: var(--gp-contrast);
}

.app-toast.is-leaving {
  animation: app-toast-leave 180ms ease-in both;
}

.app-toast-message {
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.app-toast.is-balance { --app-balance-muted: #566c78; --app-balance-accent: var(--gp-contrast); --app-balance-border: #d6e3e7; border-left-color: var(--gp-primary); }
.app-balance-summary { grid-column: 1 / -1; display: grid; gap: 12px; padding: 4px 6px 4px 0; }
.app-balance-employee { font-size: .9rem; overflow-wrap: anywhere; }
.app-balance-row { display: grid; gap: 5px; padding-top: 8px; border-top: 1px solid var(--app-balance-border); }
.app-balance-label, .app-balance-note { font-size: .75rem; color: var(--app-balance-muted); }
.app-balance-values { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.app-balance-before { color: var(--app-balance-muted); font-size: 1.05rem; }
.app-balance-arrow { color: var(--app-balance-accent); }
.app-balance-after { justify-self: end; color: var(--app-balance-accent); font-size: 1.35rem; border-radius: var(--app-radius-compact); padding: 2px 6px; }
.app-balance-after.is-settled { animation: app-balance-settle 650ms ease-out; }
.app-balance-accessible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.app-toast-region.theme-dark .app-toast.is-balance { --app-balance-border: #3d5666; --app-balance-muted: #a8babd; --app-balance-accent: #9af0ec; }
@keyframes app-balance-settle { from { background: rgba(98, 194, 196, .25); } to { background: transparent; } }

.app-toast-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: 700 22px/1 Roboto, sans-serif;
  cursor: pointer;
}

.app-toast-close:hover,
.app-toast-close:focus-visible {
  background: #edf4f3;
  outline: 2px solid var(--gp-contrast);
  outline-offset: -2px;
}

.app-toast-region.theme-dark .app-toast {
  border-color: #3d5666;
  border-left-color: var(--gp-primary);
  background: #21313d;
  color: #eef6f6;
  box-shadow: 0 14px 34px rgb(0 0 0 / 38%);
}

.app-toast-region.theme-dark .app-toast.is-success {
  border-left-color: #39bd7b;
}

.app-toast-region.theme-dark .app-toast.is-error {
  border-left-color: #ff7373;
}

.app-toast-region.theme-dark .app-toast-close:hover,
.app-toast-region.theme-dark .app-toast-close:focus-visible {
  background: #354748;
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid,
.field-group.has-error input,
.field-group.has-error select,
.field-group.has-error textarea,
.config-form-field.has-error input,
.config-form-field.has-error select,
.config-form-field.has-error textarea {
  border-color: #cf3d3d !important;
  box-shadow: 0 0 0 2px rgb(207 61 61 / 15%) !important;
}

.field-group.has-error > label,
.config-form-field.has-error > label {
  color: #b52d2d;
}

@keyframes app-toast-enter {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes app-toast-leave {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-6px); }
}

@media (max-width: 720px) {
  .app-toast-region {
    top: 62px;
    right: 16px;
    left: 16px;
    width: auto;
  }

  .view-loading-state {
    min-height: 55dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-toast,
  .app-toast.is-leaving,
  .app-balance-after.is-settled {
    animation: none;
  }
}
/* Select común: proporción estable y chevron propio */
#app select:not([multiple]) {
  min-width: 0;
  box-sizing: border-box;
  padding-right: 42px;
  padding-left: 12px;
  border-radius: var(--app-radius-control);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2324676f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px 16px;
  appearance: none;
  cursor: pointer;
  text-overflow: ellipsis;
  transition: border-color var(--gp-motion-fast) ease, box-shadow var(--gp-motion-fast) ease, background-color var(--gp-motion-fast) ease;
}

#app select:not([multiple]):hover:not(:disabled) {
  border-color: var(--teal);
}

#app select:not([multiple]):focus-visible {
  border-color: var(--teal);
  outline: none;
  box-shadow: 0 0 0 2px rgba(98, 194, 196, 0.18);
}

#app select:not([multiple]):disabled {
  cursor: default;
  opacity: 0.68;
}

#app .theme-dark select:not([multiple]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235ee0d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

#app .theme-dark select option {
  color: #eef8f8;
  background: #253438;
}
.installation-summary {
  display: grid;
}

.installation-license-strip {
  display: grid;
  grid-template-columns: minmax(170px, 0.55fr) minmax(0, 1.45fr);
  align-items: center;
  gap: 24px;
  padding: 22px;
  border-bottom: 1px solid var(--app-border);
}

.installation-license-type {
  display: grid;
  justify-items: start;
  gap: 9px;
}

.installation-license-type small,
.installation-serial-view small,
.installation-stat-item small {
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 500;
}

.installation-license-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 12px;
  color: var(--teal-dark);
  background: rgba(98, 194, 196, 0.13);
  border: 1px solid rgba(98, 194, 196, 0.38);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
}

.installation-license-badge.is-demo {
  color: #7a5400;
  background: rgba(235, 174, 44, 0.15);
  border-color: rgba(235, 174, 44, 0.52);
}

.installation-license-badge.is-asesoria {
  color: #1769a3;
  background: rgba(64, 156, 218, 0.12);
  border-color: rgba(64, 156, 218, 0.4);
}

.installation-license-badge.is-nominas {
  color: #30752f;
  background: rgba(91, 174, 86, 0.12);
  border-color: rgba(91, 174, 86, 0.4);
}

.theme-dark .installation-license-badge.is-demo {
  color: #ffd889;
}

.theme-dark .installation-license-badge.is-asesoria {
  color: #8dd1ff;
}

.theme-dark .installation-license-badge.is-nominas {
  color: #9be296;
}

.installation-serial-view {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-left: 24px;
  border-left: 1px solid var(--app-border);
}

.installation-serial-view > span {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.installation-serial-view strong {
  overflow-wrap: anywhere;
  color: var(--app-text);
  font-size: 20px;
  font-weight: 500;
}

.installation-serial-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding-left: 24px;
  border-left: 1px solid var(--app-border);
}

.installation-serial-form .field-group {
  min-width: 0;
}

.installation-serial-form input {
  width: 100%;
  height: var(--app-form-control-height);
  padding: 0 12px;
  color: var(--app-text);
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-control);
  outline: none;
}

.installation-serial-form input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(98, 194, 196, 0.16);
}

.installation-serial-actions {
  display: flex;
  gap: 8px;
}

.installation-field-error {
  color: #b52d2d;
  font-size: 12px;
}

.installation-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--app-border);
  gap: 1px;
}

.installation-stat-item {
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 20px 22px;
  background: var(--app-surface);
}

.installation-stat-item strong {
  overflow-wrap: anywhere;
  color: var(--app-text);
  font-size: 22px;
  font-weight: 500;
}

.installation-stat-item span {
  color: var(--app-muted);
  font-size: 13px;
}

@media (max-width: 900px) {
  .installation-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .installation-license-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .installation-serial-view,
  .installation-serial-form {
    padding-top: 20px;
    padding-left: 0;
    border-top: 1px solid var(--app-border);
    border-left: 0;
  }

  .installation-serial-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .installation-serial-actions {
    justify-content: flex-end;
  }

  .installation-stats-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Perfil de usuario */
.topbar-user {
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  font: inherit;
  text-align: left;
}

.profile-content {
  display: grid;
  align-content: start;
  gap: 20px;
}

.profile-panels-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  align-items: start;
  gap: 20px;
}

.profile-panel {
  overflow: hidden;
}

.profile-panel .panel-header > span {
  display: grid;
  gap: 5px;
}

.profile-panel .panel-header small {
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 500;
}

.profile-form-grid,
.profile-security-form {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.profile-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-form-grid .field-group {
  align-content: start;
}

.profile-content .field-group input,
.profile-content .field-group select {
  width: 100%;
  min-height: 44px;
  padding: 0 13px;
  color: var(--app-text);
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-control);
  outline: none;
}

.profile-content .field-group select {
  padding-right: 42px;
}

.profile-content .field-group input:focus,
.profile-content .field-group select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(98, 194, 196, 0.16);
}

.profile-content .field-group input[readonly] {
  color: var(--app-muted);
  background: var(--app-surface-soft);
  cursor: default;
}

.profile-content .field-help {
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.35;
}

.profile-content .profile-demo-help {
  margin: 0;
  padding: 18px 22px 22px;
}

.profile-appearance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-panel);
}

.profile-appearance-copy {
  display: grid;
  gap: 4px;
}

.profile-appearance-copy strong {
  font-size: 14px;
}

.profile-appearance-copy small {
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.35;
}

.profile-theme-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--app-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.profile-theme-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.profile-theme-switch-track {
  width: 42px;
  height: 22px;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 2px;
  background: var(--app-border);
  border: 1px solid var(--app-border);
  border-radius: 999px;
  transition: background var(--gp-motion-fast) ease, border-color var(--gp-motion-fast) ease;
}

.profile-theme-switch-track > span {
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
  transition: transform var(--gp-motion-fast) ease;
}

.profile-theme-switch input:checked + .profile-theme-switch-track {
  background: var(--teal);
  border-color: var(--teal);
}

.profile-theme-switch input:checked + .profile-theme-switch-track > span {
  transform: translateX(18px);
}

.profile-theme-switch input:focus-visible + .profile-theme-switch-track {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.profile-theme-switch:has(input:disabled),
.theme-toggle:has(input:disabled) {
  cursor: wait;
  opacity: 0.65;
}

.profile-form-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

.profile-form-actions .compact-action {
  width: auto;
  min-width: 172px;
  padding: 0 18px;
  border-radius: var(--app-radius-control);
}

.profile-form-grid .span-2 {
  grid-column: span 2;
}

@media (max-width: 1100px) {
  .profile-panels-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-security-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-security-form .profile-form-actions {
    grid-column: span 2;
  }
}

@media (max-width: 720px) {
  .profile-form-grid,
  .profile-security-form {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px;
  }

  .profile-form-grid .span-2,
  .profile-security-form .profile-form-actions {
    grid-column: auto;
  }

  .profile-form-actions .compact-action {
    width: 100%;
  }

  .profile-appearance {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-theme-switch {
    width: 100%;
    justify-content: flex-end;
  }
}
/* Empleados */
.employees-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 20px;
}

.employees-panel {
  width: 100%;
  overflow: hidden;
}

.employees-panel-header small,
.employee-dialog-header small {
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 500;
}

.employees-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(170px, 220px) auto;
  align-items: end;
  gap: 12px;
  padding: 16px 18px;
}

.employees-toolbar .field-group input,
.employees-toolbar .field-group select,
.employee-editor-form .field-group input,
.employee-editor-form .field-group select,
.employee-editor-form .field-group textarea {
  width: 100%;
  min-height: var(--app-form-control-height);
  padding: 0 12px;
  color: var(--app-text);
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  border-radius: var(--app-form-control-radius);
  outline: none;
}

.employees-toolbar .field-group select,
.employee-editor-form .field-group select {
  padding-right: 40px;
}

.employees-toolbar .field-group input:focus,
.employees-toolbar .field-group select:focus,
.employee-editor-form .field-group input:focus,
.employee-editor-form .field-group select:focus,
.employee-editor-form .field-group textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(98, 194, 196, 0.16);
}

.employee-editor-form .field-group input.is-invalid,
.employee-editor-form .field-group select.is-invalid,
.employee-editor-form .field-group textarea.is-invalid {
  border-color: #d84b4b;
  box-shadow: 0 0 0 2px rgba(216, 75, 75, 0.14);
}

.employee-editor-form .field-group input[readonly] {
  color: var(--app-muted);
  background: var(--app-surface-soft);
}

.employees-count {
  display: grid;
  min-width: 110px;
  min-height: 40px;
  align-content: center;
  justify-items: end;
  color: var(--app-muted);
}

.employees-count strong {
  color: var(--app-text);
  font-size: 20px;
  line-height: 1;
}

.employees-count span {
  font-size: 12px;
}

.employees-loading,
.employees-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 250px;
  padding: 32px;
  color: var(--app-muted);
  text-align: center;
  border-top: 1px solid var(--app-border);
}

.employees-empty strong {
  color: var(--app-text);
  font-size: 16px;
}

.employees-empty-icon {
  width: 32px;
  height: 32px;
  color: var(--teal-dark);
}

.employees-table-wrap {
  padding: 0 22px 22px;
}

.employees-table {
  min-width: 920px;
}

.employee-name-action {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  max-width: 100%;
  padding: 3px;
  color: var(--app-text);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.employee-name-action:hover strong,
.employee-name-action:focus-visible strong {
  color: var(--teal-dark);
}

.employee-name-action:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.employee-name-action > span:last-child,
.employee-contact {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.employee-name-action strong,
.employee-contact strong {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-name-action small,
.employee-contact small {
  overflow: hidden;
  color: var(--app-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-avatar {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 700;
  background: var(--teal-soft);
  border: 1px solid rgba(98, 194, 196, 0.36);
  border-radius: 50%;
}

.employee-status-action {
  width: 34px;
  height: 34px;
}

.employee-reactivate-action {
  color: #237d52;
  border-color: rgba(35, 125, 82, 0.34);
}

.employee-modal-backdrop {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(13, 28, 31, 0.58);
  backdrop-filter: blur(2px);
}

.modal-backdrop > :is([role="dialog"], [role="alertdialog"], .app-modal) {
  min-width: 0;
  max-width: 100%;
}

.modal-backdrop :is(input, select, textarea) {
  min-width: 0;
  max-width: 100%;
}

.modal-backdrop :is(.modal-close, .employee-dialog-header > button) {
  flex-shrink: 0;
}

.employee-dialog,
.employee-confirm-dialog {
  display: grid;
  width: min(980px, 100%);
  max-height: min(820px, calc(100vh - 44px));
  overflow: hidden;
  color: var(--app-text);
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-dialog);
  box-shadow: 0 24px 64px rgba(10, 28, 31, 0.28);
}

.employee-confirm-dialog {
  width: min(520px, 100%);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.employee-dialog {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.employee-dialog.employee-dialog-create {
  grid-template-rows: auto minmax(0, 1fr);
}

.employee-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 88px;
  flex-shrink: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--app-border);
}

.employee-dialog-header > .employee-dialog-copy {
  display: grid;
  flex: 1 1 0;
  gap: 6px;
  min-width: 0;
}

.employee-dialog-header > .employee-dialog-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  color: var(--teal-dark);
  background: color-mix(in srgb, var(--gp-primary) 12%, var(--app-surface-strong));
  border: 1px solid var(--app-border);
  border-radius: 50%;
}

.employee-dialog-icon .employee-dialog-symbol {
  width: 22px;
  height: 22px;
}

.employee-dialog-copy > small {
  justify-self: start;
  max-width: 100%;
  padding: 3px 8px;
  color: var(--teal-dark);
  background: color-mix(in srgb, var(--gp-primary) 12%, var(--app-surface-strong));
  border-radius: var(--app-radius-compact);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.employee-dialog-header h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.employee-tabs {
  display: flex;
  gap: 2px;
  padding: 0 20px;
  overflow-x: auto;
  border-bottom: 1px solid var(--app-border);
}

.employee-tab {
  position: relative;
  min-height: 46px;
  padding: 0 16px;
  color: var(--app-muted);
  white-space: nowrap;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.employee-tab::after {
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 3px;
  content: "";
  background: transparent;
}

.employee-tab:hover,
.employee-tab:focus-visible,
.employee-tab.is-active {
  color: var(--teal-dark);
  background: var(--teal-soft);
}

.employee-tab.is-active::after {
  background: var(--teal);
}

.employee-editor-form {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
}

.employee-domain-dialog {
  grid-template-rows: auto minmax(0, 1fr);
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
}

.employee-domain-dialog-small {
  width: min(680px, calc(100vw - 32px));
}

.employee-domain-dialog .employee-editor-form {
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.employee-domain-dialog .employee-domain-form {
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}

.employee-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  padding: 22px;
}

.employee-editor-form .field-group {
  align-content: start;
}

.employee-manual-request-form .field-group label {
  color: var(--app-muted);
}

.employee-editor-form .field-group textarea {
  min-height: 112px;
  padding-top: 10px;
  resize: vertical;
}

.employee-span-2 {
  grid-column: span 2;
}

.employee-active-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  min-height: 40px;
  color: var(--app-text);
  cursor: pointer;
}

.employee-active-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--teal);
}

.employee-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  background: var(--app-surface-soft);
  border-top: 1px solid var(--app-border);
}

.employee-editor-actions button {
  display: inline-flex;
  min-width: 132px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: var(--app-radius-control);
}

.employee-editor-actions button.icon-action {
  min-width: 38px;
  padding: 0;
}

.danger-modal-action {
  color: #fff;
  background: #bf3f3f;
  border: 1px solid #bf3f3f;
  cursor: pointer;
}

.danger-modal-action:hover:not(:disabled) {
  background: #a92f2f;
  border-color: #a92f2f;
}

.employee-confirm-content {
  display: grid;
  min-height: 0;
  overflow-y: auto;
  gap: 12px;
  padding: 24px 20px;
}

.employee-confirm-content p {
  margin: 0;
  color: var(--app-muted);
  line-height: 1.5;
}

@media (max-width: 860px) {
  .employees-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(160px, 210px);
  }

  .employees-count {
    grid-column: span 2;
    justify-items: start;
  }
}

@media (max-width: 720px) {
  .employees-toolbar {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }

  .employees-count {
    grid-column: auto;
  }

  .employees-table-wrap {
    padding: 0 16px 16px;
    overflow: visible;
  }

  .employees-table {
    min-width: 0;
    border: 0;
  }

  .employees-table thead {
    display: none;
  }

  .employees-table tbody,
  .employees-table tr,
  .employees-table td {
    display: block;
    width: 100%;
  }

  .employees-table tbody {
    display: grid;
    gap: 10px;
  }

  .employees-table tr {
    padding: 14px;
    background: var(--app-surface-strong);
    border: 1px solid var(--app-border);
    border-radius: 6px;
  }

  .employees-table td {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 7px 0;
    border: 0;
  }

  .employees-table td::before {
    color: var(--app-muted);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    content: attr(data-label);
  }

  .employees-table td:first-child {
    display: block;
    padding-top: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--app-border);
  }

  .employees-table td:first-child::before {
    display: none;
  }

  .employees-table td:last-child {
    padding-bottom: 0;
  }

  .employee-modal-backdrop {
    place-items: center;
    padding: 12px;
  }

  .employee-dialog,
  .employee-confirm-dialog {
    width: 100%;
    max-height: calc(100vh - 24px);
    border-radius: var(--app-radius-dialog);
  }

  .employee-confirm-dialog .employee-dialog-header {
    align-items: flex-start;
  }

  .employee-confirm-dialog .employee-dialog-header h2 {
    overflow: visible;
    line-height: 1.25;
    text-overflow: clip;
    white-space: normal;
  }

  .employee-form-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 16px;
  }

  .employee-span-2 {
    grid-column: auto;
  }

  .employee-tabs {
    padding: 0 8px;
  }

  .employee-tab {
    padding: 0 12px;
  }

  .employee-editor-actions {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px 16px;
  }

  .employee-editor-actions button {
    min-width: 0;
  }
}

@media (max-height: 840px) {
  .app-sidebar .sidebar-nav {
    overflow-x: hidden;
    overflow-y: auto;
  }
}

.view-page-title {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 8px 10px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-panel);
  box-shadow: 0 3px 12px rgba(18, 75, 73, 0.07);
}

.view-page-title::after {
  position: absolute;
  bottom: -1px;
  left: 56px;
  width: 64px;
  height: 3px;
  content: "";
  background: var(--teal-dark);
  border-radius: 999px 999px 0 0;
}

.view-page-title-main {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.view-page-title-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  color: var(--teal-dark);
  background: rgba(98, 194, 196, 0.18);
  border: 1px solid rgba(8, 170, 164, 0.18);
  border-radius: 50%;
}

.view-icon-surface {
  color: var(--teal-dark);
  background: rgba(98, 194, 196, 0.18);
  border: 1px solid rgba(8, 170, 164, 0.18);
  border-radius: 50%;
}

.view-page-title-symbol {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.view-page-title .view-page-title-copy {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
  align-items: center;
  gap: 7px 10px;
}

.view-page-title .view-page-title-copy p {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  margin: 0;
  padding: 4px 9px;
  color: var(--teal-dark);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.045em;
  background: rgba(98, 194, 196, 0.14);
  border-radius: 999px;
}

.view-page-title .view-page-title-copy h1 {
  margin: 0;
  color: var(--app-text);
  font-size: 20px;
  font-weight: 650;
  line-height: 1.15;
}

.view-page-title .view-page-title-copy > small,
.view-page-title-description {
  margin: 0;
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

.view-page-title > :not(.view-page-title-main) {
  flex: 0 0 auto;
}

.employees-title-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.employees-total-subtle {
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.theme-dark .view-page-title-icon {
  color: #91d5d6;
  background: rgba(98, 194, 196, 0.16);
  border-color: rgba(117, 229, 223, 0.28);
}

.theme-dark .view-page-title {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.theme-dark .view-page-title .view-page-title-copy p {
  color: #91d5d6;
  background: rgba(98, 194, 196, 0.15);
}

.theme-dark .view-icon-surface {
  color: #91d5d6;
  background: rgba(98, 194, 196, 0.16);
  border-color: rgba(117, 229, 223, 0.28);
}

.view-new-action {
  min-width: 112px;
  height: 40px;
  padding: 0 15px 0 7px;
  gap: 9px;
  color: var(--teal-dark);
  background: var(--app-surface);
  border-color: rgba(8, 170, 164, 0.42);
  border-radius: var(--app-radius-control);
  box-shadow: 0 3px 10px rgba(18, 75, 73, 0.08);
  font-weight: 600;
  transition: transform var(--gp-motion-fast) ease, box-shadow var(--gp-motion-fast) ease, background var(--gp-motion-fast) ease, border-color var(--gp-motion-fast) ease, color var(--gp-motion-fast) ease;
}

.view-new-action-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  color: var(--teal-dark);
  background: rgba(98, 194, 196, 0.16);
  border-radius: 50%;
}

.view-new-action-icon .button-icon {
  width: 17px;
  height: 17px;
}

.view-new-action:hover:not(:disabled),
.view-new-action:focus-visible:not(:disabled) {
  color: #075f5d;
  background: rgba(98, 194, 196, 0.1);
  border-color: var(--teal-dark);
  box-shadow: 0 5px 14px rgba(18, 75, 73, 0.14);
  transform: translateY(-1px);
}

.theme-dark .view-new-action {
  color: #91d5d6;
  background: rgba(98, 194, 196, 0.08);
  border-color: rgba(117, 229, 223, 0.38);
  box-shadow: none;
}

.theme-dark .view-new-action-icon {
  color: #91d5d6;
  background: rgba(98, 194, 196, 0.16);
}

.theme-dark .view-new-action:hover:not(:disabled),
.theme-dark .view-new-action:focus-visible:not(:disabled) {
  color: #baf5f1;
  background: rgba(98, 194, 196, 0.17);
  border-color: #91d5d6;
}

@media (max-width: 720px) {
  .view-page-title {
    align-items: flex-start;
    gap: 10px;
    padding: 8px;
  }

  .view-page-title-main {
    flex-basis: 100%;
  }

  .view-page-title > :not(.view-page-title-main) {
    margin-left: auto;
  }

  .view-page-title .view-page-title-copy h1 {
    font-size: 18px;
  }

  .view-page-title::after {
    left: 54px;
  }
}
/* Empleados: maestro-detalle */
.employees-master-detail {
  display: grid;
  grid-template-columns: minmax(310px, 360px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.employees-master-panel,
.employee-detail-panel {
  min-width: 0;
  overflow: hidden;
}

.employees-master-panel .employees-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--app-border);
}

.employees-master-panel .employees-toolbar .field-group {
  gap: 4px;
}

.employees-master-panel .employees-toolbar .field-group input,
.employees-master-panel .employees-toolbar .field-group select {
  height: 36px;
  min-height: 36px;
  padding-left: 10px;
  font-size: 13px;
}

.employees-master-panel .employees-toolbar .field-group select {
  padding-right: 34px;
}

.employees-toolbar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
  align-items: end;
  gap: 8px;
}

.employees-order-direction {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--teal-dark);
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-control);
  cursor: pointer;
}

.employees-order-direction:hover,
.employees-order-direction:focus-visible {
  color: var(--app-surface-strong);
  background: var(--teal-dark);
  border-color: var(--teal-dark);
}

.employees-list {
  max-height: calc(100vh - 310px);
  min-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.employee-list-item {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 10px;
  width: 100%;
  align-items: center;
  gap: 11px;
  min-height: 68px;
  padding: 12px 14px;
  color: var(--app-text);
  text-align: left;
  background: var(--app-surface-strong);
  border: 0;
  border-bottom: 1px solid var(--app-border);
  cursor: pointer;
}

.employee-list-item::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  content: "";
  background: transparent;
}

.employee-list-item:hover,
.employee-list-item:focus-visible {
  background: var(--teal-soft);
}

.employee-list-item.is-selected {
  background: var(--teal-soft);
}

.employee-list-item.is-selected::before {
  background: var(--teal);
}

.employee-list-item.is-selected .employee-avatar {
  color: var(--app-surface-strong);
  background: var(--teal-dark);
  border-color: var(--teal-dark);
}

.employee-list-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.employee-list-copy strong,
.employee-list-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-duplicate-label {
    display: inline-flex;
    margin-left: .35rem;
    padding: .08rem .35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-warning-accent) 16%, transparent);
    color: var(--warning-strong, #8a5a00);
    font-size: .62rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .04em;
}

.bulk-personnel-dialog {
  width: min(920px, calc(100vw - 2rem));
  max-height: min(780px, calc(100vh - 2rem));
  overflow: hidden;
}

.bulk-personnel-tabs {
  flex: 0 0 auto;
}

.bulk-personnel-tabs .employee-tab {
  min-width: 140px;
}

.bulk-personnel-content {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow-y: auto;
}

.bulk-personnel-content > * {
  flex-shrink: 0;
}

.bulk-personnel-content > .employee-editor-actions {
  position: sticky;
  bottom: 0;
  background: var(--app-surface-strong);
}

.bulk-personnel-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 18px 20px 14px;
}

.bulk-personnel-fields .span-2 {
  grid-column: 1 / -1;
}

.bulk-personnel-dialog .field-group label {
  color: var(--app-text);
}

.bulk-personnel-help {
  margin: -2px 0 0;
  padding: 10px 12px;
  color: var(--app-muted);
  background: var(--app-surface-soft);
  border-left: 3px solid var(--teal);
  border-radius: var(--app-radius-panel);
  font-size: 12px;
  line-height: 1.45;
}

.bulk-personnel-selection {
  min-height: 0;
  margin: 0 20px 18px;
  overflow: hidden;
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-panel);
}

.bulk-personnel-selection > header {
  display: flex;
  align-items: end;
  gap: 12px;
  padding: 12px;
  background: var(--app-surface-soft);
  border-bottom: 1px solid var(--app-border);
}

.bulk-personnel-selection > header .field-group {
  flex: 1;
}

.bulk-personnel-toggle-action {
  min-width: 170px;
  height: 40px;
}

.bulk-personnel-list {
  max-height: 280px;
  overflow: auto;
}

.bulk-personnel-employee {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 58px;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-top: 1px solid var(--app-border);
}

.bulk-personnel-employee:first-child {
  border-top: 0;
}

.bulk-personnel-employee:hover {
  background: var(--teal-soft);
}

.bulk-personnel-employee > input {
  width: 17px;
  height: 17px;
  accent-color: var(--teal-dark);
}

.bulk-personnel-employee span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.bulk-personnel-employee strong,
.bulk-personnel-employee small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bulk-personnel-employee small {
  color: var(--app-muted);
  font-size: 12px;
}

.bulk-personnel-employee em {
  color: var(--warning-strong, #8a5a00);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .04em;
}

.bulk-personnel-result {
  display: grid;
  gap: 4px;
  margin: 0 20px 18px;
  padding: 10px 12px;
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-panel);
}

.bulk-personnel-result span {
  color: var(--danger-text, #a72d2d);
  font-size: 12px;
}

.bulk-personnel-dialog .employee-editor-actions button {
  width: 42px;
}

.bulk-personnel-selected {
  margin-right: auto;
  color: var(--app-muted);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .bulk-personnel-dialog { width: 100%; max-height: calc(100vh - 20px); }
  .bulk-personnel-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 8px; overflow: hidden; }
  .bulk-personnel-tabs .employee-tab { min-width: 0; padding-inline: 6px; font-size: 12px; }
  .bulk-personnel-fields { grid-template-columns: 1fr; }
  .bulk-personnel-fields .span-2 { grid-column: auto; }
  .bulk-personnel-selection > header { align-items: stretch; flex-direction: column; }
  .bulk-personnel-toggle-action { width: 100%; min-width: 0; }
}
.employee-import-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin: 0; padding: 0; list-style: none; }
.employee-import-steps li { display: grid; grid-template-columns: auto 1fr; gap: .15rem .5rem; align-items: center; padding: .7rem; border: 1px solid var(--app-border); border-radius: var(--app-radius-panel); background: var(--app-surface-soft); }
.employee-import-steps li > span { grid-row: 1 / 3; display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border-radius: 50%; background: var(--teal-dark); color: white; font-weight: 800; }
.employee-import-steps small { color: var(--app-muted); }
.employee-import-map { border: 1px solid var(--app-border); border-radius: var(--app-radius-panel); padding: .65rem .75rem; }
.employee-import-map summary { cursor: pointer; color: var(--teal-dark); font-weight: 700; }
.employee-import-map div { display: grid; grid-template-columns: 8rem 1fr; gap: .5rem; padding: .45rem 0; border-top: 1px solid var(--app-border); }
.employee-import-map div:first-of-type { margin-top: .5rem; }
.employee-import-map span { color: var(--app-muted); }
@media (max-width: 700px) { .employee-import-steps { grid-template-columns: 1fr; } .employee-import-map div { grid-template-columns: 1fr; } }
.employee-list-copy strong {
  font-weight: 500;
}

.employee-list-copy small {
  color: var(--app-muted);
  font-size: 12px;
}

.employee-list-status {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.employee-list-status.is-active {
  background: #219b62;
  box-shadow: 0 0 0 3px rgba(33, 155, 98, 0.14);
}

.employee-list-status.is-inactive {
  background: #c34a4a;
  box-shadow: 0 0 0 3px rgba(195, 74, 74, 0.12);
}

.employee-detail-panel {
  min-height: 560px;
}

.employee-detail-empty {
  display: grid;
  min-height: 560px;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 30px;
  color: var(--app-muted);
  text-align: center;
}

.employee-detail-empty strong {
  color: var(--app-text);
  font-size: 17px;
  font-weight: 500;
}

.employee-detail-header {
  display: flex;
  min-height: 104px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--app-border);
}

.employee-detail-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.employee-detail-identity > span:last-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.employee-detail-identity small {
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 500;
}

.employee-detail-identity h2 {
  overflow: hidden;
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-detail-avatar {
  flex-basis: 58px;
  width: 58px;
  height: 58px;
  font-size: 16px;
}

.employee-detail-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.employee-edit-action {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: var(--app-radius-control);
  cursor: pointer;
}

.employee-detail-contact-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--app-border);
  border-bottom: 1px solid var(--app-border);
}

.employee-detail-contact-strip > span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 14px 18px;
  background: var(--app-surface-soft);
}

.employee-detail-contact-strip small,
.employee-detail-data dt {
  color: var(--app-muted);
  font-size: 11px;
}

.employee-detail-contact-strip strong {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-entry-date-value,
.employee-entry-date-editor {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.employee-entry-date-value {
  justify-content: space-between;
}

.employee-entry-date-value .icon-action,
.employee-entry-date-editor .icon-action {
  width: 32px;
  min-width: 32px;
  height: 32px;
}

.employee-entry-date-editor input {
  width: 100%;
  min-width: 0;
  min-height: 34px;
}

.employee-detail-sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: 22px;
}

.employee-detail-section {
  min-width: 0;
}

.employee-detail-section-wide {
  grid-column: auto;
}

.employee-detail-section > header {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: var(--app-sidebar-hover);
  border-left: 3px solid var(--teal);
  border-bottom: 1px solid var(--app-border);
  border-radius: var(--app-radius-compact);
}

.employee-detail-section h3 {
  margin: 0;
  color: var(--app-text);
  font-size: 16px;
  font-weight: 700;
}

.employee-section-icon {
  width: 19px;
  height: 19px;
  color: var(--teal-dark);
}

.employee-detail-data {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px;
  margin: 0;
}

.employee-detail-data > div {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
}

.employee-detail-data dt,
.employee-detail-data dd {
  margin: 0;
}

.employee-detail-data dd {
  overflow-wrap: anywhere;
  color: var(--app-text);
}

.employee-detail-wide {
  grid-column: 1 / -1;
}

.employee-other-data {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.employee-detail-tabs {
  display: flex;
  min-height: 48px;
  overflow-x: auto;
  background: var(--app-surface-strong);
  border-bottom: 1px solid var(--app-border);
  scrollbar-width: thin;
}

.employee-detail-tab {
  position: relative;
  display: inline-flex;
  flex: 1 0 auto;
  min-width: 112px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  color: var(--app-muted);
  font-size: 13px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.employee-detail-tab::after {
  position: absolute;
  right: 10px;
  bottom: 0;
  left: 10px;
  height: 3px;
  content: "";
  background: transparent;
}

.employee-detail-tab:hover,
.employee-detail-tab:focus-visible {
  color: var(--teal-dark);
  background: var(--teal-soft);
}

.employee-detail-tab.is-active {
  color: var(--teal-dark);
  font-weight: 600;
  background: var(--teal-soft);
}

.employee-detail-tab.is-active::after {
  background: var(--teal);
}

.employee-detail-tab-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.employee-summary-sections {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.employee-section-loading,
.employee-section-error {
  display: flex;
  min-height: 260px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  color: var(--app-muted);
}

.employee-section-error {
  flex-direction: column;
  color: var(--danger-text);
}

.employee-section-block {
  min-width: 0;
  padding: 22px;
}

.employee-section-title {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 10px 8px 12px;
  background: var(--app-sidebar-hover);
  border-left: 3px solid var(--teal);
  border-bottom: 1px solid var(--app-border);
  border-radius: var(--app-radius-compact);
}

.employee-section-title > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.employee-section-title strong {
  color: var(--app-text);
  font-size: 16px;
  font-weight: 700;
}

.employee-section-title small {
  color: var(--app-muted);
}

.employee-section-command {
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  color: var(--teal-dark);
  font-size: 12px;
  background: var(--app-surface-soft);
  border-color: var(--teal);
  box-shadow: none;
}

.employee-section-command:hover,
.employee-section-command:focus-visible {
  color: #062423;
  background: var(--teal);
  border-color: var(--teal);
}

.employee-section-border-top {
  border-top: 1px solid var(--app-border);
}

.employee-current-employment {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.8fr) minmax(0, 1fr) 44px;
  gap: 1px;
  overflow: hidden;
  background: var(--app-border);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-panel);
}

.employee-current-employment > div {
  display: grid;
  min-width: 0;
  min-height: 84px;
  align-content: center;
  gap: 4px;
  padding: 12px 14px;
  background: var(--app-surface-soft);
}

.employee-current-employment small,
.employee-current-employment span {
  overflow: hidden;
  color: var(--app-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-current-employment strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-current-employment > button {
  align-self: center;
  justify-self: center;
}

@media (max-width: 900px) {
  .employee-current-employment {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
  }

  .employee-current-employment > div:nth-child(3) {
    grid-column: 1 / 3;
  }

  .employee-current-employment > button {
    grid-column: 3;
    grid-row: 1 / 3;
  }
}

@media (max-width: 620px) {
  .employee-current-employment {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .employee-current-employment > div,
  .employee-current-employment > div:nth-child(3) {
    grid-column: 1;
  }

  .employee-current-employment > button {
    grid-column: 2;
    grid-row: 1 / 4;
  }
}

.employee-balance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--app-border);
  border-bottom: 1px solid var(--app-border);
}

.employee-balance-grid > span {
  display: grid;
  min-height: 78px;
  place-content: center;
  gap: 2px;
  padding: 12px 16px;
  text-align: center;
  background: var(--app-surface-soft);
}

.employee-balance-grid small,
.employee-balance-grid em {
  color: var(--app-muted);
  font-size: 11px;
  font-style: normal;
}

.employee-balance-grid strong {
  color: var(--teal-dark);
  font-size: 20px;
  font-weight: 600;
}

.employee-request-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
}

.employee-request-tabs {
  display: flex;
  flex: 1 1 auto;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding: 0;
  background: transparent;
  border: 0;
  scrollbar-width: thin;
}

.employee-request-tab {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 7px;
  padding: 0 13px;
  color: var(--app-muted);
  font-size: 12px;
  background: var(--app-surface-strong);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-control);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--gp-motion-fast) ease, background var(--gp-motion-fast) ease, border-color var(--gp-motion-fast) ease, box-shadow var(--gp-motion-fast) ease, transform var(--gp-motion-fast) ease;
}

.employee-request-tab .button-icon {
  width: 16px;
  height: 16px;
}

.employee-request-tab:hover,
.employee-request-tab:focus-visible {
  color: var(--teal-dark);
  background: var(--teal-soft);
  border-color: rgba(98, 194, 196, 0.58);
  box-shadow: 0 7px 16px rgba(23, 147, 142, 0.12);
  transform: none;
}

.employee-request-tab.is-active {
  color: var(--teal-dark);
  font-weight: 600;
  background: rgba(98, 194, 196, 0.16);
  border-color: var(--teal);
  box-shadow: inset 3px 0 0 var(--teal);
}

.employee-request-shortcuts {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
}

.employee-request-shortcut {
  min-width: max-content;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding-inline: 11px;
  font-size: 12px;
  white-space: nowrap;
}

.employee-request-shortcut .button-icon {
  width: 16px;
  height: 16px;
}

.theme-dark .employee-balance-grid strong,
.theme-dark .employee-request-tab:hover,
.theme-dark .employee-request-tab:focus-visible,
.theme-dark .employee-request-tab.is-active {
  color: #91d5d6;
}

@media (max-width: 720px) {
  .employee-balance-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .employee-balance-grid > span {
    min-height: 62px;
  }

  .employee-request-tabs {
    width: 100%;
  }

  .employee-request-navigation {
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8px;
    padding-inline: 10px;
  }

  .employee-request-shortcuts {
    width: 100%;
    justify-content: flex-end;
  }
}

.employee-section-empty {
  display: grid;
  min-height: 150px;
  place-items: center;
  align-content: center;
  gap: 9px;
  color: var(--app-muted);
  text-align: center;
}

.employee-record-table-shell {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--app-border);
}

.employee-record-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  text-align: left;
}

.employee-record-table th,
.employee-record-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--app-border);
}

.employee-record-table th {
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--app-surface-soft);
}

.employee-record-table tbody tr:last-child td {
  border-bottom: 0;
}

.employee-record-table tbody tr:hover {
  background: var(--teal-soft);
}

.employee-record-state {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 9px;
  color: var(--teal-dark);
  font-size: 12px;
  background: var(--teal-soft);
  border: 1px solid var(--teal-border);
  border-radius: var(--app-radius-panel);
}

.employee-service-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--app-border);
  border-bottom: 1px solid var(--app-border);
}

.employee-service-stats > span {
  display: grid;
  min-height: 78px;
  place-items: center;
  align-content: center;
  gap: 3px;
  background: var(--app-surface-soft);
}

.employee-service-stats strong {
  color: var(--teal-dark);
  font-size: 22px;
  font-weight: 500;
}

.employee-service-stats small {
  color: var(--app-muted);
}

.employee-compact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.employee-compact-grid > .employee-section-block:nth-child(even) {
  border-left: 1px solid var(--app-border);
}

.employee-compact-wide {
  grid-column: 1 / -1;
  border-top: 1px solid var(--app-border);
  border-left: 0 !important;
}

.employee-record-list {
  display: grid;
}

.employee-record-list > div {
  display: grid;
  gap: 4px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--app-border);
}

.employee-record-list > div:last-child {
  border-bottom: 0;
}

.employee-record-list strong {
  font-weight: 500;
}

.employee-record-list span {
  color: var(--app-muted);
  font-size: 12px;
}

.employee-service-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

.employee-service-summary > div {
  display: grid;
  gap: 5px;
  padding: 14px;
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
}

.employee-service-summary dt,
.employee-service-summary dd {
  margin: 0;
}

.employee-service-summary dt {
  color: var(--app-muted);
  font-size: 12px;
}

.employee-service-summary dd {
  color: var(--teal-dark);
  font-size: 20px;
}
@media (max-width: 1120px) {
  .employees-master-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .employee-detail-sections {
    grid-template-columns: minmax(0, 1fr);
  }

  .employee-detail-section-wide {
    grid-column: auto;
  }

  .employee-detail-data,
  .employee-other-data {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .employees-list {
    max-height: 360px;
    min-height: 0;
  }

  .employee-detail-panel,
  .employee-detail-empty {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .employee-detail-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px;
  }

  .employee-detail-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .employee-detail-contact-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .employee-detail-sections {
    gap: 20px;
    padding: 18px 16px;
  }
}

@media (max-width: 460px) {
  .employees-toolbar-row {
    grid-template-columns: minmax(0, 1fr) 40px;
  }

  .employees-order-filter {
    grid-column: 1;
  }

  .employees-status-filter {
    grid-column: 1 / -1;
  }

  .employees-order-direction {
    grid-column: 2;
  }

  .employee-detail-data,
  .employee-other-data {
    grid-template-columns: minmax(0, 1fr);
  }

  .employee-detail-wide {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  .employee-detail-tab {
    flex-grow: 0;
    min-width: 138px;
  }

  .employee-service-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .employee-compact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .employee-compact-grid > .employee-section-block:nth-child(even) {
    border-top: 1px solid var(--app-border);
    border-left: 0;
  }

  .employee-compact-wide {
    grid-column: auto;
  }

  .employee-service-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .employee-section-block {
    padding: 18px 16px;
  }
}
/* Empleados: fotografía, resumen y acciones de estado. */
.employee-avatar {
  overflow: hidden;
}

.employee-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.employee-summary-sections {
  grid-template-columns: minmax(0, 1fr);
}

.employee-photo-editor {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 14px;
  background: var(--app-surface-soft);
  border: 1px solid var(--app-border);
}

.employee-photo-preview {
  flex-basis: 82px;
  width: 82px;
  height: 82px;
  font-size: 20px;
}

.employee-photo-controls {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.employee-photo-controls > span {
  font-weight: 600;
}

.employee-photo-controls small {
  color: var(--app-muted);
}

.employee-photo-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.employee-photo-select {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.employee-photo-select .button-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.employee-photo-select:hover {
  color: var(--teal-dark);
  background: var(--teal-soft);
  border-color: var(--teal);
}

.employee-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.employee-photo-select:focus-within {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.employee-status-action.danger-icon-action {
  color: #9f1f18;
  background: #ffe3e0;
  border-color: #dc5c54;
}

.employee-status-action.danger-icon-action:hover {
  color: #7f130e;
  background: #ffc9c4;
  border-color: #c9382f;
  box-shadow: 0 5px 14px rgba(159, 31, 24, 0.22);
}

.theme-dark .employee-status-action.danger-icon-action {
  color: #ffd2ce;
  background: rgba(173, 45, 37, 0.38);
  border-color: rgba(255, 126, 118, 0.72);
}

.theme-dark .employee-status-action.danger-icon-action:hover {
  background: rgba(190, 52, 43, 0.58);
}

@media (max-width: 620px) {
  .employee-photo-editor {
    align-items: flex-start;
  }

  .employee-photo-preview {
    flex-basis: 64px;
    width: 64px;
    height: 64px;
  }
}

.employee-editor-icon-actions .employee-editor-icon-action {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  flex: 0 0 42px;
  padding: 0;
}

@media (max-width: 720px) {
  .employee-editor-icon-actions {
    display: flex;
    justify-content: flex-end;
  }
}

@media (max-width: 560px) {
  .pending-entry-panel {
    margin-top: 0;
  }

  .pending-entry-list {
    padding: 0 16px;
  }

  .pending-entry-list li {
    align-items: flex-start;
  }

  .pending-entry-time {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
}
.general-settings-form {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 24px;
    padding: 24px;
    box-sizing: border-box;
}

.general-settings-grid {
    columns: 2 440px;
    column-gap: 24px;
}

.general-settings-group {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0 0 24px;
    overflow: hidden;
    background: var(--app-surface-strong);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-panel);
    break-inside: avoid;
    vertical-align: top;
}

.general-settings-group > header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 17px;
    background: var(--app-surface-soft);
    border-bottom: 1px solid var(--app-border);
}

.general-settings-group h3,
.general-settings-group small {
    margin: 0;
}

.general-settings-group h3 {
    font-size: 16px;
}

.general-settings-group small {
    color: var(--app-muted);
    font-size: 11px;
}

.general-settings-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--teal-dark);
    background: color-mix(in srgb, var(--teal) 18%, var(--app-surface));
    border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--app-border));
    border-radius: var(--app-radius-compact);
}

.general-option-switch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    cursor: pointer;
}

.general-option-switch + .general-option-switch,
.general-settings-group > .general-settings-fields {
    border-top: 1px solid var(--app-border);
}

.general-option-switch > span {
    display: grid;
    gap: 4px;
}

.general-option-switch strong {
    font-size: 14px;
}

.general-option-switch input {
    width: 42px;
    height: 22px;
    accent-color: var(--teal);
    cursor: pointer;
}

.general-settings-group-wide {
    column-span: all;
    margin-bottom: 0;
}

@media (min-width: 901px) {
    .general-settings-group-wide {
        margin-top: 24px;
    }
}

.general-settings-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 18px 20px 20px;
}

.general-settings-fields-spacious {
    padding-top: 22px;
    padding-bottom: 22px;
}

.general-time-settings-fields > .field-group {
    grid-template-rows: auto 40px minmax(30px, auto);
    align-content: start;
}

.general-time-settings-fields > .field-group > input,
.general-time-settings-fields > .field-group > .general-input-unit {
    height: 40px;
}

.general-time-settings-fields > .field-group > small {
    line-height: 1.35;
}

.general-settings-group .field-group label {
    color: var(--app-muted);
}

.general-settings-group .field-group input,
.general-settings-group .field-group select {
    width: 100%;
    height: 40px;
    padding: 0 11px;
    color: var(--app-text);
    background-color: var(--app-surface-strong);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-control);
    outline: none;
}

.general-settings-group .field-group input:focus,
.general-settings-group .field-group select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(98, 194, 196, 0.16);
}

.general-season-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.general-input-unit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
}

.general-input-unit input {
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.general-input-unit > small {
    display: grid;
    place-items: center;
    min-width: 52px;
    padding: 0 10px;
    color: var(--app-muted);
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border);
    border-left: 0;
    border-radius: 0 var(--app-radius-control) var(--app-radius-control) 0;
    font-size: 11px;
    font-weight: 700;
}

.general-settings-context {
    margin: 0;
}

.general-settings-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid var(--app-border);
}

.general-settings-actions > small {
    color: var(--app-muted);
    font-size: 11px;
}

@media (max-width: 900px) {
    .general-settings-grid {
        columns: 1;
    }

    .general-settings-group-wide {
        column-span: none;
    }
}

@media (max-width: 600px) {
    .general-settings-form {
        gap: 18px;
        padding: 16px;
    }

    .general-settings-fields,
    .general-season-fields {
        grid-template-columns: 1fr;
    }

    .general-option-switch,
    .general-settings-actions {
        align-items: stretch;
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .general-option-switch input {
        justify-self: end;
    }

    .general-settings-actions button {
        width: 100%;
    }
}
.technical-access-banner,
.application-notice {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--app-border);
    background: color-mix(in srgb, var(--teal, #62c2c4) 8%, var(--app-surface));
}

.technical-access-banner {
    min-height: 54px;
    padding-block: .5rem;
}

.technical-access-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    color: var(--teal-dark);
    background: color-mix(in srgb, var(--teal, #62c2c4) 14%, var(--app-surface));
    border: 1px solid color-mix(in srgb, var(--teal, #62c2c4) 42%, var(--app-border));
    border-radius: 50%;
}

.technical-access-icon .button-icon {
    width: 17px;
    height: 17px;
}

.technical-access-banner > .technical-access-copy,
.application-notice > span { display: grid; min-width: 0; }

.technical-access-copy {
    gap: 2px;
}

.technical-access-copy strong {
    font-size: .78rem;
}

.technical-access-banner small,
.application-notice small { color: var(--app-muted); }

.technical-access-copy small {
    overflow: hidden;
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.technical-access-return {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-left: auto;
    padding: 0 11px;
    color: var(--teal-dark);
    background: var(--app-surface);
    border: 1px solid color-mix(in srgb, var(--teal, #62c2c4) 40%, var(--app-border));
    border-radius: var(--app-radius-control);
    font: inherit;
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--app-shadow, #18292f) 8%, transparent);
    transition: color var(--gp-motion-fast) ease, background var(--gp-motion-fast) ease, border-color var(--gp-motion-fast) ease, transform var(--gp-motion-fast) ease, box-shadow var(--gp-motion-fast) ease;
}

.technical-access-return:hover,
.technical-access-return:focus-visible {
    color: #055f5c;
    background: color-mix(in srgb, var(--teal, #62c2c4) 12%, var(--app-surface));
    border-color: var(--teal, #62c2c4);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--teal, #62c2c4) 18%, transparent);
    transform: translateY(-1px);
}

.technical-access-return .button-icon {
    width: 16px;
    height: 16px;
}

.sidebar-nav .technical-portal-nav {
    color: var(--teal-dark);
    background: color-mix(in srgb, var(--teal, #62c2c4) 7%, transparent);
    border-color: color-mix(in srgb, var(--teal, #62c2c4) 28%, transparent);
}

.sidebar-nav .technical-portal-nav .app-icon {
    color: var(--teal-dark);
}

.app-dashboard.theme-dark .technical-access-icon,
.app-dashboard.theme-dark .technical-access-return,
.app-dashboard.theme-dark .sidebar-nav .technical-portal-nav {
    color: #9af0ec;
}

@media (max-width: 620px) {
    .technical-access-banner {
        gap: .5rem;
        padding-inline: .7rem;
    }

    .technical-access-return {
        width: 34px;
        flex: 0 0 34px;
        padding: 0;
    }

    .technical-access-return > span {
        display: none;
    }
}

.login-public-notices { display: grid; gap: .45rem; margin-bottom: .8rem; }
.login-public-notices article { display: grid; gap: .15rem; padding: .65rem .75rem; border: 1px solid var(--app-border); border-radius: var(--app-radius-panel); color: var(--app-text); background: var(--app-surface-soft); font-size: .76rem; }
.login-public-notices article.is-blocked { border-color: var(--app-warning, #b45309); }

.sidebar-mobile-toggle,
.sidebar-mobile-close,
.sidebar-mobile-backdrop {
  display: none;
}

@media (max-width: 900px) {
  .help-center-host {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 120;
  }

  .sidebar-desktop-toggle {
    display: none;
  }

  .sidebar-mobile-toggle {
    display: inline-flex;
  }

  .app-sidebar {
    display: none;
  }

  .sidebar-mobile-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
    border: 0;
    border-radius: 0;
    background: var(--modal-overlay);
  }

  .app-sidebar.is-mobile-open {
    --mobile-menu-width: min(280px, calc(100vw - 48px));
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 110;
    display: flex;
    width: var(--mobile-menu-width);
    flex-basis: var(--mobile-menu-width);
    background: var(--app-sidebar-background);
    box-shadow: var(--app-shadow);
  }

  .app-sidebar.is-mobile-open .sidebar-brand {
    min-height: 80px;
    padding: 8px 52px 8px 16px;
  }

  .app-sidebar.is-mobile-open .sidebar-brand .brand-logo-img {
    width: 120px;
    height: 84px;
    content: image-set(url("/images/gp-logo-menu-movil-2026.png") 1x, url("/images/gp-logo-menu-movil-2026-2x.png") 2x, url("/images/gp-logo-menu-movil-2026-3x.png") 3x);
    clip-path: none;
    transform: none;
  }

  .app-sidebar.is-mobile-open .sidebar-mobile-close {
    display: inline-flex;
    position: absolute;
    top: 12px;
    right: 10px;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    line-height: 0;
  }

  .app-sidebar.is-mobile-open .sidebar-nav {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px 10px;
  }

  .app-sidebar.is-mobile-open .app-nav-group {
    color: var(--app-muted);
  }

  .app-sidebar.is-mobile-open .app-nav-text {
    width: auto;
    opacity: 1;
    transform: none;
  }

  .app-sidebar.is-mobile-open .app-nav-link,
  .app-sidebar.is-mobile-open .sidebar-logout {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 10px;
  }

  .app-sidebar.is-mobile-open .sidebar-workspace-label,
  .app-sidebar.is-mobile-open .sidebar-workspace-option span {
    display: block;
  }

  .app-sidebar.is-mobile-open .sidebar-workspace-context {
    gap: 7px;
    padding: 10px;
  }

  .app-sidebar.is-mobile-open .sidebar-workspace-switch {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .app-sidebar.is-mobile-open .sidebar-workspace-option {
    width: 100%;
    min-height: 40px;
    justify-content: flex-start;
    padding: 0 10px;
  }

  .app-sidebar.is-mobile-open .app-nav-link::after,
  .app-sidebar.is-mobile-open .sidebar-logout::after,
  .app-sidebar.is-mobile-open .sidebar-workspace-option::after {
    display: none;
  }

  html:has(.app-sidebar.is-mobile-open) {
    overflow: hidden;
  }
}

/* Base comun: todos los controles de una linea comparten altura y superficie. */
:where(#app) :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="image"]):not([type="submit"]):not([type="reset"]):not([type="button"]), select, textarea) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  font-family: inherit;
  font-size: inherit;
  color: var(--app-text, var(--ink));
  background-color: var(--app-surface-strong, #fff);
  border: 1px solid var(--app-border, var(--border));
  border-radius: var(--app-form-control-radius, 4px);
}

#app :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="image"]):not([type="submit"]):not([type="reset"]):not([type="button"]), select:not([multiple]):not([size])) {
  height: var(--app-form-control-height, 40px);
  min-height: var(--app-form-control-height, 40px);
  padding-block: 0;
}

:where(#app) :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
  padding-inline: 12px;
}

#app :where(select[multiple], select[size], textarea) {
  min-height: var(--app-form-control-height, 40px);
  padding: 10px 12px;
}

#app :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea):focus-visible {
  border-color: var(--teal);
  outline: none;
  box-shadow: 0 0 0 2px rgba(98, 194, 196, .18);
}

#app :where(input, textarea)[readonly] {
  color: var(--app-muted, var(--muted));
  background-color: var(--app-surface-soft, #f4f8f9);
}

#app :where(input, select, textarea).is-invalid,
#app :where(input, select, textarea)[aria-invalid="true"],
#app :where(.field-group.has-error, .config-form-field.has-error) :where(input, select, textarea) {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(216, 75, 75, .14);
}

#app .field-group label {
  color: var(--app-muted, var(--muted));
}

/* Foco comun de acciones; los circulos y estados de peligro conservan su estilo. */
:where(.primary-action, .secondary-action, .outline-action, .compact-action, .back-action, .panel-action, .primary-modal-action, .secondary-modal-action, .danger-modal-action, .requests-retry) {
  border-radius: var(--app-radius-control);
}

:is(.icon-action, .primary-modal-action, .secondary-modal-action, .danger-modal-action, .back-action, .compact-action):focus-visible {
  outline: 2px solid var(--teal-dark);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .icon-action,
  .view-new-action,
  .settings-group-card,
  .settings-group-link {
    transition: none;
  }
}
/* Hora del dia: formato de 24 horas independiente del selector regional del navegador. */
.campo-hora-24 { --app-hora-error: #b42318; display: flex; flex-direction: column; gap: .25rem; width: 100%; min-width: 0; }
.theme-dark .campo-hora-24 { --app-hora-error: #ffb4b4; }
.campo-hora-24 > input { box-sizing: border-box; width: 100%; min-width: 0; padding: 9px 11px; font: inherit; color: var(--app-text); background: var(--app-surface-strong); border: 1px solid var(--app-border); border-radius: var(--app-radius-control); font-variant-numeric: tabular-nums; }
.campo-hora-24 > input:focus-visible { outline: 2px solid var(--teal-dark, #24676f); outline-offset: 2px; }
.campo-hora-24 > input[aria-invalid="true"] { border-color: var(--app-hora-error); }
.campo-hora-24-error { color: var(--app-hora-error); font-size: .8rem; }

/* Confirmacion compartida de cambios pendientes: misma jerarquia que los dialogos GP. */
.changes-pending-backdrop { z-index: 12000; }
.changes-pending-copy { padding: 4px 22px 16px; color: var(--app-text); line-height: 1.5; }
.changes-pending-backdrop .employee-editor-actions { flex-wrap: wrap; }

.calendar-keyboard-help { margin: 0; padding: .5rem 0; color: var(--app-muted); font-size: .8rem; line-height: 1.5; }
.absence-calendar-panel > .calendar-keyboard-help { padding: .65rem 1rem; }
.calendar-year-header + .calendar-keyboard-help { margin-inline: 22px; }
@media (max-width: 560px) { .calendar-year-header + .calendar-keyboard-help { margin-inline: 14px; } }
[data-gp-calendario] button:focus-visible,
[data-gp-pestanas] [role="tab"]:focus-visible { outline: 2px solid var(--app-accent, var(--teal-dark)); outline-offset: 2px; }

/* Las decisiones conservan icono, texto accesible y verbo visible, incluso durante el proceso. */
button.icon-action.gp-decision-action,
.employee-editor-icon-actions button.gp-decision-action { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: auto; height: auto; min-width: 42px; min-height: 42px; max-width: 100%; flex: 0 1 auto; padding: .55rem .8rem; border-radius: var(--app-radius-control); font: inherit; font-size: var(--app-font-small); font-weight: 700; line-height: 1.35; white-space: normal; text-align: center; }
.gp-decision-action > span:not(.inline-spinner) { min-width: 0; overflow-wrap: anywhere; }
.gp-decision-action > svg, .gp-decision-action > .inline-spinner { flex: 0 0 18px; width: 18px; height: 18px; }
.employee-editor-icon-actions:has(.gp-decision-action) { flex-wrap: wrap; gap: .625rem; }

@media (pointer: coarse) { .calendar-mini-day { min-height: 40px; } }

.trace-toolbar { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.trace-query-toggle { display: flex; align-items: center; gap: .5rem; font-size: var(--app-font-small); }
.trace-query-toggle input { width: auto; accent-color: var(--gp-contrast); }
.trace-scope-note { color: var(--app-muted); font-size: var(--app-font-small); line-height: 1.5; margin-block: .75rem; }
.trace-pagination { flex-wrap: wrap; gap: .75rem; }
.trace-pagination form, .trace-pagination label { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.trace-pagination input, .trace-pagination select { max-width: 6rem; padding: .5rem; border: 1px solid var(--app-border); border-radius: var(--app-radius-control); background: var(--app-surface); color: var(--app-text); font: inherit; }

/* Orientacion compartida de formularios, sin modificar sus operaciones. */
.form-section-index { display: flex; flex-wrap: wrap; gap: .5rem; }
.form-section-index button { min-height: 40px; padding: .5rem .75rem; border: 1px solid var(--app-border); border-radius: var(--app-radius-compact); background: var(--app-surface); color: var(--app-text); font: inherit; font-size: var(--app-font-small); cursor: pointer; }
.form-section-index button:focus-visible, .form-error-summary button:focus-visible, [data-form-section]:focus-visible { outline: 2px solid var(--gp-contrast); outline-offset: 2px; }
[data-form-section], .form-error-summary { scroll-margin-block-start: 6rem; }
.form-flow-note { margin: 0; color: var(--app-muted); font-size: var(--app-font-small); line-height: 1.5; }
.form-error-summary { grid-column: 1 / -1; padding: .75rem; border: 1px solid var(--app-danger-accent, #ad3434); border-radius: var(--app-radius-control); color: var(--app-text); background: var(--app-surface); }
.form-error-summary[hidden] { display: none; }
.form-error-summary ul { margin: .5rem 0 0; padding-left: 1.25rem; }
.form-error-summary button { border: 0; background: transparent; color: var(--app-text); text-align: left; text-decoration: underline; font: inherit; padding: .25rem 0; cursor: pointer; }
.modal-backdrop .form-error-summary {
  min-width: 0;
  padding: .5rem .75rem;
  font-size: var(--app-font-small);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.modal-backdrop form > .form-error-summary {
  margin: .75rem 1rem 0;
  max-block-size: min(9rem, 25dvh);
  overflow-y: auto;
  flex-shrink: 0;
}
.modal-backdrop .employee-editor-form:has(> .form-error-summary:not([hidden])) {
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.modal-backdrop .app-field-error { overflow-wrap: anywhere; }
.schedule-copy-panel, .schedule-week-preview { padding: .75rem; border: 1px solid var(--app-border); border-radius: var(--app-radius-panel); background: var(--app-surface); }
.schedule-copy-panel summary, .schedule-week-preview summary { cursor: pointer; font-weight: 600; }
.schedule-copy-panel > * + * { margin-top: .75rem; }
.schedule-copy-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem; }
.schedule-copy-fields > label { display: grid; align-content: start; gap: .5rem; }
.schedule-copy-fields select { width: 100%; min-height: 40px; border: 1px solid var(--app-border); border-radius: var(--app-radius-control); color: var(--app-text); background: var(--app-surface); font: inherit; }
.schedule-copy-fields fieldset { display: flex; flex-wrap: wrap; gap: .5rem .75rem; min-width: 0; border: 1px solid var(--app-border); border-radius: var(--app-radius-control); }
.schedule-copy-review { padding: .75rem; border-left: 3px solid var(--gp-contrast); }
.schedule-copy-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.schedule-week-preview ul { display: grid; gap: .5rem; padding: 0; list-style: none; }
.schedule-week-preview li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--app-border); font-size: var(--app-font-small); }
.schedule-editor > .schedule-editor-actions { position: sticky; bottom: 0; z-index: 2; background: var(--app-surface); padding-block: .75rem; border-top: 1px solid var(--app-border); }
.topbar-company-context { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; }
.topbar-company-context .topbar-company-selector { min-width: 0; max-width: 100%; }
.topbar-company-context .topbar-company { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-role-examples { border: 1px solid var(--app-border); border-radius: var(--app-radius-panel); padding: .75rem; color: var(--app-text); }
.demo-role-examples summary { cursor: pointer; font-weight: 600; }
.demo-role-examples article { padding-block: .75rem; }
.demo-role-examples p, .demo-role-examples small { font-size: var(--app-font-small); line-height: 1.5; color: var(--app-muted); }
@media (max-width: 600px) {
 .schedule-copy-fields { grid-template-columns: minmax(0, 1fr); }
 .schedule-week-preview li { grid-template-columns: minmax(0, 1fr); }
 .topbar-company-context .topbar-company-selector select { max-width: 100%; }
}

.theme-dark .form-section-index button:focus-visible, .theme-dark .form-error-summary button:focus-visible, .theme-dark [data-form-section]:focus-visible { outline-color: var(--gp-primary); }

.schedule-copy-fields input[type="checkbox"] { accent-color: var(--gp-contrast); }

/* Consulta de listas grandes: busqueda dentro del desplegable, sin ampliar el formulario. */
.searchable-selector { display: grid; min-width: 0; gap: .35rem; align-content: start; }
.searchable-selector label { font-size: var(--app-font-small, 13px); color: var(--app-muted); }
.searchable-selector input, .searchable-selector select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 38px; padding: 8px 10px; border: 1px solid var(--app-border); border-radius: var(--app-radius-control); color: var(--app-text); background-color: var(--app-surface-strong); font: inherit; font-size: var(--app-font-small, 13px); }
.searchable-selector :is(input, select):focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 2px; }
.searchable-selector :is(input, select):disabled { cursor: wait; opacity: .65; }
.searchable-selector-note { font-size: var(--app-font-small, 13px); line-height: 1.45; color: var(--app-muted); overflow-wrap: anywhere; }
.query-update-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; color: var(--app-muted); font-size: var(--app-font-small, 13px); }
.query-page-size { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; color: var(--app-muted); font-size: var(--app-font-small, 13px); }
.query-page-size select { width: auto; min-height: 36px; }
.requests-pagination { flex-wrap: wrap; gap: .75rem; }
/* Los titulos reciben foco para orientar al lector de pantalla sin dibujar un marco. */
#app :is(h1, h2, h3, h4, h5, h6)[tabindex="-1"]:focus,
:is(.modal-backdrop, .kiosk-modal-backdrop, [role="dialog"], [role="alertdialog"])
  :is(h1, h2, h3, h4, h5, h6, [role="heading"], p[tabindex="-1"], strong[tabindex="-1"], span[tabindex="-1"]):not([role="button"]):not([contenteditable="true"]):focus { outline: none; }
.searchable-selector input, .searchable-selector select { min-height: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--app-border); border-radius: var(--app-radius-control); background-color: var(--app-surface-strong); color: var(--app-text); font: inherit; }
.searchable-selector input:focus-visible, .searchable-selector select:focus-visible { outline: 2px solid var(--gp-contrast); outline-offset: 2px; }
.theme-dark .searchable-selector input:focus-visible, .theme-dark .searchable-selector select:focus-visible { outline-color: var(--gp-primary); }
.requests-toolbar .searchable-selector input, .requests-toolbar .searchable-selector select { height: 42px; min-height: 42px; }

.searchable-selector input::placeholder { color: var(--app-muted); opacity: 1; }
.employees-master-panel > .query-update-status { padding-inline: 16px; margin-block: 0 10px; }
.query-update-footer { margin-block: .35rem 0; }
.query-update-status:has(.query-update-time) {
  justify-content: flex-end;
  min-width: 0;
  margin: 0;
  padding: 8px 12px;
  text-align: right;
}
.query-update-time {
  color: color-mix(in srgb, var(--app-muted) 88%, var(--app-surface-strong));
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* La barra superior es oscura en ambos temas: chevron de contraste y sin duplicar el del select global. */
#app .topbar-company-selector select:not([multiple]) { background-image: none; }
.topbar-company-selector .topbar-company-chevron { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--app-topbar-text); pointer-events: none; }

/* Respuestas funcionales GP: ninguna animacion de navegacion. */
/* Acceso: formulario disponible desde primer instante y fondo independiente. */
.auth-shell .login-form {
  animation: gp-login-entrada 180ms ease-out;
}
.auth-shell .login-showcase {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.auth-shell .login-showcase::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 70% 25%, color-mix(in srgb, var(--gp-primary) 18%, transparent), transparent 65%);
  animation: gp-login-fondo 22s ease-in-out infinite alternate;
}
.auth-shell .login-benefits article {
  transition: border-color var(--gp-motion-fast) ease, box-shadow var(--gp-motion-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .auth-shell .login-benefits article:hover {
    border-color: color-mix(in srgb, var(--gp-primary) 65%, transparent);
    box-shadow: 0 8px 22px rgb(15 35 45 / 18%);
  }
}
@keyframes gp-login-entrada { from { opacity: .7; } to { opacity: 1; } }
@keyframes gp-login-fondo {
  from { transform: translate(-3%, 2%) scale(1); }
  to { transform: translate(3%, -2%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-shell .login-form,
  .auth-shell .login-showcase::before { animation: none; }
  .auth-shell .login-benefits article { transition: none; }
}

.app-toast {
  --app-toast-accent: var(--gp-contrast, #24676f);
  grid-template-columns: 36px minmax(0, 1fr) 34px;
  gap: 10px;
  border-left-color: var(--app-toast-accent);
}
.app-toast.is-success { --app-toast-accent: #188754; }
.app-toast.is-error { --app-toast-accent: #b52d2d; }
.app-toast-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--app-toast-accent);
  background: color-mix(in srgb, var(--app-toast-accent) 12%, transparent);
}
.app-toast-icon svg, .app-toast-close svg { width: 22px; height: 22px; flex: none; }
.app-toast-close { border-radius: var(--app-radius-control); }
.app-toast-region.theme-dark .app-toast { --app-toast-accent: #9af0ec; }
.app-toast-region.theme-dark .app-toast.is-success { --app-toast-accent: #65d69c; }
.app-toast-region.theme-dark .app-toast.is-error { --app-toast-accent: #ff9292; }
.app-toast.is-clock-confirmed .app-toast-icon path {
  stroke-dasharray: 90;
  animation: app-confirm-stroke 380ms ease-out both;
}
.app-change-target { display: inline-block; border-radius: var(--app-radius-compact); }
.app-result-count { display: block; min-width: 0; margin: 0; color: var(--app-muted); font-size: 11px; font-weight: 400; line-height: 1.4; text-align: right; overflow-wrap: anywhere; }
.app-result-count-inset { padding: 8px 12px; }
.app-result-count-spaced { margin-top: 8px; }
.app-process-state {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-control);
  color: var(--app-text, var(--gp-secondary));
  background: var(--app-surface-strong, #fff);
  font-size: .85rem;
}
.app-process-state > svg { width: 20px; height: 20px; flex: none; }
/* El spinner existente sustituye al icono sin variar medidas del boton. */
button:has(> .inline-spinner) { cursor: progress; }
button:has(> .inline-spinner) > .inline-spinner { flex-shrink: 0; }
@keyframes app-confirm-stroke { from { stroke-dashoffset: 90; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .app-toast.is-clock-confirmed .app-toast-icon path { animation: none; }
  .inline-spinner { animation: none; }
}

/* Acciones ocasionales compartidas por vistas. */
.view-actions-menu { position: relative; flex: 0 0 auto; max-width: 100%; color: var(--app-text); }
.view-actions-menu > summary { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 40px; padding: .5rem .75rem; list-style: none; cursor: pointer; border: 1px solid var(--app-border); border-radius: var(--app-radius-control); background: var(--app-surface); font-size: var(--app-font-small); }
.view-actions-menu > summary::-webkit-details-marker { display: none; }
.view-actions-menu > summary:hover { background: var(--app-surface-soft); border-color: var(--gp-text-accent); }
.view-actions-menu > summary:focus-visible, .view-actions-menu-content button:focus-visible { outline: 2px solid var(--gp-text-accent); outline-offset: 2px; }
.view-actions-menu[open] > summary { background: var(--app-surface-soft); border-color: var(--gp-text-accent); color: var(--gp-text-accent); }
.view-actions-menu[open] .view-actions-chevron { transform: rotate(180deg); }
.view-actions-menu .button-icon { flex: 0 0 18px; width: 18px; height: 18px; }
.view-actions-menu-content { position: absolute; z-index: 40; right: 0; top: calc(100% + 8px); display: grid; width: 326px; max-width: calc(100vw - 48px); padding: .4rem; border: 1px solid var(--app-border); border-radius: var(--app-radius-panel); background: var(--app-surface); box-shadow: 0 10px 28px color-mix(in srgb, var(--gp-secondary) 16%, transparent); }
.view-actions-group { min-width: 0; }
.view-actions-group + .view-actions-group { border-top: 1px solid var(--app-border); margin-top: .4rem; padding-top: .3rem; }
.view-actions-group-title { margin: 0; padding: .6rem .75rem .3rem; font-size: var(--app-font-caption); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--app-muted); }
.view-actions-menu-content button { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 44px; padding: .7rem .75rem; border: 0; border-radius: var(--app-radius-compact); background: transparent; color: var(--app-text); text-align: left; white-space: normal; font: inherit; font-size: var(--app-font-small); cursor: pointer; }
.view-actions-menu-content button > .button-icon { box-sizing: content-box; padding: .5rem; border-radius: var(--app-radius-control); background: color-mix(in srgb, var(--gp-primary) 14%, var(--app-surface-strong)); color: var(--gp-text-accent); }
.view-actions-menu-content button > span { min-width: 0; overflow-wrap: anywhere; }
.view-actions-menu-content .view-actions-group button small { display: block; margin-top: .2rem; font-size: var(--app-font-caption); font-weight: 400; letter-spacing: normal; color: var(--app-muted); }
.view-actions-menu-content button:hover:not(:disabled) { background: var(--app-surface-soft); }
.view-actions-menu-content button:disabled { opacity: .5; cursor: default; }
@media (max-width: 620px) {
  .view-actions-menu-content { left: 0; right: auto; }
}

.company-content .company-panels-layout { display: flex; flex-direction: column; align-items: stretch; }
.company-form-section { grid-column: 1 / -1; margin: .25rem 0 0; font-size: 1rem; color: var(--app-text); }
.company-content .company-select-action > span { white-space: normal; overflow-wrap: anywhere; }
.calendar-toolbar > .view-actions-menu { margin-left: auto; }

.schedule-list-table { min-width: 0; width: 100%; table-layout: fixed; }
.schedule-list-table th:first-child { width: 12%; }
.schedule-list-table th:nth-child(2) { width: 30%; }
.schedule-list-table th:last-child { width: 110px; }
.schedule-list-table td { white-space: normal; overflow-wrap: anywhere; padding-inline: 10px; }
@media (max-width: 700px) { .schedule-list-table { min-width: 650px; table-layout: auto; } }
.searchable-selector-trigger { display: flex; align-items: center; justify-content: space-between; gap: .5rem; box-sizing: border-box; width: 100%; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--app-border); border-radius: var(--app-radius-control); background: var(--app-surface-strong); color: var(--app-text); font: inherit; text-align: left; cursor: pointer; }
.searchable-selector-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchable-selector-chevron { width: 16px; height: 16px; flex: 0 0 16px; }
.searchable-selector-trigger:focus-visible, .searchable-selector-panel :is(input, button):focus-visible { outline: 2px solid var(--gp-contrast); outline-offset: 2px; }
.theme-dark :is(.searchable-selector-trigger, .searchable-selector-panel input, .searchable-selector-panel button):focus-visible { outline-color: var(--gp-primary); }
.searchable-selector-trigger:disabled { opacity: .65; cursor: wait; }
.searchable-selector-trigger.is-invalid { border-color: var(--danger); }
.requests-toolbar .searchable-selector-trigger { height: 42px; }
.fichajes-employee-filter .searchable-selector-trigger { height: 38px; }
.searchable-selector-panel { position: fixed; inset: auto; box-sizing: border-box; margin: 0; padding: 12px; border: 1px solid var(--app-border); border-radius: var(--app-radius-control); background: var(--app-surface-strong); color: var(--app-text); box-shadow: 0 8px 24px rgb(0 0 0 / .14); overflow: auto; }
.searchable-selector-panel:popover-open { display: flex; flex-direction: column; gap: .5rem; }
.searchable-selector-panel > label { color: var(--app-muted); font-size: var(--app-font-small, 13px); }
.searchable-selector-panel > input { flex-shrink: 0; }
.searchable-selector-options { min-height: 0; overflow-y: auto; }
.searchable-selector-options > button { display: block; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: var(--app-radius-compact); background: transparent; color: var(--app-text); font: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.searchable-selector-options > button[aria-selected="true"] { background: var(--app-sidebar-active); font-weight: 600; }
@media (hover: hover) { .searchable-selector-options > button:hover { background: var(--app-sidebar-active); } }
.searchable-selector-panel > .searchable-selector-note { flex-shrink: 0; }

/* Respuesta visual compartida: solo acciones iniciadas por el usuario. */
:root { --gp-motion-fast: 150ms; --gp-motion-panel: 180ms; --gp-brand-surface: #fff; }
.gp-refresh-status[hidden] { display: none; }
.gp-refresh-status { display: flex; align-items: center; gap: .5rem; padding: .6rem; color: var(--teal-dark); background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius-control); }
.gp-updating-content { display: contents; }
.gp-list-loading { display: grid; gap: .85rem; padding: 1.25rem; min-width: 0; color: var(--app-muted); }
.gp-list-skeleton { display: grid; gap: .7rem; }
.gp-list-skeleton i { display: block; height: 2.5rem; border: 1px solid var(--app-border); border-radius: var(--app-radius-compact); background: color-mix(in srgb, var(--app-muted) 12%, var(--app-surface)); animation: gp-loading-pulse 1.3s ease-in-out infinite alternate; }
@keyframes gp-loading-pulse { to { opacity: .45; } }
/* Controles táctiles; las casillas amplían su etiqueta, no su dibujo. */
@media (pointer: coarse), (max-width: 900px) {
    :is(.app-dashboard, .app-modal-layer, .gp-theme) button { min-width: 44px !important; min-height: 44px !important; }

    :is(.app-dashboard, .app-modal-layer, .gp-theme) :is(input, select):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]) { min-height: 44px !important; }
    :is(.app-dashboard, .app-modal-layer, .gp-theme) button:has(svg):not(:has(span)) { min-width: 44px !important; }
    :is(.app-dashboard, .app-modal-layer, .gp-theme) :is(label:has(input[type=checkbox]), label:has(input[type=radio])) { min-height: 44px; align-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    :is(.app-dashboard, .app-modal-layer, .gp-theme) :is(button, input, select, textarea), .gp-list-skeleton i, .view-actions-menu-content { animation: none !important; transition: none !important; }
}