@charset "UTF-8";
/* ══════════════════════════════════════════════════════
   LaboraYa — Registro_movil.css
   Adaptación móvil del registro (igual a la app)
   Se carga DESPUÉS de Registro.css
══════════════════════════════════════════════════════ */

/* ─── ESCRITORIO: ocultar textos solo-móvil ─── */
.txt-movil { display: none; }

/* ══════════════════════════════════════════════════════
   MÓVIL
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  .txt-desk  { display: none; }
  .txt-movil { display: inline; }

  /* ─── Fondo rosa claro (como la app), sin manchas ─── */
  .auth-bg { display: none; }
  .modal-overlay {
    background: var(--orange-l);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 2rem 24px;
    align-items: flex-start;
  }
  [data-theme="dark"] .modal-overlay { background: var(--gray-50); }

  /* ─── Tarjeta principal ─── */
  .modal {
    max-width: none;
    padding: 28px 22px 26px;
    border-radius: 24px;
    border: none;
    box-shadow: 0 12px 32px rgba(0,0,0,.10);
  }

  /* ─── Cabecera ─── */
  .modal-header { margin-bottom: 1.5rem; }
  .modal-brand { font-size: 1.25rem; font-weight: 700; gap: 10px; }
  .modal-brand img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
  }
  .modal-brand b { color: var(--orange); }

  .modal-close {
    width: 40px; height: 40px;
    border-radius: 12px;
    border: none;
    background: var(--orange-m);
    color: var(--gray-600);
  }
  .modal-close:hover { transform: none; background: var(--orange-m); }

  /* ─── Título ─── */
  .modal-title-block { margin-bottom: 1.4rem; }
  .modal-title-block h1 { font-size: 1.7rem; margin-bottom: .3rem; }
  .modal-title-block p { font-size: .95rem; line-height: 1.6; color: var(--gray-600); }

  /* ─── Orden del formulario (igual a la app) ─── */
  .auth-form { gap: 1rem; }
  #field-rol          { order: 1; }
  .form-row.two-col   { order: 2; }
  #field-email        { order: 3; }
  #field-password     { order: 4; }
  #field-password2    { order: 5; }
  .server-error,
  .auth-submit        { order: 6; }   /* el error queda justo arriba del botón */
  .auth-alt           { order: 7; }

  /* ─── Tarjetas de rol: 2 columnas, emoji arriba ─── */
  #field-rol > label { display: none; }     /* la app no muestra "¿Cómo quieres unirte?" */

  .rol-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }
  .rol-card {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding: 1rem;
    background: var(--white);
    border-radius: 14px;
  }
  .rol-card:hover { transform: none; background: var(--white); border-color: var(--gray-200); }
  .rol-card.selected {
    background: var(--orange-m);
    border-color: var(--orange);
  }
  .rol-icon {
    width: auto; height: auto;
    background: none;
    border: none;
    font-size: 1.6rem;
    justify-content: flex-start;
  }
  .rol-card.selected .rol-icon { background: none; }
  .rol-info strong { font-size: 1rem; line-height: 1.3; }
  .rol-info span { font-size: .85rem; line-height: 1.4; color: var(--gray-600); }

  /* ─── Nombre y apellidos lado a lado ─── */
  .form-row.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* FIX: ya no se sale Apellidos */
    gap: .75rem;
  }
  .form-row.two-col > .form-field { min-width: 0; }

  /* ─── Campos: fondo blanco, borde, sin ícono ─── */
  .form-field label {
    font-size: .9rem;
    font-weight: 600;
    color: var(--gray-900);
    letter-spacing: 0;
  }
  .input-wrap {
    width: 100%;
    min-width: 0;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: 12px;
  }
  .input-ico { display: none; }
  .input-wrap input {
    width: 100%;
    min-width: 0;
    font-size: 16px;                 /* evita el zoom automático en iPhone */
    padding: .9rem .9rem;
  }
  .form-row.two-col .input-wrap input { padding: .9rem .8rem; }
  .eye-btn { width: 44px; height: 44px; padding: 0; color: var(--gray-600); }

  .field-hint { font-size: .8rem; color: var(--gray-600); line-height: 1.5; }
  .field-hint svg { display: none; }

  /* Barra de fortaleza: solo aparece cuando escribes */
  .strength-bar:has(.strength-fill:not([class*="w-"])) { display: none; }

  /* ─── Botón ─── */
  .auth-submit {
    padding: 1rem;
    margin-top: .75rem;
    border-radius: 14px;
    font-size: 1.05rem;
    box-shadow: none;
  }
  .auth-submit:hover:not(:disabled) { transform: none; box-shadow: none; }
  .auth-submit::after { display: none; }

  /* ─── "¿Ya tienes cuenta?" en dos líneas ─── */
  .auth-alt { font-size: .95rem; color: var(--gray-600); margin-top: .5rem; }
  .auth-alt a { display: block; margin-top: .2rem; }

  /* ─── Modal de éxito ─── */
  .success-overlay { padding: 1.25rem; }
  .success-box { padding: 2rem 1.5rem; border-radius: 24px; }
  .success-box h2 { font-size: 1.4rem; }
}