/* =========================================================================
   ZonaTel — Signup · Ajustes RESPONSIVE para TABLETAS y laptops chicas.
   Rango cubierto por este archivo: 601px – 1280px.
   (≤600px lo cubre zonatel-mobile.css · >1280px usa zonatel.css base.)

   Carga DESPUÉS de zonatel.css → puede sobreescribir el base.
   Usa solo las variables de marca ya definidas (--zt-navy, --zt-blue,
   --zt-turq, --zt-green, --zt-ink, --zt-muted, --zt-line, --zt-field,
   --zt-grad). No duplica reglas; complementa las @media existentes
   (1280 / 991 / 720 / 520) cerrando los huecos del rango tableta.

   Sub-rangos usados:
     · 992–1280px  → "laptop chica" / transición de la barra lateral fija
     · 601–991px   → tableta (el base ya apila el aside; aquí lo pulimos)
       · 768–991px → tableta vertical/horizontal ancha (2 col donde conviene)
   ========================================================================= */


/* =========================================================================
   1) RANGO 992–1280px  —  "laptop chica"
   --------------------------------------------------------------------------
   PROBLEMA QUE RESUELVE (bug actual):
   En el base, a ≤1280px el .zt-grid colapsa a 1 columna y .zt-summary se
   vuelve estática, PERO el .zt-aside sigue position:fixed al 32% y #main
   mantiene margin-left:calc(32% + 6px). En pantallas de ~1000–1280px ese
   32% deja el contenido (tarjeta blanca + summary apilada) demasiado
   angosto y la .zt-summary se ve apretada/cortada.

   SOLUCIÓN: en este rango fijamos el aside a un ancho cómodo en px (no %)
   y recalculamos el margin del #main con ese mismo ancho, para que la
   columna principal recupere espacio. El aside sigue fixed (se mantiene la
   sensación desktop) pero sin estrangular el contenido.
   ========================================================================= */
@media (min-width:992px) and (max-width:1280px){

	/* Aside fijo con ancho en px (más predecible que 32% en este rango). */
	.zt-aside{
		width:300px;
		max-width:300px;
		padding:38px 30px;            /* un poco menos de aire lateral */
	}
	.zt-aside-logo{ width:170px; margin-bottom:28px; }
	.zt-aside-h{ font-size:28px; }     /* baja un punto para no saturar 300px */
	.zt-aside-sub{ font-size:14.5px; max-width:none; }

	/* La tarjeta blanca arranca justo después del aside (300px + gutter). */
	#main.container{
		margin:22px 22px 22px 314px;   /* 300 + 14 de respiro */
	}

	/* El base ya puso .zt-grid en 1 columna y .zt-summary estática.
	   Como ahora hay más ancho, RECUPERAMOS las 2 columnas (form + summary)
	   con la summary algo más angosta para que NUNCA se corte. */
	.zt-grid{
		grid-template-columns:minmax(0,1fr) 300px;
		gap:24px;
		align-items:start;
	}
	/* La summary vuelve a ser sticky (hay altura suficiente al lado). */
	.zt-summary{
		position:sticky;
		top:22px;
		padding:22px 20px;
	}
}


/* =========================================================================
   2) RANGO 601–991px  —  TABLETA (aside ya estático por el base)
   --------------------------------------------------------------------------
   El base, a ≤991px, vuelve el .zt-aside estático y lo apila arriba, pasa
   .zt-plans y .zt-nums-grid a 2 columnas, y pone .zt-topbar en columna.
   Aquí MEJORAMOS ese estado para que el panel de marca se vea como una
   cabecera ordenada y el contenido use bien el ancho de tableta.
   ========================================================================= */
@media (min-width:601px) and (max-width:991px){

	/* ----- Panel de marca como cabecera horizontal ordenada ----- */
	.zt-aside{
		padding:30px 32px 26px;
		border-radius:0;                /* arriba del todo, full-bleed */
	}
	.zt-aside-logo{ width:172px; margin-bottom:22px; }
	.zt-aside-h{ font-size:30px; margin-bottom:12px; }
	.zt-aside-sub{ font-size:15px; max-width:640px; margin-bottom:24px; }

	/* Beneficios en 2 columnas (caben bien en ancho de tableta). */
	.zt-vp{
		display:grid;
		grid-template-columns:1fr 1fr;
		gap:6px 30px;
		margin-bottom:22px;
	}
	.zt-vp li{ margin-bottom:14px; }

	/* Prueba social + sellos en fila, repartidos. */
	.zt-proof{ gap:34px; }
	.zt-aside-foot{ margin-top:18px; }
	.zt-trust, .zt-secure{ display:inline-flex; }

	/* La tarjeta blanca a 18px (igual que el base) — no se toca el margin. */

	/* ----- Topbar: stepbar arriba, ayuda alineada a la derecha ----- */
	/* El base ya la pone en columna; mejoramos la alineación del help. */
	.zt-topbar{ gap:14px; }
	.zt-help{ align-self:flex-end; }

	/* ----- Stepbar: compactar para que quepan los 5 pasos ----- */
	.zt-stepbar{ gap:5px; }
	.zt-step{ gap:8px; }
	.zt-step-num{ flex:0 0 30px; width:30px; height:30px; font-size:14px; }
	.zt-step-line{ min-width:14px; }

	/* ----- Navegación cómoda ----- */
	.zt-nav{ gap:12px; }
	.zt-back{ padding:13px 20px; }
}


/* -------------------------------------------------------------------------
   2a) Tableta ESTRECHA (601–767px, ej. tablet vertical chica / phablet)
   En este sub-rango los subtítulos de los pasos no caben sin overflow:
   los ocultamos y dejamos solo el número + título corto. También 1 sola
   columna de beneficios para que respiren.
   ------------------------------------------------------------------------- */
@media (min-width:601px) and (max-width:767px){

	/* Ocultar subtítulo del paso (i) para evitar desbordes horizontales. */
	.zt-stepbar .zt-step-tx i{ display:none; }
	.zt-step-tx b{ font-size:13px; }
	.zt-step{ gap:7px; }

	/* Beneficios en una sola columna en pantallas más justas. */
	.zt-vp{ grid-template-columns:1fr; }

	/* Planes en 2 columnas (ya viene del base ≤991) — confirmado bien aquí. */

	/* Campos de dirección y tarjeta: 1 columna para inputs cómodos
	   (evita inputs demasiado angostos a este ancho). El base recién
	   colapsa #mandatory-fields/#card_info a ≤720, así que cubrimos
	   también la franja 721–767 dándoles 1 columna explícita. */
	.zt-screen #mandatory-fields,
	.zt-screen #card_info,
	.zt-grid2{ grid-template-columns:1fr; }
}


/* -------------------------------------------------------------------------
   2b) Tableta ANCHA (768–991px, tablet vertical grande / horizontal media)
   Aquí SÍ hay ancho para 2 columnas en los formularios y para una
   selección de números más densa. Aprovechamos el espacio.
   ------------------------------------------------------------------------- */
@media (min-width:768px) and (max-width:991px){

	/* Subtítulos de pasos visibles pero compactos (caben a este ancho). */
	.zt-step-tx i{ font-size:11px; }

	/* Formularios en 2 columnas: a este ancho los inputs quedan cómodos. */
	.zt-screen #mandatory-fields,
	.zt-screen #card_info,
	.zt-grid2{
		grid-template-columns:1fr 1fr;
		gap:0 20px;
	}

	/* Selección de números: 3 columnas aprovecha mejor el ancho que 2. */
	.zt-nums-grid{ grid-template-columns:repeat(3,1fr); }

	/* La barra de búsqueda de números: que el buscador domine y el resto
	   no se desborde (search flexible, filtro fijo, refresh fijo). */
	.zt-nums-bar{ gap:10px; flex-wrap:nowrap; }
	.zt-nums-search{ flex:1 1 auto; min-width:0; }
	.zt-nums-area-wrap{ flex:0 0 auto; }
	.zt-nums-area{ width:auto; min-width:140px; }
}


/* =========================================================================
   3) AJUSTES TRANSVERSALES a TODO el rango tableta (601–1280px)
   --------------------------------------------------------------------------
   Reglas que aplican a cualquier sub-rango para suavizar la transición
   entre breakpoints (sin saltos raros entre 991 y 1280) y para garantizar
   CERO overflow horizontal y controles cómodos.
   ========================================================================= */
@media (min-width:601px) and (max-width:1280px){

	/* Blindaje anti-overflow: nada del shell debe empujar scroll lateral. */
	.zt-shell,
	.zt-grid,
	.zt-main,
	.zt-screens,
	.zt-summary{ min-width:0; max-width:100%; }
	.zt-screen{ overflow-wrap:anywhere; }      /* textos largos no desbordan */

	/* Imágenes/SVG nunca exceden su contenedor. */
	.zt-aside-logo,
	.zt-plan-ic svg{ max-width:100%; }

	/* La summary, cuando queda APILADA (1 columna), no debe verse perdida
	   a lo ancho: la centramos y le damos un ancho máximo agradable.
	   (En 992–1280 va al lado y es sticky; esta regla solo "agarra"
	   visualmente cuando el grid es de 1 sola columna.) */
	.zt-grid{ /* hook para herencia; valores reales por sub-rango arriba */ }

	/* Tarjetas de plan: que el precio y nombre no se aprieten en 2 col. */
	.zt-plan{ padding:16px 14px 14px; }
	.zt-plan-price b{ font-size:23px; }

	/* Inputs y selects: altura cómoda táctil sin ser gigantes. */
	.zt-card .form-control{ height:46px; }
	.zt-nums-q,
	.zt-nums-area,
	.zt-nums-refresh{ height:44px; }

	/* CTA / navegación: botones con buen tamaño táctil. */
	.zt-cta-btn,
	#finish-button.btn{ padding:15px 24px; font-size:16px; }
}


/* -------------------------------------------------------------------------
   3a) La summary APILADA bien presentada (solo cuando el grid es 1 columna).
   En 601–991px el .zt-grid es de 1 columna (base) → la summary cae debajo
   del formulario. Le damos un ancho máximo y centrado para que no quede un
   bloque gigante de borde a borde.
   ------------------------------------------------------------------------- */
@media (min-width:601px) and (max-width:991px){
	.zt-summary{
		max-width:520px;
		margin-left:auto;
		margin-right:auto;
		width:100%;
		padding:22px 22px;
	}
}