/* facturacion.totalgaslp.mx · VERSION TGLP-2026-09-20-26A
   Una sola tarjeta, pensada para el celular. Colores de la marca: azul del "TOTAL", rojo del "GAS", amarillo del "LP". */
:root {
    --azul: #24487a; --azul-osc: #1a355c; --rojo: #d9382b; --amarillo: #f2b41d; --naranja: #f4511e;
    --fondo: #fff6f0; --fondo-2: #ffe9dc; --tinta: #1f2937; --gris: #6b7280; --linea: #e5e7eb; --ok: #1f8a4c; --error: #c62828;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--tinta);
       background: linear-gradient(180deg, var(--fondo-2) 0%, var(--fondo) 45%, #fff 100%); min-height: 100vh; }
.barra { background: #fff; border-bottom: 3px solid var(--naranja); padding: 14px 16px; text-align: center; }
.barra img { height: 44px; width: auto; }
.envoltura { max-width: 520px; margin: 24px auto 48px; padding: 0 14px; }
.tarjeta { background: #fff; border-radius: 22px; box-shadow: 0 14px 40px rgba(31, 41, 55, .10); padding: 28px 22px; }
h1 { font-size: 34px; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 10px; color: var(--azul-osc); }
.intro { color: var(--gris); font-size: 15px; line-height: 1.5; margin: 0 0 20px; }
.paso-etiqueta { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); margin: 0; }
.paso-titulo { font-size: 20px; font-weight: 700; margin: 2px 0 10px; }
.barra-pasos { display: flex; gap: 6px; margin-bottom: 18px; }
.barra-pasos span { flex: 1; height: 6px; border-radius: 6px; background: var(--fondo-2); }
.barra-pasos span.hecho { background: var(--azul); }
.aviso { border-radius: 14px; padding: 14px 16px; font-size: 14px; line-height: 1.5; margin: 0 0 18px; }
.aviso-info { background: var(--fondo-2); }
.aviso-info .titulo { display: block; font-weight: 700; margin-bottom: 6px; }
.aviso-listo .titulo { margin-bottom: 4px; }
.aviso-info ul { margin: 0; padding-left: 18px; }
.aviso-error { background: #fde8e8; color: var(--error); }
.aviso-ok { background: #e6f5ec; color: var(--ok); }
.aviso-espera { background: #fff4d6; color: #7a5200; }
.campo { position: relative; margin-bottom: 14px; }
.campo label { display: block; font-size: 12px; font-weight: 600; color: var(--gris); margin: 0 0 6px 2px; }
.campo input, .campo select { width: 100%; font: inherit; font-size: 17px; padding: 14px 14px; border: 1.5px solid var(--linea); border-radius: 14px; background: #fff; color: var(--tinta); }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 4px rgba(36, 72, 122, .12); }
.campo input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; text-transform: uppercase; }
.campo .ayuda { font-size: 12px; color: var(--gris); margin: 6px 0 0 2px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .dos { grid-template-columns: 1fr; } }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px 20px; border: 0; border-radius: 999px; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; text-decoration: none; }
.boton-principal { background: var(--azul-osc); color: #fff; }
.boton-principal:hover { background: var(--azul); }
.boton-secundario { background: #fff; color: var(--azul-osc); border: 1.5px solid var(--linea); }
.boton:disabled { opacity: .6; cursor: default; }
.acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.resumen { border: 1.5px solid var(--linea); border-radius: 16px; padding: 4px 16px; margin: 0 0 16px; }
.resumen div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 15px; }
.resumen div:last-child { border-bottom: 0; }
.resumen span:first-child { color: var(--gris); }
.resumen b { text-align: right; }
.descargas { display: grid; gap: 12px; margin: 16px 0; }
.descarga { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px solid var(--tinta); border-radius: 16px; text-decoration: none; color: var(--tinta); }
.descarga .icono { width: 40px; height: 40px; border-radius: 12px; background: var(--fondo-2); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--rojo); }
.descarga b { display: block; font-size: 16px; }
.descarga small { color: var(--gris); }
.pie { text-align: center; color: var(--gris); font-size: 13px; margin-top: 18px; line-height: 1.5; }
.obligatorio { color: var(--rojo); }
.palomita { width: 44px; height: 44px; border-radius: 50%; background: var(--tinta); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; flex: 0 0 44px; }
.aviso-listo { display: flex; gap: 14px; align-items: flex-start; }