/* ============================================================================
   CAPA MOBILE FIRST
   ----------------------------------------------------------------------------
   El resto de las hojas del proyecto estan escritas en direccion escritorio
   primero: 216 consultas max-width frente a 59 min-width. Reescribirlas todas
   seria un refactor enorme y arriesgado sobre 11.000 lineas.

   Esta hoja hace lo contrario y va la ULTIMA, para corregir lo que de verdad
   se rompe en un telefono. Su base son las reglas del movil, y solo a partir
   de tablet (min-width) se permite compactar. Es decir: aqui lo que se declara
   por defecto es lo pequeno, y lo grande es la excepcion.

   Que arregla, medido sobre la pagina real a 398 px de ancho:
     - 97 de 145 elementos interactivos (67%) median menos de 44x44 px.
       El boton del menu medía 21x37: el control mas importante del movil.
     - 49 de 52 campos de formulario tenian letra por debajo de 16 px, lo que
       hace que iOS haga zoom automatico al tocarlos y descoloque la pagina.
     - 51 nodos de texto por debajo de 12 px.

   Referencia de los 44 px: es el minimo que recomiendan tanto las guias de
   interfaz humana de Apple como Material Design, y el criterio 2.5.5 de WCAG.
   ========================================================================== */

/* ------------------------------------------------------------------
   1. OBJETIVOS TACTILES
   Se crece el area de toque, no necesariamente el dibujo. Por eso se
   usa min-height/min-width y centrado, en vez de tocar el padding, que
   deformaria botones ya maquetados.
   ------------------------------------------------------------------ */

button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
a[class*="btn"],
a[class*="-cta"],
.rs-filtro,
.rs-flecha-suave,
.equipo-flecha,
.modal-close,
.mobile-menu-btn,
.category-filter,
.blog-filtro,
.blog-vista-btn,
.lector-voto,
.lector-pie-nav,
.news-link,
.evento-detalles-link,
.agenda-flecha,
.notify-close,
.story-cta,
.tema-card,
.recurso-btn,
.saved-topics-toggle,
/* Anadidos tras medir el sitio entero: estos venian entre 20 y 31 px de alto,
   por debajo del minimo comodo para el dedo. */
.article-read-toggle,
.insight-link,
.blog-enlace,
.legal-back,
.diploma-enlace,
.cal-enlace,
.calculadora-chip,
.autor-articulo,
[class*="flecha"],
[class*="close"],
[class*="cerrar"] {
  min-height: 44px;
  min-width: 44px;
}

/* Los enlaces de la lista de arriba son en su mayoria texto, no cajas: al
   crecer a 44px hay que centrar el contenido o queda pegado arriba. */
.article-read-toggle,
.insight-link,
.blog-enlace,
.legal-back,
.diploma-enlace,
.cal-enlace {
  display: inline-flex;
  align-items: center;
}


/* Los que solo llevan icono necesitan ademas centrar su contenido, porque al
   crecer la caja el icono se quedaria arriba a la izquierda. */
.mobile-menu-btn,
.modal-close,
.rs-flecha-suave,
.equipo-flecha,
.blog-vista-btn,
.lector-cerrar,
.agenda-flecha,
.notify-close,
[class*="flecha"],
[class*="close"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Enlaces de texto dentro de parrafos: NO deben crecer a 44 px o partirian
   la linea. Se les da area de toque por espaciado vertical del renglon. */
p a,
li a,
.lector-articulo a,
.article-detail-copy a {
  min-height: 0;
  min-width: 0;
}

/* Listas de enlaces del pie: separacion suficiente para no fallar el toque */
footer li + li {
  margin-top: 0.35rem;
}

/* ------------------------------------------------------------------
   2. FORMULARIOS SIN ZOOM AUTOMATICO EN iOS
   Safari en iPhone amplia la pagina al enfocar cualquier campo cuya
   letra sea menor de 16 px, y despues no la devuelve a su sitio. Es la
   causa numero uno de que un formulario "se sienta roto" en movil.
   ------------------------------------------------------------------ */

/* Se acota a (pointer: coarse), que significa "el dedo es el puntero". El zoom
   automatico es un comportamiento de pantalla tactil, no de ventana estrecha:
   un escritorio con la ventana encogida no lo sufre y no tiene por que perder
   su escala tipografica. Asi el arreglo llega exactamente a quien lo necesita.

   Va con !important a proposito. No es una preferencia estetica sino un suelo
   de usabilidad: cualquier selector de clase del proyecto (.notify-input,
   .calculator-panel input) tiene mas especificidad que "input" y ganaria,
   devolviendo el campo por debajo de 16 px y con el, el zoom. */
@media (pointer: coarse) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Altura comoda para el dedo en los campos */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
  min-height: 44px;
}

/* Las casillas y radios se agrandan un poco: 13 px es imposible de acertar */
input[type="checkbox"],
input[type="radio"] {
  min-width: 20px;
  min-height: 20px;
}

/* ------------------------------------------------------------------
   3. SUELO DE LEGIBILIDAD
   Nada por debajo de 12 px en pantalla pequena.
   ------------------------------------------------------------------ */

body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

small,
.tag,
.news-date,
.article-meta,
.blog-kicker,
.form-note,
.lector-firma {
  font-size: max(0.75rem, 12px);
}

/* ------------------------------------------------------------------
   4. NADA SE SALE DE LA PANTALLA
   Palabras largas del vocabulario fiscal (contribuyente, comprobante,
   responsabilidad) desbordan cajas estrechas si no se permiten cortar.
   ------------------------------------------------------------------ */

h1, h2, h3, h4,
p, li, td, th,
.news-card h3,
.article-card h3 {
  overflow-wrap: anywhere;
}

/* Las tablas no se encogen: se deslizan dentro de su propia caja */
table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

img,
video,
picture,
svg {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------
   5. EL DEDO NO TIENE HOVER
   Donde algo solo aparecia al pasar el raton, en pantalla tactil debe
   estar visible desde el principio.
   ------------------------------------------------------------------ */

@media (hover: none) {
  .news-link::after,
  .blog-enlace::after {
    width: 100%;
  }

  [class*="overlay"][class*="hover"] {
    opacity: 1;
  }
}

/* ------------------------------------------------------------------
   6. FOCO VISIBLE
   Quien navega con teclado o con conmutador necesita ver donde esta.
   ------------------------------------------------------------------ */

:focus-visible {
  outline: 3px solid var(--verde-lima, #8dc63f);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------
   7. EL HERO EN TELEFONO
   ------------------------------------------------------------------ */

/* css/responsive.css escondia el video del hero en movil con el comentario
   "ocultamos el video para mejor rendimiento". Aquella decision se tomo
   cuando el archivo pesaba 22 MB y estaba en HEVC. Hoy pesa 2,26 MB, es
   H.264, lleva poster y js/media.js lo pausa en cuanto sale de pantalla,
   asi que el motivo ya no se sostiene y el hero recupera su fondo. */
.hero-background {
  display: block;
}

/* A opacidad 0.1 el video quedaba practicamente invisible sobre el azul:
   se veia un fondo plano y no se entendia que hubiera video. */
.hero-background video {
  opacity: 0.22;
}

/* .hero-pattern es un adorno pensado para la mitad derecha del hero
   (width: 50%). En una pantalla estrecha su borde se lee como una costura
   vertical justo por el medio. En telefono cubre el hero entero. */
.hero-pattern {
  width: 100%;
}

/* ==================================================================
   A PARTIR DE TABLET
   Aqui, y solo aqui, se permite volver a lo compacto. Esta es la
   direccion mobile first: lo generoso es la base, lo apretado es la
   excepcion para pantallas con raton y mas espacio.
   ================================================================== */

@media (min-width: 769px) {
  /* Con raton, 44 px deja de ser necesario: el puntero es preciso */
  .rs-filtro,
  .category-filter,
  .blog-filtro,
  .blog-vista-btn,
  .news-link {
    min-height: 0;
    min-width: 0;
  }

  /* La tipografia de los campos no se toca aqui: el bloque de 16 px esta
     acotado a punteros gruesos, asi que en escritorio nunca llego a aplicarse. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea {
    min-height: 0;
  }

  /* El bloque de centrado de arriba le pone display:inline-flex a este boton
     para que su icono quede centrado dentro de los 44 px. Como esta hoja
     carga la ultima, ese display anulaba el "display:none" que styles.css
     usa para esconder el hamburguesa en escritorio, y el boton aparecia en
     pantallas grandes. Aqui se restituye. */
  .mobile-menu-btn {
    display: none;
    min-height: 0;
    min-width: 0;
  }

  footer li + li {
    margin-top: 0;
  }

  /* El adorno vuelve a ser media pantalla, como lo diseno el sitio */
  .hero-pattern {
    width: 50%;
  }
}

/* La opacidad original del video en pantallas grandes */
@media (min-width: 993px) {
  .hero-background video {
    opacity: 0.25;
  }
}