/* =========================================================================== Triángulo Púrpura — Índigo sobre gris Índigo y no azul: el sitio se llama Púrpura y la marca (el logo y el monito) es morada. El índigo es el punto donde el azul y el morado se dan la mano, así que el nombre deja de sonar prestado sin que la pantalla se vuelva lila. Los tokens son los del portal. Aquí solo se añaden dos tamaños de la escala (titular de bienvenida y campo de pregunta) porque en este sitio la pregunta es el dato, no una etiqueta de formulario. =========================================================================== */ :root{ /* identidad */ --tono-1:#4338CA; --tono-2:#818CF8; --tono-suave:#E7E9FD; --tono-hondo:#312E81; --tono-borde:#C7CBF7; --tono-grad:linear-gradient(90deg,#4338CA 0%,#818CF8 100%); --tono-grad-txt:linear-gradient(90deg,#4338CA 0%,#6366F1 100%); --tono-rgb:67,56,202; /* advertencia: un solo trabajo */ --avisa:#B45309; --avisa-txt:#92400e; --avisa-bg:#FEF3C7; --avisa-bg2:#FFFBEB; --avisa-borde:#FDE68A; --avisa-rgb:180,83,9; /* neutros y estados */ --fondo:#f8fafc; --panel:#fff; --hueco:#f9fafb; --tinta:#0f172a; --suave:#64748b; --tenue:#cbd5e1; --linea:rgba(2,6,23,.08); --linea-alta:rgba(2,6,23,.14); --ic-borde:#eef2ff; --ok:#15803d; --ok-bg:#f0fdf4; --ok-borde:#bbf7d0; --mal:#b91c1c; --mal-bg:#fef2f2; --mal-borde:#fecaca; /* formas */ --r-ch:10px; --r-md:14px; --r-gr:16px; --sombra:0 6px 20px rgba(15,23,42,.06); --sombra-alta:0 14px 30px rgba(15,23,42,.12); /* tipografía */ --txt:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --nota:"Newsreader",ui-serif,Georgia,"Times New Roman",serif; /* Las cuatro del buscador. Cada una tiene un trabajo y solo uno: --dice lo que dice el monito --pregunta el campo donde se escribe --lectura el resumen y las citas: es lo que de verdad se lee --rotulo la palabra grande del titular */ --dice:"Trirong",ui-serif,Georgia,"Times New Roman",serif; --pregunta:"Ruda",system-ui,-apple-system,"Segoe UI",sans-serif; --lectura:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --rotulo-gr:"Caacupe One",ui-rounded,system-ui,cursive; } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} /* El fondo no es un gris plano: son tres manchas de índigo muy diluidas sobre el mismo gris de siempre. `fixed` las deja quietas al bajar, así que se comportan como luz del cuarto y no como decoración que rueda con el texto. Todo va por debajo del 15 % de opacidad a propósito: se tiene que notar cuando lo buscas, no cuando lees. */ body{background: radial-gradient(48% 38% at 10% 4%, rgba(59,130,246,.14) 0%, transparent 70%), radial-gradient(44% 34% at 92% 10%, rgba(96,165,250,.13) 0%, transparent 72%), radial-gradient(58% 44% at 82% 92%, rgba(37,99,235,.11) 0%, transparent 74%), radial-gradient(70% 50% at 20% 78%, rgba(99,102,241,.09) 0%, transparent 72%), linear-gradient(180deg,#fcfdff 0%,var(--fondo) 42%,#e9f0fa 100%); background-attachment:fixed;background-repeat:no-repeat; color:var(--tinta);font-family:var(--txt); -webkit-font-smoothing:antialiased;padding:26px 16px 60px;min-height:100vh} .envoltura{max-width:760px;margin:0 auto} a{color:var(--tono-1)} /* ── Encabezado ─────────────────────────────────────────── */ .saludo{margin-bottom:28px} .saludo .fila{display:flex;justify-content:space-between;align-items:flex-start;gap:16px} .pildora{display:inline-flex;align-items:center;gap:7px;background:var(--tono-suave); color:var(--tono-hondo);border:1px solid var(--tono-borde);border-radius:999px; padding:5px 13px;font-size:10.5px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;text-decoration:none} .pildora .punto{width:6px;height:6px;border-radius:50%;background:var(--tono-1); animation:latido 2.6s ease-in-out infinite} @keyframes latido{0%,100%{opacity:1}50%{opacity:.25}} .reloj{font-family:var(--mono);font-size:13.5px;color:var(--tenue);padding-top:4px} h1{font-size:clamp(31px,5.2vw,46px);font-weight:800;line-height:1.04; letter-spacing:-.03em;margin:16px 0 10px} .grad{background:var(--tono-grad-txt);-webkit-background-clip:text;background-clip:text; color:transparent;padding-right:.08em;margin-right:-.08em} .saludo p{color:var(--suave);font-size:15.5px;max-width:46ch;line-height:1.55} .raya{height:2px;margin-top:22px;border-radius:2px; background:linear-gradient(90deg,#4338CA 0%,#818CF8 34%, rgba(2,6,23,.08) 34%,rgba(2,6,23,.08) 100%)} .volver{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700; color:var(--suave);background:none;border:0;cursor:pointer;font-family:var(--txt); padding:0;margin-bottom:18px;text-decoration:none} .volver:hover{color:var(--tono-1)} .et-seccion{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--suave);margin:26px 0 12px} /* ── La bienvenida: el saludo gigante de la portada ────────────────────────── Es la única pantalla donde todavía no hay nada que hacer, así que puede permitirse el gesto: el nombre a tamaño de cartel y una frase que cambia en cada visita. Va sobre `.saludo`, que aparece en media docena de pantallas más; aquí solo se añade, nunca se toca la base. OJO CON EL NOMBRE: esto NO se llama «.puerta». Ese nombre ya era de la pantalla de entrada (max-width 470 px, centrada), y al estrenarlo aquí el saludo salió encajonado en media página. Se vio al mirarlo, no al leerlo. El monito se pone al lado, alineado con la base del texto. En el teléfono desaparece: a 375 px de ancho, o cabe el saludo grande o cabe él. */ .bienvenida{animation:asomar .55s cubic-bezier(.22,1,.36,1) both} .bienvenida-fila{display:flex;align-items:flex-end;gap:20px;margin-top:18px} .bienvenida-txt{flex:1 1 auto;min-width:0} .bienvenida-monito{flex:0 0 auto} .bienvenida-monito .monito{width:128px;height:128px;cursor:default} .bienvenida-t{font-size:clamp(36px,6.6vw,66px);font-weight:800;letter-spacing:-.04em; line-height:.98;margin:0} /* La frase iba a 15-18 px en gris claro y no se leía: quedaba de pie de foto debajo de un titular de 66 px. Es lo único que cambia en cada visita, así que tiene que verse. Sube de tamaño, de peso y de contraste hasta la mitad justa del titular: 35 px contra 66 px. Más arriba compite con el saludo y la portada pierde su jerarquía; 26 px se quedaba corto y él lo dijo dos veces. El ancho cae a 26ch — a este cuerpo, un renglón largo se vuelve un párrafo, y esto es una frase suelta. */ /* OJO CON EL SELECTOR DOBLE, no es adorno. Arriba vive `.saludo p`, que fija 15.5 px y el gris `--suave` para las media docena de pantallas que usan la cabecera. Ese selector pesa (0,1,1) y `.bienvenida-frase` a secas pesa (0,1,0): gana el de arriba aunque este esté escrito después, y la frase se quedaba en 15.5 px pasara lo que pasara con el número de aquí. Se cambió el tamaño dos veces sin que se moviera nada en pantalla hasta dar con esto. Con `.bienvenida .bienvenida-frase` pesa (0,2,0) y manda. */ .bienvenida .bienvenida-frase{margin-top:18px;font-size:clamp(23px,3.9vw,35px); line-height:1.25;font-weight:500;letter-spacing:-.018em;color:#334155; max-width:26ch; animation:asomar .55s cubic-bezier(.22,1,.36,1) both;animation-delay:.14s} .bienvenida .raya{margin-top:26px} /* Los cuadros entran un pelo después que el saludo. Es medio segundo de diferencia y es lo que hace que la pantalla se sienta armada, no volcada. */ .cuadros{animation:asomar .55s cubic-bezier(.22,1,.36,1) both;animation-delay:.1s} @media (max-width:639px){ .bienvenida-monito{display:none} .bienvenida-fila{margin-top:14px} .bienvenida-t{letter-spacing:-.04em} .bienvenida .bienvenida-frase{max-width:none} } @media (prefers-reduced-motion:reduce){ .bienvenida,.bienvenida-frase,.cuadros{animation:none} } /* ── Etiquetas de área ─────────────────────────────────────────────────────── Dos primos que no son el mismo botón, y conviene tenerlo claro: `.filtro` vive en el buscador. Es un interruptor de búsqueda: encendido significa "acota por esto". Lleva el número de documentos detrás. `.eti` vive en Subir. Es una marca sobre un documento: puesta significa "este documento es de esto". Sin número. Comprobado antes de estrenar los nombres: ninguna de las dos clases existía ya en esta hoja. La que casi choca es `.niv`, de los niveles de acceso — parecida en forma y en comportamiento, pero de una sola opción a la vez, por eso no se reutiliza. Apagado es blanco con borde fino; encendido es el índigo suave de la marca con borde de color. NO se usa solo el color del texto para decir cuál está puesto: en una pantalla al sol eso no se ve. */ .filtros{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px} .filtros-atajos{display:flex;gap:6px;margin-right:2px} .filtros-atajos .mini{padding:6px 12px;font-size:12.5px} /* Casilla de verdad dentro de la píldora. El `:has(:checked)` pinta el fondo índigo: encendido se ve por el color Y por la marca, que en una pantalla al sol es la diferencia entre saberlo y adivinarlo. */ .filtro{display:inline-flex;align-items:center;gap:8px;background:var(--panel); border:1px solid var(--linea);border-radius:999px;padding:7px 14px;cursor:pointer; font-family:var(--txt);font-size:13.5px;font-weight:700;color:var(--suave); transition:.16s;line-height:1;user-select:none} .filtro:hover{border-color:var(--tono-borde);color:var(--tono-1)} .filtro input{width:15px;height:15px;margin:0;accent-color:var(--tono-1);cursor:pointer; flex:0 0 auto} .filtro:has(input:checked){background:var(--tono-suave);border-color:var(--tono-borde); color:var(--tono-hondo)} .filtro:focus-within{outline:2px solid var(--tono-2);outline-offset:2px} /* El contador. En la píldora encendida tiene que seguir leyéndose sobre el fondo índigo, así que cambia de papel, no solo de tinta. */ .filtro-n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--tenue); background:var(--hueco);border-radius:999px;padding:2px 6px;line-height:1} .filtro:has(input:checked) .filtro-n{background:#fff;color:var(--tono-1)} /* Una etiqueta sin documentos se puede marcar igual — mañana los tendrá — pero no se anuncia como si tuviera algo detrás. */ .filtro.vacio{opacity:.55} .filtros-raya{width:1px;height:20px;background:var(--linea-alta);margin:0 4px} .filtro-fuera svg{opacity:.75} /* Las marcas de Subir. Cuadradas y no de píldora: no son un filtro, y que se distingan de un vistazo evita confundir las dos pantallas. */ .etis{display:flex;flex-wrap:wrap;gap:7px} .eti{display:inline-flex;align-items:center;gap:6px;background:var(--panel); border:1px solid var(--linea);border-radius:var(--r-ch);padding:7px 11px; cursor:pointer;font-family:var(--txt);font-size:13px;font-weight:700; color:var(--suave);transition:.16s;line-height:1.2;text-align:left} .eti:hover{border-color:var(--tono-borde);color:var(--tono-1)} .eti.puesta{background:var(--tono-suave);border-color:var(--tono-borde); color:var(--tono-hondo)} /* Las del panel de mantenimiento no se pulsan para marcar: solo se retiran. */ .eti-fija{cursor:default;color:var(--tinta);padding-right:6px} .eti-fija:hover{border-color:var(--linea);color:var(--tinta)} .eti-x{background:none;border:0;cursor:pointer;font-size:17px;line-height:1; color:var(--tenue);padding:0 4px;border-radius:6px;font-family:var(--txt)} .eti-x:hover{color:var(--mal);background:var(--mal-bg)} .etis-admin{margin-bottom:26px} .etis-nueva{display:flex;gap:8px;margin-top:10px} .etis-nueva .campo-in{flex:1 1 auto;min-width:0;font-size:14px;padding:10px 12px} .etis-nueva .btn{flex:0 0 auto;padding:10px 16px;font-size:13.5px} @media (max-width:639px){ .filtro{font-size:12.5px;padding:6px 11px;gap:7px} .filtros-atajos{flex:1 1 100%} .etis-nueva{flex-direction:column} .etis-nueva .btn{width:100%;justify-content:center} } /* ── Cuadros de la portada ────────────────────────────────────────────────── DOS PUERTAS Y DOS ATAJOS. Antes esto era un bento: el Buscador se llevaba la columna entera y los otros tres se apilaban al lado. Pero al sitio se entra por dos sitios, no por uno — a preguntar o a preparar la reunión —, así que Buscador y Perlas van arriba con el mismo tamaño y el mismo peso, y Pastoreo y Subir bajan a la fila de renglones, que es lo que son: atajos. EL ORDEN DE ESTE BLOQUE IMPORTA. `.cuadro` va primero con lo común, y `.cuadro-gr` / `.cuadro-ch` después: comparten clase, y al revés gana la regla de arriba. Ya pasó una vez y el cuadro grande salió cuadrado. ────────────────────────────────────────────────────────────────────────── */ .cuadros{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch} .cuadro{position:relative;isolation:isolate;overflow:hidden; display:flex;flex-direction:column;justify-content:space-between;text-align:left; background:var(--panel);border:1px solid var(--linea);border-radius:var(--r-gr); box-shadow:var(--sombra);padding:24px;cursor:pointer;font-family:var(--txt); color:var(--tinta);text-decoration:none; transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s} /* La barra de arriba: empieza a un tercio y se llena al pasar. */ .cuadro::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;z-index:5; background:var(--tono-grad);transform-origin:left;transform:scaleX(.34); transition:transform .42s cubic-bezier(.22,1,.36,1)} .cuadro:hover::before,.cuadro:focus-visible::before{transform:scaleX(1)} /* La trama de puntos del fondo, que se desvanece hacia la esquina. */ .cuadro::after{content:"";position:absolute;inset:0;z-index:-2;opacity:.5; background-image:radial-gradient(circle at 1px 1px,var(--tono-suave) 1px,transparent 0); background-size:16px 16px; -webkit-mask-image:linear-gradient(215deg,#000 0%,transparent 62%); mask-image:linear-gradient(215deg,#000 0%,transparent 62%)} .cuadro:hover,.cuadro:focus-visible{transform:translateY(-5px); box-shadow:0 18px 40px rgba(var(--tono-rgb),.17);border-color:var(--tono-borde)} .cuadro:focus-visible{outline:2px solid var(--tono-1);outline-offset:3px} .cuadro:active{transform:translateY(-2px)} /* ── Las dos capas de efecto ────────────────────────────────────────────── Son vacíos en el HTML y no pseudo-elementos porque ::before y ::after ya están ocupados por la barra y por la trama. .fulgor la mancha de luz que sigue al cursor. portada.js le escribe --mx y --my en píxeles; sin JS (o en un teléfono) se queda en el valor de reserva y sigue siendo un degradado decente, no un agujero. .aura el borde degradado. Es un relleno de 1 px al que se le recorta el centro con dos máscaras: una pinta el cuadro entero, la otra solo la caja de contenido, y `exclude` deja nada más el marco. Es la única forma de tener un borde con degradado: border-color no admite degradados y box-shadow tampoco. */ .fulgor,.aura{position:absolute;inset:0;border-radius:inherit;pointer-events:none; opacity:0;transition:opacity .35s ease} .fulgor{z-index:0; background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%), rgba(var(--tono-rgb),.16) 0%,rgba(var(--tono-rgb),.05) 42%,transparent 70%)} .aura{z-index:4;padding:1px; background:linear-gradient(135deg,#4338CA 0%,#818CF8 42%,#C7CBF7 62%,#4338CA 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude} .cuadro:hover .fulgor,.cuadro:focus-visible .fulgor{opacity:1} .cuadro:hover .aura,.cuadro:focus-visible .aura{opacity:.9} /* El icono gigante del fondo. */ .marca{position:absolute;right:-26px;bottom:-30px;width:148px;height:148px;z-index:-1; color:var(--tono-suave);opacity:.9;transition:transform .3s ease,color .3s ease} .cuadro:hover .marca{transform:scale(1.07) rotate(-4deg);color:var(--tono-borde)} /* El icono de arriba. Al pasar se llena de degradado y se ladea un poco: es el gesto que dice «esto es un botón», no una tarjeta de adorno. */ .cuadro .ic{position:relative;z-index:1;width:46px;height:46px;border-radius:var(--r-md); background:var(--tono-suave);border:1px solid var(--tono-borde);color:var(--tono-1); display:grid;place-items:center;box-shadow:0 2px 8px rgba(var(--tono-rgb),.10); transition:transform .32s cubic-bezier(.22,1,.36,1),background .25s,color .25s, box-shadow .25s,border-color .25s} .cuadro:hover .ic{background:var(--tono-grad);color:#fff;border-color:transparent; box-shadow:0 6px 18px rgba(var(--tono-rgb),.30); transform:translateY(-2px) rotate(-6deg) scale(1.06)} .cuadro h2{font-size:clamp(28px,5.2vw,40px);font-weight:800;letter-spacing:-.03em; line-height:1;margin-top:auto} .cuadro .et{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono); font-size:11.5px;color:var(--suave);margin-top:10px} .cuadro .et .barrita{width:14px;height:2px;border-radius:2px;background:var(--tono-2)} /* Sin permiso: apagado, sin efectos y con el candado. Se quitan fulgor y aura aquí y no en el HTML para que el marcado sea el mismo en los dos casos. */ .cuadro.cerrado{cursor:not-allowed;background:var(--hueco);box-shadow:none} .cuadro.cerrado .fulgor,.cuadro.cerrado .aura{display:none} .cuadro.cerrado::before{background:var(--tenue);transform:scaleX(.34)} .cuadro.cerrado::after{background-image:radial-gradient(circle at 1px 1px,var(--linea) 1px,transparent 0)} .cuadro.cerrado:hover{transform:none;box-shadow:none;border-color:var(--linea)} .cuadro.cerrado .marca,.cuadro.cerrado:hover .marca{color:rgba(2,6,23,.05);transform:none} .cuadro.cerrado .ic,.cuadro.cerrado:hover .ic{background:#fff;border-color:var(--linea); color:var(--tenue);box-shadow:none;transform:none} .cuadro.cerrado h2{color:var(--suave)} .cuadro.cerrado .et{color:var(--avisa-txt)} .cuadro.cerrado .et .barrita{background:var(--avisa)} /* ── Los dos grandes ────────────────────────────────────────────────────── */ /* min-height y no aspect-ratio: los dos tienen que medir lo mismo aunque uno lleve dos renglones más de texto, y en el grid `stretch` ya los iguala. El mínimo existe para que en pantallas anchas no queden dos tarjetas chatas. */ .cuadro-gr{padding:28px 28px 24px;min-height:344px} .cuadro-gr h2{font-size:clamp(28px,3.7vw,40px);margin-top:0;line-height:1.02} .cuadro-gr p{color:var(--suave);font-size:14.5px;line-height:1.5;max-width:31ch;margin-top:10px} .cuadro-gr-txt{margin-top:auto;position:relative;z-index:1} .cuadro-gr .et{margin-top:14px} .cuadro-gr.cerrado h2,.cuadro-gr.cerrado p{color:var(--suave)} /* La pista de «entra por aquí». Aparece al pasar por encima; en el teléfono se deja fija, porque ahí no hay cursor que la despierte. */ /* `flex` y no `inline-flex`: al lado va la línea de datos, que sí es inline, y las dos se pegaban en el mismo renglón — «17,162 fragmentos BUSCAR →». Un flex es de nivel bloque y se baja solo; el `width:fit-content` evita que el área del subrayado se estire a todo el ancho de la tarjeta. */ .cuadro-ir{display:flex;width:fit-content;align-items:center;gap:7px;margin-top:16px; font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.07em; text-transform:uppercase;color:var(--tono-1); opacity:0;transform:translateY(7px); transition:opacity .3s ease,transform .3s cubic-bezier(.22,1,.36,1)} .cuadro-gr:hover .cuadro-ir,.cuadro-gr:focus-visible .cuadro-ir{opacity:1;transform:none} .cuadro-ir svg{transition:transform .3s cubic-bezier(.22,1,.36,1)} .cuadro-gr:hover .cuadro-ir svg{transform:translateX(4px)} /* El arte de cada uno: el monito en el Buscador, la gema en Perlas. Va en la esquina de abajo a la derecha, debajo del texto (z-index 0 contra 1) para que si algún día el texto crece, gane el texto. */ .cuadro-arte{position:absolute;right:4px;bottom:6px;z-index:0;pointer-events:none; transition:transform .45s cubic-bezier(.22,1,.36,1)} .cuadro-gr:hover .cuadro-arte{transform:translateY(-5px) scale(1.05)} .cuadro-arte .monito{width:134px;height:134px;cursor:inherit} .monito.curioso .lupa{opacity:1;transform:translate(-26px,26px) rotate(-8deg)} .cuadro-gr:hover .monito.curioso .lupa{animation:lupa-barre 2.2s ease-in-out infinite} .cuadro-gr:hover .monito.curioso .ojo{animation:mirar 2.2s ease-in-out infinite} /* La joya de Perlas. Se llama .joya y NO .gema: `.gema` ya estaba tomada por el dibujo de la firma de la puerta (más abajo en este archivo), y como esa regla va después, le ganaba a esta y la joya salía del tamaño equivocado. Es el segundo choque de nombre del proyecto, después de `.marca`. Flota siempre —despacio, para que se vea viva sin pedir atención— y el destello solo se enciende al pasar por encima. */ .cuadro-arte .joya{width:132px;height:132px;display:block; animation:joya-flota 6s ease-in-out infinite} @keyframes joya-flota{ 0%,100%{transform:translateY(0) rotate(0deg)} 50% {transform:translateY(-7px) rotate(2.5deg)}} .joya-destello{opacity:0;transform-origin:63px 40px} .cuadro-gr:hover .joya-destello{animation:joya-brilla 1.9s ease-in-out infinite} @keyframes joya-brilla{ 0%,100%{opacity:0;transform:scale(.5) rotate(0deg)} 45% {opacity:.95;transform:scale(1.15) rotate(35deg)}} .cuadro-perlas.cerrado .joya{animation:none;filter:grayscale(1);opacity:.4} /* ── Los chicos ─────────────────────────────────────────────────────────── */ /* Son renglones, no cuadrados. El `justify-content` se repite porque la base reparte en vertical (space-between) y al girar la fila mandaba el texto al otro extremo del renglón. */ .cuadro-ch{flex-direction:row;align-items:center;justify-content:flex-start; gap:14px;padding:16px 18px} .cuadro-ch h2{font-size:20px;margin-top:0} .cuadro-ch .et{margin-top:3px} .cuadro-ch-txt{min-width:0;position:relative;z-index:1} .cuadro-ch .ic{width:38px;height:38px;flex:0 0 auto} /* Sin icono gigante al fondo: en un renglón de 70 px de alto no es textura, es un garabato encima del nombre. */ .cuadro-ch .marca{display:none} .cuadro-ch .llave{top:50%;right:16px;transform:translateY(-50%);padding:5px} .llave{position:absolute;top:24px;right:24px;color:var(--avisa);background:var(--avisa-bg2); border:1px solid var(--avisa-borde);border-radius:999px;padding:6px;display:grid;place-items:center} /* ── Tarjetas ───────────────────────────────────────────── */ .tarjeta{position:relative;background:var(--panel);border:1px solid var(--linea); border-radius:var(--r-gr);box-shadow:var(--sombra);overflow:hidden;margin-bottom:18px} .tarjeta-cab{background:var(--tono-grad);color:#fff;padding:12px 18px; display:flex;align-items:center;justify-content:space-between;gap:12px} .tarjeta-cab .que{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase} .tarjeta-cab .dato{font-family:var(--mono);font-size:12.5px;opacity:.9} .tarjeta-cuerpo{padding:22px 18px} /* ── Campos ─────────────────────────────────────────────── */ .campo-et{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--suave);margin-bottom:8px} .campo-in{width:100%;font-family:var(--txt);font-size:16px;font-weight:600;color:var(--tinta); background:var(--hueco);border:1px solid var(--linea);border-radius:var(--r-md); padding:13px 15px;outline:none;transition:.15s} .campo-in:focus{background:var(--panel);border-color:var(--tono-2); box-shadow:0 0 0 4px rgba(var(--tono-rgb),.12)} .campo-in.mono{font-family:var(--mono);font-size:15px} .campo-mal{display:block;font-size:13px;color:var(--mal);margin-top:7px} .campo-in.mal{background:var(--mal-bg);border-color:var(--mal-borde)} .ayuda{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--suave);margin-top:7px} .ayuda .chispa{color:var(--tono-1)} /* el campo de pregunta: aquí la pregunta es el dato */ .campo-nota{position:relative} .campo-nota .ic{position:absolute;left:17px;top:50px;color:var(--tono-1); width:26px;height:26px;pointer-events:none} textarea.campo-in.nota{min-height:112px;resize:vertical;font-family:var(--nota); font-size:clamp(18px,2.6vw,21px);line-height:1.5;font-weight:400; letter-spacing:-.01em;padding:18px 18px 18px 56px} textarea.campo-in.nota::placeholder{color:var(--tenue)} .campo-nota-pie{display:flex;justify-content:space-between;gap:12px; margin-top:10px;font-size:13.5px;color:var(--suave)} .campo-nota-pie .cuenta{font-family:var(--mono);color:var(--tenue)} /* ── Botones ────────────────────────────────────────────── */ .acciones{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap} .btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:14px 24px; font-size:17px;font-weight:700;font-family:var(--txt);border:1px solid transparent; cursor:pointer;transition:.15s;text-decoration:none} .btn-color{background:var(--tono-1);color:#fff;box-shadow:0 4px 14px rgba(var(--tono-rgb),.25)} .btn-color:hover{background:var(--tono-hondo)} .btn-color[disabled]{opacity:.5;cursor:progress} .btn-liso{background:var(--panel);color:var(--tinta);border-color:var(--linea-alta)} .btn-liso:hover{background:var(--hueco)} .mini{border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:700; font-family:var(--txt);cursor:pointer;transition:.15s;border:1px solid; background:var(--panel);border-color:var(--linea);color:var(--tinta)} .mini:hover{border-color:var(--tono-borde);background:var(--hueco)} .mini.si{background:var(--avisa);color:#fff;border-color:var(--avisa)} .mini.no{background:#fff;color:var(--avisa-txt);border-color:var(--avisa-borde)} /* ── Respuesta ──────────────────────────────────────────── */ .cita{font-family:var(--nota);font-size:clamp(17px,2.2vw,19.5px);line-height:1.66; color:var(--tinta);border-left:4px solid var(--tono-2);padding-left:18px} .ref{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px} .ref .fuente{font-family:var(--mono);font-size:14px;color:var(--tono-hondo); background:var(--tono-suave);border:1px solid var(--tono-borde);border-radius:999px;padding:4px 11px} .ref .fecha{font-family:var(--mono);font-size:14px;color:var(--suave)} .sello{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:4px 10px} .sello.vigente{color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok-borde)} .divisor{height:1px;background:var(--linea);margin:20px 0} .resumen{font-family:var(--lectura);font-size:18.5px;line-height:1.62;color:var(--tinta)} /* ── Avisos (el ámbar, con su fecha o su motivo detrás) ─── */ .alerta-vence,.panel-aviso{display:flex;gap:11px;align-items:flex-start; background:var(--avisa-bg2);border:1px solid var(--avisa-borde); border-left:3px solid var(--avisa);border-radius:var(--r-ch);padding:12px 14px;margin-top:14px} .alerta-vence>svg,.panel-aviso>svg{flex:0 0 auto;color:var(--avisa);margin-top:2px} .alerta-vence p,.panel-aviso p{font-size:14.5px;line-height:1.55;color:var(--avisa-txt)} .panel-aviso h3{font-size:15.5px;font-weight:800;color:var(--avisa-txt);margin-bottom:5px} .alerta-vence b,.panel-aviso b{font-family:var(--mono);font-weight:700} .aviso-botones{display:flex;gap:9px;margin-top:13px;flex-wrap:wrap} .panel-mal{background:var(--mal-bg);border:1px solid var(--mal-borde);border-left:3px solid var(--mal); border-radius:var(--r-ch);padding:12px 14px;font-size:14.5px;color:var(--mal);margin-top:14px} /* ── Zona de soltar ─────────────────────────────────────── */ .soltar{position:relative;overflow:hidden;background:var(--panel); border:2px dashed var(--tono-borde);border-radius:var(--r-gr); padding:38px 24px;text-align:center;cursor:pointer;transition:.2s} .soltar::after{content:"";position:absolute;inset:0;z-index:0;opacity:.5; background-image:radial-gradient(circle at 1px 1px,var(--tono-suave) 1px,transparent 0); background-size:16px 16px; -webkit-mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 72%); mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 72%)} .soltar>*{position:relative;z-index:1} .soltar:hover,.soltar.encima{border-color:var(--tono-2);background:#fff;box-shadow:var(--sombra-alta)} .soltar .ic{width:60px;height:60px;margin:0 auto 16px;border-radius:var(--r-md); background:var(--tono-grad);color:#fff;display:grid;place-items:center; box-shadow:0 6px 18px rgba(var(--tono-rgb),.28)} .soltar h2{font-size:28px;font-weight:800;letter-spacing:-.025em;margin-bottom:8px} .soltar p{font-size:15.5px;color:var(--suave);line-height:1.55} .formatos{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:16px} .fmt{font-family:var(--mono);font-size:11.5px;color:var(--tono-hondo);background:var(--tono-suave); border:1px solid var(--tono-borde);border-radius:999px;padding:4px 11px} .fmt.mejor{background:var(--tono-1);color:#fff;border-color:var(--tono-1)} /* ── Cifras ─────────────────────────────────────────────── */ .cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px} .cifra{background:var(--hueco);border:1px solid var(--linea);border-radius:var(--r-md);padding:14px 13px} .cifra .n{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1; background:var(--tono-grad-txt);-webkit-background-clip:text;background-clip:text; color:transparent;padding-right:.08em;margin-right:-.08em} .cifra .q{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--suave);margin-top:7px;line-height:1.35} /* ── Niveles de acceso ──────────────────────────────────── */ .niveles{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} .niveles.dos{grid-template-columns:repeat(2,1fr)} .niv{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r-md); padding:13px 11px;cursor:pointer;text-align:left;font-family:var(--txt);transition:.15s} .niv:hover{border-color:var(--tono-borde);background:var(--hueco)} .niv .num{display:block;font-family:var(--mono);font-size:11.5px;color:var(--tenue)} .niv .nom{display:block;font-size:14.5px;font-weight:700;margin-top:5px;line-height:1.25} .niv.puesto{background:var(--tono-suave);border-color:var(--tono-1); box-shadow:0 0 0 3px rgba(var(--tono-rgb),.13)} .niv.puesto .num{color:var(--tono-1)} .niv.puesto .nom{color:var(--tono-hondo)} /* ── Listas ─────────────────────────────────────────────── */ .sugerencias{display:flex;flex-direction:column;gap:8px} .sug{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--panel); border:1px solid var(--linea);border-radius:999px;padding:14px 20px;font-family:var(--txt); font-size:15.5px;color:var(--tinta);line-height:1.4;cursor:pointer;transition:.15s} .sug:hover{border-color:var(--tono-borde);background:var(--hueco);transform:translateX(2px)} .sug svg{flex:0 0 auto;color:var(--tono-1)} .recientes{display:grid;gap:9px} .rec{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--linea); border-radius:var(--r-md);padding:13px 15px} .rec .pt{width:8px;height:8px;border-radius:50%;background:var(--tono-2);flex:0 0 auto} .rec .t{font-size:15px;font-weight:700} .rec .m{font-family:var(--mono);font-size:11.5px;color:var(--tenue);margin-top:2px} .rec .niv-eti{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--tono-hondo); background:var(--tono-suave);border:1px solid var(--tono-borde);border-radius:999px; padding:4px 10px;white-space:nowrap} /* El renglón se abre para corregir. En vez de una pantalla aparte, el formulario cae debajo del propio documento: así se ve qué se está tocando sin tener que acordarse de cuál era. El renglón pasa a rejilla porque el formulario ocupa toda la anchura y en fila se metía entre el título y la etiqueta de nivel. */ .rec{flex-wrap:wrap} .rec-datos{min-width:0;flex:1 1 auto} /* El
es el que abre. Cerrado ocupa lo que el botón; abierto se queda con el renglón entero para el formulario. */ .rec-editor{flex:0 0 auto;min-width:0} .rec-editor[open]{flex:1 1 100%} .rec-editor > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center} .rec-editor > summary::-webkit-details-marker{display:none} .rec-editor[open] > summary{margin-bottom:2px} .rec-editor[open]{border-top:1px solid transparent} .rec:has(.rec-editor[open]){border-color:var(--tono-borde);box-shadow:var(--sombra)} .rec-forma{margin-top:12px;padding-top:13px;border-top:1px solid var(--linea); animation:panel-entra .2s ease-out} .rec-forma .campo-arriba{margin-top:12px} .rec-forma .acciones{display:flex;gap:9px;margin-top:14px} .rec-forma .niv{padding:9px 10px} .rec-aviso:not(:empty){margin-top:12px} @media (max-width:560px){ .rec-forma .acciones{flex-direction:column} .rec-forma .acciones .btn{width:100%;justify-content:center} } /* ── La biblioteca: la lista de lo subido ──────────────────────────────────── Vivía en `.subir-lado`, la columna de 320 px. Con cien documentos era inservible y Óscar lo dijo con esas palabras. Ahora ocupa el ancho entero debajo de la zona de subida, y la columna estrecha se queda solo con el panel de etiquetas, que sí cabe. OJO CON LOS NOMBRES: `.rec-eti` y no `.marca-eti`. Ya existe `.marca` —el icono gigante del fondo de los cuadros de la portada— y ya pasó una vez que una clase nueva llamada así se comiera aquello. Todo lo de aquí lleva el prefijo de su sitio. */ .biblioteca{margin-top:38px} .biblio-cab{display:flex;align-items:center;gap:10px} .biblio-cab .et-seccion{margin:0} .biblio-total{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--tono-1); background:var(--tono-suave);border:1px solid var(--tono-borde);border-radius:999px; padding:3px 9px;line-height:1} .biblio-barra{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 12px} .biblio-buscar{display:flex;align-items:center;gap:9px;flex:1 1 260px;min-width:0; background:var(--panel);border:1px solid var(--linea);border-radius:999px;padding:0 16px} .biblio-buscar:focus-within{border-color:var(--tono-1)} .biblio-buscar svg{flex:0 0 auto;color:var(--tenue)} .biblio-buscar:focus-within svg{color:var(--tono-1)} .biblio-buscar input{flex:1 1 auto;min-width:0;border:0;outline:none;background:none; font-family:var(--txt);font-size:15px;color:var(--tinta);padding:12px 0} .biblio-buscar input::-webkit-search-cancel-button{cursor:pointer} .biblio-cuenta{font-family:var(--mono);font-size:12px;color:var(--tenue);margin-left:auto} .biblio-todos{flex:0 0 auto} .biblio-nada{color:var(--suave);font-size:15px;padding:22px 2px} /* La casilla de selección. Grande a propósito: se van a marcar decenas seguidas y un cuadradito de 13 px se falla con el dedo. */ /* Pegada arriba y no al centro: el renglón creció con las etiquetas debajo del título, y una casilla centrada quedaba a la altura de la fecha, lejos del nombre que en realidad se está marcando. */ .rec-sel{flex:0 0 auto;display:inline-flex;align-self:flex-start;margin-top:3px; cursor:pointer;padding:2px} .rec-check{width:18px;height:18px;accent-color:var(--tono-1);cursor:pointer;margin:0} .rec:has(.rec-check:checked){border-color:var(--tono-borde);background:var(--tono-suave)} /* Las etiquetas puestas, visibles sin abrir el renglón. No se pulsan: son una lectura. Por eso no llevan el aspecto de botón de `.eti`. */ .rec-marcas{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px} .rec-eti{font-size:11px;font-weight:700;line-height:1;padding:4px 8px;border-radius:6px; color:var(--tono-hondo);background:var(--tono-suave);border:1px solid var(--tono-borde)} .rec-eti-sin{color:var(--tenue);background:var(--hueco);border-color:var(--linea)} /* La barra del lote. Pegada al fondo mientras se baja por la lista: con cien renglones, marcar arriba y tener que volver arriba para aplicar sería peor que ir de uno en uno. */ .lote{position:sticky;bottom:14px;z-index:5;display:flex;flex-wrap:wrap;align-items:center; gap:10px;margin:12px 0;padding:12px 16px;background:var(--panel); border:1px solid var(--tono-borde);border-radius:999px;box-shadow:var(--sombra-alta)} .lote-n{font-size:14px;font-weight:700;color:var(--tinta);white-space:nowrap} .lote-n b{font-family:var(--mono);color:var(--tono-1)} .lote .campo-in.lote-eti{flex:0 1 auto;width:auto;min-width:170px;padding:9px 12px; font-size:14px;border-radius:999px} .lote .btn{padding:9px 18px;font-size:13.5px} .lote-aviso{flex:1 1 100%;font-size:13px;color:var(--suave);line-height:1.4} .lote-aviso:empty{display:none} @media (max-width:639px){ .lote{border-radius:var(--r-md);bottom:8px} .lote .btn,.lote .campo-in.lote-eti{flex:1 1 auto;justify-content:center} .biblio-cuenta{margin-left:0} } /* ── Discursos: el guion y su bosquejo ─────────────────────────────────────── OJO CON LOS NOMBRES. Esto se llamó `.pestanas` y `.pest` durante media hora y no pintaba nada: esas dos clases YA EXISTEN más abajo en esta hoja, en el control de dos columnas con guía deslizante, y al estar después ganaban. Se vio mirando los estilos calculados, no leyendo el CSS. Todo lo de aquí lleva el prefijo `guion-`. Dos pestañas sobre el mismo trabajo. «El discurso» es lo que se lee en la plataforma; «El bosquejo» es la versión corta para repasar. No son dos documentos: uno es el índice del otro. EL GUION SE LEE DE PIE, A UN METRO DE DISTANCIA. Por eso va más grande que cualquier otro texto del sitio y con el renglón muy suelto: perder la línea a media frase delante de la congregación es el fallo que hay que evitar. */ .guion-pes{display:flex;align-items:center;gap:8px;margin:26px 0 16px} .guion-pes-b{background:var(--panel);border:1px solid var(--linea);border-radius:999px; padding:9px 18px;cursor:pointer;font-family:var(--txt);font-size:14px;font-weight:700; color:var(--suave);transition:.16s} .guion-pes-b:hover{border-color:var(--tono-borde);color:var(--tono-1)} .guion-pes-b.puesta{background:var(--tono-suave);border-color:var(--tono-borde);color:var(--tono-hondo)} .guion-dato{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--tenue)} .guion-pes .mini{flex:0 0 auto;padding:7px 14px;font-size:13px} /* La barra de tramos. Se enseña mientras escribe y se apaga al terminar: una barra al 100% que se queda ahí para siempre solo ocupa sitio. */ .guion-progreso{margin-bottom:18px;transition:opacity .4s} .guion-progreso.acabado{opacity:.45} .guion-barra{height:4px;background:var(--hueco);border-radius:999px;overflow:hidden} .guion-barra i{display:block;height:100%;width:0;border-radius:999px; background:var(--tono-grad);transition:width .5s ease-out} .guion-paso{margin-top:8px;font-family:var(--mono);font-size:12px;color:var(--suave)} .guion{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r-md); padding:26px 26px 22px;box-shadow:var(--sombra)} .guion-tramo{margin-bottom:26px} .guion-tramo:last-child{margin-bottom:0} .guion-tramo > .rotulo{margin-bottom:14px} .guion-parrafo{font-family:var(--lectura);font-size:clamp(17px,2.3vw,20px);line-height:1.75; color:var(--tinta);margin-bottom:15px} /* En la demostración, el nombre en su propio renglón visual: buscar quién habla a mitad de un párrafo, ensayando, es justo lo que no se puede pedir. */ .guion-turno{font-family:var(--lectura);font-size:clamp(16.5px,2.2vw,19px);line-height:1.7; color:var(--tinta);margin-bottom:14px;padding-left:16px; border-left:2px solid var(--tono-borde)} .guion-turno b{color:var(--tono-hondo)} .guion-fallo .panel-mal{display:flex;flex-wrap:wrap;align-items:center;gap:10px} /* El bosquejo: telegráfico, y por eso mismo apretado. */ .bosq-ind{font-size:15.5px;color:var(--suave);line-height:1.6;margin-bottom:18px} .bosq-puntos{list-style:none;margin:0 0 18px;padding:0} .bosq-punto{padding:14px 0;border-bottom:1px solid var(--linea)} .bosq-punto:last-child{border-bottom:0} .bosq-t{font-size:16px;font-weight:700;display:flex;align-items:baseline;gap:10px} .bosq-n{font-family:var(--mono);font-size:11.5px;color:var(--tenue)} .bosq-min{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--tenue)} .bosq-razon{margin-top:6px;font-size:15px;line-height:1.55;color:var(--suave)} .bosq-apl{margin-top:5px;font-size:14.5px;line-height:1.5;color:var(--tono-hondo)} .bosq-v{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:13px; color:var(--tono-1);text-decoration:none;border-bottom:1px dotted var(--tono-borde)} .bosq-frase{font-family:var(--nota);font-style:italic;font-size:14.5px;color:var(--suave)} .bosq-fuentes{margin-top:7px;font-family:var(--mono);font-size:12px;color:var(--tenue)} /* Un punto sin respaldo NO se esconde: se da igual, pero marcado. Que se vea distinto es lo único que impide que acabe en la plataforma sin revisar. */ .bosq-punto.sin-respaldo{border-left:3px solid var(--avisa);padding-left:13px; margin-left:-16px;background:var(--avisa-bg2)} .bosq-sin{margin-top:7px;font-size:12.5px;font-weight:700;color:var(--avisa-txt)} .bosq-decisiones{margin:0;padding-left:20px;font-size:14.5px;line-height:1.65;color:var(--suave)} .bosq-decisiones li{margin-bottom:6px} /* La zona de soltar del bosquejo asignado: la misma de Subir, más baja. */ .soltar-chico{padding:22px 18px;margin-bottom:0} .soltar-chico .ic{width:44px;height:44px;margin-bottom:10px} .soltar-chico p{font-size:14.5px} .soltar.encima{border-color:var(--tono-1);background:var(--tono-suave)} @media (max-width:639px){ .guion{padding:18px 16px 16px} .guion-pes{flex-wrap:wrap} .guion-dato{margin-left:0;order:9;flex:1 1 100%} } /* ── Perlas escondidas ─────────────────────────────────────────────────────── CASI TODO SE HEREDA DEL BUSCADOR. Esta pantalla usa `.pliego`, `.hallado`, `.hallado-caja`, `.rotulo`, `.resumen` y `.ref`: la misma letra, los mismos tamaños y el mismo papel. Nació con un juego propio de `.perla-*` y quedaba como otro sitio dentro del mismo sitio; se borró entero. Aquí abajo solo queda lo que de verdad NO existe en el buscador. Si algo se puede quitar de esta lista reutilizando una clase de allí, quítalo. */ /* Los tres selectores del pasaje. El libro se lleva el doble: «El Cantar de los Cantares» no cabe en un tercio, y los capítulos son dos dígitos. */ .perlas-fila{display:grid;grid-template-columns:1fr;gap:12px} @media (min-width:640px){ .perlas-fila{grid-template-columns:2fr 1fr 1fr;gap:14px} } /* EL PASAJE ES EL DATO DE ESTA PANTALLA, igual que la pregunta lo es en el buscador. Con la letra de un formulario cualquiera no lo parecía: se leía como tres campos de trámite. Ahora el libro va grande y el número de capítulo en monoespaciada y más grande todavía — un número que se compara de un vistazo se lee mejor en mono, y aquí se comparan dos. La flecha del