/* ─── RESET GLOBAL ─── */
    *, *::before, *::after { box-sizing: border-box; }
    body { font-family: 'Nunito', sans-serif; margin: 0; padding: 0; }

    /* ─── OVERLAY ─── */
    .modal-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.6); z-index: 300;
      align-items: center; justify-content: center;
      padding: 16px;
    }
    .modal-overlay.show { display: flex; }

    /* ─── MODAL ─── */
    .modal {
      background: #fff; border-radius: 20px;
      width: 100%; max-width: 420px;
      max-height: calc(100vh - 32px);
      overflow-y: auto; overflow-x: hidden;
      box-shadow: 0 24px 60px rgba(0,0,0,0.25);
      position: relative;
      scrollbar-width: thin;
      scrollbar-color: #ddd transparent;
    }
    .modal::-webkit-scrollbar { width: 4px; }
    .modal::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

    /* ─── MODAL HEADER ─── */
    .modal-header {
      position: sticky; top: 0; z-index: 10;
      background: #fff; padding: 20px 20px 0;
      border-radius: 20px 20px 0 0;
    }

    .close-btn {
      position: absolute; top: 14px; right: 14px;
      background: #f5f5f5; border: none; color: #777;
      width: 30px; height: 30px; border-radius: 50%;
      cursor: pointer; display: flex; align-items: center;
      justify-content: center; font-size: 14px;
      transition: background .2s, color .2s;
    }
    .close-btn:hover { background: #fee2e2; color: #dc2626; }

    .modal-logo {
      text-align: center; padding: 0 0 10px;
    }
    .modal-logo img {
      height: 44px; width: auto; object-fit: contain;
      display: inline-block;
    }

    .modal-title {
      font-size: 1.2rem; font-weight: 800; color: #111827;
      text-align: center; margin: 0 0 6px;
    }

    .role-badge {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 3px 12px; border-radius: 20px;
      font-size: 11px; font-weight: 800;
      margin: 0 auto 10px;
      position: relative; left: 50%; transform: translateX(-50%);
      width: fit-content;
    }
    .role-badge.client { background: #dbeafe; color: #1d4ed8; }
    .role-badge.rider  { background: #dcfce7; color: #15803d; }

    /* ─── TABS ─── */
    .tab-row {
      display: flex; gap: 4px;
      background: #f3f4f6; border-radius: 10px; padding: 4px;
      margin-bottom: 0;
    }
    .tab-btn {
      flex: 1; padding: 8px 4px; border: none; background: transparent;
      color: #6b7280; cursor: pointer; border-radius: 7px;
      font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 700;
      transition: background .2s, color .2s;
    }
    .tab-btn.active { background: #2563eb; color: #fff; }

    /* ─── BODY DEL MODAL ─── */
    .modal-body { padding: 16px 20px 24px; }

    /* ─── CAMPOS ─── */
    .field { margin-bottom: 12px; }
    .field:last-child { margin-bottom: 0; }

    .field label {
      display: block; font-size: 11px; font-weight: 800;
      color: #374151; margin-bottom: 5px; letter-spacing: .3px;
    }
    .field label .req { color: #ef4444; margin-left: 2px; }

    .field input,
    .field select {
      display: block; width: 100%;
      padding: 11px 14px; font-size: 14px; font-weight: 600;
      font-family: 'Nunito', sans-serif; color: #111827;
      background: #f9fafb; border: 1.5px solid #e5e7eb;
      border-radius: 10px; outline: none;
      transition: border-color .2s, background .2s;
      margin: 0; box-sizing: border-box;
      -webkit-appearance: none; appearance: none;
    }
    .field input::placeholder { color: #9ca3af; font-weight: 500; }
    .field input:focus,
    .field select:focus {
      border-color: #2563eb; background: #fff;
      box-shadow: 0 0 0 3px rgba(37,99,235,.1);
    }
    .field input.err { border-color: #ef4444; }

    /* ─── GRID 2 COL ─── */
    .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .grid2 .full { grid-column: 1 / -1; }

    /* ─── DIVISOR ─── */
    .divider {
      font-size: 10px; font-weight: 800; color: #9ca3af;
      text-transform: uppercase; letter-spacing: 1px;
      margin: 14px 0 10px; padding-top: 12px;
      border-top: 1px solid #f3f4f6;
    }

    /* ─── BOTONES ─── */
    .btn-main {
      display: block; width: 100%; padding: 12px;
      background: linear-gradient(135deg, #2563eb, #1e40af);
      color: #fff; border: none; border-radius: 11px;
      font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 800;
      cursor: pointer; transition: transform .15s, box-shadow .15s;
      margin-top: 16px;
    }
    .btn-main:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(37,99,235,.35);
    }
    .btn-main:active:not(:disabled) { transform: translateY(0); }
    .btn-main:disabled { opacity: .55; cursor: not-allowed; }

    .btn-ghost {
      display: block; width: 100%; padding: 11px;
      background: #f3f4f6; color: #374151;
      border: 1.5px solid #e5e7eb; border-radius: 11px;
      font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 700;
      cursor: pointer; transition: background .2s;
      margin-top: 8px;
    }
    .btn-ghost:hover { background: #e5e7eb; }

    /* ─── ERROR ─── */
    .err-box {
      display: none; background: #fef2f2; border: 1px solid #fecaca;
      border-radius: 9px; padding: 10px 14px; margin-top: 14px;
      font-size: 13px; font-weight: 600; color: #b91c1c;
      text-align: center;
    }

    /* ─── OTP ─── */
    .otp-icon {
      width: 54px; height: 54px; border-radius: 50%;
      background: #dbeafe; display: flex; align-items: center;
      justify-content: center; margin: 4px auto 12px; font-size: 24px; color: #2563eb;
    }
    #otpCode {
      font-size: 1.6rem !important; letter-spacing: .35em !important;
      text-align: center !important; font-weight: 800 !important;
    }

    /* ─── QR PANEL ─── */
    .qr-wrap { text-align: center; padding: 8px 0 4px; }
    .qr-wrap canvas {
      border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.1);
      margin: 14px auto; display: block;
    }
    .user-code {
      font-size: 1.7rem; font-weight: 800; letter-spacing: 4px;
      color: #111827; margin: 6px 0 2px;
    }
    .user-code-sub { font-size: 12px; color: #6b7280; margin-bottom: 16px; }
    .share-row { display: flex; gap: 10px; }
    .share-row .btn-ghost { margin-top: 0; flex: 1; }

    /* ─── PRIVACIDAD: ENLACE ─── */
    .privacy-link {
      display: inline-block;
      margin-top: 10px;
      font-size: 13px;
      font-weight: 700;
      color: #2563eb;
      text-decoration: underline;
      cursor: pointer;
      background: none;
      border: none;
      font-family: 'Nunito', sans-serif;
      padding: 0;
    }
    .privacy-link:hover {
      color: #1e40af;
    }

    /* ─── PRIVACIDAD: MODAL ─── */
    .privacy-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.7);
      z-index: 999;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .privacy-overlay.show {
      display: flex;
    }
    .privacy-modal {
      background: #fff;
      border-radius: 20px;
      max-width: 480px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      padding: 28px 24px 24px;
      position: relative;
      box-shadow: 0 24px 60px rgba(0,0,0,0.4);
    }
    .privacy-modal h2 {
      font-size: 1.25rem;
      font-weight: 800;
      color: #111827;
      margin: 0 0 8px;
      text-align: center;
    }
    .privacy-modal .close-privacy {
      position: sticky;
      top: 0;
      float: right;
      background: #f3f4f6;
      border: none;
      color: #6b7280;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .2s, color .2s;
    }
    .privacy-modal .close-privacy:hover {
      background: #fee2e2;
      color: #dc2626;
    }
    .privacy-modal p {
      font-size: 13px;
      line-height: 1.6;
      color: #374151;
      margin: 8px 0;
    }
    .privacy-modal ul {
      font-size: 13px;
      line-height: 1.6;
      color: #374151;
      padding-left: 20px;
      margin: 8px 0;
    }
    .privacy-modal strong {
      color: #111827;
    }

    /* ─── BOTÓN DE ACEPTAR DENTRO DEL MODAL DE PRIVACIDAD ─── */
    .privacy-accept-btn {
      display: block;
      width: 100%;
      padding: 14px;
      margin-top: 20px;
      background: linear-gradient(135deg, #2563eb, #1e40af);
      color: #fff;
      border: none;
      border-radius: 11px;
      font-family: 'Nunito', sans-serif;
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
      transition: transform .15s, box-shadow .15s;
    }
    .privacy-accept-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(37,99,235,.35);
    }
    .privacy-accept-btn:active {
      transform: translateY(0);
    }

    /* ─── CARNET PHOTO UPLOAD ─── */
    .carnet-upload-area {
      border: 2px dashed #e5e7eb;
      border-radius: 12px;
      padding: 16px;
      text-align: center;
      cursor: pointer;
      transition: all .3s;
      background: #f9fafb;
      position: relative;
      overflow: hidden;
    }
    .carnet-upload-area:hover {
      border-color: #2563eb;
      background: #eff6ff;
    }
    .carnet-upload-area.has-image {
      border-color: #22c55e;
      background: #f0fdf4;
    }
    .carnet-upload-area .upload-icon {
      font-size: 32px;
      color: #9ca3af;
      display: block;
      margin-bottom: 6px;
    }
    .carnet-upload-area .upload-text {
      font-size: 13px;
      font-weight: 700;
      color: #6b7280;
    }
    .carnet-upload-area .upload-sub {
      font-size: 11px;
      font-weight: 600;
      color: #9ca3af;
    }
    .carnet-upload-area .file-name {
      font-size: 12px;
      font-weight: 700;
      color: #22c55e;
      margin-top: 4px;
      display: none;
    }
    .carnet-upload-area .file-name.show { display: block; }
    .carnet-upload-area .remove-file {
      position: absolute;
      top: 6px;
      right: 6px;
      background: #fee2e2;
      border: none;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      font-size: 14px;
      color: #dc2626;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      transition: all .2s;
    }
    .carnet-upload-area .remove-file:hover {
      background: #fecaca;
      transform: scale(1.1);
    }
    .carnet-upload-area.has-image .remove-file {
      display: flex;
    }
    .carnet-upload-area .preview-img {
      max-width: 100%;
      max-height: 120px;
      border-radius: 8px;
      margin-top: 6px;
      display: none;
    }
    .carnet-upload-area.has-image .preview-img {
      display: block;
    }
    .carnet-upload-area.has-image .upload-icon,
    .carnet-upload-area.has-image .upload-text,
    .carnet-upload-area.has-image .upload-sub {
      display: none;
    }
    .carnet-upload-area .file-name.show {
      display: block;
    }
    #carnetInput {
      display: none;
    }

    /* ─── ESPERA DE APROBACIÓN ─── */
    #panelWaiting {
      display: none;
      text-align: center;
      padding: 10px 0;
    }
    #panelWaiting .waiting-icon {
      font-size: 56px;
      color: #f59e0b;
      animation: pulse-icon 1.5s ease-in-out infinite;
    }
    @keyframes pulse-icon {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.1); opacity: 0.7; }
    }
    #panelWaiting .waiting-title {
      font-size: 1.2rem;
      font-weight: 900;
      color: #111827;
      margin: 8px 0 4px;
    }
    #panelWaiting .waiting-sub {
      font-size: 13px;
      color: #6b7280;
      font-weight: 600;
      line-height: 1.6;
      margin-bottom: 12px;
    }
    #panelWaiting .waiting-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #f3f4f6;
      border-top-color: #2563eb;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin: 12px auto;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    #panelWaiting .waiting-alert {
      background: #fef3c7;
      border: 1px solid #fcd34d;
      border-radius: 10px;
      padding: 12px 16px;
      font-size: 13px;
      font-weight: 600;
      color: #92400e;
      margin-top: 12px;
    }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 480px) {
      .modal { max-width: 100%; margin: 0 8px; }
      .modal-body { padding: 12px 16px 20px; }
      .grid2 { grid-template-columns: 1fr; gap: 8px; }
      .grid2 .full { grid-column: 1; }
      .carnet-upload-area { padding: 12px; }
    }