/* =========================================================
   MÓVIL — zonas de toque y tamaños de letra
   RUTH.il

   QUÉ ARREGLA
   -----------
   Ninguna pantalla se desbordaba a lo ancho (medido a 360 y 390 px), pero
   sí había dos problemas de uso en el móvil:

   1. Botones demasiado pequeños para el dedo. Medido a 390px: el
      interruptor de tema quedaba en 28px de alto, y "Actualizar", los
      filtros, los botones de documento y los del menú de sesión rondaban
      los 30-34. El mínimo cómodo son 44px; por debajo de eso se falla el
      toque y se acaba pulsando lo de al lado.

   2. Texto por debajo de 12px, que en una pantalla pequeña ya no se lee:
      8px en el botón de "Herramientas" de la notaría, 9,6px en los pasos
      del registro y en las etiquetas de la portada, 10,4-11,5 en varios
      contadores y etiquetas.

   CÓMO
   Se toca solo por debajo de 768px, para no cambiar el escritorio. Cuando
   agrandar el elemento estropearía el diseño —el interruptor de tema, el
   logo— se agranda solo la ZONA SENSIBLE con un ::after invisible: se toca
   más fácil y se sigue viendo igual.

   Se carga después de las demás hojas para ganar en la cascada.
   ========================================================= */

@media (max-width: 768px) {

  /* ---------- ZONAS DE TOQUE ---------- */

  /* Botones y enlaces con aspecto de botón: 44px de alto como mínimo. */
  .btn,
  .nav-btn,
  .btn-step,
  .btn-auth,
  .filtro,
  .btn-filtro,
  .theme-switch,
  .sesion-boton,
  .pestana,
  .doc-btn,
  .sesion-opcion,
  .btn-outline-secondary,
  .file-item button,
  button.btn-principal,
  button.btn-suave {
    min-height: 44px;
  }

  /* Los que solo llevan icono, además cuadrados. */
  .doc-btn,
  .file-item button,
  .btn-icono {
    min-width: 44px;
  }

  /* El interruptor de tema y el logo mantienen su tamaño visible: agrandar
     el pastillo o el logo desequilibraría la barra. Se extiende la zona
     sensible por debajo y por encima con un ::after transparente. */
  /* Lo mismo con "cambiar ciudad" y "cambiar" del bloque de agendado: van
     dentro de una línea de texto, y darles 44px de alto partiría el párrafo
     en dos. */
  .theme-toggle,
  .nav-logo,
  .enlace-cambiar {
    position: relative;
  }
  .theme-toggle::after,
  .nav-logo::after,
  .enlace-cambiar::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, 44px);
    height: 44px;
    /* No debe tapar nada ni recibir estilo: solo amplía el área de toque. */
    background: transparent;
  }

  /* Campos de formulario: por debajo de 44px el teclado del móvil tapa el
     campo al enfocarlo y cuesta ver qué se está escribiendo. */
  input:not([type=checkbox]):not([type=radio]):not([type=file]),
  select,
  textarea {
    min-height: 44px;
    /* 16px evita que iOS haga zoom automático al enfocar el campo, que es
       lo que descoloca la página al empezar a escribir. */
    font-size: max(16px, 1rem);
  }

  /* ---------- TAMAÑOS DE LETRA ---------- */

  /* Suelo de 12px para etiquetas, contadores y textos de apoyo. Se listan
     las clases concretas en vez de poner una regla global, para no tocar
     tamaños que sí están bien pensados. */
  .filtro,
  .filtro .cuenta,
  .btn-filtro,
  .filtro-label,
  .dato strong,
  .detalle-campo strong,
  .solicitud-card strong,
  .detalle-grid strong,
  .estado,
  .tipo-tramite,
  .doc-ext,
  .file-ext,
  .doc-grupo,
  .campo label,
  .campo .pista,
  .paso p,
  .nav-btn,
  .nav-role,
  .sesion-rol,
  .step-label,
  .step-badge,
  .rs-tabla .rs-seccion td,
  .rs-cuenta,
  .vista-estado .detalle,
  .toast {
    font-size: max(12px, .78rem);
  }


  /* La notaría usa <strong> suelto como etiqueta de campo ("Cliente",
     "Cédula", "Código"...). No tienen clase a la que apuntar, así que se
     alcanzan por su sitio: dentro de la tarjeta o del detalle. Salían a
     8,8px, el texto más pequeño de todo el sistema. */
  .solicitud-card strong,
  .detalle-solicitud strong,
  .card-body strong,
  .doc-ext,
  .file-ext,
  .doc .ext,
  .cuenta-docs,
  .doc-count-badge,
  .stat-label,
  .pw-etiqueta,
  .tramite-tipo {
    font-size: max(12px, .74rem) !important;
  }

  /* Botones de solo icono: el ojo del login medía 8x8 y era casi imposible
     de acertar. Se agranda la zona sin mover el icono de sitio. */
  .eye-btn,
  .pw-ojo {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Botones y enlaces que no encajaban en las listas de arriba. */
  .btn-reject,
  .btn-approve,
  .btn-refresh,
  .nav-links a,
  .main-nav a,
  .footer a,
  .social a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Los títulos de sección y las etiquetas en versalitas suelen ser los más
     pequeños de todo; se les da algo más de aire además del tamaño. */
  .doc-grupo,
  .rs-tabla .rs-seccion td,
  .documentos-cliente-title {
    letter-spacing: .04em;
    line-height: 1.5;
  }


  /* ---------- CASOS CONCRETOS ---------- */

  /* En móvil, el botón de "Herramientas" oculta su texto y se queda en
     34px de ancho: alto correcto, pero demasiado estrecho para el dedo.
     La clase doble hace falta para ganarle a la regla de cada pantalla. */
  .nav-btn.dropdown-toggle {
    min-width: 44px;
    justify-content: center;
  }

  /* Enlaces de la portada y del pie: eran de 19 a 25px de alto. Como son
     texto y no botones, se les da altura con espaciado en vez de con
     min-height, para que no se separen entre ellos más de la cuenta. */
  .main-nav a,
  .nav-links a,
  footer a,
  .footer-links a,
  .mobile-menu a {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Iconos sociales: 36px, justo por debajo del mínimo. */
  .social a,
  .social-links a,
  .redes a {
    min-width: 44px;
    min-height: 44px;
  }

  /* Etiquetas de la portada y el tipo de trámite en la notaría: <span>
     sueltos sin clase, alcanzados por su contenedor. */
  .hero-tags span,
  .tag-list span,
  .chip,
  .pill,
  .solicitud-card > span,
  .detalle-solicitud > span {
    font-size: max(12px, .74rem);
  }


  /* Portada y login: los últimos que quedaban por debajo del mínimo.
     Se apuntan por su clase real, medida en el navegador. */
  a.btn-primary,
  a.btn-shine,
  .modal-close,
  nav a,
  a.ig, a.li, a.wa {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Los enlaces de navegación llevan su propio texto alineado a la
     izquierda; centrar solo los que son iconos o botones. */
  nav a:not(.ig):not(.li):not(.wa):not(.btn-primary) { justify-content: flex-start; }

  .lib-tag,
  .lrp-tag,
  .price-kicker,
  .price-badge,
  .footer-copy,
  .tramite-tipo-label {
    font-size: max(12px, .74rem);
  }


  /* Los dos últimos, apuntados por su ruta real medida en el navegador:
     el enlace de la barra del login y la etiqueta del tipo de trámite en
     las tarjetas de la notaría. */
  /* El enlace de la barra del login no declara padding, así que crece con
     el que se le ponga aquí. Se usa min-height además, por si otra hoja
     le fijara el alto. */
  .navbar-ruth .nav-links .nav-link,
  .nav-links .nav-link,
  a.nav-link {
    padding-top: 12px;
    padding-bottom: 12px;
    min-height: 44px;
    box-sizing: border-box;
  }

  /* La placa del tipo de trámite en las tarjetas de la notaría. Hace falta
     la ruta completa para ganarle a la regla de notaria.css, que tiene tres
     clases encadenadas. */
  .card-header-sol .titulo .placa-muted,
  .card-header-sol span {
    font-size: max(12px, .74rem);
  }

  /* ---------- ESPACIO Y RESPIRO ---------- */

  /* Filas de botones: que se repartan el ancho en vez de amontonarse. */
  .acciones,
  .pie-form,
  .step-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .acciones .btn,
  .pie-form .btn,
  .step-actions .btn-step {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Los filtros pasan a una fila que se desliza, en vez de partirse en
     tres líneas y empujar la lista hacia abajo. */
  .filtros {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .filtros::-webkit-scrollbar { display: none; }
  .filtros .filtro { flex: 0 0 auto; }

  /* Tablas anchas: que se deslicen dentro de su caja y no estiren la
     página. Vale para el resumen de los chats y para cualquier otra. */
  .rs-caja,
  .table-responsive,
  .tabla-caja {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Las palabras largas (correos, rutas de archivo, códigos catastrales)
     rompen la caja si no se les deja partir. */
  .dato span,
  .rs-tabla .rs-valor,
  .doc-nombre,
  .file-item span {
    overflow-wrap: anywhere;
  }
}

/* ---------- PANTALLAS MUY ESTRECHAS (≤400px) ---------- */
@media (max-width: 400px) {
  /* Con menos de 400px, dos botones por fila quedan a 150px y el texto se
     parte por la mitad. Mejor uno por fila, a ancho completo. */
  .acciones .btn,
  .pie-form .btn {
    flex: 1 1 100%;
  }

  .panel { padding-left: 12px; padding-right: 12px; }
  .tarjeta { padding-left: 12px; padding-right: 12px; }
}

/* =========================================================
   FOCO VISIBLE (regla global)
   =========================================================
   Solo 12 de las 23 hojas del proyecto definían :focus-visible, así que
   quien navega con el teclado perdía de vista dónde estaba en la mitad de
   las pantallas. Esta hoja la cargan todas, así que la regla vale para
   todo lo que no tenga una propia.

   Es :focus-visible y no :focus a propósito: el navegador solo lo aplica
   cuando se llegó con el teclado, no al hacer clic con el ratón.
   ========================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 4px;
}