/* ===================================================================== Sistema Unificado de Gestión de Pago de Impuesto Predial Hoja única. Sin frameworks. El PANEL usa la paleta de :root, fija y clara. El PORTAL usa las variables --ap-* que genera apariencia.css.php desde el panel. ===================================================================== */ /* --------------------------------------------------------------------- PALETA Vino sobre claro, con las líneas doradas. Los nombres de variable se conservan —marino, marino2— aunque el color ya no lo sea: cambiarlos obligaría a tocar las trescientas reglas que los usan, y cada una de esas ediciones es una oportunidad de romper algo que ya funciona. El color vive aquí; el resto de la hoja no se entera. --------------------------------------------------------------------- */ :root{ /* --- Panel de administración ------------------------------------- Claro y sobrio, y NO configurable. Quien lo usa pasa aquí la jornada entera; eso no se decide por gusto. El portal, en cambio, se pinta con las variables --ap-* que genera apariencia.css.php. */ --marino:#2b3a4a; --marino2:#3b4f64; --marino-suave:#eef1f4; --dorado:#b7952f; --dorado2:#d8bc6a; --dorado3:#8f7423; --texto:#232a31; --suave:#657180; --borde:#dde3e9; --fondo:#f6f8fa; --blanco:#fff; --rojo:#a02020; --rojo-f:#fdf0f0; --ambar:#8a6100; --ambar-f:#fff8e6; --verde:#1c6b3c; --verde-f:#e9f5ed; --demo:#7b2d8e; --demo-f:#f7eefa; --r:9px; /* Las variables --ap-* NO se definen aquí a propósito. Esta hoja carga DESPUÉS de apariencia.css.php, así que cualquier valor que pusiera aquí ganaría por orden de cascada y anularía lo que el operador eligiera en el panel. Pasó exactamente eso: se podía elegir cualquier paleta y no se aplicaba ninguna. Los valores de respaldo los emite apariencia.css.php, que es quien manda. Sombras en dos capas: una cercana que define el borde y otra lejana que da la altura. Una sola se ve plana. */ --sombra-1:0 1px 2px rgba(20,30,40,.06), 0 1px 3px rgba(20,30,40,.05); --sombra-2:0 2px 4px rgba(20,30,40,.05), 0 8px 22px rgba(20,30,40,.07); --sombra-3:0 4px 8px rgba(20,30,40,.06), 0 18px 44px rgba(20,30,40,.11); } *{box-sizing:border-box} /* El pie va pegado abajo SIEMPRE. La página se reparte en franjas: lo de arriba ocupa lo que necesita, el contenido se estira para llenar lo que sobre, y el pie queda al final. En una pantalla alta con poco contenido el pie no sube a media pantalla; en una con mucho, baja con él. Se mide contra 100vh y no contra 100%: el porcentaje depende de que html tenga altura, y esa cadena se rompe con cualquier regla de por medio — que es justo lo que pasaba. vh no depende de nada. Tampoco se usa position:fixed: dejaría el pie flotando encima del contenido, tapando el último renglón de las tablas. */ body{margin:0; font-family:"Inter","SF Pro Text",-apple-system,BlinkMacSystemFont, "Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-feature-settings:"kern" 1,"liga" 1,"cv05" 1; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; background:var(--fondo);color:var(--texto);line-height:1.6;font-size:16px; min-height:100vh;display:flex;flex-direction:column} body > main{flex:1 0 auto} body > footer.principal{flex-shrink:0;margin-top:auto} h1{font-size:26px;margin:0 0 10px;color:var(--marino)} h2{font-size:18px;margin:0 0 4px;color:var(--marino)} h3{font-size:15px;margin:0 0 8px;color:var(--marino)} a{color:var(--marino2)} code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em; background:rgba(13,35,64,.06);padding:1px 5px;border-radius:3px} pre{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;white-space:pre-wrap} .envoltura{max-width:1080px;margin:0 auto;padding:0 20px} main{padding:28px 0 60px} /* Distintivo de demostración: debe ser imposible de pasar por alto */ .cinta-demo{background:var(--demo);color:#fff;text-align:center;padding:9px 16px; font-size:13.5px;font-weight:600} .cinta-demo span{opacity:.9;font-weight:400} header.principal{background:var(--marino);color:#fff;padding:18px 0;border-bottom:4px solid var(--dorado)} header.principal .marca{font-size:19px;font-weight:700} header.principal .lema{font-size:12.5px;color:var(--dorado2);margin-top:2px} .barra{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap} .nav a{color:#dce6f2;text-decoration:none;margin-left:16px;font-size:13.5px} .nav a:hover{color:#fff} .declaracion{background:var(--marino2);color:#dce6f2;font-size:12.5px;padding:9px 0} footer.principal{background:var(--marino);color:#b9c6d6;padding:24px 0;font-size:12.5px} /* Tarjetas */ .tarjeta{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r); padding:24px;margin-bottom:20px} .tarjeta .sub{color:var(--suave);font-size:13.5px;margin:0 0 18px} .hero{background:linear-gradient(180deg,#fff,#f8fafc)} .hero .entrada{font-size:17px;color:var(--suave);max-width:70ch;margin:0 0 22px} .tres{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px} .tres div{background:var(--marino-suave);padding:16px;border-radius:var(--r);font-size:13.5px;color:var(--suave)} .tres strong{display:block;color:var(--marino);margin:6px 0 3px} .tres .num{display:inline-block;width:24px;height:24px;line-height:24px;text-align:center; background:var(--dorado);color:#2a2000;border-radius:50%;font-weight:700;font-size:13px} .tenue-caja{background:#fbfcfd} .claves-prueba{border-style:dashed} /* Pestañas */ .pestanas{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap} .pestana{padding:8px 16px;border:1px solid var(--borde);border-radius:var(--r);background:var(--blanco); color:var(--suave);font-size:13.5px;text-decoration:none} .pestana[aria-selected="true"]{background:var(--marino);border-color:var(--marino);color:#fff;font-weight:600} /* Formularios */ .rejilla{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px} .campo{display:flex;flex-direction:column} .campo.ancho{grid-column:1/-1} label{font-size:13px;font-weight:600;margin-bottom:5px;color:var(--marino)} label.normal{font-weight:400;margin:0;color:var(--texto)} input[type=text],input[type=email],input[type=tel],input[type=password],input[type=date], input[type=file],select,textarea{ padding:9px 11px;border:1px solid var(--borde);border-radius:var(--r);font-size:15px; font-family:inherit;background:var(--blanco);color:var(--texto);width:100%} input:focus,select:focus{outline:2px solid var(--dorado);outline-offset:1px;border-color:var(--dorado)} input:disabled{background:#f2f4f7;color:var(--suave)} .pista{font-size:12.5px;color:var(--suave);margin-top:4px;display:block} .pie-nota{margin-top:14px} .consentimiento{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start; background:var(--marino-suave);padding:14px 16px;border-radius:var(--r);font-size:13.5px} .consentimiento input{margin-top:3px;width:auto} /* Trampa anti-bot: fuera de pantalla, no display:none, para que los robots que ignoran el CSS igual la llenen */ .trampa{position:absolute;left:-9999px} /* Botones */ .acciones{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap;align-items:center} .boton{background:var(--marino);color:#fff;border:1px solid var(--marino);padding:11px 22px; border-radius:var(--r);font-size:14.5px;font-weight:600;cursor:pointer;font-family:inherit; text-decoration:none;display:inline-block;text-align:center} .boton:hover{background:var(--marino2)} .boton.tenue{background:transparent;color:var(--marino)} .boton.tenue:hover{background:var(--marino-suave)} .boton.chico{padding:6px 12px;font-size:13px} .boton.verde{background:var(--verde);border-color:var(--verde)} .boton.rojo{background:var(--rojo);border-color:var(--rojo)} .boton.ancho-total{width:100%} .boton[disabled]{opacity:.45;cursor:not-allowed} /* Notas */ .nota{padding:13px 16px;border-radius:var(--r);font-size:13.5px;margin-bottom:18px} .nota.error{background:var(--rojo-f);border-left:4px solid var(--rojo);color:var(--rojo)} .nota.aviso{background:var(--ambar-f);border-left:4px solid var(--ambar);color:var(--ambar)} .nota.exito{background:var(--verde-f);border-left:4px solid var(--verde);color:var(--verde)} .nota.demo{background:var(--demo-f);border-left:4px solid var(--demo);color:var(--demo)} .nota ul{margin:6px 0 0;padding-left:18px} /* Ficha de datos */ .ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:18px} .ficha div{display:flex;flex-direction:column} .ficha span{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--suave)} .ficha strong{font-size:15px;color:var(--texto)} .ficha strong.grande{font-size:22px;color:var(--marino)} /* --- Ventana flotante de documentos del portal ----------------------- La usa el aviso de privacidad desde la casilla de consentimiento. Con position:fixed cubre la ventana entera aunque la página esté desplazada, y el cuerpo se bloquea para que el fondo no se mueva detrás mientras se lee. */ .ventana-fondo{ position:fixed;inset:0;z-index:80; background:rgba(15,22,30,.55); display:flex;align-items:center;justify-content:center;padding:20px; } .ventana-fondo[hidden]{display:none} .ventana{ background:var(--blanco);border-radius:var(--r); width:min(760px,100%);max-height:min(84vh,900px); display:flex;flex-direction:column;overflow:hidden; box-shadow:var(--sombra-3); } .ventana-barra{ display:flex;justify-content:space-between;align-items:center;gap:16px; padding:14px 18px;border-bottom:1px solid var(--borde);flex-shrink:0; } .ventana-titulo{color:var(--marino);font-size:15px} .ventana-cerrar{ border:1px solid var(--borde);background:var(--blanco);color:var(--suave); width:32px;height:32px;border-radius:var(--r);font-size:20px;line-height:1; cursor:pointer;flex-shrink:0; } .ventana-cerrar:hover{background:var(--marino-suave);color:var(--marino)} .ventana-cuerpo{padding:18px;overflow:auto;font-size:14px;line-height:1.65} .ventana-cuerpo h2{margin-top:0} .ventana-cuerpo .pie-nota{margin-bottom:0} body.con-ventana{overflow:hidden} @media (max-width:600px){ .ventana-fondo{padding:0} .ventana{width:100%;max-height:100vh;border-radius:0} } /* --- Paginación de las bandejas -------------------------------------- */ .paginas{ display:flex;align-items:center;gap:6px;flex-wrap:wrap; margin-top:16px;padding-top:14px;border-top:1px solid var(--borde); font-size:13px; } .paginas-cuenta{color:var(--suave);margin-right:auto;font-size:12.5px} .paginas a,.paginas .aqui{ display:inline-block;min-width:32px;text-align:center; padding:6px 10px;border:1px solid var(--borde);border-radius:var(--r); text-decoration:none;color:var(--marino2);background:var(--blanco); } .paginas a:hover{background:var(--marino-suave);border-color:var(--marino2)} .paginas .aqui{background:var(--marino);border-color:var(--marino);color:#fff;font-weight:600} .paginas-corte{color:var(--suave);padding:0 2px} /* Búsqueda por folio, sobre la tabla. */ .barra-busqueda{ display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px; } .barra-busqueda input[type=text]{max-width:320px} @media (max-width:680px){ .paginas-cuenta{width:100%;margin-bottom:6px} .barra-busqueda input[type=text]{max-width:100%} } /* Lista de lo que sigue, en el cierre del trámite. Con marcador propio y no con punto: son etapas, no una enumeración suelta, y conviene que se lean como una secuencia. */ .lista-pasos{list-style:none;margin:0 0 18px;padding:0} .lista-pasos li{position:relative;padding:0 0 10px 26px;font-size:14px;line-height:1.55} .lista-pasos li:last-child{padding-bottom:0} .lista-pasos li::before{ content:"";position:absolute;left:6px;top:9px; width:7px;height:7px;border-radius:50%;background:var(--dorado); } body.portal .lista-pasos li::before{background:var(--ap-linea)} /* Tablas */ .tabla{width:100%;border-collapse:collapse;font-size:13.5px} .tabla th{background:var(--marino);color:#fff;text-align:left;padding:9px 11px; font-size:11.5px;text-transform:uppercase;letter-spacing:.04em} .tabla td{padding:9px 11px;border-bottom:1px solid var(--borde);vertical-align:middle} .tabla tr:nth-child(even) td{background:#fafbfc} .tabla.compacta td,.tabla.compacta th{padding:6px 9px;font-size:13px} .tabla .der,.der{text-align:right} .tabla .centro,.centro{text-align:center} .tabla .angosta{max-width:320px;font-size:12.5px;color:var(--suave)} .tabla td.separa{background:var(--marino-suave)} .tabla tr.apagado td{opacity:.55} .tabla input,.tabla select{padding:5px 7px;font-size:13px} .desbordable{overflow-x:auto} /* Desglose de importes */ .desglose{width:100%;border-collapse:collapse;margin-top:14px} .desglose td{padding:10px 0;border-bottom:1px solid var(--borde);font-size:15px} .desglose td:last-child{text-align:right;font-variant-numeric:tabular-nums} .desglose tr.verde td{color:var(--verde)} .desglose tr.total td{border-bottom:none;border-top:2px solid var(--marino);font-size:19px; font-weight:700;color:var(--marino);padding-top:13px} .nota-concepto{display:block;font-size:12.5px;color:var(--suave);font-weight:400} /* Folio */ .folio-caja{background:var(--marino);color:#fff;padding:18px 22px;border-radius:var(--r); display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap} .folio-caja .etiqueta{font-size:11.5px;color:var(--dorado2);text-transform:uppercase;letter-spacing:.06em} .folio-caja .etiqueta-tenue{font-size:12px;color:#b9c6d6;margin-top:3px} .folio-caja .valor{font-size:27px;font-weight:700;font-family:ui-monospace,Menlo,Consolas,monospace} .contador{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums} .contador.vencido{color:var(--dorado2)} .contador.urgente{color:#ffb4b4} /* Métodos de pago */ .metodos{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px} .metodo{border:1px solid var(--borde);border-radius:var(--r);padding:17px;background:var(--blanco)} .metodo p{margin:0 0 10px;font-size:13px;color:var(--suave)} .dato{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--marino-suave); padding:7px 10px;border-radius:4px;font-size:14px;display:inline-block;margin:6px 0; word-break:break-all} .dato.bloque{display:block} .dato.grande{font-size:19px;font-weight:700;letter-spacing:.04em} .instruccion{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:16px 0} .instruccion .etiqueta-tenue{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--suave)} .tarjeta-pago{background:var(--marino-suave);padding:16px;border-radius:var(--r)} .codigo-barras{display:flex;align-items:flex-end;gap:2px;height:64px;grid-column:1/-1; background:#fff;padding:8px;border:1px solid var(--borde);border-radius:4px} .codigo-barras i{display:block;height:100%;background:var(--texto)} /* Etiquetas y estados */ .etiqueta{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600} .etiqueta.automatica,.etiqueta.verificada,.etiqueta.confirmacion{background:var(--verde-f);color:var(--verde)} .etiqueta.comprobante,.etiqueta.provisional,.etiqueta.recordatorio{background:var(--ambar-f);color:var(--ambar)} .etiqueta.generica{background:#eef0f3;color:var(--suave)} .etiqueta.rechazo{background:var(--rojo-f);color:var(--rojo)} .semaforo,.estado{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;font-weight:600} .semaforo.amarillo,.estado.pendiente_pago,.estado.emitida{background:var(--ambar-f);color:var(--ambar)} .semaforo.verde,.estado.pagada,.estado.liquidada,.estado.enviado{background:var(--verde-f);color:var(--verde)} .semaforo.rojo,.estado.rechazada,.estado.fallido{background:var(--rojo-f);color:var(--rojo)} .estado.cancelada,.estado.vencida,.estado.pendiente{background:#eef0f3;color:var(--suave)} .estado.simulado{background:var(--demo-f);color:var(--demo)} .si{color:var(--verde);font-weight:600} .no{color:var(--suave)} .vacio{color:var(--suave);font-size:13.5px;font-style:italic} .cuenta{display:inline-block;background:var(--dorado);color:#2a2000;border-radius:20px; padding:1px 10px;font-size:13px;margin-left:6px} /* Candidatos (homónimos) */ .candidato{border:1px solid var(--borde);border-radius:var(--r);padding:13px 16px;margin-bottom:10px; display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap} .candidato .clave{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px} .candidato .ref{font-size:12.5px;color:var(--suave)} /* Panel */ .tarjetas-cifra{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:20px} .cifra{background:var(--blanco);border:1px solid var(--borde);border-left:4px solid var(--marino); border-radius:var(--r);padding:16px 18px} .cifra span{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--suave)} .cifra strong{display:block;font-size:27px;color:var(--marino);margin-top:3px} .cifra.amarilla{border-left-color:var(--ambar)} .cifra.amarilla strong{color:var(--ambar)} .cifra.verde{border-left-color:var(--verde)} .cifra.verde strong{color:var(--verde)} .dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:20px} /* Feed en vivo */ .feed{list-style:none;margin:0;padding:0;max-height:340px;overflow-y:auto} .feed li{padding:9px 0;border-bottom:1px solid var(--borde);font-size:13.5px; display:flex;justify-content:space-between;gap:12px} .feed li.nuevo{animation:entra .5s ease} @keyframes entra{from{background:#fff8e6;transform:translateY(-4px)}to{background:transparent;transform:none}} .feed .hora{color:var(--suave);font-size:12.5px;font-variant-numeric:tabular-nums} .punto{font-size:11.5px;font-weight:400;color:var(--suave);margin-left:8px} .punto.vivo{color:var(--verde)} .punto.caido{color:var(--rojo)} /* Conciliación */ .conciliar{border:1px solid var(--borde);border-radius:var(--r);padding:16px;margin-bottom:14px; display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center} .conciliar .ficha{margin-bottom:6px} .acciones-semaforo{display:flex;flex-direction:column;gap:8px;min-width:230px} .acciones-semaforo .grupo{display:flex;gap:6px} .acciones-semaforo select{font-size:13px} .acciones-fila{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .acciones-fila form{margin:0} /* Correos */ .correo{border:1px solid var(--borde);border-radius:var(--r);padding:14px 16px;margin-bottom:12px} .correo-cab{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:10px} .correo-cuerpo{background:var(--marino-suave);padding:12px 14px;border-radius:4px;margin:0; font-size:12.5px;color:var(--texto)} /* Acuse */ .acuse{border:2px solid var(--marino)} .acuse-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:16px; border-bottom:2px solid var(--dorado);padding-bottom:14px;margin-bottom:18px;flex-wrap:wrap} .sello{border:3px solid var(--verde);color:var(--verde);font-weight:800;font-size:20px; padding:6px 18px;border-radius:6px;transform:rotate(-4deg);letter-spacing:.08em} /* Acceso */ body.acceso{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--marino)} .caja-acceso{background:#fff;border-radius:10px;padding:32px;width:100%;max-width:390px;margin:20px} .marca-acceso{margin-bottom:22px} .marca-acceso strong{display:block;font-size:18px;color:var(--marino)} .marca-acceso span{font-size:12.5px;color:var(--suave)} .caja-acceso .campo{margin-bottom:14px} .credenciales{background:var(--ambar-f);padding:9px 12px;border-radius:5px;margin-top:16px} @media (max-width:820px){ .dos-columnas{grid-template-columns:1fr} .conciliar{grid-template-columns:1fr} } @media (max-width:680px){ .rejilla{grid-template-columns:1fr} .folio-caja{flex-direction:column;align-items:flex-start} .folio-caja .der{text-align:left} .tarjeta{padding:18px 16px} body{font-size:15px} } @media print{ .cinta-demo{-webkit-print-color-adjust:exact;print-color-adjust:exact} .acciones,.pestanas,.nav,.panel-lateral,.no-imprimir{display:none} body{background:#fff} } /* --- Configuración de métodos de pago (panel) ----------------------- */ .metodo-config{border:1px solid var(--borde);border-radius:var(--r);padding:16px;margin-bottom:14px} .metodo-config.apagado{opacity:.6;background:#fafbfc} .metodo-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:16px; flex-wrap:wrap;margin-bottom:12px} .metodo-cab h3{margin:0 0 5px} .metodo-cab h3 code{font-weight:400;font-size:12px} .metodo-cab form{margin:0} .fila-config{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end; background:var(--marino-suave);padding:14px;border-radius:var(--r)} .fila-config .campo{margin:0} .fila-config .boton-fila{align-self:end} .en-linea{display:inline;margin:0} .comprobante-caja{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px} @media (max-width:680px){ .fila-config{grid-template-columns:1fr} } /* --- Ventana flotante del comprobante ------------------------------- */ .visor{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:24px} .visor[hidden]{display:none} .visor-fondo{position:absolute;inset:0;background:rgba(13,35,64,.62)} .visor-caja{position:relative;background:var(--blanco);border-radius:var(--r); width:min(960px,100%);max-height:90vh;display:flex;flex-direction:column; box-shadow:0 18px 50px rgba(0,0,0,.35)} .visor-cab{display:flex;justify-content:space-between;align-items:center;gap:16px; padding:14px 18px;border-bottom:1px solid var(--borde);flex-wrap:wrap} .visor-cab strong{color:var(--marino);display:block} .visor-acciones{display:flex;gap:8px;align-items:center} .visor-cuerpo{padding:16px;overflow:auto;background:#f2f4f7;display:flex; align-items:center;justify-content:center;min-height:320px} .visor-cuerpo img{max-width:100%;max-height:70vh;border-radius:4px; box-shadow:0 2px 10px rgba(0,0,0,.18)} .visor-cuerpo iframe{width:100%;height:70vh;border:0;background:#fff;border-radius:4px} .visor-cuerpo .cargando{color:var(--suave);font-size:13.5px} body.sin-scroll{overflow:hidden} /* --- Dato reservado ------------------------------------------------- Se usa cuando el predio se localizó por nombre: quien sólo conoce un nombre no obtiene la ficha completa de un inmueble ajeno. OJO: esto es señalización, no protección. El valor que llega al navegador YA viene enmascarado desde el servidor; si sólo se difuminara con CSS, el dato real seguiría en el HTML y se leería con el inspector en dos clics. */ .velado{ filter:blur(5px); user-select:none; -webkit-user-select:none; color:var(--suave); letter-spacing:.04em; cursor:not-allowed; } .velado::selection{background:transparent} @media print{ .velado{filter:blur(6px)} } /* --- Módulos (panel) ------------------------------------------------ */ .grupo-modulos{margin:22px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--borde); font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--suave)} .modulo-fila{display:flex;justify-content:space-between;align-items:center;gap:18px; border:1px solid var(--borde);border-radius:var(--r);padding:14px 16px; margin-bottom:10px;flex-wrap:wrap} .modulo-fila.apagado{background:#fafbfc;opacity:.75} .modulo-fila strong{color:var(--marino)} .modulo-fila code{margin-left:6px;font-size:11.5px} .modulo-accion{display:flex;align-items:center;gap:10px} .modulo-accion form{margin:0} .lista-estado{margin:0;padding-left:18px;font-size:13.5px} .lista-estado li{margin-bottom:5px} /* Identificador contable de la orden: abre su huella y el bloqueo. */ .id-orden{display:inline-block;font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px;background:var(--marino-suave);color:var(--marino); padding:2px 8px;border-radius:4px;text-decoration:none;font-weight:600} .id-orden:hover{background:var(--dorado);color:#2a2000} /* --- Panel a ancho completo ----------------------------------------- Las pantallas con muchas columnas ahogan la información en 1080px. */ /* --- Panel: menú a la izquierda -------------------------------------- Catorce entradas no caben en una tira horizontal: se partían en dos renglones y empujaban el contenido hacia abajo en todas las pantallas. En columna caben sin doblarse y el contenido se queda con el ancho que necesitan las tablas de órdenes y de conciliación. */ /* flex:1 y no min-height:100vh: el marco es hijo del body, que ya mide la pantalla entera. Con 100vh propio, la cinta de demostración lo empujaría y aparecería una barra de desplazamiento de más. */ .panel-marco{display:flex;align-items:stretch;flex:1 0 auto;min-width:0} .panel-contenido > main{flex:1 0 auto} .panel-lateral{ width:214px;flex-shrink:0; background:var(--marino);color:#dce6f2; display:flex;flex-direction:column; position:sticky;top:0;align-self:flex-start;max-height:100vh;overflow:auto; } .panel-contenido{flex:1;min-width:0;display:flex;flex-direction:column} .lateral-marca{padding:16px 18px 14px;border-bottom:1px solid rgba(255,255,255,.12)} .lateral-marca strong{display:block;font-size:15px;color:#fff;line-height:1.2} .lateral-marca span{display:block;font-size:11.5px;color:var(--dorado2);margin-top:3px; overflow-wrap:anywhere} .lateral-menu{display:flex;flex-direction:column;padding:10px 0;flex:1} .lateral-grupo{ font-size:10.5px;text-transform:uppercase;letter-spacing:.07em; color:#8fa3ba;padding:12px 18px 5px; } .lateral-menu a{ display:block;padding:8px 18px;color:#dce6f2;text-decoration:none;font-size:13.5px; border-left:3px solid transparent; } .lateral-menu a:hover{background:rgba(255,255,255,.07);color:#fff} /* La pantalla abierta se marca con la línea dorada, no sólo con el fondo: sobre un menú oscuro el cambio de fondo solo se distingue mal. */ .lateral-menu a.aqui{ background:rgba(255,255,255,.11);color:#fff;font-weight:600; border-left-color:var(--dorado); } .lateral-pie{ padding:12px 18px 16px;border-top:1px solid rgba(255,255,255,.12); display:flex;flex-direction:column;gap:6px; } .lateral-pie a{color:#8fa3ba;text-decoration:none;font-size:12.5px} .lateral-pie a:hover{color:#fff} /* Con el menú fuera, el contenido usa la pantalla entera. */ body.panel .envoltura{max-width:100%;padding:0 24px} body.panel.ancho .envoltura{max-width:100%} @media (max-width:820px){ /* En pantalla estrecha el menú pasa arriba y se desplaza a lo ancho. El panel no está pensado para el teléfono, pero en una tablet tiene que seguir siendo usable. */ .panel-marco{flex-direction:column;min-height:0} .panel-lateral{ width:100%;max-height:none;position:static; flex-direction:row;align-items:center;gap:10px;overflow-x:auto; } .lateral-marca{border-bottom:0;border-right:1px solid rgba(255,255,255,.12); flex-shrink:0;padding:10px 14px} .lateral-marca span{display:none} .lateral-menu{flex-direction:row;padding:0;flex-wrap:nowrap} .lateral-grupo{display:none} .lateral-menu a{white-space:nowrap;border-left:0;border-bottom:3px solid transparent; padding:12px 12px} .lateral-menu a.aqui{border-left:0;border-bottom-color:var(--dorado)} .lateral-pie{flex-direction:row;border-top:0;padding:0 14px;flex-shrink:0} body.panel .envoltura{padding:0 16px} } .tabla-ordenes{font-size:13px} .tabla-ordenes td{padding:8px 9px} .tabla-ordenes .col-hora{white-space:nowrap;font-variant-numeric:tabular-nums} .tabla-ordenes .pista{margin-top:1px;font-size:11.5px} .tabla-ordenes .acciones-fila{white-space:nowrap} .tabla-ordenes input[type=checkbox]{width:auto} /* Barra de selección múltiple */ .barra-lote{display:flex;align-items:center;gap:14px;flex-wrap:wrap; background:var(--marino-suave);padding:11px 14px;border-radius:var(--r); margin-bottom:14px} .barra-lote .pista{margin:0} .marca-todo{display:flex;align-items:center;gap:7px;font-size:13px; font-weight:600;color:var(--marino);margin:0} .marca-todo input{width:auto;margin:0} /* Tarjeta de resumen: repite lo que el contribuyente ya vio, para que no tenga que retroceder a comprobarlo antes de dar sus datos. */ .resumen{background:linear-gradient(180deg,#fff,#f8fafc);border-left:4px solid var(--dorado)} /* ===================================================================== LO QUE ENTRA EN VIVO ===================================================================== */ /* Resaltado breve de lo recién llegado. Sin desplazamiento: mover el renglón al aparecer es justo lo que se está evitando. */ .recien{animation:aparece 4s ease-out} @keyframes aparece{ 0%,15%{background:#fff3d1} 100%{background:transparent} } tr.recien td{animation:aparece 4s ease-out} /* El anclaje de scroll lo hace panel.js midiendo antes y después. Se apaga el del navegador para que no corrija dos veces sobre lo mismo. */ .desbordable,#pila-conciliar,.feed{overflow-anchor:none} .sin-datos td{text-align:center;padding:22px 11px} /* ===================================================================== PANTALLAS CHICAS --------------------------------------------------------------------- El portal es lo que importa aquí: el contribuyente llega desde su teléfono. El panel sólo tiene que verse correcto — el operador trabaja desde un equipo controlado. ===================================================================== */ /* --- Área de toque --------------------------------------------------- En una pantalla táctil el dedo no apunta con la precisión del ratón. Se aplica sólo donde el puntero es grueso, para no engordar los botones del panel en escritorio. */ @media (pointer:coarse){ .boton{min-height:44px;display:inline-flex;align-items:center;justify-content:center} .boton.chico{min-height:38px} input[type=text],input[type=email],input[type=tel],input[type=password], input[type=date],select,textarea{min-height:44px;font-size:16px} input[type=checkbox],input[type=radio]{width:20px;height:20px} .pestana{min-height:40px;display:inline-flex;align-items:center} } /* 16px en los campos evita que el navegador del teléfono haga acercamiento automático al enfocarlos, que descoloca toda la página. */ /* --- Tablet ---------------------------------------------------------- */ @media (max-width:900px){ .envoltura{padding:0 16px} /* El menú del panel tiene diez enlaces: en vez de romperse en varios renglones, se arrastra de lado. */ body.panel.ancho .envoltura{max-width:100%} } /* --- Teléfono -------------------------------------------------------- */ @media (max-width:680px){ h1{font-size:22px} main{padding:20px 0 44px} header.principal .marca{font-size:17px} .barra{gap:10px} .nav a{margin-left:0;margin-right:14px} /* Métodos de pago, uno debajo de otro. La CLABE es lo que más se desborda: se deja partir y se baja de tamaño. */ .metodos{grid-template-columns:1fr} .instruccion{grid-template-columns:1fr} .dato{font-size:13px;width:100%} .dato.grande{font-size:16px;letter-spacing:.02em} .tres{grid-template-columns:1fr} .ficha{grid-template-columns:1fr 1fr;gap:11px} .ficha strong{font-size:14px} .ficha strong.grande{font-size:19px} .folio-caja .valor{font-size:21px} .contador{font-size:19px} /* El desglose de importes se queda como tabla de dos columnas: es lo que mejor se lee en un teléfono. Sólo se aprieta un poco. */ .desglose td{padding:9px 0;font-size:14px} .desglose tr.total td{font-size:17px} .candidato{flex-direction:column;align-items:flex-start;gap:6px} .acuse-cab{flex-direction:column} .sello{transform:none;align-self:flex-start} /* Los botones de acción a lo ancho: en un teléfono, un botón angosto en medio de la pantalla se falla. */ .acciones{flex-direction:column;align-items:stretch} .acciones .boton{width:100%} /* La ventana del comprobante ocupa la pantalla completa: en 5 pulgadas un recuadro centrado con márgenes no deja ver nada. */ .visor{padding:0} .visor-caja{width:100%;max-height:100%;height:100%;border-radius:0} .visor-cuerpo img{max-height:none} .visor-cuerpo iframe{height:100%;min-height:60vh} .visor-cuerpo{min-height:0;flex:1} } /* --- Tablas del panel en pantalla chica ------------------------------ Cortesía, no optimización. La tabla sigue siendo tabla y se arrastra de lado; la casilla, el id y el folio quedan clavados a la izquierda para saber siempre de qué orden es el renglón que se está leyendo. El estado NO se puede clavar sin cambiarlo de lugar: está en la novena columna, y fijarlo al borde izquierdo lo encimaría sobre el folio. Se queda en el arrastre. */ @media (max-width:900px){ .desbordable{overflow-x:auto;-webkit-overflow-scrolling:touch; border:1px solid var(--borde);border-radius:var(--r)} .tabla-ordenes{min-width:1180px} .tabla-ordenes th:nth-child(1),.tabla-ordenes td:nth-child(1){ position:sticky;left:0;z-index:2;width:38px;min-width:38px} .tabla-ordenes th:nth-child(2),.tabla-ordenes td:nth-child(2){ position:sticky;left:38px;z-index:2;width:62px;min-width:62px} .tabla-ordenes th:nth-child(3),.tabla-ordenes td:nth-child(3){ position:sticky;left:100px;z-index:2;width:130px;min-width:130px; box-shadow:2px 0 0 var(--borde)} /* Las celdas fijas necesitan fondo propio: sin él, lo que pasa por debajo al arrastrar se transparenta y queda ilegible. */ .tabla-ordenes td:nth-child(1),.tabla-ordenes td:nth-child(2), .tabla-ordenes td:nth-child(3){background:var(--blanco)} .tabla-ordenes tr:nth-child(even) td:nth-child(1), .tabla-ordenes tr:nth-child(even) td:nth-child(2), .tabla-ordenes tr:nth-child(even) td:nth-child(3){background:#fafbfc} .tabla-ordenes th:nth-child(1),.tabla-ordenes th:nth-child(2), .tabla-ordenes th:nth-child(3){background:var(--marino)} .tabla-ordenes tr.recien td:nth-child(1), .tabla-ordenes tr.recien td:nth-child(2), .tabla-ordenes tr.recien td:nth-child(3){background:#fff3d1} } @media (max-width:680px){ .barra-lote{gap:9px} .barra-lote .pista{font-size:11.5px} .acciones-semaforo{min-width:0} .modulo-fila{flex-direction:column;align-items:flex-start} .metodo-cab{flex-direction:column} } /* ===================================================================== EL PORTAL --------------------------------------------------------------------- Obedece a las variables --ap-* que arma apariencia.css.php desde la pantalla de Apariencia. Aquí no se define ninguna --ap-*: esta hoja carga DESPUÉS, así que cualquier valor que pusiera ganaría por orden de cascada y anularía lo que el operador eligiera. ===================================================================== */ body.portal{ background:var(--ap-cuerpo); color:var(--ap-texto); font-family:var(--ap-cuerpo-fuente); } body.portal main h1,body.portal main h2,body.portal main h3{ font-family:var(--ap-titulos);color:var(--ap-texto);letter-spacing:-.01em; } body.portal main h1{font-size:28px;line-height:1.25} body.portal main h2{font-size:20px;line-height:1.3} /* El acento es de los botones y los enlaces DEL CUERPO. Cada barra —cabecera, sub-barra y pie— manda sobre todo lo que lleva dentro, sea texto o sea enlace. Antes esta regla no estaba acotada a main, así que alcanzaba al título de la cabecera y a los enlaces de las barras, y les imponía el acento por encima del color que el operador había elegido para esa sección. */ /* Un botón se pinta igual esté escrito como o como