:root {
      color-scheme: light; /* App siempre en claro (sin modo oscuro) */
      /* Elegant Light Theme - Clean whites, grays, blue accents */
      --bg: #ffffff;
      --bg-secondary: #f5f5f7;
      --text: #1d1d1f;
      --text-secondary: #424245;
      --muted: #86868b;
      --border: #d2d2d7;
      --accent: #0071e3;
      --accent-hover: #0077ed;
      --accent-light: rgba(0, 113, 227, 0.08);
      --accent-text: #ffffff;
      --card: #ffffff;
      --card-hover: #f5f5f7;
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
      --shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
      --shadow-elevated: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.04);
      --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.04);
      --radius: 14px;
      --radius-lg: 22px;
      --warning: #ff9f0a;
      --warning-bg: rgba(255, 159, 10, 0.1);
      --success: #30d158;
      --success-bg: rgba(48, 209, 88, 0.1);
      --error: #ff453a;
      --focus-ring: rgba(0, 113, 227, 0.25);
      --gradient-primary: linear-gradient(180deg, #f5f5f7 0%, #e8e8ed 100%);
      --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%);
    }

        /* --- ADVANCED SCANNER STYLES FROM DOCSCAN PRO v11.2 --- */
    /* Init Screen */
    .init {
      position: absolute;
      inset: 0;
      background: #000;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 100000;
      padding: 20px
    }

    .init.show {
      display: flex;
    }

    .init.hide {
      display: none
    }

    .init h1 {
      font-size: 28px;
      margin-bottom: 8px
    }

    .init p {
      color: #888;
      font-size: 14px;
      text-align: center
    }

    .initbtn {
      padding: 18px 60px;
      background: var(--accent);
      border: none;
      border-radius: 14px;
      color: #000;
      font-size: 17px;
      font-weight: 600;
      cursor: pointer;
      margin-top: 30px
    }

    .initbtn:disabled {
      opacity: 0.4
    }

    #initStatus {
      margin-top: 20px;
      font-size: 13px;
      color: #666
    }

    #initError {
      margin-top: 10px;
      font-size: 13px;
      color: #f55;
      max-width: 90%;
      text-align: center
    }

    /* Camera View - FULL SCREEN v9.0 Premium */
    .camera {
      position: absolute;
      inset: 0;
      background: #000;
      display: none;
      z-index: 99999;
    }

    .camera.show {
      display: block;
    }

    .camera.hide {
      display: none
    }

    #video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    /* V5.1 Smart Crop Requirement */
    #canvas {
      display: none
    }

    /* Used for internal processing */
    #overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 200
    }

    /* v9.0 Frosted Glass Controls Bar */
    .cam-controls {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 1.75rem 2rem;
      padding-bottom: max(1.75rem, calc(env(safe-area-inset-bottom, 0px) + 1rem));
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      z-index: 300
    }

    /* v9.0 Apple-style Shutter Button */
    .shutter {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      background: #fff;
      border: 5px solid rgba(255, 255, 255, 0.35);
      cursor: pointer;
      position: relative;
      -webkit-appearance: none;
      appearance: none;
      pointer-events: auto;
      transition: all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), inset 0 0 0 3px rgba(0, 0, 0, 0.06);
    }

    .shutter:active {
      transform: scale(0.88);
      background: #e0e0e0;
      transition: transform 0.08s ease;
    }

    .shutter::after {
      content: '';
      position: absolute;
      inset: 4px;
      border-radius: 50%;
      border: 2px solid rgba(0, 0, 0, 0.08)
    }

    /* Progress ring */
    .ring-wrap {
      position: absolute;
      top: -8px;
      left: -8px;
      width: 92px;
      height: 92px;
      pointer-events: none
    }

    .ring {
      width: 100%;
      height: 100%;
      transform: rotate(-90deg)
    }

    .ring circle {
      fill: none;
      stroke-width: 4;
      stroke-linecap: round
    }

    .ring-bg {
      stroke: rgba(255, 255, 255, 0.15)
    }

    .ring-fg {
      stroke: var(--accent);
      stroke-dasharray: 276;
      stroke-dashoffset: 276;
      transition: stroke-dashoffset 0.1s
    }

    .flash {
      position: absolute;
      inset: 0;
      background: #fff;
      opacity: 0;
      pointer-events: none;
      z-index: 400
    }

    .flash.on {
      animation: flash 0.25s
    }

    @keyframes flash {
      0% {
        opacity: 0.8
      }

      100% {
        opacity: 0
      }
    }

    /* v9.0 Status Pill - frosted glass */
    .status {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 10px 22px;
      border-radius: 24px;
      font-size: 0.85rem;
      white-space: nowrap;
      z-index: 300;
      color: #fff;
      font-weight: 600;
      letter-spacing: 0.3px;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      pointer-events: none;
      opacity: 0;
      text-shadow: none;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
      animation: statusFadeInOut 4s ease forwards;
    }

    @keyframes statusFadeInOut {
      0% {
        opacity: 0;
        transform: translate(-50%, -40%);
      }

      15% {
        opacity: 1;
        transform: translate(-50%, -50%);
      }

      85% {
        opacity: 1;
        transform: translate(-50%, -50%);
      }

      100% {
        opacity: 0;
        transform: translate(-50%, -60%);
      }
    }

    .status.detected {
      border-color: var(--accent)
    }

    /* Toast for AI Feedback */
    .scanner-toast {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      color: white;
      padding: 1rem 2rem;
      border-radius: 24px;
      font-weight: 600;
      z-index: 1000;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* v9.0 Camera Switch Button - frosted glass circle */
    .cam-btn {
      position: absolute;
      top: max(20px, env(safe-area-inset-top));
      right: 20px;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(60, 60, 60, 0.6);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 300;
      transition: all 0.2s ease;
    }

    .cam-btn:active {
      transform: scale(0.9);
      background: rgba(80, 80, 80, 0.8);
    }

    .cam-btn svg {
      width: 20px;
      height: 20px;
      fill: #fff
    }

    /* Editor */
    .editor {
      position: absolute;
      inset: 0;
      background: #000;
      z-index: 500;
      display: none;
      flex-direction: column
    }

    .editor.show {
      display: flex
    }

    .editor-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      padding-top: max(16px, env(safe-area-inset-top));
      background: #111;
      z-index: 510
    }

    .editor-title {
      font-weight: 600;
      font-size: 17px
    }

    .editor-btn {
      background: none;
      border: none;
      color: var(--accent);
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      padding: 8px 12px
    }

    .editor-body {
      flex: 1;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #000
    }

    #editorCanvas {
      max-width: 100%;
      max-height: 100%;
      display: block;
      object-fit: contain
    }

    .handle {
      position: absolute;
      width: 60px;
      height: 60px;
      transform: translate(-50%, -50%);
      cursor: grab;
      touch-action: none;
      z-index: 520
    }

    .handle::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 24px;
      height: 24px;
      background: var(--accent);
      border-radius: 50%;
      border: 4px solid #fff;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.6)
    }

    .handle.active::before {
      transform: translate(-50%, -50%) scale(1.2);
      background: #fff;
      border-color: var(--accent)
    }

    .editor-hint {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.6);
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 13px;
      color: #eee;
      pointer-events: none
    }

    /* Preview */
    .preview {
      position: absolute;
      inset: 0;
      background: #0a0a0a;
      z-index: 150;
      display: none;
      flex-direction: column
    }

    .preview.show {
      display: flex
    }

    .prev-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      padding-top: max(16px, env(safe-area-inset-top))
    }

    .prev-btn {
      background: none;
      border: none;
      color: var(--accent);
      font-size: 16px;
      cursor: pointer;
      padding: 8px
    }

    .prev-body {
      flex: 1;
      overflow-y: auto;
      padding: 0 16px 140px
    }

    #resultCanvas {
      width: 100%;
      border-radius: 10px;
      background: #222
    }

    .field {
      margin-top: 16px
    }

    .label {
      font-size: 12px;
      color: #888;
      text-transform: uppercase;
      margin-bottom: 6px
    }

    .input {
      width: 100%;
      padding: 14px;
      background: #1a1a1a;
      border: 1px solid #333;
      border-radius: 10px;
      color: #fff;
      font-size: 16px
    }

    .ocrbox {
      background: #1a1a1a;
      border-radius: 10px;
      padding: 14px;
      max-height: 180px;
      overflow-y: auto;
      font-size: 14px;
      color: #ccc;
      white-space: pre-wrap;
      line-height: 1.5
    }

    .download-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(transparent, #0a0a0a 20%);
      padding: 20px 16px;
      padding-bottom: max(20px, env(safe-area-inset-bottom))
    }

    .dl-btns {
      display: flex;
      gap: 10px
    }

    .dl-btn {
      flex: 1;
      padding: 16px;
      border-radius: 12px;
      background: #222;
      border: none;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px
    }

    .dl-btn.primary {
      background: var(--accent);
      color: #000
    }

    .dl-btn svg {
      width: 24px;
      height: 24px;
      fill: currentColor
    }

    .dl-btn:active {
      opacity: 0.8;
      transform: scale(0.98)
    }

    /* Loading & Toast */
    .loading {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.9);
      display: none;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      z-index: 400
    }

    .loading.show {
      display: flex
    }

    .spinner {
      width: 44px;
      height: 44px;
      border: 3px solid #333;
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.6s linear infinite
    }

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

    .loadtext {
      margin-top: 16px;
      font-size: 15px
    }

    .toast {
      position: absolute;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: #333;
      padding: 14px 28px;
      border-radius: 14px;
      font-size: 15px;
      opacity: 0;
      transition: all 0.3s;
      z-index: 600
    }

    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0)
    }

    /* Camera modal */
    .modal {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.9);
      display: none;
      align-items: flex-end;
      justify-content: center;
      z-index: 300;
      padding: 16px
    }

    .modal.show {
      display: flex
    }

    .modal-content {
      width: 100%;
      max-width: 400px
    }

    .modal-list {
      background: #222;
      border-radius: 14px;
      overflow: hidden
    }

    .modal-opt {
      padding: 18px;
      background: none;
      border: none;
      color: #fff;
      font-size: 16px;
      width: 100%;
      text-align: left;
      cursor: pointer;
      border-bottom: 1px solid #333
    }

    .modal-opt:last-child {
      border: none
    }

    .modal-opt.sel {
      color: var(--accent)
    }

    .modal-cancel {
      background: #333;
      border-radius: 14px;
      padding: 16px;
      width: 100%;
      margin-top: 10px;
      border: none;
      color: #fff;
      font-size: 17px;
      font-weight: 600;
      cursor: pointer
    }


    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
    }

    html,
    body {
      height: 100%;
      overflow: hidden;
      overscroll-behavior: none;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--gradient-primary);
      color: var(--text);
      line-height: 1.6;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
      letter-spacing: -0.01em;
    }

    /* PRELOADER - Oculta contenido hasta carga completa para eliminar jank */
    #app-preloader {
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.3s ease-out;
    }

    #app-preloader.fade-out {
      opacity: 0;
      pointer-events: none;
    }

    /* Ocultar contenido hasta que preloader desaparezca */
    .mobile-frame {
      opacity: 0;
      transition: opacity 0.4s ease-out;
    }

    .app-ready .mobile-frame {
      opacity: 1;
    }

        /* --- Scrollbar minimalista --- */
    ::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(128, 128, 128, 0.2);
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: rgba(128, 128, 128, 0.4);
    }

    /* --- RESUMEN: Centrar cards y no cortar sombras --- */
    .summary-container {
      padding: 0 1rem;
    }

    .summary-content-wrapper {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding: 0.5rem 0.5rem 2rem 0.5rem;
      /* Usar overflow overlay para que scrollbar no desplace contenido */
      overflow-y: auto;
      overflow-x: visible;
      scrollbar-gutter: stable;
    }

    .summary-card {
      margin: 0 auto;
      width: 100%;
      max-width: 100%;
      /* Asegurar que sombras se vean */
      box-shadow: var(--shadow);
    }

    /* --- ESTRUCTURA PRINCIPAL --- */
    .mobile-frame {
      width: 100%;
      max-width: 420px;
      height: 100%;
      max-height: 850px;
      background: var(--card);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      display: flex;
      flex-direction: column;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.08);
      overflow: hidden;
      position: relative;
      touch-action: pan-y;
    }

        .frame-header {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 10;
      padding: 1rem 1.5rem;
      background: var(--card);
    }

    .frame-controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .progress-container {
      display: none;
    }


    /* --- STEP PROGRESS INDICATOR --- */
    .step-progress-indicator {
      padding: 0.75rem 1rem;
      margin-top: 0.5rem;
    }

    .step-progress-indicator.hidden {
      display: none;
    }

    .step-progress-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;
      font-size: 0.85rem;
    }

    .step-counter {
      font-weight: 600;
      color: var(--text);
    }

    .step-current-name {
      color: var(--muted);
      font-size: 0.8rem;
      max-width: 60%;
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .step-progress-bar {
      width: 100%;
      height: 6px;
      background: var(--border);
      border-radius: 3px;
      overflow: hidden;
    }

    .step-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--accent), var(--accent-hover));
      border-radius: 3px;
      transition: width 0.4s ease;
      width: 0%;
    }

    /* --- CUSTOM SELECT STYLES (Missing) --- */
    .custom-select-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      z-index: 9998;
      backdrop-filter: blur(4px);
    }

    .custom-select-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .custom-select-modal {
      position: fixed;
      /* Centering on desktop */
      left: 0;
      right: 0;
      margin: 0 auto;
      max-width: 420px;
      /* Match mobile frame width */
      width: calc(100% - 2rem);
      /* Add padding for edges */

      bottom: 0;
      background: var(--card);
      /* Uses theme var */
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      padding: 1.5rem;
      padding-bottom: env(safe-area-inset-bottom, 20px);
      transform: translateY(100%);
      transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
      z-index: 9999;
      box-shadow: var(--shadow-lg);
      max-height: 80vh;
      display: flex;
      flex-direction: column;
    }

    .custom-select-modal.active {
      transform: translateY(0);
    }

    .custom-select-handle {
      width: 40px;
      height: 5px;
      background: var(--border);
      border-radius: 3px;
      align-self: center;
      margin-bottom: 1rem;
    }

    .custom-select-title {
      font-size: 1.25rem;
      font-weight: 700;
      margin-bottom: 1rem;
      text-align: center;
    }

    .custom-select-options {
      overflow-y: auto;
      max-height: 60vh;
    }

    .custom-select-option {
      padding: 1rem;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      font-size: 1.1rem;
    }

    .custom-select-option:last-child {
      border-bottom: none;
    }

    .custom-select-option.selected {
      color: var(--accent);
      font-weight: 600;
      background: var(--accent-light);
    }

    .check-icon {
      width: 20px;
      height: 20px;
      opacity: 0;
    }

    .custom-select-option.selected .check-icon {
      opacity: 1;
    }

    .custom-select-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-size: 1.1rem;
      cursor: pointer;
    }

    /* --- STEP LOGIC RECOVERY --- */
    /* --- IDENTITY BANNER (Progressive Registration) --- */
    .identity-banner {
      position: fixed;
      bottom: 120px;
      left: 50%;
      transform: translateX(-50%) translateY(100px);
      width: calc(100% - 40px);
      max-width: 380px;
      background: var(--bg-secondary);
      border: 1px solid var(--accent-light);
      border-radius: var(--radius);
      padding: 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      box-shadow: var(--shadow-lg);
      z-index: 100;
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s;
      opacity: 0;
      pointer-events: none;
    }

    .identity-banner.visible {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    .identity-banner-content {
      flex: 1;
    }

    .identity-banner-title {
      font-size: 0.9rem;
      font-weight: 600;
      margin-bottom: 2px;
    }

    .identity-banner-desc {
      font-size: 0.75rem;
      color: var(--muted);
    }

    .step.exiting {
      /* Priority over .active animation */
      animation: fadeOut 0.8s ease-in forwards !important;
      pointer-events: none;
    }

    @keyframes fadeOut {
      from {
        opacity: 1;
        transform: translateY(0);
      }

      to {
        opacity: 0;
        transform: translateY(-10px);
      }
    }


    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .container {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow-y: auto;
      padding: 2.5rem 1.5rem;
      padding-top: 100px;
      padding-bottom: 120px;
      scroll-behavior: smooth;
      scrollbar-width: thin;
      scrollbar-color: rgba(128, 128, 128, 0.2) transparent;
    }

    .container.summary-view {
      padding-top: 90px;
      justify-content: flex-start;
    }

    .frame-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      padding: 1.25rem 1rem;
      background: var(--card);
      border-top: none;
      z-index: 10;
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      align-items: center;
    }

    .nav-back,
    .help-center-btn,
    .nav-forward {
      flex-shrink: 0;
    }

    /* Navigation buttons (back/forward arrows) */
    .nav-btn {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: none;
      background: var(--bg);
      color: var(--muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      box-shadow: var(--shadow-elevated);
    }

    .nav-btn svg {
      width: 22px;
      height: 22px;
    }

    .nav-btn:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
      color: var(--text);
    }

    .nav-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      box-shadow: none;
    }

    /* Forward button active state - Efecto latido suave */
    .nav-btn.nav-forward:not(:disabled) {
      /* Base: casi igual que disabled (neutro) */
      background: var(--bg);
      color: var(--muted);
      box-shadow: var(--shadow-elevated);
      animation: forwardBtnPulse 2.5s ease-in-out infinite;
    }

    /* Pulso: de neutro a azul brillante y vuelta con efecto respiración */
    @keyframes forwardBtnPulse {

      0%,
      100% {
        /* Estado neutro */
        background: var(--bg);
        color: var(--muted);
        box-shadow: var(--shadow-elevated);
        transform: scale(1);
      }

      50% {
        /* Estado brillante - azul con glow y respiración */
        background: rgba(10, 132, 255, 0.25);
        color: var(--accent);
        box-shadow: 0 4px 20px rgba(10, 132, 255, 0.6);
        transform: scale(1.05);
      }
    }

    .nav-btn.nav-forward:not(:disabled):hover {
      animation-play-state: paused;
      background: rgba(10, 132, 255, 0.25);
      color: var(--accent);
      transform: scale(1.1);
      box-shadow: 0 4px 25px rgba(10, 132, 255, 0.65);
    }

    .frame-footer .btn {
      margin: 0 auto;
    }

    .help-link-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: var(--muted);
      font-size: 0.9rem;
      cursor: pointer;
      padding: 0.5rem 1rem;
      transition: all 0.2s ease;
    }

    .help-link-btn:hover {
      color: var(--accent);
    }

    .help-link-btn svg {
      opacity: 0.7;
    }

    .help-link-btn:hover svg {
      opacity: 1;
    }

    /* Floating Help Button in header */
    .help-fab {
      background: var(--accent-light) !important;
      border-radius: 50% !important;
      width: 40px !important;
      height: 40px !important;
      color: var(--accent) !important;
      box-shadow: var(--shadow-sm);
      transition: all 0.2s ease;
    }

    .help-fab:hover {
      background: var(--accent) !important;
      color: white !important;
      transform: scale(1.1);
      box-shadow: var(--shadow);
    }

    .help-fab svg {
      width: 22px !important;
      height: 22px !important;
    }

    .footer-buttons {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
    }

    .help-center-btn {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.5rem 1rem;
      background: rgba(0, 113, 227, 0.08);
      color: var(--accent);
      border: none;
      border-radius: 18px;
      font-weight: 500;
      font-size: 0.85rem;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .help-center-btn svg {
      width: 16px;
      height: 16px;
    }

    .help-center-btn:hover {
      background: rgba(0, 113, 227, 0.15);
      transform: translateY(-1px);
    }

    .footer-help-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--accent);
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: var(--shadow-sm);
    }

    .footer-help-btn:hover {
      background: var(--accent-hover);
      transform: scale(1.05);
      box-shadow: var(--shadow);
    }

    .footer-help-btn svg {
      width: 20px;
      height: 20px;
      stroke: white;
    }

    /* --- CONTENIDO DE PASOS --- */
    .step {
      display: none;
      width: 100%;
      animation: fadeIn 0.3s ease-in-out;
    }

    .step.active {
      display: block;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .step-header {
      text-align: center;
      margin-bottom: 3.5rem;
    }

    .step-header .brand {
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.02em;
    }

    .step-title {
      font-size: 1.75rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      text-align: center;
      animation: titleFadeIn 0.5s ease-out both;
    }

    .step-subtitle {
      color: var(--muted);
      font-size: 0.9rem;
      margin-bottom: 3rem;
      text-align: center;
      font-weight: 400;
      animation: titleFadeIn 0.5s ease-out 0.1s both;
    }

    @keyframes titleFadeIn {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* --- ELEMENTOS INTERACTIVOS --- */
    .btn,
    .btn-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
    }

    .btn {
      background: linear-gradient(180deg, rgba(0, 113, 227, 0.75) 0%, rgba(0, 113, 227, 0.85) 100%);
      color: var(--accent-text);
      border: none;
      border-radius: var(--radius);
      padding: 1rem 1.5rem;
      cursor: pointer;
      font-weight: 600;
      transition: all 0.2s ease;
      font-size: 1.05rem;
      width: 100%;
      min-height: 52px;
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow-elevated);
    }

    .btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
      opacity: 0;
      transition: opacity 0.3s;
    }

    .btn:active::before {
      opacity: 1;
    }

    .btn:active {
      transform: scale(0.98);
    }

    .btn:disabled {
      background: var(--border);
      color: var(--muted);
      cursor: not-allowed;
      pointer-events: none;
      transform: none;
      opacity: 0.7;
      box-shadow: none;
    }

    /* Botón "Continuar" de la pantalla de identidad: azul Apple limpio y luminoso
       (más claro y aireado, sin el gradiente que oscurece ni la sombra pesada),
       para que case con la estética elegante del resto de la app. */
    #unified-continue-btn:not(:disabled) {
      background: #0a84ff;
      box-shadow: 0 6px 18px rgba(10, 132, 255, 0.28);
    }
    #unified-continue-btn:not(:disabled):hover {
      background: #0071e3;
      box-shadow: 0 8px 22px rgba(10, 132, 255, 0.36);
    }
    #unified-continue-btn:not(:disabled):active {
      background: #0064c8;
    }

    .btn-fit {
      width: auto;
      padding-left: 2.5rem;
      padding-right: 2.5rem;
    }

    /* Header buttons with labels */
    .header-btn {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      background: transparent;
      border: none;
      color: var(--text);
      font-size: 0.85rem;
      font-weight: 500;
      cursor: pointer;
      padding: 0.5rem 0.75rem;
      border-radius: 8px;
      transition: all 0.2s ease;
    }

    .header-btn:hover {
      background: var(--accent-light);
      color: var(--accent);
    }

    .header-btn svg {
      stroke: currentColor;
      stroke-width: 2;
    }

    .help-header-btn {
      color: var(--accent);
    }

    .help-header-btn:hover {
      background: var(--accent);
      color: white;
    }

    .btn-secondary {
      background: var(--bg);
      color: var(--text);
      border: none;
      box-shadow: var(--shadow-elevated);
    }

    .btn-secondary:hover:not(:disabled) {
      background: var(--card-hover);
      box-shadow: var(--shadow-lg);
    }

    .btn:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
    }

    .btn:disabled {
      background-color: var(--border);
      color: var(--muted);
      cursor: not-allowed;
      opacity: 0.6;
      box-shadow: none;
    }

    .btn-icon {
      background: transparent;
      border: none;
      color: var(--text);
      height: 40px;
      width: 40px;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.2s ease;
      flex-shrink: 0;
      padding: 0;
    }

    .btn-icon:hover {
      background: var(--border);
    }

    .btn-icon svg {
      width: 28px;
      height: 28px;
      stroke: currentColor;
      stroke-width: 2;
    }

    .help-icon-button {
      background: rgba(0, 122, 255, 0.1);
      border: none;
      color: var(--accent);
      height: 32px;
      width: 32px;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.2s ease;
      flex-shrink: 0;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: auto;
    }

    .help-icon-button:hover {
      background: rgba(0, 122, 255, 0.2);
      transform: scale(1.1);
    }

    .help-icon-button svg {
      width: 20px;
      height: 20px;
      stroke: var(--accent);
      stroke-width: 2.5;
    }

    .lang-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      align-items: center;
    }

    .lang-btn {
      background: var(--bg);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1rem;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
      font-weight: 500;
      font-size: 1.1rem;
      width: auto;
      margin: 0 auto;
      min-width: 240px;
      min-height: 56px;
    }

    .lang-btn:active {
      transform: scale(0.97);
      background-color: rgba(0, 122, 255, 0.15);
    }

    .choice-btn {
      background: var(--bg);
      color: var(--text);
      border: none;
      border-radius: var(--radius);
      padding: 1.25rem 1rem;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
      font-weight: 600;
      font-size: 1rem;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      min-height: 120px;
      box-shadow: var(--shadow-elevated);
    }

    .choice-btn .muted-text {
      font-size: 0.8rem;
      font-weight: 400;
      color: var(--muted);
    }

    .choices {
      margin-top: 3.5rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .lang-btn:hover,
    .choice-btn:hover {
      background-color: rgba(0, 122, 255, 0.1);
      color: var(--accent);
      transform: translateY(-3px);
      box-shadow: var(--shadow-lg);
    }

    .input-group {
      margin: 1.5rem 0;
      text-align: center;
      position: relative;
    }

    /* Aviso bajo un campo cuando el formato no es correcto (email/CIF/DNI) */
    .field-hint {
      margin-top: 0.55rem;
      font-size: 0.82rem;
      line-height: 1.35;
      color: var(--error);
      text-align: left;
      padding: 0 0.2rem;
    }
    html[dir="rtl"] .field-hint { text-align: right; }

    .input-group label {
      display: block;
      margin-bottom: 0.5rem;
      font-size: 0.9rem;
      color: var(--muted);
      text-align: left;
    }

    .input-group-with-icon .input {
      padding-right: 52px;
    }

    .input-group-with-icon .btn-icon {
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      height: 40px;
      width: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--accent-light);
      border: 1px solid var(--accent);
      border-radius: 50%;
      transition: all 0.2s ease;
      padding: 0;
    }

    .input-group-with-icon .btn-icon:hover {
      background: var(--accent);
      color: var(--accent-text);
      transform: translateY(-50%) scale(1.05);
    }

    .input-group-with-icon .btn-icon svg {
      width: 20px !important;
      height: 20px !important;
      stroke: var(--accent);
      stroke-width: 2;
      flex-shrink: 0;
    }

    .input-group-with-icon .btn-icon:hover svg {
      stroke: var(--accent-text);
    }

    /* Reference Assistant Button - positioned inside input */
    .ref-assistant-btn {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      height: 36px;
      width: 36px;
      min-width: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--accent) !important;
      border: none !important;
      border-radius: 50%;
      transition: all 0.2s ease;
      padding: 0;
      z-index: 2;
    }

    .ref-assistant-btn svg {
      width: 18px;
      height: 18px;
      stroke: white !important;
    }

    .ref-assistant-btn:hover {
      background: var(--accent-hover) !important;
      transform: translateY(-50%) scale(1.08);
    }

    .ref-assistant-btn:hover svg {
      stroke: white !important;
    }

    /* --- NUEVO CONTENEDOR ROBUSTO PARA INPUT CON BUSQUEDA --- */
    .search-input-container {
      width: 100%;
      height: 52px;
      background: var(--bg);
      border-radius: var(--radius);
      box-shadow: var(--shadow-elevated);
      display: flex;
      align-items: center;
      position: relative;
      transition: all 0.2s ease;
    }

    .search-input-container:focus-within {
      box-shadow: var(--shadow-elevated), 0 0 0 3px var(--focus-ring);
    }

    /* El input real se vuelve transparente y llena el container */
    .search-input-container input.input-transparent {
      width: 100%;
      height: 100%;
      background: transparent;
      border: none;
      box-shadow: none;
      padding: 0 1rem;
      padding-right: 50px !important;
      /* Espacio para el botón */
      outline: none;
      color: var(--text);
      font-size: 1rem;
      border-radius: var(--radius);
    }

    /* El input transparente no debe tener estilos propios de foco */
    .search-input-container input.input-transparent:focus {
      box-shadow: none;
      outline: none;
    }

    /* Botón posicionado absolutamente dentro del container */
    .search-input-container .ref-search-btn {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      margin: 0;
      z-index: 5;

      /* Estilos visuales del botón */
      height: 34px;
      width: 34px;
      min-width: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(10, 132, 255, 0.15);
      border: none;
      border-radius: 50%;
      padding: 0;
      cursor: pointer;
      /* Animación DEDICADA que preserva el translateY(-50%) */
      animation: searchBtnPulse 2s ease-in-out infinite;
      box-shadow: 0 2px 12px rgba(10, 132, 255, 0.3);
    }

    /* Animación específica que mantiene el centrado vertical */
    @keyframes searchBtnPulse {

      0%,
      100% {
        transform: translateY(-50%) scale(1);
        box-shadow: 0 2px 12px rgba(10, 132, 255, 0.3);
      }

      50% {
        transform: translateY(-50%) scale(1.05);
        box-shadow: 0 4px 20px rgba(10, 132, 255, 0.5);
      }
    }

    .search-input-container .ref-search-btn svg {
      stroke: var(--accent);
    }

    .search-input-container .ref-search-btn:hover {
      /* Mantener translateY en hover también */
      transform: translateY(-50%) scale(1.1);
      animation-play-state: paused;
      box-shadow: 0 4px 20px rgba(10, 132, 255, 0.5);
    }

    /* RTL Support para el nuevo container */
    html[dir="rtl"] .search-input-container .ref-search-btn {
      right: auto;
      left: 8px;
    }

    html[dir="rtl"] .search-input-container input.input-transparent {
      padding-right: 1rem !important;
      padding-left: 50px !important;
    }

    /* Wrapper para input + botón de búsqueda */
    .input-with-search-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
    }

    .input-with-search-wrapper .input {
      padding-right: 52px !important;
      width: 100%;
      flex: 1;
    }

    .input-with-search-wrapper .ref-search-btn {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      margin: 0;
      /* Asegurar que no herede animación problemática */
    }

    /* RTL: Posicionar botón a la izquierda */
    html[dir="rtl"] .input-with-search-wrapper .ref-search-btn {
      right: auto;
      left: 6px;
    }

    html[dir="rtl"] .input-with-search-wrapper .input {
      padding-right: 1rem;
      padding-left: 52px;
    }

    html[dir="rtl"] .ref-search-btn {
      right: auto;
      left: 8px;
    }

    html[dir="rtl"] .input-group-with-icon .input {
      padding-right: 1rem;
      padding-left: 52px;
    }

    /* Input groups with search button need padding */
    .input-group:has(.ref-search-btn) .input {
      padding-right: 52px;
    }

    .input-group .currency-symbol {
      position: absolute;
      right: 1rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      font-size: 1.1rem;
      font-weight: 500;
      pointer-events: none;
    }

    /* Ensure input has padding for currency symbol */
    .input-group:has(.currency-symbol) .input {
      padding-right: 2.5rem;
    }

    /* RTL support for currency symbol */
    html[dir="rtl"] .input-group .currency-symbol {
      right: auto;
      left: 1rem;
    }

    html[dir="rtl"] .input-group:has(.currency-symbol) .input {
      padding-right: 1rem;
      padding-left: 2.5rem;
    }

    .input {
      width: 100%;
      padding: 0 1rem;
      border: none;
      border-radius: var(--radius);
      background: var(--bg);
      color: var(--text);
      font-size: 1rem;
      height: 52px;
      transition: all 0.2s ease;
      box-shadow: var(--shadow-elevated);
    }

    .input:focus {
      outline: none;
      box-shadow: var(--shadow-elevated), 0 0 0 3px var(--focus-ring);
    }

    select.input {
      background: var(--card);
      color: var(--text);
      border-radius: var(--radius);
      -webkit-appearance: none;
      appearance: none;
      cursor: pointer;
      border: none;
      box-shadow: var(--shadow-elevated);
      transition: all 0.2s ease;
    }

    select.input:hover {
      background: var(--bg);
      box-shadow: var(--shadow-lg);
    }

    select.input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--focus-ring);
      background: var(--card);
    }

    select.input option {
      background-color: var(--card);
      color: var(--text);
      padding: 0.75rem;
    }

    /* Fix dropdown colors for all themes */
        body[data-theme="light"] select.input option {
      background-color: #ffffff;
      color: #1d1d1f;
    }

    .select-wrapper {
      position: relative;
    }

    .select-wrapper::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 1rem;
      width: 20px;
      height: 20px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2365676b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      transform: translateY(-50%);
      pointer-events: none;
    }

        /* --- CUSTOM SELECT - LIQUID GLASS STYLE --- */
    .custom-select-trigger {
      width: 100%;
      padding: 1rem 3rem 1rem 1rem;
      border: none;
      border-radius: var(--radius);
      background: var(--card);
      color: var(--text);
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      min-height: 52px;
      box-shadow: var(--shadow-elevated);
    }

    .custom-select-trigger::after {
      content: '';
      position: absolute;
      right: 1rem;
      width: 20px;
      height: 20px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%236e6e73'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      transition: transform 0.3s ease;
    }

    .custom-select-trigger:hover {
      background: var(--bg-secondary);
      box-shadow: var(--shadow-lg);
      transform: translateY(-2px);
    }

    .custom-select-trigger.active::after {
      transform: rotate(180deg);
    }

    .custom-select-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 9998;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

    .custom-select-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .custom-select-modal {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--card);
      backdrop-filter: blur(40px) saturate(180%);
      -webkit-backdrop-filter: blur(40px) saturate(180%);
      border-radius: 24px 24px 0 0;
      z-index: 9999;
      transform: translateY(100%);
      transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
      max-height: 70vh;
      overflow: hidden;
      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
    }

        /* Explicit theme overrides for custom select modal */
    html[data-theme="light"] .custom-select-modal {
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
    }

    /* Explicit theme overrides for custom select options */
    html[data-theme="light"] .custom-select-title {
      color: #1d1d1f;
    }

    html[data-theme="light"] .custom-select-option {
      color: #1d1d1f;
    }

    html[data-theme="light"] .custom-select-option:hover,
    html[data-theme="light"] .custom-select-option.selected {
      background: rgba(0, 122, 255, 0.1);
    }

    .custom-select-modal.active {
      transform: translateY(0);
    }

    .custom-select-handle {
      width: 36px;
      height: 5px;
      background: var(--border);
      border-radius: 3px;
      margin: 12px auto;
    }

    .custom-select-title {
      padding: 0.5rem 1.5rem 1rem;
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text);
      text-align: center;
    }

    .custom-select-options {
      overflow-y: auto;
      max-height: calc(70vh - 80px);
      padding: 0 0.75rem 2rem;
    }

    .custom-select-option {
      padding: 1rem 1.25rem;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.25rem;
      color: var(--text);
      font-size: 1rem;
    }

    .custom-select-option:hover {
      background: var(--accent-light);
    }

    .custom-select-option.selected {
      background: var(--accent-light);
      color: var(--accent);
      font-weight: 500;
    }

    .custom-select-option .check-icon {
      width: 20px;
      height: 20px;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .custom-select-option.selected .check-icon {
      opacity: 1;
      color: var(--accent);
    }

    /* --- OTP INPUT STYLES --- */
    .otp-input {
      width: 48px;
      height: 56px;
      text-align: center;
      font-size: 1.5rem;
      font-weight: 600;
      border: 2px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg-secondary);
      color: var(--text);
      transition: all 0.2s ease;
      caret-color: var(--accent);
    }

    .otp-input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 4px var(--accent-light);
    }

    .otp-input.filled {
      border-color: var(--accent);
      background: var(--accent-light);
    }

    .otp-input.error {
      border-color: #ef4444;
      animation: shake 0.5s ease;
    }

    @keyframes shake {

      0%,
      100% {
        transform: translateX(0);
      }

      20%,
      60% {
        transform: translateX(-4px);
      }

      40%,
      80% {
        transform: translateX(4px);
      }
    }

    /* --- OPERATIONS LIST STYLES --- */
    .operation-card {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .operation-card:hover {
      border-color: var(--accent);
      transform: translateY(-2px);
      box-shadow: var(--shadow);
    }

    .operation-card:active {
      transform: scale(0.98);
    }

    .operation-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: var(--accent-light);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .operation-icon svg {
      width: 24px;
      height: 24px;
      color: var(--accent);
    }

    .operation-content {
      flex: 1;
      overflow: hidden;
    }

    .operation-title {
      font-weight: 600;
      color: var(--text);
      font-size: 1rem;
      margin-bottom: 0.25rem;
    }

    .operation-subtitle {
      font-size: 0.85rem;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .operation-badge {
      padding: 0.25rem 0.5rem;
      border-radius: 8px;
      font-size: 0.75rem;
      font-weight: 600;
      flex-shrink: 0;
    }

    .operation-badge.pending {
      background: #fef3c7;
      color: #92400e;
    }

    .operation-badge.docs {
      background: #dbeafe;
      color: #1e40af;
    }

    .operation-badge.payment {
      background: #dcfce7;
      color: #166534;
    }

    .btn-link {
      background: none;
      border: none;
      color: var(--accent);
      font-size: 0.9rem;
      cursor: pointer;
      text-decoration: underline;
      padding: 0.5rem;
    }

    .btn-link:hover {
      opacity: 0.8;
    }

    /* --- TRANSITION SCREEN (Buyer Complete) --- */
    .transition-container {
      text-align: center;
      padding: 1rem;
      animation: fadeInUp 0.6s ease-out;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .transition-icon-wrapper {
      width: 80px;
      height: 80px;
      margin: 0 auto 1.5rem;
      color: var(--success);
    }

    .transition-icon {
      width: 80px;
      height: 80px;
    }

    .transition-circle {
      stroke-dasharray: 166;
      stroke-dashoffset: 166;
      animation: strokeCircle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
    }

    .transition-check {
      stroke-dasharray: 48;
      stroke-dashoffset: 48;
      animation: strokeCheck 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
    }

    @keyframes strokeCircle {
      100% {
        stroke-dashoffset: 0;
      }
    }

    @keyframes strokeCheck {
      100% {
        stroke-dashoffset: 0;
      }
    }

    .transition-title {
      animation: fadeIn 0.5s ease 0.3s both;
    }

    .transition-subtitle {
      animation: fadeIn 0.5s ease 0.5s both;
      margin-bottom: 2rem;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    /* Transition action buttons */
    .transition-actions {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-top: 1rem;
      animation: fadeIn 0.5s ease 0.7s both;
    }

    .transition-action-btn {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1.25rem;
      background: var(--card);
      border-radius: var(--radius);
      border: none;
      text-align: left;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: var(--shadow-elevated);
    }

    .transition-action-btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
    }

    .transition-action-btn:active {
      transform: translateY(0);
    }

    .transition-action-primary {
      background: var(--accent);
    }

    .transition-action-primary .transition-action-text strong,
    .transition-action-primary .transition-action-text span,
    .transition-action-primary .transition-action-icon,
    .transition-action-primary .transition-action-arrow {
      color: white;
    }

    .transition-action-icon {
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .transition-action-icon svg {
      width: 28px;
      height: 28px;
    }

    .transition-action-text {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .transition-action-text strong {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text);
    }

    .transition-action-text span {
      font-size: 0.85rem;
      color: var(--muted);
    }

    .transition-action-arrow {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      color: var(--muted);
    }

    .transition-action-arrow svg {
      width: 24px;
      height: 24px;
    }

    /* --- SUCCESS SCREEN (Phase 1 Complete) --- */
    .success-container {
      text-align: center;
      padding: 1rem;
      animation: fadeInUp 0.6s ease-out;
    }

    .success-icon-wrapper {
      width: 80px;
      height: 80px;
      margin: 0 auto 1.5rem;
      color: var(--success);
    }

    .success-icon {
      width: 80px;
      height: 80px;
    }

    .success-circle {
      stroke-dasharray: 166;
      stroke-dashoffset: 166;
      animation: strokeCircle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
    }

    .success-check {
      stroke-dasharray: 48;
      stroke-dashoffset: 48;
      animation: strokeCheck 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
    }

    .success-title {
      animation: fadeIn 0.5s ease 0.3s both;
    }

    .success-subtitle {
      animation: fadeIn 0.5s ease 0.5s both;
      margin-bottom: 1.5rem;
    }

    .success-case-id-container {
      animation: fadeIn 0.5s ease 0.7s both;
      margin-bottom: 1.5rem;
      position: relative;
    }

    .success-case-label {
      display: block;
      font-size: 0.9rem;
      color: var(--muted);
      margin-bottom: 0.5rem;
      text-align: center;
    }

    .success-case-id-box {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }

    .success-case-input {
      flex: 1;
      padding: 1rem;
      font-size: 1.1rem;
      font-weight: 700;
      text-align: center;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      color: var(--text);
      letter-spacing: 0.05em;
    }

    .success-copy-btn {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1rem;
      background: var(--accent);
      color: white;
      border: none;
      border-radius: var(--radius);
      cursor: pointer;
      font-weight: 500;
      font-size: 0.9rem;
      transition: all 0.2s ease;
    }

    .success-copy-btn:hover {
      transform: scale(1.02);
      box-shadow: var(--shadow);
    }

    .success-copy-btn:active {
      transform: scale(0.98);
    }

    .success-copy-btn svg {
      width: 18px;
      height: 18px;
    }

    .success-copied-toast {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      margin-top: 0.75rem;
      padding: 0.5rem 1rem;
      background: var(--success);
      color: white;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 500;
      animation: toastPop 0.3s ease;
    }

    .success-copied-toast.show {
      display: inline-flex;
    }

    .success-copied-toast svg {
      width: 16px;
      height: 16px;
    }

    @keyframes toastPop {
      from {
        opacity: 0;
        transform: scale(0.9);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .success-continue-btn {
      animation: fadeIn 0.5s ease 0.9s both;
    }

    /* --- HUB DE PARTICIPANTES --- */
    .participants-list {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-bottom: 2rem;
      min-height: 100px;
    }

    .participant-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1rem 1.25rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: all 0.2s ease;
    }

    .participant-card:hover {
      box-shadow: var(--shadow);
      border-color: var(--accent);
    }

    .participant-info {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-grow: 1;
    }

    .participant-info .icon {
      width: 24px;
      height: 24px;
    }

    .participant-name {
      font-weight: 600;
      font-size: 0.95rem;
      color: var(--text);
    }

    .participant-type {
      font-size: 0.8rem;
      color: var(--muted);
      margin-top: 0.25rem;
    }

    .participant-status {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.25rem 0.75rem;
      border-radius: 12px;
      font-size: 0.8rem;
      font-weight: 500;
    }

    .status-badge.complete {
      background: rgba(40, 167, 69, 0.1);
      color: var(--success);
    }

    .status-badge.pending {
      background: rgba(245, 158, 11, 0.1);
      color: var(--warning);
    }

    .add-participant-btn {
      border: none;
      background: var(--card);
      color: var(--text);
      padding: 1.5rem;
      border-radius: var(--radius);
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      font-weight: 500;
      width: 100%;
      box-shadow: var(--shadow-elevated);
    }

    .add-participant-btn:hover {
      color: var(--accent);
      background: var(--bg-secondary);
      box-shadow: var(--shadow-lg);
      transform: translateY(-2px);
    }

    .empty-state {
      text-align: center;
      padding: 2rem;
      color: var(--muted);
    }

    /* --- SLIDER DE FINANCIACIÓN (Rediseñado) --- */
    .financing-slider-container {
      padding: 1.5rem 0;
    }

    .slider-labels {
      display: flex;
      justify-content: space-between;
      margin-bottom: 1.5rem;
      font-size: 0.85rem;
      color: var(--muted);
      font-weight: 500;
    }

    .slider-wrapper {
      position: relative;
      padding: 1.5rem 0;
    }

    .slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 12px;
      border-radius: 10px;
      background: var(--bg-secondary);
      outline: none;
      transition: background 0.3s ease;
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: linear-gradient(145deg, var(--accent), var(--accent-hover));
      cursor: grab;
      box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.3);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      border: 3px solid white;
    }

    .slider::-webkit-slider-thumb:hover {
      transform: scale(1.1);
      box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.2),
        0 3px 6px rgba(0, 0, 0, 0.25);
    }

    .slider::-webkit-slider-thumb:active {
      cursor: grabbing;
      transform: scale(1.05);
    }

    .slider::-moz-range-thumb {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: linear-gradient(145deg, var(--accent), var(--accent-hover));
      cursor: grab;
      box-shadow:
        0 4px 12px rgba(10, 132, 255, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.2);
      border: 3px solid white;
    }

    .percentage-display {
      display: flex;
      justify-content: space-between;
      margin-top: 2rem;
      gap: 1rem;
    }

    .percentage-card {
      flex: 1;
      padding: 1.5rem 1rem;
      background: var(--card);
      border-radius: var(--radius-lg);
      text-align: center;
      /* Sombras 3D suaves sin bordes */
      box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 4px 8px rgba(0, 0, 0, 0.06),
        0 8px 16px rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;
      border: none;
    }

    .percentage-card:hover {
      transform: translateY(-2px);
      box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.06),
        0 8px 16px rgba(0, 0, 0, 0.08),
        0 16px 32px rgba(0, 0, 0, 0.06);
    }

    .percentage-card .label {
      font-size: 0.75rem;
      color: var(--muted);
      margin-bottom: 0.5rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .percentage-card .value {
      font-size: 2.25rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.02em;
    }

    /* --- OTROS ELEMENTOS --- */
    .consent-box {
      background: var(--bg);
      border-radius: var(--radius);
      padding: 1.25rem;
      text-align: center;
      margin-bottom: 1.5rem;
    }

    .consent-detail {
      display: none;
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border);
      color: var(--muted);
      font-size: 0.8rem;
      text-align: left;
      max-height: 150px;
      overflow-y: auto;
    }

    .consent-detail.show {
      display: block;
    }

    .upload-buttons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .upload-buttons .btn {
      flex-direction: column;
      gap: 0.5rem;
      padding: 1.25rem 1rem;
      height: auto;
      font-size: 0.9rem;
    }

    .upload-buttons .btn svg {
      width: 28px;
      height: 28px;
      margin-bottom: 0.25rem;
      color: var(--accent);
    }

    /* --- SUCCESS HERO ANIMATION --- */
    .success-hero {
      text-align: center;
      padding: 2rem 1rem;
    }

    .checkmark-circle {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: var(--success);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      box-shadow: 0 10px 30px rgba(40, 167, 69, 0.3);
      animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    .checkmark-check {
      width: 40px;
      height: 40px;
      color: white;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 60;
      stroke-dashoffset: 60;
      animation: drawCheck 0.4s 0.4s ease forwards;
    }

    @keyframes popIn {
      0% {
        transform: scale(0);
        opacity: 0;
      }

      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    @keyframes drawCheck {
      to {
        stroke-dashoffset: 0;
      }
    }

    .validation-card {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 1.5rem;
      margin: 2rem auto;
      max-width: 360px;
      position: relative;
    }

    .validation-code {
      font-family: 'Monaco', 'Consolas', monospace;
      font-size: 1.5rem;
      letter-spacing: 2px;
      color: var(--text);
      font-weight: 700;
      margin: 0.5rem 0;
      display: block;
    }

    /* --- OTP INPUT STYLES --- */
    .otp-input {
      width: 45px;
      height: 55px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--card);
      color: var(--text);
      font-size: 1.5rem;
      font-weight: 600;
      text-align: center;
      transition: all 0.2s ease;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
    }
    
    .otp-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
      outline: none;
    }
    
    .otp-input.filled {
      border-color: var(--success);
      background: rgba(48, 209, 88, 0.05);
    }

    /* --- PROFESSIONAL FINAL SUCCESS SCREEN --- */
    .final-success-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 1.5rem 1.25rem;
      min-height: 100%;
    }

    .final-success-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: linear-gradient(135deg, rgba(48, 209, 88, 0.15) 0%, rgba(48, 209, 88, 0.08) 100%);
      border: 1px solid rgba(48, 209, 88, 0.3);
      color: var(--success);
      padding: 0.5rem 1.25rem;
      border-radius: 30px;
      font-size: 0.8rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 1.5rem;
      animation: fadeInDown 0.5s ease-out 0.2s both;
    }

    .final-success-badge svg {
      width: 16px;
      height: 16px;
    }

    @keyframes fadeInDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .final-success-icon {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: linear-gradient(145deg, var(--success), #22c55e);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.5rem;
      box-shadow: 0 8px 24px rgba(48, 209, 88, 0.25), 0 0 0 8px rgba(48, 209, 88, 0.08);
      animation: successPulse 2s ease-in-out infinite;
    }

    .final-success-icon svg {
      width: 36px;
      height: 36px;
      color: white;
      stroke-width: 2.5;
    }

    @keyframes successPulse {

      0%,
      100% {
        box-shadow: 0 8px 24px rgba(48, 209, 88, 0.25), 0 0 0 8px rgba(48, 209, 88, 0.08);
      }

      50% {
        box-shadow: 0 8px 24px rgba(48, 209, 88, 0.35), 0 0 0 12px rgba(48, 209, 88, 0.05);
      }
    }

    .final-success-title {
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 0.5rem;
      letter-spacing: -0.02em;
    }

    .final-success-subtitle {
      font-size: 0.95rem;
      color: var(--muted);
      line-height: 1.5;
      max-width: 320px;
      margin: 0 auto 1.5rem;
    }

    .final-validation-card {
      background: var(--card);
      border-radius: var(--radius);
      padding: 1.25rem;
      width: 100%;
      max-width: 320px;
      box-shadow: var(--shadow-elevated);
      margin-bottom: 1.5rem;
      animation: fadeIn 0.5s ease-out 0.4s both;
    }

    .final-validation-label {
      font-size: 0.7rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .final-validation-code {
      font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--accent);
      letter-spacing: 1.5px;
      margin-bottom: 0.75rem;
      padding: 0.5rem;
      background: var(--bg-secondary);
      border-radius: 8px;
      display: block;
    }

    .final-copy-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      background: var(--accent-light);
      color: var(--accent);
      border: none;
      padding: 0.6rem 1.25rem;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .final-copy-btn:hover {
      background: var(--accent);
      color: white;
      transform: translateY(-1px);
    }

    .final-copy-btn svg {
      width: 16px;
      height: 16px;
    }

    .final-info-text {
      font-size: 0.8rem;
      color: var(--muted);
      margin-bottom: 1.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }

    .final-info-text svg {
      width: 16px;
      height: 16px;
      color: var(--accent);
    }

    .final-home-btn {
      background: var(--accent);
      color: white;
      border: none;
      padding: 1rem 2.5rem;
      border-radius: var(--radius);
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      box-shadow: var(--shadow-elevated);
      transition: all 0.2s ease;
      animation: fadeIn 0.5s ease-out 0.6s both;
    }

    .final-home-btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
    }

    /* --- INSTRUCTION CARDS (Like Choice Btn) --- */
    .instruction-card {
      background: var(--bg);
      border-radius: var(--radius);
      padding: 1.5rem;
      box-shadow: var(--shadow-elevated);
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1rem;
      text-align: left;
      border: 1px solid transparent;
      transition: all 0.2s ease;
    }

    .instruction-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-2px);
      border-color: var(--accent-light);
    }

    .instruction-icon-box {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: var(--accent-light);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* --- OPERATION DETAIL & PIPELINE (v14.0) --- */
    .op-detail-header { text-align:center; padding-bottom:1.5rem; border-bottom:1px solid var(--border); margin-bottom:1.5rem; }
    .op-detail-ref { font-size:1.5rem; font-weight:700; color:var(--text); margin-bottom:0.25rem; }
    .op-detail-meta { font-size:0.9rem; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:0.75rem; margin-bottom:1rem; }
    .op-detail-amount { font-weight:600; color:var(--text); }
    .op-status-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px; font-size:0.8rem; font-weight:600; }
    .op-pipeline { display:flex; align-items:flex-start; justify-content:center; padding:1.25rem 0.5rem; background:var(--card); border-radius:var(--radius); border:1px solid var(--border); margin-bottom:1.5rem; box-shadow:var(--shadow-sm); }
    .op-pipeline-step { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; position:relative; }
    .op-pipeline-dot { width:28px; height:28px; border-radius:50%; border:2px solid var(--border); background:var(--bg-secondary); display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:700; color:var(--muted); transition:all 0.3s ease; position:relative; z-index:1; }
    .op-pipeline-step.completed .op-pipeline-dot { background:var(--success); border-color:var(--success); color:white; }
    .op-pipeline-step.active .op-pipeline-dot { background:var(--accent); border-color:var(--accent); color:white; box-shadow:0 0 0 4px rgba(10,132,255,0.15); }
    .op-pipeline-step.rejected .op-pipeline-dot { background:var(--error); border-color:var(--error); color:white; }
    .op-pipeline-label { font-size:0.62rem; color:var(--muted); font-weight:500; text-transform:uppercase; letter-spacing:0.03em; text-align:center; line-height:1.2; }
    .op-pipeline-step.active .op-pipeline-label { color:var(--accent); font-weight:600; }
    .op-pipeline-step.completed .op-pipeline-label { color:var(--success); }
    .op-pipeline-line { position:absolute; top:14px; left:50%; width:100%; height:2px; background:var(--border); z-index:0; }
    .op-pipeline-step.completed .op-pipeline-line { background:var(--success); }
    .op-pipeline-step:last-child .op-pipeline-line { display:none; }
    .op-timeline { margin-bottom:1.5rem; }
    .op-timeline-title { font-size:0.8rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:1rem; }
    .op-timeline-item { display:flex; gap:1rem; padding-bottom:1.25rem; position:relative; }
    .op-timeline-item:last-child { padding-bottom:0; }
    .op-timeline-item::before { content:''; position:absolute; left:11px; top:24px; bottom:0; width:2px; background:var(--border); }
    .op-timeline-item:last-child::before { display:none; }
    .op-timeline-dot { width:24px; height:24px; border-radius:50%; background:var(--accent-light); border:2px solid var(--accent); flex-shrink:0; display:flex; align-items:center; justify-content:center; z-index:1; }
    .op-timeline-dot svg { width:12px; height:12px; color:var(--accent); }
    .op-timeline-dot.success { background:rgba(48,209,88,0.1); border-color:var(--success); }
    .op-timeline-dot.success svg { color:var(--success); }
    .op-timeline-dot.warning { background:rgba(255,159,10,0.1); border-color:var(--warning); }
    .op-timeline-dot.warning svg { color:var(--warning); }
    .op-timeline-content { flex:1; min-width:0; }
    .op-timeline-event { font-size:0.92rem; font-weight:600; color:var(--text); margin-bottom:2px; }
    .op-timeline-desc { font-size:0.82rem; color:var(--muted); line-height:1.4; }
    .op-timeline-date { font-size:0.72rem; color:var(--muted); margin-top:4px; }
    .op-section { background:var(--card); border-radius:var(--radius); border:1px solid var(--border); padding:1.25rem; margin-bottom:1rem; box-shadow:var(--shadow-sm); }
    .op-section-title { font-size:0.75rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:1rem; display:flex; align-items:center; gap:0.5rem; }
    .op-section-title svg { width:16px; height:16px; color:var(--accent); }
    .op-doc-request { display:flex; align-items:center; gap:0.75rem; padding:0.75rem 1rem; background:var(--bg-secondary); border-radius:12px; margin-bottom:0.5rem; border:1px solid var(--border); }
    .op-doc-request:last-child { margin-bottom:0; }
    .op-doc-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .op-doc-icon.pending { background:var(--warning-bg); color:var(--warning); }
    .op-doc-icon.uploaded { background:var(--success-bg); color:var(--success); }
    .op-doc-icon svg { width:18px; height:18px; }
    .op-doc-info { flex:1; min-width:0; }
    .op-doc-name { font-size:0.9rem; font-weight:600; color:var(--text); }
    .op-doc-status { font-size:0.78rem; color:var(--muted); }
    .op-card-notify { position:absolute; top:-4px; right:-4px; width:12px; height:12px; border-radius:50%; background:var(--error); border:2px solid var(--card); z-index:2; }

    /* --- DOCUMENT SCANNER --- */
    /* Scanner overlay + processing removed in v11.0 — all UI injected dynamically */

    .scanner-preview {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #000;
      display: none;
      flex-direction: column;
      z-index: 10003;
    }

    .scanner-preview.active {
      display: flex;
    }

    .scanner-preview-image {
      flex: 1;
      object-fit: contain;
      padding: 1rem;
    }

    .scanner-preview-actions {
      padding: 1.5rem;
      display: flex;
      gap: 1rem;
      justify-content: center;
    }

    .scanner-preview-actions .btn {
      flex: 1;
      max-width: 200px;
    }

    .upload-file-list {
      margin-top: 1.5rem;
      font-size: 0.9rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .upload-file-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.75rem;
      background-color: var(--bg);
      border-radius: var(--radius);
      border: 1px solid var(--border);
    }

    .upload-file-item .file-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .upload-file-item .delete-btn {
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
    }

    .upload-file-item .delete-btn svg {
      width: 20px;
      height: 20px;
      stroke: var(--muted);
      transition: stroke 0.2s ease;
    }

    .upload-file-item .delete-btn:hover svg {
      stroke: #ff4d4d;
    }

    /* --- RESUMEN --- */
    .summary-container {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .summary-header {
      text-align: center;
      padding-bottom: 1rem;
    }

    .summary-content-wrapper {
      width: 100%;
      overflow-y: auto;
      padding-right: 5px;
    }

    .summary-card {
      background: var(--card);
      border: none;
      border-radius: var(--radius);
      margin-bottom: 1.5rem;
      overflow: hidden;
      box-shadow: var(--shadow-elevated);
      transition: all 0.25s ease;
    }

    .summary-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-2px);
    }

    .summary-card-header {
      padding: 0.85rem 1.25rem;
      font-weight: 600;
      border-bottom: none;
      background: linear-gradient(135deg, var(--accent-light) 0%, transparent 100%);
      display: flex;
      align-items: center;
      gap: 0.75rem;
      justify-content: space-between;
      border-radius: var(--radius) var(--radius) 0 0;
      box-shadow: inset 0 -1px 0 var(--border), 0 1px 3px rgba(0, 0, 0, 0.03);
      color: var(--text);
    }

    .summary-card-body {
      padding: 1rem 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      text-align: left;
    }

    /* summary-item, summary-label, summary-value están definidos más abajo */

    .summary-doc-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .summary-doc-info {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .summary-doc-info .icon-placeholder {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .summary-doc-info svg {
      color: var(--success);
      width: 24px;
      height: 24px;
    }

    .summary-pending {
      color: var(--warning);
      font-weight: 600;
    }

    .edit-doc-btn {
      font-size: 0.8rem;
      color: var(--accent);
      cursor: pointer;
      text-decoration: underline;
      background: none;
      border: none;
      padding: 0;
    }

    /* --- DOCUMENTOS PENDIENTES --- */
    .pending-docs-container {
      text-align: center;
      padding: 1rem 0;
    }

    .pending-doc-btn {
      background: var(--bg);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1.5rem;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
      font-weight: 600;
      font-size: 0.95rem;
      width: 100%;
      margin-bottom: 1rem;
    }

    .pending-doc-btn:hover {
      border-color: var(--accent);
      background-color: rgba(0, 122, 255, 0.1);
      transform: translateY(-2px);
    }

    /* --- BARRA DE PROGRESO DE DOCUMENTOS (2 pasos) --- */
    .docs-progress-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      margin-bottom: 1.5rem;
      padding: 0 1rem;
    }

    .docs-progress-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.4rem;
      position: relative;
    }

    .docs-progress-number {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--bg-secondary);
      color: var(--muted);
      font-weight: 600;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid var(--border);
      transition: all 0.3s ease;
    }

    .docs-progress-step.active .docs-progress-number {
      background: var(--accent);
      color: white;
      border-color: var(--accent);
      box-shadow: 0 2px 8px rgba(10, 132, 255, 0.4);
    }

    .docs-progress-step.completed .docs-progress-number {
      background: var(--success);
      color: white;
      border-color: var(--success);
    }

    .docs-progress-label {
      font-size: 0.75rem;
      color: var(--muted);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .docs-progress-step.active .docs-progress-label {
      color: var(--accent);
      font-weight: 600;
    }

    .docs-progress-step.completed .docs-progress-label {
      color: var(--success);
    }

    .docs-progress-line {
      width: 60px;
      height: 3px;
      background: var(--border);
      margin: 0 0.5rem;
      margin-bottom: 1.5rem;
      border-radius: 2px;
      transition: background 0.3s ease;
    }

    .docs-progress-line.completed {
      background: var(--success);
    }

    /* --- INSTRUCCIONES DE PAGO --- */
    .payment-instructions {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }

    .payment-instruction-card {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 1rem;
      background: var(--bg);
      border-radius: var(--radius);
      border: 1px solid var(--border);
      transition: all 0.2s ease;
    }

    .payment-instruction-card:hover {
      border-color: var(--accent);
      box-shadow: var(--shadow-sm);
    }

    .payment-instruction-icon {
      width: 40px;
      height: 40px;
      min-width: 40px;
      border-radius: 10px;
      background: var(--accent-light);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .payment-instruction-icon svg {
      width: 22px;
      height: 22px;
      color: var(--accent);
    }

    .payment-instruction-content {
      flex: 1;
    }

    .payment-instruction-content h4 {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 0.25rem;
    }

    .payment-instruction-content p {
      font-size: 0.8rem;
      color: var(--muted);
      line-height: 1.4;
      margin: 0;
    }

    /* --- AYUDA Y CHAT --- */
    .help-container {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      overflow-y: auto;
      padding: 1.5rem;
      padding-top: 80px;
    }

    .help-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 2.5rem;
    }

    .help-btn {
      background: var(--card);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.8rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
    }

    .help-btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow);
      border-color: var(--accent);
    }

    .chat-wrapper {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }

    .chat-messages {
      flex-grow: 1;
      padding: 1rem;
      overflow-y: auto;
    }

    .chat-message {
      margin-bottom: 1rem;
      display: flex;
      align-items: flex-end;
      gap: 0.5rem;
    }

    .chat-message.user {
      justify-content: flex-end;
    }

    .chat-message.assistant {
      justify-content: flex-start;
    }

    .chat-message .bubble {
      padding: 0.75rem 1rem;
      border-radius: 18px;
      max-width: 85%;
      line-height: 1.4;
      background: var(--bg);
      color: var(--text);
    }

    .chat-message.user .bubble {
      background: var(--accent);
      color: var(--accent-text);
      border-bottom-right-radius: 4px;
    }

    .chat-message.assistant .bubble {
      border-bottom-left-radius: 4px;
    }

    .chat-input-wrapper {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      padding: 0.5rem;
      border-top: 1px solid var(--border);
    }

    .chat-input-wrapper .input {
      height: 44px;
    }

    /* --- LOGO STYLES --- */
    .brand-logo {
      max-width: 363px;
      width: 100%;
      height: auto;
      display: block;
      margin: 0 auto 2.5rem;
      padding: 0.5rem;
      object-fit: contain;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
      /* 3D Floating Shadow Effect - Exaggerated */
      filter:
        drop-shadow(0 4px 4px rgba(0, 0, 0, 0.20)) drop-shadow(0 8px 8px rgba(0, 0, 0, 0.18)) drop-shadow(0 16px 16px rgba(0, 0, 0, 0.15)) drop-shadow(0 32px 32px rgba(0, 0, 0, 0.12)) drop-shadow(0 48px 48px rgba(0, 0, 0, 0.08)) drop-shadow(0 64px 64px rgba(0, 0, 0, 0.05));
      transition: filter 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
      /* Optimización GPU para animaciones fluidas */
      will-change: transform, opacity;
      transform: translateZ(0);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      /* Animación de entrada super fluida - solo opacity para evitar repaint */
      opacity: 0;
      animation: logoFadeIn 0.4s ease-out forwards;
      /* Precargar en GPU para evitar jank */
      contain: content;
    }

    @keyframes logoFadeIn {
      from {
        opacity: 0;
        transform: translateZ(0);
      }

      to {
        opacity: 1;
        transform: translateZ(0);
      }
    }

    .brand-logo:hover {
      transform: scale(1.02) translateY(-4px);
      filter:
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.15)) drop-shadow(0 8px 8px rgba(0, 0, 0, 0.12)) drop-shadow(0 16px 16px rgba(0, 0, 0, 0.10)) drop-shadow(0 32px 32px rgba(0, 0, 0, 0.08)) drop-shadow(0 48px 48px rgba(0, 0, 0, 0.05));
    }

    /* Default: show light logo, hide dark logo */
    .brand-logo-light {
      display: block;
    }

    .brand-logo-dark {
      display: none;
    }

    /* Dark mode (system): show dark logo, hide light logo */
        /* Light theme (manual): show light logo */
    html[data-theme="light"] .brand-logo-light {
      display: block !important;
    }

    html[data-theme="light"] .brand-logo-dark {
      display: none !important;
    }

    /* Dark theme (manual): show dark logo */
    /* --- STEP INDICATOR --- */
    .step-indicator {
      text-align: center;
      font-size: 0.85rem;
      color: var(--muted);
      margin-top: 0.5rem;
      font-weight: 500;
    }

    /* Hide scrollbar on language selector step */
    /* Fix: display: flex movido a .active para permitir ocultarlo */
    #step-language {
      overflow: hidden;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      /* Padding eliminado para recuperar posición original */
      padding-top: 0;
    }

    #step-language.active {
      display: flex;
    }

    #step-language::-webkit-scrollbar {
      display: none;
    }

    /* --- LOGO GLOBAL COMPARTIDO (SOLUCIÓN DEFINITIVA DE SINCRONIZACIÓN) --- */
    .global-logo-container {
      position: absolute;
      top: 28%;
      /* Subido ligeramente del 35% original para mejor distribución visual */
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10000;
      /* Encima de todo, incluido overlay */
      display: flex;
      justify-content: center;
      pointer-events: none;
      /* Permitir clicks debajo */
      transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .global-logo-container.hidden {
      opacity: 0;
      pointer-events: none;
      /* display: none eliminado para permitir transición de opacidad */
    }

    .global-logo {
      max-width: 363px;
      width: 80vw;
      height: auto;
      display: block;
      /* Sombra 3D AUMENTADA para mayor separación del plano */
      filter:
        drop-shadow(0 6px 8px rgba(0, 0, 0, 0.30)) drop-shadow(0 15px 20px rgba(0, 0, 0, 0.25)) drop-shadow(0 30px 35px rgba(0, 0, 0, 0.20)) drop-shadow(0 50px 55px rgba(0, 0, 0, 0.15));

      will-change: transform, opacity;
      backface-visibility: hidden;
      transform: translateZ(0);

      /* Animación suave */
      opacity: 0;
      animation: globalLogoFadeIn 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0.2s forwards, logoFloat 6s ease-in-out 1.2s infinite;
    }

    @keyframes globalLogoFadeIn {
      0% {
        opacity: 0;
        transform: scale(0.98);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* Mostrar logo correcto según tema GLOBAL */
    .global-logo-light {
      display: block;
    }

    .global-logo-dark {
      display: none;
    }

        html[data-theme="light"] .global-logo-light {
      display: block;
    }

    html[data-theme="light"] .global-logo-dark {
      display: none;
    }

    /* --- LOGO PANTALLA IDIOMA (idéntico a onboarding) --- */
    .lang-logo-container {
      flex-shrink: 0;
      margin-bottom: 2.5rem;
      /* Igual que onboarding */
      display: flex;
      justify-content: center;
    }

    .lang-logo {
      max-width: 363px;
      width: 80vw;
      height: auto;
      display: block;
      /* Sombra 3D equilibrada (4 capas): Calidad visual sin matar rendimiento */
      filter:
        drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.20)) drop-shadow(0 25px 30px rgba(0, 0, 0, 0.15)) drop-shadow(0 45px 50px rgba(0, 0, 0, 0.10));
      /* Optimizacion de renderizado */
      will-change: transform, opacity;
      backface-visibility: hidden;
      transform: translateZ(0);
      /* Fade-in + animación flotante suave */
      opacity: 0;
      animation: langLogoFadeIn 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0.2s forwards, logoFloat 6s ease-in-out 1.2s infinite;
    }

    @keyframes langLogoFadeIn {
      0% {
        opacity: 0;
        transform: scale(0.98);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* Mostrar logo correcto según tema */
    .lang-logo-light {
      display: block;
    }

    .lang-logo-dark {
      display: none;
    }

        html[data-theme="light"] .lang-logo-light {
      display: block;
    }

    html[data-theme="light"] .lang-logo-dark {
      display: none;
    }

    /* --- NUEVA RULETA IDIOMA SUAVE (iOS-style) --- */
    .lang-picker-container {
      position: relative;
      width: 100%;
      max-width: 300px;
      height: 260px;
      /* Aumentado para ver más items */
      overflow: hidden;
      /* Fade in suave */
      opacity: 0;
      animation: fadeInSmooth 0.5s ease-out 0.4s forwards;
      /* Gradientes superior e inferior para efecto perspectiva */
      mask-image: linear-gradient(to bottom,
          transparent 0%,
          rgba(0, 0, 0, 0.3) 15%,
          black 35%,
          black 65%,
          rgba(0, 0, 0, 0.3) 85%,
          transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom,
          transparent 0%,
          rgba(0, 0, 0, 0.3) 15%,
          black 35%,
          black 65%,
          rgba(0, 0, 0, 0.3) 85%,
          transparent 100%);
    }

    /* Highlight central - estilo original mejorado */
    .lang-picker-highlight {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 85%;
      height: 56px;
      background: var(--card);
      border-radius: 16px;
      pointer-events: none;
      z-index: 0;
      border: none;
      box-shadow: var(--shadow);
    }

    .lang-picker-track {
      display: flex;
      flex-direction: column;
      align-items: center;
      /* La posición se controla via JS */
      will-change: transform;
      transform: translateZ(0);
      backface-visibility: hidden;
    }

    .lang-picker-item {
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      font-weight: 400;
      color: var(--muted);
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      padding: 0 2rem;
      min-width: 200px;
      position: relative;
      z-index: 1;
      /* Transiciones suaves para escala y opacidad */
      transition: transform 0.15s ease-out, opacity 0.15s ease-out, color 0.15s ease-out;
      opacity: 0.5;
      transform: scale(0.9);
      touch-action: pan-y;
      -webkit-tap-highlight-color: transparent;
    }

    .lang-picker-item.active {
      color: var(--text);
      font-weight: 600;
      font-size: 1.3rem;
      opacity: 1;
      transform: scale(1);
    }

    .lang-picker-item:hover:not(.active) {
      opacity: 0.7;
    }

    /* --- 3D WHEEL LANGUAGE SELECTOR (legacy, kept for compatibility) --- */
    .wheel-container {
      perspective: 1000px;
      height: 280px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      margin: 2rem 0;
      /* Animacion fluida - solo opacity, sin translateY para evitar jank */
      opacity: 0;
      animation: fadeInSmooth 0.4s ease-out 0.35s forwards;
      /* GPU optimization */
      will-change: opacity;
      contain: content;
    }

    @keyframes fadeInSmooth {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .wheel-container::before,
    .wheel-container::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 100px;
      pointer-events: none;
      z-index: 10;
    }


    .wheel-container::before {
      top: 0;
      background: linear-gradient(to bottom, var(--card) 0%, var(--card) 20%, transparent 100%);
      /* GPU layer para evitar repaint */
      transform: translateZ(0);
      will-change: contents;
    }

    .wheel-container::after {
      bottom: 0;
      background: linear-gradient(to top, var(--card) 0%, var(--card) 20%, transparent 100%);
      /* GPU layer para evitar repaint */
      transform: translateZ(0);
      will-change: contents;
    }

    .wheel-selector {
      display: none;
    }

    .wheel-track {
      transform-style: preserve-3d;
      transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      /* Optimización GPU para animaciones fluidas */
      will-change: transform;
      transform: translateZ(0);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    .wheel-item {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      font-weight: 400;
      letter-spacing: 0.02em;
      color: var(--muted);
      cursor: pointer;
      /* Solo transform y opacity para GPU compositing - sin color/font-weight que causan reflow */
      transition: transform 0.2s ease-out, opacity 0.2s ease-out;
      padding: 0 3rem;
      min-width: 240px;
      user-select: none;
      -webkit-user-select: none;
      border-radius: 20px;
      position: relative;
      opacity: 0.35;
      transform: scale(0.85) translateZ(0);
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      /* GPU compositing layer */
      will-change: transform, opacity;
      backface-visibility: hidden;
      contain: layout style;
    }

    .wheel-item.active {
      color: var(--text);
      font-weight: 500;
      font-size: 1.4rem;
      letter-spacing: 0.04em;
      opacity: 1;
      transform: scale(1) translateZ(0);
      background: var(--card);
      box-shadow: var(--shadow);
    }

        .wheel-item:hover:not(.active) {
      opacity: 0.6;
      transform: scale(0.9);
    }

    .wheel-item:active:not(.active) {
      transform: scale(0.87);
    }


    /* --- LIGHT THEME - Explicit Override --- */
    html[data-theme="light"] {
      --bg: #fafbfc;
      --bg-secondary: #f0f2f5;
      --text: #1a1d21;
      --text-secondary: #4a5568;
      --muted: #718096;
      --border: #e2e8f0;
      --accent: #2563eb;
      --accent-hover: #1d4ed8;
      --accent-light: rgba(37, 99, 235, 0.08);
      --card: #ffffff;
      --card-hover: #f8fafc;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
      --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
      --gradient-primary: linear-gradient(180deg, #f5f5f7 0%, #ffffff 100%);
    }

    html[data-theme="light"] body {
      background: #f5f5f7;
    }

    /* --- DARK THEME - Pure Black/Gray --- */
    /* --- ONBOARDING INTRO (Apple-style) --- */
    .onboarding-overlay {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      /* Mismas dimensiones que mobile-frame */
      width: 100%;
      max-width: 420px;
      height: 100%;
      max-height: 850px;
      background: var(--bg);
      border-radius: var(--radius-lg);
      box-shadow: none;
      /* Removed shadow on right edge */
      z-index: 9999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      /* Adaptativo: en pantallas bajas se compacta para no invadir el pie */
      padding-top: clamp(1.5rem, 8vh, 80px);
      padding-bottom: 100px;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      /* Standardized snappier transition */
      transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s ease;
    }

    .onboarding-overlay.visible {
      opacity: 1;
      visibility: visible;
    }

    /* Ocultar logo de idioma cuando onboarding está visible */
    .onboarding-overlay.visible~.mobile-frame .lang-logo-container {
      opacity: 0;
      visibility: hidden;
    }

    /* Logo del onboarding - arriba centrado (flujo normal) */
    .onboarding-logo-container {
      flex-shrink: 0;
      margin-bottom: clamp(1rem, 4vh, 2.5rem);
    }

    .onboarding-logo {
      max-width: 363px;
      width: 80vw;
      /* Tope de altura: el logo nunca se come la pantalla en móviles bajos */
      max-height: 30vh;
      object-fit: contain;
      height: auto;
      display: block;
      /* Sombra 3D equilibrada (4 capas) - igual que idioma */
      filter:
        drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.20)) drop-shadow(0 25px 30px rgba(0, 0, 0, 0.15)) drop-shadow(0 45px 50px rgba(0, 0, 0, 0.10));
      /* Optimizacion de renderizado */
      will-change: transform, opacity;
      backface-visibility: hidden;
      transform: translateZ(0);
      /* Fade-in suave retrasado para que no aparezca de golpe */
      opacity: 0;
      animation: onboardingLogoFadeIn 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0.3s forwards, logoFloat 6s ease-in-out 1.5s infinite;
    }

    @keyframes onboardingLogoFadeIn {
      0% {
        opacity: 0;
        transform: scale(0.98);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* Default: show light logo (negro), hide dark logo (blanco) */
    .onboarding-logo-light {
      display: block;
    }

    .onboarding-logo-dark {
      display: none;
    }

    /* Dark mode: show dark logo (blanco), hide light logo */
        /* Manual theme overrides */
    html[data-theme="light"] .onboarding-logo-light {
      display: block;
    }

    html[data-theme="light"] .onboarding-logo-dark {
      display: none;
    }

    /* Contenedor del texto - debajo del logo con espacio */
    .onboarding-content-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      width: 90%;
      max-width: 340px;
      text-align: center;
      flex-grow: 1;
      min-height: 0; /* permite encoger en pantallas bajas (no invadir el pie) */
    }

    @keyframes onboardingContentFadeIn {
      0% {
        opacity: 0;
        transform: translateY(10px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .onboarding-overlay.hidden {
      /* display: none !important;  <- ELIMINADO: Rompía la transición */
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    @keyframes logoFloat {

      0%,
      100% {
        transform: translate3d(0, 0, 0);
      }

      50% {
        transform: translate3d(0, -5px, 0);
      }
    }

    /* No invert for white logo - using white logo source directly */

    .onboarding-text {
      text-align: center;
      color: var(--text);
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.4s ease forwards;
      flex-shrink: 0;
      min-height: 100px;
    }

    .onboarding-text.fade-out {
      animation: fadeOutUp 0.3s ease forwards;
    }

    .onboarding-text h1 {
      font-size: 1.5rem;
      font-weight: 300;
      margin-bottom: 0.75rem;
      letter-spacing: -0.02em;
    }

    .onboarding-text h1 strong {
      font-weight: 700;
    }

    .onboarding-text p {
      font-size: 1rem;
      opacity: 0.7;
      font-weight: 400;
      max-width: 300px;
      margin: 0 auto;
      line-height: 1.6;
    }


    .onboarding-progress,
    .onboarding-progress-inline {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .onboarding-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--border);
      transition: all 0.3s ease;
    }

    .onboarding-dot.active {
      background: var(--accent);
      transform: scale(1.2);
    }

    .onboarding-continue-btn {
      /* Botón circular como el forward-btn de la app */
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--accent);
      border: none;
      color: white;
      cursor: pointer;
      transition: all 0.3s ease;
      opacity: 0;
      animation: fadeIn 0.5s ease 0.5s forwards;
      box-shadow: var(--shadow);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .onboarding-continue-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      pointer-events: none;
      background: var(--bg);
      color: var(--muted);
      box-shadow: none;
    }

    /* Estado habilitado - Efecto latido desde neutro a azul */
    .onboarding-continue-btn:not(:disabled) {
      opacity: 1;
      /* Base: neutro (similar a disabled pero visible) */
      background: var(--bg);
      color: var(--muted);
      box-shadow: var(--shadow-elevated);
      animation: forwardBtnPulse 2.5s ease-in-out infinite;
    }

    .onboarding-continue-btn:not(:disabled):hover {
      animation-play-state: paused;
      background: rgba(10, 132, 255, 0.15);
      color: var(--accent);
      transform: scale(1.1);
      box-shadow: 0 4px 20px rgba(10, 132, 255, 0.5);
    }

    .onboarding-continue-btn:active {
      transform: scale(0.95);
    }

    .onboarding-continue-btn svg {
      width: 20px;
      height: 20px;
    }

    /* Ocultar el texto del botón, solo mostrar iconos */
    .onboarding-continue-btn span {
      display: none;
    }

    /* Onboarding footer - buttons at bottom */
    .onboarding-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.5rem 2rem;
      padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }

    .onboarding-skip-btn {
      background: transparent;
      border: none;
      color: var(--muted);
      padding: 0.75rem 1rem;
      font-size: 0.9rem;
      cursor: pointer;
      transition: all 0.3s ease;
      opacity: 0;
      animation: fadeIn 0.5s ease 0.5s forwards;
    }

    .onboarding-skip-btn:hover {
      color: var(--accent);
    }

    /* Help button preview animation */
    .onboarding-help-preview {
      margin-top: clamp(0.75rem, 3vh, 2rem);
      opacity: 0;
      transform: scale(0.95);
      transition: all 0.5s ease;
      flex-shrink: 0;
    }

    .onboarding-help-preview.visible {
      opacity: 1;
      transform: scale(1);
    }

    .onboarding-help-preview.hidden {
      display: none;
    }

    /* App footer preview - shows actual navigation layout */
    .app-footer-preview {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1.5rem;
      padding: 0.75rem 1.25rem;
      background: var(--bg-secondary);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
    }

    .footer-btn-preview {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg);
      box-shadow: var(--shadow-sm);
      opacity: 0.5;
    }

    .footer-btn-preview svg {
      width: 20px;
      height: 20px;
      color: var(--muted);
    }

    /* Real help button preview - matches help-center-btn */
    .help-center-btn-preview {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.5rem 1rem;
      background: rgba(10, 132, 255, 0.15);
      color: var(--accent);
      border-radius: 18px;
      font-weight: 500;
      font-size: 0.85rem;
      white-space: nowrap;
      /* Sin animación - botón estático */
    }

    .help-center-btn-preview svg {
      width: 16px;
      height: 16px;
    }

    .help-center-btn-preview span {
      color: var(--accent);
    }

    .footer-preview-label {
      margin-top: 0.75rem;
      font-size: 0.8rem;
      color: var(--muted);
      text-align: center;
    }

    @keyframes helpBtnPulse {

      0%,
      100% {
        transform: scale(1);
        box-shadow: 0 2px 12px rgba(10, 132, 255, 0.3);
      }

      50% {
        transform: scale(1.05);
        box-shadow: 0 4px 20px rgba(10, 132, 255, 0.5);
      }
    }

    /* --- NEXT STEPS OVERLAY (Apple-style) --- */
    .nextsteps-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--bg);
      z-index: 9998;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      transition: opacity 0.8s ease, visibility 0.8s ease;
    }

    .nextsteps-overlay.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .nextsteps-content {
      text-align: center;
      color: var(--text);
      max-width: 320px;
    }

    .nextsteps-content h1 {
      font-size: 1.8rem;
      font-weight: 600;
      margin-bottom: 0.75rem;
      opacity: 0;
      animation: fadeInUp 0.8s ease forwards;
    }

    .nextsteps-content p {
      font-size: 1rem;
      color: var(--muted);
      line-height: 1.5;
      opacity: 0;
      animation: fadeInUp 0.8s ease 0.2s forwards;
    }

    .nextsteps-content.fade-out h1,
    .nextsteps-content.fade-out p {
      animation: fadeOutUp 0.5s ease forwards;
    }

    .nextsteps-progress {
      display: flex;
      gap: 8px;
      margin-top: 2.5rem;
    }

    .nextsteps-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--border);
      transition: all 0.3s ease;
    }

    .nextsteps-dot.active {
      background: var(--accent);
      transform: scale(1.2);
    }

    .nextsteps-continue-btn,
    .nextsteps-finish-btn {
      margin-top: 2.5rem;
      background: var(--accent);
      border: none;
      color: white;
      padding: 1rem 2.5rem;
      border-radius: 30px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      opacity: 0;
      animation: fadeIn 0.5s ease 1s forwards;
      box-shadow: var(--shadow-elevated);
    }

    .nextsteps-continue-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .nextsteps-continue-btn:not(:disabled):hover,
    .nextsteps-finish-btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
    }

    .nextsteps-finish-btn.hidden {
      display: none;
    }

    /* Finalize button in success screen */
    .success-finalize-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 2rem;
      animation: fadeIn 0.5s ease 1.5s both;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeOutUp {
      from {
        opacity: 1;
        transform: translateY(0);
      }

      to {
        opacity: 0;
        transform: translateY(-30px);
      }
    }

    @keyframes fadeIn {
      to {
        opacity: 1;
      }
    }

    /* --- SETTINGS MENU OVERLAY --- */
    .settings-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

    .settings-overlay.show {
      opacity: 1;
      visibility: visible;
    }

    .settings-panel {
      position: fixed;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%) translateY(100%);
      width: 100%;
      max-width: 420px;
      background: var(--card);
      border-radius: 24px 24px 0 0;
      padding: 1.5rem;
      z-index: 1001;
      transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
      max-height: 70vh;
      overflow-y: auto;
    }

    .settings-overlay.show .settings-panel {
      transform: translateX(-50%) translateY(0);
    }

    .settings-handle {
      width: 40px;
      height: 5px;
      background: var(--border);
      border-radius: 3px;
      margin: 0 auto 1.25rem;
    }

    .settings-title {
      font-size: 1.25rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      text-align: center;
      color: var(--text);
    }

    .settings-section {
      margin-bottom: 1.5rem;
    }

    .settings-section-title {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 0.75rem;
    }

    .theme-options {
      display: flex;
      gap: 0.75rem;
    }

    .theme-option {
      flex: 1;
      padding: 1rem 0.5rem;
      border: 2px solid var(--border);
      border-radius: 16px;
      background: var(--bg);
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
    }

    .theme-option:hover {
      border-color: var(--accent);
    }

    .theme-option.active {
      border-color: var(--accent);
      background: rgba(0, 122, 255, 0.1);
    }

    .theme-option-icon {
      width: 32px;
      height: 32px;
      margin: 0 auto 0.5rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .theme-option[data-theme="light"] .theme-option-icon {
      background: linear-gradient(135deg, #f7f8fa 0%, #e5e7eb 100%);
      border: 1px solid #ddd;
    }


    .theme-option[data-theme="auto"] .theme-option-icon {
      background: linear-gradient(135deg, #f7f8fa 0%, #1e1e1e 100%);
      border: 1px solid #888;
    }

    .theme-option-label {
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--text);
    }

    .settings-btn {
      background: transparent;
      border: none;
      color: var(--muted);
      height: 40px;
      width: 40px;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }

    .settings-btn:hover {
      background: var(--border);
      color: var(--text);
    }

    .settings-btn svg {
      width: 24px;
      height: 24px;
      stroke: currentColor;
      stroke-width: 2;
    }

    /* --- FLOATING AI ASSISTANT BUTTON --- */
    .ai-fab {
      position: fixed;
      bottom: 100px;
      right: 20px;
      height: 44px;
      padding: 0 16px 0 12px;
      border-radius: 22px;
      background: var(--accent);
      border: none;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(0, 113, 227, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      z-index: 500;
      transition: all 0.3s ease;
    }

    .ai-fab:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 24px rgba(0, 113, 227, 0.4);
    }

    .ai-fab svg {
      width: 20px;
      height: 20px;
      color: white;
      flex-shrink: 0;
    }

    .ai-fab-label {
      color: white;
      font-size: 0.85rem;
      font-weight: 600;
      white-space: nowrap;
    }

    @keyframes pulse-glow {

      0%,
      100% {
        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
      }

      50% {
        box-shadow: 0 4px 24px rgba(102, 126, 234, 0.6), 0 0 0 8px rgba(102, 126, 234, 0.1);
      }
    }

    /* --- CENTRAL HELP BUTTON - Large, elongated with full text, purple icon --- */
    .help-center-btn {
      height: 52px;
      padding: 0 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      margin: 0;
      border: none;
      border-radius: 26px;
      background: var(--bg);
      color: var(--text);
      font-size: 0.95rem;
      font-weight: 500;
      cursor: pointer;
      box-shadow: var(--shadow-elevated);
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      /* Sin animación - botón estático */
      flex: 1;
      max-width: 220px;
    }

    .help-center-btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
    }

    .help-center-btn:active {
      transform: scale(0.98);
    }

    .help-center-btn svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      color: #9370db;
    }

    @keyframes help-heartbeat {

      0%,
      100% {
        transform: scale(1);
        box-shadow: var(--shadow-elevated);
      }

      15% {
        transform: scale(1.02);
        box-shadow: var(--shadow-lg);
      }

      30% {
        transform: scale(1);
        box-shadow: var(--shadow-elevated);
      }

      45% {
        transform: scale(1.015);
        box-shadow: var(--shadow);
      }

      60%,
      100% {
        transform: scale(1);
        box-shadow: var(--shadow-elevated);
      }
    }

    /* Footer navigation buttons - no extra margins, horizontal layout */

    @keyframes heartbeat {

      0%,
      100% {
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(10, 132, 255, 0.35), 0 2px 8px rgba(0, 0, 0, 0.15);
      }

      15% {
        transform: scale(1.03);
        box-shadow: 0 6px 24px rgba(10, 132, 255, 0.45), 0 3px 10px rgba(0, 0, 0, 0.18);
      }

      30% {
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(10, 132, 255, 0.35), 0 2px 8px rgba(0, 0, 0, 0.15);
      }

      45% {
        transform: scale(1.02);
        box-shadow: 0 5px 22px rgba(10, 132, 255, 0.4), 0 2px 9px rgba(0, 0, 0, 0.16);
      }

      60%,
      100% {
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(10, 132, 255, 0.35), 0 2px 8px rgba(0, 0, 0, 0.15);
      }
    }


    .ai-chat-panel {
      position: fixed;
      bottom: 0;
      right: 0;
      width: 100%;
      max-width: 420px;
      height: 70vh;
      max-height: 500px;
      background: var(--card);
      border-radius: 24px 24px 0 0;
      z-index: 1001;
      transform: translateY(100%);
      transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
      display: flex;
      flex-direction: column;
      box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
    }

    .ai-chat-panel.show {
      transform: translateY(0);
    }

    /* Asa superior estilo "hoja" (bottom-sheet) */
    .ai-chat-panel::before {
      content: '';
      position: absolute;
      top: 9px; left: 50%; transform: translateX(-50%);
      width: 42px; height: 4px; border-radius: 99px;
      background: var(--border);
      z-index: 2;
    }

    .ai-chat-header {
      padding: 1.35rem 1.25rem 1rem;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .ai-chat-header-info {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .ai-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, #0a84ff 0%, #4aa8ff 100%);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .ai-avatar svg {
      width: 24px;
      height: 24px;
      color: white;
    }

    .ai-chat-title {
      font-weight: 600;
      color: var(--text);
    }

    .ai-chat-status {
      font-size: 0.8rem;
      color: var(--success);
    }

    .ai-chat-close {
      background: var(--bg-secondary, #eef1f6);
      border: none;
      color: var(--text);
      cursor: pointer;
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border-radius: 50%;
      transition: all 0.2s ease;
    }

    .ai-chat-close:hover {
      background: var(--bg);
      color: var(--text);
    }

    .ai-chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 1rem;
    }

    .ai-message {
      margin-bottom: 1rem;
      display: flex;
      gap: 0.75rem;
    }

    .ai-message.user {
      flex-direction: row-reverse;
    }

    .ai-message-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .ai-message.assistant .ai-message-avatar {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .ai-message.assistant .ai-message-avatar svg {
      width: 18px;
      height: 18px;
      color: white;
    }

    .ai-message.user .ai-message-avatar {
      background: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 600;
      font-size: 0.8rem;
    }

    .ai-message-bubble {
      padding: 0.75rem 1rem;
      border-radius: 18px;
      max-width: 80%;
      line-height: 1.4;
    }

    .ai-message.assistant .ai-message-bubble {
      background: var(--bg);
      color: var(--text);
      border-bottom-left-radius: 4px;
    }

    .ai-message.user .ai-message-bubble {
      background: var(--accent);
      color: var(--accent-text);
      border-bottom-right-radius: 4px;
    }

    .ai-quick-replies {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      border-top: 1px solid var(--border);
    }

    .ai-quick-reply {
      background: rgba(10, 132, 255, 0.07);
      border: 1px solid rgba(10, 132, 255, 0.22);
      border-radius: 20px;
      padding: 0.5rem 1rem;
      font-size: 0.85rem;
      color: var(--accent);
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .ai-quick-reply:hover {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }

    .ai-chat-input-wrapper {
      display: flex;
      gap: 0.5rem;
      padding: 0.75rem 1rem;
      border-top: 1px solid var(--border);
      background: var(--card);
    }

    .ai-chat-input {
      flex: 1;
      padding: 0.75rem 1rem;
      border: 1px solid var(--border);
      border-radius: 24px;
      background: var(--bg);
      color: var(--text);
      font-size: 0.95rem;
      outline: none;
      transition: border-color 0.2s ease;
    }

    .ai-chat-input:focus {
      border-color: var(--accent);
    }

    .ai-chat-send {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--accent);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .ai-chat-send:hover {
      transform: scale(1.05);
    }

    .ai-chat-send svg {
      width: 20px;
      height: 20px;
      color: white;
    }

    .typing-indicator {
      display: flex;
      gap: 4px;
      padding: 0.75rem 1rem;
    }

    .typing-indicator span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--muted);
      animation: typing 1.4s infinite ease-in-out;
    }

    .typing-indicator span:nth-child(1) {
      animation-delay: 0s;
    }

    .typing-indicator span:nth-child(2) {
      animation-delay: 0.2s;
    }

    .typing-indicator span:nth-child(3) {
      animation-delay: 0.4s;
    }

    @keyframes typing {

      0%,
      60%,
      100% {
        transform: translateY(0);
        opacity: 0.4;
      }

      30% {
        transform: translateY(-4px);
        opacity: 1;
      }
    }

    /* --- RTL SUPPORT FOR ARABIC --- */
    html[dir="rtl"] {
      direction: rtl;
    }

    html[dir="rtl"] body {
      text-align: right;
    }

    html[dir="rtl"] .frame-controls {
      flex-direction: row-reverse;
    }

    html[dir="rtl"] .participant-info {
      flex-direction: row-reverse;
    }

    html[dir="rtl"] .summary-item {
      flex-direction: row-reverse;
    }

    html[dir="rtl"] .input-group label {
      text-align: right;
    }

    html[dir="rtl"] .summary-value {
      text-align: left;
    }

    html[dir="rtl"] .summary-label {
      text-align: right;
    }

    html[dir="rtl"] .ai-fab {
      right: auto;
      left: 20px;
    }

    html[dir="rtl"] .ai-chat-panel {
      right: auto;
      left: 0;
    }

    /* RTL: Reverse navigation buttons in footer */
    html[dir="rtl"] .frame-footer {
      flex-direction: row-reverse;
    }

    html[dir="rtl"] .onboarding-footer {
      flex-direction: row-reverse;
    }

    /* RTL: Los botones ya están invertidos con row-reverse,
       NO invertir los iconos SVG para mantener dirección correcta */

    html[dir="rtl"] .transition-action-btn {
      flex-direction: row-reverse;
    }

    /* RTL: Los choice-btn deben mantener layout vertical centrado */
    html[dir="rtl"] .choice-btn {
      /* No cambiar flex-direction, mantener column */
      text-align: center;
    }

    html[dir="rtl"] .app-footer-preview {
      flex-direction: row-reverse;
    }

    /* --- REAL-TIME VALIDATION ICONS --- */
    .input-validation-wrapper {
      position: relative;
    }

    .validation-icon {
      position: absolute;
      right: 1rem;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      pointer-events: none;
    }

    .validation-icon.valid {
      color: var(--success);
    }

    .validation-icon.invalid {
      color: #ff4d4d;
    }

    .input.valid {
      border-color: var(--success);
    }

    .input.invalid {
      border-color: #ff4d4d;
    }

    /* --- FILE PREVIEW --- */
    .file-preview {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-top: 1rem;
    }

    .file-preview-item {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid var(--border);
      position: relative;
    }

    .file-preview-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .file-preview-item .file-icon {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg);
      color: var(--muted);
    }

    /* --- SMOOTHER ANIMATIONS --- */
    @keyframes slideInRight {
      from {
        opacity: 0;
        transform: translateX(30px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes slideInLeft {
      from {
        opacity: 0;
        transform: translateX(-30px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .step.slide-right {
      animation: slideInRight 0.3s ease-out;
    }

    .step.slide-left {
      animation: slideInLeft 0.3s ease-out;
    }

    /* --- ACCESSIBILITY: Better focus states --- */
    *:focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 2px;
    }

    /* ======================================================================
                    MOBILE OPTIMIZATIONS
    ====================================================================== */

    /* --- Prevent iOS zoom on input focus --- */
    @media screen and (max-width: 768px) {

      input,
      select,
      textarea {
        font-size: 16px !important;
      }
    }

    /* --- Safe area handling for notched devices --- */
    @supports (padding: env(safe-area-inset-bottom)) {
      .frame-footer {
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
      }

      .ai-fab {
        bottom: calc(100px + env(safe-area-inset-bottom));
      }

      .ai-chat-panel,
      .settings-panel {
        padding-bottom: env(safe-area-inset-bottom);
      }
    }

    /* --- Small phones (less than 375px) --- */
    @media (max-width: 374px) {

      /* Mismo fondo que la app en las franjas de seguridad (ver nota abajo) */
      body,
      html[data-theme="light"] body {
        background: var(--card);
      }

      .mobile-frame {
        border-radius: 0;
        max-height: 100%;
        box-shadow: none;
      }

      .container {
        padding: 1rem;
      }

      .step-title {
        font-size: 1.4rem;
      }

      .step-subtitle {
        font-size: 0.85rem;
        margin-bottom: 2rem;
      }

      .btn {
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
      }

      .choice-btn {
        padding: 1rem;
      }

      .wheel-container {
        height: 180px;
      }

      .wheel-item {
        font-size: 1rem;
        height: 40px;
      }

      .wheel-item.active {
        font-size: 1.1rem;
      }

      .brand-logo {
        max-width: 180px;
      }

      .onboarding-text h1 {
        font-size: 1.6rem;
      }

      .onboarding-text p {
        font-size: 0.95rem;
      }
    }

    /* --- Standard phones (375px - 480px) --- */
    @media (min-width: 375px) and (max-width: 480px) {

      /* En móvil real (y app instalada en iOS) el body conserva las franjas de
         seguridad (notch arriba, barrita de inicio abajo), pero con el MISMO
         fondo que la app: así la app se ve de borde a borde, sin "footer" gris. */
      body,
      html[data-theme="light"] body {
        background: var(--card);
      }

      .mobile-frame {
        border-radius: 0;
        max-height: 100%;
        box-shadow: none;
      }

      .container {
        padding: 1.25rem;
      }

      .btn,
      .choice-btn,
      .lang-btn {
        min-height: 48px;
      }

      .btn-icon {
        width: 44px;
        height: 44px;
      }

      .input {
        min-height: 48px;
        font-size: 16px;
      }
    }

    /* --- Large phones & small tablets (481px - 768px) --- */
    @media (min-width: 481px) and (max-width: 768px) {
      .mobile-frame {
        border-radius: var(--radius);
        max-height: 95%;
      }
    }

    /* --- Touch-friendly interactions --- */
    @media (hover: none) and (pointer: coarse) {

      /* Remove hover effects on touch devices */
      .btn:hover:not(:disabled) {
        transform: none;
        box-shadow: none;
      }

      .choice-btn:hover {
        transform: none;
        border-color: var(--border);
      }

      .wheel-item:hover:not(.active) {
        color: var(--muted);
      }

      /* Larger touch targets */
      .btn-icon {
        width: 48px;
        height: 48px;
      }

      .settings-btn {
        width: 44px;
        height: 44px;
      }

      /* Active states instead of hover */
      .btn:active:not(:disabled) {
        transform: scale(0.97);
        opacity: 0.9;
      }

      .choice-btn:active {
        transform: scale(0.98);
        background: var(--accent-light);
      }

      .ai-quick-reply:active {
        background: var(--accent-light);
        border-color: var(--accent);
      }
    }

    /* --- Landscape mode adjustments --- */
    @media (max-height: 500px) and (orientation: landscape) {
      .mobile-frame {
        max-height: 100%;
        border-radius: 0;
      }

      .container {
        padding: 0.75rem 1.5rem;
      }

      .step-header {
        margin-bottom: 1.5rem;
      }

      .brand-logo {
        max-width: 120px;
        margin-bottom: 0.5rem;
      }

      .wheel-container {
        height: 150px;
      }

      .onboarding-overlay {
        padding: 1rem;
      }

      .onboarding-text h1 {
        font-size: 1.5rem;
      }

      .onboarding-skip {
        bottom: 20px;
      }

      .onboarding-progress {
        bottom: 15px;
      }
    }

    /* --- Reduce motion for accessibility --- */
    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }

      .onboarding-overlay {
        transition: none;
      }

      .ai-fab {
        animation: none;
      }
    }

    /* --- ACCESSIBILITY: Responsive font sizing --- */
    html {
      font-size: clamp(14px, 2.5vw, 16px);
    }

    /* --- Pending Documents Styles --- */
    .pending-doc-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem 1.25rem;
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .pending-doc-item:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-2px);
    }

    .pending-doc-item.uploaded {
      background: var(--accent-light);
      border: 2px solid var(--success);
    }

    .pending-doc-icon {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-secondary);
      border-radius: 50%;
      color: var(--accent);
      flex-shrink: 0;
    }

    .pending-doc-item.uploaded .pending-doc-icon {
      background: var(--success);
      color: white;
    }

    .pending-doc-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .pending-doc-title {
      font-weight: 600;
      color: var(--text);
    }

    .pending-doc-status {
      font-size: 0.8rem;
      color: var(--muted);
    }

    .pending-doc-item.uploaded .pending-doc-status {
      color: var(--success);
      font-weight: 500;
    }

    .pending-doc-check {
      flex-shrink: 0;
    }

    /* --- DOC CARDS 3D (Documentos Finales) --- */
    .doc-cards-container {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin-top: 1rem;
    }

    .doc-card {
      position: relative;
      background: var(--card);
      border-radius: var(--radius);
      padding: 1rem;
      box-shadow: var(--shadow-elevated);
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .doc-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
    }

    .doc-card.uploaded {
      box-shadow: 0 4px 16px rgba(10, 132, 255, 0.15), 0 0 0 2px var(--accent);
    }

    .doc-card.sent {
      box-shadow: 0 4px 16px rgba(48, 209, 88, 0.15), 0 0 0 2px var(--success);
    }

    .doc-card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 0.5rem;
    }

    .doc-card-title {
      font-weight: 600;
      font-size: 0.95rem;
      color: var(--text);
    }

    .doc-card-status {
      font-size: 0.8rem;
      color: var(--muted);
      margin-top: 0.15rem;
    }

    .doc-card.uploaded .doc-card-status {
      color: var(--accent);
    }

    .doc-card.sent .doc-card-status {
      color: var(--success);
      font-weight: 600;
    }

    .doc-help-btn {
      position: absolute;
      top: 0.75rem;
      right: 0.75rem;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      color: var(--muted);
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
    }

    .doc-help-btn:hover {
      background: var(--accent-light);
      border-color: var(--accent);
      color: var(--accent);
    }

    .doc-card-buttons {
      display: flex;
      gap: 0.5rem;
      margin-top: 0.75rem;
    }

    .doc-card-buttons .btn {
      flex: 1;
      padding: 0.5rem 0.75rem;
      font-size: 0.8rem;
    }

    /* --- Summary improvements --- */
    .summary-card {
      margin-bottom: 1rem;
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--card);
      box-shadow: var(--shadow);
      text-align: left;
    }

    .summary-card-header {
      padding: 0.875rem 1.25rem;
      font-weight: 600;
      border-bottom: 1px solid var(--border);
      background: var(--bg-secondary);
      display: flex;
      align-items: center;
      gap: 0.75rem;
      justify-content: space-between;
      font-size: 0.95rem;
      color: var(--text);
    }

    .summary-card-body {
      padding: 1rem 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      text-align: left;
    }

    .summary-item {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--border);
    }

    .summary-item:last-child {
      border-bottom: none;
    }

    .summary-item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .summary-label {
      font-size: 0.8rem;
      color: var(--muted);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .summary-value {
      font-size: 1rem;
      color: var(--text);
      word-break: break-word;
      line-height: 1.4;
      text-align: left;
    }

    /* Explicit theme overrides for data-theme attribute */
    html[data-theme="light"] {
      --bg: #ffffff;
      --bg-secondary: #f5f5f7;
      --text: #1d1d1f;
      --card: #ffffff;
      --card-hover: #f5f5f7;
      --border: #d2d2d7;
      --shadow-elevated: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.04);
      --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.04);
    }

    /* --- ONBOARDING OVERRIDE --- */
    #onboarding-text {
      min-height: 120px;
      margin-bottom: 3rem;
      transition: opacity 0.8s ease-in-out !important;
    }

    .fade-out {
      opacity: 0 !important;
    }

    /* --- AUTH MODALS (Biometric) --- */
    .auth-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 2000;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .auth-modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .auth-modal-content {
      width: 100%;
      max-width: 480px;
      background: var(--bg);
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      padding: 1.75rem 1.5rem 2rem 1.5rem;
      transform: translateY(100%);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
      text-align: center;
    }

    .auth-modal-overlay.active .auth-modal-content {
      transform: translateY(0);
    }

    .auth-modal-icon {
      width: 56px;
      height: 56px;
      margin: 0 auto 1.25rem;
      background: var(--accent-light);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
    }

    .auth-modal-title {
      font-size: 1.25rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      color: var(--text);
    }

    .auth-modal-desc {
      color: var(--text-secondary);
      margin-bottom: 1.5rem;
      font-size: 0.95rem;
      line-height: 1.5;
    }

    .auth-modal-actions {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .auth-modal-btn {
      width: 100%;
      padding: 0.85rem;
      border-radius: 14px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .auth-modal-btn-primary {
      background: var(--accent);
      color: #ffffff;
    }

    .auth-modal-btn-primary:hover {
      background: var(--accent-hover);
      transform: scale(1.02);
    }

    .auth-modal-btn-secondary {
      background: transparent;
      color: var(--muted);
    }

    .auth-modal-btn-secondary:hover {
      color: var(--text);
    }

    /* ===== Resultado del análisis de documento con IA ===== */
    .ai-doc-status {
      margin: 12px 0 4px;
      padding: 12px 14px;
      border-radius: 14px;
      font-size: 0.9rem;
      line-height: 1.45;
      border: 1px solid var(--border, rgba(0,0,0,0.08));
      background: var(--bg-sec, #f5f5f7);
      color: var(--text, #1d1d1f);
    }
    .ai-doc-ok {
      border-color: rgba(40,167,69,0.35);
      background: rgba(40,167,69,0.08);
    }
    .ai-doc-warn {
      border-color: rgba(245,158,11,0.40);
      background: rgba(245,158,11,0.10);
    }
    .ai-doc-loading {
      color: var(--accent, #2563eb);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ai-doc-title { font-weight: 600; margin-bottom: 4px; }
    .ai-doc-fields { color: var(--text-secondary, #555); }
    .ai-doc-avisos { margin-top: 8px; }
    .ai-doc-avisos ul { margin: 4px 0 4px 1.1rem; padding: 0; }
    .ai-doc-avisos li { margin: 2px 0; }
    .ai-doc-note { font-size: 0.82rem; color: var(--muted, #888); }
    .ai-doc-spinner {
      width: 16px; height: 16px; flex-shrink: 0;
      border: 2px solid rgba(37,99,235,0.25);
      border-top-color: var(--accent, #2563eb);
      border-radius: 50%;
      display: inline-block;
      animation: spin 0.8s linear infinite;
    }

    /* ======== UNIFIED AUTH SCREEN (v6.7) ======== */

    /* Biometric Section */
    .unified-biometric-section {
      margin-bottom: 1rem;
    }

    .unified-bio-card {
      background: var(--bg-secondary);
      border: 1px solid var(--accent-light);
      border-radius: var(--radius-lg);
      padding: 1.5rem;
      text-align: center;
      box-shadow: var(--shadow-sm);
    }

    .unified-bio-avatar {
      width: 56px;
      height: 56px;
      margin: 0 auto 0.75rem;
      background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }

    .unified-bio-switch {
      margin-top: 0.75rem;
      font-size: 0.8rem;
      color: var(--muted);
      cursor: pointer;
      transition: color 0.2s;
    }

    .unified-bio-switch:hover {
      color: var(--accent);
    }

    /* Separator */
    .unified-separator {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin: 1.25rem 0;
    }

    .unified-separator-line {
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    .unified-separator-text {
      color: var(--muted);
      font-size: 0.85rem;
      font-weight: 500;
      text-transform: lowercase;
    }

    /* Email Input */
    .unified-email-section {
      margin-top: 1.5rem;
    }

    .unified-input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
    }

    .unified-input-icon {
      position: absolute;
      left: 14px;
      width: 20px;
      height: 20px;
      color: var(--muted);
      pointer-events: none;
      transition: color 0.2s;
    }

    .unified-email-input {
      padding-left: 44px !important;
      font-size: 1.05rem !important;
    }

    .unified-input-wrapper:focus-within .unified-input-icon {
      color: var(--accent);
    }

    /* GDPR Section */
    .unified-gdpr-section {
      margin-top: 1.25rem;
      opacity: 0.9;
    }

    .unified-gdpr-label {
      display: flex;
      align-items: flex-start;
      gap: 0.65rem;
      cursor: pointer;
      padding: 0.5rem 0;
    }

    .unified-gdpr-check {
      width: 16px;
      height: 16px;
      accent-color: var(--accent);
      flex-shrink: 0;
      margin-top: 2px;
      cursor: pointer;
    }

    .unified-gdpr-text {
      font-size: 0.75rem;
      color: var(--muted);
      line-height: 1.4;
    }

    .unified-gdpr-link {
      background: none;
      border: none;
      color: var(--muted);
      font-size: 0.75rem;
      font-weight: 500;
      text-decoration: underline;
      cursor: pointer;
      padding: 0;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .unified-gdpr-link:hover {
      color: var(--accent-hover);
    }

    .unified-gdpr-accordion {
      margin-top: 0.75rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      animation: gdprSlideDown 0.3s ease-out;
    }

    @keyframes gdprSlideDown {
      from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-8px);
      }

      to {
        opacity: 1;
        max-height: 500px;
        transform: translateY(0);
      }
    }

    .unified-gdpr-accordion-content {
      padding: 1rem;
      font-size: 0.8rem;
      color: var(--muted);
      line-height: 1.6;
      max-height: 200px;
      overflow-y: auto;
    }

    .unified-gdpr-accordion-content p {
      margin-bottom: 0.4rem;
    }

    /* Legacy Link */
    .unified-legacy-btn {
      background: none;
      border: none;
      color: var(--muted);
      font-size: 0.8rem;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 2px;
      opacity: 0.7;
      transition: all 0.2s;
    }

    .unified-legacy-btn:hover {
      color: var(--accent);
      opacity: 1;
    }

    /* ======== SUCCESS SCREEN v6.7 ======== */
    .success-check-icon {
      width: 64px;
      height: 64px;
      background: linear-gradient(145deg, var(--success), #22c55e);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.5rem;
      box-shadow: 0 4px 16px rgba(48, 209, 88, 0.25);
      animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    @keyframes successPop {
      from {
        transform: scale(0);
        opacity: 0;
      }

      to {
        transform: scale(1);
        opacity: 1;
      }
    }

    .success-info-card {
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1rem;
    }

    /* ======== OTP SIMULATED TOAST ======== */
    .otp-sim-toast {
      position: fixed;
      top: 80px;
      left: 50%;
      transform: translateX(-50%) translateY(-20px);
      background: var(--card);
      border: 1px solid var(--accent-light);
      border-radius: var(--radius);
      padding: 1rem 1.25rem;
      box-shadow: var(--shadow-lg);
      z-index: 5000;
      display: flex;
      align-items: center;
      gap: 12px;
      opacity: 0;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
      max-width: 340px;
      width: calc(100% - 2rem);
    }

    .otp-sim-toast.visible {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;
    }

    .otp-sim-toast-icon {
      width: 36px;
      height: 36px;
      background: var(--accent-light);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .otp-sim-toast-body {
      flex: 1;
    }

    .otp-sim-toast-title {
      font-weight: 600;
      font-size: 0.85rem;
      color: var(--text);
      margin-bottom: 2px;
    }

    .otp-sim-toast-code {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--accent);
      letter-spacing: 3px;
      font-family: 'SF Mono', 'Menlo', monospace;
    }

    /* =======================================================
       DESIGN SYSTEM: UNIFIED GLASS PANELS v2
       - Overlay: blurs the app behind
       - Panel: frosted material look
       - Supports OS auto-theme AND html[data-theme] dev toggle
       ======================================================= */

    /* === OVERLAY: semi-transparent blur over the app === */
    .custom-select-overlay {
      background: rgba(0, 0, 0, 0.35) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }

    /* === CUSTOM SELECT DROPDOWN: frosted bottom sheet === */
    /* Light (default / data-theme=light / OS light) */
    .custom-select-modal {
      background: rgba(242, 242, 247, 0.82) !important;
      box-shadow: 0 -2px 24px rgba(0,0,0,0.10) !important;
      border-top: 1px solid rgba(0,0,0,0.07) !important;
    }
    html[data-theme="light"] .custom-select-modal {
      background: rgba(242, 242, 247, 0.82) !important;
      box-shadow: 0 -2px 24px rgba(0,0,0,0.10) !important;
      border-top: 1px solid rgba(0,0,0,0.07) !important;
    }
    /* Dark (data-theme=dark OR OS dark) */
        /* Options inherit theme text color */
    .custom-select-title,
    .custom-select-option {
      color: var(--text) !important;
    }
    .custom-select-option {
      border-bottom: 1px solid var(--border) !important;
    }
    .custom-select-option:last-child {
      border-bottom: none !important;
    }
    .custom-select-option:hover,
    .custom-select-option:active {
      background: var(--accent-light) !important;
    }
    .custom-select-option.selected {
      color: var(--accent) !important;
      font-weight: 600 !important;
      background: var(--accent-light) !important;
    }

    /* === BIOMETRIC AUTH MODAL: centered card === */
    .auth-modal-overlay {
      align-items: center !important;
      padding: 1.5rem !important;
    }
    .auth-modal-content {
      border-radius: 20px !important;
      border-top-left-radius: 20px !important;
      border-top-right-radius: 20px !important;
      max-width: 340px !important;
      transform: scale(0.97) !important;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
    }
    .auth-modal-overlay.active .auth-modal-content {
      transform: scale(1) !important;
    }
    /* Light */
    .auth-modal-content {
      background: rgba(242, 242, 247, 0.86) !important;
      box-shadow: 0 12px 48px rgba(0,0,0,0.15) !important;
      border: 1px solid rgba(0,0,0,0.07) !important;
    }
    html[data-theme="light"] .auth-modal-content {
      background: rgba(242, 242, 247, 0.86) !important;
      box-shadow: 0 12px 48px rgba(0,0,0,0.15) !important;
      border: 1px solid rgba(0,0,0,0.07) !important;
    }
    /* Dark */
        .auth-modal-title,
    .auth-modal-desc {
      color: var(--text) !important;
    }

    /* === AI CHAT PANEL: minimalist frosted bottom sheet === */
    .ai-chat-panel {
      background: rgba(242, 242, 247, 0.82) !important;
      box-shadow: 0 -2px 24px rgba(0,0,0,0.10) !important;
      border-top: 1px solid rgba(0,0,0,0.07) !important;
    }
    html[data-theme="light"] .ai-chat-panel {
      background: rgba(242, 242, 247, 0.82) !important;
    }
        /* Minimalist: hide header and quick replies */
    .ai-chat-header {
      display: none !important;
    }
    .ai-quick-replies {
      display: none !important;
    }
    /* Drag handle pill */
    .ai-chat-panel::before {
      content: '';
      display: block;
      width: 36px;
      height: 5px;
      background: rgba(128, 128, 128, 0.3);
      border-radius: 3px;
      margin: 12px auto 0;
      flex-shrink: 0;
    }
    .ai-chat-input {
      background: var(--bg-secondary) !important;
      border-color: var(--border) !important;
      color: var(--text) !important;
    }

    /* === SETTINGS OVERLAY: always hidden (auto-theme) === */
    #settings-overlay {
      display: none !important;
    }


    /* ================================================================
       RESUMEN SCREEN v2 — New design system
       ================================================================ */

    /* --- Layout container --- */
    .summary-container {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow-y: auto;
      padding: 0 1rem 5rem;
      -webkit-overflow-scrolling: touch;
    }
    .summary-header {
      padding: 1.25rem 0 0.75rem;
      text-align: center;
    }
    #summary-content {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    /* --- Cards / blocks --- */
    .smry-block {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }
    .smry-block-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.85rem 1rem;
      font-weight: 600;
      font-size: 1rem;
      color: var(--text);
      border-bottom: 1px solid var(--border);
      min-height: 52px;
    }
    .smry-block-body {
      padding: 0;
    }

    /* --- Buyer header (icon + name + sublabel) --- */
    .smry-buyer-header-left {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      min-width: 0;
      flex: 1;
    }
    .smry-buyer-icon {
      font-size: 1.25rem;
      flex-shrink: 0;
    }
    .smry-buyer-name {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .smry-buyer-sublabel {
      font-size: 0.72rem;
      color: var(--muted);
      font-weight: 500;
      margin-top: 1px;
    }

    /* --- Accordion trigger --- */
    .smry-accordion-trigger {
      cursor: pointer;
      user-select: none;
    }
    .smry-accordion-trigger:active {
      background: var(--card-hover);
    }
    .smry-accordion-body {
      overflow: hidden;
      transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .smry-accordion-body.smry-open  { max-height: 3000px; }
    .smry-accordion-body.smry-closed { max-height: 0; }

    /* --- Status badge in accordion header --- */
    .smry-header-right {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-shrink: 0;
      margin-left: 0.5rem;
    }
    .smry-status-badge {
      font-size: 0.7rem;
      font-weight: 700;
      padding: 0.2rem 0.5rem;
      border-radius: 20px;
      letter-spacing: 0.2px;
      white-space: nowrap;
    }
    .smry-status-ok   { background: rgba(48, 209, 88, 0.15);  color: #28a748; }
    .smry-status-warn { background: rgba(255, 159, 10, 0.15); color: #d97706; }
    .smry-status-err  { background: rgba(255, 69, 58, 0.15);  color: #dc2626; }

    /* --- Section labels (DATOS / DOCUMENTOS) --- */
    .smry-section-label {
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: var(--muted);
    }
    .smry-docs-label {
      border-top: 1px solid var(--border);
      padding-top: 0.15rem;
    }

    /* --- Vertical field layout --- */
    .smry-field {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.65rem 1rem;
      border-bottom: 1px solid var(--border);
    }
    .smry-field:last-child,
    .smry-field-last { border-bottom: none; }
    .smry-field-inner {
      flex: 1;
      min-width: 0;
    }
    .smry-field-label {
      display: block;
      font-size: 0.72rem;
      color: var(--muted);
      font-weight: 500;
      margin-bottom: 0.2rem;
      white-space: nowrap;
    }
    .smry-field-value {
      display: block;
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--text);
      word-break: break-word;
    }

    /* --- Edit pencil button --- */
    .smry-edit-btn {
      background: none;
      border: none;
      color: var(--accent);
      padding: 0.3rem;
      cursor: pointer;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      opacity: 0.6;
      transition: opacity 0.15s;
    }
    .smry-edit-btn:hover { opacity: 1; }

    /* --- Groups inside accordion --- */
    .smry-fields-group, .smry-docs-group {
      padding: 0;
    }
    .smry-fields-group .smry-field:last-child { border-bottom: none; }
    .smry-docs-group .smry-doc-row:last-child  { border-bottom: none; }

    /* --- Document rows --- */
    .smry-doc-row {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.65rem 1rem;
      border-bottom: 1px solid var(--border);
    }
    .smry-doc-dot {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .smry-doc-ok      { background: rgba(48, 209, 88, 0.18); color: #28a748; }
    .smry-doc-missing {
      background: rgba(255, 69, 58, 0.12);
      border: 1.5px solid rgba(255, 69, 58, 0.4);
    }
    .smry-doc-label {
      font-size: 0.88rem;
      color: var(--text);
      flex: 1;
      min-width: 0;
    }
    .smry-doc-actions {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      flex-shrink: 0;
    }
    .smry-preview-btn {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0.3rem 0.55rem;
      color: var(--text-secondary);
      font-size: 0.75rem;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s;
      white-space: nowrap;
    }
    .smry-preview-btn:hover { background: var(--card-hover); }
    .smry-upload-btn {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      background: var(--accent-light);
      border: none;
      border-radius: 8px;
      padding: 0.3rem 0.6rem;
      color: var(--accent);
      font-size: 0.75rem;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
    }

    /* --- Contact chip --- */
    .smry-contact-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.25rem 0.65rem 0.25rem 0.45rem;
      border-radius: 20px;
      font-size: 0.82rem;
      font-weight: 600;
    }
    .smry-contact-wa {
      background: rgba(37, 211, 102, 0.15);
      color: #128C7E;
    }
    .smry-contact-email {
      background: var(--accent-light);
      color: var(--accent);
    }
    .smry-contact-email-val {
      font-size: 0.8rem;
      color: var(--text-secondary);
      word-break: break-all;
    }

    /* --- Financing zone (clickable) --- */
    .smry-fin-zone {
      padding: 0.75rem 1rem;
      cursor: pointer;
      border-top: 1px solid var(--border);
      transition: background 0.15s;
    }
    .smry-fin-zone:hover { background: var(--card-hover); }
    .smry-fin-labels {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;
    }
    .smry-fin-tag {
      font-size: 0.8rem;
      color: var(--text-secondary);
    }
    .smry-fin-tag strong { font-weight: 700; color: var(--text); }
    .smry-fin-edit-icon {
      width: 13px;
      height: 13px;
      color: var(--accent);
      opacity: 0.6;
    }
    .smry-fin-track {
      height: 7px;
      border-radius: 4px;
      background: var(--bg-secondary);
      display: flex;
      overflow: hidden;
    }
    .smry-fin-own-fill {
      background: var(--accent);
      border-radius: 4px 0 0 4px;
      transition: width 0.5s ease;
    }
    .smry-fin-mort-fill {
      background: color-mix(in srgb, var(--accent) 30%, transparent);
      border-radius: 0 4px 4px 0;
      transition: width 0.5s ease;
    }

    /* --- Confirm button (sticky at bottom) --- */
    .smry-confirm-wrapper {
      position: sticky;
      bottom: 0;
      padding: 0.75rem 0 0.25rem;
      background: linear-gradient(to bottom, transparent, var(--bg) 35%);
    }
    .smry-confirm-btn {
      width: 100%;
      padding: 1rem;
      border-radius: 14px;
      border: none;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      letter-spacing: -0.01em;
      transition: all 0.2s ease;
    }
    .smry-confirm-ready {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 4px 16px rgba(0, 113, 227, 0.35);
    }
    .smry-confirm-ready:hover {
      background: var(--accent-hover);
      transform: translateY(-1px);
    }
    .smry-confirm-blocked {
      background: var(--bg-secondary);
      color: var(--muted);
      cursor: not-allowed;
    }

    /* --- Document viewer overlay --- */
    .smry-viewer-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.92);
      z-index: 99999;
      display: flex;
      flex-direction: column;
      animation: smryViewerIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes smryViewerIn {
      from { opacity: 0; transform: scale(0.97); }
      to   { opacity: 1; transform: scale(1); }
    }
    .smry-viewer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 1.25rem;
      background: rgba(0, 0, 0, 0.5);
      flex-shrink: 0;
    }
    .smry-viewer-title {
      color: #fff;
      font-weight: 600;
      font-size: 0.95rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .smry-viewer-close {
      background: rgba(255,255,255,0.12);
      border: none;
      color: #fff;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.15s;
    }
    .smry-viewer-close:hover { background: rgba(255,255,255,0.22); }
    .smry-viewer-body {
      flex: 1;
      overflow: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    .smry-viewer-footer {
      padding: 0.85rem 1.25rem;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      flex-shrink: 0;
    }
    .smry-viewer-replace-btn {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.2);
      color: #fff;
      padding: 0.65rem 1.5rem;
      border-radius: 10px;
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s;
    }
    .smry-viewer-replace-btn:hover { background: rgba(255,255,255,0.18); }