y hay que reponerle a mano el hover que traia de .ficha--liga. La jerarquia se ve: el principal ocupa la tarjeta entera y es lo que se toca; el hijo es un renglon mas chico, en su propia franja, con una flecha que avanza. "Numeros anteriores" ya no pesa lo mismo que la revista. ========================================================================== */ /* Cada tarjeta mide lo que mide su contenido. Estiradas a la misma altura, la que no tiene hijos arrastraba un hueco blanco del tamanio exacto de la franja de la otra, y ese hueco se lee como algo que falta. */ #enlaces .rejilla { align-items: start; } .enlace-externo { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; transition: transform .22s cubic-bezier(.22, .61, .36, 1), box-shadow .22s ease, border-color .22s ease; } /* EL GESTO DE ESTA SECCION: una regla verde que cruza la tarjeta por arriba. Es la misma linea del .filo de los titulos, aqui en movimiento. */ .enlace-externo::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--piv-verde); transform: scaleX(0); transform-origin: left center; transition: transform .3s cubic-bezier(.22, .61, .36, 1); } .enlace-externo:hover::before, .enlace-externo:focus-within::before { transform: scaleX(1); } .enlace-externo:hover, .enlace-externo:focus-within { transform: translateY(-5px); box-shadow: var(--sombra-alta); border-color: var(--piv-verde-claro); } /* El principal ocupa la tarjeta: se toca en cualquier parte del cuerpo, igual que cuando la tarjeta entera era el enlace. */ .enlace-externo__principal { display: block; flex: 1 1 auto; padding: 26px 26px 22px; color: inherit; text-decoration: none; } .enlace-externo__principal h3 { transition: color .18s ease; } .enlace-externo:hover .enlace-externo__principal h3, .enlace-externo__principal:focus-visible h3 { color: var(--piv-verde-hondo); } .enlace-externo__principal:focus-visible { outline: 2px solid var(--piv-verde); outline-offset: -3px; } .enlace-externo__hijos { display: flex; flex-direction: column; padding: 2px 26px 8px; background: var(--fondo-alt); border-top: 1px solid var(--regla); } .enlace-externo__hijo { position: relative; display: block; padding: 10px 0 10px 22px; font-size: .93rem; line-height: 1.35; color: var(--piv-verde-hondo); text-decoration: none; } .enlace-externo__hijo + .enlace-externo__hijo { border-top: 1px solid var(--regla-tenue); } .enlace-externo__hijo::before { content: "\2192"; position: absolute; left: 0; top: 10px; color: var(--piv-verde); transition: transform .18s ease; } .enlace-externo__hijo:hover, .enlace-externo__hijo:focus-visible { color: var(--piv-verde); text-decoration: underline; } .enlace-externo__hijo:hover::before, .enlace-externo__hijo:focus-visible::before { transform: translateX(4px); } /* ============================= el boton al final de "como participar" ======= Centrado y separado de los pasos por aire, no por una linea: la linea diria "aqui termina una cosa y empieza otra", y esto es la continuacion de lo que se acaba de leer -- el paso que sigue despues de los cuatro pasos. ========================================================================== */ .participar__accion { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 42px; } /* LA PASTILLA DE LAS FECHAS. Va debajo del boton, no dentro: la frase completa -- "del 23 de agosto al 22 de septiembre de 2026" -- mide mas que el boton, y metida en la etiqueta lo partiria en dos renglones hasta dejar de parecer un boton. EL ROTULO EN VERSALITA Y LA FECHA EN NUMEROS DE ANCHO FIJO, igual que en el calendario y en la tabla de cuotas: son el mismo tipo de dato y se leen igual en las tres. */ .fechas-pastilla { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; margin: 0; padding: 9px 18px; border-radius: 999px; background: var(--piv-verde-lavado); } .fechas-pastilla__rotulo { font-family: var(--f-titulo); font-weight: 600; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--piv-verde-hondo); } .fechas-pastilla__dato { font-weight: 500; font-size: .97rem; font-variant-numeric: tabular-nums; } /* Con el registro cerrado la pastilla sigue diciendo cuando fue -- el dato explica el boton apagado --, pero pierde el verde: en el color de la marca se leeria como una invitacion que ya no existe. Mismo criterio que .btn--inerte. */ .fechas-pastilla--inerte { background: var(--fondo-alt); } .fechas-pastilla--inerte .fechas-pastilla__rotulo { color: var(--tenue); } .fechas-pastilla--inerte .fechas-pastilla__dato { color: var(--tenue); } @media (max-width: 560px) { .participar__accion { margin-top: 32px; } .participar__accion .btn { width: 100%; justify-content: center; } .fechas-pastilla { padding: 10px 16px; } } /* ========================================== areas, categorias y modalidades == EL GESTO: la etiqueta se rellena. Estas tarjetas son etiqueta y nombre, nada mas -- no hay parrafo que enfatizar --, asi que lo que responde es la etiqueta, que es lo unico que tienen de propio. Suben cuatro pixeles y no seis: son hasta ocho por fila y con mas movimiento la fila entera parece temblar. ========================================================================== */ .ficha--compacta { transition: transform .2s cubic-bezier(.22, .61, .36, 1), box-shadow .2s ease, border-color .2s ease, background-color .2s ease; } .ficha--compacta:hover, .ficha--compacta:focus-within { transform: translateY(-4px); box-shadow: var(--sombra-alta); border-color: var(--piv-verde-claro); } .ficha--compacta .etiqueta { transition: background-color .2s ease, color .2s ease; } .ficha--compacta:hover .etiqueta, .ficha--compacta:focus-within .etiqueta { background: var(--piv-verde); color: #fff; } /* Las areas ademas se llenan del verde lavado. Van sobre una seccion verde y ahi una tarjeta blanca que solo sube se distingue menos; el relleno le da el contraste que las categorias consiguen con la sombra. */ #areas .ficha--compacta:hover, #areas .ficha--compacta:focus-within { background: var(--piv-verde-lavado); } /* Los desplegables de modalidad: una barra verde que crece por el costado. Se queda encendida mientras el desplegable esta abierto -- ahi ya no es un efecto, es la senial de cual se esta leyendo. */ .desplegable { position: relative; } .desplegable::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--piv-verde); transform: scaleY(0); transform-origin: top center; transition: transform .26s cubic-bezier(.22, .61, .36, 1); } .desplegable:hover::before, .desplegable:focus-within::before, .desplegable[open]::before { transform: scaleY(1); } .desplegable > summary::after { transition: transform .2s cubic-bezier(.22, .61, .36, 1); } .desplegable:hover > summary::after { transform: scale(1.22); } /* ==================================================== descargas ============ EL GESTO: la regla verde de la ficha se estira de lado a lado, como si el documento se subrayara al acercarse. La tarjeta ya sube tres pixeles por ser .ficha--liga; no hace falta agregarle mas movimiento, solo esto que es suyo. ========================================================================== */ .descarga::before { transition: width .3s cubic-bezier(.22, .61, .36, 1); } .descarga:hover::before, .descarga:focus-visible::before { width: 100%; } /* ==================================================== contactos ============ EL GESTO: la raya de abajo se pinta de verde de izquierda a derecha y el nombre toma color. No suben ni se convierten en tarjeta: son un directorio, siete renglones seguidos, y siete cosas levantandose es un temblor. ========================================================================== */ .contacto { position: relative; } .contacto::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--piv-verde); transform: scaleX(0); transform-origin: left center; transition: transform .32s cubic-bezier(.22, .61, .36, 1); } .contacto:hover::after, .contacto:focus-within::after { transform: scaleX(1); } .contacto__nombre { transition: color .2s ease; } .contacto:hover .contacto__nombre, .contacto:focus-within .contacto__nombre { color: var(--piv-verde-hondo); } /* ------------------------------------------------------- menos movimiento -- */ /* Se apaga el MOVIMIENTO -- lo que desplaza, escala o crece --, nunca el color: el color es lo que dice donde esta parado el cursor, y quitarlo dejaria a esa persona sin saberlo. */ @media (prefers-reduced-motion: reduce) { .enlace-externo, .enlace-externo::before, .enlace-externo__hijo::before, .ficha--compacta, .desplegable::before, .descarga::before, .contacto::after, .cuotas__tabla tbody th.cuotas__quien::before, .desplegable > summary::after { transition: background-color .01ms, color .01ms, border-color .01ms; } .enlace-externo:hover, .enlace-externo:focus-within, .ficha--compacta:hover, .ficha--compacta:focus-within { transform: none; } .enlace-externo__hijo:hover::before, .enlace-externo__hijo:focus-visible::before { transform: none; } .desplegable:hover > summary::after { transform: none; } /* Las barras y las reglas que crecen se quedan puestas, sin recorrido: se ven igual de encendidas, solo que sin animarse. */ .enlace-externo:hover::before, .enlace-externo:focus-within::before { transform: scaleX(1); } .desplegable:hover::before, .desplegable:focus-within::before, .desplegable[open]::before { transform: scaleY(1); } .contacto:hover::after, .contacto:focus-within::after { transform: scaleX(1); } .cuotas__tabla tbody tr:hover th.cuotas__quien::before { transform: translateY(-50%) scaleY(1); } } /* ============================================================================= EL PANEL -- agregado 2026-08-23 Va al FINAL y solo agrega: ni una regla de arriba se toca. El panel usa la misma hoja que el sitio publico a proposito -- los mismos tokens, los mismos botones, los mismos avisos --, porque es la trastienda del mismo congreso y no otro sistema. Lo unico propio es el armazon de dos columnas. Todo lo de aqui cuelga de .panel o de .panel-body, asi que nada de esto puede alcanzar a una pagina publica. ============================================================================= */ .panel-body { background: var(--fondo-alt); } .panel { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; } /* ------------------------------------------------------------- lateral --- */ .panel__lateral { /* De arriba hacia abajo se HUNDE, no se aclara: arriba --panel-alto, en el cuerpo --panel-fondo y al final --panel-hondo. Tres paradas y no dos porque con dos, al 42%, el 58% de abajo quedaba plano y el cambio se amontonaba arriba: en movil -- donde el lateral mide 340 px y no 100vh -- eso se veia como una franja cortada, no como profundidad. Repartido hasta el 100% el degradado no tiene filo en ninguna de las dos formas. El extremo CLARO es el de arriba y no cambia, asi que el peor contraste del lateral sigue siendo el mismo que ya estaba medido. */ background: linear-gradient(180deg, var(--panel-alto) 0%, var(--panel-fondo) 46%, var(--panel-hondo) 100%); color: var(--panel-texto); display: flex; flex-direction: column; gap: 8px; padding: 20px 0 24px; position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; } /* LA MARCA: EL LOGO SOLO, CENTRADO (2026-08-24) Iba con el logo a la izquierda y la palabra "PANEL" al lado. Carlos: "en el sistema admin, quitale la palabra PANEL y deja centrado el logo". AL QUITAR EL TEXTO, EL AREA DE CLIC SE ENCOGIA A LA IMAGEN -- unos 85 x 28 px perdidos arriba a la izquierda, que con el dedo es una diana. Por eso el enlace se declara `flex` de ancho completo con `min-height`: la franja entera del logo lleva al tablero, no solo los pixeles pintados. Y EL RELLENO SE REPARTIO. Eran 4 px arriba y 18 abajo, un desnivel pensado para que el texto no se pegara al borde; sin texto, el logo quedaba descentrado en su franja. Ahora 14 y 16, que a ojo es el mismo aire arriba que abajo contando el descuadre optico del logotipo. */ .panel__marca { display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 14px 20px 16px; text-decoration: none; border-bottom: 1px solid var(--panel-linea); } .panel__marca img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .92; } .panel__menu { flex: 1 1 auto; padding: 10px 0; } .panel__grupo + .panel__grupo { margin-top: 22px; } .panel__grupo h3 { font-family: var(--f-titulo); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--panel-apagado); margin: 0 0 6px; padding: 0 20px; } .panel__grupo ul { list-style: none; margin: 0; padding: 0; } /* LA FORMA DE PASTILLA. El fondo del renglon activo y el del hover no llegan hasta el filo del lateral: se quedan 12 px antes y rematan redondeados. Un bloque que corre de borde a borde se lee como un corte del lateral; una pastilla se lee como un renglon senialado. El remate redondeado es SOLO del lado derecho. Del izquierdo tiene que quedar a escuadra porque ahi va el filo de 3 px, que es la senial que sigue viendose cuando el color no se distingue. El margen y el radio van en el renglon NORMAL, no en :hover ni en .activo: si solo los llevara el resaltado, la caja cambiaria de tamanio al pasar el raton y el fondo se veria crecer en vez de aparecer. */ .panel__menu a { display: block; padding: 8px 20px; margin-right: 12px; border-radius: 0 999px 999px 0; color: var(--panel-texto); font-size: .97rem; text-decoration: none; border-left: 3px solid transparent; transition: background .12s, color .12s, border-color .12s; } /* El hover tinta de VERDE, no de blanco. Un velo blanco sobre un fondo de color lo lava y lo vuelve grisaceo; el mismo velo en el color del texto lo aclara sin sacarlo de su familia. */ .panel__menu a:hover { background: rgba(var(--panel-texto-rgb), .09); color: #FFFFFF; border-left-color: rgba(var(--panel-realce-rgb), .45); } /* La pantalla en la que se esta. Sin esto, en un panel de veinte pantallas nadie sabe donde esta parado. */ .panel__menu a.activo { /* Se distingue por TRES seniales a la vez -- fondo, filo y peso -- y no por una sola: quien no distingue bien los verdes sigue viendo el filo y la negrita. */ background: rgba(var(--panel-realce-rgb), .16); border-left-color: var(--panel-realce); color: #FFFFFF; font-weight: 600; } .panel__menuVacio { padding: 0 20px; font-size: .92rem; color: var(--panel-apagado); } .panel__lateralPie { padding: 14px 20px 0; border-top: 1px solid var(--panel-linea); font-size: .9rem; } .panel__lateralPie a { color: var(--panel-texto); } .panel__lateralPie a:hover { color: #FFFFFF; } /* -------------------------------------------------------------- cabeza --- */ .panel__lado { display: flex; flex-direction: column; min-width: 0; } .panel__cabeza { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--fondo); border-bottom: 1px solid var(--regla); padding: 14px 30px; position: sticky; top: 0; z-index: 5; } .panel__edicion { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .panel__edicionRotulo { font-family: var(--f-titulo); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); } .panel__edicionNombre { font-weight: 600; margin-right: 10px; } .panel__usuario { display: flex; align-items: center; gap: 14px; margin-left: auto; } .panel__quien { display: flex; flex-direction: column; text-align: right; line-height: 1.25; } .panel__nombre { font-weight: 600; font-size: .96rem; } .panel__rol { font-size: .82rem; color: var(--tenue); } /* -------------------------------------------------------------- cuerpo --- */ .panel__cuerpo { padding: 28px 30px 60px; min-width: 0; } .panel__titulo { margin-bottom: 4px; } .panel__titulo h1 { font-size: 2rem; margin-bottom: .1em; } .panel__intro { color: var(--tinta-suave); max-width: 74ch; margin-bottom: 24px; } .tarjeta { background: var(--fondo); border: 1px solid var(--regla); border-radius: var(--radio); box-shadow: var(--sombra); padding: 24px 26px; margin-bottom: 22px; } .tarjeta > h2 { font-size: 1.35rem; margin-bottom: .2em; } .tarjeta > h2 + p { color: var(--tinta-suave); font-size: .96rem; } .tarjeta__pie { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--regla-tenue); } /* Dos columnas de campos en pantalla ancha, una sola en angosta. */ .campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .forma__campo--ancho { grid-column: 1 / -1; } .forma__campo input[type="date"].entrada { max-width: 260px; } .forma__campo input[type="number"].entrada { max-width: 180px; } .campo__dato { font-weight: 600; } /* ------------------------------------------------------------- rejilla --- */ /* Los GridView del panel. Se estiliza el table que pinta el control, sin plantillas raras: menos HTML que mantener. */ .tabla { width: 100%; border-collapse: collapse; font-size: .95rem; } .tabla th, .tabla td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--regla-tenue); vertical-align: middle; } .tabla th { font-family: var(--f-titulo); font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); border-bottom: 1px solid var(--regla); white-space: nowrap; } .tabla tr:last-child td { border-bottom: 0; } .tabla tbody tr:hover { background: var(--fondo-alt); } .tabla__acciones { white-space: nowrap; text-align: right; } /* Aqui habia `.tabla__acciones .btn + .btn { margin-left: 6px }`, de cuando los botones de la fila iban uno al lado del otro. Al apilarlos, ese margen se lo quedaban el segundo y el tercero, y el primero salia SEIS PIXELES a la izquierda de los demas: la columna se veia torcida sin motivo aparente. Ahora la separacion la pone el `gap` del contenedor, que no distingue entre el primer hijo y los demas. */ .tabla__inactivo td { opacity: .55; } .tabla__num { text-align: right; font-family: var(--f-dato); font-variant-numeric: tabular-nums; } .tabla-vacia { color: var(--tenue); font-size: .95rem; padding: 14px 0; } /* ------------------------------------------------------- vista previa ---- */ /* La maqueta del hero: imita el bloque de la portada para que el administrador vea como va a quedar el banner ANTES de guardarlo. Las proporciones son las del hero de verdad, no un cuadro cualquiera. */ .maqueta { position: relative; aspect-ratio: 2 / 1; width: 100%; max-width: 720px; border-radius: var(--radio); overflow: hidden; background: var(--piv-negro); border: 1px solid var(--regla); } .maqueta__img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; } .maqueta__velo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, rgba(20,24,15,.94) 0%, rgba(20,24,15,.66) 58%, rgba(20,24,15,.36) 100%); } .maqueta__caja { position: relative; z-index: 1; padding: 7% 8%; max-width: 78%; } .maqueta__eyebrow { font-family: var(--f-titulo); font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--piv-verde-claro); margin-bottom: .5em; } .maqueta__titulo { font-family: var(--f-titulo); font-size: clamp(1.1rem, 3.2vw, 2rem); font-weight: 700; line-height: 1.05; color: #fff; margin: 0 0 .35em; } .maqueta__lema { color: #D6DDD2; font-size: clamp(.72rem, 1.5vw, .98rem); margin: 0 0 1em; } .maqueta__btn { display: inline-block; background: var(--piv-verde); color: #fff; font-family: var(--f-titulo); font-weight: 600; font-size: clamp(.68rem, 1.3vw, .9rem); padding: .5em 1.2em; border-radius: var(--radio-sm); } .maqueta__vacia { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: #B9C0B4; font-size: .92rem; background: rgba(20,24,15,.55); } .previa { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; align-items: start; } .previa__medidas { font-family: var(--f-dato); font-size: .88rem; color: var(--tinta-suave); } /* --------------------------------------------------------------- movil --- */ @media (max-width: 900px) { .panel { grid-template-columns: 1fr; } .panel__lateral { position: static; max-height: none; flex-direction: column; } /* LA REJILLA DE DOS COLUMNAS ES AHORA EL PLAN B, no el plan A. Era lo unico que habia en angosto, y con 24 renglones ocupaba la pantalla completa: habia que desplazarse por todo el menu antes de ver un dato. Desde el 2026-08-24 el lateral es un cajon que se abre con el boton de la cabecera, y el menu va apilado en una sola columna dentro del cajon. Esto se queda para quien no tenga JavaScript: ahi no hay boton ni cajon, el lateral sigue en el flujo, y una rejilla de dos columnas es mejor que una lista de 24 renglones. Ver el bloque del cajon al final del archivo. */ html:not(.js) .panel__menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 4px 18px; } .panel__cabeza { padding: 12px 18px; } .panel__cuerpo { padding: 20px 18px 48px; } .panel__usuario { margin-left: 0; } } /* La rejilla no cabe en un telefono: se desliza dentro de su caja en vez de estirar la pagina entera. */ @media (max-width: 700px) { .desbordable .tabla { min-width: 620px; } } /* Una pantalla que esta en Config.Menu pero cuyo .aspx todavia no existe. Se pinta como texto, no como enlace: un vinculo que contesta 404 se ve igual que un sistema roto. */ /* AQUI ESTABA EL UNICO FALLO DE CONTRASTE DEL LATERAL, y lo ponia el `opacity`, no el color. --panel-apagado da 5.81:1, que pasa AA de sobra. Pero llevaba `opacity: .62` encima, y la opacidad no apaga el texto: lo MEZCLA con el fondo. El color que acababa pintado era #567866 y su contraste real 3.14:1 -- reprobado. Y el `` de "(pendiente)" llevaba ademas `opacity: .8`, que NO reemplaza a la del padre sino que se multiplica con ella: .62 x .8 = .496, o sea #486858 y 2.49:1. Catorce de las veinticuatro entradas del menu son pendientes, asi que el menu se veia medio borrado. Se apaga con el TOKEN y con el tamanio, que es lo que se puede medir. Contra una opcion viva (--panel-texto, 9.84:1) la diferencia se sigue viendo -- son casi cuatro puntos de contraste --, pero ahora las dos se leen. */ .panel__menu .pendiente { display: block; padding: 8px 20px; margin-right: 12px; /* la misma caja que un renglon vivo, para que la lista no quede desalineada */ color: var(--panel-apagado); /* 5.81:1 sobre --panel-fondo */ font-size: .97rem; border-left: 3px solid transparent; cursor: default; } .panel__menu .pendiente em { font-style: normal; font-size: .78rem; letter-spacing: .04em; /* secundario por tamanio, no por opacidad */ } /* =============================================================== el banner == REGLA FIJA, PEDIDA POR CARLOS Y YA DISCUTIDA VARIAS VECES: **el banner SIEMPRE se ve al ancho del menu.** No al ancho de la ventana, no encogido segun el alto de la pantalla. Al ancho del menu. Aqui hubo cuatro intentos y los tres primeros estuvieron mal: 1. Al 100% de la ventana -> arrancaba pegado al filo del monitor mientras el logo y el menu empezaban mas adentro. "se desparrama y se ve horrible". 2. Con marco oscuro arriba y abajo -> lo probo y lo descarto. 3. Encogiendolo segun el alto de la pantalla (140vh) para que en una laptop dejara asomar lo de abajo -> en pantalla normal se despegaba del menu. "se ve mas feo ahora, siempre debe de verse al ancho del menu". Lo que queda es lo mas simple: la MISMA formula que .contenedor -- misma variable, mismo padding -- para que el dia que cambie el ancho del sitio el banner lo siga solo. Un 1480 escrito a mano se quedaria desalineado y nadie sabria por que. Si en una laptop el banner ocupa mucho alto, esa es la consecuencia aceptada de mantenerlo alineado. **No se vuelve a tocar sin que Carlos lo pida.** ========================================================================== */ .hero--conBanner { padding: 0; } .hero__lamina { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; background: #fff; line-height: 0; } /* La imagen manda su proporcion: ancho completo, alto automatico. Sin object-fit y sin tope de alto, que es lo que la despegaba del menu. */ .hero--conBanner .hero__banner { display: block; width: 100%; height: auto; max-height: none; object-fit: initial; margin: 0; } @media (max-width: 700px) { .hero__lamina { padding: 0 16px; } } /* --------------------------------------- la intro del panel, a lo ancho -- */ /* .panel__intro tiene 74ch de tope, que es la medida en que se lee comodo un parrafo largo. Para la intro de la edicion resulta angosta: son tres frases que salian en seis renglones cortos y empujaban el formulario hacia abajo, asi que lo primero que se veia al entrar era texto y no campos. Con la mitad del ancho del panel cabe en dos o tres renglones y el formulario sube. La medida de lectura se respeta igual: 50% de un panel ancho sigue estando por debajo de las 90 columnas donde un parrafo empieza a costar. */ .panel__intro--ancha { max-width: 50%; min-width: 46ch; } @media (max-width: 900px) { /* En angosto, el 50% seria una columna de dos palabras. Manda el ancho. */ .panel__intro--ancha { max-width: 100%; min-width: 0; } } /* ========================================================================== LA LAMINA DEL HERO, CON PROFUNDIDAD (2026-08-23) Carlos pidio "algun efecto 3D" en la portada. Esto es ese efecto, y esta escrito al reves de como se suele escribir un efecto de scroll, a proposito. POR QUE NO HAY JAVASCRIPT NI UN VIDEO AQUI El material que se propuso para el efecto no se puede publicar (ver el reporte del 2026-08-23), y de todos modos no hacia falta: el banner de la edicion ya es lo primero y lo mas grande que se ve al entrar. La profundidad se la da el navegador con `perspective` y `rotateX` reales, no un video. Sin JavaScript no hay observador que pueda tronar, no hay un segundo archivo que pueda no cargar, y no hay megabytes que descargar. EL ESTADO SIN ANIMACION ES EL ESTADO BUENO Esta es la parte importante. La animacion arranca en `rotateX(0) scale(1) opacity: 1`, que es EXACTAMENTE como se ve el banner hoy. Si el navegador no entiende `animation-timeline` -- Firefox y Safari a esta fecha --, si algo falla, o si el usuario pide menos movimiento, no se aplica nada y el banner se ve completo y derecho. No se esconde nada que dependa de que algo funcione para volver a aparecer: es la misma regla de revelaSecciones() en js/sitio.js, y aqui se cumple sola porque no hay nada que revelar. QUE HACE Al bajar, la lamina se acuesta hacia atras desde su borde superior y se apaga, como una hoja que se aleja. Se detiene al 70% de la altura de la pantalla, que es cuando el banner ya salio. Solo se animan `transform` y `opacity`, que el navegador resuelve en la capa de composicion: ni un recalculo de maquetacion, ni un salto. DE 701 px PARA ARRIBA En el telefono el banner ocupa casi toda la pantalla y la inclinacion se come los logos de UANL y FIME que vienen dentro de la imagen. Ahi no va. ========================================================================== */ /* EL EFECTO SE SUBIO DE 8 A 18 GRADOS, Y NO ES CAPRICHO. La primera version giraba 8 grados con la perspectiva a 1600px, repartidos a lo largo de 70vh de scroll. Carlos: "no veo el efecto". Y tenia razon: a esa distancia el giro era de un pixel por cada varios de scroll, y encima terminaba de aplicarse cuando el banner ya estaba saliendo de pantalla. Un efecto que solo se nota comparando dos capturas no es un efecto. Tres ajustes: - 18 grados en vez de 8, y la perspectiva mas cerca (1100px). Cuanto mas cerca esta el punto de fuga, mas pronunciada se ve la misma rotacion. - El recorrido baja a 55vh: el gesto entero ocurre MIENTRAS el banner todavia se ve. - La opacidad se queda en .72 y no en .55. Que se incline es el efecto; que se desvanezca solo lo apaga. Sigue arrancando en el estado normal -- rotateX(0), scale(1), opacidad 1 -- a proposito: si el navegador no entiende animation-timeline (Firefox y Safari a esta fecha), o si alguien pide menos movimiento, no se aplica nada y el banner se ve completo y derecho. Nada escondido esperando que algo funcione: esa leccion ya costo una pagina en blanco. */ @keyframes piv-lamina-profundidad { from { transform: rotateX(0deg) scale(1); opacity: 1; } to { transform: rotateX(18deg) scale(.88); opacity: .72; } } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) and (min-width: 701px) { .hero--conBanner .hero__lamina { perspective: 1100px; perspective-origin: 50% 0%; } .hero--conBanner .hero__banner { transform-origin: 50% 0%; animation: piv-lamina-profundidad linear both; animation-timeline: scroll(root block); animation-range: 0 55vh; /* Sin esto, Chrome aplana el resultado y el giro se ve como un simple achatamiento en vez de una lamina acostandose. */ transform-style: preserve-3d; backface-visibility: hidden; } } } /* ================================== el fondo del hero del banner, en blanco == Carlos: "si ajustas el fondo negro donde sale el banner, para que sea blanco y ver si ayuda al efecto 3D". SI AYUDA, Y NO POR GUSTO. El banner de esta edicion es blanco, asi que sobre el negro del hero la lamina se recortaba con un filo durisimo: se veia una tarjeta pegada sobre un fondo, no una hoja con profundidad. Y sobre todo, un objeto que se inclina se lee como tridimensional por su SOMBRA -- y una sombra sobre negro es invisible. El giro estaba ahi y no habia con que percibirlo. Con el fondo claro la lamina proyecta sombra, y esa sombra es la que le dice al ojo que la hoja esta despegada de la pagina y que se esta acostando. QUE SE APAGA Y POR QUE - `::after` era el velo oscuro en degradado que hacia legible el titulo blanco encima del banner. Ese titulo ya no existe -- el banner ES el bloque de titulo --, asi que el velo solo servia para ensuciar los margenes de blanco a los lados de la lamina. - `::before` es el anillo del isotipo, verde al 16%. Sobre negro apenas se adivina; sobre blanco queda un arco palido asomando en la esquina, que parece suciedad de la imagen y no una marca de agua. `overflow` pasa a visible: el hero mide exactamente lo que mide la lamina -- su relleno es 0 --, asi que con `hidden` la sombra de abajo se cortaba al ras y el efecto se perdia justo donde se necesita. Se puede quitar porque el anillo, que era lo unico que se salia del marco, ya no se pinta. ESTO SOLO APLICA AL HERO CON BANNER. El `.hero` normal -- el de las paginas sin imagen cargada -- se queda negro con su anillo y su texto blanco, que es como debe verse cuando no hay lamina que ensenar. ========================================================================== */ .hero--conBanner { background: #fff; color: var(--piv-negro); overflow: visible; /* UN RESPIRO ENTRE EL MENU Y LA LAMINA. Carlos, viendo el sitio en otra pantalla: "siento que el banner deberia estar un poquito abajo, no tan pegado al header, talvez un espacio nadamas". POR QUE AHORA SI Y ANTES NO. Esto ya se probo, y se descarto: cuando el hero era NEGRO, cualquier separacion se leia como un marco oscuro entre el menu y el banner -- "lo probo y lo descarto" quedo escrito arriba, en el bloque del banner. Con el fondo en blanco no hay marco que ver: es el mismo blanco de la pagina, y lo unico que cambia es que la lamina deja de ir pegada al filo del menu. Empezo en 28px y Carlos pidio "uno mas" al verlo, asi que quedo en 56: dos veces esa medida. Sigue siendo aire y no un hueco -- el banner no deja de ser lo primero que se ve al entrar --, pero ahora se despega del menu de verdad y no apenas. ABAJO NO SE TOCA. Debajo de la lamina viene la seccion de convocatoria con su propio relleno; agregarle mas aqui seria sumar dos espacios y abrir un hueco donde nadie lo pidio. */ padding: 56px 0 0; } @media (max-width: 700px) { /* En el telefono el banner ya ocupa casi toda la pantalla; el espacio completo ahi le quitaria altura a lo que importa sin agregar nada. Se queda con la mitad. */ .hero--conBanner { padding-top: 28px; } } .hero--conBanner::before, .hero--conBanner::after { content: none; } /* LA SOMBRA ES EL EFECTO 3D, tanto como la rotacion. Es estatica a proposito: `box-shadow` no se resuelve en la capa de composicion, asi que animarla obligaria al navegador a repintar en cada cuadro del scroll -- justo lo que el bloque de abajo evita con tanto cuidado animando nada mas `transform` y `opacity`. Una sombra fija ya levanta la lamina del papel, y al inclinarse la hoja la sombra queda quieta debajo, que es exactamente lo que hace una hoja de verdad. Va negativa en el desenfoque (-18px de spread) para que no se derrame por los lados: se quiere el peso abajo, no un halo alrededor. */ .hero--conBanner .hero__banner { box-shadow: 0 18px 44px -18px rgba(20, 24, 15, .38); } @media (prefers-reduced-motion: reduce) { /* Sin movimiento la sombra no esta contando nada; se deja apenas el filo para que la lamina no flote sin apoyo sobre el blanco. */ .hero--conBanner .hero__banner { box-shadow: 0 6px 18px -12px rgba(20, 24, 15, .30); } } /* ------------------------------------------- el hero SIN banner: no existe -- Si la edicion no tiene banner cargado -- o la ruta falla --, esta seccion se queda sin nada que ensenar: su unico contenido visible era la lamina, porque el titulo, los botones y los datos se movieron a Calendario y a Convocatoria. El h1 sigue adentro, pero lleva .solo-lectores y no ocupa alto. Con la clase base heredaba fondo negro y 96/88 px de relleno: una barra negra vacia como primera impresion de la portada. Aqui se apaga entera. NO se usa display:none. La seccion tiene que seguir en el arbol para que el h1 llegue al lector de pantalla y al buscador; lo que se quita es el fondo, el relleno y el anillo, no el elemento. El code-behind reemplaza esta clase por `hero hero--conBanner` en cuanto hay imagen, asi que el estado por omision -- el que se ve si algo falla -- es el discreto. Es la misma regla de siempre: lo que se ve cuando nada funciona tiene que ser lo correcto. -------------------------------------------------------------------------- */ .hero--sinBanner { padding: 0; background: none; color: inherit; } .hero--sinBanner::before, .hero--sinBanner::after { content: none; } /* ==================================== los patrocinadores, con profundidad == Carlos: "ponle un efecto 3d tambien". ANTES QUE EL EFECTO HUBO QUE ARREGLAR LA FRANJA, y la causa no estaba en el CSS: los 17 logos daban HTTP 401. Se copiaron a img/patrocinadores desde fuera de wwwroot y conservaron la lista de permisos de su origen, sin IIS_IUSRS. La seccion se pintaba entera -- titulo, cinta, huecos del tamanio exacto de cada logo -- y adentro no habia nada. Se arreglo con `icacls img\patrocinadores /reset /T`. Es la segunda vez que pasa (la primera fue con la hoja de estilos, que salio sin un solo estilo por lo mismo). LA REGLA: los archivos se escriben o se copian YA DENTRO de wwwroot. Mover algo de afuera se lleva su ACL, y un 401 no se distingue de "la imagen no existe" mirando la pagina. ======================= EL EFECTO ======================= DOS COSAS DISTINTAS, Y NINGUNA PELEA CON LA OTRA: 1. LA BANDA se acuesta hacia atras al hacer scroll, igual que la lamina del banner. Menos grados que alla -- 10 contra 18 -- porque aqui no es lo primero que se ve sino una franja de paso: si se inclina igual de fuerte, compite con la seccion que la sigue. 2. CADA LOGO se levanta hacia el lector al pasarle el mouse: sale del gris, recupera su color y se ADELANTA en el eje Z. Antes solo crecia con un scale, que se lee como zoom y no como profundidad. Con perspectiva en la pista y translateZ en el logo, el que se mira esta de verdad mas cerca que los demas. EL ESTADO SIN ANIMACION ES EL ESTADO BUENO, como en el banner: la animacion arranca en rotateX(0) y los logos viven en translateZ(0). Si el navegador no entiende animation-timeline -- Firefox y Safari a esta fecha --, o si alguien pide menos movimiento, no se aplica nada y la cinta se ve como siempre. No hay nada escondido esperando a que algo funcione. POR QUE `transform-style: preserve-3d` EN LA PISTA Y NO EN LA CINTA. La pista es la que ya lleva la animacion horizontal; poner ahi el contexto 3D deja que el desplazamiento y la profundidad convivan en la misma capa. En la cinta, el overflow: hidden que recorta los costados aplanaria el resultado. ========================================================================== */ /* La perspectiva vive en la pista, que es el padre directo de los logos. Un valor grande -- 1400px -- porque la banda es ancha: mas cerca, los logos de los extremos se deforman como en un ojo de pez. */ .cinta__pista { perspective: 1400px; perspective-origin: 50% 50%; } /* El logo se adelanta hacia el lector, no crece. El scale se queda tambien, pero mas discreto: los dos juntos venden la cercania mejor que cualquiera por su cuenta. */ .patrocinador__logo { transform: translateZ(0); transform-style: preserve-3d; will-change: transform; } .patrocinador:hover .patrocinador__logo, .patrocinador:focus-visible .patrocinador__logo { transform: translateZ(60px) scale(1.02); } /* La sombra va en el contenedor y no en la imagen: los logos son PNG con fondo transparente, y una sombra sobre la imagen calcaria la silueta del dibujo en vez de apoyar el rectangulo. */ .patrocinador { transition: box-shadow .25s ease; border-radius: var(--radio-sm); } .patrocinador:hover, .patrocinador:focus-visible { box-shadow: 0 14px 30px -16px rgba(20, 24, 15, .30); } @keyframes piv-cinta-profundidad { from { transform: rotateX(0deg); } to { transform: rotateX(10deg); } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) and (min-width: 701px) { .cinta { perspective: 1200px; perspective-origin: 50% 0%; } /* `view()` y no `scroll(root)`: aqui el recorrido tiene que medirse contra la ENTRADA DE ESTA FRANJA en pantalla, no contra el scroll de toda la pagina. La cinta esta a seis mil pixeles de la portada; con scroll(root) el gesto se habria consumido entero mucho antes de que nadie la viera. El banner si usa scroll(root) porque esta arriba del todo y ahi las dos medidas coinciden. */ .cinta__pista { transform-origin: 50% 0%; transform-style: preserve-3d; animation: piv-cinta-profundidad linear both; animation-timeline: view(block); animation-range: exit 0% exit 90%; backface-visibility: hidden; } } } @media (prefers-reduced-motion: reduce) { /* Sin movimiento, el logo se queda con su realce de color y su sombra: la informacion -- "este es el que estas mirando" -- se conserva, el gesto no. */ .patrocinador:hover .patrocinador__logo, .patrocinador:focus-visible .patrocinador__logo { transform: none; } } /* ============================== el cierre "Te esperamos", con mas aire == Carlos: "esto del footer que abarque mas y poes esta bien centrado, pero ahorita se ve amontonado". LA CAUSA. La caja tenia `max-width: 64ch`, que es la medida en que se lee comodo un PARRAFO. Pero lo que va aqui no es un parrafo: es el nombre completo del evento -- "13 Congreso Internacional, 30 Coloquio de Proyectos Institucionales y de Vinculacion y 8 Congreso de la coordinacion de administracion y sistemas" -- que son casi 150 caracteres. En 64ch cae en cuatro o cinco renglones apretados, y como es un titulo va en cuerpo grande y con poco interlineado: el resultado es un bloque de letra amontonada donde deberia haber un remate. LO QUE SE HACE, Y POR QUE NO ES "ensanchar todo". La caja crece, pero cada cosa adentro recupera la medida que le toca: - EL TITULO se suelta hasta 20ch mas que antes y se le abre el interlineado. Un titulo largo no se lee renglon por renglon como un parrafo, se abarca de un vistazo, asi que la regla de las 64 columnas no le aplica. - LA LEYENDA se queda en 58ch y centrada. Esa SI es una frase que se lee, y estirarla al ancho de la caja seria el error contrario: renglones tan largos que el ojo pierde de cual venia. O sea que la caja abarca mas y el texto respira, pero nada se estira mas alla de donde se sigue leyendo bien. ========================================================================== */ .cierre__caja { /* `min()` para que en una laptop angosta mande el ancho disponible y no las 92 columnas: sin eso, la caja se saldria del contenedor. */ max-width: min(100%, 92ch); margin-inline: auto; } .cierre h2 { max-width: 24ch; margin-inline: auto; line-height: 1.18; text-wrap: balance; } /* El titulo del cierre sale de la base y puede ser muy largo o muy corto. Con `text-wrap: balance` los renglones quedan parejos en vez de dejar una palabra sola al final -- que con este nombre pasaba siempre. Donde el navegador no lo entienda, simplemente parte como antes. */ .cierre__leyenda { max-width: 58ch; margin-inline: auto; margin-bottom: 34px; line-height: 1.6; } @media (min-width: 901px) { /* En pantalla ancha el titulo se suelta hasta 40 columnas. Con 30 se quedaba en 583 px de una caja de 884 -- o sea, dejaba 300 px de negro vacio a cada lado y aun asi caia en cinco renglones. Con 40 usa el ancho que ya tenia y baja a cuatro. No se le quita el tope del todo: sin el, este titulo de 150 caracteres se tiraria en dos renglones larguisimos y centrados, que es de lo mas dificil de leer que hay -- al volver de un renglon al siguiente, el ojo no tiene margen izquierdo donde engancharse. */ .cierre h2 { max-width: 40ch; } } @media (max-width: 700px) { /* En el telefono manda el ancho de la pantalla; las medidas en ch aqui solo estorbarian. */ .cierre__caja, .cierre h2, .cierre__leyenda { max-width: 100%; } } /* ================================= el ojito de la contrasenia (2026-08-23) == El boton lo crea js/sitio.js, no el marcado: un boton que solo alterna un atributo no tiene nada que hacer si el JavaScript no corrio. Aqui va nada mas como se ve. LA CAJA ES `position: relative` Y EL BOTON VA ADENTRO, ENCIMA DEL CAMPO. Con el boton al lado -- en un flex de dos columnas -- el campo se encogeria, y todos los demas campos del formulario quedarian mas anchos que este. Puesto encima, el campo conserva su ancho y solo se le reserva relleno a la derecha para que el texto no pase por debajo del icono. ========================================================================== */ .campo-psw { position: relative; display: block; } /* El relleno se le da al campo DESDE AQUI y no tocando `.entrada`, para que el resto de los campos del sitio no cambien. 44px = el ancho del boton mas aire. Sin esto, una contrasenia larga se mete debajo del ojo. */ .campo-psw .entrada { width: 100%; padding-right: 44px; } .campo-psw__ojo { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; /* 34x34 de area tocable. Menos que eso y en un telefono se falla el toque: el icono mide 20, pero el boton no es el icono. */ width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--radio-sm); background: transparent; color: var(--tenue); cursor: pointer; transition: color .15s ease, background-color .15s ease; } .campo-psw__ojo:hover { color: var(--tinta-suave); background: var(--regla-tenue); } /* El foco se ve. Es un control que se alcanza con Tab, y sin anillo de foco quien navegue con teclado no sabe que lo tiene encima. */ .campo-psw__ojo:focus-visible { outline: none; color: var(--piv-verde-hondo); box-shadow: 0 0 0 3px rgba(var(--piv-verde-rgb), .22); } /* Mientras la contrasenia esta a la vista, el ojo se queda en verde: es un recordatorio de que hay algo destapado en pantalla. */ .campo-psw__ojo[aria-pressed="true"] { color: var(--piv-verde-hondo); } .campo-psw__ojo svg { display: block; } /* ============================== la bandeja de participantes (2026-08-24) == Lo que hacia falta para Pages/Participantes/Bandeja.aspx: el resumen de arriba, la fila de filtros y tres detalles de la tabla. ========================================================================== */ /* ---------------------------------------------------- el resumen de cifras -- AUTO-FIT Y NO CUATRO COLUMNAS FIJAS. Hoy son cinco numeros; maniana pueden ser cuatro o seis, y una rejilla fija dejaria un hueco o partiria el ultimo solo en su renglon. Con auto-fit se reparten segun quepan. El minimo de 150px es el ancho en que "Inscripciones concluidas" cabe en dos renglones sin partir una palabra. */ .cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; } .cifra { padding: 16px 18px; border: 1px solid var(--regla); border-left: 4px solid var(--regla); border-radius: var(--radio-sm); background: var(--fondo-alt); } /* El numero manda: es lo unico que se lee de lejos, y esta pantalla se mira de lejos -- alguien pasa y pregunta "cuantos van". */ .cifra__numero { font-family: var(--f-titulo); font-size: 2rem; line-height: 1.1; margin: 0 0 2px; color: var(--tinta); font-variant-numeric: tabular-nums; } .cifra__que { margin: 0; font-size: .86rem; color: var(--tinta-suave); line-height: 1.35; } /* Solo dos cifras llevan color, y las dos son las que piden accion: cuantos ya cerraron y cuantos siguen a medias. Pintarlas todas seria un semaforo sin informacion. */ .cifra--ok { border-left-color: var(--ok); } .cifra--ok .cifra__numero { color: var(--ok); } .cifra--alerta { border-left-color: var(--alerta); } .cifra--alerta .cifra__numero { color: var(--alerta); } /* ------------------------------------------------------------- los filtros -- Misma idea que las cifras: se acomodan segun quepan. En una laptop angosta caen en dos renglones sin que nadie tenga que decidir cual va donde. */ /* LOS FILTROS NO MIDEN TODOS LO MISMO, PORQUE NO CONTIENEN LO MISMO. Antes eran cinco columnas iguales de auto-fit. El resultado: la caja de busqueda -- donde se teclea un titulo largo o un correo -- media igual que "Estado", cuyo contenido mas ancho es la palabra "Concluida". Se escribia a ciegas en un hueco de 190 px mientras dos listas desplegables desperdiciaban la mitad de su ancho. Ahora la busqueda pesa el doble (2fr contra 1fr) y las listas se conforman con lo que de verdad ocupan. EL MINIMO DE 240 px NO ES ADORNO, ES LO QUE EVITA QUE SE INVIERTA. Un `2fr` solo reparte lo que sobra DESPUES de que cada columna se quedo con su minimo. Como las listas piden 150 px cada una y la busqueda -- escrita como `minmax(0, 2fr)` -- pedia cero, en cuanto la pantalla dejaba de sobrar espacio las cuatro listas se servian primero y la busqueda se quedaba con las migajas. Medido en esta misma pantalla, con el renglon de filtros en 738 px de ancho -- que es lo que da una laptop de 1024 -- la caja de busqueda salia de 74 px al lado de listas de 150. Justo al reves de lo que se pidio, y sin que se notara en un monitor grande. Con `minmax(240px, 2fr)` la busqueda cobra primero sus 240 px; si despues de eso no alcanza para las cuatro listas, se bajan al siguiente renglon en vez de aplastarla. Comprobado de 420 a 1582 px de ancho: la busqueda nunca queda mas angosta que una lista y la rejilla nunca se desborda de lado. */ .filtros { display: grid; grid-template-columns: minmax(240px, 2fr) repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 16px; margin-bottom: 16px; align-items: end; } .filtros .forma__campo { margin-bottom: 0; } /* En angosto se apilan: mantener la proporcion en un telefono dejaria las listas en una tira de 60 px. */ @media (max-width: 820px) { .filtros { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } } /* Un campo que se lleva el renglon completo, para cuando es el unico. */ .forma__campo--ancho { grid-column: 1 / -1; } /* ---------------------------------------------- tres detalles de la tabla -- */ /* El correo debajo del nombre, el nombre de la institucion debajo del titulo. Van en la misma celda y no en columnas propias: son datos de apoyo, y dos columnas mas obligarian a desplazar la tabla de lado para leer lo importante. */ .tabla__secundario { display: block; font-size: .82rem; color: var(--tenue); margin-top: 2px; word-break: break-word; } /* Los conteos y las etiquetas de si/no, centrados: son columnas angostas donde un numero alineado a la izquierda se ve suelto. */ .tabla__centrado { text-align: center; } /* "Sin titulo todavia" y demas texto que NO capturo nadie: se distingue de un dato real para que no se lea como si el proyecto se llamara asi. */ .tabla__tenue { color: var(--tenue); font-style: italic; } /* La etiqueta de lo que falta, sin alarma. Un "Falta" en rojo al lado de doscientos proyectos que todavia estan en tiempo convierte la pantalla en una lista de problemas que no lo son. */ .etiqueta--tenue { background: var(--regla-tenue); color: var(--tinta-suave); border-color: var(--regla); } /* ================================ el panel, que no se acoplaba (2026-08-24) == Carlos, viendolo en una laptop: "que rollo que paso con el menu lateral, no se acopla, se ve bien feo". CUATRO COSAS ESTABAN MAL, y las cuatro se notan justo en el rango de 900 a 1300 px, que es el de una laptop normal. En un monitor grande no se ven, y por eso pasaron. 1. DOS BARRAS DE DESPLAZAMIENTO ANIDADAS. El lateral llevaba `max-height: 100vh; overflow-y: auto`, o sea su propia barra ademas de la de la pagina. Con veinticuatro renglones de menu y una pantalla de 800 px de alto, la lista se cortaba a la mitad -- "Enlaces" partido por el borde -- y para llegar a lo de abajo habia que descubrir que ese pedazo se desplaza aparte. 2. EL LATERAL NO ENCOGIA. 252 px fijos. En un monitor son el 13% del ancho; en una laptop de 1100 son el 23%, y el contenido se queda con lo que sobra: la introduccion caia en cinco renglones de tres palabras. 3. EL ENCABEZADO SE PARTIA EN DOS. El nombre de esta edicion mide casi 150 caracteres, y con `flex-wrap: wrap` se comia el renglon entero y empujaba al usuario y al boton Salir a una segunda linea, pegados a la derecha y lejos de todo. 4. EL SALTO A UNA COLUMNA ERA A 900 px, y entre 900 y 1200 el diseno ya estaba apretado sin haber cambiado todavia. ========================================================================== */ /* --------------------------------------------- 1 y 2: el lateral, otra vez -- ANCHO ELASTICO. clamp() le pone piso y techo: nunca menos de 210 px -- donde "Calendario y cuotas" todavia cabe en un renglon -- ni mas de 252, que es lo que ya se veia bien en monitor. En medio, se acomoda al 19% del ancho. LA ALTURA COMPLETA Y **SOLO EL MENU SE DESPLAZA**. Antes se desplazaba el lateral entero, asi que el logo se iba con la lista. Ahora la marca se queda arriba, fija, y lo unico que corre es la lista de pantallas. Es la diferencia entre "esto tiene mas opciones abajo" y "esto se rompio". */ @media (min-width: 901px) { .panel { grid-template-columns: clamp(210px, 19vw, 252px) minmax(0, 1fr); } .panel__lateral { height: 100vh; max-height: 100vh; overflow: hidden; /* el que se desplaza es el menu, no esto */ } .panel__marca { flex: 0 0 auto; } .panel__menu { flex: 1 1 auto; min-height: 0; /* sin esto, un hijo de flex no encoge y el overflow no aparece nunca */ overflow-y: auto; overscroll-behavior: contain; /* al llegar al final del menu no se arrastra la pagina de atras */ } /* La barra del menu, discreta y del mismo verde. La de Windows por omision es un bloque gris claro que sobre el fondo se ve como un error de pintado. */ /* Iba con #2C5F45 y #3C7A59 escritos a mano. Son exactamente --panel-realce al 34% y al 55% sobre el fondo, asi que se ve igual que antes, pero ahora sigue a la paleta en vez de quedarse atras. */ .panel__menu { scrollbar-width: thin; scrollbar-color: rgba(var(--panel-realce-rgb), .34) transparent; } .panel__menu::-webkit-scrollbar { width: 8px; } .panel__menu::-webkit-scrollbar-track { background: transparent; } .panel__menu::-webkit-scrollbar-thumb { background: rgba(var(--panel-realce-rgb), .34); border-radius: 4px; } .panel__menu:hover::-webkit-scrollbar-thumb { background: rgba(var(--panel-realce-rgb), .55); } } /* ------------------------------------------------- 3: el encabezado entero -- El nombre de la edicion se lleva el espacio que sobre, pero **no empuja a nadie**: el bloque del usuario se declara inencogible y el conjunto deja de envolver. Y el nombre se limita a dos renglones con puntos suspensivos. Cortarlo no es perder informacion: el nombre completo esta en el titulo de la pestania, en la portada y en la pantalla de la edicion. Aqui su trabajo es recordarte en cual estas parado, no que lo leas entero. */ @media (min-width: 901px) { .panel__cabeza { flex-wrap: nowrap; } .panel__edicion { flex: 1 1 auto; min-width: 0; } .panel__edicionNombre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; } .panel__usuario { flex: 0 0 auto; margin-left: auto; } } /* ------------------------------------- 4: el rango intermedio, mas holgado -- Entre 901 y 1200 el lateral ya encogio por el clamp, pero el contenido agradece perder relleno: son 24 px que se convierten en texto. */ @media (min-width: 901px) and (max-width: 1200px) { .panel__cuerpo { padding: 22px 20px 48px; } .panel__cabeza { padding: 12px 20px; } .tarjeta { padding: 20px 18px; } } /* Las cifras bajan su minimo para que cinco quepan en un renglon mas seguido. Con 150 px, en 1100 caben cuatro y la quinta se queda sola abajo, que se lee como si fuera de otra categoria. */ .cifras { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); } /* -------------------------------------------------------- y en el telefono -- El menu en rejilla de dos o tres columnas ya estaba bien resuelto; lo que faltaba es que el lateral no herede la altura fija ni el overflow que se le acaban de poner arriba. Como esas reglas viven dentro de un min-width, aqui no llegan, y esto solo lo deja escrito para quien lea. */ @media (max-width: 900px) { .panel__menu { overflow: visible; max-height: none; } } /* ------------------------------ la pastilla del estado, a su medida (2026-08-24) -- Carlos: "que salga al lado del titulo Edicion vigente y que la etiqueta solo abarque el ancho de la frase, que no abarque todo hasta el final". POR QUE SE ESTIRABA. `.panel__edicion` es un contenedor flex en columna, y en un flex la alineacion transversal por omision es `stretch`: cada hijo crece hasta el ancho del contenedor. Un `` que normalmente mide lo que su texto, ahi dentro medía mil pixeles. Se veia una barra verde de lado a lado para decir dos palabras. Con `align-items: flex-start` cada hijo vuelve a medir lo suyo, y la pastilla sube a un renglon horizontal junto al rotulo. -------------------------------------------------------------------------- */ .panel__edicion { align-items: flex-start; } .panel__edicionCima { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; /* en angosto la pastilla baja sola, sin desbordar */ } /* El rotulo ya no necesita ocupar su propio renglon. */ .panel__edicionCima .panel__edicionRotulo { line-height: 1.2; } /* La pastilla, por si acaso, tampoco se estira aunque cambie el contenedor. */ .panel__edicionCima .etiqueta { align-self: center; width: auto; flex: 0 0 auto; } /* ================================= la letra del panel (2026-08-24) == Carlos: "siento que el tipo de letra no ayuda mucho al sistema admin, ponle el tipo de letra que usamos en el sistema admin del proyecto SPAC". SPAC usa 'Inter' con 'Segoe UI' y 'Source Sans Pro' de respaldo. Aqui va la misma pila, y por la misma razon que alla: **afuera y adentro se leen distinto**. El sitio publico lo visita alguien una vez, unos minutos, y Barlow -- una grotesca de senializacion, condensada en los titulos -- le da caracter a la portada. El panel lo mira un administrador ocho horas seguidas, y son tablas, formularios y columnas de numeros. Ahi el caracter estorba: lo que se agradece es una letra neutra, de altura de x generosa y cifras parejas. SE REDEFINEN LOS TOKENS, NO CADA REGLA. Las 25 reglas que usan var(--f-titulo) y var(--f-texto) siguen igual; lo unico que cambia es lo que esas variables valen dentro de .panel. Por eso el sitio publico no se entera. LOS TITULOS TAMBIEN. Podria dejarse Barlow Condensed para los encabezados, pero una condensada sobre una neutra se ve como dos sistemas pegados. En un panel, la jerarquia la dan el tamanio y el peso, no un cambio de familia. ========================================================================== */ .panel { --f-titulo: "Inter", "Segoe UI", "Source Sans Pro", system-ui, -apple-system, sans-serif; --f-texto: "Inter", "Segoe UI", "Source Sans Pro", system-ui, -apple-system, sans-serif; /* --f-dato se queda: los folios y los importes siguen en monoespaciada, que es lo que los alinea en columna. */ } /* Inter trae numeros de ancho variable por omision. En una tabla eso hace que las columnas de cifras bailen renglon a renglon. `tnum` los pone todos del mismo ancho, que es para lo que existe. */ .panel .tabla, .panel .cifra__numero, .panel .dato { font-variant-numeric: tabular-nums; } /* Barlow Condensed era estrecha, asi que los titulos podian ir grandes sin ocupar de mas. Inter es mas ancha: los mismos tamanios se sienten pesados y el interlineado queda suelto. Se ajusta de una vez, en un solo lugar. */ .panel__titulo h1 { font-size: 1.7rem; letter-spacing: -.01em; line-height: 1.2; } .panel .tarjeta h2 { font-size: 1.12rem; letter-spacing: -.005em; } /* Aqui iba `.panel__marca span`, la escala de la palabra "PANEL" en Inter. La palabra se quito el 2026-08-24 y la regla se fue con ella: una regla que ya no tiene a quien aplicarse solo sirve para confundir al siguiente. */ .panel .cifra__numero { font-size: 1.75rem; letter-spacing: -.02em; } /* ============================ los botones que descargan (2026-08-24) == Carlos: el de Excel verde, el de los trabajos azul, y los dos con su icono. POR QUE COLORES DISTINTOS Y NO DOS VERDES. Bajan cosas que no se parecen: uno una lista de renglones, el otro cientos de megabytes de PDF. Y uno respeta el filtro de la pantalla y el otro no. Dos botones identicos, pegados, invitan a picar el equivocado -- y el equivocado aqui son doscientos archivos. EL AZUL NO SALE DE LA PALETA DE LA MARCA A PROPOSITO. Todos los verdes del sistema significan "esto es del congreso"; un segundo verde para "otra descarga" no distinguiria nada. El azul se toma de --info, que ya existe y ya se usa para lo informativo. ========================================================================== */ .btn--azul { background: var(--info); color: #fff; border-color: var(--info); --btn-canto: #123C5C; } .btn--azul:hover, .btn--azul:focus-visible { background: #17456A; /* el mismo azul, mas hondo */ border-color: #17456A; color: #fff; } /* ---------------------------------------------------- el icono del boton -- El .btn ya es inline-flex, asi que el icono y el texto se alinean solos. Lo unico que hace falta es que el SVG no se encoja cuando el texto es largo, y que quede opticamente centrado: un icono alineado a la linea base de la letra se ve caido, y por eso baja un pixel. */ .btn__icono { flex: 0 0 auto; display: block; margin-top: -1px; } /* En un boton chico el icono tambien. */ .btn--chico .btn__icono { width: 15px; height: 15px; } /* ================= los contadores, al lado del titulo (2026-08-24) == Carlos: "quiero que los contadores aparezcan al lado derecho de Participantes inscritos, porque siento que esta muy saturada la pantalla". Tenia razon y el ahorro es real: la tarjeta del resumen ocupaba tres renglones de alto -- encabezado, cifras y nota -- para cinco numeros. Aqui caben en el hueco que ya estaba vacio a la derecha del titulo. `space-between` y no `margin-left: auto`: con auto, al envolver en angosto las cifras se quedarian pegadas al borde derecho en su renglon nuevo. Asi arrancan desde la izquierda, alineadas con el titulo. ========================================================================== */ .panel__titulo--conCifras { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 20px; } .panel__titulo--conCifras h1 { margin-bottom: 0; } /* CADA CIFRA EN SU CUADRITO. Carlos: "mejor si enciralos en cuadritos". Sin caja, cinco pares de numero y palabra sueltos al lado del titulo se leen como una sola frase larga: hay que buscar donde termina uno y empieza el otro. El recuadro los separa sin necesidad de mirar. Se quedan chicos a proposito: son cuadritos, no las tarjetas de antes. Lo que se gano al subirlos junto al titulo -- una tarjeta entera de alto -- no se puede devolver ahora en relleno. */ .panel__titulo--conCifras .cifras { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0; } .panel__titulo--conCifras .cifra { padding: 7px 14px; background: var(--fondo); border: 1px solid var(--regla); border-left: 3px solid var(--regla); border-radius: var(--radio-sm); min-width: 88px; text-align: center; } .panel__titulo--conCifras .cifra__numero { display: block; font-size: 1.5rem; line-height: 1.15; margin: 0; } /* EL ROTULO HEREDA EL COLOR DE SU NUMERO, no va en gris. Carlos lo pidio asi, y ademas amarra las dos mitades: leidas de lejos, el numero y su palabra se ven como una sola cosa en vez de un dato con una etiqueta suelta debajo. */ .panel__titulo--conCifras .cifra__que { display: block; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: inherit; opacity: .85; /* el rotulo es mas chico: sin esto pesa igual que el numero */ margin: 0; } .panel__titulo--conCifras .cifra { color: var(--tinta); } .panel__titulo--conCifras .cifra--ok { border-left-color: var(--ok); color: var(--ok); } .panel__titulo--conCifras .cifra--alerta { border-left-color: var(--alerta); color: var(--alerta); } /* El numero ya no fija su propio color: lo toma del contenedor, y asi el par completo cambia con una sola regla. */ .panel__titulo--conCifras .cifra__numero, .panel__titulo--conCifras .cifra--ok .cifra__numero, .panel__titulo--conCifras .cifra--alerta .cifra__numero { color: inherit; } /* En angosto las cifras bajan solas por el flex-wrap del contenedor; aqui solo se aprieta el espacio entre ellas para que quepan mas por renglon. */ @media (max-width: 700px) { .panel__titulo--conCifras { gap: 12px 0; } .panel__titulo--conCifras .cifras { gap: 6px; } .panel__titulo--conCifras .cifra { padding: 6px 10px; min-width: 76px; } .panel__titulo--conCifras .cifra__numero { font-size: 1.3rem; } .panel__titulo--conCifras .cifra__que { font-size: .68rem; } } /* ================== la previa del banner, sin disfraz (2026-08-24) == Carlos: "quitale todo ese texto que tiene adentro del cuadro negro y que no sea negro el fondo, que sea invisible". POR QUE ERA NEGRO. La previa imitaba el hero de la portada cuando el banner iba de FONDO: recortado, al 34% de opacidad y bajo un velo oscuro, con el titulo blanco encima. Servia para ver cuanto del banner quedaba tapado. YA NO ES ASI. El banner es una lamina completa sobre blanco, entera y sin nada escrito encima. La previa que quedaba mostraba algo que el visitante no va a ver nunca, y eso es peor que no tener previa: un administrador podria descartar una imagen buena creyendo que va a quedar oscurecida. Ahora la previa ensenia exactamente lo que se va a publicar. ========================================================================== */ .maqueta { background: transparent; /* EL RECUADRO SE QUEDA GRANDE. Al quitarle el velo lo deje colapsar a 120 px y quedo un cintillo: Carlos lo pidio "igual grandesito como estaba". Un area de previa chica no deja juzgar una imagen, que es justo para lo que existe. Sin proporcion fija: la lamina conserva la del archivo, y el alto minimo solo sostiene la caja mientras no hay imagen elegida. */ aspect-ratio: auto; min-height: 260px; display: flex; align-items: center; justify-content: center; } /* Entera y opaca, en el flujo: es lo que se va a ver. */ .maqueta__img { position: static; width: 100%; height: auto; object-fit: contain; opacity: 1; } /* EL ROTULO DE "SIN IMAGEN", SIN CAJA Y EN NEGRO. Tenia fondo oscuro al 55% y letra clara, porque iba encima de la maqueta del hero que era negra. Sin esa maqueta, ese recuadro gris flotando en medio de un area blanca se veia como un error de pintado. Ahora es solo texto: dice que ahi va la previa y desaparece en cuanto hay imagen. */ .maqueta__vacia { position: static; background: none; color: var(--tinta); font-size: .95rem; } /* ---------------------------------------- el boton de eliminar (2026-08-24) -- En linea y no relleno de rojo. Un boton rojo solido al lado de dos botones normales se lee como la accion principal de la fila, y es al reves: eliminar es lo que casi nunca se hace y de lo que no se vuelve. Se pinta de rojo al pasar el mouse: para entonces la intencion ya esta, y el color confirma que eso es lo que se va a hacer. */ .btn--peligro { background: transparent; color: var(--error); border-color: var(--error); } .btn--peligro:hover, .btn--peligro:focus-visible { background: var(--error); border-color: var(--error); color: #fff; } /* ========================= el panel, mas apretado (2026-08-24) == Carlos: "siento que el texto del contenido del sistema admin esta quitando mucho espacio, puedes reducir el texto 1 o 2px?" y "los botones tambien, se ven muy grandes". LO QUE SE MIDIO ANTES DE TOCAR NADA: texto del cuerpo 17 px <- heredado del sitio publico titulo h1 27.2 px encabezado h2 17.9 px celda de tabla 15.2 px con 10/12 de relleno boton 15.2 px con 8/16 de relleno tarjeta 24/26 de relleno, 22 de separacion cuerpo del panel 28/30/60 de relleno POR QUE ESTABA ASI. El panel hereda la escala del sitio publico, y alla los 17 px estan bien: es una pagina que alguien lee una vez, de corrido, quiza en el telefono. Un panel es lo contrario -- tablas y formularios que se miran horas --, y ahi cada pixel de mas es un renglon menos que cabe en pantalla. NO SE TOCA EL SITIO PUBLICO. Todo cuelga de .panel. Y NO ES SOLO LA LETRA. Bajar dos pixeles y dejar el relleno igual no se habria notado: lo que de verdad se come el espacio son los 24 px de las tarjetas y los 22 de separacion entre ellas. Se baja el conjunto, en proporcion, para que siga viendose armado y no encogido a la fuerza. ========================================================================== */ /* ------------------------------------------------------------- el texto -- */ .panel__cuerpo { font-size: 15px; } .panel__titulo h1 { font-size: 1.4rem; } .panel .tarjeta h2 { font-size: 1rem; margin-bottom: 10px; } .panel__intro { font-size: .94rem; margin-bottom: 16px; } .panel .forma__ayuda { font-size: .82rem; } /* ---------------------------------------------------------- el espacio -- */ .panel__cuerpo { padding: 20px 24px 40px; } .panel .tarjeta { padding: 16px 18px; margin-bottom: 14px; } /* ------------------------------------------------------------ la tabla -- */ /* Es donde mas se gana: cada renglon que adelgaza es un proyecto mas visible sin desplazar. */ .panel .tabla td { padding: 7px 10px; font-size: .9rem; } .panel .tabla th { padding: 7px 10px; font-size: .72rem; } .panel .tabla__secundario { font-size: .78rem; } /* --------------------------------------------------- encabezados que ordenan El GridView con AllowSorting pinta cada titulo como un con un __doPostBack adentro. Sin esto salen azules y subrayados en medio de una fila de titulos grises en versalitas: parecen enlaces a otra pagina, que es justo lo que no son. */ .panel .tabla th a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; cursor: pointer; } .panel .tabla th a:hover, .panel .tabla th a:focus { color: var(--tinta); } /* LA FLECHITA. Tenue en toda columna ordenable -- para que se vea que se puede picar antes de picarla -- y solida en la que manda. Es un triangulo de bordes, no un caracter: asi hereda el color y no depende de que la fuente traiga el simbolo. */ .panel .tabla th a::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid currentColor; opacity: .25; } .panel .tabla th.tabla__orden--asc, .panel .tabla th.tabla__orden--desc { color: var(--tinta); } .panel .tabla th.tabla__orden--asc a::after, .panel .tabla th.tabla__orden--desc a::after { opacity: 1; } .panel .tabla th.tabla__orden--desc a::after { border-bottom: 0; border-top: 5px solid currentColor; } /* ----------------------------------------------------------- controles -- */ .panel .btn { font-size: .88rem; padding: 7px 14px; } .panel .btn--chico { font-size: .8rem; padding: 5px 11px; } /* btn--grande existe para el sitio publico, donde un boton es una llamada a la accion. En el panel no hay llamadas a la accion: hay tareas. Se iguala al tamanio normal para que una pantalla no salga con botones del doble por haber copiado el molde de afuera. */ .panel .btn--grande { font-size: .92rem; padding: 9px 18px; } .panel .entrada { font-size: .9rem; padding: 8px 11px; /* MISMO ALTO EL CUADRO DE TEXTO Y LAS LISTAS. Con el mismo relleno salian de alturas distintas, y en un renglon de filtros eso se ve como un escalon. La causa es que un y un IGNORA el line-height que se le ponga -- la hoja del navegador se lo fija con !important y el autor no le puede ganar -- asi que igualarlos "por aritmetica" no es posible. Se igualan por piso: los dos se quedan por debajo de 38 px de alto natural (1.3 de interlineado deja el input en 36.7 y el select en 37) y el min-height los sube a los dos a 38 exactos. ES min-height Y NO height A PROPOSITO. Con un alto fijo, el dia que alguien tenga el navegador con la letra grande el contenido no cabe y se recorta: medido aqui, con la letra base en 24 px el