/* Universal Fisherman Portal (/pronosticos) — Scoped enhancements over affiliate.css & affiliate-panel.css.
   Optimized for low/mid-range Android screens (320px+, 360x640, 390x844, 412x915) and desktop viewports. */

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   ETAPA 6D.1K — REFINAMIENTO VISUAL PREMIUM CON NEUMORFISMO HÍBRIDO MARÍTIMO
   ========================================================================== */

@keyframes loginCardEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes helpSheetEnter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body:has(#login:not([hidden])),
#login,
#login-help-dialog {
  font-family: Inter, "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#login *,
#login-help-dialog * {
  font-style: normal;
}

body:has(#login:not([hidden])) {
  overflow-x: hidden;
  background-color: #071e2d;
  background-image:
    radial-gradient(ellipse 92% 48% at 50% 0%, rgba(28, 152, 174, 0.24) 0%, rgba(16, 86, 112, 0.08) 62%, transparent 100%),
    radial-gradient(circle at 85% 92%, rgba(20, 118, 138, 0.16) 0%, transparent 55%),
    linear-gradient(168deg, #061b28 0%, #0b2d42 42%, #0f3f58 76%, #134e68 100%);
  background-attachment: fixed;
}

.page:has(#login:not([hidden])) {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  max-width: 100%;
  width: min(100%, 440px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 14px;
}

/* Subtle bathymetric / nautical contour lines over deep ocean background */
.page:has(#login:not([hidden]))::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='180' viewBox='0 0 360 180'%3E%3Cpath d='M0 36 Q 90 14, 180 36 T 360 36 M0 90 Q 90 66, 180 90 T 360 90 M0 144 Q 90 122, 180 144 T 360 144' fill='none' stroke='%237ce8f5' stroke-width='1.25'/%3E%3Cpath d='M0 63 Q 90 85, 180 63 T 360 63 M0 117 Q 90 139, 180 117 T 360 117' fill='none' stroke='%23ffffff' stroke-width='0.8' stroke-dasharray='4 6'/%3E%3C/svg%3E");
  background-size: 360px 180px;
}

.page:has(#login:not([hidden])) header {
  margin-bottom: 12px;
  text-shadow: 0 2px 10px rgba(3, 15, 24, 0.45);
}

.page:has(#login:not([hidden])) .brand {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.15;
  color: #f4fbfd;
  display: block;
}

.page:has(#login:not([hidden])) .association {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25;
  color: #a9d9e6;
  margin-top: 3px;
}

.page:has(#login:not([hidden])) footer {
  display: none;
}

/* Main Login Card — Hybrid Maritime Neumorphism */
#login.card {
  position: relative;
  overflow: hidden;
  padding: 22px 20px 18px;
  text-align: center;
  border-radius: 22px;
  background: linear-gradient(180deg, #fafdfe 0%, #f0f6f9 100%);
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow:
    0 20px 44px rgba(3, 14, 22, 0.48),
    0 6px 16px rgba(4, 20, 31, 0.28),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(16, 62, 82, 0.10);
  color: #0c2633;
  animation: loginCardEnter 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Subtle top maritime horizon accent bar inside the login card */
#login.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0d6378 0%, #199ab0 50%, #0d6378 100%);
}

#login h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.2;
  color: #0a2533;
  margin: 0 0 14px;
}

.universal-badge,
.universal-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--soft);
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin: 0 auto 8px;
}

/* Recessed Neumorphic Tab Track ("Tengo un código" / "No tengo código") */
.auth-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  margin: 0 0 14px;
  background: #dfe9ee;
  border: 1px solid #c6d6de;
  border-radius: 15px;
  box-shadow:
    inset 0 2px 4px rgba(11, 38, 52, 0.14),
    inset 0 -1px 0 rgba(255, 255, 255, 0.75);
}

.auth-tab {
  min-height: 52px;
  padding: 8px 10px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: transparent;
  color: #365361;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 120ms ease,
    border-color 160ms ease;
}

.auth-tab:hover:not(.active) {
  color: #0e2e3d;
  background: rgba(255, 255, 255, 0.42);
}

.auth-tab:active {
  transform: translateY(1px);
}

/* Raised Neumorphic Active Tab with bottom turquoise indicator bar (not color alone) */
.auth-tab.active,
.auth-tab[aria-selected="true"] {
  background: linear-gradient(180deg, #ffffff 0%, #f4f9fb 100%);
  color: #092432;
  font-weight: 700;
  border-color: #b8cfd9;
  border-bottom: 3px solid #0e7a8d;
  box-shadow:
    0 3px 8px rgba(11, 39, 53, 0.14),
    0 1px 2px rgba(11, 39, 53, 0.08),
    inset 0 1px 0 #ffffff;
}

.auth-field-group {
  margin-bottom: 12px;
  text-align: left;
}

#login .auth-field-group label,
#reentry-form label {
  display: block;
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: #123342;
  line-height: 1.22;
}

/* Subtle Inset Neumorphic Fields with crisp borders and high-contrast text */
#login #phone,
#login #reentry-phone,
#login #code,
.universal-select {
  border: 1.5px solid #b4cad4;
  background: #f5f9fb;
  color: #092230;
  box-shadow:
    inset 0 2px 4px rgba(11, 39, 53, 0.09),
    inset 0 1px 1px rgba(11, 39, 53, 0.05),
    0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    box-shadow 150ms ease;
}

#login #phone::placeholder,
#login #reentry-phone::placeholder,
#login #code::placeholder {
  color: #526f7d;
  opacity: 1;
  font-weight: 500;
  letter-spacing: 0.3px;
}

#login #phone:focus,
#login #reentry-phone:focus,
#login #code:focus,
.universal-select:focus,
#login #phone:focus-visible,
#login #reentry-phone:focus-visible,
#login #code:focus-visible,
.universal-select:focus-visible {
  background: #ffffff;
  border-color: #0d7a8c;
  outline: 3px solid rgba(17, 138, 158, 0.32);
  outline-offset: 1px;
  box-shadow:
    inset 0 1px 2px rgba(11, 39, 53, 0.05),
    0 0 0 3px rgba(17, 138, 158, 0.16);
}

#login #phone,
#login #reentry-phone {
  min-height: 54px;
  padding: 10px 14px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.4px;
  border-radius: 12px;
}

#login #code {
  min-height: 54px;
  padding: 10px 14px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 3px;
  border-radius: 12px;
}

/* Primary Action Button ("Ingresar") — Raised Tactile Maritime Neumorphism */
#login .primary {
  min-height: 58px;
  padding: 12px 18px;
  font-size: 18.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin-top: 10px;
  border-radius: 14px;
  color: #ffffff;
  border: 1px solid #095261;
  background: linear-gradient(180deg, #168699 0%, #0e6b7c 54%, #0a5564 100%);
  box-shadow:
    0 6px 16px rgba(9, 68, 82, 0.36),
    0 2px 5px rgba(7, 42, 52, 0.24),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.34),
    inset 0 -2px 0 rgba(5, 36, 44, 0.28);
  transition:
    transform 120ms ease,
    box-shadow 150ms ease,
    background 150ms ease,
    filter 150ms ease;
}

#login .primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #1891a5 0%, #107486 54%, #0b5d6d 100%);
  box-shadow:
    0 8px 20px rgba(9, 68, 82, 0.42),
    0 3px 7px rgba(7, 42, 52, 0.26),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.40),
    inset 0 -2px 0 rgba(5, 36, 44, 0.28);
}

#login .primary:active:not(:disabled) {
  transform: translateY(1.5px);
  background: linear-gradient(180deg, #0b5c6b 0%, #0e6b7c 100%);
  box-shadow:
    0 2px 5px rgba(9, 68, 82, 0.24),
    inset 0 2px 5px rgba(4, 28, 35, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

#login .primary:disabled {
  background: #8aa5b0;
  border-color: #77939e;
  color: #f2f7f9;
  box-shadow: none;
  opacity: 0.85;
  cursor: not-allowed;
}

.verify-summary-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 50px;
  padding: 8px 12px;
  margin: 0 0 10px;
  border: 1.5px solid #bfd3dc;
  border-radius: 12px;
  background: linear-gradient(180deg, #eef6f8 0%, #e4f0f4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 1px 3px rgba(11, 39, 53, 0.06);
  text-align: left;
}

.verify-summary-text {
  font-size: 15.5px;
  font-weight: 500;
  color: #102e3c;
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: anywhere;
}

.verify-summary-text strong {
  font-weight: 700;
  color: #08212e;
}

.verify-summary-action {
  width: auto;
  min-height: 44px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid #b4cbd5;
  background: linear-gradient(180deg, #ffffff 0%, #f1f7f9 100%);
  color: #0c6272;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow:
    0 2px 4px rgba(11, 39, 53, 0.08),
    inset 0 1px 0 #ffffff;
  transition: transform 120ms ease, box-shadow 150ms ease;
}

.verify-summary-action:active {
  transform: translateY(1px);
}

.universal-select {
  width: 100%;
  min-height: 54px;
  border-radius: 12px;
  padding: 10px 14px;
  font: inherit;
  font-size: 16.5px;
  font-weight: 600;
}

.universal-notice {
  text-align: left;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.34;
  padding: 9px 12px;
  margin: 0 0 8px;
  border-radius: 11px;
  transition: opacity 150ms ease, transform 150ms ease;
}

#login .status.error,
#login-help-dialog .status.error {
  color: #8c1d2b;
  background: #fdf0f2;
  border: 1.5px solid #e29aa3;
}

#login .status.ok,
#login-help-dialog .status.ok {
  color: #0b5d4b;
  background: #edf9f5;
  border: 1.5px solid #8fd1c1;
}

/* Discreet "¿Necesitas ayuda?" button below primary login button */
.login-help-trigger-wrap {
  margin-top: 8px;
  text-align: center;
}

.login-help-trigger {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 8px 18px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: transparent;
  color: #0c6272;
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: background-color 150ms ease, color 150ms ease, transform 120ms ease;
}

.login-help-trigger:hover {
  background: #e4f1f4;
  color: #084b58;
}

.login-help-trigger:active {
  transform: translateY(1px);
}

/* No-code orientation panel (#reentry-form / .no-code-guide) */
.no-code-guide {
  display: grid;
  gap: 10px;
  text-align: left;
}

.no-code-intro {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  color: #102e3c;
  line-height: 1.34;
}

.no-code-actions {
  display: grid;
  gap: 10px;
}

.no-code-btn {
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  line-height: 1.22;
  color: #0b5867;
  border: 1.5px solid #b5ccd6;
  background: linear-gradient(180deg, #ffffff 0%, #ebf4f7 100%);
  box-shadow:
    0 3px 7px rgba(11, 39, 53, 0.09),
    inset 0 1px 0 #ffffff;
  transition: transform 120ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.no-code-btn:hover {
  border-color: #8eb3c2;
  background: linear-gradient(180deg, #ffffff 0%, #e3f0f4 100%);
}

.no-code-btn:active {
  transform: translateY(1.5px);
  box-shadow: inset 0 2px 4px rgba(11, 39, 53, 0.14);
}

#login .no-code-transfer-btn {
  width: 100%;
  min-height: 52px;
  margin-top: 0;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.22;
}

/* Help Window (#login-help-dialog): Centered Modal on Desktop, Bottom Sheet on Mobile */
#login-help-dialog.login-help-dialog {
  width: min(460px, calc(100vw - 28px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 18px 20px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, #fafdfe 0%, #eef5f8 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 24px 48px rgba(3, 14, 22, 0.52),
    0 6px 18px rgba(4, 20, 31, 0.30),
    inset 0 1.5px 0 #ffffff;
  color: #0c2633;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  text-align: left;
  animation: helpSheetEnter 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

#login-help-dialog::backdrop {
  background: rgba(4, 18, 28, 0.68);
  backdrop-filter: blur(3px);
}

.login-help-sheet-handle {
  display: none;
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: #b8cdd6;
  margin: 0 auto 10px;
}

.login-help-dialog-header {
  position: sticky;
  top: -18px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -18px -20px 14px;
  padding: 14px 20px 12px;
  background: rgba(250, 253, 254, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #cde0e8;
}

.login-help-title-wrap .eyebrow {
  margin: 0 0 2px;
  font-size: 11.5px;
  font-weight: 700;
  color: #0d6879;
}

.login-help-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: #092432;
  line-height: 1.22;
}

.login-help-close-top {
  min-height: 44px !important;
  min-width: 88px;
  padding: 8px 14px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  border: 1.5px solid #b6ccd6 !important;
  background: linear-gradient(180deg, #ffffff 0%, #ebf3f6 100%) !important;
  color: #0b5867 !important;
  box-shadow: 0 2px 5px rgba(11, 39, 53, 0.08), inset 0 1px 0 #ffffff !important;
}

.login-help-box {
  display: grid;
  gap: 14px;
  text-align: left;
}

.login-help-codes-note {
  display: grid;
  gap: 6px;
  padding: 11px 13px;
  border-radius: 12px;
  background: #e6f2f5;
  border: 1px solid #c3d9e2;
  box-shadow: inset 0 1px 2px rgba(11, 39, 53, 0.05);
}

.login-help-codes-note p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.38;
  color: #102e3c;
}

.login-help-codes-note strong {
  font-weight: 700;
  color: #08212e;
}

.login-help-section {
  display: grid;
  gap: 8px;
}

.login-help-section-label {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0a2533;
}

.login-help-shortcuts {
  display: grid;
  gap: 10px;
}

.login-help-shortcut {
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid #b5ccd6;
  background: linear-gradient(180deg, #ffffff 0%, #ebf4f7 100%);
  color: #0b5867;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  box-shadow:
    0 3px 7px rgba(11, 39, 53, 0.08),
    inset 0 1px 0 #ffffff;
  transition: transform 120ms ease, box-shadow 150ms ease;
}

.login-help-shortcut:active {
  transform: translateY(1.5px);
  box-shadow: inset 0 2px 4px rgba(11, 39, 53, 0.14);
}

.login-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  margin: 0;
  border-radius: 12px;
  border: 1.5px solid #0e7082;
  background: linear-gradient(180deg, #eef9fb 0%, #dceff3 100%);
  color: #082431;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  box-shadow:
    0 3px 8px rgba(11, 62, 76, 0.12),
    inset 0 1px 0 #ffffff;
  transition: transform 120ms ease, box-shadow 150ms ease;
}

.login-whatsapp-btn:active {
  transform: translateY(1.5px);
}

.login-whatsapp-btn[hidden] {
  display: none !important;
}

/* Installation device ID box for support / autonomous transfer (hidden until requested) */
.device-id-box {
  margin-top: 0;
  border: 1.5px solid #bcd1da;
  border-radius: 12px;
  background: #eaf3f6;
  text-align: left;
  overflow: hidden;
}

.device-id-box:not([open]) .device-id-body {
  display: none !important;
}

.device-id-box summary {
  list-style: none;
  cursor: pointer;
  min-height: 50px;
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 600;
  color: #0c2a38;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.device-id-box summary::-webkit-details-marker {
  display: none;
}

.device-id-box summary::after {
  content: "▾";
  color: #0d6879;
  font-size: 15px;
}

.device-id-box[open] summary {
  border-bottom: 1px solid #c3d8e1;
}

.device-id-box[open] summary::after {
  content: "▴";
}

.device-id-body {
  padding: 12px 14px;
}

.device-id-body .hint {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: #244554;
  line-height: 1.35;
}

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

#current-device-id {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
  min-height: 46px;
  padding: 8px 10px;
  background: #ffffff;
  color: #092230;
  border: 1.5px solid #b4cad4;
}

#copy-device-id {
  width: auto;
  min-height: 46px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.device-copy-feedback {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: #0c6272;
}

.login-help-footer {
  margin-top: 2px;
}

.login-help-close-bottom {
  min-height: 48px;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 12px;
  border: 1.5px solid #b5ccd6;
  background: linear-gradient(180deg, #ffffff 0%, #ebf3f6 100%);
  color: #0b5867;
  box-shadow: 0 2px 5px rgba(11, 39, 53, 0.08), inset 0 1px 0 #ffffff;
}

/* Mobile bottom sheet & proportional fit for 360x640, 375x667, 390x844, 412x915 */
@media (max-width: 640px) {
  #login-help-dialog.login-help-dialog {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0 0;
    max-height: min(88vh, calc(100vh - 14px));
    max-height: min(88dvh, calc(100dvh - 14px));
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }

  .login-help-sheet-handle {
    display: block;
  }

  .login-help-dialog-header {
    top: -8px;
    margin: 0 -16px 12px;
    padding: 6px 16px 12px;
  }
}

/* Tall mobile screens (390x844, 412x915): generous vertical breathing room and maximum tactile comfort */
@media (max-width: 640px) and (min-height: 800px) {
  .page:has(#login:not([hidden])) {
    padding: 20px 14px;
  }
  .page:has(#login:not([hidden])) header {
    margin-bottom: 16px;
  }
  .page:has(#login:not([hidden])) .brand {
    font-size: 28px;
  }
  .page:has(#login:not([hidden])) .association {
    font-size: 15px;
    margin-top: 4px;
  }
  #login.card {
    padding: 26px 20px 22px;
  }
  #login h1 {
    font-size: 25px;
    margin: 0 0 18px;
  }
  .auth-mode-tabs {
    margin: 0 0 18px;
    padding: 5px;
  }
  .auth-tab {
    min-height: 54px;
    font-size: 16.5px;
  }
  .auth-field-group {
    margin-bottom: 15px;
  }
  #login .auth-field-group label {
    margin: 0 0 7px;
    font-size: 16.5px;
  }
  #login #phone,
  #login #reentry-phone,
  #login #code,
  .universal-select {
    min-height: 56px;
  }
  #login .primary {
    min-height: 60px;
    margin-top: 14px;
    font-size: 18.5px;
  }
  .login-help-trigger-wrap {
    margin-top: 12px;
  }
  .login-help-trigger {
    min-height: 48px;
    font-size: 16.5px;
  }
  .no-code-guide {
    gap: 14px;
  }
  .no-code-intro {
    font-size: 16px;
  }
  .no-code-actions {
    gap: 12px;
  }
  .no-code-btn,
  #login .no-code-transfer-btn {
    min-height: 54px;
    font-size: 16.5px;
  }
}

/* Proportional height adaptation for 360x640 and 375x667 while keeping 50-56px tactile controls */
@media (max-height: 720px) {
  .page:has(#login:not([hidden])) {
    padding: 8px 12px;
  }
  .page:has(#login:not([hidden])) header {
    margin-bottom: 8px;
  }
  .page:has(#login:not([hidden])) .brand {
    font-size: 23px;
  }
  .page:has(#login:not([hidden])) .association {
    font-size: 13px;
    margin-top: 2px;
  }
  #login.card {
    padding: 16px 16px 12px;
  }
  #login h1 {
    font-size: 21.5px;
    margin: 0 0 10px;
  }
  .auth-mode-tabs {
    margin: 0 0 10px;
    padding: 4px;
  }
  .auth-tab {
    min-height: 50px;
    padding: 6px 8px;
    font-size: 16px;
  }
  .auth-field-group {
    margin-bottom: 8px;
  }
  #login .auth-field-group label {
    margin: 0 0 3px;
    font-size: 15.5px;
  }
  #login #phone,
  #login #reentry-phone,
  #login #code {
    min-height: 52px;
    padding: 8px 12px;
  }
  .universal-select {
    min-height: 52px;
    padding: 8px 12px;
    font-size: 16px;
  }
  .verify-summary-chip {
    min-height: 46px;
    padding: 6px 10px;
    margin: 0 0 8px;
  }
  .universal-notice {
    font-size: 13.5px;
    padding: 6px 10px;
    margin: 0 0 6px;
  }
  #login .primary {
    min-height: 56px;
    margin-top: 6px;
    font-size: 18px;
  }
  .login-help-trigger-wrap {
    margin-top: 4px;
  }
  .login-help-trigger {
    min-height: 44px;
    padding: 6px 14px;
    font-size: 15.5px;
  }
  .no-code-guide {
    gap: 8px;
  }
  .no-code-intro {
    font-size: 14.5px;
  }
  .no-code-actions {
    gap: 8px;
  }
  .no-code-btn,
  #login .no-code-transfer-btn {
    min-height: 50px;
    padding: 8px 12px;
    font-size: 16px;
  }
}

@media (max-height: 540px) {
  .page:has(#login:not([hidden])) {
    justify-content: flex-start;
    padding: 6px 10px;
  }
  .page:has(#login:not([hidden])) header {
    display: none;
  }
  #login.card {
    padding: 12px 14px 10px;
  }
  #login h1 {
    font-size: 18px;
    margin: 0 0 8px;
  }
  .auth-field-group {
    margin-bottom: 6px;
  }
}

/* Reduced motion accessibility support */
@media (prefers-reduced-motion: reduce) {
  #login.card,
  #login-help-dialog.login-help-dialog,
  .auth-tab,
  #login #phone,
  #login #reentry-phone,
  #login #code,
  .universal-select,
  #login .primary,
  .verify-summary-action,
  .universal-notice,
  .login-help-trigger,
  .no-code-btn,
  .login-help-shortcut,
  .login-whatsapp-btn {
    animation: none !important;
    transition: none !important;
  }
}


/* Profile popover ("Mi cuenta") universal additions — Etapa 5B.2 compact polish */
.profile-popover {
  max-height: calc(100vh - 72px);
  max-height: calc(100dvh - 72px);
  padding: 11px 12px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.profile-popover-header {
  position: sticky;
  top: -11px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -11px -12px 8px;
  padding: 8px 12px;
  background: #ffffff;
  border-bottom: 1px solid #dce8ef;
  border-radius: 16px 16px 0 0;
}

.profile-popover-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #123b52;
  letter-spacing: 0.2px;
}

.profile-close-btn {
  width: auto;
  min-height: 32px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #e3eff5;
  color: #123b52;
  border: 1px solid #b8d3e0;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.profile-close-btn:hover {
  background: #d2e6f0;
  border-color: #93bcd0;
}

.profile-popover .profile-org,
.profile-popover .profile-subscription,
.profile-popover .profile-contact-box {
  padding: 0 2px 7px;
  margin: 0 0 7px;
  border-bottom: 1px solid #dce8ef;
}

.profile-org-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.profile-popover .profile-org #panel-association {
  font-size: 14px;
  line-height: 1.25;
}

.provider-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 750;
  background: #e3eff5;
  color: #123b52;
  border: 1px solid #bdd4e0;
}

.profile-popover .subscription-meta {
  gap: 6px;
  margin-top: 2px;
}

.profile-popover .subscription-badge {
  padding: 2.5px 9px;
  font-size: 11.5px;
}

.profile-popover .subscription-date {
  font-size: 12px;
  font-weight: 650;
  color: #2c5268;
  margin: 0;
}

.profile-quota-box {
  padding: 0 0 7px;
  border-bottom: 1px solid #dce8ef;
  margin-bottom: 7px;
}

.profile-popover .profile-quota-detail {
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.3;
  color: #0d523f;
  background: #eaf7f2;
  border: 1px solid #b5dfd0;
  border-radius: 9px;
  padding: 6px 10px;
  margin: 0;
}

.profile-popover .profile-whatsapp-btn {
  min-height: 38px;
  padding: 7px 12px;
  font-size: 13px;
  margin-top: 3px;
}

.profile-popover .profile-contact-note {
  font-size: 11.5px;
  line-height: 1.35;
  color: #4b6576;
  background: #f3f8fb;
  border: 1px solid #d5e5ee;
  border-radius: 8px;
  padding: 6px 9px;
  margin: 2px 0 0;
}

.profile-popover #recent-section {
  margin: 0 0 8px;
}

.profile-popover #history-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  padding: 7px 10px;
  font-size: 13px;
}

.recent-count-badge {
  display: inline-flex;
  align-items: center;
  padding: 1.5px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 750;
  background: #ffffff;
  color: #123b52;
  border: 1px solid #bdd4e0;
  margin-right: 12px;
}

.profile-popover #recent-list {
  max-height: min(34dvh, 220px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  gap: 6px;
}

.profile-popover #recent-list .delivery-row {
  padding: 7px 9px;
  border-radius: 9px;
}

.profile-popover #recent-list .delivery-row strong {
  font-size: 13px;
  line-height: 1.2;
}

.profile-popover .delivery-row p {
  color: #4b6576;
  font-size: 11.5px;
  line-height: 1.3;
  margin: 2px 0 5px;
}

.profile-popover #recent-list .delivery-actions {
  gap: 6px;
}

.profile-popover #recent-list .delivery-actions button {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 7px;
}

.recent-history-footer {
  display: grid;
  padding: 0 6px 6px;
  margin: 0;
}

.profile-history-btn {
  width: 100%;
  min-height: 36px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 750;
  color: #0f4c64;
  background: #e9f4f9;
  border: 1px solid #b5d2e1;
  border-radius: 8px;
}

.profile-history-btn:hover {
  background: #dbeef3;
}

.profile-actions-stack {
  display: grid;
  gap: 6px;
}

.profile-transfer-btn,
.profile-popover #logout {
  width: 100%;
  min-height: 38px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 9px;
}

.profile-transfer-btn {
  color: #123b52;
  background: #f0f7fa;
  border: 1px solid #b8d3e0;
}

.profile-transfer-btn:hover {
  background: #e1eff6;
}

/* Etapa 5A.3 / 5B.2 — Independent Paginated Full History Dialog */
.history-dialog {
  width: min(480px, calc(100vw - 20px));
  max-height: calc(100dvh - 20px);
  padding: 13px 14px 13px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.history-dialog:not([open]) {
  display: none !important;
}

.history-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.history-dialog-title-wrap {
  min-width: 0;
}

.history-dialog-title-wrap .eyebrow {
  margin: 0 0 2px;
  font-size: 10px;
}

.history-dialog-header h2 {
  font-size: 17px;
  line-height: 1.2;
  margin: 0;
}

.history-retention-note {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--muted);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 9px;
  margin: 0 0 6px;
  text-align: left;
}

.history-page-summary {
  font-size: 12px;
  font-weight: 750;
  color: var(--ink);
  margin: 0 0 6px;
  text-align: left;
}

.full-history-list {
  display: grid;
  gap: 6px;
  max-height: min(64dvh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
  margin-bottom: 8px;
  text-align: left;
}

.full-history-list .delivery-row {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--soft);
}

.full-history-list .delivery-row strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 1px;
}

.full-history-list .delivery-row p {
  font-size: 11.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.3;
}

.full-history-list .delivery-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 5px;
}

.full-history-list .delivery-actions button {
  min-height: 33px;
  padding: 5px 8px;
  font-size: 12px;
  border-radius: 7px;
}

.full-history-list .delivery-expired-note,
.history-empty-note {
  font-size: 11.5px;
  color: var(--muted);
  margin: 3px 0 0;
}

.history-pagination {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 0 0;
  border-top: 1px solid var(--line);
}

.history-page-btn {
  width: auto;
  min-height: 36px;
  padding: 5px 13px;
  font-size: 12.5px;
  font-weight: 750;
  border-radius: 8px;
}

.history-page-indicator {
  font-size: 12px;
  font-weight: 750;
  color: var(--ink);
  text-align: center;
}

/* Etapa 5A.4 / 5C.3 — Compact Commercial Restriction & Fisherman Help Card */
#expired-screen.card {
  padding: 15px 15px 14px;
  text-align: left;
}

.expired-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 6px;
}

.expired-card-top .universal-status-badge {
  margin: 0;
  padding: 2.5px 9px;
  font-size: 11.5px;
  font-weight: 750;
}

.expired-card-top .expired-association {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--accent);
}

#expired-screen h1 {
  font-size: 19px;
  line-height: 1.22;
  margin: 0 0 6px;
  text-align: left;
}

#expired-screen .expired-message {
  font-size: 13.5px;
  line-height: 1.38;
  color: var(--muted);
  margin: 0 0 8px;
}

#expired-screen .expired-date {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 9px;
}

.expired-help-box {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  margin: 0 0 9px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--soft);
  text-align: left;
}

.expired-help-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  color: var(--accent);
}

.expired-help-box #expired-whatsapp-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 8px 13px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  text-align: center;
}

.expired-help-box #expired-whatsapp-link.primary {
  background: #15803d;
  border: 1px solid #166534;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(21, 128, 61, 0.22);
}

.expired-help-box #expired-whatsapp-link.secondary {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: none;
}

.expired-account-selector .account-selector-eyebrow {
  color: var(--accent);
}

.expired-help-box .expired-no-whatsapp {
  font-size: 12.5px;
  line-height: 1.36;
  color: var(--ink);
  background: transparent;
  padding: 0;
  margin: 0;
}

#expired-screen .expired-actions {
  display: grid;
  gap: 6px;
  margin-top: 2px;
}

#expired-screen .expired-actions button {
  min-height: 41px;
  padding: 7px 12px;
  font-size: 13.5px;
}

@media (max-width: 520px), (max-height: 740px) {
  .page:has(#expired-screen:not([hidden])) {
    justify-content: flex-start;
    padding: 8px 10px 12px;
  }
  .page:has(#expired-screen:not([hidden])) header {
    margin-bottom: 6px;
  }
  .page:has(#expired-screen:not([hidden])) .brand {
    font-size: 20px;
  }
  .page:has(#expired-screen:not([hidden])) .association {
    font-size: 12px;
    margin-top: 1px;
  }
  #expired-screen.card {
    padding: 12px 13px 12px;
  }
  #expired-screen h1 {
    font-size: 17.5px;
    margin: 0 0 4px;
  }
  #expired-screen .expired-message {
    font-size: 13px;
    line-height: 1.32;
    margin: 0 0 7px;
  }
  #expired-screen .expired-date {
    margin: 0 0 7px;
    padding: 2.5px 9px;
    font-size: 11.5px;
  }
  #expired-screen .expired-account-selector {
    margin: 0 0 8px;
    padding: 8px 10px;
  }
  #expired-screen .expired-account-selector .account-selector-head {
    margin-bottom: 5px;
  }
  #expired-screen .expired-account-selector .account-option-card {
    padding: 8px 10px;
    gap: 4px;
  }
  #expired-screen .expired-account-selector .account-switch-btn {
    min-height: 40px;
    padding: 6px 10px;
    font-size: 13.5px;
  }
  .expired-help-box {
    padding: 8px 10px;
    margin: 0 0 7px;
    gap: 5px;
  }
  .expired-help-box #expired-whatsapp-link {
    min-height: 41px;
    padding: 7px 12px;
    font-size: 13.5px;
  }
  #expired-screen .expired-actions {
    gap: 5px;
  }
  #expired-screen .expired-actions button {
    min-height: 38px;
    padding: 6px 11px;
    font-size: 13px;
  }
}

/* Autonomous Device Transfer Dialog */
.universal-dialog {
  width: min(460px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 18px 65px rgba(9, 44, 70, 0.42);
  overflow: auto;
}

.universal-dialog::backdrop {
  background: rgba(8, 30, 49, 0.68);
}

.universal-dialog header {
  text-align: left;
  margin: 0 0 12px;
}

.universal-dialog h2 {
  font-size: 20px;
  line-height: 1.25;
}

.transfer-intro {
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0 0 14px;
}

.transfer-confirm-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 14px 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}

.transfer-confirm-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 2px 0 0;
  padding: 0;
}

.transfer-result-box {
  margin: 14px 0;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--accent);
  background: var(--soft);
  text-align: center;
}

.transfer-result-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 6px;
}

.transfer-code-display {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--accent);
  margin: 4px 0 6px;
}

.transfer-expires-display {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
}

.transfer-result-help {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
  margin: 0;
}

.transfer-dialog-actions {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

@media (max-width: 375px) {
  .auth-tab {
    font-size: 15.5px;
    padding: 6px 8px;
  }
  .device-id-row {
    grid-template-columns: 1fr;
  }
  #copy-device-id {
    width: 100%;
  }
}

/* Etapa 4B.2 / 4C.3 / 5B.2 — Coexisting Operational Accounts Selector (Asociación + MareaPe Directo) */
.account-selector-bar {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--soft);
  text-align: left;
}

#panel > .account-selector-bar {
  position: relative;
  z-index: 760;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1.5px solid #b5cedc;
  border-radius: 0;
  background: linear-gradient(180deg, #e7f3f8 0%, #dcecf4 100%);
}

.account-selector-toggle {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 6px 14px;
  cursor: pointer;
  user-select: none;
}

.account-selector-toggle::-webkit-details-marker {
  display: none;
}

.account-selector-toggle-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.account-selector-active-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #0d7a5f;
  box-shadow: 0 0 0 3px rgba(13, 122, 95, 0.18);
  flex-shrink: 0;
}

.account-selector-current-copy {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  flex-wrap: nowrap;
}

.account-selector-toggle-main .account-selector-eyebrow {
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.2px;
  color: #27536b;
  white-space: nowrap;
  flex-shrink: 0;
}

.account-selector-current-name {
  font-size: 13.5px;
  font-weight: 850;
  color: #0b2840;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#panel > .account-selector-bar .account-selector-summary {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #0e5a82;
  color: #ffffff;
  border: 1px solid #0a4666;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(11, 56, 84, 0.16);
}

#panel > .account-selector-bar[open] .account-selector-summary {
  background: #ffffff;
  color: #123b52;
  border-color: #9fc4d8;
  box-shadow: none;
}

.account-selector-body {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 780;
  max-height: calc(100vh - 106px);
  max-height: calc(100dvh - 106px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px 15px;
  background: #eff6fa;
  border-bottom: 2px solid #0e5a82;
  box-shadow: 0 18px 40px rgba(8, 34, 54, 0.28);
}

.account-selector-close-btn {
  width: auto;
  min-height: 32px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #ffffff;
  color: #123b52;
  border: 1px solid #b4cfe0;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.account-selector-close-btn:hover {
  background: #e2eff6;
}

.expired-account-selector {
  margin: 0 0 12px;
  padding: 11px 12px;
  border: 1.5px solid var(--accent);
  background: var(--soft);
}

.expired-account-selector .account-selector-head {
  margin-bottom: 8px;
}

.expired-account-selector .account-switch-btn {
  min-height: 44px;
  font-size: 14px;
  font-weight: 800;
}

.account-selector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.account-selector-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.45px;
  color: #144d69;
}

.account-selector-summary {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.account-selector-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 11px;
}

/* Base card structure */
.account-option-card {
  display: grid;
  gap: 7px;
  padding: 12px 13px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* 1) ACTIVE CARD (selected): Dominant, clear, "cerrada / en uso" */
.account-option-card.selected {
  padding: 13px 14px;
  border: 2px solid #0d7a5f;
  border-left-width: 6px;
  background: linear-gradient(180deg, #ebf9f4 0%, #f5fcf9 100%);
  box-shadow: 0 6px 18px rgba(11, 92, 70, 0.14);
}

.account-option-card.selected.state-expiring_soon {
  border-color: #b87309;
  background: linear-gradient(180deg, #fff9ea 0%, #fffdf6 100%);
}

.account-option-card.selected.state-expired {
  border-color: #b83b2a;
  background: linear-gradient(180deg, #fff3f0 0%, #fffaf9 100%);
  box-shadow: 0 6px 18px rgba(152, 43, 29, 0.12);
}

.account-option-card.selected.state-suspended,
.account-option-card.selected.state-restricted {
  border-color: #9e2b45;
  background: linear-gradient(180deg, #fdf1f4 0%, #fffafb 100%);
  box-shadow: 0 6px 18px rgba(138, 36, 59, 0.12);
}

/* 2) ALTERNATIVE CARD (not selected): Lighter, neutral, secondary option */
.account-option-card.alternative {
  padding: 11px 13px;
  border: 1px solid #c6dae6;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(15, 48, 72, 0.05);
}

#expired-screen .account-option-card.alternative {
  border-color: var(--line);
  background: var(--surface);
}

.account-option-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

.account-provider-badge {
  display: inline-flex;
  align-items: center;
  padding: 2.5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  background: #e4f0f6;
  color: #153e56;
  border: 1px solid #BDD3E0;
}

.account-provider-badge.direct {
  background: #e0f3ee;
  color: #0e4f46;
  border-color: #9ed4c6;
}

/* 7) Differentiated Visual States */
.account-state-badge {
  display: inline-flex;
  align-items: center;
  padding: 2.5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1px;
  background: #dff3e8;
  color: #135935;
  border: 1px solid #a8dbc0;
}

/* En uso (Active selected seal): Solid emerald highlight */
.account-state-badge.in-use {
  background: #0d7a5f;
  color: #ffffff;
  border-color: #095c47;
  padding: 3px 10px;
  box-shadow: 0 1px 4px rgba(13, 122, 95, 0.25);
}

/* Por vencer: Preventive warm amber */
.account-state-badge.expiring_soon {
  background: #fff0c7;
  color: #7a4e06;
  border-color: #ecc365;
}

.account-state-badge.expiring_soon.in-use {
  background: #b87309;
  color: #ffffff;
  border-color: #8f5805;
}

/* Vencida: Warning coral */
.account-state-badge.expired {
  background: #fde7e2;
  color: #982b1d;
  border-color: #f0b3a6;
}

.account-state-badge.expired.in-use {
  background: #b83b2a;
  color: #ffffff;
  border-color: #8f2b1e;
}

/* Suspendida / Restringida: Soft alert rose */
.account-state-badge.suspended,
.account-state-badge.restricted {
  background: #fae5ea;
  color: #8a243b;
  border-color: #e6b0bc;
}

.account-state-badge.suspended.in-use,
.account-state-badge.restricted.in-use {
  background: #9e2b45;
  color: #ffffff;
  border-color: #781e33;
}

.account-option-title {
  display: block;
  font-size: 14.5px;
  font-weight: 750;
  color: #163850;
  line-height: 1.25;
}

.account-option-card.selected .account-option-title {
  font-size: 16px;
  font-weight: 850;
  color: #082338;
}

#expired-screen .account-option-card .account-option-title {
  color: var(--ink);
}

.account-option-meta {
  display: grid;
  gap: 2px;
}

.account-option-card .account-option-validity,
.account-option-card .account-option-quota {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
  margin: 0;
}

.account-option-card .account-option-quota {
  font-weight: 700;
  color: var(--ink);
}

#panel .account-option-card.selected .account-option-quota {
  color: #0b4a3a;
  font-weight: 750;
}

#panel .account-option-card.alternative .account-option-quota {
  color: #2f5268;
}

/* Card Footer Action Buttons */
.account-switch-btn {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 800;
  border-radius: 10px;
  margin-top: 3px;
}

/* Active confirmation seal ("✓ En uso"): Closed, non-competing confirmation */
.account-switch-btn.active,
.account-switch-btn.active:disabled {
  background: #d2efe5;
  color: #084f3c;
  border: 1.5px solid #8acbb6;
  cursor: default;
  opacity: 1;
  box-shadow: none;
}

/* Alternative operative switch CTA ("Usar mi asociación" / "Usar MareaPe Directo") */
.account-switch-btn.switch-action {
  background: #0e5a82;
  color: #ffffff;
  border: 1px solid #094463;
  box-shadow: 0 2px 7px rgba(14, 90, 130, 0.2);
}

.account-switch-btn.switch-action:hover {
  background: #0b4b6d;
}

/* Alternative non-operative button ("Ver mi asociación" / "Ver MareaPe Directo") */
.account-switch-btn.switch-muted {
  background: #eef4f8;
  color: #35566c;
  border: 1px solid #bfd2de;
  box-shadow: none;
}

.account-selector-feedback {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--accent);
  margin: 8px 0 0;
}

@media (max-width: 520px) {
  .account-selector-list {
    grid-template-columns: 1fr;
  }
  .account-selector-toggle {
    padding: 6px 12px;
  }
  .account-selector-current-copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }
  .account-selector-toggle-main .account-selector-eyebrow {
    font-size: 10.5px;
  }
  .account-selector-current-name {
    font-size: 13.5px;
  }
}