/* ═══════════════════════════════════════════════════════════════════════════
   LA ENTRADA, EN EL LENGUAJE DE MODO TRABAJO
   ──────────────────────────────────────────
   /login.html y /registro.html son la primera pantalla que ve un doctor, y
   hasta ahora venían de otro sitio: partículas flotando, anillos en órbita,
   tarjetas decorativas de «Cita confirmada» y cristal con resplandor. Nada de
   eso existe dentro de la aplicación, así que el doctor entraba en un sitio y
   aparecía en otro.

   Las dos páginas declaran los MISMOS tokens (`--primary`, `--surface`,
   `--text`…), así que la palanca es reatarlos a los `--ti-*` en vez de
   reescribir sus reglas — el mismo recurso que en la ficha podológica. Lo que
   no se puede reatar es la decoración: esa se apaga.

   El marcado y el JavaScript de las dos páginas no se tocan. Lo único que
   cambia es cómo se ven.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Los tokens, reatados ── */
.ti-body {
  --primary:        var(--ti-marca);
  --primary-hover:  var(--ti-marca-media);
  --accent:         var(--ti-marca);
  --accent-strong:  var(--ti-marca-media);
  --bg-base:        transparent;
  --surface:        var(--ti-tarjeta);
  --surface-2:      var(--ti-tarjeta);
  --border:         var(--ti-filo-2);
  --border-soft:    var(--ti-filo);
  --border-strong:  var(--ti-canto);
  --text:           var(--ti-tinta);
  --text-soft:      var(--ti-tinta-2);
  --text-muted:     var(--ti-tinta-3);
  --text-faint:     var(--ti-tinta-4);
  --danger:         var(--ti-peligro);
  --ok:             var(--ti-ok);
}

/* ── El zoom, solo si hay altura para él ──
   `.ti-body` de /modo-trabajo-app.css amplía todo un 25 % de 768 px para
   arriba. Eso está pensado para una COLUMNA de contenido que se recorre
   bajando; aquí es una tarjeta que tiene que caber entera, y ampliada mide 808
   px de alto: en un portátil de 700–900 px había que bajar para llegar a los
   campos, que es lo último que quieres hacer en una pantalla de entrar.

   Esta hoja se carga después que la otra y ambos selectores pesan igual, así
   que basta con volver a declararlo. A tamaño real la tarjeta mide 646 y cabe;
   en un monitor alto se recupera la ampliación, que ahí sí sobra sitio. */
@media (min-width: 768px) and (max-height: 900px) {
  .ti-body { --ti-zoom: 1; }
}

/* ── El lienzo ──
   El mismo fondo del modo, plano y sin manchas de color. */
body.ti-body {
  background: linear-gradient(180deg, #DCEDF7 0%, #EDF5FA 38%, #F4F8FB 100%);
  background-image: linear-gradient(180deg, #DCEDF7 0%, #EDF5FA 38%, #F4F8FB 100%);
  color: var(--ti-tinta);
  /* Dividido por el zoom, por lo mismo que en modo-trabajo-app.css. */
  min-height: calc(100vh / var(--ti-zoom, 1));
  /* `body.ti-body` de /modo-trabajo-app.css pone `padding: 0` —ahí el carril
     lo marca `.ti-main`—, y aquí eso dejaba la tarjeta pegada a los dos
     cantos. La entrada no tiene `.ti-main`: el margen va en el cuerpo. */
  padding:
    max(24px, env(safe-area-inset-top, 0px)) 16px
    max(24px, env(safe-area-inset-bottom, 0px));
}
body.ti-body::before, body.ti-body::after { display: none; }

/* ── Fuera la decoración ──
   Partículas, anillos, la rejilla de fondo, las tarjetas que flotan alrededor
   y el resplandor de la tarjeta. El modo es plano: una tarjeta sólida sobre un
   fondo liso, y nada más moviéndose por detrás. */
.ti-body .particles,
.ti-body .particle,
.ti-body .grid-overlay,
.ti-body .orbit-ring,
.ti-body .orbit-ring-2,
.ti-body .float-card,
.ti-body .card-glow { display: none !important; }

/* ── La tarjeta ── */
.ti-body .stage { position: relative; z-index: 1; }
.ti-body .card-wrap { max-width: 460px; margin: 0 auto; }
.ti-body .card {
  background: var(--ti-tarjeta);
  border: none;
  border-radius: 22px;
  box-shadow: var(--ti-sombra-alta);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 26px 22px 22px;
}

/* ── La marca ── */
.ti-body .brand { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ti-body .brand-mark {
  width: 56px; height: 56px; border-radius: 17px;
  background: var(--ti-tarjeta);
  box-shadow: var(--ti-sombra-baja);
  display: flex; align-items: center; justify-content: center;
  border: none;
}
.ti-body .brand-name { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ti-marca-honda); }
.ti-body .brand-name small {
  display: block; margin-top: 2px;
  font-size: 12px; font-weight: 500; letter-spacing: .01em; color: var(--ti-tinta-3);
}

/* ── El encabezado ── */
.ti-body .card-head { text-align: center; margin-top: 18px; margin-bottom: 20px; }
.ti-body .card-head h1,
.ti-body .step-title {
  font-size: 23px; font-weight: 700; letter-spacing: -.026em; line-height: 1.15;
  color: var(--ti-marca-honda);
}
.ti-body .card-head p,
.ti-body .step-sub {
  font-size: 14.5px; line-height: 1.45; color: var(--ti-tinta-3); margin-top: 6px;
}
.ti-body .step-sub { margin-bottom: 18px; }

/* ── Los campos ── */
.ti-body .field { margin-bottom: 14px; }
.ti-body .field > label {
  display: block;
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ti-tinta-4);
  margin-bottom: 8px;
}
.ti-body .field input[type="text"],
.ti-body .field input[type="email"],
.ti-body .field input[type="password"],
.ti-body .field input[type="tel"],
.ti-body .field input[type="number"],
.ti-body .field select,
.ti-body .field textarea,
.ti-body .field-wrapper input {
  width: 100%;
  background: var(--ti-hueco);
  border: 1px solid var(--ti-filo-2);
  border-radius: 13px;
  min-height: 48px;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ti-tinta);
  box-shadow: none;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.ti-body .field textarea { min-height: 88px; resize: vertical; }
.ti-body .field input:focus,
.ti-body .field select:focus,
.ti-body .field textarea:focus,
.ti-body .field-wrapper input:focus {
  border-color: var(--ti-marca);
  background: var(--ti-hueco);
  box-shadow: 0 0 0 4px rgba(8, 145, 178, .16);
}
.ti-body .field input::placeholder,
.ti-body .field textarea::placeholder { color: var(--ti-tinta-4); }

/* El icono dentro del campo y el ojo de la contraseña. */
.ti-body .field-wrapper, .ti-body .pwd-wrap { position: relative; }
/* `[type]` para empatar en peso con la regla de arriba —que lleva
   `input[type="email"]`— y ganar por ir después. Sin esto el icono se
   montaba encima del texto. */
.ti-body .field-wrapper input[type] { padding-left: 44px; }
.ti-body .pwd-wrap input { padding-right: 48px; }
.ti-body .field-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ti-tinta-4); display: flex; pointer-events: none;
}
.ti-body .password-toggle,
.ti-body .pwd-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 10px;
  border: none; background: transparent; color: var(--ti-tinta-4);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ti-body .password-toggle:hover,
.ti-body .pwd-toggle:hover { background: var(--ti-hueco); color: var(--ti-marca-media); }

/* La pista y el error de cada campo. */
.ti-body .field .hint,
.ti-body .field-hint { font-size: 12.5px; line-height: 1.45; color: var(--ti-tinta-3); margin-top: 6px; }
.ti-body .field-error { font-size: 12.5px; color: var(--ti-peligro); margin-top: 6px; }

/* ── Los botones ── */
.ti-body .submit,
.ti-body .btn-next {
  width: 100%;
  min-height: 50px;
  border: none;
  border-radius: 13px;
  background: var(--ti-marca);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  cursor: pointer;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background .25s, transform .12s var(--ti-curva);
}
/* El diseño viejo gritaba: `text-transform: uppercase` y 800 de peso en el
   botón principal. En el modo los botones se leen, no se gritan. */
.ti-body .submit, .ti-body .btn-next,
.ti-body .signup-btn, .ti-body .btn-ghost, .ti-body .btn-back,
.ti-body .remember, .ti-body .divider {
  text-transform: none;
  letter-spacing: -.01em;
}
.ti-body .submit:hover,
.ti-body .btn-next:hover { background: var(--ti-marca-media); }
.ti-body .submit:active,
.ti-body .btn-next:active { transform: scale(.97); }
.ti-body .submit:disabled,
.ti-body .btn-next:disabled { opacity: .55; }

.ti-body .signup-btn,
.ti-body .btn-ghost,
.ti-body .btn-back {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--ti-canto);
  border-radius: 13px;
  background: var(--ti-tarjeta);
  color: var(--ti-marca-media);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  cursor: pointer; text-decoration: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: border-color .25s, background .25s, transform .12s var(--ti-curva);
}
.ti-body .signup-btn:hover,
.ti-body .btn-ghost:hover,
.ti-body .btn-back:hover { border-color: var(--ti-marca); background: var(--ti-hueco); }
.ti-body .signup-btn:active,
.ti-body .btn-ghost:active,
.ti-body .btn-back:active { transform: scale(.97); }

/* ── Las opciones de la fila ── */
.ti-body .row-options {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 4px 0 16px;
}
.ti-body .remember { font-size: 14px; color: var(--ti-tinta-2); display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ti-body .remember input { width: 17px; height: 17px; accent-color: var(--ti-marca); }
.ti-body .forgot { font-size: 14px; color: var(--ti-marca-media); font-weight: 500; }

/* ── El separador ── */
.ti-body .divider {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 14px;
  font-size: 12.5px; color: var(--ti-tinta-4);
  text-transform: none; letter-spacing: 0;
}
.ti-body .divider::before,
.ti-body .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--ti-filo-2);
}

/* ── El aviso de error ── */
.ti-body .error {
  margin-top: 12px;
  font-size: 13.5px; line-height: 1.45;
  color: var(--ti-peligro);
  text-align: center;
}
.ti-body .error:not(:empty) {
  background: var(--ti-peligro-piel);
  border-radius: 12px;
  padding: 11px 13px;
}
/* Una cuenta pendiente de aprobación no es un fallo: es un estado. */
.ti-body .error.aviso {
  color: var(--ti-aviso);
  background: rgba(217, 119, 6, .08);
}

/* ── El pie de confianza ── */
.ti-body .trust {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--ti-filo);
}
.ti-body .trust-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; color: var(--ti-tinta-4);
}

/* ── El pie de página ── */
.ti-body .below {
  text-align: center; margin-top: 18px;
  font-size: 12.5px; color: var(--ti-tinta-4);
}
.ti-body .below a { color: var(--ti-tinta-3); }
.ti-body .below a:hover { color: var(--ti-marca-media); }
.ti-body .below .sep { margin: 0 6px; color: var(--ti-tinta-5); }

/* ── El velo de «verificando sesión» ── */
.ti-body .auth-loader {
  background: #EDF5FA;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.ti-body .auth-loader-spinner { border-top-color: var(--ti-marca); }
.ti-body .auth-loader-text { font-size: 14px; color: var(--ti-tinta-3); }

/* ═══════════════════ SOLO EL ALTA POR PASOS ═══════════════════ */

/* ── La barra de avance ── */
.ti-body .progress { margin: 18px 0 20px; }
.ti-body .progress-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 9px;
}
.ti-body .progress-head strong {
  font-size: 15px; font-weight: 600; letter-spacing: -.012em; color: var(--ti-tinta);
}
.ti-body .progress-head span { font-size: 12.5px; color: var(--ti-tinta-4); }
.ti-body .progress-track {
  display: flex; gap: 4px; height: 4px;
}
.ti-body .progress-seg {
  flex: 1; height: 4px; border-radius: 980px;
  background: var(--ti-filo-2);
  transition: background .3s var(--ti-curva);
}
.ti-body .progress-seg.done,
.ti-body .progress-seg.on,
.ti-body .progress-seg.active { background: var(--ti-marca); }

/* ── Las opciones que se eligen tocando (especialidad, país…) ── */
.ti-body .spec {
  border: 1px solid var(--ti-filo-2);
  border-radius: 15px;
  background: var(--ti-tarjeta);
  padding: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s, background .2s, transform .12s var(--ti-curva);
}
.ti-body .spec:hover { border-color: var(--ti-marca); background: var(--ti-hueco); }
.ti-body .spec:active { transform: scale(.985); }
.ti-body .spec.selected, .ti-body .spec[aria-pressed="true"], .ti-body .spec.on {
  border-color: var(--ti-marca);
  background: rgba(8, 145, 178, .07);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, .12);
}

/* ── El mapa del paso de ubicación ── */
.ti-body .loc-map {
  height: 230px;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--ti-filo-2);
  background: var(--ti-hueco);
  position: relative; z-index: 0;
}
.ti-body .loc-map .leaflet-control-zoom {
  border: none; border-radius: 11px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(11, 95, 132, .22);
}
.ti-body .loc-map .leaflet-control-zoom a {
  width: 32px; height: 32px; line-height: 32px;
  background: var(--ti-tarjeta); color: var(--ti-tinta-2);
  border-bottom-color: var(--ti-filo);
}

/* ── El resumen final y el «todo listo» ── */
.ti-body .summary {
  background: var(--ti-hueco);
  border: 1px solid var(--ti-filo-2);
  border-radius: 15px;
  padding: 14px;
}
.ti-body .done-mark {
  width: 64px; height: 64px; border-radius: 980px; margin: 0 auto 16px;
  background: rgba(21, 128, 61, .10); color: var(--ti-ok);
  display: flex; align-items: center; justify-content: center;
}

/* ── La botonera del asistente ── */
.ti-body .actions { display: flex; gap: 9px; margin-top: 18px; }
/* ── OJO con el `width: 100%` de los botones ──
   Suelto —el de login, el de «Continuar» cuando va solo— ese 100 % es lo que
   toca. Pero aquí son HERMANOS en una fila: con 100 % cada uno, el primero se
   lleva el ancho entero de la tarjeta y empuja al segundo fuera del borde.
   Dentro de `.actions` el ancho lo reparte flex, no el porcentaje. */
.ti-body .actions > .btn { width: auto; min-width: 0; }
.ti-body .actions .btn-next { flex: 1 1 auto; }
/* «Atrás» no pesa lo mismo que «Continuar»: ocupa lo justo. */
.ti-body .actions .btn-back,
.ti-body .actions .btn-ghost { flex: 0 0 auto; min-width: 118px; }

/* ── En una ventana ancha la columna no se estira ── */
@media (min-width: 768px) {
  .ti-body .card-wrap, .ti-body .card { max-width: 480px; }
  .ti-body .card { padding: 30px 26px 26px; }
}

/* ── Las piezas propias del alta ── */
.ti-body .spec-grid { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ti-body .spec-note { font-size: 12.5px; line-height: 1.45; color: var(--ti-tinta-3); margin-top: 10px; }

.ti-body .summary-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--ti-filo);
  font-size: 14.5px;
}
.ti-body .summary-row:first-child { border-top: none; }
.ti-body .summary-row > *:first-child { color: var(--ti-tinta-3); }
.ti-body .summary-row > *:last-child { font-weight: 600; color: var(--ti-tinta); text-align: right; min-width: 0; }

.ti-body .note {
  background: var(--ti-hueco);
  border: 1px solid var(--ti-filo-2);
  border-radius: 14px;
  padding: 12px 13px;
  font-size: 13px; line-height: 1.5; color: var(--ti-tinta-2);
}
.ti-body .foot { margin-top: 16px; font-size: 12.5px; color: var(--ti-tinta-4); text-align: center; }
.ti-body .form-error {
  margin-top: 12px; padding: 11px 13px; border-radius: 12px;
  background: var(--ti-peligro-piel); color: var(--ti-peligro);
  font-size: 13.5px; line-height: 1.45;
}
.ti-body .form-error:empty { display: none; }

/* La fuerza de la contraseña. */
.ti-body .meter { height: 4px; border-radius: 980px; background: var(--ti-filo-2); overflow: hidden; margin-top: 8px; }
.ti-body .meter > * { height: 4px; border-radius: 980px; transition: width .25s var(--ti-curva), background .25s; }
.ti-body .meter-label { font-size: 12.5px; color: var(--ti-tinta-3); margin-top: 6px; }

/* Los botones pequeños del paso de ubicación. */
.ti-body .loc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ti-body .loc-action {
  min-height: 40px; padding: 9px 13px; gap: 7px;
  border-radius: 12px; border: 1px solid var(--ti-canto);
  background: var(--ti-tarjeta); color: var(--ti-marca-media);
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .2s, background .2s, transform .12s var(--ti-curva);
}
.ti-body .loc-action:hover { border-color: var(--ti-marca); background: var(--ti-hueco); }
.ti-body .loc-action:active { transform: scale(.97); }
.ti-body .loc-action--principal { background: var(--ti-marca); color: #FFFFFF; border-color: transparent; font-weight: 600; }
.ti-body .loc-action--principal:hover { background: var(--ti-marca-media); border-color: transparent; }
.ti-body .loc-link-row { display: flex; gap: 8px; align-items: stretch; margin-top: 8px; }
.ti-body .loc-link-row input { flex: 1; min-width: 0; }
.ti-body .loc-results {
  margin-top: 8px; border-radius: 13px; overflow: hidden;
  border: 1px solid var(--ti-filo-2); background: var(--ti-tarjeta);
}
.ti-body .loc-status { font-size: 12.5px; line-height: 1.45; color: var(--ti-tinta-3); margin-top: 9px; }

/* Los documentos legales. */
.ti-body .legal-docs { display: flex; flex-direction: column; gap: 9px; }
.ti-body .legal-doc {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 13px; border-radius: 14px;
  background: var(--ti-hueco); border: 1px solid var(--ti-filo-2);
}
.ti-body .legal-doc-txt { min-width: 0; flex: 1; }
.ti-body .legal-doc-name { font-size: 14.5px; font-weight: 600; color: var(--ti-tinta); }
.ti-body .legal-doc-meta { font-size: 12px; color: var(--ti-tinta-3); margin-top: 3px; }
.ti-body .legal-doc-btn {
  flex: 0 0 auto; min-height: 36px; padding: 8px 12px;
  border-radius: 11px; border: 1px solid var(--ti-canto);
  background: var(--ti-tarjeta); color: var(--ti-marca-media);
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.ti-body .legal-doc-btn:hover { border-color: var(--ti-marca); background: var(--ti-hueco); }
.ti-body .legal-cargando { font-size: 13.5px; color: var(--ti-tinta-3); padding: 8px 0; }
.ti-body .legal-pie { font-size: 12.5px; line-height: 1.5; color: var(--ti-tinta-3); margin-top: 12px; }

/* El «todo listo». */
.ti-body .done-list { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; text-align: left; }