/* Ajustes transversales para que módulos y estados alternativos compartan el sistema del POS. */
.app-recovery-shell { width: min(480px, 100%); margin: auto; }
.app-recovery-brand { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; color: var(--color-text-primary, #f7f3ec); font-size: 15px; }
.app-recovery-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--color-primary, #df5b47); color: #fff; }
.app-recovery-detail { display: block; margin: -8px 0 18px; color: var(--color-text-muted, #9ca5ae); font-size: 13px; overflow-wrap: anywhere; }
.app-boot-placeholder:has(.app-recovery-shell) { box-sizing: border-box; position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; overflow: auto; padding: 24px; background: var(--color-background, #101214); }
:root {
  color-scheme: dark;
  --color-background: #101214;
  --color-surface: #181b1f;
  --color-surface-raised: #20252b;
  --color-surface-hover: #272d34;
  --color-input: #111417;
  --color-text-primary: #f7f3ec;
  --color-text-secondary: #c4cbd1;
  --color-text-muted: #9ca5ae;
  --color-border: #2b3239;
  --color-border-strong: #424b54;
}
body.app-redesign { background-color: var(--color-background); color: var(--color-text-primary); }
body.dark-mode.app-redesign { color-scheme: dark; }
body:not(.dark-mode).app-redesign { color-scheme: light; }
body.app-redesign :where(button, input, select, textarea) { font-family: inherit; }
body.app-redesign :where(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  color: var(--color-text-primary); background-color: var(--color-input); border-color: var(--color-border-strong);
}
body.app-redesign :where(input, select, textarea)::placeholder { color: var(--color-text-muted); opacity: 1; }
body.app-redesign :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--color-danger); }
body.app-redesign :where(.field-error, [data-field-error]) { color: var(--color-danger); font-size: 13px; line-height: 1.4; }
body.app-redesign :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus, #f3b65d); outline-offset: 2px;
}
body.app-redesign :where(button:disabled, [aria-disabled=true]) {
  opacity: 1; color: var(--color-text-muted); border-color: var(--color-border); background-color: var(--color-surface-raised); cursor: not-allowed;
}
body.app-redesign :where(.ui-button--loading, [aria-busy=true]) { cursor: progress; }
body.app-redesign .ui-button--loading { color: inherit; gap: .55em; }
body.app-redesign .ui-button--loading::after { position: static; display: inline-block; flex: 0 0 1em; color: currentColor; }
body.app-redesign :where(.ui-state, .pos-loading-state, .pos-error-state, [role=status].notice, [role=alert].notice) {
  max-width: 100%; overflow-wrap: anywhere; border-radius: var(--radius-lg, 16px);
}
body.app-redesign :where(.ui-state--error, .pos-error-state, [role=alert].notice) {
  border-color: color-mix(in srgb, var(--color-danger, #f87171) 34%, var(--color-border));
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-danger)); color: var(--color-text-primary);
}
body.app-redesign :where(.ui-state--error strong, .pos-error-state strong, [role=alert].notice strong) { color: var(--color-text-primary); }
body.app-redesign :where(.ui-state--success, [role=status].notice) {
  border-color: color-mix(in srgb, var(--color-success, #43c995) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-success, #43c995)); color: var(--color-text-secondary);
}
body.app-redesign :where(.ui-state--empty, .empty-state, .empty-state-card) { color: var(--color-text-secondary); }
body.app-redesign :where(.toast, .toast-message, .notification, .notification-toast) {
  color: var(--color-text-primary); background: var(--color-surface-raised); border-color: var(--color-border-strong); border-radius: 14px;
}
body.app-redesign :where(.modal, .dialog, dialog) { color: var(--color-text-primary); }
body.app-redesign :where(dialog, .modal-content, .modal-dialog, .management-dialog) {
  background: var(--color-surface-raised); border-color: var(--color-border); border-radius: 18px;
}

/* Acceso del POS: una tarjeta natural, compacta y desplazable con teclado o en pantallas bajas. */
body.app-redesign .auth-gate {
  position: fixed; inset: 0; display: grid; place-items: center; overflow-x: hidden; overflow-y: auto;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  background: var(--color-background); color: var(--color-text-primary);
}
body.app-redesign .auth-gate::before, body.app-redesign .auth-orbit { display: none; }
body.app-redesign .auth-shell {
  display: block; width: min(100%, 480px); min-height: 0; overflow: visible; margin: auto;
  border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface);
  box-shadow: var(--shadow-md); backdrop-filter: none;
}
body.app-redesign .auth-story { display: none; }
body.app-redesign .auth-panel { display: block; min-height: 0; padding: 32px; background: transparent; }
body.app-redesign .auth-mobile-brand { display: flex; margin: 0 0 28px; }
body.app-redesign .auth-mobile-brand small { color: var(--color-text-muted); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
body.app-redesign .auth-brand-mark { border: 0; border-radius: 12px; background: var(--color-primary); box-shadow: none; }
body.app-redesign .auth-brand-mark::after, body.app-redesign .auth-brand-mark i { display: none; }
body.app-redesign .auth-form-heading { margin-bottom: 24px; }
body.app-redesign .auth-eyebrow, body.app-redesign #authEyebrow { display: none; }
body.app-redesign .auth-form-heading h2 { margin: 0 0 8px; color: var(--color-text-primary); font-size: 28px; font-weight: 650; letter-spacing: -.025em; line-height: 1.2; }
body.app-redesign .auth-form-heading p { max-width: none; color: var(--color-text-secondary); font-size: 16px; line-height: 1.45; }
body.app-redesign .auth-form { gap: 18px; }
body.app-redesign .auth-field { gap: 7px; }
body.app-redesign .auth-field label { color: var(--color-text-primary); font-size: 14px; font-weight: 550; }
body.app-redesign .auth-input-icon { display: none; }
body.app-redesign .auth-input-wrap input { box-sizing: border-box; min-height: 48px; padding: 11px 13px; border-color: var(--color-border-strong); border-radius: 11px; background: var(--color-input); color: var(--color-text-primary); font-size: 15px; }
body.app-redesign .auth-input-wrap input:focus { border-color: var(--color-primary); background: var(--color-input); box-shadow: 0 0 0 3px rgb(223 91 71 / .2); }
body.app-redesign .auth-password-toggle { right: 8px; min-height: 40px; padding: 8px; color: var(--color-text-secondary); font-size: 13px; }
body.app-redesign .auth-form-meta, body.app-redesign .auth-panel-footer { display: none; }
body.app-redesign .auth-submit { justify-content: center; width: 100%; min-height: 48px; margin-top: 2px; border: 0; border-radius: 11px; background: var(--color-primary); color: #fff; box-shadow: none; font-size: 15px; font-weight: 650; }
body.app-redesign .auth-submit:hover:not(:disabled) { background: var(--color-primary-hover); }
body.app-redesign .auth-submit b { display: none; }
body.app-redesign .auth-submit:disabled { color: #f7f3ec; background: #8f5147; }
body.app-redesign .auth-message { min-height: 0; margin: 0; color: var(--color-text-secondary); font-size: 14px; }
body.app-redesign .auth-message:not(:empty) { padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-raised); }
body.app-redesign .auth-message.is-success { color: var(--color-text-secondary); }
body.app-redesign .auth-panel-footer { padding-top: 20px; }

/* Portal de gestión y enlace de empleado. La identidad del negocio sigue usando su propio logo. */
body.management-page { --mg-bg: #101214; --mg-surface: #181b1f; --mg-surface-raised: #20252b; --mg-field: #111417; --mg-line: #2b3239; --mg-copy: #f7f3ec; --mg-muted: #c4cbd1; --mg-mint: #df5b47; --mg-mint-ink: #fff; --mg-hover: #272d34; --mg-active: #302321; --mg-active-copy: #f4c0b6; --mg-focus: #f3b65d; --mg-radius: 16px; background: var(--mg-bg); color: var(--mg-copy); }
body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) .shell { display: flex; flex-direction: column; justify-content: center; width: min(480px, calc(100% - 32px)); min-height: 100vh; margin: auto; padding: 28px 0; }
body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) .app-header { justify-content: center; margin: 0 auto 20px; }
body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) .logo { background: #df5b47; color: #fff; }
body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) .card { border-color: #2b3239; border-radius: 18px; background: #181b1f; box-shadow: 0 12px 32px rgb(0 0 0 / .22); }
body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) #bootFailure::before { content: "!"; display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 18px; border: 1px solid #2b3239; border-radius: 12px; color: #c4cbd1; }
body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) #bootFailure .app-recovery-detail { display: block; margin: -8px 0 18px; color: #9ca5ae; font-size: 13px; overflow-wrap: anywhere; }
body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) .auth-panel { padding: 32px; }
body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) .panel-heading h1 { margin: 0 0 8px; font-size: 28px; font-weight: 650; }
body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) .panel-heading p { margin: 0; color: #c4cbd1; font-size: 16px; }
body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) .login-form,
body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) .activation-form,
body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) #employeeLoginForm { grid-template-columns: minmax(0, 1fr); gap: 18px; }
body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) .login-form label,
body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) .activation-form label,
body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) #employeeLoginForm label,
body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) .auth-action-form label { display: grid; gap: 7px; color: #f7f3ec; font-size: 14px; }
body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) :where(.login-form input, .activation-form input, #employeeLoginForm input, .auth-action-form input, .owner-setup-form input) { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid #424b54; border-radius: 11px; background: #111417; color: #f7f3ec; font-size: 15px; }
body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) .login-form > button,
body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) .activation-form .form-actions,
body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) #employeeLoginForm .form-actions { grid-column: auto; }
body.management-page .button-link,
body.management-page :where(.login-form > button, .activation-form > button, .activation-form .form-actions button[type=submit], .auth-action-form > button, .owner-setup-form > button, #employeeLinkEnter, #employeeLoginForm button[type=submit]) { background: #df5b47; border-color: #df5b47; color: #fff; }
body.management-page :where(.button-secondary, .button-tertiary, button.quiet) { background: #20252b; border-color: #424b54; color: #f7f3ec; }
body.management-page :where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid #f3b65d; outline-offset: 2px; }
body.management-page .notice.error { border-color: #57403e; background: #241e1e; color: #f7f3ec; }
body.management-page .notice.success { border-color: #365047; background: #1b2420; color: #d5e3dc; }
body.management-page button:disabled { opacity: 1; border-color: #424b54; background: #292e34; color: #c4cbd1; cursor: wait; }
body.management-page > .firebase-emulator-warning { width: min(480px, calc(100% - 32px)) !important; margin: 0 auto 20px !important; padding: 10px 14px !important; border: 1px solid #424b54 !important; border-radius: 12px !important; background: #20252b !important; color: #c4cbd1 !important; font-size: 13px !important; }
body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) > .firebase-emulator-warning { order: 3; }
body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) .owner-setup { margin-top: 22px; padding-top: 18px; border-top: 1px solid #2b3239; }
body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) .owner-setup > p { margin: 0; color: #c4cbd1; }
body.management-page .auth-text-link { border: 0; background: transparent; color: #f08a78; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
body.management-page .owner-setup-form { grid-template-columns: minmax(0, 1fr); background: #111417; }
body.management-page .owner-setup-form > * { grid-column: auto; }
@media (max-width: 600px) {
  body.app-redesign .auth-panel, body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) .auth-panel { padding: 24px; }
}
@media (max-height: 560px) {
  body.app-redesign .auth-gate { place-items: start center; }
  body.management-page:has(#bootFailure:not([hidden]), #authPanel:not([hidden]), #employeeAccessPanel:not([hidden]), #activationPanel:not([hidden])) .shell { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  body.app-redesign *, body.management-page * { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}