/* ===================================================================== TIPOGRAFÍA Fraunces para los títulos: una romana de alto contraste, con la calidez de la letra impresa institucional. Archivo para todo lo demás y para los números: una grotesca de la fundición Omnibus-Type, de Buenos Aires, dibujada para leerse a tamaños pequeños y con cifras de ancho fijo, que es lo que un tablero de datos necesita. Ambas van autoalojadas: 70 KB en total, sin depender de nadie. ===================================================================== */ @font-face{ font-family:'Archivo'; font-style:normal; font-weight:100 900; font-display:swap; src:url('./tipos/archivo.woff2') format('woff2'); } @font-face{ font-family:'Fraunces'; font-style:normal; font-weight:100 900; font-display:swap; src:url('./tipos/fraunces.woff2') format('woff2'); } /* ============================================================ Sistema de Supervisión de Comedores Sociales · MIDES Identidad visual: obsidiana, jade y oro. La retícula, las grecas escalonadas y la textura de glifos vienen de la iconografía maya; la ejecución es contemporánea. ============================================================ */ :root{ /* --- base --- */ --obsidiana:#07161B; --obsidiana-2:#0C232B; --superficie:#102D36; --superficie-2:#163B46; --borde:#1E4F5C; --borde-tenue:#17414C; /* --- acentos --- */ --jade:#25B894; --jade-rgb:37,184,148; /* misma tinta en rgba(): la marca blanca la cambia junto con --jade */ --jade-hondo:#0E6E5C; --oro:#D8A73F; --oro-rgb:216,167,63; --obsidiana-luz:#7FE3CB; /* --- texto --- */ --texto:#E6F2F0; --texto-medio:#9DBAB8; --texto-tenue:#6E8D8C; /* --- semáforo --- */ --ok:#25B894; --alerta:#D8A73F; --critico:#E0574B; --sin:#5A7B7E; /* --- fondos y botones que las paletas pueden volver degradados --- */ --cuerpo-fondo:#07161B; --cabecera-fondo:linear-gradient(180deg, #0A2029, #07161B); --cabecera-velo:rgba(9,30,37,.88); --boton-fondo:linear-gradient(135deg, #7FE3CB -40%, #25B894 45%, #0E6E5C 140%); --boton-texto:#052018; --textura-opacidad:.06; --radio:4px; --sombra:0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.35); --titular:'Fraunces', 'Iowan Old Style', Georgia, serif; --letra:'Archivo', system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } *{box-sizing:border-box} body{ margin:0; background-color:var(--obsidiana); color:var(--texto); font-family:var(--letra); font-size:16px; line-height:1.55; font-variant-numeric:tabular-nums; /* ── por qué la división entre --sc-zoom ────────────────────────────── dispositivo.js pone `zoom` en cuando un teléfono pide «sitio de escritorio»: el navegador maqueta a ~980 px sobre una pantalla de ~412 y el zoom (≈2,38) devuelve el contenido a tamaño real. Ese mecanismo se queda —sustituirlo por transform rompería position:fixed y el top layer de todos los diálogos—, pero LAS UNIDADES DE VIEWPORT no lo entienden: dvh, svh, vh y vw se resuelven contra el viewport SIN ampliar y luego el zoom las multiplica. Medido en navegador: con zoom 2,38 sobre una pantalla de 812, un height:100dvh mide 1933 px pintados —2,38 pantallas—; el mismo valor dividido entre --sc-zoom mide 812, exactos. Cambiar de unidad no sirve: vh, svh y dvh fallan igual (los tres dieron 1933). Solo se divide el TÉRMINO de viewport, nunca el resto de la cuenta: los píxeles sueltos ya salen del tamaño correcto porque el zoom es justo lo que los devuelve a tamaño real. --sc-zoom la tiene que publicar dispositivo.js, que no es de este equipo; mientras no exista, var(--sc-zoom, 1) deja las reglas exactamente como estaban. Percentajes y position:fixed sí son inmunes al zoom (medidos: 812 px en los tres casos), pero no sirven para un max-height de diálogo. */ min-height:calc(100dvh / var(--sc-zoom, 1)); /* Un tirón hacia abajo recargaba la página a medio llenar (boleta, acta o formulario): el gesto se queda dentro del documento. */ overscroll-behavior-y:contain; } /* La textura de glifos cubre la pantalla completa y se queda quieta al desplazar: es el telón de fondo del sistema, no un adorno de la primera pantalla. Va en una capa fija para no repintarse con cada desplazamiento. */ body::before{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background-color:var(--obsidiana); background-image: radial-gradient(120% 78% at 50% 0%, rgba(var(--jade-rgb),.13), transparent 62%), linear-gradient(180deg, rgba(7,22,27,.80), rgba(7,22,27,.90)), url('./arte/glifos.webp'); background-size:auto, auto, 440px; background-repeat:no-repeat, no-repeat, repeat; background-position:center top, center, center top; } /* ---------- tipografía de servicio ---------- */ .epigrafe{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--texto-tenue); margin:0; } .titulo{ font-size:clamp(19px,2.4vw,24px); font-weight:600; letter-spacing:-.01em; margin:2px 0 0; color:var(--texto); } /* ---------- greca escalonada: el motivo que hilvana el sistema ---------- */ .greca{ height:2px; border:0; margin:0; /* hilo continuo jade -> oro -> jade: sin tramos sueltos que parezcan subrayados perdidos bajo las pestañas */ background:linear-gradient(90deg, transparent, rgba(var(--jade-rgb),.55) 18%, rgba(var(--oro-rgb),.75) 50%, rgba(var(--jade-rgb),.55) 82%, transparent); opacity:.85; } /* ---------- envolturas ---------- */ .lienzo{max-width:1120px; margin:0 auto; padding:22px 18px 64px} .panel{ background:linear-gradient(180deg, var(--superficie), var(--obsidiana-2)); border:1px solid var(--borde); border-radius:var(--radio); box-shadow:var(--sombra); } /* ---------- cabecera ---------- */ .cabecera{ background:linear-gradient(180deg, var(--obsidiana-2, #0A2029), var(--obsidiana)); border-bottom:1px solid var(--borde); position:relative; } .cabecera .friso{ position:absolute; inset:0 0 auto 0; height:100%; background:url('./arte/friso.webp') center top / auto 150% no-repeat; opacity:.10; pointer-events:none; filter:invert(1) sepia(1) saturate(3) hue-rotate(120deg); } /* Escudo institucional. Va en todas las pantallas por ser identidad oficial. */ .escudo-mides{ display:block; flex:none; width:132px; height:44px; background:url('./arte/logo-mides.webp') left center / contain no-repeat; } @media(max-width:640px){ .escudo-mides{width:104px; height:34px} } /* Centrado, para las pantallas de acceso y bienvenida. */ .escudo-mides.centrado{margin:0 auto 16px; width:190px; height:62px; background-position:center center} .marca-inst{display:flex; align-items:center; gap:14px; min-width:0} .cabecera .fila{ position:relative; max-width:1120px; margin:0 auto; padding:15px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } /* ---------- identidad de la persona ---------- */ .persona{display:flex; align-items:center; gap:11px} /* Mientras navegacion.js no monta la cabecera (o si no llega a montarla), la persona lleva los enlaces escritos a mano en el HTML: cinco o seis botones en fila, 1.141 px en el tablero. En el teléfono se salían por la derecha y Chrome encogía la página entera al cargar (21/09/2026). Que bajen de línea. */ .cabecera:not(.sc-cabecera) .persona{flex-wrap:wrap; min-width:0} .retrato{ width:42px; height:42px; border-radius:50%; border:2px solid var(--jade-hondo); object-fit:cover; background:var(--superficie-2); flex:none; } .persona b{display:block; font-size:14px; font-weight:600; line-height:1.3} .persona span{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-tenue)} /* ---------- controles ---------- */ label{display:block; font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-medio); margin:0 0 6px} input,select,textarea{ width:100%; padding:12px 13px; font:inherit; font-size:16px; color:var(--texto); background:var(--obsidiana); border:1px solid var(--borde); border-radius:var(--radio); } /* Un radio y una casilla no son campos de texto. La regla de arriba les daba ancho completo y 12px de relleno, así que el control se estiraba de lado a lado del contenedor y empujaba su etiqueta contra el margen, donde el texto se apilaba letra por letra. boleta.html y boleta-ver.html ya lo corregían por su cuenta con .opcion input; se corrige aquí, una vez, para todas. */ input[type=radio], input[type=checkbox]{ width:17px; height:17px; min-width:17px; flex:none; padding:0; margin:0; border:0; background:none; border-radius:0; accent-color:var(--jade); cursor:pointer; } input::placeholder{color:var(--texto-tenue)} input:focus-visible,select:focus-visible,textarea:focus-visible, button:focus-visible,a:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--obsidiana-luz); outline-offset:2px; } select option{background:var(--obsidiana-2); color:var(--texto)} .boton{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; min-height:46px; font:inherit; font-size:15px; font-weight:600; color:var(--obsidiana); background:var(--jade); border:0; border-radius:var(--radio); cursor:pointer; text-decoration:none; } .boton:hover{background:var(--obsidiana-luz)} .boton:disabled{opacity:.45; cursor:not-allowed} .boton.fantasma{ background:transparent; color:var(--texto); border:1px solid var(--borde); } .boton.fantasma:hover{background:var(--superficie-2)} .boton.peligro{background:transparent; color:var(--critico); border:1px solid var(--critico)} .boton.peligro:hover{background:rgba(224,87,75,.12)} .boton.menudo{padding:7px 11px; min-height:34px; font-size:13px; font-weight:500} /* ---------- avisos ---------- */ /* Cada buscador vive dentro de su propio

para que el navegador no lo agrupe con los demas campos sueltos del documento: de ahi salia la oferta de credenciales. La jaula no debe verse ni ocupar sitio. */ .forma-buscar{display:contents} .aviso{ margin:0 0 16px; padding:11px 13px; font-size:14px; border-radius:var(--radio); border-left:3px solid var(--critico); background:rgba(224,87,75,.10); color:#FFC9C3; } .aviso.bien{border-left-color:var(--jade); background:rgba(var(--jade-rgb),.10); color:#B6F0E1} .aviso[hidden]{display:none} /* ---------- tablas ---------- */ table{width:100%; border-collapse:collapse; font-size:14px} th{ text-align:left; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-tenue); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--borde); } td{padding:11px 12px; border-bottom:1px solid var(--borde-tenue); vertical-align:middle} tr:last-child td{border-bottom:0} /* ---------- insignias ---------- */ .marca{ display:inline-block; padding:3px 8px; border-radius:3px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; background:var(--superficie-2); color:var(--texto-medio); border:1px solid var(--borde); } .marca.viva{color:var(--jade); border-color:var(--jade-hondo)} .marca.muerta{color:var(--critico); border-color:rgba(224,87,75,.4)} @media (prefers-reduced-motion:no-preference){ .boton,.panel{transition:background-color .15s ease, border-color .15s ease} } /* ===================================================================== MOSAICO DE COMEDORES Una placa por comedor. El borde dice su peor señal; la barra inferior se llena como se llena un plato. Agrupadas por departamento, el ojo encuentra lo que está mal sin tener que leer. ===================================================================== */ .bloque-depto{margin:0 0 26px} .bloque-depto > header{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:0 0 8px; margin-bottom:12px; border-bottom:1px solid var(--borde-tenue); } .bloque-depto h2{ margin:0; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--texto-medio); } .bloque-depto .cuenta{ font-size:11px; color:var(--texto-tenue); font-variant-numeric:tabular-nums; } .marca-depto{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:999px; border:1px solid; } .marca-depto:first-of-type{margin-left:auto} .marca-depto.mal{color:var(--critico); border-color:rgba(224,87,75,.4); background:rgba(224,87,75,.10)} .marca-depto.med{color:var(--alerta); border-color:rgba(var(--oro-rgb),.4); background:rgba(var(--oro-rgb),.10)} .rejilla{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); } .placa{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px 13px 11px; min-height:112px; text-align:left; cursor:pointer; font:inherit; color:var(--texto); background:linear-gradient(160deg, var(--superficie), var(--obsidiana-2)); border:1px solid var(--borde); border-radius:10px; border-top:2px solid var(--sin); transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, border-color .18s; } .placa:hover{ transform:translateY(-3px); box-shadow:0 12px 28px -14px rgba(0,0,0,.85); border-color:var(--borde-vivo); } .placa:focus-visible{outline:2px solid var(--jade); outline-offset:2px} .placa[data-estado="ok"]{border-top-color:var(--ok)} .placa[data-estado="alerta"]{border-top-color:var(--alerta)} .placa[data-estado="critico"]{ border-top-color:var(--critico); background:linear-gradient(160deg, rgba(224,87,75,.10), var(--obsidiana-2)); } .placa[data-estado="sin_dato"]{border-top-color:var(--sin)} .placa .rotulo{ font-size:12px; font-weight:600; line-height:1.25; letter-spacing:.01em; color:var(--texto); overflow-wrap:anywhere; } .placa .cifra{ margin-top:auto; font-size:26px; font-weight:600; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; } .placa[data-estado="critico"] .cifra{color:var(--critico)} .placa .pie{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-tenue); } /* El plato: cuánto de lo autorizado se sirvió de verdad. */ .placa .plato{ width:100%; height:3px; margin-top:8px; border-radius:2px; background:rgba(255,255,255,.07); overflow:hidden; } .placa .plato i{display:block; height:100%; background:var(--jade); border-radius:2px} .placa[data-estado="critico"] .plato i{background:var(--critico)} .placa[data-estado="alerta"] .plato i{background:var(--alerta)} .placa .puntos{display:flex; gap:3px; margin-top:7px} .placa .puntos i{width:12px; height:3px; border-radius:2px; background:var(--sin); opacity:.55} .placa .puntos i[data-v="ok"]{background:var(--ok); opacity:1} .placa .puntos i[data-v="alerta"]{background:var(--alerta); opacity:1} .placa .puntos i[data-v="critico"]{background:var(--critico); opacity:1} .placa .insignia{ position:absolute; top:9px; right:9px; min-width:19px; height:19px; padding:0 5px; display:grid; place-items:center; border-radius:10px; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; background:rgba(224,87,75,.16); color:var(--critico); border:1px solid rgba(224,87,75,.4); } .placa .vencida{ position:absolute; top:-1px; left:-1px; width:0; height:0; border-top:12px solid var(--alerta); border-right:12px solid transparent; border-radius:10px 0 0 0; } .vacio-mosaico{ padding:44px; text-align:center; color:var(--texto-tenue); font-size:14px; border:1px dashed var(--borde); border-radius:var(--radio); } /* Aparición escalonada: da la sensación de que el tablero se enciende. */ @media (prefers-reduced-motion: no-preference){ .rejilla .placa{animation:asomar .34s cubic-bezier(.2,.8,.3,1) backwards} .rejilla .placa:nth-child(1){animation-delay:.01s} .rejilla .placa:nth-child(2){animation-delay:.02s} .rejilla .placa:nth-child(3){animation-delay:.03s} .rejilla .placa:nth-child(4){animation-delay:.04s} .rejilla .placa:nth-child(5){animation-delay:.05s} .rejilla .placa:nth-child(6){animation-delay:.06s} .rejilla .placa:nth-child(n+7){animation-delay:.07s} } @keyframes asomar{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}} /* --- alternador de vista --- */ .vistas{display:inline-flex; padding:3px; gap:2px; background:var(--obsidiana-2); border:1px solid var(--borde); border-radius:999px} .vistas button{ padding:7px 15px; font:inherit; font-size:13px; font-weight:500; cursor:pointer; color:var(--texto-medio); background:transparent; border:0; border-radius:999px; } .vistas button[aria-pressed="true"]{ background:linear-gradient(90deg, rgba(var(--jade-rgb),.24), rgba(var(--jade-rgb),.10)); color:var(--texto); box-shadow:inset 0 0 0 1px var(--jade-hondo); } .vistas button:focus-visible{outline:2px solid var(--jade); outline-offset:2px} /* --- detalle de un comedor --- */ #dlg-comedor{ border:1px solid var(--borde); border-radius:12px; padding:0; max-width:620px; width:calc(100% - 32px); background:var(--superficie); color:var(--texto); } #dlg-comedor::backdrop{background:rgba(3,10,12,.76)} #dlg-comedor .cabeza{ display:flex; gap:14px; align-items:flex-start; justify-content:space-between; padding:20px 22px 16px; border-bottom:1px solid var(--borde-tenue); } #dlg-comedor h3{margin:2px 0 4px; font-size:21px; font-weight:600; letter-spacing:-.02em} #dlg-comedor .sub{margin:0; font-size:13px; color:var(--texto-medio)} #dlg-comedor .cifras-detalle{border:0; border-radius:0; margin:0} #dlg-comedor .senales-detalle{padding:6px 22px 22px} #dlg-comedor .senal{display:flex; gap:12px; padding:11px 0; border-top:1px solid var(--borde-tenue)} #dlg-comedor .senal:first-child{border-top:0} #dlg-comedor .senal i{ width:9px; height:9px; border-radius:50%; margin-top:5px; flex:none; background:var(--sin); } #dlg-comedor .senal[data-v="ok"] i{background:var(--ok)} #dlg-comedor .senal[data-v="alerta"] i{background:var(--alerta)} #dlg-comedor .senal[data-v="critico"] i{background:var(--critico)} #dlg-comedor .senal b{display:block; font-size:14px; font-weight:600} #dlg-comedor .senal span{font-size:13px; color:var(--texto-medio)} /* ===================================================================== PANELES DE PRESENTACIÓN Para las pantallas que se proyectan: una cifra domina, el resto la acompaña. Nada compite por atención con lo que importa. ===================================================================== */ .tarjetero{ display:grid; gap:12px; margin:0 0 20px; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); } .tarjeta-dato{ position:relative; overflow:hidden; padding:18px 20px 16px; background:linear-gradient(155deg, var(--superficie), var(--obsidiana-2)); border:1px solid var(--borde); border-radius:12px; } .tarjeta-dato::after{ content:''; position:absolute; inset:auto 0 0 0; height:2px; background:linear-gradient(90deg, var(--jade-hondo), transparent); } .tarjeta-dato.mal::after{background:linear-gradient(90deg, var(--critico), transparent)} .tarjeta-dato.bien::after{background:linear-gradient(90deg, var(--jade), transparent)} .tarjeta-dato .rotulo{ display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-tenue); margin-bottom:8px; } .tarjeta-dato .valor{ display:block; font-size:38px; font-weight:600; line-height:1; letter-spacing:-.035em; font-variant-numeric:tabular-nums; } .tarjeta-dato.mal .valor{color:var(--critico)} .tarjeta-dato.bien .valor{color:var(--jade)} .tarjeta-dato .nota{ display:block; margin-top:7px; font-size:12.5px; color:var(--texto-medio); line-height:1.4; } /* Una cifra manda sobre las demás. */ .tarjeta-dato.principal{grid-column:span 2} .tarjeta-dato.principal .valor{font-size:56px} @media(max-width:640px){ .tarjeta-dato.principal{grid-column:span 1} .tarjeta-dato.principal .valor{font-size:42px} } /* Anillo de progreso para una proporción. */ .anillo{display:flex; align-items:center; gap:16px} .anillo svg{flex:none} .anillo .pista{stroke:rgba(255,255,255,.08)} .anillo .avance{stroke:var(--jade); stroke-linecap:round; transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.3,1)} .anillo .avance.mal{stroke:var(--critico)} .anillo .avance.med{stroke:var(--alerta)} .anillo .centro{ font-size:19px; font-weight:600; fill:var(--texto); letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .panel-grafica{ padding:20px 22px; margin-bottom:16px; border-radius:12px; background:linear-gradient(180deg, var(--superficie), var(--obsidiana-2)); border:1px solid var(--borde); } .panel-grafica > h2{ margin:0 0 3px; font-size:15px; font-weight:600; letter-spacing:-.01em; } .panel-grafica > p.pie{margin:0 0 18px; font-size:13px; color:var(--texto-medio)} /* Barras horizontales con el valor al final: se leen sin ejes. */ .barras{display:flex; flex-direction:column; gap:9px} .barras .linea{display:grid; grid-template-columns:minmax(120px,1.1fr) 3fr auto; gap:12px; align-items:center} .barras .etiq{font-size:13px; color:var(--texto); overflow-wrap:anywhere} .barras .canal{height:8px; border-radius:4px; background:rgba(255,255,255,.06); overflow:hidden} .barras .canal i{display:block; height:100%; border-radius:4px; background:var(--jade-hondo); transition:width .7s cubic-bezier(.2,.8,.3,1)} .barras .canal i.mal{background:var(--critico)} .barras .canal i.med{background:var(--alerta)} .barras .cifra{font-size:13px; font-variant-numeric:tabular-nums; color:var(--texto-medio); white-space:nowrap} /* --- aplicación de la voz tipográfica --- */ .titulo, .bloque h2, .panel-grafica > h2, #dlg-comedor h3, .lamina h2, .bloque-depto h2{ font-family:var(--titular); font-weight:600; letter-spacing:-.015em; } .titulo{font-size:clamp(24px, 3.2vw, 34px); line-height:1.1; font-weight:600} .bloque-depto h2{ font-family:var(--letra); /* el rail de departamento es dato, no título */ letter-spacing:.18em; } /* Las cifras siempre en la grotesca, con ancho fijo: así las columnas de números no bailan al actualizarse. */ .tarjeta-dato .valor, .cifra b, .placa .cifra, .barras .cifra, td.num, th.num, .datos b{ font-family:var(--letra); font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1, 'lnum' 1; } .epigrafe{font-family:var(--letra)} /* ===================================================================== CAPA DE ACABADO Lo que separa una herramienta funcional de una que se siente cuidada: una escala tipográfica con saltos reales, aire donde toca, profundidad apenas insinuada y transiciones que confirman lo que hizo la persona. ===================================================================== */ /* --- ritmo vertical y aire --- */ .lienzo{max-width:1360px; padding:34px 26px 64px} @media(max-width:720px){ .lienzo{padding:22px 16px 48px} } /* --- el encabezado se despega del contenido al desplazar --- */ .cabecera{ position:sticky; top:0; z-index:40; /* El prefijo -webkit- no es historia: Safari de iOS anterior a 18 solo entiende esa forma, y sin ella la cabecera no difumina nada. */ -webkit-backdrop-filter:saturate(1.3) blur(14px); backdrop-filter:saturate(1.3) blur(14px); background:linear-gradient(180deg, rgba(9,30,37,.94), rgba(9,30,37,.80)); border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s; } body.desplazado .cabecera{ border-bottom-color:var(--borde); box-shadow:0 10px 30px -18px rgba(0,0,0,.9); } /* --- la greca deja de ser una línea y se vuelve un hilo --- */ .greca{height:2px; border:0; margin:0; opacity:.9} /* --- botones: reacción física --- */ .boton, .pastilla, .pestana, .vistas button{ transition:transform .12s cubic-bezier(.2,.8,.3,1), background .16s, border-color .16s, color .16s, box-shadow .16s; } .boton:active, .pastilla:active, .pestana:active{transform:scale(.97)} .boton{ box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 8px 20px -14px rgba(var(--jade-rgb),.9); } .boton:hover{box-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 12px 26px -12px rgba(var(--jade-rgb),.8)} .boton.peligro{box-shadow:0 8px 20px -14px rgba(224,87,75,.9)} /* --- campos: el foco se siente, no solo se ve --- */ input, select, textarea{ transition:border-color .16s, box-shadow .16s, background .16s; } input:focus-visible, select:focus-visible, textarea:focus-visible{ box-shadow:0 0 0 4px rgba(var(--jade-rgb),.14); } /* --- paneles con profundidad apenas insinuada --- */ .panel, .bloque, .panel-grafica, .tarjeta-dato{ box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 20px 40px -34px rgba(0,0,0,.9); } /* --- tablas que respiran --- */ table{border-collapse:separate; border-spacing:0} thead th{ position:sticky; top:0; z-index:1; background:linear-gradient(180deg, var(--obsidiana-2), rgba(16,45,54,.96)); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-tenue); font-weight:600; padding:11px 12px; border-bottom:1px solid var(--borde); } tbody td{padding:12px; border-bottom:1px solid var(--borde-tenue); vertical-align:top} tbody tr{transition:background .14s} tbody tr:hover{background:rgba(255,255,255,.022)} tbody tr:last-child td{border-bottom:0} /* --- barra de pestañas: el indicador se desliza --- */ .pestanas{position:relative; border-bottom:1px solid var(--borde-tenue); padding-bottom:0} .pestana{border-radius:8px 8px 0 0; border-bottom:0; margin-bottom:-1px} .pestana[aria-pressed="true"]{ background:linear-gradient(180deg, rgba(var(--jade-rgb),.16), transparent); border-color:var(--borde); border-bottom:1px solid var(--superficie); color:var(--texto); font-weight:600; } /* --- avisos con jerarquía real --- */ .aviso{ border-left:3px solid var(--critico); border-radius:0 10px 10px 0; background:linear-gradient(90deg, rgba(224,87,75,.14), rgba(224,87,75,.04)); padding:13px 16px; font-size:14px; } .aviso.bien{ border-left-color:var(--jade); background:linear-gradient(90deg, rgba(var(--jade-rgb),.14), rgba(var(--jade-rgb),.04)); } /* --- vacíos que orientan en vez de disculparse --- */ .vacio, .vacia, .vacio-mosaico{ border:1px dashed var(--borde); border-radius:12px; background:rgba(255,255,255,.015); } /* --- entrada del contenido --- */ @media (prefers-reduced-motion: no-preference){ .lienzo > *{animation:entrar .4s cubic-bezier(.2,.8,.3,1) backwards} .lienzo > *:nth-child(2){animation-delay:.04s} .lienzo > *:nth-child(3){animation-delay:.08s} .lienzo > *:nth-child(n+4){animation-delay:.12s} } @keyframes entrar{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}} /* --- el título institucional con su epígrafe alineado --- */ .epigrafe{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--texto-tenue); margin:0 0 2px; } /* ===================================================================== MOVIMIENTO El movimiento aquí confirma acciones, no adorna. Curva única, tiempos cortos, y siempre respetando a quien pidió menos animación. ===================================================================== */ :root{ --curva:cubic-bezier(.2,.8,.3,1); --rapido:.16s; --medio:.28s; } /* Los diálogos entran desde donde el ojo los espera. */ dialog{animation:dlgEntra var(--medio) var(--curva)} dialog::backdrop{animation:velo var(--medio) ease} @keyframes dlgEntra{from{opacity:0; transform:translateY(14px) scale(.98)} to{opacity:1; transform:none}} @keyframes velo{from{opacity:0} to{opacity:1}} /* Las pestañas de cualquier pantalla comparten el mismo indicador. */ .pestana{position:relative; overflow:hidden} .pestana::after{ content:''; position:absolute; inset:auto 0 0 0; height:2px; background:var(--jade); transform:scaleX(0); transform-origin:center; transition:transform var(--medio) var(--curva); } .pestana[aria-pressed="true"]::after{transform:scaleX(1)} /* Filas y tarjetas responden al cursor con una elevación mínima. */ .tarjeta-dato, .bloque, .panel-grafica{ transition:transform var(--rapido) var(--curva), border-color var(--rapido); } .tarjeta-dato:hover{transform:translateY(-2px); border-color:var(--borde-vivo)} /* Las cifras grandes se cuentan al aparecer, si el navegador lo permite. */ @media (prefers-reduced-motion: no-preference){ .tarjeta-dato .valor, .cifra b, .pulso .marcas b{ animation:cifraEntra .5s var(--curva) backwards; } } @keyframes cifraEntra{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}} /* Los anillos de progreso se dibujan al entrar. */ @media (prefers-reduced-motion: no-preference){ .anillo .avance, .pulso .avance{animation:dibujar 1.1s var(--curva) backwards} } @keyframes dibujar{from{stroke-dashoffset:var(--vacio, 999)} } /* Enlaces y botones fantasma: subrayado que crece desde el centro. */ .boton.fantasma{position:relative; overflow:hidden} .boton.fantasma::after{ content:''; position:absolute; inset:auto 10px 6px 10px; height:1px; background:var(--jade); transform:scaleX(0); transition:transform var(--rapido) var(--curva); } .boton.fantasma:hover::after{transform:scaleX(1)} @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /* ===================================================================== MAPA DE GUATEMALA Los 22 departamentos con su geometría real. El color repite los cuatro estados del sistema; el tamaño de la burbuja, la cantidad de comedores. ===================================================================== */ .zona-mapa{ display:grid; gap:20px; align-items:start; margin:0 0 26px; grid-template-columns:minmax(280px, 400px) 1fr; } @media(max-width:900px){ .zona-mapa{grid-template-columns:1fr} } .caja-mapa{ padding:18px 20px 14px; border-radius:14px; background: radial-gradient(120% 120% at 50% 0%, rgba(var(--jade-rgb),.10), transparent 60%), linear-gradient(180deg, var(--superficie), var(--obsidiana-2)); border:1px solid var(--borde); } .caja-mapa h2{ font-family:var(--titular); font-size:17px; font-weight:600; margin:0 0 2px; letter-spacing:-.015em; } .caja-mapa p{margin:0 0 12px; font-size:12.5px; color:var(--texto-medio); line-height:1.5} .mapa-gt{width:100%; height:auto; display:block; overflow:visible} .mapa-gt .depto{ stroke:var(--obsidiana); stroke-width:2.2; stroke-linejoin:round; opacity:.62; cursor:pointer; transition:opacity .18s var(--curva), transform .18s var(--curva), filter .18s; transform-origin:center; } .mapa-gt .depto:hover{opacity:1; filter:brightness(1.18)} .mapa-gt .depto.activo{opacity:1; stroke:var(--texto); stroke-width:3} .mapa-gt .depto.inerte{opacity:.16; cursor:default; pointer-events:none} .mapa-gt .depto:focus-visible{outline:none; stroke:var(--jade); stroke-width:4} .mapa-gt .marca-depto-mapa{pointer-events:none} .mapa-gt .marca-depto-mapa circle{ fill:rgba(6,20,25,.72); stroke:rgba(255,255,255,.22); stroke-width:1.4; } .mapa-gt .marca-depto-mapa text{ fill:#EAF6F4; font-family:var(--letra); font-weight:600; font-variant-numeric:tabular-nums; } .mapa-gt .marca-depto-mapa.critica circle{ fill:rgba(224,87,75,.92); stroke:rgba(255,255,255,.34); } .mapa-gt .marca-depto-mapa.critica text{fill:#fff} /* Los departamentos se dibujan al entrar, uno tras otro. */ @media (prefers-reduced-motion: no-preference){ .mapa-gt .depto{animation:deptoEntra .5s var(--curva) backwards} .mapa-gt .depto:nth-child(2n){animation-delay:.05s} .mapa-gt .depto:nth-child(3n){animation-delay:.1s} .mapa-gt .depto:nth-child(5n){animation-delay:.15s} .mapa-gt .marca-depto-mapa{animation:marcaEntra .5s .35s var(--curva) backwards} } @keyframes deptoEntra{from{opacity:0} to{opacity:.62}} @keyframes marcaEntra{from{opacity:0; transform:scale(.7)} to{opacity:1; transform:none}} .leyenda-mapa{ display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; font-size:11px; color:var(--texto-tenue); } .leyenda-mapa span{display:inline-flex; align-items:center; gap:6px} .leyenda-mapa i{width:10px; height:10px; border-radius:3px; display:block} .filtro-depto{ display:inline-flex; align-items:center; gap:9px; margin-bottom:14px; padding:8px 14px; border-radius:999px; font-size:13px; background:rgba(var(--jade-rgb),.12); border:1px solid var(--jade-hondo); color:var(--texto); } .filtro-depto button{ background:none; border:0; color:var(--texto-medio); cursor:pointer; font:inherit; font-size:16px; line-height:1; padding:0; } .filtro-depto button:hover{color:var(--texto)} /* El display:inline-flex de arriba le ganaba al atributo hidden: sin ningún departamento elegido el tablero mostraba igual «Filtrando por ×» con el nombre vacío (21/09/2026). */ .filtro-depto[hidden]{display:none} /* Y la × medía 16x10 px: con el dedo, un área de 44 sin agrandar la pastilla. */ html[data-puntero="tacto"] .filtro-depto button{min-width:44px; min-height:44px; margin:-12px -14px -12px -10px} /* --- suspensión de comedores --- */ #dlg-comedor .pie-detalle{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 22px 20px; border-top:1px solid var(--borde-tenue); } #dlg-comedor .pie-detalle .nota{font-size:12.5px; color:var(--texto-tenue); flex:1; min-width:180px} #dlg-comedor .pie-detalle:empty{display:none} #dlg-suspendidos{ border:1px solid var(--borde); border-radius:12px; padding:0; max-width:620px; width:calc(100% - 32px); background:var(--superficie); color:var(--texto); } #dlg-suspendidos::backdrop{background:rgba(3,10,12,.76)} #dlg-suspendidos .cabeza{ display:flex; gap:14px; align-items:flex-start; justify-content:space-between; padding:20px 22px 16px; border-bottom:1px solid var(--borde-tenue); } #dlg-suspendidos h3{font-family:var(--titular); margin:0 0 4px; font-size:19px} #dlg-suspendidos .sub{margin:0; font-size:12.5px; color:var(--texto-medio); line-height:1.5} #dlg-suspendidos .cuerpo{padding:8px 22px 22px; max-height:60vh; overflow:auto; overscroll-behavior:contain} .susp{ display:flex; gap:14px; align-items:center; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--borde-tenue); } .susp:last-child{border-bottom:0} .susp b{display:block; font-size:14.5px; font-weight:600} .susp span{display:block; font-size:12.5px; color:var(--texto-medio)} .susp .motivo{color:var(--alerta); margin-top:3px} .susp .cuando{color:var(--texto-tenue); font-size:11.5px} /* Pestaña de la pantalla actual: sin esto, con la barra recortada por rol cuesta saber dónde está uno. */ .boton.fantasma.aqui{border-color:var(--jade); color:var(--obsidiana-luz); background:rgba(var(--jade-rgb),.12)} /* ===================================================================== AGOSTO 2026 · idiomas, marca blanca, menú móvil, mensajería, incumplimientos, quetzal del acceso y retratos en SVG. Todo lo nuevo hereda la misma paleta y la misma tipografía. ===================================================================== */ /* --- selector de idioma --- */ .sc-idioma{ width:auto; min-width:0; padding:8px 30px 8px 11px; font-size:13px; font-weight:500; color:var(--texto); background:var(--obsidiana) url("data:image/svg+xml;utf8,") no-repeat right 10px center; border:1px solid var(--borde); border-radius:8px; appearance:none; -webkit-appearance:none; cursor:pointer; } .sc-idioma:hover{border-color:var(--jade-hondo)} .sc-idioma.grande{font-size:15px; padding:11px 34px 11px 13px} /* --- aviso de traducción automática y avance de preparación --- */ #sc-i18n-aviso, #sc-i18n-progreso{ position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:70; max-width:min(560px, calc(100% - 24px)); padding:11px 14px; border-radius:10px; background:var(--superficie); border:1px solid var(--oro); color:var(--texto); font-size:13px; line-height:1.5; box-shadow:0 16px 40px -16px rgba(0,0,0,.9); display:flex; gap:12px; align-items:flex-start; } #sc-i18n-aviso button{all:unset; cursor:pointer; font-size:18px; line-height:1; color:var(--texto-medio); padding:0 4px} #sc-i18n-aviso button:hover{color:var(--texto)} #sc-i18n-progreso{flex-direction:column; gap:8px; align-items:stretch; border-color:var(--jade)} #sc-i18n-progreso b{font-size:14px} #sc-i18n-progreso small{color:var(--texto-medio); font-size:12px} #sc-i18n-progreso .barra{height:6px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden} #sc-i18n-progreso .barra i{display:block; height:100%; width:0; background:var(--jade); transition:width .4s var(--curva)} /* --- modo piloto --- */ #sc-piloto{ position:sticky; top:0; z-index:45; display:flex; gap:12px; align-items:center; justify-content:center; padding:7px 14px; font-size:12.5px; letter-spacing:.04em; text-align:center; background:linear-gradient(90deg, rgba(var(--oro-rgb),.22), rgba(var(--oro-rgb),.08)); color:#F4D98A; border-bottom:1px solid rgba(var(--oro-rgb),.4); } #sc-piloto button{all:unset; cursor:pointer; font-size:16px; line-height:1; padding:0 6px; color:#F4D98A} /* ===================================================================== CÁSCARA DE NAVEGACIÓN (navegacion.js) Encabezado = identidad + persona. Barra de pestañas debajo en escritorio/tableta. Panel lateral en celular. ===================================================================== */ :root{ --toque:48px; /* alto mínimo de un control tocable */ --cajon-ancho:min(320px, 86vw); } /* --- encabezado: una sola fila, sin enlaces --- */ .sc-cabecera .fila{padding:12px 22px; gap:14px; flex-wrap:nowrap; align-items:center} .sc-cabecera .marca-inst{flex:1; min-width:0} .sc-cabecera .marca-inst .epigrafe{white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .sc-cabecera .titulo{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:clamp(17px, 1.6vw, 22px)} .sc-persona{display:flex; align-items:center; gap:8px; flex:none; flex-wrap:nowrap} .sc-persona > div{margin-right:6px; min-width:0; max-width:220px} .sc-persona > div b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px} .sc-persona .sc-salir{min-height:36px} /* --- botón ☰ (solo celular) --- */ .sc-hamb{ display:none; flex:none; width:var(--toque); height:var(--toque); padding:0; border-radius:10px; cursor:pointer; background:transparent; border:1px solid var(--borde); color:var(--texto); flex-direction:column; align-items:center; justify-content:center; gap:5px; } .sc-hamb span{display:block; width:20px; height:2px; border-radius:2px; background:currentColor; transition:transform .2s var(--curva), opacity .2s} .sc-hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .sc-hamb[aria-expanded="true"] span:nth-child(2){opacity:0} .sc-hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .sc-hamb:hover{background:rgba(var(--jade-rgb),.12); border-color:var(--jade-hondo)} /* --- barra de pestañas (escritorio y tableta) --- */ .sc-barra{position:relative; border-top:1px solid var(--borde-tenue); background:rgba(7,22,27,.35)} .sc-barra-pista{ display:flex; gap:2px; max-width:1360px; margin:0 auto; padding:0 26px; position:relative; align-items:stretch; } @media(max-width:1000px){ .sc-barra-pista{ padding:0 14px } } .sc-pestana{ display:inline-flex; align-items:center; gap:8px; flex:none; padding:11px 13px 10px; min-height:46px; font-size:13.5px; font-weight:500; color:var(--texto-medio); text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; position:relative; background:none; border-top:0; border-left:0; border-right:0; cursor:pointer; font-family:inherit; transition:color .16s, background .16s; } .sc-pestana.oculta{display:none} /* «Más ▾»: lo que no cabe en el ancho disponible */ .sc-mas{position:relative; flex:none; margin-left:auto} .sc-mas[hidden]{display:none} .sc-mas-lista{ position:absolute; right:0; top:calc(100% + 6px); z-index:60; min-width:250px; padding:8px; background:var(--superficie); border:1px solid var(--borde); border-radius:14px; box-shadow:0 24px 60px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.03) inset; display:grid; gap:2px; transform-origin:top right; animation:sc-desplegar .18s var(--curva, ease-out); } .sc-mas-lista.dos{ grid-template-columns:1fr 1fr; min-width:440px } @keyframes sc-desplegar{ from{ opacity:0; transform:translateY(-6px) scale(.98) } to{ opacity:1; transform:none } } .sc-mas-btn .sc-caret{ width:14px; height:14px; margin-left:-2px; transition:transform var(--rapido, .16s) } .sc-mas-btn[aria-expanded="true"] .sc-caret{ transform:rotate(180deg) } .sc-mas-btn[aria-expanded="true"]{ color:var(--texto); background:rgba(255,255,255,.05) } .sc-mas-lista[hidden]{display:none} .sc-mas-lista a{ display:flex; align-items:center; gap:10px; padding:10px 12px; min-height:44px; border-radius:10px; color:var(--texto); text-decoration:none; font-size:14px; } .sc-mas-lista a svg{opacity:.8} .sc-mas-lista a:hover{background:var(--superficie-2)} .sc-mas-lista a.aqui{color:var(--obsidiana-luz); background:rgba(var(--jade-rgb),.12)} .sc-pestana svg{opacity:.75; flex:none} .sc-pestana:hover{color:var(--texto); background:rgba(255,255,255,.03)} .sc-pestana:hover svg{opacity:1} .sc-pestana.aqui{color:var(--obsidiana-luz); border-bottom-color:var(--jade); font-weight:600} .sc-pestana.aqui svg{opacity:1} .sc-pestana:focus-visible{outline:2px solid var(--obsidiana-luz); outline-offset:-2px; border-radius:6px} /* --- panel lateral (celular) --- */ #sc-velo{ /* El cajón ya frenaba el encadenado con overscroll-behavior; el velo no, y arrastrando sobre la zona oscurecida la página de atrás se movía. */ overscroll-behavior:contain; touch-action:none; position:fixed; inset:0; z-index:80; background:rgba(3,10,12,.62); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); opacity:0; transition:opacity .22s ease; } #sc-velo[data-abierto]{opacity:1} #sc-cajon{ position:fixed; top:0; bottom:0; left:0; z-index:81; width:var(--cajon-ancho); display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; background:linear-gradient(180deg, var(--obsidiana-2, #0B2730), var(--obsidiana)); border-right:1px solid var(--borde); box-shadow:24px 0 60px -20px rgba(0,0,0,.9); transform:translateX(-102%); transition:transform .22s var(--curva); padding-bottom:max(12px, env(safe-area-inset-bottom)); } #sc-cajon[data-abierto]{transform:none} #sc-cajon[hidden], #sc-velo[hidden]{display:none} /* Safari de iOS ignora overflow:hidden en para bloquear el desplazamiento de la página. Hay que fijar el cuerpo: navegacion.js guarda la posición, la escribe en `top` mientras el cajón está abierto y la devuelve al cerrar. */ body.sc-cajon-abierto{position:fixed; left:0; right:0; width:100%; overflow:hidden} .sc-cajon-cabeza{ display:flex; align-items:center; gap:12px; padding:max(14px, env(safe-area-inset-top)) 14px 14px 16px; border-bottom:1px solid var(--borde-tenue); background:url('./arte/friso.webp') right top / auto 180% no-repeat; background-blend-mode:soft-light; } .sc-cajon-retrato{width:46px; height:46px; border-radius:50%; border:2px solid var(--jade-hondo); object-fit:cover; flex:none} .sc-cajon-quien{min-width:0; flex:1} .sc-cajon-quien b{display:block; font-size:14.5px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .sc-cajon-quien span{display:block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-tenue); margin-top:2px} .sc-cajon-cerrar{all:unset; cursor:pointer; width:40px; height:40px; display:grid; place-items:center; border-radius:10px; font-size:22px; color:var(--texto-medio)} .sc-cajon-cerrar:hover{background:rgba(255,255,255,.06); color:var(--texto)} .sc-cajon-idioma{padding:10px 16px 4px} .sc-cajon-idioma .sc-idioma{width:100%; min-height:42px} .sc-cajon-lista{display:flex; flex-direction:column; padding:8px 10px; gap:2px; flex:1} .sc-cajon-lista a, .sc-cajon-accion{ display:flex; align-items:center; gap:14px; min-height:var(--toque); padding:10px 14px; border-radius:10px; color:var(--texto); text-decoration:none; font-size:15px; font-weight:500; border:0; background:none; cursor:pointer; font-family:inherit; text-align:left; width:100%; } .sc-cajon-lista a svg, .sc-cajon-accion svg{flex:none; opacity:.8} .sc-cajon-lista a:hover, .sc-cajon-accion:hover{background:rgba(255,255,255,.05)} .sc-cajon-lista a.aqui{background:rgba(var(--jade-rgb),.14); color:var(--obsidiana-luz); box-shadow:inset 3px 0 0 var(--jade)} .sc-cajon-lista a:focus-visible, .sc-cajon-accion:focus-visible{outline:2px solid var(--obsidiana-luz); outline-offset:-2px} .sc-cajon-pie{padding:8px 10px; border-top:1px solid var(--borde-tenue)} .sc-cajon-marca{margin:6px 16px 4px; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-tenue)} /* --- laptop y tableta: se compacta la persona, la barra se desplaza --- */ @media (max-width:1099px){ .sc-persona > div span{display:none} .sc-persona > div b{max-width:140px; font-size:13px} .sc-cabecera .fila{padding:10px 16px} } @media (max-width:860px){ .sc-persona > div{display:none} .sc-persona .sc-salir{display:none} } /* --- celular: ☰ + panel lateral; la barra desaparece --- */ @media (max-width:719px){ .sc-hamb{display:inline-flex} .sc-barra{display:none} .sc-cabecera .fila{padding:8px 10px 8px 10px; gap:10px} .sc-cabecera .escudo-mides{width:78px; height:26px} .sc-cabecera .marca-inst{gap:9px} .sc-cabecera .marca-inst .epigrafe{display:none} .sc-cabecera .titulo{font-size:15.5px; white-space:normal; line-height:1.2; max-height:2.4em; overflow:hidden} .sc-persona{gap:6px} .sc-persona > div{display:none} .sc-persona .retrato{width:36px; height:36px} .sc-persona .sc-salir{display:none} .lienzo{padding:16px 12px 40px} .titulo{font-size:clamp(17px, 5vw, 22px)} } /* Sin movimiento si la persona lo pidió. */ @media (prefers-reduced-motion: reduce){ #sc-cajon, #sc-velo, .sc-hamb span{transition:none} } /* --- retratos: 7 fotografías y 8 glifos en SVG --- */ .retratos.quince{grid-template-columns:repeat(auto-fill, minmax(64px, 1fr))} /* ===================================================================== ACCESO · quetzal animado ===================================================================== */ .quetzal-vivo{display:block; width:min(180px, 44vw); height:auto; margin:0 auto 4px; overflow:visible} @media (prefers-reduced-motion: no-preference){ .quetzal-vivo{animation:qFlota 5.5s ease-in-out infinite} @keyframes qFlota{0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)}} .quetzal-vivo .cola{transform-origin:100px 118px; animation:qCola 6s ease-in-out infinite} @keyframes qCola{0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2.5deg)}} } .quetzal-vivo .pupila{transition:transform .14s ease-out} .quetzal-vivo .parpado{opacity:0} .quetzal-vivo.parpadeo .parpado{opacity:1} .quetzal-vivo .ala{transition:transform .38s cubic-bezier(.34,1.4,.64,1); transform:translate(0,52px) scale(.55)} .quetzal-vivo.cubre .ala{transform:translate(0,0) scale(1)} .quetzal-vivo.cubre .pupila{transform:translate(0,0) !important} .quetzal-vivo.cubre .ceja{transform:translateY(3px)} .quetzal-vivo .ceja{transition:transform .3s} @media (prefers-reduced-motion: reduce){ .quetzal-vivo .ala, .quetzal-vivo .pupila{transition:none} } .acceso-idioma{display:flex; justify-content:center; margin:0 0 16px} /* ===================================================================== MENSAJERÍA · disposición tipo Slack ===================================================================== */ .chat-marco{ display:grid; grid-template-columns:250px 1fr; gap:0; min-height:calc(100dvh - 150px); border:1px solid var(--borde); border-radius:14px; overflow:hidden; background:linear-gradient(180deg, var(--superficie), var(--obsidiana-2)); } .chat-marco.con-hilo{grid-template-columns:250px 1fr 340px} .chat-lado{ border-right:1px solid var(--borde-tenue); background:rgba(7,22,27,.5); display:flex; flex-direction:column; min-height:0; max-height:calc(100dvh - 150px); overflow:auto; } .chat-lado h2{ font-family:var(--letra); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--texto-tenue); margin:14px 14px 6px; display:flex; justify-content:space-between; align-items:center; } .chat-lado h2 button{all:unset; cursor:pointer; font-size:16px; line-height:1; color:var(--texto-medio); padding:0 4px} .chat-lado h2 button:hover{color:var(--jade)} .chat-lado .busca{padding:12px 12px 4px} /* 16px y no menos: por debajo de esa cifra iOS amplía la página al enfocar el campo y descoloca la pantalla. Esta regla gana por especificidad a la regla general de teléfono, así que el tamaño tiene que estar aquí. */ .chat-lado .busca input{padding:9px 11px; font-size:16px; margin:0} .canal-item{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 14px; margin:0; font:inherit; font-size:14px; color:var(--texto-medio); background:none; border:0; cursor:pointer; } .canal-item:hover{background:rgba(255,255,255,.04); color:var(--texto)} .canal-item.activo{background:rgba(var(--jade-rgb),.14); color:var(--obsidiana-luz)} .canal-item .alm{opacity:.55; width:12px; text-align:center} .canal-item .nom{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .canal-item .nuevos{ min-width:20px; height:20px; padding:0 6px; display:grid; place-items:center; border-radius:10px; background:var(--jade); color:#052018; font-size:11px; font-weight:700; } .canal-item img{width:22px; height:22px; border-radius:50%; border:1px solid var(--borde-tenue)} .canal-item .punto{width:8px; height:8px; border-radius:50%; background:var(--sin); flex:none} .canal-item .punto.en-linea{background:var(--jade)} .canal-item.silenciado .nom{opacity:.55} .chat-centro{display:flex; flex-direction:column; min-width:0; min-height:0; max-height:calc(100dvh - 150px)} .chat-cabeza{ display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--borde-tenue); flex-wrap:wrap; } .chat-cabeza h2{font-family:var(--titular); font-size:18px; margin:0; letter-spacing:-.01em} .chat-cabeza .desc{font-size:12.5px; color:var(--texto-medio); flex:1; min-width:120px} .chat-cabeza .acc{display:flex; gap:6px; margin-left:auto} .chat-mensajes{flex:1; overflow:auto; overscroll-behavior:contain; padding:14px 18px; display:flex; flex-direction:column; gap:4px; scroll-behavior:smooth} .chat-dia{ align-self:center; margin:12px 0 8px; padding:3px 12px; border-radius:999px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-tenue); background:rgba(255,255,255,.04); border:1px solid var(--borde-tenue); } .msj{display:flex; gap:11px; padding:6px 8px; border-radius:10px; position:relative} .msj:hover{background:rgba(255,255,255,.03)} .msj img{width:36px; height:36px; border-radius:50%; flex:none; border:1px solid var(--borde-tenue); margin-top:2px} .msj.ia img{background:var(--jade-hondo); padding:4px; object-fit:contain} .msj .cuerpo{min-width:0; flex:1} .msj .quien{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap} .msj .quien b{font-size:14px} .msj .quien .rol{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-tenue)} .msj .quien .cuando{font-size:11.5px; color:var(--texto-tenue)} .msj .texto{font-size:14.5px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; margin-top:1px} .msj .texto .mencion{color:var(--obsidiana-luz); font-weight:600} .msj .texto a{color:var(--obsidiana-luz)} .msj.ia .texto{background:rgba(var(--jade-rgb),.08); border-left:3px solid var(--jade-hondo); padding:8px 12px; border-radius:0 8px 8px 0} .msj.eliminado .texto{color:var(--texto-tenue); font-style:italic} .msj .traduccion{ margin-top:6px; padding:8px 12px; border-left:3px solid var(--oro); border-radius:0 8px 8px 0; background:rgba(var(--oro-rgb),.08); font-size:13.5px; color:var(--texto-medio); white-space:pre-wrap; } .msj .adjunto{ display:inline-flex; gap:8px; align-items:center; margin-top:6px; padding:7px 11px; border-radius:8px; background:var(--obsidiana); border:1px solid var(--borde); color:var(--texto); text-decoration:none; font-size:13px; } .msj .adjunto img.mini{max-width:260px; max-height:180px; border-radius:6px; width:auto; height:auto; border:0; margin:0} .msj .reacciones{display:flex; gap:5px; flex-wrap:wrap; margin-top:6px} .msj .reacciones button, .msj .hilo-link{ font:inherit; font-size:12px; padding:2px 8px; border-radius:999px; cursor:pointer; background:var(--obsidiana); border:1px solid var(--borde); color:var(--texto-medio); } .msj .reacciones button.mia{border-color:var(--jade); color:var(--obsidiana-luz); background:rgba(var(--jade-rgb),.12)} .msj .hilo-link{margin-top:6px; display:inline-flex; gap:6px; align-items:center; color:var(--obsidiana-luz)} .msj .herr{ position:absolute; top:-12px; right:10px; display:none; gap:2px; padding:3px; border-radius:8px; background:var(--superficie); border:1px solid var(--borde); box-shadow:0 8px 20px -10px rgba(0,0,0,.8); } .msj:hover .herr, .msj:focus-within .herr{display:flex} .msj .herr button{all:unset; cursor:pointer; padding:4px 7px; border-radius:6px; font-size:13px; line-height:1} .msj .herr button:hover{background:var(--superficie-2)} .msj.fijado{border-left:2px solid var(--oro)} .chat-redactar{padding:10px 14px 12px; border-top:1px solid var(--borde-tenue)} .chat-redactar .caja{ display:flex; gap:8px; align-items:flex-end; padding:8px; border-radius:12px; background:var(--obsidiana); border:1px solid var(--borde); } .chat-redactar .caja:focus-within{border-color:var(--jade-hondo); box-shadow:0 0 0 4px rgba(var(--jade-rgb),.12)} .chat-redactar textarea{ flex:1; border:0; background:transparent; resize:none; min-height:40px; max-height:160px; padding:8px 6px; font-size:15px; line-height:1.45; } .chat-redactar textarea:focus-visible{outline:none; box-shadow:none} .chat-redactar .btn{ all:unset; cursor:pointer; width:38px; height:38px; display:grid; place-items:center; border-radius:9px; color:var(--texto-medio); font-size:17px; } .chat-redactar .btn:hover{background:var(--superficie-2); color:var(--texto)} .chat-redactar .btn.enviar{background:var(--jade); color:#052018; font-weight:700} .chat-redactar .btn.enviar:disabled{opacity:.45; cursor:not-allowed} .chat-redactar .pista{font-size:11.5px; color:var(--texto-tenue); margin:6px 2px 0} .chat-redactar .respondiendo{ display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--texto-medio); margin:0 0 6px; padding:6px 10px; border-left:3px solid var(--jade-hondo); background:rgba(var(--jade-rgb),.06); border-radius:0 8px 8px 0; } .chat-redactar .respondiendo button{all:unset; cursor:pointer; margin-left:auto; padding:0 6px; font-size:16px} .chat-hilo{ border-left:1px solid var(--borde-tenue); display:flex; flex-direction:column; min-height:0; max-height:calc(100dvh - 150px); background:rgba(7,22,27,.35); } .chat-hilo .chat-cabeza h2{font-size:15px} .chat-vacio{margin:auto; padding:40px 24px; text-align:center; color:var(--texto-tenue); font-size:14px; line-height:1.6} .sugerencias{ position:absolute; bottom:100%; left:0; margin-bottom:6px; z-index:30; min-width:240px; max-height:220px; overflow:auto; background:var(--superficie); border:1px solid var(--borde); border-radius:10px; padding:4px; box-shadow:0 14px 34px -14px rgba(0,0,0,.9); } .sugerencias button{ display:flex; gap:8px; align-items:center; width:100%; text-align:left; font:inherit; font-size:13.5px; padding:7px 9px; border:0; border-radius:7px; background:none; color:var(--texto); cursor:pointer; } .sugerencias button:hover, .sugerencias button.activa{background:rgba(var(--jade-rgb),.14)} .sugerencias img{width:22px; height:22px; border-radius:50%} @media (max-width:900px){ .chat-marco, .chat-marco.con-hilo{grid-template-columns:1fr; min-height:0} .chat-lado{max-height:none; border-right:0; border-bottom:1px solid var(--borde-tenue)} .chat-lado.oculto{display:none} .chat-centro{max-height:none; min-height:calc(100dvh / var(--sc-zoom, 1) - 220px)} .chat-centro.oculto{display:none} .chat-hilo{max-height:none; border-left:0; border-top:1px solid var(--borde-tenue)} .chat-volver{display:inline-flex !important} } .chat-volver{display:none} /* La mensajería era la única pantalla que dependía solo de @media (max-width:900px). Un teléfono en APAISADO mide 915 px de ancho: se saltaba el corte y recibía la maqueta de escritorio de tres columnas —el área de mensajes se quedaba en 325 px y «Volver» seguía oculto—. Se duplica por dispositivo, como hace el resto del archivo. */ html[data-dispositivo="telefono"] .chat-marco, html[data-dispositivo="telefono"] .chat-marco.con-hilo{ grid-template-columns:1fr; min-height:0 } html[data-dispositivo="telefono"] .chat-lado{ max-height:none; border-right:0; border-bottom:1px solid var(--borde-tenue) } html[data-dispositivo="telefono"] .chat-lado.oculto{ display:none } html[data-dispositivo="telefono"] .chat-centro{ max-height:none; min-height:calc(100dvh / var(--sc-zoom, 1) - 220px) } html[data-dispositivo="telefono"] .chat-centro.oculto{ display:none } html[data-dispositivo="telefono"] .chat-hilo{ max-height:none; border-left:0; border-top:1px solid var(--borde-tenue) } html[data-dispositivo="telefono"] .chat-volver{ display:inline-flex !important } /* ===================================================================== INCUMPLIMIENTOS ===================================================================== */ .inc-resumen{display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); margin:0 0 18px} .inc-resumen button{ all:unset; cursor:pointer; padding:12px 14px; border-radius:12px; text-align:left; background:linear-gradient(155deg, var(--superficie), var(--obsidiana-2)); border:1px solid var(--borde); transition:border-color .16s, transform .16s; } .inc-resumen button:hover{border-color:var(--jade-hondo); transform:translateY(-2px)} .inc-resumen button[aria-pressed="true"]{border-color:var(--jade); box-shadow:inset 0 0 0 1px var(--jade-hondo)} .inc-resumen b{display:block; font-size:26px; font-weight:600; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums} .inc-resumen span{display:block; margin-top:6px; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-tenue)} .inc-resumen button.mal b{color:var(--critico)} .inc-resumen button.toca b{color:var(--oro)} .inc-barra{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0 0 14px} .inc-barra input[type=search]{flex:1; min-width:200px; margin:0; padding:10px 12px} .inc-barra select{width:auto; margin:0; padding:10px 32px 10px 12px} .inc-lista{display:flex; flex-direction:column; gap:8px; list-style:none; margin:0; padding:0} .caso-fila{ display:grid; grid-template-columns:1fr auto; gap:8px 18px; align-items:center; cursor:pointer; padding:13px 16px; border-radius:10px; border:1px solid var(--borde); border-left:4px solid var(--sin); background:linear-gradient(180deg, var(--superficie), var(--obsidiana-2)); transition:border-color .16s, transform .16s; } .caso-fila:hover{border-color:var(--jade-hondo); transform:translateX(2px)} .caso-fila[data-estado="detectado"], .caso-fila[data-estado="devuelto_comedor"], .caso-fila[data-estado="devuelto_nutricion"]{border-left-color:var(--alerta)} .caso-fila[data-estado="informado"], .caso-fila[data-estado="valorado"]{border-left-color:var(--jade-hondo)} .caso-fila[data-estado="aprobado"], .caso-fila[data-estado="firmado"]{border-left-color:var(--jade)} .caso-fila[data-estado="resuelto"]{border-left-color:var(--texto-tenue); opacity:.82} .caso-fila[data-estado="anulado"]{border-left-color:var(--critico); opacity:.6} .caso-fila.detenido{background:linear-gradient(160deg, rgba(224,87,75,.10), var(--obsidiana-2))} .caso-fila .nombre{font-weight:600; font-size:15.5px; margin:0; display:flex; gap:8px; align-items:center; flex-wrap:wrap} .caso-fila .lugar{font-size:12.5px; color:var(--texto-medio); margin:2px 0 0} .caso-fila .folio{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; color:var(--texto-tenue)} .caso-fila .der{text-align:right; font-size:12px; color:var(--texto-tenue); display:flex; flex-direction:column; gap:4px; align-items:flex-end} .estado-pill{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; border:1px solid var(--borde); color:var(--texto-medio); background:var(--obsidiana); } .estado-pill[data-e="detectado"], .estado-pill[data-e="devuelto_comedor"], .estado-pill[data-e="devuelto_nutricion"]{color:var(--alerta); border-color:rgba(var(--oro-rgb),.5)} .estado-pill[data-e="informado"], .estado-pill[data-e="valorado"]{color:var(--obsidiana-luz); border-color:var(--jade-hondo)} .estado-pill[data-e="aprobado"], .estado-pill[data-e="firmado"]{color:var(--jade); border-color:var(--jade)} .estado-pill[data-e="resuelto"]{color:var(--texto-medio)} .estado-pill[data-e="anulado"]{color:var(--critico); border-color:rgba(224,87,75,.5)} .toca-pill{color:#052018; background:var(--oro); border-color:var(--oro)} .detenido-pill{color:var(--critico); border-color:rgba(224,87,75,.5)} .piloto-pill{color:#8a5a00; background:#fff3d6; border-color:#e0b866; border-style:dashed; font-weight:700} .circuito{display:flex; gap:4px; flex-wrap:wrap; margin-top:8px} .circuito span{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:11px; border:1px solid var(--borde-tenue); color:var(--texto-tenue); background:rgba(255,255,255,.02); } .circuito span i{width:7px; height:7px; border-radius:50%; background:var(--sin); display:inline-block} .circuito span.hecho{border-color:var(--jade-hondo); color:var(--obsidiana-luz)} .circuito span.hecho i{background:var(--jade)} .circuito span.actual{border-color:var(--oro); color:#F4D98A} .circuito span.actual i{background:var(--oro)} .circuito span.devuelto{border-color:rgba(224,87,75,.5); color:var(--critico)} .circuito span.devuelto i{background:var(--critico)} /* diálogo/pantalla del caso: informe a la izquierda, valoración a la derecha */ #dlg-caso{ border:1px solid var(--borde); border-radius:14px; padding:0; width:min(1180px, calc(100% - 24px)); max-height:calc(100dvh / var(--sc-zoom, 1) - 24px); background:var(--superficie); color:var(--texto); } #dlg-caso::backdrop{background:rgba(3,10,12,.78); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)} #dlg-caso .cabeza{ display:flex; gap:14px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; padding:18px 22px 14px; border-bottom:1px solid var(--borde-tenue); position:sticky; top:0; z-index:2; background:linear-gradient(180deg, var(--superficie), rgba(16,45,54,.96)); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } #dlg-caso .cabeza h3{font-family:var(--titular); margin:2px 0 4px; font-size:22px; letter-spacing:-.02em} #dlg-caso .cabeza .sub{margin:0; font-size:13px; color:var(--texto-medio)} /* El desplazamiento del diálogo no arrastra la página de detrás ni encadena al navegador al llegar al tope. */ #dlg-caso .cuerpo{padding:18px 22px 24px; max-height:calc(100dvh / var(--sc-zoom, 1) - 130px); overflow:auto; overscroll-behavior:contain} .dos-columnas{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start} @media (max-width:860px){ .dos-columnas{grid-template-columns:1fr} } .tarjeta-doc{ padding:16px 18px; border-radius:12px; border:1px solid var(--borde); background:linear-gradient(180deg, rgba(255,255,255,.02), transparent); } .tarjeta-doc > h4{ margin:0 0 10px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-tenue); font-weight:600; display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .tarjeta-doc > h4 .btn-traducir{margin-left:auto} .tarjeta-doc .texto-doc{font-size:14.5px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere} .tarjeta-doc .datos{display:grid; gap:6px 14px; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); margin:0 0 12px} .tarjeta-doc .datos div{font-size:13px} .tarjeta-doc .datos small{display:block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-tenue)} .tarjeta-doc.accion{border-color:var(--jade-hondo); background:linear-gradient(180deg, rgba(var(--jade-rgb),.08), transparent)} .tarjeta-doc.aviso-firma{border-color:var(--oro); border-style:dashed; background:linear-gradient(180deg, rgba(var(--oro-rgb),.10), transparent)} .tarjeta-doc.aviso-firma ol{margin:8px 0 0 20px; font-size:14px; line-height:1.7} .tarjeta-doc.devuelto{border-color:rgba(224,87,75,.5); background:linear-gradient(180deg, rgba(224,87,75,.10), transparent)} .ayuda-ia{ margin:12px 0; padding:12px 14px; border:1px dashed var(--jade); border-radius:12px; background:rgba(var(--jade-rgb),.06); } .ayuda-ia label{margin-bottom:6px} .ayuda-ia textarea{min-height:70px} .ayuda-ia .fila{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; align-items:center} .ayuda-ia .nota-ia{font-size:12px; color:var(--texto-medio); margin:6px 0 0} .btn-traducir{ font:inherit; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; color:var(--texto-medio); background:var(--obsidiana); border:1px solid var(--borde); border-radius:6px; padding:3px 8px; } .btn-traducir:hover{color:var(--obsidiana-luz); border-color:var(--jade)} .traduccion-caja{ margin-top:8px; padding:8px 12px; border-left:3px solid var(--oro); border-radius:0 8px 8px 0; background:rgba(var(--oro-rgb),.08); font-size:13.5px; color:var(--texto-medio); white-space:pre-wrap; } .formulario-caso{display:grid; gap:12px 14px; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))} .formulario-caso .c-ancho{grid-column:1 / -1} .formulario-caso > div{margin:0} .formulario-caso input, .formulario-caso select, .formulario-caso textarea{margin:0} .formulario-caso textarea{min-height:150px; line-height:1.55} .acciones-caso{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px} .eventos{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0} .eventos li{display:flex; gap:12px; padding:9px 0; border-top:1px solid var(--borde-tenue); font-size:13px} .eventos li:first-child{border-top:0} .eventos li i{width:9px; height:9px; border-radius:50%; background:var(--jade-hondo); margin-top:6px; flex:none} .eventos li[data-accion^="devuelto"] i{background:var(--critico)} .eventos li[data-accion="comentario"] i{background:var(--oro)} .eventos li b{font-weight:600} .eventos li small{display:block; color:var(--texto-tenue); font-size:11.5px; margin-top:2px} .eventos li p{margin:3px 0 0; color:var(--texto-medio); white-space:pre-wrap} .adjuntos-lista{display:flex; flex-wrap:wrap; gap:8px} .adjuntos-lista a, .adjuntos-lista .adj{ display:inline-flex; gap:8px; align-items:center; padding:7px 11px; border-radius:8px; font-size:13px; background:var(--obsidiana); border:1px solid var(--borde); color:var(--texto); text-decoration:none; } .adjuntos-lista a:hover{border-color:var(--jade-hondo)} .adjuntos-lista .adj button{all:unset; cursor:pointer; color:var(--texto-tenue); padding:0 4px} .adjuntos-lista .adj button:hover{color:var(--critico)} .subir{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px} /* Igual que la búsqueda del chat: por debajo de 16px iOS amplía al enfocar. */ .subir input[type=file]{width:auto; max-width:100%; padding:8px; font-size:16px} .seg-rejilla{display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr))} .seg-rejilla .panel-grafica{margin:0} .tabla-seg{overflow-x:auto; overscroll-behavior-x:contain} .tabla-seg td.num, .tabla-seg th.num{text-align:right} .pestanas-inc{display:flex; gap:4px; margin:0 0 16px; border-bottom:1px solid var(--borde-tenue); flex-wrap:wrap} .pestanas-inc button{ font:inherit; font-size:14px; font-weight:500; cursor:pointer; padding:10px 16px; margin-bottom:-1px; color:var(--texto-medio); background:none; border:0; border-bottom:2px solid transparent; } .pestanas-inc button[aria-pressed="true"]{color:var(--obsidiana-luz); border-bottom-color:var(--jade)} .pestanas-inc button:hover{color:var(--texto)} .registro-rapido{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:14px 16px; border-radius:12px; margin:0 0 16px; border:1px solid var(--jade-hondo); background:linear-gradient(90deg, rgba(var(--jade-rgb),.12), transparent); } .registro-rapido p{margin:0; font-size:14px; flex:1; min-width:220px} .sc-enlace-legado{display:none !important} /* ═══════════════════════════════════════════════════════════════════════════ CAPA VIVA · agosto 2026 Un aire más joven y cómodo sin cambiar la identidad (jade, obsidiana, oro, glifos): esquinas redondas, botones en píldora con reacción al tacto y destello, paneles que entran con movimiento, pestañas con indicador que se desliza, campos con foco cálido, gráficos que se animan al aparecer y transiciones entre pantallas. Respeta «reducir movimiento». Se aplica encima de todo lo anterior: mismos nombres de clase, sin tocar estructura ni JS (salvo vida.js, que añade el pulso y el escalonado). ═══════════════════════════════════════════════════════════════════════════ */ :root{ --radio:14px; /* paneles, campos, tarjetas */ --radio-boton:999px; /* píldora */ --radio-chico:10px; --curva:cubic-bezier(.22,.61,.36,1); --rebote:cubic-bezier(.34,1.56,.64,1); --rapido:.14s; --medio:.22s; --lento:.34s; --sombra:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -12px rgba(0,0,0,.55); --sombra-alta:0 1px 0 rgba(255,255,255,.06) inset, 0 22px 48px -18px rgba(0,0,0,.65); } /* ---- transición entre pantallas (navegadores modernos; el resto no nota nada) ---- */ @view-transition{ navigation:auto } @media (prefers-reduced-motion:no-preference){ ::view-transition-old(root){ animation:sc-sale .1s var(--curva) both } ::view-transition-new(root){ animation:sc-entra-pagina .16s var(--curva) both } } @keyframes sc-sale{ to{ opacity:0; transform:translateY(-6px) } } @keyframes sc-entra-pagina{ from{ opacity:0; transform:translateY(10px) } } /* ---- entrada de contenidos: los paneles aparecen con un pequeño ascenso, escalonados por vida.js (--sc-i) ---- */ @media (prefers-reduced-motion:no-preference){ .lienzo > .panel, .lienzo > section, .lienzo > .bloque, .lienzo > .rejilla > .panel, .lienzo .tarjeta-dato, .lienzo .cifra, .lienzo .panel-grafica, .lienzo > .cifras, .lienzo > .portada, .lienzo > .pulso, .lienzo > div > .bloque{ animation:sc-asciende var(--lento) var(--curva) both; animation-delay:calc(min(var(--sc-i, 0), 8) * 22ms); } .sc-lista > *{ animation:sc-asciende .26s var(--curva) both; animation-delay:calc(min(var(--sc-i, 0), 10) * 14ms) } } @keyframes sc-asciende{ from{ opacity:0; transform:translateY(14px) scale(.992) } to{ opacity:1; transform:none } } /* ---- paneles y tarjetas: redondos, con borde que respira al pasar ---- */ .panel, .bloque, .panel-grafica, .tarjeta-dato, .cifra, .placa, .comedor, details.comedor, .caso-fila, .inc-lista > li, dialog, .sc-cajon, #sc-perfil, .exito-tarjeta{ border-radius:var(--radio) !important; } .panel, .bloque, .panel-grafica, .tarjeta-dato{ box-shadow:var(--sombra); transition:transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva), border-color var(--medio); } @media (hover:hover) and (pointer:fine){ .tarjeta-dato:hover, .cifra:hover, .caso-fila:hover, .comedor:hover, .lista-videos button:hover{ transform:translateY(-3px); box-shadow:var(--sombra-alta); border-color:var(--jade-hondo); } } /* ---- botones: píldora, gradiente, brillo que recorre, pulso al tocar ---- */ .boton, .btn, .pastilla, .sc-pestana, .vistas button, .tab, button.boton, a.boton{ border-radius:var(--radio-boton) !important; } .boton{ position:relative; overflow:hidden; isolation:isolate; background:linear-gradient(135deg, var(--obsidiana-luz) -40%, var(--jade) 45%, var(--jade-hondo) 140%); color:#052018; font-weight:700; letter-spacing:.01em; box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 10px 24px -12px rgba(var(--jade-rgb),.95); transition:transform var(--rapido) var(--rebote), box-shadow var(--medio) var(--curva), filter var(--rapido), background var(--rapido); } .boton::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1; background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%); background-size:220% 100%; background-position:150% 0; transition:background-position .55s var(--curva); } .boton:hover:not(:disabled){ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 16px 30px -12px rgba(var(--jade-rgb),.9) } .boton:hover:not(:disabled)::after{ background-position:-30% 0 } .boton:active:not(:disabled){ transform:translateY(0) scale(.97) } .boton.fantasma{ background:rgba(255,255,255,.03); color:var(--texto); border:1px solid var(--borde); box-shadow:none; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .boton.fantasma::after{ display:none } .boton.fantasma:hover:not(:disabled){ background:rgba(var(--jade-rgb),.10); border-color:var(--jade-hondo); color:var(--obsidiana-luz); box-shadow:0 10px 22px -14px rgba(var(--jade-rgb),.7) } .boton.peligro{ background:rgba(224,87,75,.06); color:var(--critico); border:1px solid rgba(224,87,75,.55); box-shadow:none } .boton.peligro::after{ display:none } .boton.peligro:hover:not(:disabled){ background:rgba(224,87,75,.14); box-shadow:0 10px 22px -14px rgba(224,87,75,.8) } .boton.menudo{ padding:7px 13px; min-height:34px } /* pulso (tinta) que deja vida.js al tocar */ .sc-tinta{ position:absolute; border-radius:50%; pointer-events:none; z-index:2; background:radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 70%); transform:scale(0); animation:sc-tinta .6s var(--curva) forwards; } .boton.fantasma .sc-tinta, .boton.peligro .sc-tinta{ background:radial-gradient(circle, rgba(var(--jade-rgb),.35), rgba(var(--jade-rgb),0) 70%) } @keyframes sc-tinta{ to{ transform:scale(2.8); opacity:0 } } /* ---- campos: más suaves, foco cálido ---- */ input, select, textarea{ border-radius:var(--radio-chico); background:rgba(0,0,0,.18) } input:hover, select:hover, textarea:hover{ border-color:var(--jade-hondo) } input:focus-visible, select:focus-visible, textarea:focus-visible{ border-color:var(--jade); box-shadow:0 0 0 4px rgba(var(--jade-rgb),.16), 0 8px 20px -14px rgba(var(--jade-rgb),.6); background:rgba(0,0,0,.26); } input[type=radio], input[type=checkbox]{ border-radius:0; background:none } /* ---- marcas (chips) en píldora ---- */ .marca, .marca-depto, .estado-pill, .sugerido, .md-chip{ border-radius:999px !important } /* ---- pestañas de la cáscara: indicador que se desliza bajo la activa ---- */ .sc-pestana{ position:relative; transition:color var(--rapido), background var(--rapido), transform var(--rapido) var(--rebote) } .sc-pestana:hover{ transform:translateY(-1px) } .sc-pestana.aqui::after, .sc-pestana[aria-current="page"]::after{ content:""; position:absolute; left:18%; right:18%; bottom:4px; height:3px; border-radius:3px; background:linear-gradient(90deg, var(--jade), var(--obsidiana-luz), var(--jade)); background-size:200% 100%; animation:sc-brillo 2.6s linear infinite; } @keyframes sc-brillo{ from{ background-position:0% 0 } to{ background-position:200% 0 } } .pestana[aria-selected="true"]::before, .pestana[aria-pressed="true"]::before{ border-radius:999px } /* ---- tablas: filas que respiran ---- */ tbody tr{ transition:background var(--rapido) } tbody tr:hover{ background:rgba(var(--jade-rgb),.05) } .tabla{ border-radius:var(--radio-chico); overflow:hidden } /* ---- gráficos: barras que crecen y aros que se dibujan al aparecer ---- */ @media (prefers-reduced-motion:no-preference){ .barras .barra, .barra-progreso, .banda > span, .senal, .grafica .barra, [class*="barra-"]{ transform-origin:left center; animation:sc-crece .5s var(--curva) both; animation-delay:calc(min(var(--sc-i, 0), 10) * 25ms); } .aro .avance, svg .avance{ transition:stroke-dashoffset 1.1s var(--curva) } .tarjeta-dato .valor, .cifra b, .placa .cifra{ animation:sc-asciende .55s var(--curva) both } } @keyframes sc-crece{ from{ transform:scaleX(0); opacity:.4 } to{ transform:scaleX(1); opacity:1 } } /* ---- diálogos: entrada con rebote suave y velo difuminado ---- */ dialog[open]{ animation:sc-dialogo .32s var(--rebote) both } dialog::backdrop{ -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); background:rgba(3,10,12,.66) } @keyframes sc-dialogo{ from{ opacity:0; transform:translateY(12px) scale(.97) } to{ opacity:1; transform:none } } /* ---- cabecera: hilo de la greca animado ---- */ @media (prefers-reduced-motion:no-preference){ .greca{ background-size:200% 100%; animation:sc-greca 14s linear infinite; opacity:.9 } } @keyframes sc-greca{ from{ background-position:0 0 } to{ background-position:200% 0 } } .cabecera .titulo{ letter-spacing:-.02em } /* ---- avisos en tarjeta suave ---- */ .aviso{ border-radius:var(--radio-chico); animation:sc-asciende .35s var(--curva) both } /* ---- scroll suave y barra fina ---- */ html{ scroll-behavior:smooth } ::-webkit-scrollbar{ width:10px; height:10px } ::-webkit-scrollbar-thumb{ background:var(--superficie-2); border-radius:10px; border:2px solid var(--obsidiana) } /* ---- paletas: el cuerpo, la cabecera y los botones toman su color (sólido o degradado) de la paleta activa; en paletas claras la textura de glifos baja ---- */ body{ background:var(--cuerpo-fondo); background-attachment:fixed; color:var(--texto) } body::before{ opacity:var(--textura-opacidad) !important } .cabecera{ background:var(--cabecera-fondo) !important } body.desplazado .cabecera{ background:var(--cabecera-velo) !important } /* Donde no hay desenfoque (Safari de iOS < 18, o el filtro desactivado) el velo translúcido deja leer el contenido a través del título al desplazar. Sin filtro la cabecera se queda opaca: es preferible perder el efecto a perder el título con sol en la pantalla. Va después del velo porque aquel lleva !important y solo el orden decide entre dos declaraciones igual de fuertes. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){ body.desplazado .cabecera{ background:var(--cabecera-fondo) !important } } html[data-paleta-tipo="claro"] .cabecera{ -webkit-backdrop-filter:saturate(1.1) blur(14px); backdrop-filter:saturate(1.1) blur(14px) } html[data-paleta-tipo="claro"] .cabecera .friso{ filter:none; opacity:.08 } .boton{ background:var(--boton-fondo); color:var(--boton-texto) } html[data-paleta-tipo="claro"] .boton.fantasma{ background:rgba(0,0,0,.02) } html[data-paleta-tipo="claro"] input, html[data-paleta-tipo="claro"] select, html[data-paleta-tipo="claro"] textarea{ background:#FFFFFF } html[data-paleta-tipo="claro"] input:focus-visible, html[data-paleta-tipo="claro"] select:focus-visible, html[data-paleta-tipo="claro"] textarea:focus-visible{ background:#FFFFFF } html[data-paleta-tipo="claro"] .panel, html[data-paleta-tipo="claro"] .bloque, html[data-paleta-tipo="claro"] .panel-grafica, html[data-paleta-tipo="claro"] .tarjeta-dato{ box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 10px 30px -16px rgba(20,40,50,.25); background:var(--superficie) } html[data-paleta-tipo="claro"] .greca{ opacity:.9 } html[data-paleta-tipo="claro"] ::-webkit-scrollbar-thumb{ border-color:var(--obsidiana) } html[data-paleta-tipo="claro"] .escudo-mides{ filter:invert(1) hue-rotate(180deg) brightness(.45) contrast(1.15) } /* el escudo blanco se vuelve tinta sobre fondos claros */ html[data-paleta-tipo="claro"] dialog::backdrop{ background:rgba(20,30,40,.35) } /* muestras de paleta (perfil y propietario) */ .sc-paletas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin:6px 0 14px } .sc-paleta{ display:flex; flex-direction:column; gap:6px; padding:10px; border-radius:12px; border:2px solid var(--borde); background:var(--obsidiana-2); color:var(--texto); cursor:pointer; font:inherit; text-align:left; transition:transform var(--rapido) var(--rebote), border-color var(--rapido), box-shadow var(--rapido) } .sc-paleta:hover{ transform:translateY(-2px) } .sc-paleta[aria-pressed="true"]{ border-color:var(--jade); box-shadow:0 0 0 3px rgba(var(--jade-rgb),.2) } .sc-paleta .muestra{ display:flex; height:26px; border-radius:8px; overflow:hidden; border:1px solid rgba(0,0,0,.25) } .sc-paleta .muestra i{ flex:1 } .sc-paleta b{ font-size:13px } .sc-paleta small{ font-size:11.5px; color:var(--texto-tenue); line-height:1.3 } /* ---- reduce-motion: nada se mueve solo ---- */ @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important } .sc-tinta{ display:none } } /* ===================================================================== DISPOSITIVO (dispositivo.js): html[data-dispositivo=telefono|tableta|portatil|escritorio] y html[data-puntero=tacto|raton]. Complementa las media queries: si un teléfono pide «sitio de escritorio» o amplía la página, igual recibe su disposición. ===================================================================== */ /* Solo la raíz. Con overflow-x:hidden en el cuerpo se volvía su propia caja de desplazamiento —y una caja que crece con su contenido nunca desplaza—, así que además de recortar lo que se sale rompía el position:sticky de la cabecera. Lo ancho se alcanza deslizando dentro de su caja (.tabla, .desplazable, .tabla-seg), que es lo único que el dedo puede mover. */ html{ max-width:100vw; overflow-x:hidden } /* …y en , clip (21/09/2026). El hidden de se pasa a la ventana, y Chrome de Android no lo respeta para encoger: si algo se sale por la derecha, encoge la página entera para enseñarlo y agranda innerWidth. Lo hacía la banda de temporada, cuyo letrero entra deslizándose desde la derecha: la página quedaba encogida 14 px y se podía arrastrar de lado para siempre, porque la guirnalda y la capa —fijas, de lado a lado— se estiraban con ella y sostenían el desborde. clip recorta sin volver al cuerpo caja de desplazamiento (lo que sí hacía hidden, ver arriba): el sticky sigue vivo. Recorta lo que se sale; no lo arregla. Lo que no cabe se sigue buscando en pruebas/pantallas-en-el-telefono.mjs, que mide cada caja y no el scroll. */ body{ overflow-x:clip } img, svg, video, canvas{ max-width:100% } /* Al deslizar una tabla de lado y llegar al tope, el gesto encadenaba al navegador y disparaba «atrás»: se perdía la pantalla a media consulta. */ /* Cuatro nombres para lo mismo (.tabla, .tabla-scroll, .desplazable y .tabla-seg, la de seguimiento de incumplimientos). Renombrarlos exige tocar incumplimientos.js y varios .html; mientras tanto, comparten TODAS las reglas para que ninguna caja se quede sin deslizamiento ni sin pistas. */ .tabla, .tabla-scroll, .desplazable, .tabla-seg{ overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; max-width:100% } .tabla table, .tabla-seg table{ min-width:0 } /* — teléfono — */ html[data-dispositivo="telefono"]{ font-size:16px } html[data-dispositivo="telefono"] .sc-hamb{ display:inline-flex } html[data-dispositivo="telefono"] .sc-barra{ display:none !important } html[data-dispositivo="telefono"] .sc-cabecera .fila{ padding:8px 10px; gap:10px; max-width:none } html[data-dispositivo="telefono"] .sc-cabecera .escudo-mides{ width:78px; height:26px } html[data-dispositivo="telefono"] .sc-cabecera .marca-inst{ gap:9px } html[data-dispositivo="telefono"] .sc-cabecera .marca-inst .epigrafe{ display:none } html[data-dispositivo="telefono"] .sc-cabecera .titulo{ font-size:15.5px; white-space:normal; line-height:1.2; max-height:2.4em; overflow:hidden } html[data-dispositivo="telefono"] .sc-persona{ gap:6px } html[data-dispositivo="telefono"] .sc-persona > div, html[data-dispositivo="telefono"] .sc-persona .sc-salir{ display:none } html[data-dispositivo="telefono"] .sc-persona .retrato{ width:36px; height:36px } html[data-dispositivo="telefono"] .lienzo{ padding:14px 12px 40px; max-width:none } html[data-dispositivo="telefono"] .titulo{ font-size:clamp(17px, 5vw, 22px) } html[data-dispositivo="telefono"] h1{ font-size:clamp(22px, 6vw, 28px) } html[data-dispositivo="telefono"] .panel, html[data-dispositivo="telefono"] .bloque{ padding:14px } html[data-dispositivo="telefono"] .cifras, html[data-dispositivo="telefono"] .tarjetas, html[data-dispositivo="telefono"] .inc-resumen, html[data-dispositivo="telefono"] .sc-paletas{ grid-template-columns:1fr 1fr !important } /* .ficha-rejilla sale de esta lista: catalogo.html ya la resuelve a dos columnas en teléfono, y forzarla a una con !important dejaba huérfano al .c2{grid-column:span 2} de la misma ficha —el navegador creaba una segunda columna implícita y el diálogo se desalineaba y se desbordaba. */ html[data-dispositivo="telefono"] .rejilla, html[data-dispositivo="telefono"] .rejilla.dos, html[data-dispositivo="telefono"] .dos-columnas, html[data-dispositivo="telefono"] .zona-mapa{ grid-template-columns:1fr !important } html[data-dispositivo="telefono"] .barra{ flex-wrap:wrap; gap:8px } html[data-dispositivo="telefono"] .barra > *{ flex:1 1 auto; min-width:0 } html[data-dispositivo="telefono"] .barra input[type="date"], html[data-dispositivo="telefono"] .barra select{ min-width:0; width:auto } html[data-dispositivo="telefono"] .boton, html[data-dispositivo="telefono"] button.boton, html[data-dispositivo="telefono"] a.boton{ min-height:44px; padding:10px 16px } html[data-dispositivo="telefono"] .boton.menudo{ min-height:44px; padding:9px 12px } html[data-dispositivo="telefono"] input, html[data-dispositivo="telefono"] select, html[data-dispositivo="telefono"] textarea{ font-size:16px; min-height:44px } html[data-dispositivo="telefono"] dialog{ width:min(100vw / var(--sc-zoom, 1) - 16px, 560px); max-height:calc(100dvh / var(--sc-zoom, 1) - 16px); margin:8px auto; border-radius:14px } html[data-dispositivo="telefono"] .vistas, html[data-dispositivo="telefono"] [role="tablist"]{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px } html[data-dispositivo="telefono"] .vistas::-webkit-scrollbar, html[data-dispositivo="telefono"] [role="tablist"]::-webkit-scrollbar{ display:none } html[data-dispositivo="telefono"] .vistas button, html[data-dispositivo="telefono"] [role="tab"]{ flex:none; white-space:nowrap } html[data-dispositivo="telefono"] .tabla table{ font-size:13px } html[data-dispositivo="telefono"] .tabla th, html[data-dispositivo="telefono"] .tabla td{ padding:8px 8px } /* .caso-fila es display:grid con 1fr auto: flex-direction:column no hacía nada y el nombre del comedor seguía estrangulado contra la columna de la derecha. Se apila cambiando la rejilla, que es lo que sí manda aquí. (.acta-fila y .fila-acta no existen en ningún CSS ni en ningún HTML del repositorio —solo en la lista de exclusiones de i18n.js—: se retiran.) */ html[data-dispositivo="telefono"] .caso-fila{ grid-template-columns:1fr; justify-items:start; align-items:start; gap:8px } /* La columna derecha deja de alinearse a la derecha: ya no hay derecha. */ html[data-dispositivo="telefono"] .caso-fila .der{ text-align:left; flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 10px } html[data-dispositivo="telefono"] .placa{ min-height:96px } html[data-dispositivo="telefono"] .tip::after{ display:none } html[data-dispositivo="telefono"] .sc-mas-lista.dos{ grid-template-columns:1fr; min-width:0 } html[data-dispositivo="telefono"] #sc-perfil{ max-width:none } /* teléfono: barras de controles en columna (campo a todo lo ancho, botones compartiendo fila) */ html[data-dispositivo="telefono"] .barra > *{ flex:1 1 100%; min-width:0; max-width:100% } html[data-dispositivo="telefono"] .barra > button, html[data-dispositivo="telefono"] .barra > .boton, html[data-dispositivo="telefono"] .barra > a{ flex:1 1 calc(50% - 4px) } html[data-dispositivo="telefono"] .barra > label, html[data-dispositivo="telefono"] .barra > div{ flex:1 1 100% } html[data-dispositivo="telefono"] .barra input:not([type="checkbox"]):not([type="radio"]), html[data-dispositivo="telefono"] .barra select{ width:100%; max-width:none } html[data-dispositivo="telefono"] .panel, html[data-dispositivo="telefono"] section, html[data-dispositivo="telefono"] .bloque{ min-width:0; max-width:100% } html[data-dispositivo="telefono"] .lienzo > *{ max-width:100% } /* teléfono: cabecera sin traslapes (marca cede espacio, persona no se encoge) */ html[data-dispositivo="telefono"] .sc-cabecera .fila{ flex-wrap:nowrap; align-items:center } html[data-dispositivo="telefono"] .sc-cabecera .marca-inst{ flex:1 1 auto; min-width:0; overflow:hidden } html[data-dispositivo="telefono"] .sc-cabecera .marca-inst > div{ min-width:0 } html[data-dispositivo="telefono"] .sc-cabecera .titulo{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; font-size:clamp(14px, 4.2vw, 16px) } html[data-dispositivo="telefono"] .sc-persona{ flex:none } html[data-dispositivo="telefono"] .escudo-mides{ flex:none } /* teléfono en vertical: el nombre de la pantalla baja a su propia línea (21/09/2026). En la fila van ☰, el escudo, la persona, la campana y los mensajes, y al título le quedaban 48 px en un teléfono de 360 —«Bitác… del…»— y 95 en uno de 412 —«Informes de incumplimi…»—. Veinticinco píxeles más de cabecera (65 → 90) a cambio de saber en qué pantalla se está. El escudo y el título siguen en el mismo contenedor (.marca-inst): display:contents deja que cada uno ocupe su celda sin tocar el HTML de diecisiete páginas. En apaisado cabe todo en una fila y se queda como estaba. */ html[data-dispositivo="telefono"][data-orientacion="vertical"] .sc-cabecera .fila{ display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; grid-template-areas:"hamb escudo . persona" "titulo titulo titulo titulo"; justify-content:normal; align-items:center; row-gap:2px; } html[data-dispositivo="telefono"][data-orientacion="vertical"] .sc-cabecera .marca-inst{ display:contents } html[data-dispositivo="telefono"][data-orientacion="vertical"] .sc-cabecera .sc-hamb{ grid-area:hamb } html[data-dispositivo="telefono"][data-orientacion="vertical"] .sc-cabecera .escudo-mides{ grid-area:escudo } html[data-dispositivo="telefono"][data-orientacion="vertical"] .sc-cabecera .marca-inst > div{ grid-area:titulo; min-width:0 } html[data-dispositivo="telefono"][data-orientacion="vertical"] .sc-cabecera .sc-persona{ grid-area:persona; justify-self:end } html[data-dispositivo="telefono"][data-orientacion="vertical"] .sc-cabecera .titulo{ display:block; -webkit-line-clamp:unset; max-height:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:16px; line-height:1.3; padding:0 2px; } /* teléfono: la pieza de temporada a la derecha y más chica (21/09/2026). temporada.css la fija abajo a la IZQUIERDA con 72 px, justo donde empieza cada renglón —el nombre del comedor, la acción de la bitácora, la etiqueta del campo—, y al desplazar tapaba siempre el principio de lo que se lee. En esta app la esquina derecha está libre (los avisos van al centro). Se queda en pantalla y con su movimiento: solo cambia de lado y de tamaño; la que se asoma sobre la banda no se toca. temporada.css no se edita aquí: es la misma hoja en las cinco apps. Y al final de la página se deja el hueco que ocupa, para que lo último no quede debajo de ella. */ html[data-dispositivo="telefono"][data-temporada]{ --temporada-pieza-ancho:56px } html[data-dispositivo="telefono"][data-temporada] #temporadaPieza:not([data-modo="asoma"]):not([data-modo="espia"]):not([data-modo="percha"]){ left:auto; right:max(10px, env(safe-area-inset-right, 0px)); } html[data-dispositivo="telefono"][data-temporada-arte="si"] .lienzo{ padding-bottom:96px } /* — tableta — */ html[data-dispositivo="tableta"] .lienzo{ padding:22px 18px 56px } html[data-dispositivo="tableta"] .boton, html[data-dispositivo="tableta"] button.boton, html[data-dispositivo="tableta"] a.boton{ min-height:42px } html[data-dispositivo="tableta"] .sc-pestana{ padding:12px 12px 11px } html[data-dispositivo="tableta"][data-orientacion="vertical"] .dos-columnas, html[data-dispositivo="tableta"][data-orientacion="vertical"] .zona-mapa{ grid-template-columns:1fr } html[data-dispositivo="tableta"][data-orientacion="vertical"] .sc-persona > div span{ display:none } /* — tacto en general: objetivos de 44 px y sin efectos que dependan del hover — */ html[data-puntero="tacto"] .sc-pestana, html[data-puntero="tacto"] .sc-mas-lista a, html[data-puntero="tacto"] .pastilla, html[data-puntero="tacto"] .vistas button{ min-height:44px } html[data-puntero="tacto"] .sello{ min-width:52px; min-height:42px } html[data-puntero="tacto"] .boton:hover{ transform:none } html[data-puntero="tacto"] .tip::after{ display:none } /* El botón menudo es lo que más se toca —acciones de fila, «Cerrar» de los diálogos— y medía 34 px. */ html[data-puntero="tacto"] .boton.menudo{ min-height:44px; padding:9px 14px } /* Casillas y radios: el dibujo sube de 17 a 24 px, el mínimo de objetivo táctil de la norma y lo más que se puede sin renunciar al control nativo. El relleno NO sirve para agrandar el área de toque: Blink descarta relleno y borde en casillas y radios con apariencia nativa —comprobado en el navegador: con appearance:none el mismo relleno sí da 44×44, pero eso obligaría a dibujar a mano la palomita de todo el sistema—. El min-height propio hace falta porque la regla de teléfono pone 44 px a todos los y dejaría la casilla estirada. Los 44 px de verdad salen de la ETIQUETA que envuelve al control, que es donde el dedo aterriza: en catalogo.html la decisión «es el mismo comedor / es nuevo» vive dentro de un , y fallar ese toque cuesta un registro duplicado. */ html[data-puntero="tacto"] input[type=radio], html[data-puntero="tacto"] input[type=checkbox]{ width:24px; height:24px; min-width:24px; min-height:24px; } html[data-puntero="tacto"] label:has(> input[type=radio]), html[data-puntero="tacto"] label:has(> input[type=checkbox]){ min-height:44px } /* Mensajería: ningún control suyo entraba en este bloque y todos quedaban por debajo del objetivo táctil (enviar 38, reacciones ~25, canales ~38). */ html[data-puntero="tacto"] .canal-item{ min-height:44px; padding:10px 14px } html[data-puntero="tacto"] .chat-redactar .btn{ width:44px; height:44px } /* Las reacciones son pastillas dentro del mensaje: a 44 px dominarían la conversación entera, así que se quedan en 36 —cómodo y muy por encima del mínimo de 24 px de la norma. */ html[data-puntero="tacto"] .msj .reacciones button, html[data-puntero="tacto"] .msj .hilo-link{ min-height:36px; padding:6px 12px; font-size:13px; } /* 3 · En una pantalla táctil no hay «pasar el cursor»: las herramientas del mensaje (responder, reaccionar, fijar, borrar) estaban en display:none y solo aparecían con :hover, así que desde el celular eran inalcanzables. Tampoco bastaba :focus-within —.msj tiene tabindex="0", pero en Safari de iOS tocar un div no le da el foco—. Pasan a estar siempre a la vista, en su propia línea bajo el mensaje: flotando encima taparían el mensaje anterior. */ html[data-puntero="tacto"] .msj{ flex-wrap:wrap } html[data-puntero="tacto"] .msj .herr{ /* flex:1 1 100% (y no 1 0 100%): el margen izquierdo se suma FUERA de la base, así que sin encoger la barra sobresaldría 47px por la derecha. */ display:flex; position:static; flex:1 1 100%; min-width:0; flex-wrap:wrap; gap:4px; margin-left:47px; /* retrato 36 + hueco 11: alineado con el texto */ padding:0; background:none; border:0; box-shadow:none; } html[data-puntero="tacto"] .msj .herr button{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 6px; border-radius:10px; background:var(--obsidiana); border:1px solid var(--borde-tenue); } /* — escritorio ancho: más aire, tipografía algo mayor — */ html[data-dispositivo="escritorio"]{ font-size:16.5px } html[data-dispositivo="escritorio"] .lienzo{ max-width:1480px; padding:40px 32px 72px } html[data-dispositivo="escritorio"] .sc-barra-pista{ max-width:1480px; padding:0 32px } html[data-dispositivo="escritorio"] .cabecera .fila{ max-width:1480px } html[data-dispositivo="portatil"] .lienzo{ max-width:1360px } /* — indicador de dispositivo en el perfil — */ .sc-dispositivos{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px } .sc-dispositivos button{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; border:1.5px solid var(--borde); background:var(--obsidiana-2); color:var(--texto); font:inherit; font-size:13.5px; cursor:pointer } .sc-dispositivos button[aria-pressed="true"]{ border-color:var(--jade); background:rgba(var(--jade-rgb),.12); color:var(--obsidiana-luz); font-weight:600 } /* >>> generado: reglas de teléfono duplicadas desde @media (no editar a mano) >>> */ html[data-dispositivo="telefono"] .escudo-mides{width:104px; height:34px} html[data-dispositivo="telefono"] .tarjeta-dato.principal{grid-column:span 1} html[data-dispositivo="telefono"] .tarjeta-dato.principal .valor{font-size:42px} html[data-dispositivo="telefono"] .lienzo{padding:22px 16px 48px} html[data-dispositivo="telefono"] .sc-hamb{display:inline-flex} html[data-dispositivo="telefono"] .sc-barra{display:none} html[data-dispositivo="telefono"] .sc-cabecera .fila{padding:8px 10px 8px 10px; gap:10px} html[data-dispositivo="telefono"] .sc-cabecera .escudo-mides{width:78px; height:26px} html[data-dispositivo="telefono"] .sc-cabecera .marca-inst{gap:9px} html[data-dispositivo="telefono"] .sc-cabecera .marca-inst .epigrafe{display:none} html[data-dispositivo="telefono"] .sc-cabecera .titulo{font-size:15.5px; white-space:normal; line-height:1.2; max-height:2.4em; overflow:hidden} html[data-dispositivo="telefono"] .sc-persona{gap:6px} html[data-dispositivo="telefono"] .sc-persona > div{display:none} html[data-dispositivo="telefono"] .sc-persona .retrato{width:36px; height:36px} html[data-dispositivo="telefono"] .sc-persona .sc-salir{display:none} html[data-dispositivo="telefono"] .lienzo{padding:16px 12px 40px} html[data-dispositivo="telefono"] .titulo{font-size:clamp(17px, 5vw, 22px)} /* <<< fin generado <<< */ /* ===================================================================== ZONA SEGURA (todas las páginas declaran viewport-fit=cover) Con la muesca EN APAISADO el texto quedaba debajo de la muesca y de las esquinas redondeadas. Se corrige el eje horizontal del lienzo y de la fila de la cabecera, y el alto de la cabecera; el relleno vertical de cada dispositivo sigue mandando. Va después del bloque generado porque aquel vuelve a fijar el relleno del lienzo y solo el orden decide. ===================================================================== */ .cabecera{ padding-top:env(safe-area-inset-top, 0px) } html[data-dispositivo="telefono"] .lienzo{ padding-left:max(12px, env(safe-area-inset-left)); padding-right:max(12px, env(safe-area-inset-right)); } html[data-dispositivo="tableta"] .lienzo{ padding-left:max(18px, env(safe-area-inset-left)); padding-right:max(18px, env(safe-area-inset-right)); } html[data-dispositivo="telefono"] .sc-cabecera .fila{ padding-left:max(10px, env(safe-area-inset-left)); padding-right:max(10px, env(safe-area-inset-right)); } /* El cajón nace pegado al borde izquierdo, justo donde cae la muesca al girar. */ #sc-cajon{ padding-left:env(safe-area-inset-left, 0px) } /* ===================================================================== BOTONES CON VIDA: toda superficie pulsable responde al cursor y al toque ===================================================================== */ button:not(:disabled), .boton, a.boton, [role="button"], .sc-paleta, .sc-dispositivos button, .retratos button, .pastilla, .vistas button, .chip, .sello{ transition:transform var(--rapido) var(--rebote, cubic-bezier(.2,.8,.3,1)), box-shadow var(--medio), filter var(--rapido), background var(--rapido), border-color var(--rapido), color var(--rapido); } @media (hover:hover) and (pointer:fine){ button:not(:disabled):hover, .boton:hover, a.boton:hover, [role="button"]:hover, .sc-paleta:hover, .retratos button:hover, .pastilla:hover, .vistas button:hover, .chip:hover, .sello:hover{ transform:translateY(-1px); filter:brightness(1.06) } .boton:not(.fantasma):hover{ box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 12px 28px -10px rgba(var(--jade-rgb),.9) } .boton.fantasma:hover, .sc-pestana:hover{ background:rgba(var(--jade-rgb),.10) } } button:not(:disabled):active, .boton:active, a.boton:active, [role="button"]:active, .sc-paleta:active, .retratos button:active, .pastilla:active, .vistas button:active, .chip:active, .sello:active{ transform:scale(.96); filter:brightness(.98) } .sc-tinta{ position:absolute; border-radius:50%; background:rgba(255,255,255,.35); transform:scale(0); animation:sc-tinta .6s var(--curva, ease-out) forwards; pointer-events:none; mix-blend-mode:screen } @keyframes sc-tinta{ to{ transform:scale(1); opacity:0 } } /* teléfono: las tablas anchas se desplazan dentro de su caja en vez de apretarse */ .desplazable{ overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; max-width:100%; border-radius:var(--radio-chico, 10px) } html[data-dispositivo="telefono"] .desplazable table, html[data-dispositivo="telefono"] .tabla table, html[data-dispositivo="telefono"] .tabla-seg table{ width:max-content; min-width:100%; max-width:none } html[data-dispositivo="telefono"] .desplazable td, html[data-dispositivo="telefono"] .desplazable th, html[data-dispositivo="telefono"] .tabla td, html[data-dispositivo="telefono"] .tabla th, html[data-dispositivo="telefono"] .tabla-seg td, html[data-dispositivo="telefono"] .tabla-seg th{ max-width:240px; min-width:72px; white-space:normal } /* 6 · thead th{position:sticky; top:0} nunca se pegaba: .tabla ya era su propia caja de desplazamiento (overflow-x:auto obliga a calcular overflow-y) pero crecía con el contenido, así que no desplazaba nada y el pegado no llegaba a activarse. Con un tope de alto la tabla sí se desplaza dentro de su caja y los encabezados quedan a la vista: en una tabla larga, sin encabezado las cifras dejan de significar algo. El tope solo actúa si la tabla es más alta que él. */ html[data-dispositivo="telefono"] .tabla, html[data-dispositivo="telefono"] .tabla-scroll, html[data-dispositivo="telefono"] .desplazable, html[data-dispositivo="telefono"] .tabla-seg{ max-height:calc(72dvh / var(--sc-zoom, 1)); overflow-y:auto; } /* 11 · Pista de que la tabla se desliza. Aquí había un ::after vacío (height:0) que no pintaba nada y nadie sabía que la tabla se movía. Ahora son sombras en los bordes que solo se ven cuando queda tabla de ese lado: las dos capas «local» viajan con el contenido y tapan la sombra al llegar al tope; las «scroll» quedan clavadas al borde de la caja. Por eso la caja toma fondo propio: la tapadera tiene que ser opaca. */ html[data-dispositivo="telefono"] .tabla, html[data-dispositivo="telefono"] .tabla-scroll, html[data-dispositivo="telefono"] .desplazable, html[data-dispositivo="telefono"] .tabla-seg, html[data-dispositivo="tableta"] .tabla, html[data-dispositivo="tableta"] .tabla-scroll, html[data-dispositivo="tableta"] .desplazable, html[data-dispositivo="tableta"] .tabla-seg{ background-color:var(--obsidiana-2); background-image: linear-gradient(90deg, var(--obsidiana-2) 45%, transparent), linear-gradient(270deg, var(--obsidiana-2) 45%, transparent), linear-gradient(90deg, rgba(0,0,0,.42), transparent), linear-gradient(270deg, rgba(0,0,0,.42), transparent); background-position:left center, right center, left center, right center; background-size:26px 100%, 26px 100%, 16px 100%, 16px 100%; /* Las tapaderas se repiten en vertical: con un tope de alto la caja también desplaza hacia abajo, y según el navegador el 100% de una capa «local» se mide contra la caja y no contra todo lo desplazable. Repitiendo, cubren siempre. */ background-repeat:repeat-y, repeat-y, no-repeat, no-repeat; background-attachment:local, local, scroll, scroll; } /* teléfono: en tablas, las celdas con botones no se apilan (la fila queda de una línea y la tabla se desliza) */ html[data-dispositivo="telefono"] .tabla td:has(.boton, button), html[data-dispositivo="telefono"] .desplazable td:has(.boton, button), html[data-dispositivo="telefono"] .tabla-seg td:has(.boton, button){ white-space:nowrap; max-width:none } /* 44 y no 36: estas son las acciones de fila, el control más tocado de todos. Esta regla es más específica que el bloque táctil y si se quedaba en 36 px anulaba en silencio el objetivo de 44 justo donde más importa. */ html[data-dispositivo="telefono"] .tabla td .boton, html[data-dispositivo="telefono"] .desplazable td .boton, html[data-dispositivo="telefono"] .tabla-seg td .boton, html[data-dispositivo="telefono"] .tabla td button, html[data-dispositivo="telefono"] .tabla-seg td button{ min-height:44px; padding:8px 12px; font-size:13px; margin:2px 4px 2px 0 } html[data-dispositivo="telefono"] .tabla td, html[data-dispositivo="telefono"] .desplazable td, html[data-dispositivo="telefono"] .tabla-seg td{ vertical-align:middle } /* la nota del asistente cuando algo falló: visible, no un susurro gris */ .nota-ia.mal{ color:var(--critico); font-weight:600 } .nota-ia{ transition:color .2s } /* ══════════ MEDALLÓN · los avatares como testigos ══════════ Ejecución del mapa aprobado (arte-temporadas/aplicacion-avatares.md, §1a+1c). El avatar 320×320 entero, recortado a disco por CSS: ningún recorte nuevo. Adorno puro: ni foco, ni clic, ni lectura por lector de pantalla. HTML tipo: */ .medallon{ display:inline-block; border-radius:50%; object-fit:cover; object-position:center top; /* cabeza grande arriba: es lo que se ve */ pointer-events:none; user-select:none; flex:none; } /* ancla del pin: se añade esta clase al panel/tarjeta que lo recibe (varias tarjetas ya son position:relative; esta clase lo garantiza) */ .tiene-medallon{position:relative;} /* ── Tallas (regla aprobada: S=28/40 · M=72/56 móvil · L=128) ── */ .medallon--s {width:28px; height:28px;} /* títulos y pestañas */ .medallon--s40{width:40px; height:40px;} /* solo si la caja de icono existente mide ≥40 */ .medallon--m {width:72px; height:72px;} /* pin de tarjeta */ .medallon--l {width:128px; height:128px;} /* testigo de estado vacío */ @media (max-width:640px){ .medallon--m{width:56px; height:56px;} } /* ── Puestos ── */ /* B · pin: esquina superior derecha de la tarjeta, ligeramente girado */ .medallon--pin{ position:absolute; top:-16px; right:-12px; z-index:2; transform:rotate(6deg); } @media (max-width:640px){ .medallon--pin{top:-12px; right:-8px;} } /* D · testigo: centrado dentro del estado vacío, sin empujar el texto */ .medallon--testigo{display:block; margin:0 auto 12px;} /* E · rótulo: sustituye al icono existente de pestaña o h2. El margen negativo absorbe la diferencia con la caja de 17–19 px para NO crecer la fila (regla: no ocupa espacio nuevo). */ .medallon--rotulo{vertical-align:middle; margin:-6px 0;} /* ── Higiene común ── */ @media print{ .medallon{display:none !important;} } @media (prefers-reduced-motion:reduce){ .medallon{animation:none !important; transition:none !important;} } /* ── Vestido institucional (esta app; techo: sobriedad) ── Anillo fino jade + sombra suave; nada de calcomanía ni contornos duros. Aquí solo existen los puestos D (testigo L en vacíos) y E (S donde ya hubiera icono). Sin animación de entrada: el fade del panel ya la da. */ .medallon{ border:2px solid var(--jade-hondo, #0E7466); box-shadow:0 0 0 3px rgba(var(--jade-rgb, 61,214,166), .16), 0 6px 18px rgba(0,0,0,.35); background:var(--obsidiana-2, #0B2229); }