/* Generado por apps/pilot-client/tools/build.js — no editar a mano: cambia src/ o css/ y vuelve a generar. */ /* ── css/00-brand.css ── */ /* * Porruni · marca de Runi. * Se carga antes de styles.css y studio.css: aquí viven las tipografías y los tokens. * Las vistas los consumen con var(--porruni-…). Guía completa: docs/MARCA.md. * * Los pares light-dark() siguen al tema que fija appearance.js (color-scheme en ). * El contraste AA de los pares de texto y de interfaz lo comprueba tests/brand-palette.test.js: * si cambias un color, ejecuta esa prueba. */ /* Texto: Manrope (OFL, assets/manrope-OFL.txt). Logotipo y títulos: Fredoka (OFL, assets/fredoka-OFL.txt). */ @font-face { font-family: "Porruni Sans"; src: url("assets/fonts/manrope.ttf") format("truetype"); font-weight: 200 800; font-display: swap; } @font-face { font-family: "Porruni Rounded"; src: url("assets/fonts/fredoka.ttf") format("truetype"); font-weight: 300 700; font-stretch: 75% 125%; font-display: swap; } :root { /* Colores de Runi, muestreados en el icono elegido y en el logo original. Úsalos para ilustrar, no para texto. */ --runi-coral: #fa6f68; /* cuerpo */ --runi-coral-shade: #f05558; /* sombra de los lóbulos */ --runi-coral-fold: #e9434f; /* pliegues y párpados */ --runi-blush: #fdc9c4; /* blanco del ojo */ --runi-plum: #48153b; /* ojos, cejas y sonrisa */ --runi-plum-foot: #6a1f45; /* pies */ --runi-teal: #02585e; /* fondo del icono */ --runi-teal-deep: #0b474b; /* letras del logotipo */ --runi-mint: #70d9c2; /* humo del lápiz */ --runi-yellow: #fdca3d; /* lápiz */ --runi-lilac: #f2e9fd; /* fondo del logo original */ --runi-cream: #fbf0dc; /* papel y páginas */ /* Superficies: lila muy claro con blancos de día; azul petróleo de noche (elegido el 17-10-2026). */ --porruni-bg: light-dark(#f7f2fd, #0c2230); --porruni-surface: light-dark(#ffffff, #11293a); --porruni-surface-soft: light-dark(#efe6fa, #173749); --porruni-surface-strong: light-dark(#e4d8f4, #1f4459); --porruni-line: light-dark(#e1d5ef, #2a4b60); --porruni-line-strong: light-dark(#8a7d99, #6a8fa3); --porruni-window: light-dark(#f7f2fd, #0c2230); /* Barra lateral (lila un punto más denso de día, petróleo más hondo de noche) y crema puntual. */ --porruni-sidebar: light-dark(#efe6fa, #091b28); --porruni-cream: light-dark(#fbf3e4, #193343); /* Tus mensajes: ciruela de día, menta de noche. */ --porruni-user: light-dark(#48153b, #70d9c2); --porruni-on-user: light-dark(#fff8fd, #062a2c); /* Fila seleccionada de la barra (solo fondo, sin raya ni marcador) y su texto secundario. */ --porruni-selected: light-dark(#d6c3ee, #234b63); --porruni-selected-ink-soft: light-dark(#4f4259, #c3d6df); /* Tinta */ --porruni-ink: light-dark(#26142e, #ecf4f7); --porruni-ink-soft: light-dark(#64576e, #acc3cf); --porruni-logo-ink: light-dark(#0b474b, #f2e9fd); /* Acción principal: coral de Runi de día, menta del humo de noche. */ --porruni-action: light-dark(#c7323f, #70d9c2); --porruni-action-hover: light-dark(#a92835, #97e6d4); --porruni-on-action: light-dark(#ffffff, #062a2c); --porruni-action-soft: light-dark(#fde6e4, #134049); --porruni-action-ink: light-dark(#a32a36, #86e2cd); --porruni-focus: light-dark(#cf3a45, #8fe6d2); /* Acentos de Runi. Los *-ink son aptos para texto; coral, menta y amarillo puros solo como relleno. */ --porruni-coral: var(--runi-coral); --porruni-coral-ink: light-dark(#b0303c, #ff9d97); --porruni-coral-soft: light-dark(#ffe5e2, #4a2a33); --porruni-mint: var(--runi-mint); --porruni-mint-ink: light-dark(#106653, #8fe6d2); --porruni-mint-soft: light-dark(#dcf5ee, #134540); --porruni-yellow: var(--runi-yellow); --porruni-yellow-ink: light-dark(#7a5600, #ffd76a); --porruni-yellow-soft: light-dark(#fff2c9, #3b3215); --porruni-plum: var(--runi-plum); --porruni-plum-ink: light-dark(#5e1d4a, #f2bfe0); --porruni-plum-soft: light-dark(#f6e8f1, #3a1b33); /* Estados. «Provisional» marca borradores y datos pendientes de revisión del alumno. */ --porruni-success-ink: light-dark(#106653, #8fe6c9); --porruni-success-soft: light-dark(#dcf5ee, #123f3a); --porruni-success-line: light-dark(#8fd3bf, #2f7d6b); --porruni-warning-ink: light-dark(#7a5600, #ffd76a); --porruni-warning-soft: light-dark(#fff2c9, #3b3215); --porruni-warning-line: light-dark(#e8c35a, #8a6d1f); --porruni-danger-ink: light-dark(#b0263a, #ff9d9d); --porruni-danger-soft: light-dark(#ffe5e2, #4a2128); --porruni-danger-line: light-dark(#f0a3a3, #8c3a45); --porruni-provisional-ink: light-dark(#62439a, #d6c3f7); --porruni-provisional-soft: light-dark(#efe6fb, #33284d); --porruni-provisional-line: light-dark(#c4ade8, #6d5a99); /* Tonos de asignatura (orden de asignatura módulo 4): menta, coral, lila y amarillo. */ --porruni-tone-0: light-dark(#dcf5ee, #123f3a); --porruni-tone-0-ink: light-dark(#0f6352, #94e6cf); --porruni-tone-0-strong: light-dark(#1f8a73, #5cc9ae); --porruni-tone-1: light-dark(#ffe5e2, #46242a); --porruni-tone-1-ink: light-dark(#a62f3b, #ffb1ab); --porruni-tone-1-strong: light-dark(#e9434f, #ff8a83); --porruni-tone-2: light-dark(#efe6fb, #33284d); --porruni-tone-2-ink: light-dark(#5f418f, #d6c3f7); --porruni-tone-2-strong: light-dark(#8f6fc4, #b9a0e0); --porruni-tone-3: light-dark(#fff2c9, #3b3215); --porruni-tone-3-ink: light-dark(#765300, #f6d36d); --porruni-tone-3-strong: light-dark(#a87a00, #e7bd45); /* Tipografía */ --porruni-font-text: "Porruni Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --porruni-font-display: "Porruni Rounded", "Porruni Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Forma: Runi es redondo; las tarjetas y burbujas también. */ --porruni-radius-s: 6px; --porruni-radius-m: 10px; --porruni-radius-l: 16px; --porruni-radius-xl: 24px; --porruni-radius-pill: 999px; --porruni-shadow-1: 0 1px 2px light-dark(rgb(17 41 44 / .06), rgb(0 0 0 / .3)), 0 4px 14px light-dark(rgb(72 21 59 / .06), rgb(0 0 0 / .25)); --porruni-shadow-2: 0 2px 6px light-dark(rgb(17 41 44 / .08), rgb(0 0 0 / .35)), 0 12px 32px light-dark(rgb(72 21 59 / .10), rgb(0 0 0 / .35)); /* Movimiento: tranquilo, como Runi. Con movimiento reducido las duraciones pasan a 0. */ --porruni-ease: cubic-bezier(.33, 0, .2, 1); --porruni-duration-fast: 150ms; --porruni-duration-calm: 320ms; --porruni-duration-breath: 4s; } html[data-contrast=high] { --porruni-ink: light-dark(#000, #fff); --porruni-ink-soft: light-dark(#262f31, #e2f1ee); --porruni-line: light-dark(#6d6680, #8fb7b9); --porruni-line-strong: light-dark(#3d3747, #c7e0df); --porruni-action-ink: light-dark(#7a1520, #b5f2e4); /* La fila seleccionada se distingue solo por el fondo: más intenso con alto contraste, sin anillo. */ --porruni-selected: light-dark(#bfa3e6, #3a6e8c); --porruni-selected-ink-soft: light-dark(#000000, #ffffff); } @media (prefers-reduced-motion: reduce) { :root { --porruni-duration-fast: 0ms; --porruni-duration-calm: 0ms; } } html[data-reduce-motion=true] { --porruni-duration-fast: 0ms; --porruni-duration-calm: 0ms; } /* * Logotipo Runi + Porruni en HTML (sigue el tema y escala con font-size): * * Para documentos o fondos fijos: assets/brand/porruni-logo*.svg (texto convertido en trazos). */ .porruni-logo { display: inline-flex; align-items: center; gap: .32em; color: var(--porruni-logo-ink); font-family: var(--porruni-font-display); font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: .01em; white-space: nowrap; } .porruni-logo-mark { display: block; width: 1.5em; height: auto; flex: none; } .porruni-logo-word { -webkit-text-stroke: .03em currentColor; paint-order: stroke fill; } .porruni-logo.is-stacked { flex-direction: column; gap: .2em; } .porruni-logo.is-stacked .porruni-logo-mark { width: 2.6em; } /* ── css/01-system.css ── */ /* * Porruni · sistema de diseño del escritorio. * * Orden de carga (index.html): * brand.css colores, tipografías y radios de la marca (compartido con la extensión: no se toca aquí) * system.css ESTE ARCHIVO: tokens de espaciado, tipografía, radios, materiales, elevación y movimiento; * base de elementos, controles comunes y utilidades * runi.css Runi animado * styles.css y studio.css: composición de cada vista * runi-chat.css chat de Runi * shell.css estructura compartida: barra lateral, barra superior, cabecera, sesión, avisos y transiciones * * Reglas: las vistas consumen estos tokens en vez de valores sueltos. Los temas salen de los pares * light-dark() de brand.css; aquí solo se mezclan (color-mix) o se declaran sombras y bordes de material. * Movimiento: muelles críticamente amortiguados (--ease-spring); rebote solo tras un gesto con impulso. * Con «Reducir movimiento» (sistema o ajuste propio) los desplazamientos pasan a 0 (--motion-scale) y * quedan fundidos cortos; con «Reducir transparencia» o alto contraste los materiales son sólidos. */ :root { /* ── Alias heredados: las vistas antiguas los usan. En código nuevo, --porruni-* directamente. ── */ --ink: var(--porruni-ink); --muted: var(--porruni-ink-soft); --green: var(--porruni-action-ink); --green-soft: var(--porruni-action-soft); --line: var(--porruni-line); --paper: var(--porruni-surface); --surface: var(--porruni-surface); --bg: var(--porruni-bg); --soft: var(--porruni-surface-soft); --action: var(--porruni-action); --on-action: var(--porruni-on-action); --amber: var(--porruni-warning-ink); --red: var(--porruni-danger-ink); /* ── Espaciado: retícula de 4 px, en rem ─────────────────────────────────────────────────── */ --space-1: .25rem; /* 4 px */ --space-2: .5rem; /* 8 px */ --space-3: .75rem; /* 12 px */ --space-4: 1rem; /* 16 px */ --space-5: 1.25rem; /* 20 px */ --space-6: 1.5rem; /* 24 px */ --space-7: 2rem; /* 32 px */ --space-8: 2.5rem; /* 40 px */ --space-9: 3rem; /* 48 px */ --space-10: 4rem; /* 64 px */ --card-pad: var(--space-6); /* relleno de tarjetas y paneles */ --stack-gap: var(--space-6); /* entre tarjetas de una misma vista */ --section-gap: var(--space-7); /* entre secciones de una vista */ --gutter: var(--space-8); /* margen lateral del área de trabajo */ --control-height: 2.625rem; /* 42 px: botones y campos */ --control-height-small: 2.25rem; /* 36 px: chips y botones discretos */ --touch-target: 2.75rem; /* 44 px: mínimo táctil */ /* ── Tipografía: tamaño, interlineado y tracking van juntos ───────────────────────────────── * El tracking se cierra al crecer (títulos en Fredoka) y se abre un poco en tamaños pequeños. * Úsalos con las clases .type-* o con las variables sueltas. Los títulos usan --porruni-font-display. */ --font-caption: .75rem; --leading-caption: 1.4; --tracking-caption: .012em; /* 12 px: metadatos */ --font-footnote: .8125rem; --leading-footnote: 1.45; --tracking-footnote: .006em; /* 13 px: ayudas, filas */ --font-body: .875rem; --leading-body: 1.6; --tracking-body: 0; /* 14 px: texto base */ --font-callout: .9375rem; --leading-callout: 1.55; --tracking-callout: 0; /* 15 px: lectura, chat */ --font-headline: 1rem; --leading-headline: 1.4; --tracking-headline: -.004em; /* 16 px: título de fila o tarjeta */ --font-title-3: 1.1875rem; --leading-title-3: 1.3; --tracking-title-3: -.008em; /* 19 px: sección */ --font-title-2: 1.375rem; --leading-title-2: 1.25; --tracking-title-2: -.012em; /* 22 px: panel, diálogo */ --font-title-1: 1.75rem; --leading-title-1: 1.18; --tracking-title-1: -.016em; /* 28 px: héroe */ --font-large-title: 2.125rem; --leading-large-title: 1.12; --tracking-large-title: -.02em; /* 34 px: título de vista */ --font-display: 3.125rem; --leading-display: 1.05; --tracking-display: -.025em; /* 50 px: cifras grandes */ --font-label: .6875rem; --leading-label: 1.3; --tracking-label: .07em; /* 11 px MAYÚSCULAS: rótulos de grupo */ --weight-regular: 500; --weight-medium: 650; --weight-strong: 750; --weight-display: 600; /* ── Radios: concéntricos (radio interior = radio exterior − relleno) ─────────────────────── */ --radius-xs: 4px; --radius-s: var(--porruni-radius-s); /* 6 px: marcas, citas */ --radius-control: var(--porruni-radius-m); /* 10 px: botones y campos */ --radius-card: var(--porruni-radius-l); /* 16 px: tarjetas, filas destacadas, avisos */ --radius-sheet: 20px; /* diálogos y hojas */ --radius-hero: var(--porruni-radius-xl); /* 24 px: superficies protagonistas */ --radius-pill: var(--porruni-radius-pill); /* ── Materiales: capas translúcidas que dan jerarquía sin tapar el contenido ─────────────── * thin para chips sobre fondos limpios, regular para barras y avisos flotantes, thick para hojas. * chrome: barras que flotan sobre el contenido al desplazarse. Nunca una capa clara sobre otra. */ --material-thin: color-mix(in srgb, var(--porruni-surface) 62%, transparent); --material-regular: color-mix(in srgb, var(--porruni-surface) 78%, transparent); --material-thick: color-mix(in srgb, var(--porruni-surface) 90%, transparent); --material-chrome: color-mix(in srgb, var(--porruni-bg) 76%, transparent); --material-sidebar: color-mix(in srgb, var(--porruni-surface-soft) 46%, var(--porruni-bg)); --material-blur-thin: blur(12px) saturate(150%); --material-blur: blur(20px) saturate(180%); --material-blur-thick: blur(32px) saturate(180%); --material-highlight: light-dark(rgb(255 255 255 / .8), rgb(255 255 255 / .07)); /* borde que capta la luz */ --scrim: light-dark(rgb(17 41 44 / .30), rgb(0 0 0 / .55)); /* atenuado de los diálogos */ /* ── Elevación: sombra según la jerarquía ──────────────────────────────────────────────────── */ --elevation-0: none; --elevation-1: var(--porruni-shadow-1); /* tarjetas en reposo */ --elevation-2: var(--porruni-shadow-2); /* elevadas: hover, menús */ --elevation-3: 0 4px 12px light-dark(rgb(17 41 44 / .08), rgb(0 0 0 / .35)), 0 18px 48px light-dark(rgb(72 21 59 / .16), rgb(0 0 0 / .5)); /* flotantes: avisos, diálogos */ --hairline: 1px solid var(--porruni-line); /* separadores y bordes de tarjeta */ --hairline-strong: 1px solid var(--porruni-line-strong); /* bordes de controles */ --selection-ring: 0 0 #0000; /* contorno extra de lo seleccionado (alto contraste) */ /* Controles de formulario propios (casillas, interruptores, desplegables y rangos). El pomo del interruptor y * del rango es claro en los dos temas, como en el sistema; la flecha de los desplegables, en --porruni-ink-soft * de cada tema (una imagen no puede leer variables: se redefine en html[data-theme=dark]). */ --control-knob: light-dark(#fff, #f4fbf9); /* Lo elegido en un control segmentado (segmentos, secciones de Ajustes): en oscuro, la superficie normal casi no * se distingue de la pista; se usa la marcada. */ --control-selected: light-dark(var(--porruni-surface), var(--porruni-surface-strong)); --control-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c5d61' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* ── Foco ──────────────────────────────────────────────────────────────────────────────────── */ --focus-width: 2px; --focus-offset: 2px; /* ── Movimiento ──────────────────────────────────────────────────────────────────────────── * --ease-spring: muelle críticamente amortiguado (amortiguación 1, sin rebote), muestreado con * linear(). La curva es la misma para cualquier respuesta: cambia la duración, que es el tiempo * hasta asentarse. Por defecto todo usa este muelle; --ease-spring-bounce (amortiguación 0,8) * solo tras un gesto con impulso (arrastrar y soltar), nunca en algo que aparece solo. * Las transiciones CSS se pueden reorientar a mitad: parten del valor actual en pantalla. */ --ease-spring: linear(0, .059, .183, .325, .461, .579, .677, .755, .817, .864, .9, .927, .947, .961, .972, .98, .986, .99, .993, .995, .996, .997, .998, .999, 1); --ease-spring-bounce: linear(0, .053, .175, .324, .473, .608, .722, .813, .883, .933, .968, .991, 1.005, 1.012, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.004, 1.002, 1.001, 1); --spring-snappy: 370ms; /* respuesta 0,25 s: controles, chips, indicador de navegación */ --spring-smooth: 520ms; /* respuesta 0,35 s: cambio de vista, avisos, paneles */ --spring-gentle: 740ms; /* respuesta 0,5 s: superficies grandes (bienvenida, hojas) */ --spring-bounce: 480ms; /* con --ease-spring-bounce */ --ease-out: cubic-bezier(.22, 1, .36, 1); /* fundidos y respaldo sin linear() */ --duration-press: 90ms; /* respuesta al pulsar: inmediata */ --duration-fast: var(--porruni-duration-fast, 150ms); /* color al pasar el puntero */ --duration-fade: 200ms; /* fundidos de opacidad */ --motion-scale: 1; /* multiplica desplazamientos y escalas: 0 con movimiento reducido */ --press-scale: .97; /* botones al pulsar */ --enter-distance: 10px; /* recorrido de lo que entra */ /* ── Capas ─────────────────────────────────────────────────────────────────────────────────── */ --layer-sticky: 20; --layer-nav: 50; --layer-toast: 100; --layer-dialog: 200; --layer-welcome: 300; /* ── Estructura ────────────────────────────────────────────────────────────────────────────── */ --sidebar-width: 15.5rem; /* 248 px */ --rail-width: 5rem; /* 80 px (701–1100 px) */ --bottom-bar-height: 4.25rem; --toolbar-height: 3.75rem; /* 60 px */ --content-max: 1560px; --reading-max: 46rem; /* ancho cómodo de lectura */ font-family: var(--porruni-font-text); color: var(--porruni-ink); font-size: 16px; } html[data-theme="dark"] { --control-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9c7c3' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* ── Variantes de accesibilidad ─────────────────────────────────────────────────────────────── */ /* Movimiento reducido: sin desplazamientos ni escalas; solo fundidos cortos de opacidad y color. */ @media (prefers-reduced-motion: reduce) { :root { --motion-scale: 0; --press-scale: 1; --enter-distance: 0px; --ease-spring: ease; --ease-spring-bounce: ease; --spring-snappy: 160ms; --spring-smooth: 200ms; --spring-gentle: 240ms; --spring-bounce: 200ms; } } html[data-reduce-motion="true"] { --motion-scale: 0; --press-scale: 1; --enter-distance: 0px; --ease-spring: ease; --ease-spring-bounce: ease; --spring-snappy: 160ms; --spring-smooth: 200ms; --spring-gentle: 240ms; --spring-bounce: 200ms; } /* Red de seguridad para lo que aún no usa los tokens: nada de bucles ni de transform animado. * Runi tiene sus propias poses fijas (runi.css, más específico). */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition-property: opacity, color, background-color, border-color, outline-color, box-shadow, fill, stroke !important; } } html[data-reduce-motion="true"] { scroll-behavior: auto; } html[data-reduce-motion="true"] *, html[data-reduce-motion="true"] *::before, html[data-reduce-motion="true"] *::after { animation: none !important; transition-property: opacity, color, background-color, border-color, outline-color, box-shadow, fill, stroke !important; } /* Transparencia reducida: materiales sólidos, sin desenfoque. */ @media (prefers-reduced-transparency: reduce) { :root { --material-thin: var(--porruni-surface); --material-regular: var(--porruni-surface); --material-thick: var(--porruni-surface); --material-chrome: var(--porruni-bg); --material-blur-thin: none; --material-blur: none; --material-blur-thick: none; } } /* Más contraste (sistema) o «Alto contraste» (Ajustes): materiales sólidos, bordes definidos, sin sombras. * Los colores de alto contraste viven en brand.css (html[data-contrast=high]); para la preferencia del * sistema se repiten aquí los mismos valores. */ @media (prefers-contrast: more) { :root { --porruni-ink: light-dark(#000, #fff); --porruni-ink-soft: light-dark(#262f31, #e2f1ee); --porruni-line: light-dark(#6d6680, #8fb7b9); --porruni-line-strong: light-dark(#3d3747, #c7e0df); --porruni-action-ink: light-dark(#7a1520, #b5f2e4); --porruni-selected: light-dark(#bfa3e6, #3a6e8c); --porruni-selected-ink-soft: light-dark(#000000, #ffffff); --material-thin: var(--porruni-surface); --material-regular: var(--porruni-surface); --material-thick: var(--porruni-surface); --material-chrome: var(--porruni-bg); --material-blur-thin: none; --material-blur: none; --material-blur-thick: none; --elevation-1: none; --elevation-2: none; --elevation-3: 0 0 0 2px var(--porruni-line-strong); --hairline: 2px solid var(--porruni-line-strong); --hairline-strong: 2px solid var(--porruni-line-strong); --selection-ring: inset 0 0 0 2px var(--porruni-line-strong); --focus-width: 3px; --focus-offset: 3px; } } html[data-contrast="high"] { --material-thin: var(--porruni-surface); --material-regular: var(--porruni-surface); --material-thick: var(--porruni-surface); --material-chrome: var(--porruni-bg); --material-blur-thin: none; --material-blur: none; --material-blur-thick: none; --elevation-1: none; --elevation-2: none; --elevation-3: 0 0 0 2px var(--porruni-line-strong); --hairline: 2px solid var(--porruni-line-strong); --hairline-strong: 2px solid var(--porruni-line-strong); --selection-ring: inset 0 0 0 2px var(--porruni-line-strong); --focus-width: 3px; --focus-offset: 3px; } /* Tamaño de texto propio (Ajustes): la interfaz entera escala, también el espaciado. * --text-zoom es ese factor. Dentro de un elemento con zoom, 100dvh también se multiplica: una vista a la * altura de la ventana (Runi) usa calc(100dvh / var(--text-zoom)). */ :root { --text-zoom: 1; } html[data-text-size="large"] { --text-zoom: 1.1; } html[data-text-size="larger"] { --text-zoom: 1.2; } html[data-text-size="large"] body, html[data-text-size="larger"] body { zoom: var(--text-zoom); } /* ── Base ───────────────────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } [hidden], .hidden, .view-hidden { display: none !important; } html { min-width: 0; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; min-width: 0; overflow-x: hidden; background: var(--porruni-bg); color: var(--porruni-ink); font-family: var(--porruni-font-text); font-size: var(--font-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body); font-optical-sizing: auto; } button, input, select, textarea { font: inherit; letter-spacing: inherit; max-width: 100%; } button { cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; } button:disabled { cursor: not-allowed; opacity: .55; } a { color: var(--porruni-action-ink); text-underline-offset: .18em; } ::selection { background: var(--porruni-mint-soft); color: var(--porruni-ink); } :focus-visible { outline: var(--focus-width) solid var(--porruni-focus); outline-offset: var(--focus-offset); } ::placeholder { color: var(--porruni-ink-soft); opacity: 1; } details > summary { cursor: pointer; min-height: 44px; align-content: center; } kbd { font-family: var(--porruni-font-text); } /* Títulos: Fredoka, con tracking que se cierra al crecer. */ h1, h2, .panel-title h3, .panel > h3:first-child, .subject-heading h4 { font-family: var(--porruni-font-display); font-weight: var(--weight-display); } h1 { letter-spacing: var(--tracking-large-title); } h2 { letter-spacing: var(--tracking-title-2); } /* Escala tipográfica como clases (tamaño + interlineado + tracking). */ .type-caption { font-size: var(--font-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption); } .type-footnote { font-size: var(--font-footnote); line-height: var(--leading-footnote); letter-spacing: var(--tracking-footnote); } .type-body { font-size: var(--font-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body); } .type-callout { font-size: var(--font-callout); line-height: var(--leading-callout); letter-spacing: var(--tracking-callout); } .type-headline { font-family: var(--porruni-font-display); font-weight: var(--weight-display); font-size: var(--font-headline); line-height: var(--leading-headline); letter-spacing: var(--tracking-headline); } .type-title-3 { font-family: var(--porruni-font-display); font-weight: var(--weight-display); font-size: var(--font-title-3); line-height: var(--leading-title-3); letter-spacing: var(--tracking-title-3); } .type-title-2 { font-family: var(--porruni-font-display); font-weight: var(--weight-display); font-size: var(--font-title-2); line-height: var(--leading-title-2); letter-spacing: var(--tracking-title-2); } .type-title-1 { font-family: var(--porruni-font-display); font-weight: var(--weight-display); font-size: var(--font-title-1); line-height: var(--leading-title-1); letter-spacing: var(--tracking-title-1); } .type-large-title { font-family: var(--porruni-font-display); font-weight: var(--weight-display); font-size: var(--font-large-title); line-height: var(--leading-large-title); letter-spacing: var(--tracking-large-title); } .type-display { font-family: var(--porruni-font-display); font-weight: var(--weight-display); font-size: var(--font-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; } .type-label { font-size: var(--font-label); line-height: var(--leading-label); letter-spacing: var(--tracking-label); font-weight: 800; text-transform: uppercase; } .type-muted { color: var(--porruni-ink-soft); } /* ── Utilidades ─────────────────────────────────────────────────────────────────────────────── */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: fixed; z-index: calc(var(--layer-welcome) + 1); top: var(--space-2); left: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--porruni-surface); color: var(--porruni-ink); border-radius: var(--radius-control); font-weight: var(--weight-strong); transform: translateY(calc(-100% - var(--space-4))); transition: transform var(--spring-snappy) var(--ease-spring); } .skip-link:focus { transform: none; box-shadow: var(--elevation-3); } /* Iconos Lucide como máscara: siguen el color del texto en todos los temas. * */ .studio-icon { display: inline-block; width: 19px; height: 19px; flex: 0 0 19px; vertical-align: middle; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } /* Tecla de un atajo: discreta, junto a la acción que dispara. */ .keycap { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.45rem; padding: 0 .4em; border-radius: var(--radius-s); background: var(--porruni-surface-soft); color: var(--porruni-ink-soft); box-shadow: inset 0 0 0 1px var(--porruni-line), inset 0 -1px 0 var(--porruni-line); font-size: var(--font-caption); font-weight: var(--weight-strong); letter-spacing: .02em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Tonos de asignatura (orden módulo 4), iguales en todas las vistas. */ .tone-0 { --tone: var(--porruni-tone-0); --tone-ink: var(--porruni-tone-0-ink); --tone-strong: var(--porruni-tone-0-strong); } .tone-1 { --tone: var(--porruni-tone-1); --tone-ink: var(--porruni-tone-1-ink); --tone-strong: var(--porruni-tone-1-strong); } .tone-2 { --tone: var(--porruni-tone-2); --tone-ink: var(--porruni-tone-2-ink); --tone-strong: var(--porruni-tone-2-strong); } .tone-3 { --tone: var(--porruni-tone-3); --tone-ink: var(--porruni-tone-3-ink); --tone-strong: var(--porruni-tone-3-strong); } /* ── Botones ──────────────────────────────────────────────────────────────────────────────────── * Respuesta al pulsar (no al soltar): se hunden al instante y vuelven con el muelle. Jerarquía: * .primary-button una por zona; .secondary-button para el resto; .quiet-button para acciones de texto; * .icon-button con aria-label y title. */ .primary-button, .secondary-button, .quiet-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: 9px 16px; border-radius: var(--radius-control); font-size: var(--font-footnote); line-height: 1.4; letter-spacing: var(--tracking-footnote); font-weight: var(--weight-strong); text-align: center; cursor: pointer; box-shadow: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), transform var(--spring-snappy) var(--ease-spring); } .primary-button { background: var(--porruni-action); color: var(--porruni-on-action); border: 1px solid transparent; } .primary-button:hover { background: var(--porruni-action-hover); } .secondary-button { background: var(--porruni-surface); color: var(--porruni-ink); border: var(--hairline-strong); } .secondary-button:hover { background: var(--porruni-surface-soft); } .quiet-button { color: var(--porruni-action-ink); border: 0; background: transparent; } .quiet-button:hover { background: var(--porruni-action-soft); } .primary-button .studio-icon, .secondary-button .studio-icon, .quiet-button .studio-icon { width: 16px; height: 16px; flex-basis: 16px; } .icon-button { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; padding: 0; border: var(--hairline); border-radius: var(--radius-control); background: var(--porruni-surface); color: var(--porruni-ink); -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), transform var(--spring-snappy) var(--ease-spring); } .icon-button:hover { background: var(--porruni-surface-soft); } .icon-button .studio-icon { width: 18px; height: 18px; flex-basis: 18px; } .primary-button:active:not(:disabled), .secondary-button:active:not(:disabled), .quiet-button:active:not(:disabled), .icon-button:active:not(:disabled) { transform: scale(var(--press-scale)); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), var(--duration-press); transition-timing-function: ease, ease, ease, var(--ease-out); } /* ── Campos ─────────────────────────────────────────────────────────────────────────────────── */ input:not([type=checkbox]):not([type=radio]), select, textarea, .student-workspace input:not([type=checkbox]):not([type=radio]), .student-workspace select, .student-workspace textarea { min-height: 44px; min-width: 0; max-width: 100%; padding: 10px 12px; border: var(--hairline-strong); border-radius: var(--radius-control); background: var(--porruni-surface); color: var(--porruni-ink); font-size: var(--font-body); transition: border-color var(--duration-fast), box-shadow var(--duration-fast); } input:not([type=checkbox]):not([type=radio]):focus-visible, select:focus-visible, textarea:focus-visible { outline: var(--focus-width) solid var(--porruni-focus); outline-offset: 1px; } textarea { resize: vertical; } /* Desplegables: la misma caja que los campos y una flecha propia que sigue el tema (en Windows y macOS igual). */ select { -webkit-appearance: none; appearance: none; padding-right: 36px; background-image: var(--control-chevron); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; cursor: pointer; } select:disabled { cursor: not-allowed; opacity: .55; } /* Casillas y botones de opción propios: el control nativo salía como un cuadro oscuro en el tema oscuro. Caja con * el borde de los controles; marcada, en el color de la acción con la marca dibujada (nítida con cualquier zoom), * que aparece con el muelle. El anillo de foco es el común. */ input[type=checkbox], input[type=radio] { -webkit-appearance: none; appearance: none; display: inline-grid; place-content: center; width: 18px; height: 18px; flex: none; vertical-align: middle; border: 1.5px solid var(--porruni-line-strong); border-radius: 5px; background: var(--porruni-surface); color: var(--porruni-on-action); cursor: pointer; transition: background-color var(--duration-fast), border-color var(--duration-fast), transform var(--spring-snappy) var(--ease-spring); } input[type=radio] { border-radius: 50%; } input[type=checkbox]::before { content: ""; width: 5px; height: 9px; margin-top: -2px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform var(--spring-snappy) var(--ease-spring); } input[type=radio]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform var(--spring-snappy) var(--ease-spring); } input[type=checkbox]:checked, input[type=radio]:checked { border-color: var(--porruni-action); background: var(--porruni-action); } input[type=checkbox]:checked::before { transform: rotate(45deg) scale(1); } input[type=radio]:checked::before { transform: scale(1); } input[type=checkbox]:hover:not(:checked):not(:disabled), input[type=radio]:hover:not(:checked):not(:disabled) { border-color: var(--porruni-ink-soft); } input[type=checkbox]:active:not(:disabled), input[type=radio]:active:not(:disabled) { transform: scale(calc(1 - .08 * var(--motion-scale))); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-press); } input[type=checkbox]:disabled, input[type=radio]:disabled { opacity: .55; cursor: not-allowed; } /* Interruptor (role="switch") para lo que se enciende y apaga al momento, como «Reducir movimientos». */ input[type=checkbox].switch { width: 40px; height: 24px; padding: 2px; place-content: center start; border: 0; border-radius: var(--radius-pill); background: var(--porruni-surface-strong); box-shadow: inset 0 0 0 1px var(--porruni-line); } input[type=checkbox].switch::before { width: 20px; height: 20px; margin: 0; border: 0; border-radius: 50%; background: var(--control-knob); box-shadow: 0 1px 2px rgb(0 0 0 / .18), 0 2px 6px rgb(0 0 0 / .1); transform: none; transition: transform var(--spring-snappy) var(--ease-spring); } input[type=checkbox].switch:checked { background: var(--porruni-action); box-shadow: none; } input[type=checkbox].switch:checked::before { transform: translateX(16px); } input[type=checkbox].switch:active:not(:disabled) { transform: none; } /* Rango (no hay ninguno todavía): pista fina y pomo claro, como el interruptor. */ input:not([type=checkbox]):not([type=radio])[type=range] { -webkit-appearance: none; appearance: none; min-height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; } input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-pill); background: linear-gradient(var(--porruni-action), var(--porruni-action)) 0 / var(--range-fill, 0%) 100% no-repeat, var(--porruni-surface-strong); } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--control-knob); box-shadow: 0 0 0 1px var(--porruni-line-strong), 0 1px 3px rgb(0 0 0 / .2); } html[data-contrast="high"] :is(input[type=checkbox], input[type=radio]) { border-width: 2px; } html[data-contrast="high"] input[type=checkbox].switch { box-shadow: inset 0 0 0 2px var(--porruni-line-strong); } @media (prefers-contrast: more) { input[type=checkbox], input[type=radio] { border-width: 2px; } input[type=checkbox].switch { box-shadow: inset 0 0 0 2px var(--porruni-line-strong); } } /* Colores forzados (Windows): vuelven los controles del sistema, que sí respetan su paleta. */ @media (forced-colors: active) { input[type=checkbox], input[type=radio], select { -webkit-appearance: auto; appearance: auto; } input[type=checkbox]::before, input[type=radio]::before { content: none; } } /* ── Control segmentado (Tareas, chat de Runi, temporizador) ───────────────────────────────── *
……
*/ .focus-duration, .studio-segments { display: inline-flex; gap: 2px; margin: 0; padding: 3px; border: 0; border-radius: 12px; background: var(--porruni-surface-soft); } .focus-duration { display: flex; } .focus-duration label { flex: 1; text-align: center; } .focus-duration label, .studio-segments label { position: relative; cursor: pointer; } .focus-duration input, .studio-segments input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .focus-duration span, .studio-segments span { display: block; padding: 7px 13px; border-radius: 9px; color: var(--porruni-ink-soft); font-size: var(--font-caption); font-weight: var(--weight-strong); letter-spacing: var(--tracking-caption); transition: background-color var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast); } .focus-duration label:hover span, .studio-segments label:hover span { color: var(--porruni-ink); } .focus-duration :checked + span, .studio-segments :checked + span { background: var(--control-selected); color: var(--porruni-ink); box-shadow: var(--elevation-1); } .focus-duration :focus-visible + span, .studio-segments :focus-visible + span { outline: var(--focus-width) solid var(--porruni-focus); outline-offset: 2px; } .focus-duration :disabled + span { opacity: .55; } html[data-contrast="high"] .studio-segments :checked + span, html[data-contrast="high"] .focus-duration :checked + span { box-shadow: inset 0 0 0 2px var(--porruni-line-strong); } /* ── Distintivos ───────────────────────────────────────────────────────────────────────────────── * Una sola forma para las píldoras de estado, procedencia y recuento de todas las vistas (recuentos, estado de * una asignatura o de un ajuste, de dónde sale un dato, marcas de una tarea, fichas del chat): 24 px de alto, texto * de 12 px y siempre su palabra. Cada vista pone solo el color: éxito (comprobado o confirmado por ti), aviso * (falta algo o conviene revisar), error (bloqueado) y provisional (lila con borde discontinuo). */ .status-pill, .subject-state, .subject-source, .task-chip, .runi-chip, .task-badges small { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px; border: 1px solid transparent; border-radius: var(--radius-pill); font-size: var(--font-caption); font-weight: var(--weight-medium); line-height: 1.3; letter-spacing: var(--tracking-caption); text-transform: none; } .status-pill { background: var(--porruni-action-soft); color: var(--porruni-action-ink); white-space: nowrap; } /* ── Carril (701–1100 px): márgenes algo más cortos ────────────────────────────────────────── */ @media (min-width: 701px) and (max-width: 1100px) { :root { --gutter: var(--space-6); } } /* ── Móvil y táctil: zonas de 44 px y texto de 16 px en los campos (sin zoom de iOS) ─────────── */ @media (max-width: 700px) { :root { --card-pad: 18px; --gutter: var(--space-4); --stack-gap: var(--space-5); } .primary-button, .secondary-button, .quiet-button { min-height: 44px; } input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; } input[type=checkbox]:not(.switch), input[type=radio] { width: 20px; height: 20px; } } @media (hover: none) and (pointer: coarse) { .primary-button, .secondary-button, .quiet-button, .icon-button, summary { -webkit-tap-highlight-color: transparent; } } /* ── css/02-runi.css ── */ /* * Porruni · Runi animado (runi.js). Necesita los tokens de brand.css. * * Runi es tranquilo y despreocupado: bucles lentos, pausas largas, nada brusco ni eufórico. * Coste: solo se animan transform y opacity. La respiración, el balanceo y la inclinación * se aplican a cajas HTML (.runi-pose, .runi-motion, .runi-svg), que el compositor mueve sin * volver a pintar; dentro del SVG solo se mueven piezas pequeñas (ojos, brazo, accesorio). * Las animaciones de un accesorio solo existen mientras su estado está activo y se pausan * cuando Runi no se ve (data-visible="false"). * * Con movimiento reducido (prefers-reduced-motion, html[data-reduce-motion=true] o * data-motion="reduced") no hay bucles ni transiciones: cada estado tiene una pose fija legible. * Por eso los estilos base de cada pieza son su pose fija, y los @keyframes solo la animan. * * Geometría: retícula 800 del cerebro vectorial (viewBox -10 10 780 780). Pivotes: * brazo derecho 600 500, brazo izquierdo 170 530, mano derecha 600 625, suelo 50% 92%. * Cada brazo se dibuja dos veces con las mismas clases: el tramo detrás del cuerpo y la mano delante. */ .runi { --runi-size: 160px; --runi-calm: var(--porruni-duration-calm, 320ms); --runi-ease: var(--porruni-ease, cubic-bezier(.33, 0, .2, 1)); --runi-c-body-light: color-mix(in srgb, var(--runi-coral, #fa6f68), #fff 10%); --runi-c-body-shade: color-mix(in srgb, var(--runi-coral, #fa6f68), var(--runi-coral-shade, #f05558) 60%); --runi-c-fold: var(--runi-coral-fold, #e9434f); --runi-c-blush: var(--runi-blush, #fdc9c4); --runi-c-plum: var(--runi-plum, #48153b); --runi-c-foot: var(--runi-plum-foot, #6a1f45); --runi-c-foot-light: color-mix(in srgb, var(--runi-plum-foot, #6a1f45), #fff 14%); --runi-c-teal: light-dark(var(--runi-teal, #02585e), #1d7b80); --runi-c-teal-deep: light-dark(var(--runi-teal-deep, #0b474b), #15666a); --runi-c-paper: var(--runi-cream, #fbf0dc); --runi-c-paper-shade: color-mix(in srgb, var(--runi-cream, #fbf0dc), #b98f5a 18%); --runi-c-line: color-mix(in srgb, var(--runi-teal, #02585e) 34%, var(--runi-cream, #fbf0dc)); --runi-c-ink: var(--runi-teal, #02585e); --runi-c-mint: var(--runi-mint, #70d9c2); --runi-c-yellow: var(--runi-yellow, #fdca3d); --runi-c-yellow-shade: color-mix(in srgb, var(--runi-yellow, #fdca3d), #e08a00 30%); --runi-c-coral-light: color-mix(in srgb, var(--runi-coral, #fa6f68), #fff 30%); --runi-c-lilac: light-dark(#cbb6ef, #b9a2e6); --runi-c-mark: var(--porruni-plum-ink, light-dark(#5e1d4a, #f2bfe0)); --runi-c-zzz: light-dark(var(--runi-teal, #02585e), var(--runi-mint, #70d9c2)); --runi-c-ground: light-dark(rgb(72 21 59 / .10), rgb(0 0 0 / .34)); --runi-c-edge: rgb(72 21 59 / .16); display: inline-block; position: relative; flex: none; inline-size: var(--runi-size); block-size: var(--runi-size); line-height: 0; vertical-align: middle; } .runi-pose, .runi-motion { inline-size: 100%; block-size: 100%; transform-origin: 50% 92%; } .runi-pose { transition: transform calc(var(--runi-calm) * 2.2) var(--runi-ease); } .runi-svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; transform-origin: 50% 92%; } /* ── Colores ───────────────────────────────────────────────────────────────────────── */ .runi-stop-light { stop-color: var(--runi-c-body-light); } .runi-stop-shade { stop-color: var(--runi-c-body-shade); } .runi-stop-foot-light { stop-color: var(--runi-c-foot-light); } .runi-stop-foot { stop-color: var(--runi-c-foot); } .runi-ground { fill: var(--runi-c-ground); } .runi-leg { fill: var(--runi-c-foot); } .runi-sheen { fill: #fff; opacity: .16; } .runi-folds path { fill: none; stroke: var(--runi-c-fold); stroke-width: 17; stroke-linecap: round; stroke-linejoin: round; } .runi-folds .runi-fold-thin { stroke-width: 14; } .runi-brow { fill: none; stroke: var(--runi-c-plum); stroke-width: 19; stroke-linecap: round; } .runi-eye-white { fill: var(--runi-c-blush); } .runi-pupil { fill: var(--runi-c-plum); } .runi-glint { fill: #fff9fa; } .runi-lid { fill: var(--runi-c-fold); } .runi-lash { fill: none; stroke: var(--runi-c-plum); stroke-width: 9; stroke-linecap: round; } .runi-mouth { fill: none; stroke: var(--runi-c-plum); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 0s linear calc(var(--runi-calm) * .5); } .runi-limb, .runi-hand { stroke: var(--runi-c-fold); stroke-width: 6; } .runi-paper { fill: var(--runi-c-paper); } .runi-paper-fold { fill: var(--runi-c-paper-shade); } .runi-file .runi-paper { stroke: var(--runi-c-edge); stroke-width: 4; } .runi-file-band { fill: var(--runi-c-teal); } .runi-ink-soft-fill { fill: var(--runi-c-line); } .runi-book-cover { fill: var(--runi-c-teal); } .runi-book-spine { fill: none; stroke: var(--runi-c-paper-shade); stroke-width: 5; } .runi-book-lines path { fill: none; stroke: var(--runi-c-line); stroke-width: 8; stroke-linecap: round; } .runi-book-flip { fill: var(--runi-c-paper-shade); opacity: 0; transform-origin: 390px 586px; } .runi-word { fill: var(--runi-c-ink); } .runi-card { stroke: var(--runi-c-edge); stroke-width: 4; } .runi-card-mint { fill: var(--runi-c-mint); } .runi-card-lilac { fill: var(--runi-c-lilac); } .runi-card-yellow { fill: var(--runi-c-yellow); } .runi-card-line { fill: rgb(72 21 59 / .28); } .runi-phones-band { fill: none; stroke: var(--runi-c-teal); stroke-width: 28; stroke-linecap: round; } .runi-phones-band-shine { fill: none; stroke: var(--runi-c-mint); stroke-width: 7; stroke-linecap: round; opacity: .5; } .runi-phones-cup { fill: var(--runi-c-teal); } .runi-phones-pad { fill: var(--runi-c-mint); } .runi-pencil-wood { fill: #efd197; } .runi-pencil-lead { fill: var(--runi-c-plum); } .runi-pencil-body { fill: var(--runi-c-yellow); } .runi-pencil-edge { fill: var(--runi-c-yellow-shade); } .runi-pencil-ferrule { fill: #b4c4ca; } .runi-pencil-eraser { fill: var(--runi-coral, #fa6f68); } .runi-lens-handle { fill: var(--runi-c-teal-deep); } .runi-lens-glass { fill: var(--runi-c-mint); opacity: .3; } .runi-lens-ring { fill: none; stroke: var(--runi-c-teal); stroke-width: 20; } .runi-lens-shine { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; opacity: .8; } .runi-smoke { fill: var(--runi-c-mint); } .runi-wave path { fill: none; stroke: var(--runi-c-mint); stroke-width: 15; stroke-linecap: round; } .runi-sparkle-yellow { fill: var(--runi-c-yellow); } .runi-sparkle-mint { fill: var(--runi-c-mint); } .runi-sparkle-coral { fill: var(--runi-c-coral-light); } .runi-question-hook { fill: none; stroke: var(--runi-c-mark); stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; } .runi-question-dot { fill: var(--runi-c-mark); } .runi-z { fill: none; stroke: var(--runi-c-zzz); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; } /* Tamaños pequeños (indicador de actividad, avatares): trazos algo más gruesos y menos detalle. */ .runi[data-detail=low] .runi-lash { stroke-width: 13; } .runi[data-detail=low] .runi-mouth { stroke-width: 16; } .runi[data-detail=low] .runi-brow { stroke-width: 24; } .runi[data-detail=low] .runi-folds path { stroke-width: 20; } .runi[data-detail=low] .runi-limb, .runi[data-detail=low] .runi-hand { stroke-width: 9; } .runi[data-detail=low] .runi-sheen, .runi[data-detail=low] .runi-fold-thin, .runi[data-detail=low] .runi-ground { display: none; } .runi[data-detail=low][data-state=descansando] .runi-acc-zzz { transform: scale(1.4); } .runi[data-detail=low][data-state=duda] .runi-acc-question { transform: scale(1.2); } .runi[data-detail=low][data-state=ordenando] .runi-acc-cards { transform: scale(1.2); } .runi[data-detail=low][data-state=celebrando] .runi-acc-sparkles { transform: scale(1.12); } .runi[data-detail=low][data-state=pensando] .runi-smoke-at { transform: translate(725px, 300px) scale(1.35); } /* ── Pivotes ───────────────────────────────────────────────────────────────────────── */ .runi-arm-r, .runi-arm-r .runi-arm-move { transform-origin: 600px 500px; } .runi-arm-l, .runi-arm-l .runi-arm-move { transform-origin: 170px 530px; } .runi-wrist { transform-origin: 600px 625px; } .runi-brow-l { transform-origin: 264px 322px; } .runi-brow-r { transform-origin: 492px 293px; } .runi-head { transform-origin: 385px 650px; } .runi-question { transform-origin: 682px 190px; } .runi-smoke { transform-origin: 0 0; } .runi-wave-l1, .runi-wave-l2 { transform-origin: 100px 430px; } .runi-wave-r1, .runi-wave-r2 { transform-origin: 674px 404px; } .runi-sparkle-1 { transform-origin: 150px 186px; } .runi-sparkle-2 { transform-origin: 640px 150px; } .runi-sparkle-3 { transform-origin: 716px 296px; } .runi-sparkle-4 { transform-origin: 42px 324px; } .runi-sparkle-5 { transform-origin: 398px 92px; } .runi-z-1 { transform-origin: 577px 267px; } .runi-z-2 { transform-origin: 640px 201px; } .runi-z-3 { transform-origin: 715px 123px; } /* ── Transiciones entre estados ────────────────────────────────────────────────────── */ .runi-arm, .runi-arm-reach, .runi-wrist { transition: transform calc(var(--runi-calm) * 2) var(--runi-ease), opacity var(--runi-calm) var(--runi-ease), visibility 0s linear var(--runi-calm); } .runi-gaze, .runi-lid-pose, .runi-brow-l, .runi-brow-r { transition: transform calc(var(--runi-calm) * 1.4) var(--runi-ease); } .runi-acc, .runi-wrist { opacity: 0; visibility: hidden; } .runi-acc { transform: scale(.94); transform-box: fill-box; transform-origin: center; transition: opacity var(--runi-calm) var(--runi-ease), transform calc(var(--runi-calm) * 1.4) var(--runi-ease), visibility 0s linear var(--runi-calm); } .runi[data-state=leyendo] .runi-acc-book, .runi[data-state=buscando] .runi-acc-files, .runi[data-state=buscando] .runi-hold-lens, .runi[data-state=escribiendo] .runi-acc-paper, .runi[data-state=escribiendo] .runi-hold-pencil, .runi[data-state=escribiendo] .runi-acc-smoke, .runi[data-state=pensando] .runi-hold-pencil, .runi[data-state=pensando] .runi-acc-smoke, .runi[data-state=escuchando] .runi-acc-phones, .runi[data-state=escuchando] .runi-acc-waves, .runi[data-state=ordenando] .runi-acc-cards, .runi[data-state=celebrando] .runi-acc-sparkles, .runi[data-state=duda] .runi-acc-question, .runi[data-state=descansando] .runi-acc-zzz { opacity: 1; visibility: visible; transform: none; transition-delay: 0s, 0s, 0s; } .runi[data-state=escribiendo] .runi-hold-pencil { transform: rotate(-4deg); } .runi[data-state=pensando] .runi-hold-pencil { transform: rotate(-145deg); } .runi[data-state=escribiendo] .runi-acc-smoke { opacity: .7; } /* El humo sale del borrador: viaja con el lápiz y no aparece hasta que el lápiz ha llegado. */ .runi-smoke-at { transform: translate(725px, 300px); transition: transform calc(var(--runi-calm) * 2) var(--runi-ease); } .runi[data-state=pensando] .runi-acc-smoke, .runi[data-state=escribiendo] .runi-acc-smoke { transition-delay: calc(var(--runi-calm) * 1.4), 0s, 0s; } /* Asentamiento breve al cambiar de estado. */ .runi.is-changing .runi-head { animation: runi-settle calc(var(--runi-calm) * 2.4) var(--runi-ease); } @keyframes runi-settle { 0%, 100% { transform: none; } 40% { transform: translateY(5px) scale(1.012, .986); } } /* ── Bucles comunes: respira, parpadea y mira de lado ──────────────────────────────── */ .runi-svg { animation: runi-breathe var(--porruni-duration-breath, 4s) ease-in-out infinite; } .runi-blink { animation: runi-blink 6.4s ease-in-out infinite; } .runi-look { animation: runi-glance 9s ease-in-out infinite; } @keyframes runi-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.01, 1.022); } } @keyframes runi-blink { 0%, 46%, 53%, 100% { transform: translateY(0); } 49%, 50% { transform: translateY(64px); } } @keyframes runi-glance { 0%, 20%, 64%, 100% { transform: translate(0, 0); } 28%, 56% { transform: translate(-11px, -2px); } } @keyframes runi-sway { 0%, 100% { transform: rotate(-.8deg); } 50% { transform: rotate(.8deg); } } /* ── Poses y bucles por estado ─────────────────────────────────────────────────────── */ .runi-arm-r { transform: rotate(-18deg); } .runi-arm-l { transform: rotate(18deg); } .runi-arm-reach { transform: translateY(-14px); } .runi[data-state=leyendo] .runi-arm-reach, .runi[data-state=buscando] .runi-arm-r .runi-arm-reach, .runi[data-state=escribiendo] .runi-arm-r .runi-arm-reach, .runi[data-state=pensando] .runi-arm-r .runi-arm-reach, .runi[data-state=ordenando] .runi-arm-r .runi-arm-reach { transform: none; } .runi-mouth-smile { opacity: 1; } .runi-lid-pose { transform: translateY(8px); } /* reposo: tranquilo, balanceo casi imperceptible. */ .runi[data-state=reposo] .runi-motion { animation: runi-sway 8s ease-in-out infinite; } /* saludando: levanta la mano y la mueve sin prisa. */ .runi[data-state=saludando] .runi-arm-r { transform: rotate(-150deg); } .runi[data-state=saludando] .runi-arm-r .runi-arm-reach { transform: translateY(58px); } .runi[data-state=saludando] .runi-brow-l, .runi[data-state=saludando] .runi-brow-r { transform: translateY(-6px); } .runi[data-state=saludando] .runi-gaze { transform: translate(4px, 0); } .runi[data-state=saludando] .runi-mouth-smile { opacity: 0; } .runi[data-state=saludando] .runi-mouth-wide { opacity: 1; } .runi[data-state=saludando] .runi-arm-r .runi-arm-move { animation: runi-wave-hand 3.6s ease-in-out infinite; } .runi[data-state=saludando] .runi-motion { animation: runi-sway 3.6s ease-in-out infinite; } @keyframes runi-wave-hand { 0%, 62%, 100% { transform: rotate(0); } 13%, 39% { transform: rotate(15deg); } 26%, 52% { transform: rotate(-7deg); } } /* leyendo: libro abierto, los ojos recorren las líneas y pasa la página. */ .runi[data-state=leyendo] .runi-arm-r { transform: rotate(45deg); } .runi[data-state=leyendo] .runi-arm-l { transform: rotate(-53deg); } .runi[data-state=leyendo] .runi-gaze { transform: translate(-3px, 14px); } .runi[data-state=leyendo] .runi-lid-pose { transform: translateY(14px); } .runi[data-state=leyendo] .runi-look { animation: runi-read 6s ease-in-out infinite; } .runi[data-state=leyendo] .runi-book-flip { animation: runi-page 6s ease-in-out infinite; } .runi[data-state=leyendo] .runi-arm-r .runi-arm-move { animation: runi-turn-page 6s ease-in-out infinite; } @keyframes runi-read { 0%, 4% { transform: translate(-9px, -2px); } 22% { transform: translate(7px, -2px); } 27% { transform: translate(-9px, 4px); } 45% { transform: translate(7px, 4px); } 50% { transform: translate(-9px, 9px); } 66% { transform: translate(4px, 9px); } 72%, 90% { transform: translate(9px, 2px); } 100% { transform: translate(-9px, -2px); } } @keyframes runi-page { 0%, 72% { transform: scaleX(1); opacity: 0; } 73% { opacity: 1; } 87% { transform: scaleX(-1); opacity: 1; } 90%, 100% { transform: scaleX(-1); opacity: 0; } } @keyframes runi-turn-page { 0%, 66%, 96%, 100% { transform: rotate(0); } 75%, 84% { transform: rotate(9deg); } } /* buscando: lupa que barre y fichas de archivo que pasan por debajo. */ .runi[data-state=buscando] .runi-arm-r { transform: rotate(62deg); } .runi[data-state=buscando] .runi-eye-l .runi-gaze { transform: translate(8px, 14px); } .runi[data-state=buscando] .runi-eye-r .runi-gaze { transform: translate(-8px, 14px); } .runi[data-state=buscando] .runi-arm-r .runi-arm-move { animation: runi-sweep 3.2s ease-in-out infinite alternate; } .runi[data-state=buscando] .runi-look { animation: runi-follow-lens 3.2s ease-in-out infinite alternate; } .runi-file-1 { transform: translate(-104px, 10px); } .runi-file-3 { transform: translate(104px, 10px); } .runi-file-4 { opacity: 0; } .runi[data-state=buscando] .runi-file { animation: runi-file-pass 8s ease-in-out infinite; } .runi[data-state=buscando] .runi-file-2 { animation-delay: -2s; } .runi[data-state=buscando] .runi-file-3 { animation-delay: -4s; } .runi[data-state=buscando] .runi-file-4 { animation-delay: -6s; } @keyframes runi-sweep { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } } @keyframes runi-follow-lens { from { transform: translate(5px, 3px); } to { transform: translate(-6px, -2px); } } @keyframes runi-file-pass { 0% { transform: translate(200px, 16px); opacity: 0; } 10%, 25% { transform: translate(104px, 10px); opacity: 1; } 35%, 50% { transform: translate(0, 0); opacity: 1; } 60%, 75% { transform: translate(-104px, 10px); opacity: 1; } 85%, 100% { transform: translate(-200px, 16px); opacity: 0; } } /* escribiendo: el lápiz garabatea y las palabras aparecen en el papel. */ .runi[data-state=escribiendo] .runi-arm-r { transform: rotate(33deg); } .runi[data-state=escribiendo] .runi-gaze { transform: translate(6px, 15px); } .runi[data-state=escribiendo] .runi-lid-pose { transform: translateY(12px); } .runi[data-state=escribiendo] .runi-smoke-at { transform: translate(591px, 498px) scale(.7); } .runi[data-state=escribiendo] .runi-arm-r .runi-arm-move { animation: runi-scribble 2.4s ease-in-out infinite; } .runi[data-state=escribiendo] .runi-look { animation: runi-follow-pencil 2.4s ease-in-out infinite; } .runi[data-state=escribiendo] .runi-smoke-1 { animation: runi-smoke 8s linear infinite; } .runi[data-state=escribiendo] .runi-word-1 { animation: runi-word-1 8.4s ease-out infinite; } .runi[data-state=escribiendo] .runi-word-2 { animation: runi-word-2 8.4s ease-out infinite; } .runi[data-state=escribiendo] .runi-word-3 { animation: runi-word-3 8.4s ease-out infinite; } .runi[data-state=escribiendo] .runi-word-4 { animation: runi-word-4 8.4s ease-out infinite; } .runi[data-state=escribiendo] .runi-word-5 { animation: runi-word-5 8.4s ease-out infinite; } .runi[data-state=escribiendo] .runi-word-6 { animation: runi-word-6 8.4s ease-out infinite; } .runi[data-state=escribiendo] .runi-word-7 { animation: runi-word-7 8.4s ease-out infinite; } @keyframes runi-scribble { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-3deg); } 30% { transform: rotate(2deg); } 45% { transform: rotate(-4deg); } 60% { transform: rotate(1deg); } 75% { transform: rotate(-2.5deg); } 90% { transform: rotate(2deg); } } @keyframes runi-follow-pencil { 0%, 100% { transform: translate(-3px, 0); } 50% { transform: translate(4px, 2px); } } @keyframes runi-word-1 { 0%, 2% { opacity: 0; } 6%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } } @keyframes runi-word-2 { 0%, 10% { opacity: 0; } 14%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } } @keyframes runi-word-3 { 0%, 18% { opacity: 0; } 22%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } } @keyframes runi-word-4 { 0%, 28% { opacity: 0; } 32%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } } @keyframes runi-word-5 { 0%, 38% { opacity: 0; } 42%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } } @keyframes runi-word-6 { 0%, 50% { opacity: 0; } 54%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } } @keyframes runi-word-7 { 0%, 58% { opacity: 0; } 62%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } } /* pensando: lápiz humeante junto a la boca, mirada hacia arriba (la pose del logo). */ .runi[data-state=pensando] .runi-arm-r { transform: rotate(-165deg); } .runi[data-state=pensando] .runi-gaze { transform: translate(7px, -7px); } .runi[data-state=pensando] .runi-lid-pose { transform: translateY(2px); } .runi[data-state=pensando] .runi-brow-l, .runi[data-state=pensando] .runi-brow-r { transform: translateY(-6px); } .runi[data-state=pensando] .runi-arm-r .runi-arm-move { animation: runi-ponder 8s ease-in-out infinite; } .runi[data-state=pensando] .runi-smoke { animation: runi-smoke 8s linear infinite; } .runi[data-state=pensando] .runi-smoke-2 { animation-delay: -2.667s; } .runi[data-state=pensando] .runi-smoke-3 { animation-delay: -5.333s; } .runi-smoke { opacity: 0; } .runi-smoke-1 { opacity: .85; transform: translate(-6px, -24px) scale(.8); } @keyframes runi-ponder { 0%, 17%, 100% { transform: rotate(-1.5deg); } 41%, 66% { transform: rotate(3.5deg); } } @keyframes runi-smoke { 0% { transform: translate(0, 9px) scale(.56); opacity: 0; } 13% { opacity: .85; } 65% { opacity: .5; } 100% { transform: translate(-18px, -103px) scale(.97); opacity: 0; } } /* escuchando: auriculares, ondas que salen despacio y un leve cabeceo. */ .runi[data-state=escuchando] .runi-lid-pose { transform: translateY(26px); } .runi[data-state=escuchando] .runi-gaze { transform: translate(-4px, 4px); } .runi[data-state=escuchando] .runi-mouth-smile { opacity: 0; } .runi[data-state=escuchando] .runi-mouth-wide { opacity: 1; } .runi[data-state=escuchando] .runi-motion { animation: runi-nod 3.2s ease-in-out infinite; } .runi[data-state=escuchando] .runi-arm-r .runi-arm-move { animation: runi-tap 1.6s ease-in-out infinite; } .runi[data-state=escuchando] .runi-wave-l1, .runi[data-state=escuchando] .runi-wave-l2 { animation: runi-wave-left 2.4s ease-out infinite; } .runi[data-state=escuchando] .runi-wave-r1, .runi[data-state=escuchando] .runi-wave-r2 { animation: runi-wave-right 2.4s ease-out infinite; } .runi[data-state=escuchando] .runi-wave-l2, .runi[data-state=escuchando] .runi-wave-r2 { animation-delay: -1.2s; } .runi-wave-l2 { opacity: .5; transform: translateX(-22px) scale(1.12); } .runi-wave-r2 { opacity: .5; transform: translateX(22px) scale(1.12); } @keyframes runi-nod { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } } @keyframes runi-tap { 0%, 60%, 100% { transform: rotate(0); } 30% { transform: rotate(-6deg); } } @keyframes runi-wave-left { 0% { transform: translateX(10px) scale(.7); opacity: 0; } 25% { opacity: .95; } 100% { transform: translateX(-30px) scale(1.18); opacity: 0; } } @keyframes runi-wave-right { 0% { transform: translateX(-10px) scale(.7); opacity: 0; } 25% { opacity: .95; } 100% { transform: translateX(30px) scale(1.18); opacity: 0; } } /* ordenando: deja fichas una a una sobre el montón. */ .runi[data-state=ordenando] .runi-arm-r { transform: rotate(2deg); } .runi[data-state=ordenando] .runi-gaze { transform: translate(10px, 14px); } .runi[data-state=ordenando] .runi-arm-r .runi-arm-reach { animation: runi-place 6s ease-in-out infinite; } .runi[data-state=ordenando] .runi-card-1 { animation: runi-card-1 6s ease-out infinite; } .runi[data-state=ordenando] .runi-card-2 { animation: runi-card-2 6s ease-out infinite; } .runi[data-state=ordenando] .runi-card-3 { animation: runi-card-3 6s ease-out infinite; } @keyframes runi-place { 0%, 22%, 44% { transform: translateY(-34px); } 12%, 34%, 56% { transform: translateY(4px); } 72%, 100% { transform: translateY(-20px); } } @keyframes runi-card-1 { 0% { transform: translateY(-80px); opacity: 0; } 5% { opacity: 1; } 13%, 84% { transform: translateY(0); opacity: 1; } 92%, 100% { transform: translateY(0); opacity: 0; } } @keyframes runi-card-2 { 0%, 22% { transform: translateY(-80px); opacity: 0; } 27% { opacity: 1; } 35%, 84% { transform: translateY(0); opacity: 1; } 92%, 100% { transform: translateY(0); opacity: 0; } } @keyframes runi-card-3 { 0%, 44% { transform: translateY(-80px); opacity: 0; } 49% { opacity: 1; } 57%, 84% { transform: translateY(0); opacity: 1; } 92%, 100% { transform: translateY(0); opacity: 0; } } /* celebrando: contento pero tranquilo; brazos arriba, chispas suaves. */ .runi[data-state=celebrando] .runi-arm-r { transform: rotate(-125deg); } .runi[data-state=celebrando] .runi-arm-l { transform: rotate(125deg); } .runi[data-state=celebrando] .runi-arm-reach { transform: translateY(40px); } .runi[data-state=celebrando] .runi-lid-pose { transform: translateY(30px); } .runi[data-state=celebrando] .runi-gaze { transform: translate(0, 6px); } .runi[data-state=celebrando] .runi-brow-l, .runi[data-state=celebrando] .runi-brow-r { transform: translateY(-5px); } .runi[data-state=celebrando] .runi-mouth-smile { opacity: 0; } .runi[data-state=celebrando] .runi-mouth-wide { opacity: 1; } .runi[data-state=celebrando] .runi-motion { animation: runi-sway-happy 2.8s ease-in-out infinite; } .runi[data-state=celebrando] .runi-arm-r .runi-arm-move { animation: runi-cheer 2.8s ease-in-out infinite alternate; } .runi[data-state=celebrando] .runi-arm-l .runi-arm-move { animation: runi-cheer 2.8s ease-in-out infinite alternate-reverse; } .runi[data-state=celebrando] .runi-sparkle { animation: runi-twinkle 3s ease-in-out infinite; } .runi[data-state=celebrando] .runi-sparkle-2 { animation-delay: -.6s; } .runi[data-state=celebrando] .runi-sparkle-3 { animation-delay: -1.2s; } .runi[data-state=celebrando] .runi-sparkle-4 { animation-delay: -1.8s; } .runi[data-state=celebrando] .runi-sparkle-5 { animation-delay: -2.4s; } @keyframes runi-sway-happy { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } } @keyframes runi-cheer { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } } @keyframes runi-twinkle { 0%, 100% { transform: scale(.45) rotate(0); opacity: .25; } 50% { transform: scale(1) rotate(18deg); opacity: 1; } } /* duda: ladea la cabeza, ceja arriba, mano en la barbilla y una interrogación que flota. */ .runi[data-state=duda] .runi-pose { transform: rotate(-5deg); } .runi[data-state=duda] .runi-arm-r { transform: rotate(77deg); } .runi[data-state=duda] .runi-arm-r .runi-arm-reach { transform: translateY(8px); } .runi[data-state=duda] .runi-brow-r { transform: translateY(-16px) rotate(-7deg); } .runi[data-state=duda] .runi-brow-l { transform: translateY(4px); } .runi[data-state=duda] .runi-gaze { transform: translate(-10px, -6px); } .runi[data-state=duda] .runi-lid-pose { transform: translateY(3px); } .runi[data-state=duda] .runi-mouth-smile { opacity: 0; } .runi[data-state=duda] .runi-mouth-hmm { opacity: 1; } .runi[data-state=duda] .runi-arm-r .runi-arm-move { animation: runi-chin 3.6s ease-in-out infinite; } .runi[data-state=duda] .runi-question { animation: runi-question 3.6s ease-in-out infinite; } .runi[data-state=duda] .runi-look { animation: runi-glance 6s ease-in-out infinite; } @keyframes runi-chin { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(4deg); } } @keyframes runi-question { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(5deg); } } /* descansando: ojos cerrados, respiración lenta y zzz. */ .runi[data-state=descansando] .runi-pose { transform: rotate(3deg); } .runi[data-state=descansando] .runi-arm-r { transform: rotate(-20deg); } .runi[data-state=descansando] .runi-arm-l { transform: rotate(20deg); } .runi[data-state=descansando] .runi-lid-pose { transform: translateY(54px); } .runi[data-state=descansando] .runi-brow-l, .runi[data-state=descansando] .runi-brow-r { transform: translateY(7px); } .runi[data-state=descansando] .runi-mouth-smile { opacity: 0; } .runi[data-state=descansando] .runi-mouth-sleep { opacity: 1; } .runi[data-state=descansando] .runi-svg { animation: runi-breathe-deep 6s ease-in-out infinite; } .runi[data-state=descansando] .runi-blink, .runi[data-state=descansando] .runi-look { animation: none; } .runi[data-state=descansando] .runi-z { animation: runi-z 5.4s ease-in-out infinite; } .runi[data-state=descansando] .runi-z-2 { animation-delay: -1.8s; } .runi[data-state=descansando] .runi-z-3 { animation-delay: -3.6s; } @keyframes runi-breathe-deep { 0%, 100% { transform: scale(1, 1); } 45% { transform: scale(1.018, 1.036); } } @keyframes runi-z { 0% { transform: translate(-14px, 22px) scale(.7); opacity: 0; } 25% { opacity: 1; } 75% { opacity: .9; } 100% { transform: translate(18px, -26px) scale(1.08); opacity: 0; } } /* ── Movimiento reducido y Runi fuera de la vista ──────────────────────────────────── */ .runi[data-visible=false], .runi[data-visible=false] * { animation-play-state: paused !important; } /* Resting poses need no continuous GPU frames, even in a visible window. */ .runi[data-state=reposo], .runi[data-state=reposo] *, .runi[data-state=descansando], .runi[data-state=descansando] * { animation: none !important; } html[data-page-hidden=true] .runi, html[data-page-hidden=true] .runi * { animation-play-state: paused !important; } .runi[data-motion=reduced], .runi[data-motion=reduced] *, .runi[data-motion=reduced] *::before, .runi[data-motion=reduced] *::after { animation: none !important; transition: none !important; } html[data-reduce-motion=true] .runi, html[data-reduce-motion=true] .runi *, html[data-reduce-motion=true] .runi-activity * { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { .runi, .runi *, .runi-activity * { animation: none !important; transition: none !important; } } /* ── Indicador de actividad ────────────────────────────────────────────────────────── */ .runi-activity { position: relative; display: inline-flex; align-items: center; gap: 10px; min-block-size: 48px; max-inline-size: 100%; color: var(--porruni-ink, CanvasText); font-family: var(--porruni-font-text, system-ui, sans-serif); font-size: 14px; line-height: 1.35; } .runi-activity-text { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: .45em; min-inline-size: 0; } .runi-activity-verb { color: var(--porruni-coral-ink, currentColor); font-weight: 700; transition: opacity 220ms var(--porruni-ease, ease); } .runi-activity-verb.is-leaving { opacity: 0; } .runi-activity-time { color: var(--porruni-ink-soft, currentColor); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .runi-activity-time::before { content: "· "; } .runi-activity[data-running=false] .runi-activity-verb { color: var(--porruni-ink, currentColor); } .runi-sr-only { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Source snapshots are opened explicitly, including in narrow windows. */ .study-document-sources { overflow-wrap: anywhere; } .study-document-sources blockquote { margin: 10px 0; padding-left: 12px; border-left: 2px solid currentColor; white-space: pre-wrap; } .study-document-sources li { margin-bottom: 18px; } .study-document-sources [data-study-sources-focus]:focus { outline: 2px solid currentColor; outline-offset: 4px; } /* ── css/03-shell.css ── */ /* * Porruni · estructura compartida por todas las vistas. * Se carga la última: barra lateral (carril y barra inferior en ventanas estrechas), barra superior, * cabecera de la vista, aviso de sesión universitaria, avisos (toast), diálogos y búsqueda. * Solo usa los tokens de system.css y brand.css. El comportamiento vive en shell.js. * * > 1100 px barra lateral completa: destinos, recientes, Plan/Afiliados/Ajustes y tu nombre * 701–1100 la misma barra, más estrecha (la app de escritorio mide al menos 940 px; el texto ampliado usa zoom) * ≤ 700 barra inferior translúcida con los destinos y Ajustes (vista previa y ventanas muy estrechas) */ /* ── Armazón ─────────────────────────────────────────────────────────────────────────────────── */ .app-shell { min-height: calc(100dvh / var(--text-zoom)); display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); } .workspace { width: 100%; max-width: var(--content-max); min-width: 0; margin: 0 auto; padding: 0 var(--gutter) var(--space-10); } .workspace:focus { outline: none; } html:is([data-view=runi], [data-view=settings], [data-view=plan], [data-view=affiliates], [data-view=home], [data-view=grades], [data-view=notes], [data-view=circle]) #empty-state { display: none; } /* En Inicio, Runi, Mi semana, Notas, Mi círculo, Plan y Afiliados el aviso de la sesión universitaria no se queda fijo: solo aparece si * hay que iniciar sesión o algo ha fallado. En Mis clases, Estudio y Ajustes se ve siempre. */ html:is([data-view=runi], [data-view=notes], [data-view=plan], [data-view=affiliates], [data-view=home], [data-view=inicio], [data-view=circle]) .university-session:not(.authentication-required, .expired, .error) { display: none; } /* ── Barra lateral ─────────────────────────────────────────────────────────────────────────────── * Marca · seis destinos (Runi, Mi semana, Mis clases, Notas, Estudio, Mi círculo) · conversaciones recientes, que se desplazan * solas · al pie Plan, Afiliados, Ajustes y tu nombre completo. Lo seleccionado se distingue SOLO por el fondo * (sin raya, punto ni contorno); el foco de teclado sigue siendo un anillo propio y visible. */ .sidebar { position: sticky; top: 0; z-index: var(--layer-nav); height: calc(100dvh / var(--text-zoom)); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-4) var(--space-3) var(--space-3); background: var(--porruni-sidebar); color: var(--porruni-ink); border-right: var(--hairline); overflow: hidden; } .brand { display: flex; align-items: center; flex: none; padding: var(--space-1) var(--space-3) var(--space-1); } .brand .porruni-logo { font-size: 24px; } .sidebar nav { position: relative; display: flex; flex-direction: column; flex: none; } .nav-group { display: grid; gap: 2px; } .nav-item { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 40px; padding: 8px 8px 8px 12px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--porruni-ink-soft); font-size: var(--font-body); font-weight: var(--weight-medium); line-height: 1.3; letter-spacing: var(--tracking-body); text-align: left; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast), color var(--duration-fast), transform var(--spring-snappy) var(--ease-spring); } .nav-item:not(.active):hover { background: color-mix(in srgb, var(--porruni-surface) 55%, transparent); color: var(--porruni-ink); } .nav-item:active { transform: scale(calc(1 - .02 * var(--motion-scale))); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-press); } .nav-item.active { background: var(--porruni-surface); color: var(--porruni-ink); font-weight: var(--weight-strong); box-shadow: var(--selection-ring); } .nav-item:focus-visible { outline-offset: 1px; } .nav-icon { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; } .nav-icon .studio-icon { width: 19px; height: 19px; flex-basis: 19px; } .nav-runi-mark { display: block; width: 22px; height: 22px; } .nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Atajo ⌘/Ctrl + número: aparece al pasar el puntero o al mantener pulsada la tecla (shell.js). */ .nav-shortcut { margin-left: auto; opacity: 0; transition: opacity var(--duration-fast); } .nav-item:hover .nav-shortcut, .nav-item:focus-visible .nav-shortcut, html[data-shortcuts=visible] .nav-shortcut { opacity: 1; } /* Destino activo: un solo fondo que se desliza con un muelle entre los seis destinos (shell.js). Sin JS, * .nav-item.active conserva su propio fondo. Solo fondo: el contorno extra existe únicamente en alto contraste. */ .nav-indicator { position: absolute; z-index: 0; top: 0; left: 0; width: 0; height: 0; border-radius: var(--radius-control); background: var(--porruni-surface); box-shadow: var(--selection-ring); pointer-events: none; opacity: 0; transition: transform var(--spring-snappy) var(--ease-spring), width var(--spring-snappy) var(--ease-spring), height var(--spring-snappy) var(--ease-spring), opacity var(--duration-fade); } .nav-indicator.is-instant { transition: none; } .sidebar nav[data-indicator=ready] .nav-item.active { background: transparent; box-shadow: none; } /* Recientes (runi-recents.js): conversaciones reales y recuperables, agrupadas por día. Solo esta zona se desplaza. */ .sidebar-recents { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; padding-top: var(--space-2); border-top: var(--hairline); } .sidebar-group-label { flex: none; margin: 0; padding: var(--space-1) var(--space-3) 0; color: var(--porruni-ink-soft); font-size: var(--font-label); line-height: var(--leading-label); letter-spacing: var(--tracking-label); font-weight: 800; text-transform: uppercase; } .sidebar-recents-list { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-height: 0; margin-top: var(--space-1); padding: 0 1px var(--space-2); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .sidebar-recents-list:empty { display: none; } .sidebar-recents[data-recents-state=list] .sidebar-recents-empty { display: none; } .sidebar-recents-empty { margin: var(--space-2) 0 0; padding: 0 var(--space-3); color: var(--porruni-ink-soft); font-size: var(--font-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption); } .recents-day { margin: var(--space-3) 0 2px; padding: 0 var(--space-3); color: var(--porruni-ink-soft); font-size: 10.5px; line-height: 1.3; letter-spacing: .06em; font-weight: 750; text-transform: uppercase; } .recents-day:first-child { margin-top: var(--space-1); } .recent-item { display: grid; flex: none; gap: 1px; width: 100%; min-height: 40px; padding: 6px var(--space-3); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--porruni-ink); text-align: left; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast); } .recent-item:hover { background: color-mix(in srgb, var(--porruni-selected) 45%, transparent); } .recent-item.is-selected { background: var(--porruni-selected); } .recent-item:focus-visible { outline-offset: -2px; } .recent-title { overflow: hidden; padding-bottom: 1px; font-size: var(--font-footnote); font-weight: 600; line-height: 1.45; letter-spacing: var(--tracking-footnote); text-overflow: ellipsis; white-space: nowrap; } .recent-meta { overflow: hidden; padding-bottom: 1px; color: var(--porruni-ink-soft); font-size: var(--font-caption); line-height: 1.4; letter-spacing: var(--tracking-caption); text-overflow: ellipsis; white-space: nowrap; } .recent-item.is-selected .recent-meta { color: var(--porruni-selected-ink-soft); } .recent-item.is-demo .recent-meta::before { content: "Ficticia · "; } /* Pie: Plan, Afiliados y Ajustes en filas más ligeras que los destinos, y tu cuenta. */ .sidebar-footer { display: grid; gap: var(--space-1); flex: none; padding-top: var(--space-2); border-top: var(--hairline); } .sidebar-links { display: grid; gap: 1px; } .nav-item-foot { min-height: 34px; padding-block: 5px; font-size: var(--font-footnote); letter-spacing: var(--tracking-footnote); } .nav-item-foot .nav-icon .studio-icon { width: 17px; height: 17px; flex-basis: 17px; } .nav-item-foot.active { background: var(--porruni-selected); } .nav-note { margin-left: auto; color: var(--porruni-ink-soft); font-size: 10.5px; font-weight: var(--weight-medium); white-space: nowrap; } .nav-item-foot.active .nav-note { color: var(--porruni-selected-ink-soft); } /* Tu cuenta: abre Ajustes › Cuenta y conexiones. El nombre completo se lee entero, en varias líneas si hace falta. */ .profile { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: var(--space-3); width: 100%; min-width: 0; margin-top: var(--space-1); padding: var(--space-3) var(--space-3); border: var(--hairline); border-radius: var(--radius-card); background: var(--porruni-surface); color: var(--porruni-ink); text-align: left; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast), transform var(--spring-snappy) var(--ease-spring); } .profile:hover { background: color-mix(in srgb, var(--porruni-surface) 70%, var(--porruni-selected)); } .profile:active { transform: scale(calc(1 - .02 * var(--motion-scale))); transition-duration: var(--duration-fast), var(--duration-press); } .profile .avatar { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--porruni-cream); } .profile .avatar img { visibility: hidden; width: 20px; height: 20px; } .profile .avatar::before { content: ""; position: absolute; inset: 7px; background: var(--porruni-coral-ink); -webkit-mask: url(assets/user.svg) center / contain no-repeat; mask: url(assets/user.svg) center / contain no-repeat; } .profile-copy { display: grid; gap: 2px; min-width: 0; } .profile strong { color: var(--porruni-ink); font-size: var(--font-footnote); font-weight: var(--weight-strong); line-height: 1.35; overflow-wrap: anywhere; text-wrap: balance; } .profile small { color: var(--porruni-ink-soft); font-size: var(--font-caption); line-height: 1.35; overflow-wrap: anywhere; } /* ── Barra superior ────────────────────────────────────────────────────────────────────────────── * Transparente arriba del todo; al desplazarse se vuelve material y el contenido pasa por debajo con * un borde difuminado (no una raya). Cuando el título grande sale de vista, su nombre aparece aquí. */ .studio-utility { position: sticky; top: 0; z-index: var(--layer-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--toolbar-height); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); background: transparent; transition: background-color var(--duration-fade), box-shadow var(--duration-fade); } .studio-utility::after { content: ""; position: absolute; inset: 100% 0 auto; height: 14px; background: linear-gradient(var(--material-chrome), transparent); opacity: 0; pointer-events: none; transition: opacity var(--duration-fade); } .studio-utility.is-stuck { background: var(--material-chrome); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); } .studio-utility.is-stuck::after { opacity: 1; } .toolbar-lead { display: grid; align-items: center; min-width: 0; flex: 1 1 auto; } .toolbar-lead > * { grid-area: 1 / 1; min-width: 0; } .studio-date { color: var(--porruni-ink-soft); font-size: var(--font-footnote); font-weight: 600; letter-spacing: var(--tracking-footnote); transition: opacity var(--duration-fade), transform var(--spring-smooth) var(--ease-spring); } .studio-date::first-letter { text-transform: uppercase; } .toolbar-title { overflow: hidden; color: var(--porruni-ink); font-family: var(--porruni-font-display); font-size: var(--font-headline); font-weight: var(--weight-display); letter-spacing: var(--tracking-headline); white-space: nowrap; text-overflow: ellipsis; opacity: 0; transform: translateY(calc(8px * var(--motion-scale))); transition: opacity var(--duration-fade), transform var(--spring-smooth) var(--ease-spring); } .studio-utility.shows-title .toolbar-title { opacity: 1; transform: none; } .studio-utility.shows-title .studio-date { opacity: 0; transform: translateY(calc(-8px * var(--motion-scale))); } .toolbar-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; } .studio-search-launch { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 4px 6px 4px 12px; border: var(--hairline); border-radius: var(--radius-pill); background: var(--material-thin); color: var(--porruni-ink-soft); font-size: var(--font-footnote); font-weight: 600; letter-spacing: var(--tracking-footnote); -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), transform var(--spring-snappy) var(--ease-spring); } .studio-search-launch:hover { background: var(--porruni-surface); border-color: var(--porruni-line-strong); color: var(--porruni-ink); } .studio-search-launch:active { transform: scale(var(--press-scale)); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), var(--duration-press); } .studio-search-launch .studio-icon { width: 17px; height: 17px; flex-basis: 17px; } .studio-search-launch .keycap { margin-left: var(--space-1); } .toolbar-actions .icon-button { width: 36px; height: 36px; flex-basis: 36px; border-radius: var(--radius-pill); background: var(--material-thin); } .toolbar-actions .icon-button:hover { background: var(--porruni-surface); border-color: var(--porruni-line-strong); } .mobile-masthead { display: none; padding: 4px 6px; margin-left: -6px; border: 0; border-radius: var(--radius-control); background: none; color: inherit; font: inherit; text-align: left; } /* ── Cabecera de la vista ────────────────────────────────────────────────────────────────────── */ .topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin: var(--space-2) 0 var(--space-6); } .topbar > div { min-width: 0; } .eyebrow { display: none; } .topbar h1 { margin: 0; font-size: var(--font-large-title); line-height: var(--leading-large-title); letter-spacing: var(--tracking-large-title); text-wrap: balance; } .view-description { margin: var(--space-2) 0 0; max-width: var(--reading-max); color: var(--porruni-ink-soft); font-size: var(--font-callout); line-height: var(--leading-callout); text-wrap: pretty; } /* Procedencia de los datos: privados en este ordenador o de ejemplo (estos nunca pasan por reales). */ .mode-badge { display: inline-flex; align-items: center; gap: 7px; flex: none; margin-bottom: 4px; padding: 5px 11px; border: var(--hairline); border-radius: var(--radius-pill); background: var(--material-thin); color: var(--porruni-ink-soft); font-size: var(--font-caption); font-weight: var(--weight-strong); letter-spacing: var(--tracking-caption); line-height: 1.3; } .mode-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--porruni-mint); box-shadow: 0 0 0 3px var(--porruni-mint-soft); } .mode-badge.is-example { border-color: var(--porruni-warning-line); background: var(--porruni-warning-soft); color: var(--porruni-warning-ink); } /* Apartados de Mis clases (Asignaturas · Calificaciones · Asistencia) y Mi semana (Calendario · Tareas): el actual, por fondo. */ .view-switch { display: inline-flex; gap: 2px; margin-top: var(--space-3); padding: 3px; border: var(--hairline); border-radius: var(--radius-pill); background: var(--material-thin); } .view-switch[hidden] { display: none; } .view-switch-item { min-height: 32px; padding: 4px 14px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--porruni-ink-soft); font-size: var(--font-footnote); font-weight: 650; letter-spacing: var(--tracking-footnote); transition: background-color var(--duration-fast), color var(--duration-fast); } .view-switch-item:hover { color: var(--porruni-ink); } .view-switch-item.is-current { background: var(--porruni-selected); color: var(--porruni-ink); } /* A 320 px «Asignaturas · Calificaciones · Asistencia» no cabe en una píldora: se ajusta el relleno lateral y la letra antes que desbordar la página (lote de integración). */ @media (max-width: 360px) { .view-switch { max-width: 100%; } .view-switch-item { padding-inline: 8px; font-size: var(--font-caption); } } /* Demostración en curso: aviso permanente y discreto en la barra superior, con Reiniciar y Salir (runi-demo.js). */ .demo-bar { display: inline-flex; align-items: center; gap: var(--space-1); } .demo-bar[hidden] { display: none; } .demo-pill { padding: 4px 10px; border: 1px solid var(--porruni-warning-line); border-radius: var(--radius-pill); background: var(--porruni-warning-soft); color: var(--porruni-warning-ink); font-size: var(--font-caption); font-weight: var(--weight-strong); letter-spacing: var(--tracking-caption); white-space: nowrap; } .demo-bar .quiet-button { min-height: 32px; padding-block: 4px; } /* ── Plan y Afiliados: vistas previas (index.html), sin cobros ni invitaciones ─────────────────────── */ .preview-view { display: grid; gap: var(--space-5); max-width: 56rem; } .preview-banner { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--porruni-provisional-line); border-radius: var(--radius-card); background: var(--porruni-provisional-soft); color: var(--porruni-provisional-ink); font-size: var(--font-footnote); line-height: var(--leading-footnote); } .preview-banner .studio-icon { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; } .preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-4); } .preview-card { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-5); border: var(--hairline); border-radius: var(--radius-card); background: var(--porruni-surface); } .preview-card.is-current { background: color-mix(in srgb, var(--porruni-surface) 70%, var(--porruni-cream)); } .preview-card h3 { margin: 0; font-family: var(--porruni-font-display); font-size: var(--font-title-3); line-height: var(--leading-title-3); } .preview-kicker { margin: 0; color: var(--porruni-ink-soft); font-size: var(--font-label); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; } .preview-price { margin: 0; color: var(--porruni-ink); font-size: var(--font-title-2); font-weight: var(--weight-strong); line-height: var(--leading-title-2); } .preview-price small { color: var(--porruni-ink-soft); font-size: var(--font-caption); font-weight: var(--weight-medium); } .preview-card ul, .preview-steps { margin: 0; padding-left: var(--space-5); color: var(--porruni-ink); font-size: var(--font-footnote); line-height: var(--leading-body); } .preview-steps li + li { margin-top: var(--space-2); } .preview-terms { display: grid; gap: var(--space-2); margin: 0; } .preview-terms div { display: flex; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: var(--hairline); font-size: var(--font-footnote); } .preview-terms dt { color: var(--porruni-ink); font-weight: var(--weight-strong); } .preview-terms dd { margin: 0; color: var(--porruni-ink-soft); } .preview-state { margin: var(--space-1) 0 0; color: var(--porruni-ink-soft); font-size: var(--font-caption); } /* ── Sesión universitaria (app.js renderUniversitySession) ─────────────────────────────────────── * Comprobando y sesión iniciada: una franja tranquila. Caducada, pendiente o con error: aviso con * color y acción. La sesión iniciada solo se ve en Hoy y en Ajustes › Cuenta y conexiones o Privacidad (donde se * puede borrar); en lo demás sigue en el árbol de accesibilidad para que un cambio de estado se anuncie. */ .university-session { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--stack-gap); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2); border: var(--hairline); border-radius: var(--radius-card); background: var(--porruni-surface); } .university-session-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: visible; background: var(--porruni-surface-soft); color: var(--porruni-ink-soft); font-weight: 900; } .university-session-icon .runi { --runi-size: 40px !important; } .university-session-icon:empty::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--porruni-line-strong); } .university-session > div { min-width: 0; } .university-session strong { display: block; color: var(--porruni-ink); font-size: var(--font-footnote); font-weight: var(--weight-strong); line-height: 1.35; } .university-session p { margin: 2px 0 0; color: var(--porruni-ink-soft); font-size: var(--font-caption); line-height: 1.45; letter-spacing: var(--tracking-caption); } .university-session small { display: block; margin-top: 2px; color: var(--porruni-ink-soft); font-size: var(--font-caption); line-height: 1.45; } .university-session .primary-button { min-height: 36px; padding-block: 6px; } .university-session.connected, .university-session.browser-connected { background: color-mix(in srgb, var(--porruni-surface) 60%, transparent); } .university-session.connected .university-session-icon, .university-session.browser-connected .university-session-icon { background: var(--porruni-success-soft); color: var(--porruni-success-ink); } .university-session.expired, .university-session.authentication-required { border-color: var(--porruni-warning-line); background: var(--porruni-warning-soft); } .university-session.error { border-color: var(--porruni-danger-line); background: var(--porruni-danger-soft); } .university-session.expired .university-session-icon, .university-session.authentication-required .university-session-icon, .university-session.error .university-session-icon { background: var(--porruni-surface); } .university-session.expired .university-session-icon { color: var(--porruni-warning-ink); } .university-session.error .university-session-icon { color: var(--porruni-danger-ink); } .university-session.expired p, .university-session.authentication-required p, .university-session.error p { color: var(--porruni-ink); } html[data-view]:not([data-view=home]):not([data-view=settings]) .university-session:is(.connected, .browser-connected), html[data-view=settings]:has(#settings-view:not([data-section=account]):not([data-section=privacy])) .university-session:is(.connected, .browser-connected) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ── Avisos (toast): los da Runi ───────────────────────────────────────────────────────────────── * Material flotante que se materializa abajo a la derecha y se va por el mismo camino. */ .toast { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: var(--layer-toast); display: flex; align-items: center; gap: var(--space-3); max-width: min(440px, calc(100% - 32px)); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2); border: 1px solid color-mix(in srgb, var(--porruni-line) 80%, transparent); border-radius: var(--radius-card); background: var(--material-regular); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); box-shadow: var(--elevation-3), inset 0 1px 0 var(--material-highlight); color: var(--porruni-ink); font-size: var(--font-body); font-weight: 600; line-height: 1.45; pointer-events: none; transform-origin: 100% 100%; opacity: 0; transform: translateY(calc(16px * var(--motion-scale))) scale(calc(1 - .04 * var(--motion-scale))); transition: opacity var(--duration-fade) var(--ease-out), transform var(--spring-smooth) var(--ease-spring); } .toast.show { opacity: 1; transform: none; } .toast-runi { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: var(--porruni-surface-soft); } .toast-runi .runi { --runi-size: 38px !important; } .toast-runi:empty { display: none; } .toast-text:empty { display: none; } /* El aviso oculto sigue en pantalla con opacidad 0: su Runi no debe seguir animándose. */ .toast:not(.show) .runi, .toast:not(.show) .runi * { animation-play-state: paused !important; } /* ── Diálogos (búsqueda y detalle de tarea) ────────────────────────────────────────────────────── * Tarea modal: velo que atenúa y hoja sólida que crece desde su sitio; se va por el mismo camino. * Con «Tamaño del texto» el body lleva zoom y 100dvh se multiplica: la altura se divide por --text-zoom. */ .studio-dialog { width: min(620px, calc(100% - 32px)); max-height: min(760px, calc(100dvh / var(--text-zoom) - 48px)); padding: var(--space-6); border: var(--hairline); border-radius: var(--radius-sheet); background: var(--porruni-surface); color: var(--porruni-ink); box-shadow: var(--elevation-3); overflow-y: auto; overscroll-behavior: contain; opacity: 1; transform: none; transition: opacity var(--duration-fade) var(--ease-out), transform var(--spring-smooth) var(--ease-spring), overlay var(--spring-smooth) allow-discrete, display var(--spring-smooth) allow-discrete; } .studio-dialog:not([open]) { opacity: 0; transform: translateY(calc(10px * var(--motion-scale))) scale(calc(1 - .03 * var(--motion-scale))); } @starting-style { .studio-dialog[open] { opacity: 0; transform: translateY(calc(10px * var(--motion-scale))) scale(calc(1 - .03 * var(--motion-scale))); } } .studio-dialog::backdrop { background: var(--scrim); opacity: 1; transition: opacity var(--duration-fade) var(--ease-out), overlay var(--duration-fade) allow-discrete, display var(--duration-fade) allow-discrete; } .studio-dialog:not([open])::backdrop { opacity: 0; } @starting-style { .studio-dialog[open]::backdrop { opacity: 0; } } .studio-dialog header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); } .studio-dialog h2 { margin: 0; font-size: var(--font-title-2); line-height: var(--leading-title-2); letter-spacing: var(--tracking-title-2); } /* Búsqueda: aparece arriba, cerca del botón que la abre, como un buscador del sistema. */ .studio-search-dialog { max-height: min(760px, calc(100dvh / var(--text-zoom) - min(12vh, 96px) - 24px)); margin-top: min(12vh, 96px); transform-origin: 50% 0; } .studio-search-dialog header h2 { font-size: var(--font-title-3); line-height: var(--leading-title-3); letter-spacing: var(--tracking-title-3); } .studio-search-dialog .studio-search-field { display: flex; align-items: center; gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: var(--hairline); color: var(--porruni-ink-soft); } .studio-search-dialog .studio-search-field input { width: 100%; min-height: 44px; border: 0; padding-left: 0; background: transparent; font-size: 16px; } .studio-search-dialog .studio-search-field input:focus-visible { outline: none; } .studio-search-dialog .studio-search-field:focus-within { border-bottom-color: var(--porruni-focus); } .search-group-label { margin: var(--space-5) 0 var(--space-2); color: var(--porruni-ink-soft); font-size: var(--font-label); line-height: var(--leading-label); letter-spacing: var(--tracking-label); font-weight: 800; text-transform: uppercase; } .search-subject { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 10px 6px; border: 0; border-radius: var(--radius-control); background: none; color: var(--porruni-ink); text-align: left; transition: background-color var(--duration-fast); } .search-subject strong { flex: 1; font-size: var(--font-footnote); } .search-subject:hover { background: var(--porruni-surface-soft); } /* Cambio de tema: fundido corto de toda la ventana (shell.js, View Transitions). */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: ease; } /* ── Alto contraste ──────────────────────────────────────────────────────────────────────────── */ html[data-contrast=high] .studio-utility.is-stuck { box-shadow: 0 2px 0 var(--porruni-line-strong); } html[data-contrast=high] .studio-utility::after { display: none; } @media (prefers-contrast: more) { .studio-utility.is-stuck { box-shadow: 0 2px 0 var(--porruni-line-strong); } .studio-utility::after { display: none; } } /* ── Ventanas de escritorio estrechas: 701–1100 px ────────────────────────────────────────────── * La app de escritorio mide al menos 940 px y el «Tamaño del texto» la amplía con zoom (hasta ~780 px útiles): * la barra lateral sigue completa (recientes y nombre incluidos), solo más estrecha y densa. */ @media (min-width: 701px) and (max-width: 1100px) { .app-shell { grid-template-columns: 13.25rem minmax(0, 1fr); } .sidebar { padding: var(--space-3) var(--space-2) var(--space-2); gap: var(--space-2); } .brand .porruni-logo { font-size: 22px; } .nav-item { gap: var(--space-2); padding-left: 10px; } .nav-shortcut, .nav-note { display: none; } .profile { padding: var(--space-2); gap: var(--space-2); } } /* ── Barra inferior: ≤ 700 px ───────────────────────────────────────────────────────────────── */ @media (max-width: 700px) { html { scroll-padding-bottom: 92px; } body { padding-bottom: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom)); } .app-shell { display: block; min-height: calc(100dvh / var(--text-zoom)); } .sidebar { position: fixed; inset: auto 0 0; height: auto; padding: 6px max(4px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); border-right: 0; background: var(--material-chrome); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); box-shadow: 0 -1px 0 color-mix(in srgb, var(--porruni-line) 80%, transparent); overflow: visible; } /* Barra inferior: los seis destinos y Ajustes. Recientes, Plan, Afiliados y la cuenta se abren desde Runi y Ajustes. */ .sidebar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; } /* Mi inicio se abre con el logo de la cabecera (como en la barra lateral): la barra inferior no gana un octavo destino. */ .sidebar .brand, .sidebar-recents, .sidebar .profile, .nav-note, .nav-shortcut, .nav-item-foot:not([data-view=settings]), .nav-item[data-view=inicio] { display: none; } .sidebar nav, .nav-group, .sidebar-footer, .sidebar-links { display: contents; } .nav-item { flex-direction: column; justify-content: center; gap: 3px; min-width: 0; min-height: 54px; padding: 6px 0 5px; border-radius: 12px; font-size: 10px; font-weight: var(--weight-strong); line-height: 1.1; letter-spacing: .01em; text-align: center; } .nav-item.active { font-weight: 800; } /* Siete columnas: a 320 px «Mi semana» o «Mi círculo» no caben en una línea; pasan a dos, sin recortar. */ .nav-label { max-width: 100%; overflow: visible; white-space: normal; overflow-wrap: anywhere; hyphens: none; } .nav-runi-mark { width: 22px; height: 22px; } .mobile-masthead { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 1 1 auto; } .mobile-masthead > .porruni-logo { font-size: 20px; } .mobile-masthead small { color: var(--porruni-ink-soft); font-size: 11px; font-weight: 650; white-space: nowrap; } .toolbar-lead { display: none; } .studio-utility { min-height: 56px; } /* Con la demostración en marcha, su barra (aviso, Reiniciar y Salir) baja a su propia fila: a 320 px nada desborda. */ .studio-utility:has(.demo-bar:not([hidden])) { flex-wrap: wrap; gap: var(--space-1) var(--space-2); padding-bottom: var(--space-1); } .studio-utility:has(.demo-bar:not([hidden])) .toolbar-actions { display: contents; } .demo-bar { order: 3; flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; min-width: 0; } .studio-search-launch { width: 40px; height: 40px; justify-content: center; padding: 0; } .studio-search-launch > span:not(.studio-icon), .studio-search-launch .keycap { display: none; } .toolbar-actions .icon-button { width: 40px; height: 40px; flex-basis: 40px; } .topbar { flex-direction: column; align-items: flex-start; gap: var(--space-3); margin: var(--space-2) 0 var(--space-5); } .topbar h1 { font-size: var(--font-title-1); line-height: var(--leading-title-1); letter-spacing: var(--tracking-title-1); } .view-description { font-size: var(--font-body); } .mode-badge { margin: 0; } .university-session { grid-template-columns: 40px minmax(0, 1fr); align-items: start; padding: var(--space-3); } .university-session small { display: none; } .university-session .primary-button { grid-column: 1 / -1; width: 100%; min-height: 44px; } .toast { right: var(--space-4); left: var(--space-4); bottom: calc(var(--bottom-bar-height) + var(--space-3) + env(safe-area-inset-bottom)); max-width: none; transform-origin: 50% 100%; } .studio-dialog { padding: var(--space-5); } .studio-dialog h2 { font-size: var(--font-title-3); line-height: var(--leading-title-3); } } @media (max-width: 480px) { .mobile-masthead small { display: none; } } @media (max-width: 390px) { .nav-item { font-size: 9.5px; } } @media (hover: none) and (pointer: coarse) { .nav-item, .recent-item, .studio-search-launch { -webkit-tap-highlight-color: transparent; } } /* ── css/10-inicio.css ── */ /* * Porruni · Mi inicio (porruni-inicio.js; lote de fidelidad 18-10-2026). Composición de la propuesta elegida * (direccion-visual/app «Mi inicio»): tarjeta de bienvenida con saludo, resumen, compositor y sugerencias a la izquierda * y la escena a la derecha; debajo, «Hoy» (agenda y mini semana) y «Donde lo dejaste» (hoja pautada). Escena: SVG propio * con tokens de marca (día lila/coral/crudo, noche petróleo/menta) y el Runi ORIGINAL de runi.js. Solo tokens de * brand.css y system.css. Estrecho (contenedor < 660 px): escena arriba y todo en una columna, como la propuesta móvil. */ html[data-view=inicio] .topbar { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } html[data-view=inicio] #empty-state { display: none; } html[data-view=inicio] .university-session:not(.authentication-required, .expired, .error) { display: none; } .inicio-view { container: inicio / inline-size; display: grid; gap: var(--space-4); min-width: 0; padding: var(--space-3) 0 var(--space-8); } /* ── Bienvenida ─────────────────────────────────────────────────────────────────────────────────────────────── */ .inicio-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); min-height: 22.5rem; min-width: 0; overflow: hidden; border: var(--hairline); border-radius: 24px; background: linear-gradient(100deg, var(--porruni-surface) 0%, var(--porruni-cream) 58%); } .inicio-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); min-width: 0; padding: var(--space-7) var(--space-2) var(--space-6) var(--space-6); } .inicio-title { margin: 0; font-family: var(--porruni-font-display); font-size: clamp(2.4rem, 5.4cqi, 3.1rem); font-weight: var(--weight-display); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; } .inicio-lead { max-width: 26rem; min-height: 2.9em; margin: 0; color: var(--porruni-ink-soft); font-size: var(--font-headline); line-height: 1.45; text-wrap: pretty; } .inicio-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); max-width: 32rem; margin-top: var(--space-1); padding: 6px 6px 6px var(--space-4); border: var(--hairline-strong); border-radius: 16px; background: var(--porruni-surface); box-shadow: 0 6px 18px color-mix(in srgb, var(--porruni-ink) 8%, transparent); } .inicio-composer:focus-within { border-color: var(--porruni-focus); } .inicio-view textarea#inicio-input { min-width: 0; min-height: 40px; max-height: 200px; padding: 9px 0; border: 0; background: transparent; color: var(--porruni-ink); font: inherit; font-size: var(--font-callout); line-height: 1.4; resize: none; outline: none; } .inicio-view textarea#inicio-input::placeholder { color: var(--porruni-ink-soft); } .inicio-send { min-height: 44px; border-radius: 12px; white-space: nowrap; } .inicio-notice { grid-column: 1 / -1; min-width: 0; margin: 0 var(--space-1) var(--space-1) calc(-1 * var(--space-2)); padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--porruni-surface-soft); font-size: var(--font-footnote); line-height: var(--leading-footnote); overflow-wrap: anywhere; } .inicio-notice:empty { display: none; } .inicio-notice.is-warn { background: var(--porruni-warning-soft); color: var(--porruni-warning-ink); } .inicio-notice.is-info { background: var(--porruni-provisional-soft); color: var(--porruni-provisional-ink); } .inicio-notice button { margin: var(--space-1) var(--space-1) 0 0; } .inicio-chips { display: flex; flex-wrap: wrap; gap: 6px; } .inicio-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 12px; border: var(--hairline); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--porruni-surface) 82%, transparent); color: var(--porruni-ink-soft); font-size: var(--font-footnote); font-weight: 650; line-height: 1.3; text-align: left; transition: background-color var(--duration-fast), color var(--duration-fast), transform var(--duration-press) ease-out; } .inicio-chip:hover { background: var(--porruni-surface); color: var(--porruni-ink); } .inicio-chip:active { transform: scale(var(--press-scale)); } .inicio-chip .studio-icon { width: 15px; height: 15px; flex-basis: 15px; } .inicio-view[data-composing=true] .inicio-chip { opacity: .6; } /* Escena: ilustración propia que se funde con la tarjeta por la izquierda; Runi sentado delante. */ .inicio-scene { position: relative; z-index: 1; min-width: 0; min-height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%); mask-image: linear-gradient(90deg, transparent 0, #000 20%); } .inicio-art { position: absolute; inset: 0; width: 100%; height: 100%; } .inicio-runi { position: absolute; left: 56%; bottom: 6px; width: auto; transform: translateX(-50%); } .inicio-runi .runi { --runi-size: clamp(150px, 21cqi, 212px) !important; filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--porruni-plum) 16%, transparent)); } .sc-window { fill: color-mix(in srgb, var(--porruni-provisional-soft) 78%, var(--porruni-surface)); } .sc-sun { fill: var(--porruni-coral-soft); } .sc-hill-back { fill: color-mix(in srgb, var(--porruni-mint-soft) 62%, var(--porruni-provisional-soft)); } .sc-hill { fill: var(--porruni-mint-soft); } .sc-frame { stroke: var(--porruni-surface); stroke-width: 7; stroke-linejoin: round; } .sc-shelf { fill: color-mix(in srgb, var(--porruni-yellow-ink) 30%, var(--porruni-cream)); } .sc-book-1 { fill: var(--porruni-coral); } .sc-book-2 { fill: var(--porruni-mint-ink); } .sc-book-3 { fill: var(--porruni-yellow); } .sc-book-4 { fill: var(--porruni-plum-soft); } .sc-leaf { fill: var(--porruni-mint-ink); } .sc-pot { fill: var(--porruni-coral-ink); } .sc-desk { fill: color-mix(in srgb, var(--porruni-yellow-soft) 55%, var(--porruni-cream)); } .sc-paper { fill: var(--porruni-surface); stroke: var(--porruni-line-strong); stroke-width: 1.5; } .sc-paper-line { fill: none; stroke: var(--porruni-provisional-line); stroke-width: 3; stroke-linecap: round; } .sc-folder-back { fill: color-mix(in srgb, var(--porruni-yellow) 72%, var(--porruni-yellow-ink)); } .sc-folder { fill: var(--porruni-yellow); } .sc-mug { fill: var(--porruni-provisional-ink); } .sc-pencil-a { fill: var(--porruni-coral); } .sc-pencil-b { fill: var(--porruni-yellow-ink); } .sc-spark, .sc-dot { fill: var(--porruni-coral); opacity: .55; } /* ── Hoy y Donde lo dejaste ─────────────────────────────────────────────────────────────────────────────────── */ .inicio-grid { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; min-width: 0; } .inicio-card { min-width: 0; padding: 18px 20px; border: var(--hairline); border-radius: 18px; background: var(--porruni-surface); } .inicio-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); } .inicio-card-head h3 { margin: 0; font-family: var(--porruni-font-display); font-size: var(--font-title-3); font-weight: var(--weight-display); line-height: 1.15; letter-spacing: -.01em; } .inicio-card-head h3::first-letter { text-transform: uppercase; } .inicio-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 6px; border: 0; border-radius: var(--radius-control); background: none; color: var(--porruni-coral-ink); font-size: var(--font-callout); font-weight: 700; } .inicio-link .studio-icon { width: 16px; height: 16px; flex-basis: 16px; transition: transform var(--duration-fast); } .inicio-link:hover .studio-icon { transform: translateX(calc(2px * var(--motion-scale))); } .inicio-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: var(--hairline-strong); border-radius: var(--radius-pill); background: var(--porruni-surface); color: var(--porruni-ink); font-size: var(--font-footnote); font-weight: 650; } .inicio-pill .studio-icon { width: 15px; height: 15px; flex-basis: 15px; } .inicio-agenda { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; } .inicio-row { display: grid; grid-template-columns: 52px 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 13px; background: none; color: var(--porruni-ink); text-align: left; transition: background-color var(--duration-fast), transform var(--duration-press) ease-out; } button.inicio-row:hover { background: var(--porruni-surface-soft); } button.inicio-row:active { transform: scale(.99); } .inicio-row time { font-size: var(--font-callout); font-weight: 800; font-variant-numeric: tabular-nums; } .inicio-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--porruni-line-strong); } .inicio-dot.tone-0 { background: var(--porruni-tone-0-strong); } .inicio-dot.tone-1 { background: var(--porruni-tone-1-strong); } .inicio-dot.tone-2 { background: var(--porruni-tone-2-strong); } .inicio-dot.tone-3 { background: var(--porruni-tone-3-strong); } .inicio-dot.is-due { background: var(--porruni-coral); } .inicio-row-text { min-width: 0; } .inicio-row-text strong { display: block; font-size: var(--font-callout); line-height: 1.25; overflow-wrap: anywhere; } .inicio-row-text span { display: block; color: var(--porruni-ink-soft); font-size: var(--font-footnote); line-height: 1.4; overflow-wrap: anywhere; } .inicio-row.is-due { background: var(--porruni-coral-soft); } .inicio-row.is-due time { color: var(--porruni-coral-ink); } .inicio-flag { display: inline-flex; align-items: center; gap: 4px; color: var(--porruni-coral-ink); font-size: var(--font-footnote); font-weight: 800; } .inicio-flag .studio-icon { width: 16px; height: 16px; flex-basis: 16px; } .inicio-badge { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--porruni-mint-soft); color: var(--porruni-mint-ink); font-size: var(--font-footnote); font-weight: 800; white-space: nowrap; } .inicio-go { display: flex; color: var(--porruni-ink-soft); } .inicio-go .studio-icon { width: 16px; height: 16px; flex-basis: 16px; } .inicio-row.is-calm { grid-template-columns: 52px minmax(0, 1fr); background: var(--porruni-mint-soft); } .inicio-row.is-calm > .studio-icon { width: 20px; height: 20px; justify-self: center; color: var(--porruni-mint-ink); } .inicio-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 14px; padding-top: 14px; border-top: var(--hairline); } .inicio-wd { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 7px 0 8px; border: 0; border-radius: 12px; background: none; color: var(--porruni-ink-soft); font-size: var(--font-caption); font-weight: 700; transition: background-color var(--duration-fast); } .inicio-wd:hover { background: var(--porruni-surface-soft); } .inicio-wd b { color: var(--porruni-ink); font-size: var(--font-headline); font-weight: 800; font-variant-numeric: tabular-nums; } .inicio-wd.is-today { background: var(--porruni-provisional-soft); } .inicio-dots { display: flex; gap: 3px; height: 6px; } .inicio-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--porruni-line-strong); } .inicio-dots i.is-due { background: var(--porruni-coral); } /* Hoja pautada de «Donde lo dejaste». */ .inicio-paper { position: relative; padding: 16px 16px 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--porruni-yellow-ink) 18%, var(--porruni-line)); border-radius: 14px; background: color-mix(in srgb, var(--porruni-yellow-soft) 30%, var(--porruni-surface)); background-image: repeating-linear-gradient(180deg, transparent 0 25px, color-mix(in srgb, var(--porruni-yellow-ink) 14%, transparent) 25px 26px); background-position: 0 46px; } .inicio-paper h4 { margin: 8px 0; font-family: var(--porruni-font-display); font-size: var(--font-title-3); font-weight: var(--weight-display); line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; } .inicio-paper ul { margin: 0; padding: 0; list-style: none; } .inicio-paper li { position: relative; padding-left: 14px; color: var(--porruni-ink-soft); font-size: var(--font-footnote); line-height: 26px; overflow-wrap: anywhere; } .inicio-paper li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--porruni-coral); } .inicio-paper.is-placeholder p { margin: 0; color: var(--porruni-ink-soft); font-size: var(--font-footnote); line-height: 26px; } .inicio-tag { display: inline-flex; padding: 3px 12px; border-radius: var(--radius-pill); background: var(--porruni-coral-soft); color: var(--porruni-coral-ink); font-size: var(--font-footnote); font-weight: 650; } .inicio-note-empty { margin: 0; color: var(--porruni-ink-soft); font-size: var(--font-footnote); } .inicio-note-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); color: var(--porruni-ink-soft); font-size: var(--font-footnote); } /* Chat limpio: Runi pequeño y quieto en el centro del chat vacío. */ .runi-view[data-conversation=empty] .runi-stage { width: 72px; background: none; } .runi-view[data-conversation=empty] .runi-stage .runi { --runi-size: 68px !important; } /* ── Estrecho: escena arriba, todo en una columna (propuesta móvil) ─────────────────────────────────────────── */ @container inicio (max-width: 660px) { .inicio-hero { display: flex; flex-direction: column; min-height: 0; background: linear-gradient(180deg, var(--porruni-cream), var(--porruni-surface) 70%); } .inicio-scene { order: -1; height: 210px; min-height: 0; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); } .inicio-runi { left: 50%; bottom: 0; } .inicio-runi .runi { --runi-size: 158px !important; } .inicio-copy { padding: var(--space-3) var(--space-4) var(--space-5); } .inicio-title { font-size: 2.25rem; } .inicio-lead { min-height: 0; font-size: var(--font-callout); } .inicio-composer { grid-template-columns: minmax(0, 1fr); padding: 6px; } .inicio-view textarea#inicio-input { padding: 8px 10px; } .inicio-send { width: 100%; } .inicio-notice { margin: 0; } .inicio-grid { grid-template-columns: minmax(0, 1fr); } .inicio-card { padding: 16px; } .inicio-row { grid-template-columns: 46px 10px minmax(0, 1fr) auto; gap: 8px; padding: 9px 6px; } } @media (prefers-reduced-motion: reduce) { .inicio-chip, .inicio-row, .inicio-link .studio-icon { transition: none; } } html[data-reduce-motion="true"] :is(.inicio-chip, .inicio-row, .inicio-link .studio-icon) { transition: none; } /* ── css/11-inicio-web.css ── */ /* * Porruni web · Mi inicio (F2 · SA-A). 10-inicio.css es la copia literal del escritorio; aquí solo lo que cambia en * la web: enlaces en lugar de botones (Mi semana, Notas), mini semana como lista no interactiva, estados honestos * del campus en «Hoy» y el compositor que crece con el texto sin JavaScript (field-sizing). Solo tokens de marca. */ .inicio-view textarea#inicio-input { field-sizing: content; } a.inicio-link, a.inicio-pill { text-decoration: none; } a.inicio-link:hover { text-decoration: underline; } .inicio-week { margin-block: 14px 0; padding-inline: 0; list-style: none; } .inicio-wd { cursor: default; } .inicio-wd:hover { background: none; } .inicio-wd.is-today:hover { background: var(--porruni-provisional-soft); } .inicio-row.is-calm.is-pending, .inicio-row.is-calm.is-loading { background: var(--porruni-provisional-soft); } .inicio-row.is-calm.is-pending > .studio-icon, .inicio-row.is-calm.is-loading > .studio-icon { color: var(--porruni-provisional-ink); } .inicio-row.is-calm.is-info { background: var(--porruni-surface-soft); } .inicio-row.is-calm.is-info > .studio-icon { color: var(--porruni-ink-soft); } .inicio-row.is-calm.is-error { background: var(--porruni-danger-soft); } .inicio-row.is-calm.is-error > .studio-icon { color: var(--porruni-danger-ink); } .inicio-row-action { display: flex; justify-content: flex-end; } .inicio-note .web-state { margin: 0; } .inicio-note-foot a.secondary-button { text-decoration: none; } .inicio-notice .secondary-button, .inicio-notice .quiet-button { min-height: 32px; } /* ── css/20-runi.css ── */ /* * Porruni web · Runi (F2 · SA-A). Primera parte: copia de apps/desktop/renderer/runi-chat.css sin las reglas que * dependen de url() de assets (chevron del selector), ni las de la demostración, ChatGPT/Claude local y Ajustes del * escritorio. Segunda parte (al final, «Adaptación web»): contenedor de la vista en el armazón web, panel lateral * (lector de citas y documentos), avisos de intenciones, recientes como enlaces y documentos. Solo tokens de marca. */ /* * Porruni · vista «Runi»: una conversación cómoda, a la altura de la ventana. * * Conversación vacía (data-conversation="empty"): Runi en el centro con una frase, el saludo debajo, las * sugerencias para empezar y el compositor abajo. * Conversación en marcha (data-conversation="active"): la cabecera solo deja el tema y «Vaciar»; Runi acompaña a * cada respuesta (al final de este archivo, «Rediseño del 17-10-2026»), el registro ocupa el resto y se desplaza solo. * * El compositor no se mueve entre los dos estados: la caja de texto con la asignatura y el botón de enviar en su * barra inferior (sin modos: los decide Runi). runi-chat.js decide cuándo desplazar el registro. Solo tokens de system.css y brand.css: sin colores * sueltos ni pares de tema propios (lo comprueba tests/runi-chat.test.js). */ /* ── Vista a pantalla completa ─────────────────────────────────────────────────────────────────── * En Runi la ventana no se desplaza: la estructura (barra superior, aviso de sesión si pide acción) ocupa * lo suyo y la tarjeta del chat, el resto. El título grande se queda para el lector de pantalla y su nombre * pasa a la barra superior, donde no compite con Runi. */ html[data-view=runi] .workspace { display: flex; flex-direction: column; height: calc(100dvh / var(--text-zoom)); min-height: 34rem; padding-bottom: var(--space-6); } html[data-view=runi] .topbar { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } html[data-view=runi] .studio-utility .toolbar-title { opacity: 1; transform: none; } html[data-view=runi] .studio-utility .studio-date { opacity: 0; transform: translateY(calc(-8px * var(--motion-scale))); } /* ── Tarjeta ─────────────────────────────────────────────────────────────────────────────────── */ .runi-view { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-top: var(--space-1); border: var(--hairline); border-radius: var(--radius-hero); background: var(--porruni-surface); box-shadow: var(--elevation-1); overflow: hidden; } /* La cabecera, el registro y el compositor son hermanos en la columna de la tarjeta. */ .runi-conversation { display: contents; } /* ── Cabecera: Runi como contacto, con su estado y la garantía de privacidad ───────────────────── */ .runi-stage-band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-3); flex: none; padding: var(--space-3) var(--space-5); border-bottom: var(--hairline); background: color-mix(in srgb, var(--porruni-surface-soft) 55%, var(--porruni-surface)); transition: background-color var(--duration-fade) var(--ease-out), border-color var(--duration-fade) var(--ease-out); } .runi-stage { position: relative; z-index: 2; display: grid; place-items: center; width: 56px; aspect-ratio: 1; border-radius: 50%; background: var(--porruni-surface); } .runi-stage .runi { --runi-size: 52px !important; } .runi-stage-copy { display: grid; gap: 1px; min-width: 0; } .runi-stage-copy p { margin: 0; } .runi-stage-name { color: var(--porruni-ink); font-family: var(--porruni-font-display); font-size: var(--font-headline); font-weight: var(--weight-display); line-height: var(--leading-headline); letter-spacing: var(--tracking-headline); } .runi-stage-status { color: var(--porruni-ink-soft); font-size: var(--font-footnote); font-weight: var(--weight-medium); line-height: var(--leading-footnote); letter-spacing: var(--tracking-footnote); overflow-wrap: anywhere; transition: color var(--duration-fast); } .runi-view:has(#runi-conversation[data-busy=true]) .runi-stage-status { color: var(--porruni-coral-ink); } .runi-stage-privacy { display: flex; align-items: center; gap: 6px; color: var(--porruni-ink-soft); font-size: var(--font-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption); } .runi-stage-privacy .studio-icon { width: 14px; height: 14px; flex-basis: 14px; color: var(--porruni-success-ink); } .runi-chat-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .runi-chat-toolbar button { min-height: 44px; } .runi-chat-clear { min-height: var(--control-height-small); padding-block: 6px; } /* Conversación vacía: Runi en el centro, grande y tranquilo; el bloque se centra entre arriba y el compositor. */ .runi-view[data-conversation=empty] .runi-stage-band { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-3); margin-top: auto; padding: var(--space-6) var(--space-6) var(--space-2); border-bottom-color: transparent; background-color: transparent; text-align: center; } .runi-view[data-conversation=empty] .runi-stage { width: clamp(120px, calc(20vh / var(--text-zoom)), 184px); background: radial-gradient(circle at 50% 60%, var(--porruni-surface-soft) 0 56%, transparent 57%); } .runi-view[data-conversation=empty] .runi-stage .runi { --runi-size: clamp(116px, calc(20vh / var(--text-zoom) - 4px), 180px) !important; } /* vh también crece con «Tamaño del texto» */ .runi-view[data-conversation=empty] .runi-stage-copy { justify-items: center; gap: var(--space-2); } .runi-view[data-conversation=empty] .runi-stage-name { display: none; } .runi-view[data-conversation=empty] .runi-stage-status { color: var(--porruni-ink); font-family: var(--porruni-font-display); font-size: var(--font-title-1); font-weight: var(--weight-display); line-height: var(--leading-title-1); letter-spacing: var(--tracking-title-1); text-wrap: balance; } .runi-view[data-conversation=empty] .runi-stage-privacy { font-size: var(--font-footnote); line-height: var(--leading-footnote); letter-spacing: var(--tracking-footnote); } /* ── Registro ──────────────────────────────────────────────────────────────────────────────────── * Una columna de lectura centrada (--reading-max). Se desplaza solo él; los bordes se difuminan al pasar * el contenido por debajo de la cabecera y del compositor, en vez de una raya. */ .runi-chat-log { position: relative; display: flex; flex-direction: column; gap: var(--space-5); flex: 1 1 0; min-height: 0; padding: var(--space-5) max(var(--space-5), (100% - var(--reading-max)) / 2) var(--space-4); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; -webkit-mask-image: linear-gradient(transparent, black var(--space-4), black calc(100% - var(--space-4)), transparent); mask-image: linear-gradient(transparent, black var(--space-4), black calc(100% - var(--space-4)), transparent); } .runi-chat-log:focus-visible { outline-offset: -3px; } .runi-shared-context { flex: none; max-width: var(--reading-max); width: 100%; box-sizing: border-box; margin-inline: auto; padding: var(--space-2) var(--space-5); color: var(--porruni-ink-soft); font-size: var(--font-footnote); line-height: var(--leading-footnote); overflow-wrap: anywhere; } .runi-shared-context[hidden] { display: none; } .runi-shared-context p { margin: 0 0 var(--space-2); } .runi-shared-context strong { color: var(--porruni-ink); } .runi-shared-context button { min-height: 44px; } .runi-conversation[data-mode=shared] .runi-chat-suggestions { display: none; } .runi-view[data-conversation=empty] .runi-chat-log { flex: 0 1 auto; padding-block: var(--space-1) var(--space-4); -webkit-mask-image: none; mask-image: none; } /* ── Mensajes ──────────────────────────────────────────────────────────────────────────────────── * Tú, a la derecha y en el tono de la acción; Runi, a la izquierda con su cara y su estado; las fuentes, * en filas blancas dentro de su respuesta. */ .runi-msg { position: relative; min-width: 0; margin: 0; font-size: var(--font-callout); line-height: var(--leading-callout); letter-spacing: var(--tracking-callout); } .runi-msg.is-runi { align-self: flex-start; width: fit-content; max-width: 100%; padding: var(--space-2) var(--space-5) var(--space-4); border-radius: var(--radius-xs) var(--radius-hero) var(--radius-hero) var(--radius-hero); background: var(--porruni-surface-soft); color: var(--porruni-ink); transform-origin: 0 0; } .runi-msg.is-user { align-self: flex-end; max-width: min(34rem, 85%); padding: var(--space-2) var(--space-4) var(--space-3); border-radius: var(--radius-hero) var(--radius-hero) var(--radius-xs) var(--radius-hero); background: var(--porruni-action-soft); color: var(--porruni-ink); transform-origin: 100% 100%; } .runi-msg.is-pending { padding-bottom: var(--space-2); } .runi-msg.is-error, .runi-msg.is-no-model { box-shadow: inset 0 0 0 1px var(--porruni-warning-line); } .runi-msg-meta { margin: 0 0 2px; color: var(--porruni-ink-soft); font-size: var(--font-caption); font-weight: var(--weight-strong); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption); } .runi-msg-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .runi-msg-head { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; margin: 0 0 var(--space-1) calc(-1 * var(--space-2)); } .runi-msg-head .runi-activity { gap: var(--space-2); min-block-size: 40px; font-size: var(--font-footnote); } .runi-msg-who { color: var(--porruni-ink); font-size: var(--font-footnote); font-weight: var(--weight-strong); letter-spacing: var(--tracking-footnote); } .runi-msg-status { color: var(--porruni-ink-soft); font-size: var(--font-caption); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caption); } .runi-msg-status::before { content: "· "; } .runi-msg-body:empty { display: none; } .runi-msg-body > :first-child, .runi-msg-body > .sr-only + * { margin-top: 0; } .runi-msg-body > :last-child { margin-bottom: 0; } .runi-says { margin: 0 0 var(--space-2); text-wrap: pretty; } .runi-msg-note { margin: 0 0 var(--space-2); color: var(--porruni-ink-soft); font-size: var(--font-footnote); line-height: var(--leading-footnote); letter-spacing: var(--tracking-footnote); } .runi-msg-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; } .runi-msg-actions .secondary-button, .runi-msg-actions .quiet-button { min-height: var(--control-height-small); padding-block: 6px; } .runi-error-detail { margin: var(--space-2) 0 0; color: var(--porruni-ink-soft); font-size: var(--font-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption); overflow-wrap: anywhere; } .runi-error-detail span { color: var(--porruni-ink); font-weight: var(--weight-strong); } .runi-example-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--space-2); color: var(--porruni-ink-soft); font-size: var(--font-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption); } /* El saludo forma parte del centro: sin burbuja ni cabecera (el Runi grande ya está encima). */ .runi-chat-log .runi-msg.runi-msg-intro { align-self: center; width: auto; max-width: 34rem; padding: 0; border-radius: 0; background: transparent; color: var(--porruni-ink-soft); text-align: center; } .runi-msg-intro .runi-msg-head { display: none; } .runi-msg-intro .runi-says { margin-bottom: var(--space-3); } .runi-msg-intro .runi-msg-actions, .runi-msg-intro .runi-example-tag { justify-content: center; } /* Respuesta: texto con citas, fuentes, avisos y límites. */ .runi-answer-text { margin: 0 0 var(--space-3); line-height: var(--leading-body); white-space: pre-line; overflow-wrap: anywhere; text-wrap: pretty; } .runi-cites { white-space: nowrap; } .runi-cite { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.25rem; margin: 0 1px 0 3px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--porruni-action-soft); color: var(--porruni-action-ink); font-size: var(--font-caption); font-weight: var(--weight-strong); line-height: 1; letter-spacing: var(--tracking-caption); text-decoration: none; vertical-align: .1em; box-shadow: inset 0 0 0 1px var(--porruni-line); transition: background-color var(--duration-fast), color var(--duration-fast); } a.runi-cite:hover { background: var(--porruni-action); color: var(--porruni-on-action); } a.runi-cite:focus-visible { outline-offset: 1px; } .runi-cite.is-unknown { background: var(--porruni-surface); color: var(--porruni-ink-soft); } .runi-note { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); font-size: var(--font-footnote); line-height: var(--leading-footnote); letter-spacing: var(--tracking-footnote); } .runi-note.is-provisional { border: 1px dashed var(--porruni-provisional-line); background: var(--porruni-provisional-soft); color: var(--porruni-provisional-ink); } .runi-sources, .runi-limits { margin: var(--space-4) 0 0; } .runi-sources h4, .runi-limits h4 { margin: 0 0 var(--space-2); color: var(--porruni-ink-soft); font-size: var(--font-label); font-weight: 800; line-height: var(--leading-label); letter-spacing: var(--tracking-label); text-transform: uppercase; } .runi-sources ol { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; } .runi-sources li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--porruni-surface); font-size: var(--font-footnote); line-height: var(--leading-footnote); letter-spacing: var(--tracking-footnote); transition: box-shadow var(--duration-fade) var(--ease-out), background-color var(--duration-fade) var(--ease-out); } .runi-sources li:focus { outline: none; } .runi-sources li:focus-visible, .runi-sources li.is-target { box-shadow: inset 0 0 0 2px var(--porruni-focus); } .runi-source-id { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 2rem; height: 1.375rem; padding: 0 6px; border-radius: var(--radius-pill); background: var(--porruni-action-soft); color: var(--porruni-action-ink); font-size: var(--font-caption); font-weight: var(--weight-strong); } .runi-source-ref { flex: 1 1 13rem; min-width: 0; color: var(--porruni-ink); font-weight: var(--weight-medium); overflow-wrap: anywhere; } .runi-limits ul { margin: 0; padding-left: var(--space-5); font-size: var(--font-footnote); line-height: var(--leading-footnote); letter-spacing: var(--tracking-footnote); } .runi-review-label { margin: var(--space-3) 0 0; } /* Distintivos de procedencia: siempre con palabra, además del color. */ .runi-chip { border-color: var(--porruni-line-strong); background: var(--porruni-surface); color: var(--porruni-ink); } /* forma común: system.css, «Distintivos» */ .runi-chip.is-official, .runi-chip.is-reviewed { border-color: var(--porruni-success-line); background: var(--porruni-success-soft); color: var(--porruni-success-ink); } .runi-chip.is-provisional { border: 1px dashed var(--porruni-provisional-line); background: var(--porruni-provisional-soft); color: var(--porruni-provisional-ink); } .runi-chip.is-example { border-color: var(--porruni-warning-line); background: var(--porruni-warning-soft); color: var(--porruni-warning-ink); font-weight: 800; } /* Fichas de «Buscar en mis archivos». */ .runi-results { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; } .runi-result { padding: var(--space-3) var(--space-4); border: var(--hairline); border-radius: var(--radius-control); background: var(--porruni-surface); } .runi-result.is-provisional { border: 1px dashed var(--porruni-provisional-line); } .runi-result-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); } .runi-result-kind { padding: 2px 8px; border-radius: var(--radius-s); background: var(--porruni-surface-soft); color: var(--porruni-ink-soft); font-size: var(--font-label); font-weight: 800; line-height: var(--leading-label); letter-spacing: var(--tracking-label); text-transform: uppercase; } .runi-result-ref { flex: 1 1 12rem; min-width: 0; color: var(--porruni-ink); font-size: var(--font-footnote); font-weight: var(--weight-strong); line-height: var(--leading-footnote); overflow-wrap: anywhere; } .runi-result-excerpt { margin: var(--space-2) 0 0; color: var(--porruni-ink); font-size: var(--font-footnote); line-height: var(--leading-body); letter-spacing: var(--tracking-footnote); overflow-wrap: anywhere; } .runi-result-excerpt mark { padding: 0 2px; border-radius: var(--radius-xs); background: var(--porruni-yellow-soft); color: inherit; box-shadow: inset 0 -2px 0 var(--porruni-warning-line); } .runi-results-more { margin-top: var(--space-2); } .runi-results-more summary { width: fit-content; min-height: var(--control-height-small); color: var(--porruni-action-ink); font-size: var(--font-footnote); font-weight: var(--weight-strong); } /* Entradas: tu mensaje sube desde el compositor; el de Runi brota desde su lado; su respuesta se funde * en la burbuja que esperaba. Transiciones (no bucles): se pueden interrumpir y, con movimiento reducido, * quedan en un fundido. runi-chat.js pone .is-entering al insertar y la quita al acabar. */ .runi-msg.is-entering, .runi-msg-body.is-entering { transition: opacity var(--duration-fade) var(--ease-out), transform var(--spring-smooth) var(--ease-spring); } @starting-style { .runi-msg.is-user.is-entering { opacity: 0; transform: translateY(calc(16px * var(--motion-scale))) scale(calc(1 - .04 * var(--motion-scale))); } .runi-msg.is-runi.is-entering { opacity: 0; transform: translateY(calc(6px * var(--motion-scale))) scale(calc(1 - .03 * var(--motion-scale))); } .runi-msg-body.is-entering { opacity: 0; transform: translateY(calc(4px * var(--motion-scale))); } } /* ── Compositor: siempre abajo, alineado con la columna del registro ──────────────────────────── */ .runi-composer { position: relative; display: grid; gap: var(--space-2); flex: none; width: 100%; max-width: calc(var(--reading-max) + 2 * var(--space-5)); margin: 0 auto; padding: var(--space-2) var(--space-5) var(--space-4); } .runi-view[data-conversation=empty] .runi-composer { margin-top: auto; } /* Sugerencias para empezar: solo con la conversación vacía y cuando ya se puede escribir. */ .runi-chat-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-1); } .runi-view[data-conversation=active] .runi-chat-suggestions, .runi-composer:has(#runi-chat-input:disabled) .runi-chat-suggestions { display: none; } .runi-suggestion { min-height: var(--control-height-small); padding: 6px 14px; border: var(--hairline); border-radius: var(--radius-pill); background: var(--porruni-surface); color: var(--porruni-ink); font-size: var(--font-footnote); font-weight: var(--weight-medium); line-height: 1.3; letter-spacing: var(--tracking-footnote); -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast), border-color var(--duration-fast), transform var(--spring-snappy) var(--ease-spring); } .runi-suggestion:hover { border-color: var(--porruni-line-strong); background: var(--porruni-surface-soft); } .runi-suggestion:active { transform: scale(var(--press-scale)); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-press); } /* La caja: el texto arriba y, en su barra, qué hace Runi, sobre qué asignatura y enviar. */ .runi-composer-box { display: grid; padding: var(--space-1); border: var(--hairline-strong); border-radius: var(--radius-card); background: var(--porruni-surface); box-shadow: var(--elevation-1); transition: border-color var(--duration-fast), box-shadow var(--duration-fast); } .runi-composer-box:has(textarea:focus-visible) { border-color: var(--porruni-focus); box-shadow: 0 0 0 1px var(--porruni-focus), var(--elevation-1); } .runi-composer-box textarea { display: block; width: 100%; min-height: 44px; max-height: 200px; padding: var(--space-2) var(--space-3) var(--space-1); border: 0; border-radius: 0; background: transparent; color: var(--porruni-ink); font-size: var(--font-callout); line-height: var(--leading-callout); letter-spacing: var(--tracking-callout); resize: none; } .runi-composer-box textarea:focus-visible { outline: none; } .runi-composer-box textarea:disabled { cursor: not-allowed; } .runi-composer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-1); } .runi-chat-modes { flex: none; margin: 0; padding: 2px; border-radius: var(--radius-control); } .runi-chat-modes label > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: calc(var(--radius-control) - 2px); font-size: var(--font-caption); white-space: nowrap; } .runi-chat-modes .studio-icon { width: 15px; height: 15px; flex-basis: 15px; } /* Asignatura: un selector discreto junto a lo que afecta. */ .runi-chat-subject { position: relative; display: inline-flex; flex: 0 1 auto; align-items: center; min-width: 0; border-radius: var(--radius-control); color: var(--porruni-ink-soft); transition: background-color var(--duration-fast), color var(--duration-fast); } .runi-chat-subject:hover { background: var(--porruni-surface-soft); color: var(--porruni-ink); } .runi-chat-subject > .studio-icon { position: absolute; left: 10px; width: 16px; height: 16px; flex-basis: 16px; pointer-events: none; } .runi-chat-subject select { -webkit-appearance: none; appearance: none; field-sizing: content; width: auto; min-width: 0; max-width: 18rem; min-height: var(--control-height-small); padding: 6px 28px 6px 32px; border: 0; border-radius: var(--radius-control); background: transparent; color: inherit; font-size: var(--font-footnote); font-weight: var(--weight-medium); letter-spacing: var(--tracking-footnote); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; } .runi-chat-subject select:focus-visible { outline: var(--focus-width) solid var(--porruni-focus); outline-offset: 1px; } .runi-chat-subject:has(select:disabled) { opacity: .55; } .runi-chat-subject select:disabled { cursor: not-allowed; } /* El contador solo aparece cerca del límite; enviar, siempre en la esquina. */ .runi-composer-count { margin-left: auto; color: var(--porruni-ink-soft); font-size: var(--font-caption); font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; } .runi-composer-count[data-state=ok] { display: none; } .runi-composer-count:not([data-state=ok]) + .runi-composer-send { margin-left: 0; } .runi-composer-count[data-state=near] { color: var(--porruni-warning-ink); } .runi-composer-count[data-state=over] { color: var(--porruni-danger-ink); font-weight: 800; } .runi-composer-send { flex: none; margin-left: auto; width: 40px; min-height: 40px; height: 40px; padding: 0; border-radius: var(--radius-control); } .runi-composer-send .studio-icon { width: 19px; height: 19px; flex-basis: 19px; } /* Simulación de pruebas: borde continuo y tinta fuerte para que nunca se confunda con una respuesta. */ .runi-note.is-simulated, .runi-chip.is-simulated { border: 2px solid var(--porruni-warning-ink); color: var(--porruni-warning-ink); background: transparent; font-weight: var(--weight-strong); } /* Texto exacto preparado: plegado, desplazable y sin cambiar ni un carácter (pre-wrap). */ .runi-prepared-text summary { cursor: pointer; color: var(--porruni-ink-soft); } .runi-prepared-pre { max-height: 18rem; overflow: auto; margin: 0.25rem 0 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--porruni-line); border-radius: var(--radius-control); font-size: var(--font-caption); line-height: var(--leading-caption); white-space: pre-wrap; overflow-wrap: anywhere; } .runi-consent-question { margin: 0.25rem 0 0.5rem; padding: 0.5rem 0.75rem; border-left: 3px solid var(--porruni-line); color: var(--porruni-ink); white-space: pre-wrap; overflow-wrap: anywhere; } .runi-composer-status { margin: 0; padding: 0 var(--space-1); color: var(--porruni-ink-soft); font-size: var(--font-footnote); line-height: var(--leading-footnote); text-align: center; } .runi-composer-status:empty { display: none; } .runi-composer-status[data-tone=warn] { color: var(--porruni-warning-ink); font-weight: var(--weight-strong); } /* «Ir al último mensaje»: material flotante sobre el final del registro, solo si te has ido arriba. */ .runi-chat-jump { position: absolute; z-index: 1; bottom: calc(100% + var(--space-2)); left: 50%; width: 36px; height: 36px; flex-basis: 36px; border: 1px solid color-mix(in srgb, var(--porruni-line) 80%, transparent); border-radius: var(--radius-pill); background: var(--material-regular); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); box-shadow: var(--elevation-2), inset 0 1px 0 var(--material-highlight); opacity: 0; visibility: hidden; transform: translate(-50%, calc(8px * var(--motion-scale))) scale(calc(1 - .08 * var(--motion-scale))); transition: opacity var(--duration-fade) var(--ease-out), transform var(--spring-snappy) var(--ease-spring), visibility 0s linear var(--duration-fade); } .runi-chat-jump.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; } .runi-chat-jump.is-visible:hover { background: var(--porruni-surface); } .runi-chat-jump.is-visible:active { transform: translate(-50%, 0) scale(var(--press-scale)); transition-duration: var(--duration-fade), var(--duration-press), 0s; } .runi-chat-jump .studio-icon { width: 17px; height: 17px; flex-basis: 17px; } /* Runi ha contestado mientras releías: un punto, y la etiqueta lo dice con palabras. */ .runi-chat-jump.has-unseen::after { content: ""; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--porruni-coral); box-shadow: 0 0 0 2px var(--porruni-surface); } /* ── Accesibilidad ─────────────────────────────────────────────────────────────────────────────── * Movimiento reducido: --motion-scale vale 0 y system.css deja solo fundidos. Transparencia reducida y más * contraste: los materiales y bordes ya son sólidos por sus tokens; aquí, el contorno de las burbujas. */ html[data-contrast=high] .runi-msg:is(.is-runi, .is-user):not(.runi-msg-intro), html[data-contrast=high] .runi-sources li { box-shadow: inset 0 0 0 2px var(--porruni-line-strong); } @media (prefers-contrast: more) { .runi-msg:is(.is-runi, .is-user):not(.runi-msg-intro), .runi-sources li { box-shadow: inset 0 0 0 2px var(--porruni-line-strong); } } /* ── Carril: 701–1100 px ─────────────────────────────────────────────────────────────────────── */ @media (min-width: 701px) and (max-width: 1100px) { .runi-stage-band { padding-inline: var(--space-4); } .runi-chat-log { padding-inline: max(var(--space-4), (100% - var(--reading-max)) / 2); } .runi-composer { max-width: calc(var(--reading-max) + 2 * var(--space-4)); padding-inline: var(--space-4); } } /* ── Móvil: ≤ 700 px (vista previa y ventanas muy estrechas) ─────────────────────────────────── */ @media (max-width: 700px) { html[data-view=runi] .app-shell { min-height: 0; } html[data-view=runi] .workspace { height: calc(100dvh / var(--text-zoom) - var(--bottom-bar-height) - env(safe-area-inset-bottom)); min-height: 30rem; padding-bottom: var(--space-3); } .runi-view { border-radius: var(--radius-card); } .runi-stage-band { padding: var(--space-2) var(--space-3); gap: var(--space-1) var(--space-3); } .runi-stage { width: 48px; } .runi-stage .runi { --runi-size: 44px !important; } .runi-view[data-conversation=empty] .runi-stage-band { padding: var(--space-4) var(--space-4) var(--space-1); } .runi-view[data-conversation=empty] .runi-stage-status { font-size: var(--font-title-2); line-height: var(--leading-title-2); letter-spacing: var(--tracking-title-2); } .runi-chat-log { gap: var(--space-4); padding-inline: var(--space-3); } .runi-msg.is-runi { padding: var(--space-2) var(--space-4) var(--space-3); } .runi-msg.is-user { max-width: 92%; } .runi-composer { padding: var(--space-2) var(--space-3) var(--space-3); } .runi-composer-box textarea { font-size: 16px; } .runi-chat-modes { flex: 0 0 auto; width: auto; } .runi-chat-subject { flex: 1 1 8rem; min-width: 8rem; } .runi-chat-subject select { width: 100%; max-width: none; } } @media (max-width: 480px) { .runi-chat-clear { width: var(--control-height-small); padding-inline: 0; } .runi-chat-clear-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .runi-chat-modes { flex: 1 1 100%; } .runi-chat-modes label { flex: 1; text-align: center; } .runi-chat-modes label > span { justify-content: center; padding-inline: 6px; } } @media (max-width: 640px) { .runi-chat-modes .studio-icon { display: none; } } /* ══ Rediseño del 17-10-2026: «Runi junto a la respuesta» (docs/workflows/porruni-demo-2026-10-17) ═══════════════ * Chat vacío: Runi en el centro con una frase, las sugerencias y el compositor. En marcha: sin Runi en la cabecera * (solo el tema y «Vaciar»); Runi acompaña a cada respuesta con su nombre y un estado breve. La respuesta se lee * sin burbuja; tus mensajes, en ciruela de día y menta de noche. Lo que respalda una respuesta, plegado debajo. */ .runi-view { border-color: var(--porruni-line); } .runi-stage-copy { justify-items: start; } .runi-chat-topic { display: none; margin: 0; overflow: hidden; color: var(--porruni-ink-soft); font-size: var(--font-footnote); font-weight: var(--weight-medium); letter-spacing: var(--tracking-footnote); text-overflow: ellipsis; white-space: nowrap; } .runi-view[data-conversation=active] .runi-stage-band { grid-template-columns: minmax(0, 1fr) auto; padding-block: var(--space-2); background: var(--porruni-surface); } .runi-view[data-conversation=active] :is(.runi-stage, .runi-stage-name, .runi-stage-status) { display: none; } .runi-view[data-conversation=active] .runi-chat-topic { display: block; max-width: 100%; } .runi-view[data-conversation=active] .runi-stage-copy { justify-items: stretch; } .runi-view[data-conversation=active] .runi-chat-topic:empty::before { content: "Conversación con Runi"; } .runi-view[data-conversation=empty] .runi-stage-copy { justify-items: center; } /* Mensajes: Runi a la izquierda, sin burbuja; tú, a la derecha, en tu color. */ .runi-chat-log .runi-msg.is-runi:not(.runi-msg-intro) { width: 100%; padding: 0; border-radius: 0; background: transparent; } .runi-msg.is-user { background: var(--porruni-user); color: var(--porruni-on-user); } .runi-msg.is-user .runi-msg-meta { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .runi-msg.is-error, .runi-msg.is-no-model { box-shadow: none; } .runi-msg.is-error .runi-msg-body, .runi-msg.is-no-model .runi-msg-body { padding: var(--space-2) var(--space-3); border: 1px solid var(--porruni-warning-line); border-radius: var(--radius-control); background: var(--porruni-warning-soft); } /* Runi junto a la respuesta: figura de 44 px, nombre y estado debajo. Mismo alto mientras trabaja y al terminar: * el estado se vacía sin mover nada. Su movimiento (parpadeo, lápiz y humo) es el de runi.css para su estado real. */ .runi-reply-head { display: flex; align-items: center; gap: var(--space-2); min-height: 48px; margin: 0 0 var(--space-2); } .runi-reply-head > .runi, .runi-reply-head .runi-activity > .runi { --runi-size: 44px !important; flex: none; } .runi-reply-head .runi-activity { display: flex; align-items: center; gap: var(--space-2); min-block-size: 48px; font-size: var(--font-footnote); } .runi-reply-head .runi-activity-text, .runi-reply-id { display: grid; gap: 1px; min-width: 0; } .runi-reply-head .runi-msg-who { color: var(--porruni-ink); font-size: var(--font-footnote); font-weight: 750; line-height: 1.3; } .runi-reply-head .runi-activity-verb, .runi-reply-head .runi-msg-status { min-height: 1.35em; color: var(--porruni-ink-soft); font-size: var(--font-caption); font-weight: var(--weight-medium); line-height: 1.35; letter-spacing: var(--tracking-caption); } .runi-reply-head .runi-msg-status::before { content: none; } .runi-reply-head .runi-activity-verb:empty { visibility: hidden; } .runi-reply-head .runi-activity-time { display: none; } .runi-msg.is-pending .runi-activity-verb { color: var(--porruni-coral-ink); } .runi-chat-log .runi-msg.is-runi:not(.runi-msg-intro) .runi-msg-body { margin-left: calc(44px + var(--space-2)); } .runi-answer-text { max-width: 40rem; line-height: 1.75; } .runi-rich p { margin: 0 0 var(--space-3); } .runi-rich ul { margin: 0 0 var(--space-3); padding-left: var(--space-5); } .runi-rich li { margin-bottom: var(--space-1); } .runi-rich li::marker { color: var(--porruni-coral); } .runi-rich { white-space: normal; } /* Las citas, cuando una respuesta marca un dato concreto de clase, son discretas y abren «De dónde sale». */ .runi-cite { min-width: 1.4rem; height: 1.1rem; margin-left: 2px; padding: 0 5px; background: var(--porruni-surface-soft); color: var(--porruni-ink-soft); box-shadow: none; font-size: 11px; vertical-align: .15em; } /* Procedencia bajo demanda. */ .runi-provenance { margin: var(--space-2) 0 0; } .runi-provenance > summary { display: inline-flex; align-items: center; gap: 6px; width: fit-content; min-height: 32px; padding: 4px 10px; border: var(--hairline); border-radius: var(--radius-pill); color: var(--porruni-ink-soft); font-size: var(--font-caption); font-weight: var(--weight-strong); letter-spacing: var(--tracking-caption); cursor: pointer; list-style: none; } .runi-provenance > summary::-webkit-details-marker { display: none; } .runi-provenance > summary:hover { color: var(--porruni-ink); background: var(--porruni-surface-soft); } .runi-provenance[open] > summary { margin-bottom: var(--space-2); color: var(--porruni-ink); } .runi-provenance .runi-sources { margin-top: var(--space-2); } .runi-provenance .runi-sources li { background: var(--porruni-surface-soft); } .runi-answer-details summary { cursor: pointer; color: var(--porruni-ink-soft); font-size: var(--font-caption); } /* Seguimientos (demostración) y acciones bajo la respuesta. */ .runi-followups { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } .runi-followup { min-height: 32px; padding: 5px 12px; border: var(--hairline); border-radius: var(--radius-pill); background: var(--porruni-surface); color: var(--porruni-ink); font-size: var(--font-caption); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caption); transition: background-color var(--duration-fast), border-color var(--duration-fast); } .runi-followup:hover { border-color: var(--porruni-line-strong); background: var(--porruni-surface-soft); } .runi-msg-intro .runi-followups { justify-content: center; } /* Conversación guardada restaurada: los mensajes de entonces, con una nota discreta encima. */ .runi-msg-history { display: flex; flex-direction: column; gap: var(--space-5); } /* El historial también está disponible cuando la navegación lateral se pliega. */ .runi-history-dialog { box-sizing: border-box; width: min(38rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: var(--space-5); border: var(--hairline); border-radius: var(--radius-card); background: var(--porruni-surface); color: var(--porruni-ink); box-shadow: var(--elevation-1); overflow-y: auto; overscroll-behavior: contain; } .runi-history-dialog::backdrop { background: var(--scrim); } .runi-history-dialog [hidden] { display: none; } .runi-history-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .runi-history-dialog h2 { margin: 0; font-size: var(--font-title-3); line-height: var(--leading-title-3); overflow-wrap: anywhere; } .runi-history-search { display: grid; gap: var(--space-2); margin-block: var(--space-4); font-size: var(--font-footnote); } .runi-history-search input { box-sizing: border-box; width: 100%; min-height: 44px; font: inherit; font-size: 16px; } .runi-history-list { display: grid; gap: var(--space-1); } .runi-history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); } .runi-history-row .recent-item { min-height: 44px; } .runi-history-delete { color: var(--porruni-danger-ink); } .runi-history-dialog button { min-height: 44px; } .runi-history-note, .runi-history-empty { color: var(--porruni-ink-soft); font-size: var(--font-footnote); line-height: var(--leading-footnote); } @media (max-width: 700px) { .runi-view[data-conversation=active] .runi-chat-toolbar { grid-column: 1 / -1; justify-content: flex-end; } .runi-history-dialog { padding: var(--space-3); } } .runi-history-note { align-self: center; margin: 0; color: var(--porruni-ink-soft); font-size: var(--font-caption); letter-spacing: var(--tracking-caption); } /* Compositor: una caja clara; enviar en coral (menta de noche); la asignatura como píldora. */ .runi-composer-box { border: var(--hairline); border-radius: 20px; box-shadow: var(--elevation-1); } .runi-composer-send { border-radius: var(--radius-pill); } .runi-composer-send:disabled { opacity: .45; } .runi-chat-subject { background: var(--porruni-surface-soft); border-radius: var(--radius-pill); } .runi-chat-subject select { border-radius: var(--radius-pill); font-size: var(--font-caption); } /* Quietud: con la ventana oculta ningún Runi se mueve; al volver sigue donde iba. Movimiento reducido: pose fija. */ html[data-window-hidden=true] .runi * { animation-play-state: paused !important; } html[data-reduce-motion=true] .runi-reply-head .runi *, html[data-reduce-motion=true] .runi-msg-body.is-entering { animation: none !important; } @media (prefers-reduced-motion: reduce) { .runi-reply-head .runi * { animation: none !important; } } @media (max-width: 700px) { .runi-chat-log .runi-msg.is-runi:not(.runi-msg-intro) .runi-msg-body { margin-left: 0; } } /* Avisos de una respuesta (fechas, web, etiquetas retiradas, límites): visibles, breves y sin abrir la procedencia. */ .runi-answer-notes { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-6); border-radius: var(--radius-control); background: var(--porruni-warning-soft); color: var(--porruni-warning-ink); font-size: var(--font-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption); } .runi-answer-notes li + li { margin-top: 2px; } /* ══ Adaptación web (F2) ═══════════════════════════════════════════════════════════════════════════════════════ * En la web la vista vive en #view-root, debajo de los avisos globales: el contenedor hereda la altura de la * ventana que runi-chat.css da a .workspace y reparte el espacio entre el chat y el panel lateral. */ html[data-view=runi] .view-root { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .runi-web { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: var(--space-4); flex: 1 1 auto; min-height: 0; } .runi-web[data-panel=open] { grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); } .runi-web > .runi-view { min-height: 0; margin-top: 0; } .runi-chat-toolbar .quiet-button .studio-icon { width: 16px; height: 16px; flex-basis: 16px; } .runi-chat-toolbar [hidden] { display: none; } /* Selector de contexto: el chevron es un icono en línea (la máscara con url() del escritorio no se usa). */ .runi-chat-subject > .studio-icon.runi-chat-subject-chevron { left: auto; right: 9px; width: 14px; height: 14px; flex-basis: 14px; } .runi-composer-box textarea { field-sizing: content; resize: none; } .runi-composer-box textarea:read-only { cursor: progress; } .runi-composer-status[data-tone=warn] { padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--porruni-warning-soft); text-align: left; } /* Preguntas sin confirmar: aviso y consulta explícita (nunca un reenvío). */ .runi-intents { display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-3); border: 1px dashed var(--porruni-provisional-line); border-radius: var(--radius-control); background: var(--porruni-provisional-soft); color: var(--porruni-provisional-ink); font-size: var(--font-footnote); line-height: var(--leading-footnote); } .runi-intents[hidden] { display: none; } .runi-intents-text { margin: 0; overflow-wrap: anywhere; } /* Mensajes: pie con «Reportar esta respuesta»; mensajes pendientes locales; listas de fuentes con botón. */ .runi-msg[data-local=true].is-user { opacity: .7; } .runi-msg-actions .quiet-button .studio-icon { width: 15px; height: 15px; flex-basis: 15px; } .runi-sources .runi-cite-open { min-height: var(--control-height-small); padding: 4px 10px; } .runi-sources .runi-cite-open[aria-expanded=true] { background: var(--porruni-selected); } .runi-chat-log .web-state { align-self: stretch; } /* Panel lateral: lector de citas y documentos. */ .runi-panel { display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; min-width: 0; padding: var(--space-4); border: var(--hairline); border-radius: var(--radius-card); background: var(--porruni-surface); box-shadow: var(--elevation-1); overflow-y: auto; overscroll-behavior: contain; } .runi-panel[hidden] { display: none; } .runi-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); } .runi-panel-head h2 { margin: 0; font-family: var(--porruni-font-display); font-size: var(--font-title-3); line-height: var(--leading-title-3); overflow-wrap: anywhere; } .runi-panel-head h2:focus { outline: none; } .runi-panel-head h2:focus-visible { outline: 2px solid var(--porruni-focus); outline-offset: 2px; } .runi-panel-body { display: grid; gap: var(--space-3); min-width: 0; } .runi-panel-help, .runi-reader-status, .runi-reader-limits { margin: 0; color: var(--porruni-ink-soft); font-size: var(--font-footnote); line-height: var(--leading-footnote); } .runi-reader-status[role=alert] { color: var(--porruni-danger-ink); } .runi-reader-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--space-3); margin: 0; font-size: var(--font-footnote); } .runi-reader-facts dt { color: var(--porruni-ink-soft); font-weight: var(--weight-strong); } .runi-reader-facts dd { margin: 0; overflow-wrap: anywhere; } .runi-reader-note { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--porruni-warning-soft); color: var(--porruni-warning-ink); font-size: var(--font-footnote); line-height: var(--leading-footnote); } .runi-reader-part { margin: 0; } .runi-reader-part figcaption { margin-bottom: var(--space-1); color: var(--porruni-ink-soft); font-size: var(--font-caption); font-weight: var(--weight-strong); } .runi-reader-text { margin: 0; padding: var(--space-3); border-left: 3px solid var(--porruni-action); border-radius: var(--radius-xs); background: var(--porruni-surface-soft); font-size: var(--font-callout); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; } .runi-reader-full summary { cursor: pointer; color: var(--porruni-action-ink); font-size: var(--font-footnote); font-weight: var(--weight-strong); } .runi-reader-full .runi-reader-text { margin-top: var(--space-2); max-height: 24rem; overflow: auto; border-left-color: var(--porruni-line-strong); font-size: var(--font-footnote); } .runi-reader-badge { margin: 0; } /* Documentos de Runi (25-documentos.js). */ .runi-docs { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; } .runi-doc { display: grid; gap: var(--space-3); padding: var(--space-3); border: var(--hairline); border-radius: var(--radius-control); background: var(--porruni-surface); } .runi-doc-head, .runi-doc-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); } .runi-doc-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-control); background: var(--porruni-surface-soft); color: var(--porruni-ink-soft); } .runi-doc-copy { display: grid; flex: 1 1 10rem; gap: 1px; min-width: 0; } .runi-doc-copy h3 { margin: 0; font-size: var(--font-callout); line-height: 1.3; overflow-wrap: anywhere; } .runi-doc-meta { margin: 0; color: var(--porruni-ink-soft); font-size: var(--font-caption); } .runi-doc-detail { display: grid; gap: var(--space-3); min-width: 0; } .runi-doc-detail[hidden] { display: none; } .runi-panel-docs { display: grid; gap: var(--space-3); min-width: 0; } .runi-doc-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); } .runi-doc-actions .web-field { flex: 1 1 12rem; } .runi-doc-notice, .runi-doc-blocked { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--porruni-ink-soft); font-size: var(--font-caption); line-height: var(--leading-caption); } .runi-doc-notice .studio-icon, .runi-doc-blocked .studio-icon { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; } .runi-doc-blocked { flex-basis: 100%; } .runi-doc-result { margin: 0; font-size: var(--font-footnote); overflow-wrap: anywhere; } .runi-doc-result:empty { display: none; } .runi-doc-result[data-tone=warn] { padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--porruni-warning-soft); color: var(--porruni-warning-ink); } .runi-doc-link { color: var(--porruni-action-ink); font-weight: var(--weight-strong); } .runi-doc-card { margin: var(--space-3) 0 0; padding: var(--space-3); border: var(--hairline); border-radius: var(--radius-control); background: var(--porruni-surface); } .runi-doc-card.is-error { align-items: flex-start; flex-wrap: nowrap; border-color: var(--porruni-warning-line); background: var(--porruni-warning-soft); color: var(--porruni-warning-ink); font-size: var(--font-footnote); } .runi-doc-card.is-error .studio-icon { flex: 0 0 16px; width: 16px; height: 16px; } .runi-doc-preview-wrap > summary { cursor: pointer; color: var(--porruni-ink-soft); font-size: var(--font-footnote); font-weight: var(--weight-strong); } .runi-doc-preview { margin-top: var(--space-2); padding: var(--space-4); border: var(--hairline); border-radius: var(--radius-control); background: var(--porruni-surface-soft); font-size: var(--font-footnote); line-height: 1.6; overflow-wrap: anywhere; } .runi-doc-preview p, .runi-doc-preview ul, .runi-doc-preview ol, .runi-doc-preview blockquote, .runi-doc-preview pre { margin: 0 0 var(--space-2); } .runi-doc-preview-title { font-family: var(--porruni-font-display); font-size: var(--font-title-3); font-weight: var(--weight-display); line-height: 1.2; } .runi-doc-preview-sub { color: var(--porruni-ink-soft); } .runi-doc-h { font-weight: 800; } .runi-doc-h.is-1 { font-size: var(--font-headline); } .runi-doc-preview blockquote { padding-left: var(--space-3); border-left: 3px solid var(--porruni-line-strong); color: var(--porruni-ink-soft); } .runi-doc-note { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--porruni-surface); } .runi-doc-note.is-warning { background: var(--porruni-warning-soft); } .runi-doc-preview pre { padding: var(--space-2); border-radius: var(--radius-xs); background: var(--porruni-surface); white-space: pre-wrap; } .runi-doc-table { max-width: 100%; overflow-x: auto; } .runi-doc-table table { border-collapse: collapse; font-size: var(--font-caption); } .runi-doc-table :is(th, td) { padding: 4px 8px; border: var(--hairline); text-align: left; vertical-align: top; } .runi-doc-cite { color: var(--porruni-action-ink); font-weight: var(--weight-strong); } /* Recientes: enlaces con el aspecto de los botones del escritorio. */ a.recent-item { text-decoration: none; } /* Panel sobre el chat en carril y móvil (sin solapar la barra inferior). */ @media (max-width: 1100px) { .runi-web[data-panel=open] { grid-template-columns: minmax(0, 1fr); } .runi-panel { position: fixed; z-index: calc(var(--layer-toast) - 10); top: var(--space-3); right: var(--space-3); bottom: var(--space-3); width: min(26rem, calc(100% - 2 * var(--space-3))); box-shadow: var(--elevation-3); } } @media (max-width: 700px) { .runi-panel { top: var(--space-2); right: var(--space-2); left: var(--space-2); width: auto; bottom: calc(var(--bottom-bar-height) + var(--space-2) + env(safe-area-inset-bottom)); } .runi-chat-toolbar { gap: var(--space-1); } .runi-chat-toolbar .quiet-button { padding-inline: 10px; } } @media (prefers-reduced-motion: reduce) { .runi-composer-box { transition: none; } } /* Porte de las pruebas del piloto (28-10-2026): proveedor de pruebas rotulado, extractos del contexto preparado, * detalle técnico de la cita plegado y documentos no disponibles. */ .runi-fake-mode { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); font-size: var(--font-caption); line-height: var(--leading-caption); } .runi-fake-mode[hidden] { display: none; } .runi-msg-body .runi-note.is-simulated { margin: 0 0 var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-control); font-size: var(--font-caption); } .runi-excerpts { display: grid; gap: var(--space-2); margin: 0 0 var(--space-2); padding: 0; list-style: none; } .runi-excerpts li { display: grid; gap: 2px; justify-items: start; padding: var(--space-2) var(--space-3); border: 1px dashed var(--porruni-provisional-line); border-radius: var(--radius-control); font-size: var(--font-footnote); } .runi-excerpts p { margin: 0; overflow-wrap: anywhere; } .runi-reader-details summary { cursor: pointer; color: var(--porruni-ink-soft); font-size: var(--font-footnote); font-weight: var(--weight-strong); } .runi-reader-details .runi-reader-limits { margin-top: var(--space-2); } .runi-doc.is-unavailable { background: var(--porruni-surface-soft); } .runi-doc-actions .primary-button { min-height: var(--control-height-small); } /* ── Petición de documento (F2 tanda 3): píldora del compositor, como el selector de contexto ─────────────── */ .runi-doc-mode { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border: var(--hairline); border-radius: var(--radius-pill); background: var(--material-thin); color: var(--porruni-ink-soft); font-size: var(--font-footnote); font-weight: 650; white-space: nowrap; } .runi-doc-mode .studio-icon { width: 16px; height: 16px; flex-basis: 16px; } .runi-doc-mode:hover { color: var(--porruni-ink); border-color: var(--porruni-line-strong); } .runi-doc-mode.is-on { background: var(--porruni-selected); color: var(--porruni-ink); border-color: var(--porruni-line-strong); } .runi-doc-mode[hidden], .runi-doc-mode-note[hidden], .runi-doc-mode-off[hidden] { display: none; } .runi-doc-mode-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--porruni-provisional-line); border-radius: var(--radius-control); background: var(--porruni-provisional-soft); color: var(--porruni-provisional-ink); font-size: var(--font-footnote); line-height: var(--leading-footnote); } .runi-doc-mode-note > span { flex: 1 1 14rem; min-width: 0; } .runi-doc-mode-note .studio-icon { width: 16px; height: 16px; flex: 0 0 16px; } .runi-doc-mode-note .quiet-button { min-height: 32px; padding-block: 4px; } .runi-doc-mode-off { margin: var(--space-1) 0 0; color: var(--porruni-ink-soft); font-size: var(--font-caption); } .runi-doc-revise { align-items: center; } .runi-doc-revise .web-hint { flex: 1 1 12rem; } @media (max-width: 480px) { .runi-doc-mode > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .runi-doc-mode { padding-inline: 10px; } } /* ── css/30-semana.css ── */ /* * Mi semana (SA-B, F2): reglas del calendario del escritorio (apps/desktop/renderer/cloud.css, «Mi semana») copiadas y * acotadas a .semana. La tira de 7 días es informativa (lista), la agenda va por días y cada fila lleva su origen: * «Campus» (provisional, como las entregas del escritorio) o «Marca personal» (lila de acción). Solo tokens de marca. */ .semana { display: grid; gap: var(--space-4); min-width: 0; } .semana .cal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); min-width: 0; } .semana .cal-title { min-width: 0; } .semana .semana-title { margin: 0; font-family: var(--porruni-font-display); font-size: var(--font-title-2); font-weight: var(--weight-display); line-height: var(--leading-title-2); letter-spacing: var(--tracking-title-2); overflow-wrap: anywhere; } .semana .cal-kicker { margin: 2px 0 0; color: var(--porruni-ink-soft); font-size: var(--font-caption); letter-spacing: var(--tracking-caption); overflow-wrap: anywhere; } .semana .cal-nav { display: inline-flex; align-items: center; gap: var(--space-1); } .semana .cal-nav .icon-button { width: 36px; height: 36px; flex-basis: 36px; border-radius: var(--radius-pill); } .semana .cal-today { min-height: 36px; padding-inline: 14px; border-radius: var(--radius-pill); } .semana .cal-today.is-current-week { background: var(--porruni-selected); } /* Tira de 7 días con marcadores por origen (la cifra y el texto oculto dicen lo mismo con palabras). */ .semana .cal-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); margin: 0; padding: 0; list-style: none; } .semana .cal-strip-day { display: grid; justify-items: center; gap: 2px; min-width: 0; min-height: 4.4rem; padding: 6px 2px; border: var(--hairline); border-radius: var(--radius-card); background: var(--porruni-surface); color: var(--porruni-ink-soft); font-size: var(--font-caption); text-transform: capitalize; } .semana .cal-strip-day strong { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; color: var(--porruni-ink); font-size: var(--font-headline); font-variant-numeric: tabular-nums; } .semana .cal-strip-day.is-today { background: var(--porruni-selected); color: var(--porruni-ink); } .semana .cal-strip-day.is-today strong { background: var(--porruni-action); color: var(--porruni-on-action); } .semana .cal-markers { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-height: 10px; } .semana .cal-markers i { width: 7px; height: 7px; border-radius: 50%; background: var(--event-ink); } .semana .cal-markers small { margin-left: 2px; color: var(--porruni-ink-soft); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; } .semana :is(.cal-row, .cal-type-badge, .cal-markers i).is-delivery { --event-bg: var(--porruni-provisional-soft); --event-ink: var(--porruni-provisional-ink); } .semana :is(.cal-row, .cal-type-badge, .cal-markers i).is-personal { --event-bg: var(--porruni-action-soft); --event-ink: var(--porruni-action-ink); } /* Capas: campus y marcas personales, cada una en su sección. */ .semana-layer-body { display: grid; gap: var(--space-3); min-width: 0; } .semana-personal-label { display: inline-flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-1) 0 0; padding: var(--space-1) var(--space-3); border: 1px solid var(--porruni-provisional-line); border-radius: var(--radius-control); background: var(--porruni-provisional-soft); color: var(--porruni-provisional-ink); font-size: var(--font-footnote); font-weight: var(--weight-strong); line-height: var(--leading-footnote); } .semana-personal-label .studio-icon { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; } .semana-campus-copy { display: grid; gap: var(--space-2); } .semana-campus-copy p { margin: 0; color: var(--porruni-ink-soft); line-height: var(--leading-body); } .semana-campus-copy p strong { color: var(--porruni-ink); font-size: inherit; } .semana-not-empty { color: var(--porruni-ink) !important; font-weight: var(--weight-strong); } .semana-marks-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* Agenda por días (cloud.css): un día vacío ocupa una sola línea. */ .semana .cal-week-agenda { display: grid; gap: var(--space-3); } .semana .cal-agenda-day { display: grid; gap: var(--space-2); min-width: 0; } .semana .cal-agenda-date { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; color: var(--porruni-ink); font-size: var(--font-headline); font-weight: var(--weight-strong); line-height: var(--leading-headline); } .semana .cal-week-agenda .cal-agenda-day.is-empty { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); } .semana .cal-week-agenda .cal-agenda-day.is-empty .cal-agenda-date { color: var(--porruni-ink-soft); font-size: var(--font-callout); } .semana .cal-agenda-day.is-today > .cal-agenda-date { color: var(--porruni-ink); } .semana .cal-today-chip { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--porruni-action); color: var(--porruni-on-action); font-size: var(--font-caption); } .semana .cal-agenda-list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; } .semana .cal-agenda-empty { margin: 0; color: var(--porruni-ink-soft); font-size: var(--font-footnote); } .semana .cal-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main actions" "note note"; align-items: center; gap: 0 var(--space-2); min-width: 0; border: var(--hairline); border-radius: var(--radius-card); background: var(--porruni-surface); } .semana .cal-row-main { grid-area: main; display: grid; grid-template-columns: 4.6rem auto minmax(0, 1fr); grid-template-areas: "when badge title" "when . meta"; align-items: baseline; gap: 2px var(--space-3); min-width: 0; padding: var(--space-2) var(--space-3); color: var(--porruni-ink); } .semana .cal-row-when { grid-area: when; color: var(--porruni-ink-soft); font-size: var(--font-footnote); font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; } .semana .cal-row-main .cal-type-badge { grid-area: badge; } .semana .cal-row-title { grid-area: title; min-width: 0; font-size: var(--font-callout); font-weight: var(--weight-strong); line-height: 1.35; overflow-wrap: anywhere; } .semana .cal-row-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; color: var(--porruni-ink-soft); font-size: var(--font-footnote); overflow-wrap: anywhere; } .semana .cal-row.is-done .cal-row-title { text-decoration: line-through; text-decoration-thickness: 1px; } .semana .cal-type-badge { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--event-bg); color: var(--event-ink); font-size: var(--font-caption); font-weight: var(--weight-strong); white-space: nowrap; } .semana .cal-type-badge .studio-icon { width: 13px; height: 13px; flex-basis: 13px; } .semana .cal-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--porruni-line-strong); } .semana .cal-dot.tone-0 { background: var(--porruni-tone-0-strong); } .semana .cal-dot.tone-1 { background: var(--porruni-tone-1-strong); } .semana .cal-dot.tone-2 { background: var(--porruni-tone-2-strong); } .semana .cal-dot.tone-3 { background: var(--porruni-tone-3-strong); } .semana-course { display: inline-flex; align-items: center; gap: 6px; } .semana-note { grid-area: note; margin: 0; padding: 0 var(--space-3) var(--space-2) calc(4.6rem + var(--space-6)); color: var(--porruni-ink-soft); font-size: var(--font-footnote); line-height: var(--leading-footnote); overflow-wrap: anywhere; white-space: pre-line; } .semana-row-actions { grid-area: actions; display: flex; align-items: center; gap: var(--space-1); padding-right: var(--space-2); } .semana-row-actions .icon-button { width: 36px; height: 36px; flex-basis: 36px; border-color: transparent; background: transparent; } .semana-row-actions .icon-button:hover { background: var(--porruni-surface-soft); } .semana-done { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 2px var(--space-2); border-radius: var(--radius-control); color: var(--porruni-ink); font-size: var(--font-footnote); font-weight: var(--weight-strong); cursor: pointer; } .semana-done:hover { background: var(--porruni-surface-soft); } .semana-done:focus-within { outline: 2px solid var(--porruni-focus); outline-offset: 1px; } .semana-done input:focus-visible { outline: none; } .semana-undated-campus summary { cursor: pointer; color: var(--porruni-action-ink); font-size: var(--font-footnote); font-weight: var(--weight-strong); } .semana-undated-campus[open] summary { margin-bottom: var(--space-2); } .semana .cal-empty { margin: 0; max-width: var(--reading-max); color: var(--porruni-ink-soft); font-size: var(--font-footnote); line-height: var(--leading-footnote); } .semana .cal-legend { margin: 0; color: var(--porruni-ink-soft); font-size: var(--font-caption); line-height: var(--leading-caption); overflow-wrap: anywhere; } /* Formulario de recordatorio personal. */ .semana-form { display: grid; gap: var(--space-3); max-width: 44rem; padding: var(--space-4); border: 1px dashed var(--porruni-line-strong); border-radius: var(--radius-card); background: var(--porruni-surface); } .semana-form-title { margin: 0; font-size: var(--font-headline); line-height: var(--leading-headline); } .semana-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--space-3); } .semana-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); } @media (max-width: 640px) { .semana .cal-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "note" "actions"; } .semana .cal-row-main { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "when badge" "title title" "meta meta"; } .semana .cal-row-main .cal-type-badge { justify-self: start; } .semana-row-actions { justify-content: space-between; padding: 0 var(--space-2) var(--space-2); } .semana-note { padding-left: var(--space-3); } .semana .cal-strip-day { min-height: 3.8rem; padding-inline: 0; font-size: 11px; } .semana .cal-strip-day strong { font-size: var(--font-callout); } .semana .cal-head { align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { .semana * { transition-duration: 0s !important; } } html[data-reduce-motion="true"] .semana * { transition-duration: 0s !important; } /* ── css/40-clases.css ── */ /* * Mis clases (SA-B, F2): tarjeta de asignatura del escritorio (apps/desktop/renderer/studio.css, «Tarjeta de * asignatura») y tarjetas de Calificaciones (cloud.css), copiadas y acotadas a .clases. Las tarjetas de * calificaciones y asistencia solo muestran estados con palabras y datos oficiales; nunca medias calculadas. */ .clases { display: grid; gap: var(--stack-gap); min-width: 0; } .clases .cloud-intro { margin: 0; max-width: var(--reading-max); color: var(--porruni-ink-soft); font-size: var(--font-callout); line-height: var(--leading-callout); } .clases-copy { display: grid; gap: var(--space-2); } .clases-copy p { margin: 0; color: var(--porruni-ink-soft); line-height: var(--leading-body); } .clases .cal-legend { margin: 0; color: var(--porruni-ink-soft); font-size: var(--font-caption); line-height: var(--leading-caption); overflow-wrap: anywhere; } .clases .cloud-empty { margin: 0; color: var(--porruni-ink-soft); font-size: var(--font-footnote); } /* Asignaturas (studio.css). */ .clases .academic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(23rem, 100%), 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; } .clases .subject-monogram { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; background: var(--tone); color: var(--tone-ink); border-radius: 12px; font-size: var(--font-caption); font-weight: 800; letter-spacing: .02em; } .clases .subject-card { display: grid; align-content: start; gap: var(--space-4); min-width: 0; padding: var(--space-4) var(--space-4) var(--space-5) var(--space-5); border: var(--hairline); border-radius: var(--radius-card); background: var(--porruni-surface); box-shadow: var(--elevation-1); } .clases .subject-heading { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "mono name" "mono status"; align-items: center; gap: var(--space-1) var(--space-3); min-width: 0; } .clases .subject-heading > .subject-monogram { grid-area: mono; align-self: start; width: 40px; height: 40px; flex-basis: 40px; border-radius: 13px; font-size: var(--font-footnote); } .clases .clases-card-title { min-width: 0; margin: 0; font-family: var(--porruni-font-body, inherit); font-size: var(--font-title-3); font-weight: var(--weight-strong); line-height: var(--leading-title-3); letter-spacing: var(--tracking-title-3); text-wrap: pretty; overflow-wrap: anywhere; } .clases .subject-heading .clases-card-title { grid-area: name; } .clases .subject-heading .subject-status { grid-area: status; } .clases .subject-status { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0; } .clases .subject-state.configured { background: var(--porruni-success-soft); color: var(--porruni-success-ink); } .clases .subject-state.progress-config { border: 1px dashed var(--porruni-provisional-line); background: var(--porruni-provisional-soft); color: var(--porruni-provisional-ink); } .clases .subject-state.pending-config { border-color: var(--porruni-warning-line); background: var(--porruni-warning-soft); color: var(--porruni-warning-ink); } .clases .subject-state.failed { border-color: var(--porruni-danger-line); background: var(--porruni-danger-soft); color: var(--porruni-danger-ink); } .clases .subject-source { padding-left: 7px; background: var(--porruni-surface-soft); color: var(--porruni-ink-soft); } .clases .subject-access { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); } .clases a.secondary-button { text-decoration: none; } /* Detalle. */ .clases-crumb { display: flex; } .clases-back { display: inline-flex; align-items: center; gap: 2px; padding-left: var(--space-2); text-decoration: none; } .clases-back span { display: inline-flex; align-items: center; gap: 2px; } .clases-back .studio-icon { width: 18px; height: 18px; flex-basis: 18px; } .clases-detail-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4); min-width: 0; padding: var(--card-pad); border-radius: var(--radius-hero); background: var(--tone); } .clases-detail-head .subject-monogram { width: 48px; height: 48px; flex-basis: 48px; border-radius: 15px; background: var(--porruni-surface); color: var(--tone-ink); font-size: var(--font-footnote); } .clases-detail-copy { display: grid; gap: var(--space-1); min-width: 0; } .clases-detail-copy h2 { margin: 0; font-family: var(--porruni-font-display); font-size: var(--font-title-2); font-weight: var(--weight-display); line-height: var(--leading-title-2); overflow-wrap: anywhere; } .clases-detail-copy h2:focus { outline: none; } .clases-detail-copy h2:focus-visible { outline: 2px solid var(--porruni-focus); outline-offset: 2px; } .clases-detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .clases-block .web-section-head h3 { margin: 0; font-family: var(--porruni-font-display); font-size: var(--font-title-3); line-height: var(--leading-title-3); } .clases-block-body { display: grid; gap: var(--space-3); min-width: 0; } .clases-sources { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } .clases-source { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-width: 0; padding: var(--space-2) var(--space-3); border: var(--hairline); border-radius: var(--radius-card); background: var(--porruni-surface); } .clases-source-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--porruni-surface-soft); color: var(--porruni-ink-soft); } .clases-source-copy { display: grid; gap: 2px; min-width: 0; } .clases-source-copy strong { font-size: var(--font-callout); line-height: 1.35; overflow-wrap: anywhere; } .clases-source-copy small { color: var(--porruni-ink-soft); font-size: var(--font-caption); } .clases-reader { display: grid; gap: var(--space-3); min-width: 0; padding: var(--space-4); border: var(--hairline); border-radius: var(--radius-card); background: var(--porruni-surface-soft); } .clases-reader[hidden] { display: none; } .clases-reader-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-4); } .clases-reader-head h4 { margin: 0; font-size: var(--font-headline); line-height: var(--leading-headline); overflow-wrap: anywhere; } .clases-reader-head h4:focus { outline: none; } .clases-reader-head h4:focus-visible { outline: 2px solid var(--porruni-focus); outline-offset: 2px; } .clases-reader-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); } .clases-reader-text { display: grid; gap: var(--space-3); max-width: var(--reading-max); } .clases-reader-text p { margin: 0; color: var(--porruni-ink); font-size: var(--font-body); line-height: var(--leading-body); white-space: pre-line; overflow-wrap: anywhere; } .clases-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2); max-width: 40rem; } .clases-search-row .primary-button { min-height: 44px; } .clases-results { display: grid; gap: var(--space-3); min-width: 0; } .clases-hits { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } .clases-hit { display: grid; gap: var(--space-1); min-width: 0; padding: var(--space-3) var(--space-4); border: var(--hairline); border-radius: var(--radius-card); background: var(--porruni-surface); } .clases-hit h4 { margin: 0; font-size: var(--font-callout); line-height: 1.35; overflow-wrap: anywhere; } .clases-hit-text { margin: 0; color: var(--porruni-ink); font-size: var(--font-footnote); line-height: var(--leading-footnote); white-space: pre-line; overflow-wrap: anywhere; } /* Calificaciones y asistencia (cloud.css, «Calificaciones»). */ .clases .grades-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; } .clases .grade-card { display: grid; align-content: start; gap: var(--space-3); min-width: 0; padding: var(--card-pad); border: var(--hairline); border-radius: var(--radius-hero); background: var(--porruni-surface); box-shadow: var(--elevation-1); } .clases .grade-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); } .clases .grade-head h2:focus { outline: none; } .clases .grade-head h2:focus-visible { outline: 2px solid var(--porruni-focus); outline-offset: 2px; } .clases .grade-table { width: 100%; border-collapse: collapse; font-size: var(--font-footnote); } .clases .grade-table th, .clases .grade-table td { padding: 6px 4px; border-bottom: var(--hairline); text-align: left; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .clases .grade-table thead th { color: var(--porruni-ink-soft); font-size: var(--font-caption); font-weight: 650; } .clases .grade-table tbody th { font-weight: 650; } .clases .grade-table tr.is-pending td { color: var(--porruni-ink-soft); } .clases .grade-note { margin: 0; color: var(--porruni-ink-soft); font-size: var(--font-footnote); line-height: var(--leading-footnote); } .clases .grade-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } @media (max-width: 700px) { .clases-detail-head { grid-template-columns: 40px minmax(0, 1fr); padding: var(--space-4); } .clases-detail-head .subject-monogram { width: 40px; height: 40px; flex-basis: 40px; } .clases-detail-actions { grid-column: 1 / -1; } .clases-detail-actions .primary-button { width: 100%; } .clases-source { grid-template-columns: minmax(0, 1fr) auto; } .clases-source-icon { display: none; } .clases .subject-card { padding: var(--space-4); } .clases .grade-card { padding: var(--space-4); } } @media (max-width: 420px) { .clases-search-row { grid-template-columns: minmax(0, 1fr); } .clases-source { grid-template-columns: minmax(0, 1fr); } .clases-source .secondary-button { justify-self: start; } } /* Tu grupo de la beta (cohortes autorizadas de F1): tarjeta con el mismo lenguaje que .subject-card. */ .clases .clases-cohorts { display: grid; gap: var(--space-3); min-width: 0; } .clases .clases-cohorts > h2 { margin: 0; font-size: var(--font-title-3); font-weight: var(--weight-strong); line-height: var(--leading-title-3); } .clases .clases-cohort-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(23rem, 100%), 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; } .clases .clases-cohort { display: grid; align-content: start; justify-items: start; gap: var(--space-3); min-width: 0; padding: var(--space-4) var(--space-5); border: var(--hairline); border-radius: var(--radius-card); background: var(--porruni-surface); box-shadow: var(--elevation-1); } .clases .clases-cohort h3 { margin: 0; font-size: var(--font-headline, var(--font-callout)); font-weight: var(--weight-strong); overflow-wrap: anywhere; } .clases .clases-cohort .settings-note { margin: 0; color: var(--porruni-ink-soft); line-height: var(--leading-body); overflow-wrap: anywhere; } /* ── css/50-notas.css ── */ /* * Porruni web · Notas (src/areas/50-notas.js). Reglas copiadas de la superficie de documento del escritorio * (apps/desktop/renderer/notes.css: retícula índice | barra / hoja, índice, barra discreta, hoja y vacío) y * adaptadas a la web: el h1 de la vista queda oculto visualmente (no con display:none) para lectores de * pantalla y foco; con poco ancho la lista y la nota abierta se alternan; resolución de conflictos con las dos * versiones lado a lado (apiladas en móvil). Solo tokens de 00-brand/01-system. */ /* ── La vista ocupa el área de trabajo; la ubicación está en la barra de Notas ─────────────────────────────── */ html[data-view=notes] .topbar { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } html[data-view=notes] .workspace { max-width: none; padding-bottom: 0; } .notes-view { min-width: 0; margin-inline: calc(-1 * var(--gutter)); } .notes-root { position: relative; min-width: 0; height: calc(100dvh / var(--text-zoom) - var(--toolbar-height)); min-height: 26rem; border-top: var(--hairline); background: var(--porruni-surface); color: var(--porruni-ink); overflow: hidden; } .notes-state { padding: var(--space-7) var(--gutter); } /* Retícula: índice | (barra / hoja). */ .notes { display: grid; grid-template-columns: 16rem minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "nav bar" "nav sheet"; height: 100%; min-width: 0; min-height: 0; } .notes > * { min-width: 0; min-height: 0; } /* ── Índice ──────────────────────────────────────────────────────────────────────────────────────────────────── */ .notes-nav { grid-area: nav; display: flex; flex-direction: column; border-right: var(--hairline); background: color-mix(in srgb, var(--porruni-surface-soft) 42%, var(--porruni-surface)); } .notes-nav-head { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2); } .notes-index-title { margin: 0; padding: 0 var(--space-1); color: var(--porruni-ink-soft); font-family: var(--porruni-font-text); font-size: var(--font-label); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; } .notes-search { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 0 var(--space-2); border: var(--hairline); border-radius: var(--radius-control); background: var(--porruni-surface); } .notes-search .studio-icon { width: 15px; height: 15px; flex: 0 0 15px; color: var(--porruni-ink-soft); } .notes-root .notes-search input[type=search] { flex: 1; width: 0; min-width: 0; min-height: 32px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--porruni-ink); font: inherit; font-size: var(--font-footnote); outline: none; box-shadow: none; } .notes-root .notes-search input[type=search]:focus-visible { outline: none; } .notes-search:focus-within { outline: var(--focus-width) solid var(--porruni-focus); outline-offset: 1px; } .notes-filter { display: grid; gap: 2px; } .notes-filter label { color: var(--porruni-ink-soft); font-size: var(--font-caption); font-weight: var(--weight-strong); } .notes-root .notes-filter select { min-height: 34px; padding-block: 4px; font-size: var(--font-footnote); } .notes-create { display: flex; align-items: center; gap: 2px; min-width: 0; } .notes-create-button { display: inline-flex; align-items: center; gap: 6px; min-width: 0; min-height: 32px; padding: 4px var(--space-2); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--porruni-ink); font-size: var(--font-footnote); font-weight: var(--weight-medium); transition: background-color var(--duration-fast), transform var(--spring-snappy) var(--ease-spring); } .notes-create-button .studio-icon { width: 15px; height: 15px; flex: 0 0 15px; color: var(--porruni-ink-soft); } .notes-create-button:hover { background: var(--porruni-surface-soft); } .notes-create-button:active { transform: scale(var(--press-scale)); } .notes-tree-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--space-1) var(--space-2) var(--space-3); } .notes-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; } .notes-list > li { min-width: 0; } .notes-item { display: flex; align-items: flex-start; gap: var(--space-2); width: 100%; min-width: 0; min-height: 30px; padding: 6px var(--space-2); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--porruni-ink); font-size: var(--font-footnote); text-align: left; transition: background-color var(--duration-fast); } .notes-item .studio-icon { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px; color: var(--tone-strong, var(--porruni-ink-soft)); } .notes-item:hover { background: var(--porruni-surface-soft); } .notes-item.is-selected { background: var(--porruni-selected); font-weight: var(--weight-medium); } .notes-item-copy { display: grid; min-width: 0; gap: 1px; } .notes-item-title { min-width: 0; overflow-wrap: anywhere; text-align: left; } .notes-item small { color: var(--porruni-ink-soft); font-size: var(--font-caption); font-weight: var(--weight-regular); line-height: var(--leading-caption); } .notes-none { margin: 0; padding: 4px var(--space-2); color: var(--porruni-ink-soft); font-size: var(--font-caption); } .notes-none[hidden] { display: none; } .notes-danger { color: var(--porruni-danger-ink); } /* ── Barra superior: discreta ────────────────────────────────────────────────────────────────────────────────── */ .notes-bar { grid-area: bar; container: notes-bar / inline-size; z-index: 5; border-bottom: var(--hairline); background: var(--porruni-surface); } .notes-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; min-height: 2.875rem; padding: var(--space-1) var(--space-3); } .notes-bar-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-width: 32px; min-height: 32px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--porruni-ink-soft); font-size: var(--font-footnote); font-weight: var(--weight-medium); transition: background-color var(--duration-fast), color var(--duration-fast), transform var(--spring-snappy) var(--ease-spring); } .notes-bar-button:hover { background: var(--porruni-surface-soft); color: var(--porruni-ink); } .notes-bar-button:active { transform: scale(var(--press-scale)); } .notes-bar-button .studio-icon { width: 16px; height: 16px; flex: 0 0 16px; } .notes-back { display: none; } .notes-crumbs { order: 1; flex: 1 1 8rem; min-width: 0; } .notes-crumbs ol { display: flex; align-items: center; min-width: 0; margin: 0; padding: 0; list-style: none; color: var(--porruni-ink-soft); font-size: var(--font-footnote); line-height: var(--leading-footnote); } .notes-crumbs li { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notes-crumbs li:first-child { flex: none; } .notes-crumbs li + li::before { content: "›" / ""; margin: 0 6px; color: var(--porruni-ink-soft); } .notes-crumbs li[aria-current] { flex-shrink: 2; color: var(--porruni-ink); font-weight: var(--weight-medium); } .notes-sync { order: 2; display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 21rem; margin: 0; color: var(--porruni-ink-soft); font-size: var(--font-caption); line-height: var(--leading-caption); } .notes-sync[hidden] { display: none; } .notes-sync-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--porruni-success-ink); box-shadow: 0 0 0 3px var(--porruni-success-soft); } .notes-sync.is-dirty { color: var(--porruni-warning-ink); font-weight: var(--weight-strong); } .notes-sync.is-dirty .notes-sync-dot { background: var(--porruni-warning-ink); box-shadow: 0 0 0 3px var(--porruni-warning-soft); } .notes-bar-actions { order: 3; display: flex; align-items: center; gap: var(--space-1); flex: none; } .notes-bar-actions .primary-button, .notes-bar-actions .quiet-button { min-height: 34px; padding-block: 5px; } .notes-bar-actions [hidden] { display: none; } .notes-delete { color: var(--porruni-danger-ink); } .notes-delete:hover { background: var(--porruni-danger-soft); } .notes-alerts { order: 10; flex: 1 1 100%; display: grid; gap: var(--space-2); min-width: 0; } .notes-alerts:empty { display: none; } .notes-save-error { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-width: 0; margin: 0 0 var(--space-1); padding: var(--space-2) var(--space-3); border: 1px solid var(--porruni-danger-line); border-radius: var(--radius-control); background: var(--porruni-danger-soft); color: var(--porruni-danger-ink); font-size: var(--font-footnote); font-weight: var(--weight-strong); } .notes-save-error .studio-icon { width: 16px; height: 16px; flex: 0 0 16px; } .notes-save-error > span { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; } @container notes-bar (max-width: 36rem) { .notes-sync { order: 9; flex: 1 1 100%; max-width: none; padding: 0 0 var(--space-1) var(--space-1); } } /* ── Hoja ────────────────────────────────────────────────────────────────────────────────────────────────────── */ .notes-editor { grid-area: sheet; z-index: 1; overflow: auto; overscroll-behavior: contain; background: var(--porruni-surface); } .notes-doc { --measure: 42rem; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-2); min-width: 0; padding: var(--space-7) clamp(1.5rem, 7%, 6rem) var(--space-10); font-size: var(--font-callout); } .notes-doc > * { width: 100%; min-width: 0; max-width: var(--measure); justify-self: center; } .notes-blank { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-8) 0; text-align: center; } .notes-blank h2 { margin: 0; font-family: var(--porruni-font-display); font-size: var(--font-title-2); font-weight: var(--weight-display); } .notes-blank p { margin: 0; max-width: 32rem; color: var(--porruni-ink-soft); font-size: var(--font-callout); line-height: var(--leading-callout); } .notes-blank-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); } .note-form { display: grid; gap: var(--space-3); min-width: 0; } .note-head { padding-bottom: var(--space-1); } .notes-root .note-head input.note-title { display: block; width: 100%; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--porruni-ink); font-family: var(--porruni-font-display); font-size: var(--font-large-title); font-weight: var(--weight-display); line-height: var(--leading-large-title); letter-spacing: var(--tracking-large-title); outline: none; box-shadow: none; } .notes-root .note-head input.note-title::placeholder { color: color-mix(in srgb, var(--porruni-ink-soft) 60%, transparent); } .notes-root .note-head input.note-title:focus-visible { box-shadow: 0 2px 0 var(--porruni-focus); } .note-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; color: var(--porruni-ink-soft); font-size: var(--font-caption); } .note-meta.is-new { display: grid; grid-template-columns: minmax(0, 22rem); gap: 4px; } .note-meta.is-new label { color: var(--porruni-ink); font-size: var(--font-footnote); font-weight: var(--weight-strong); } .note-meta.is-new small { color: var(--porruni-ink-soft); } .note-meta .web-pill { background: var(--tone, var(--porruni-surface-soft)); color: var(--tone-ink, var(--porruni-ink-soft)); border-color: transparent; } .notes-root textarea.note-body { width: 100%; min-height: 20rem; padding: var(--space-3); border: var(--hairline); border-radius: var(--radius-control); background: var(--porruni-surface); color: var(--porruni-ink); font: inherit; font-size: var(--font-callout); line-height: 1.7; resize: vertical; } .note-hint { margin: 0; color: var(--porruni-ink-soft); font-size: var(--font-caption); line-height: var(--leading-caption); } .notes-missing { padding-top: var(--space-6); } /* ── Ediciones en conflicto guardadas ────────────────────────────────────────────────────────────────────────── */ .note-conflicts { display: grid; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-4); border: 1px solid var(--porruni-warning-line); border-radius: var(--radius-card); background: var(--porruni-warning-soft); } .note-conflicts[hidden] { display: none; } .note-conflicts h2 { margin: 0; font-family: var(--porruni-font-display); font-size: var(--font-title-3); line-height: var(--leading-title-3); color: var(--porruni-warning-ink); } .note-conflicts-intro { margin: 0; color: var(--porruni-ink); font-size: var(--font-footnote); line-height: var(--leading-footnote); } .note-conflict-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } .note-conflict-item { display: grid; gap: var(--space-2); min-width: 0; padding: var(--space-3); border: var(--hairline); border-radius: var(--radius-control); background: var(--porruni-surface); } .note-conflict-head { display: grid; gap: 2px; min-width: 0; } .note-conflict-head strong { overflow-wrap: anywhere; } .note-conflict-head small { color: var(--porruni-ink-soft); font-size: var(--font-caption); } .note-conflict-item summary { width: max-content; max-width: 100%; color: var(--porruni-action-ink); font-size: var(--font-footnote); font-weight: var(--weight-strong); cursor: pointer; } .note-conflict-actions { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); } .note-conflict-actions .notes-danger:hover { background: var(--porruni-danger-soft); } /* ── Diálogo de conflicto: dos versiones lado a lado ─────────────────────────────────────────────────────────── */ .note-conflict-dialog { width: min(980px, calc(100% - 32px)); } .note-conflict-dialog h2:focus { outline: none; } .note-conflict-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; } .note-version { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: var(--space-2); min-width: 0; padding: var(--space-3); border: var(--hairline-strong); border-radius: var(--radius-card); background: var(--porruni-surface); } .note-version.is-mine { border-color: var(--porruni-coral-ink); background: color-mix(in srgb, var(--porruni-coral-soft) 45%, var(--porruni-surface)); } .note-version header { display: grid; gap: 2px; } .note-version h3 { margin: 0; font-size: var(--font-headline); line-height: var(--leading-headline); } .note-version small { color: var(--porruni-ink-soft); font-size: var(--font-caption); } .note-version-title { margin: 0; font-weight: var(--weight-strong); overflow-wrap: anywhere; } .note-version-body { max-height: 18rem; overflow: auto; padding: var(--space-2); border-radius: var(--radius-s, 8px); background: var(--porruni-surface-soft); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--font-footnote); line-height: 1.6; } .note-conflict-actions, .note-conflict-dialog .web-dialog-actions { align-items: center; } /* ── Con poco ancho: la lista y la nota abierta se alternan (botón «Tus notas» para volver) ──────────────────── */ @media (max-width: 900px) { .notes { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nav" "bar" "sheet"; grid-template-rows: minmax(0, 1fr); } .notes:not(.is-editing) > .notes-bar, .notes:not(.is-editing) > .notes-editor { display: none; } .notes.is-editing > .notes-nav { display: none; } .notes.is-editing { grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "bar" "sheet"; } .notes-nav { border-right: 0; } .notes-back { display: inline-flex; } .notes-back[hidden] { display: none; } .notes-doc { padding: var(--space-5) var(--space-5) var(--space-8); } } @media (max-width: 700px) { .notes-root { height: auto; min-height: 0; overflow: visible; } .notes, .notes.is-editing { height: auto; grid-template-rows: auto; } .notes.is-editing { grid-template-rows: auto auto; } .notes-editor, .notes-tree-wrap { overflow: visible; } .notes-doc { padding: var(--space-4) var(--gutter) var(--space-7); } .notes-root .note-head input.note-title { font-size: var(--font-title-1); line-height: var(--leading-title-1); } .notes-root textarea.note-body { min-height: 14rem; } .notes-bar { position: sticky; top: 56px; } .notes-bar-actions { margin-left: auto; } .note-conflict-compare { grid-template-columns: minmax(0, 1fr); } .note-version-body { max-height: 12rem; } .note-conflict-dialog { width: calc(100% - 16px); } .note-conflict-dialog .web-dialog-actions > * { flex: 1 1 100%; } } @media (hover: none) and (pointer: coarse) { .notes-item, .notes-create-button, .notes-bar-button { min-height: 44px; } } @media (prefers-reduced-motion: reduce) { .notes-item, .notes-create-button, .notes-bar-button { transition: none; } .notes-create-button:active, .notes-bar-button:active { transform: none; } } html[data-reduce-motion=true] :is(.notes-item, .notes-create-button, .notes-bar-button) { transition: none; } /* ── css/60-estudio.css ── */ /* * Porruni web · Estudio (src/areas/60-estudio.js). Lenguaje de la herramienta académica y las asignaturas del * escritorio (apps/desktop/renderer/studio.css: .subject-monogram, .studio-course, .academic-tool, * .study-subject-head, .study-chat-actions), copiado y acotado a esta vista. Estados siempre con palabra. */ .study-web { display: grid; gap: var(--space-5); min-width: 0; } /* Monograma de asignatura (studio.css) */ .study-web .subject-monogram { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; background: var(--tone); color: var(--tone-ink); border-radius: 12px; font-size: var(--font-caption); font-weight: 800; letter-spacing: .02em; } /* Selector de asignatura: filas .studio-course del escritorio en una cuadrícula que se pliega. */ .study-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; } .study-courses > li { min-width: 0; } .study-course { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-width: 0; min-height: 52px; padding: var(--space-2) var(--space-3); border: var(--hairline); border-radius: var(--radius-card); background: var(--porruni-surface); color: var(--porruni-ink); font-size: var(--font-footnote); font-weight: var(--weight-strong); text-align: left; transition: background-color var(--duration-fast), border-color var(--duration-fast), transform var(--spring-snappy) var(--ease-spring); } .study-course:hover { background: color-mix(in srgb, var(--tone, var(--porruni-surface-soft)) 35%, var(--porruni-surface)); } .study-course:active { transform: scale(var(--press-scale)); } .study-course.is-selected { border-color: var(--tone-strong, var(--porruni-line-strong)); background: var(--tone, var(--porruni-selected)); color: var(--tone-ink, var(--porruni-ink)); } .study-course.is-selected .subject-monogram { background: var(--porruni-surface); } .study-course-name { min-width: 0; overflow-wrap: anywhere; } /* Herramienta académica de la asignatura (studio.css) */ .study-panel { min-width: 0; border: var(--hairline); border-radius: var(--radius-card); background: var(--porruni-surface); box-shadow: var(--elevation-1); } .study-subject-head { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: var(--hairline); border-radius: var(--radius-card) var(--radius-card) 0 0; background: color-mix(in srgb, var(--tone, var(--porruni-surface-soft)) 55%, var(--porruni-surface)); } .study-subject-head > .subject-monogram { width: 40px; height: 40px; flex-basis: 40px; border-radius: 13px; background: var(--porruni-surface); color: var(--tone-ink, var(--porruni-ink-soft)); font-size: var(--font-footnote); } .study-subject-head h2 { margin: 0; font-family: var(--porruni-font-display); font-size: var(--font-title-3); font-weight: var(--weight-display); line-height: var(--leading-title-3); letter-spacing: var(--tracking-title-3); overflow-wrap: anywhere; } .study-subject-head h2:focus { outline: none; } .study-summary { margin: 2px 0 0; color: var(--porruni-ink-soft); font-size: var(--font-footnote); line-height: var(--leading-footnote); } .study-content { display: grid; gap: var(--space-4); min-width: 0; padding: var(--space-5) var(--space-6) var(--space-6); } .study-chat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); } /* Formulario explícito */ .study-form { display: grid; gap: var(--space-3); padding: var(--space-4); border: var(--hairline); border-radius: var(--radius-control); background: color-mix(in srgb, var(--porruni-surface-soft) 55%, var(--porruni-surface)); } .study-form-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: start; } .study-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); } /* Registros */ .study-items { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } .study-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4); min-width: 0; padding: var(--space-3) var(--space-4); border: var(--hairline); border-radius: var(--radius-control); background: var(--porruni-surface); } .study-item[data-status=completed] { background: color-mix(in srgb, var(--porruni-success-soft) 35%, var(--porruni-surface)); } .study-item[data-status=needs_review] { background: color-mix(in srgb, var(--porruni-warning-soft) 40%, var(--porruni-surface)); } .study-item-main { display: grid; gap: var(--space-1); min-width: 0; } .study-item-label { margin: 0; color: var(--porruni-ink); font-size: var(--font-callout); font-weight: var(--weight-strong); line-height: var(--leading-callout); overflow-wrap: anywhere; } .study-item-label:focus { outline: none; text-decoration: underline; text-underline-offset: 3px; } .study-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; } .study-item-meta small { color: var(--porruni-ink-soft); font-size: var(--font-caption); } .study-item-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px var(--space-1); } .study-item-actions .quiet-button { min-height: 34px; padding: 5px 10px; } .study-item-actions .icon-button { width: 34px; height: 34px; flex-basis: 34px; } .study-delete { color: var(--porruni-danger-ink); } .study-delete:hover { background: var(--porruni-danger-soft); } .study-documents[hidden] { display: none; } @media (max-width: 900px) { .study-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .study-form-grid > :first-child { grid-column: 1 / -1; } .study-item { grid-template-columns: minmax(0, 1fr); } .study-item-actions { justify-content: flex-start; } } @media (max-width: 700px) { .study-subject-head { padding: var(--space-3) var(--space-4); } .study-content { padding: var(--space-4); } .study-form-grid { grid-template-columns: minmax(0, 1fr); } .study-chat-actions > * { flex: 1 1 auto; } .study-item { padding: var(--space-3); } } @media (hover: none) and (pointer: coarse) { .study-item-actions .quiet-button, .study-item-actions .icon-button { min-height: 44px; } .study-item-actions .icon-button { width: 44px; height: 44px; flex-basis: 44px; } } @media (prefers-reduced-motion: reduce) { .study-course { transition: none; } .study-course:active { transform: none; } } html[data-reduce-motion=true] .study-course { transition: none; } /* ── css/70-circulo.css ── */ /* * Porruni web · Mi círculo (src/areas/70-circulo.js). Piezas pc-* copiadas de apps/desktop/renderer/features/ * circle/circle.css (raíz, tarjetas, cabecera crema, distintivos, avatares, miembros, letra pequeña) y una * retícula propia: grupo y publicaciones a la izquierda, miembros a la derecha (una columna en móvil). La * fotografía de la cabecera del escritorio no se sirve en la web: la acompaña Runi vectorial. */ .pc-root { --pc-petrol-soft: light-dark(#dcefef, #123c45); --pc-petrol-ink: light-dark(#0b5a60, #8fd8de); display: block; min-width: 0; container: pc / inline-size; color: var(--porruni-ink); } .pc-root h2, .pc-root h3, .pc-root h4 { margin: 0; font-family: var(--porruni-font-display); font-weight: var(--weight-display); color: var(--porruni-ink); } .pc-root p { margin: 0; } .pc-root ul, .pc-root ol { margin: 0; padding: 0; list-style: none; } .pc-shell { display: grid; gap: var(--space-5); min-width: 0; } .pc-root .pc-ic { width: 16px; height: 16px; flex: 0 0 16px; } /* Comunes (circle.css) */ .pc-card { min-width: 0; padding: var(--space-5); border: var(--hairline); border-radius: var(--radius-card); background: var(--porruni-surface); box-shadow: var(--elevation-1); } .pc-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); } .pc-card-head > div { min-width: 0; flex: 1 1 14rem; } .pc-card-head h2, .pc-card-head h3 { font-size: var(--font-title-3); line-height: var(--leading-title-3); letter-spacing: var(--tracking-title-3); overflow-wrap: anywhere; } .pc-card-head h2:focus { outline: none; } .pc-card-head p { margin-top: 2px; color: var(--porruni-ink-soft); font-size: var(--font-footnote); line-height: var(--leading-footnote); } .pc-eyebrow { color: var(--porruni-ink-soft); font-size: var(--font-label); line-height: var(--leading-label); letter-spacing: var(--tracking-label); font-weight: 800; text-transform: uppercase; } .pc-fine { display: flex; gap: 6px; align-items: flex-start; margin-top: var(--space-3) !important; color: var(--porruni-ink-soft); font-size: var(--font-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption); } .pc-root .pc-fine .pc-ic { width: 14px; height: 14px; flex-basis: 14px; margin-top: 1px; } .pc-empty { color: var(--porruni-ink-soft); font-size: var(--font-footnote); line-height: var(--leading-footnote); } .pc-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .pc-danger { color: var(--porruni-danger-ink); } .pc-danger:hover { background: var(--porruni-danger-soft); } .pc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--porruni-surface-soft); color: var(--porruni-ink-soft); font-size: var(--font-caption); font-weight: var(--weight-strong); line-height: 1.4; } .pc-root .pc-chip .pc-ic { width: 13px; height: 13px; flex-basis: 13px; } .pc-chip.is-line { border: var(--hairline-strong); background: transparent; color: var(--porruni-ink-soft); } .pc-av { position: relative; display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--porruni-surface-soft); color: var(--porruni-ink-soft); font-size: var(--font-footnote); font-weight: 800; } .pc-av[data-tone="me"] { background: var(--runi-coral); color: var(--runi-plum); } .pc-av[data-tone="mint"] { background: var(--porruni-mint-soft); color: var(--porruni-mint-ink); } .pc-av[data-tone="lilac"] { background: var(--porruni-tone-2); color: var(--porruni-tone-2-ink); } .pc-av[data-tone="yellow"] { background: var(--porruni-yellow-soft); color: var(--porruni-yellow-ink); } .pc-av[data-tone="coral"] { background: var(--porruni-coral-soft); color: var(--porruni-coral-ink); } .pc-av.is-small { width: 1.875rem; height: 1.875rem; font-size: var(--font-caption); } .pc-status { display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 6px; max-width: 100%; padding: 4px 10px; border: var(--hairline); border-radius: var(--radius-pill); background: var(--material-regular); color: var(--porruni-ink-soft); font-size: var(--font-caption); line-height: 1.35; font-weight: var(--weight-strong); } .pc-status > span { min-width: 0; } .pc-root .pc-status .pc-ic { width: 14px; height: 14px; flex-basis: 14px; color: var(--porruni-mint-ink); } .pc-members { display: flex; flex-wrap: wrap; gap: var(--space-2); } .pc-member { display: flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 100%; padding: 6px 10px 6px 6px; border: var(--hairline); border-radius: var(--radius-pill); background: var(--porruni-surface); } .pc-member-text { display: grid; min-width: 0; line-height: 1.25; } .pc-member-text strong { font-size: var(--font-footnote); overflow-wrap: anywhere; } /* Cabecera crema (circle.css .pc-head) con Runi en lugar de la fotografía */ .pc-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text runi" "status runi"; align-content: end; gap: var(--space-2) var(--space-5); min-height: 9.5rem; margin-bottom: var(--space-5); padding: var(--space-5) var(--space-6); overflow: hidden; border: var(--hairline); border-radius: var(--radius-hero, var(--radius-card)); background: var(--porruni-cream); isolation: isolate; } .pc-head-text { grid-area: text; display: grid; gap: var(--space-1); max-width: 40rem; } .pc-head-title { font-size: var(--font-title-2); line-height: var(--leading-title-2); letter-spacing: var(--tracking-title-2); } .pc-head-lede { color: var(--porruni-ink-soft); font-size: var(--font-body); line-height: var(--leading-body); text-wrap: pretty; } .pc-head-status { grid-area: status; margin-top: var(--space-1) !important; } .circle-web-runi { grid-area: runi; align-self: center; } /* Selector de grupos */ .circle-web-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: var(--space-2); } .circle-web-group-btn { display: grid; gap: 2px; width: 100%; min-width: 0; min-height: 52px; padding: var(--space-2) var(--space-3); border: var(--hairline); border-radius: var(--radius-card); background: var(--porruni-surface); color: var(--porruni-ink); text-align: left; transition: background-color var(--duration-fast), border-color var(--duration-fast); } .circle-web-group-btn small { color: var(--porruni-ink-soft); font-size: var(--font-caption); } .circle-web-group-btn strong { font-size: var(--font-footnote); overflow-wrap: anywhere; } .circle-web-group-btn:hover { background: color-mix(in srgb, var(--tone, var(--porruni-surface-soft)) 35%, var(--porruni-surface)); } .circle-web-group-btn.is-selected { border-color: var(--tone-strong, var(--porruni-line-strong)); background: var(--tone, var(--porruni-selected)); } /* Retícula del grupo */ .circle-web-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr); gap: var(--space-5); align-items: start; } .circle-web-col { display: grid; gap: var(--space-4); min-width: 0; } .circle-web-composer { display: grid; gap: var(--space-3); } .circle-web-composer-actions { justify-content: flex-end; } .circle-web-feed { display: grid; gap: var(--space-3); min-width: 0; } .circle-web-posts { display: grid; gap: var(--space-3); } .circle-web-post { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); } .circle-web-post.is-mine { border-color: color-mix(in srgb, var(--runi-coral) 45%, var(--porruni-line)); } .circle-web-post-head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } .circle-web-post-who { display: grid; min-width: 0; flex: 1 1 auto; line-height: 1.3; } .circle-web-post-who strong { font-size: var(--font-footnote); overflow-wrap: anywhere; } .circle-web-post-who small { color: var(--porruni-ink-soft); font-size: var(--font-caption); } .circle-web-delete { min-height: 34px; padding: 5px 10px; } .circle-web-snapshot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); } .circle-web-snapshot small { color: var(--porruni-ink-soft); font-size: var(--font-caption); } .circle-web-post-title { margin: 0; font-family: var(--porruni-font-display); font-weight: var(--weight-display); font-size: var(--font-headline); line-height: var(--leading-headline); overflow-wrap: anywhere; } .circle-web-post-body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--porruni-ink); font-size: var(--font-body); line-height: var(--leading-body); } .circle-web-post-body:focus { outline: none; } .circle-web-empty { padding: var(--space-4); border: 1px dashed var(--porruni-line-strong); border-radius: var(--radius-card); } .circle-web-members-card { position: sticky; top: calc(var(--toolbar-height) + var(--space-3)); } /* Diálogo para compartir una nota */ .circle-share-dialog { width: min(640px, calc(100% - 32px)); } .circle-share-dialog h2:focus { outline: none; } .circle-share-step { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); } .circle-share-notes { display: grid; gap: var(--space-2); max-height: 50dvh; margin: 0; padding: 0; overflow: auto; border: 0; } .circle-share-notes legend { margin-bottom: var(--space-2); padding: 0; font-weight: var(--weight-strong); } .circle-share-option { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: var(--hairline); border-radius: var(--radius-control); } .circle-share-option:has(input:checked) { border-color: var(--porruni-action-ink); background: var(--porruni-action-soft); } .circle-share-option input { margin-top: 4px; } .circle-share-option label { display: grid; gap: 2px; min-width: 0; cursor: pointer; } .circle-share-option label strong { overflow-wrap: anywhere; } .circle-share-option label small { color: var(--porruni-ink-soft); font-size: var(--font-caption); } .circle-share-warning { padding: var(--space-3); border: 1px solid var(--porruni-warning-line); border-radius: var(--radius-control); background: var(--porruni-warning-soft); line-height: var(--leading-body); } .circle-share-preview { display: grid; gap: var(--space-2); max-height: 14rem; overflow: auto; padding: var(--space-3); border: var(--hairline); border-radius: var(--radius-control); background: var(--porruni-surface-soft); } @container pc (max-width: 44rem) { .circle-web-grid { grid-template-columns: minmax(0, 1fr); } .circle-web-members-card { position: static; } .pc-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "runi" "text" "status"; padding: var(--space-4); } .circle-web-runi { justify-self: start; } .circle-web-runi .runi { --runi-size: 72px !important; } } @media (max-width: 700px) { .pc-card { padding: var(--space-4); } .circle-web-post { padding: var(--space-3) var(--space-4); } .circle-web-composer-actions > * { flex: 1 1 auto; } .circle-share-dialog .web-dialog-actions > * { flex: 1 1 auto; } } @media (prefers-reduced-motion: reduce) { .circle-web-group-btn { transition: none; } } html[data-reduce-motion=true] .circle-web-group-btn { transition: none; } /* ── css/80-ajustes.css ── */ /* * Porruni web · Ajustes (F2 · SA-D). Las reglas del primer bloque son copia literal del escritorio * (apps/desktop/renderer/studio.css, «Ajustes», plegables, privacidad y su bloque móvil ≤ 700 px). Cambios: la * marca de Runi de las miniaturas de tema es un SVG en línea (la lista estática del servidor no sirve assets/brand) * y el chevron de los plegables se dibuja con bordes (sin máscaras url()). Al final, ajustes web con prefijo .aj-. */ /* ── Copia del escritorio ─────────────────────────────────────────────────────────────────────── */ .settings-view { display: grid; gap: var(--space-5); max-width: var(--reading-max); min-width: 0; } /* Barra de secciones: un segmentado grande (icono sobre el nombre); el fondo de la elegida se desliza. */ .settings-tabs { position: relative; display: flex; gap: 2px; min-width: 0; padding: 4px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--radius-card); background: var(--porruni-surface-soft); } .settings-tabs::-webkit-scrollbar { display: none; } /* Si ni partiendo los nombres caben (ventanas muy estrechas), la barra se desplaza y el borde que sigue se funde. */ .settings-tabs[data-overflow=end] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); } .settings-tabs[data-overflow=start] { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent); } .settings-tabs[data-overflow=both] { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); } .settings-tabs [role=tab] { position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; gap: var(--space-1); flex: 1 1 auto; min-height: 3.75rem; margin: 0; padding: var(--space-2) var(--space-3); border: 0; border-radius: calc(var(--radius-card) - 4px); background: transparent; color: var(--porruni-ink-soft); font-size: var(--font-caption); font-weight: var(--weight-strong); line-height: 1.25; letter-spacing: var(--tracking-caption); text-align: center; text-wrap: balance; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast), transform var(--spring-snappy) var(--ease-spring); } .settings-tabs [role=tab] .studio-icon { width: 20px; height: 20px; flex-basis: 20px; } .settings-tabs [role=tab]:hover, .settings-tabs [role=tab][aria-selected=true] { color: var(--porruni-ink); } .settings-tabs [role=tab][aria-selected=true] .studio-icon { color: var(--porruni-action-ink); } .settings-tabs [role=tab]:active { transform: scale(var(--press-scale)); transition-duration: var(--duration-fast), var(--duration-press); } .settings-tabs [role=tab]:focus-visible { outline-offset: -2px; } /* dentro de una barra que se desplaza: el anillo no se recorta */ .settings-tabs-indicator { position: absolute; top: 0; left: 0; z-index: 0; border-radius: calc(var(--radius-card) - 4px); background: var(--control-selected); box-shadow: var(--elevation-1), var(--selection-ring); pointer-events: none; transition: transform var(--spring-snappy) var(--ease-spring), width var(--spring-snappy) var(--ease-spring), height var(--spring-snappy) var(--ease-spring); } .settings-tabs-indicator.is-instant { transition: none; } .settings-tabs:not([data-indicator=ready]) .settings-tabs-indicator { display: none; } .settings-tabs:not([data-indicator=ready]) [aria-selected=true] { background: var(--control-selected); box-shadow: var(--elevation-1), var(--selection-ring); } /* Sección: sus grupos en columna. Los huecos (data-settings-slot) no dibujan nada: sus paneles son grupos más. */ .settings-pane { display: grid; gap: var(--space-4); min-width: 0; } .settings-slot { display: contents; } .settings-empty { margin: 0; padding: var(--space-5) var(--space-6); border: 1px dashed var(--porruni-line-strong); border-radius: var(--radius-card); color: var(--porruni-ink-soft); font-size: var(--font-footnote); line-height: var(--leading-footnote); letter-spacing: var(--tracking-footnote); } .settings-pane:has(> .settings-group:not([hidden]), > .settings-slot > *) > .settings-empty { display: none; } .settings-pane :is(.settings-group, .panel) { min-width: 0; margin: 0; padding: var(--space-5) var(--space-6); border: var(--hairline); border-radius: var(--radius-card); background: var(--porruni-surface); box-shadow: var(--elevation-1); } .settings-pane .panel-title { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); } .settings-pane .panel-title > div { flex: 1 1 18rem; min-width: 0; } .settings-pane .panel-title h3 { margin: 0; font-size: var(--font-title-3); line-height: var(--leading-title-3); letter-spacing: var(--tracking-title-3); } .settings-pane .panel-title p { margin: 2px 0 0; color: var(--porruni-ink-soft); font-size: var(--font-footnote); line-height: var(--leading-footnote); letter-spacing: var(--tracking-footnote); } .settings-pane .panel-title > .subject-state { margin-top: 2px; } .settings-pane :is(.settings-group, .panel, .settings-fold-body, .settings-fold) > p, .settings-note { max-width: var(--reading-max); margin: 0 0 var(--space-3); color: var(--porruni-ink-soft); font-size: var(--font-footnote); line-height: var(--leading-footnote); letter-spacing: var(--tracking-footnote); } .settings-pane :is(.settings-group, .panel) > small { display: block; margin: var(--space-3) 0 0; color: var(--porruni-ink-soft); font-size: var(--font-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption); } .settings-pane :is(.settings-group, .panel, .settings-fold-body) > :last-child { margin-bottom: 0; } .settings-pane :is(.settings-group, .panel, .settings-fold-body) > [role=status] { margin: var(--space-3) 0 0; color: var(--porruni-ink); font-size: var(--font-footnote); font-weight: var(--weight-medium); line-height: var(--leading-footnote); } .settings-pane :is(.settings-group, .panel, .settings-fold-body) > [role=status]:empty { margin: 0; } /* sigue en el árbol para anunciar */ .settings-pane [role=alert], .settings-error { max-width: var(--reading-max); margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--porruni-warning-soft); color: var(--porruni-warning-ink); font-size: var(--font-footnote); line-height: var(--leading-footnote); } .settings-error { background: var(--porruni-danger-soft); color: var(--porruni-danger-ink); } .settings-pane code { padding: 1px 5px; border-radius: var(--radius-xs); background: var(--porruni-surface-soft); font-size: .92em; } .subject-state.failed { border-color: var(--porruni-danger-line); background: var(--porruni-danger-soft); color: var(--porruni-danger-ink); } /* bloqueado: error, con su palabra */ /* Campos, casillas de confirmación y acciones. La confirmación va antes de la acción que habilita. */ .settings-field { display: grid; gap: 6px; min-width: 0; margin: var(--space-3) 0 0; color: var(--porruni-ink); font-size: var(--font-footnote); font-weight: var(--weight-medium); line-height: var(--leading-footnote); } .settings-field :is(input, select) { width: 100%; font-weight: var(--weight-regular); } .settings-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-3); } .settings-pane .checkbox-label { display: flex; align-items: flex-start; gap: var(--space-3); max-width: var(--reading-max); margin: var(--space-4) 0 0; color: var(--porruni-ink); font-size: var(--font-footnote); font-weight: var(--weight-regular); line-height: var(--leading-footnote); cursor: pointer; } .settings-pane .checkbox-label > input { margin: 0; } .settings-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-4) 0 0; } .settings-actions img { flex: none; width: 16px; height: 16px; object-fit: contain; } .settings-pane > :is(.settings-group, .panel) > .settings-actions:first-of-type:not(:first-child) { margin-top: var(--space-4); } /* Filas de ajustes: el nombre y una línea de ayuda a la izquierda; el control o su estado, a la derecha. */ .settings-rows { display: grid; min-width: 0; } .settings-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-5); min-height: 3.5rem; padding: var(--space-3) 0; border-top: var(--hairline); } .settings-rows > .settings-row:last-child { padding-bottom: 0; } .settings-row-copy { display: grid; gap: 2px; min-width: 0; } .settings-row-copy :is(label, strong) { color: var(--porruni-ink); font-size: var(--font-callout); font-weight: var(--weight-strong); line-height: 1.35; } .settings-row-copy label { cursor: pointer; } .settings-row-copy small { color: var(--porruni-ink-soft); font-size: var(--font-caption); font-weight: var(--weight-regular); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption); } .settings-row select { width: auto; min-width: 11rem; } .settings-row-action { display: grid; justify-items: start; gap: var(--space-2); padding: 0 0 var(--space-4); } .settings-row-action small { color: var(--porruni-ink-soft); font-size: var(--font-caption); line-height: var(--leading-caption); } .settings-pane .settings-group > .settings-note { margin: var(--space-5) 0 0; font-size: var(--font-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption); } .settings-runi { flex: none; width: 64px; height: auto; margin: -6px -4px -10px 0; } /* Tema: tres miniaturas pintadas con los tokens de cada tema. La elegida, con un anillo del color de la acción y * su nombre resaltado; el botón de opción queda encima, invisible, y el foco se dibuja en la miniatura. */ .theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); min-width: 0; margin: 0; padding: 0; border: 0; } .theme-options label { position: relative; display: grid; justify-items: center; gap: var(--space-2); min-width: 0; cursor: pointer; } .theme-options input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .theme-sample { position: relative; display: block; width: 100%; height: 6.5rem; overflow: hidden; border: var(--hairline); border-radius: var(--radius-control); box-shadow: var(--elevation-1); transition: box-shadow var(--duration-fast), transform var(--spring-snappy) var(--ease-spring); } .theme-options label:hover .theme-sample { box-shadow: var(--elevation-2); } .theme-options label:active .theme-sample { transform: scale(var(--press-scale)); transition-duration: var(--duration-fast), var(--duration-press); } .theme-options :checked ~ .theme-sample { box-shadow: 0 0 0 2px var(--porruni-surface), 0 0 0 4px var(--porruni-action); } .theme-options :focus-visible ~ .theme-sample { outline: var(--focus-width) solid var(--porruni-focus); outline-offset: 6px; } .theme-name { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--radius-pill); color: var(--porruni-ink-soft); font-size: var(--font-footnote); font-weight: var(--weight-medium); line-height: 1.5; transition: background-color var(--duration-fast), color var(--duration-fast); } .theme-name .studio-icon { width: 15px; height: 15px; flex-basis: 15px; } .theme-options :checked ~ .theme-name { background: var(--porruni-action-soft); color: var(--porruni-action-ink); font-weight: var(--weight-strong); } .sample-ui { position: absolute; inset: 0; display: block; background: var(--porruni-bg); } .sample-light { color-scheme: light; } .sample-dark { color-scheme: dark; } .sample-system .sample-light { clip-path: inset(0 50% 0 0); } .sample-system .sample-dark { clip-path: inset(0 0 0 50%); } .sample-ui i { position: absolute; inset: 0 auto 0 0; width: 22%; background: var(--porruni-surface); border-right: 1px solid var(--porruni-line); } .sample-ui i::before { content: ""; position: absolute; top: 14%; left: 22%; right: 22%; height: 8%; border-radius: 4px; background: var(--porruni-action-soft); } .sample-ui em { position: absolute; top: 13%; left: 30%; right: 7%; height: 50%; border-radius: 8px; background: var(--porruni-surface); border: 1px solid var(--porruni-line); } .sample-ui em::before, .sample-ui em::after { content: ""; position: absolute; left: 38%; right: 12%; height: 11%; border-radius: 4px; background: var(--porruni-surface-soft); } .sample-ui em::before { top: 30%; } .sample-ui em::after { top: 54%; right: 30%; } .sample-ui s { position: absolute; top: 72%; left: 30%; width: 24%; height: 11%; border-radius: 6px; background: var(--porruni-action); } /* Desplegables dentro de una tarjeta (fuentes detectadas, privacidad, comprobación final): filas con chevron. */ .settings-fold { border-top: var(--hairline); } .settings-fold > summary h3 { display: inline; margin: 0; font: inherit; letter-spacing: inherit; } .fold-count { display: inline-grid; place-items: center; min-width: 20px; height: 18px; margin-left: 6px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--porruni-surface-soft); color: var(--porruni-ink-soft); font-size: var(--font-caption); font-variant-numeric: tabular-nums; vertical-align: 1px; } .settings-fold > :not(summary) { margin-left: 26px; } .settings-fold > p { margin-top: 0; } .settings-list { display: grid; gap: var(--space-1); max-width: var(--reading-max); margin: 0 0 var(--space-3); padding: 0; list-style: none; } .settings-list > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--porruni-surface-soft); color: var(--porruni-ink); font-size: var(--font-footnote); line-height: var(--leading-footnote); overflow-wrap: anywhere; } .settings-list > li > strong { flex: 1 1 100%; font-weight: var(--weight-strong); } .settings-list > li > :is(details, p) { flex: 1 1 100%; margin: 0; } .settings-list .secondary-button { min-height: var(--control-height-small); padding-block: 6px; } .settings-list .task-badges { margin: 0; } /* Privacidad: cuatro garantías con su marca, el detalle plegado y la única acción (borrar la sesión guardada). */ .safety-list { display: grid; margin: 0; padding: 0; list-style: none; } .safety-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: var(--space-3); padding: var(--space-3) 0; border-top: var(--hairline); } .safety-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--porruni-success-soft); color: var(--porruni-success-ink); } .safety-mark .studio-icon { width: 16px; height: 16px; flex-basis: 16px; } .safety-item strong { display: block; font-size: var(--font-callout); font-weight: var(--weight-strong); line-height: 1.35; } .safety-item p { max-width: var(--reading-max); margin: 2px 0 0; color: var(--porruni-ink-soft); font-size: var(--font-footnote); line-height: var(--leading-footnote); } .safety-settings > .settings-fold { margin-bottom: 0; } .session-row { padding-bottom: 0; } @media (max-width: 700px) { .settings-tabs [role=tab] { padding-inline: var(--space-2); } .settings-pane :is(.settings-group, .panel) { padding: var(--space-4); } .settings-row:has(select) { grid-template-columns: minmax(0, 1fr); } .settings-row select { width: 100%; } .settings-field-row { grid-template-columns: minmax(0, 1fr); } .theme-options { gap: var(--space-2); } .theme-sample { height: 4.5rem; } .theme-name { padding-inline: 6px; font-size: var(--font-caption); } .settings-runi { width: 48px; } } /* ── Adaptación web ──────────────────────────────────────────────────────────────────────────── */ /* Marca de Runi en las miniaturas de tema: SVG en línea en vez de background url(). */ .sample-ui b { position: absolute; z-index: 1; top: 22%; left: 33%; width: 22%; height: 34%; display: grid; place-items: center; } .sample-ui b .aj-sample-mark { width: 100%; height: 100%; } /* Plegables: chevron con bordes (la CSP y el servidor no sirven las máscaras del escritorio). */ .settings-fold > summary { position: relative; padding: var(--space-3) 0 var(--space-3) 26px; list-style: none; color: var(--porruni-action-ink); font-size: var(--font-footnote); font-weight: var(--weight-strong); line-height: var(--leading-footnote); cursor: pointer; } .settings-fold > summary::-webkit-details-marker { display: none; } .settings-fold > summary::before { content: ""; position: absolute; top: 50%; left: 6px; width: 7px; height: 7px; margin-top: -5px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--spring-snappy) var(--ease-spring); } .settings-fold[open] > summary::before { transform: rotate(45deg); } /* Iconos de las pestañas: siempre del color del texto (el icono user.svg trae un trazo fijo). */ .settings-tabs svg.studio-icon * { stroke: currentColor; } /* Contenedor de la sección: los grupos se apilan como en el escritorio. */ .aj-view .settings-pane:focus { outline: none; } .aj-view .settings-slot > .web-state { min-width: 0; } .aj-title-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .aj-form { display: grid; gap: var(--space-4); max-width: 32rem; min-width: 0; } .aj-form .settings-actions { margin: 0; } .aj-form .web-form-error { order: -1; } .aj-status { margin: 0; color: var(--porruni-ink); font-size: var(--font-footnote); font-weight: var(--weight-medium); line-height: var(--leading-footnote); } .aj-status:empty { display: none; } .aj-status:focus, .aj-status:focus-visible { outline: none; } .aj-label { color: var(--porruni-ink); font-size: var(--font-footnote); font-weight: var(--weight-strong); } .aj-facts { margin-bottom: var(--space-4); } .aj-facts .settings-row:first-child { border-top: 0; padding-top: 0; } .aj-row-value { display: flex; justify-content: flex-end; min-width: 0; text-align: right; } .aj-inline { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); min-width: 0; } .aj-break { overflow-wrap: anywhere; } .aj-muted { color: var(--porruni-ink-soft); font-size: var(--font-caption); } .aj-lead { margin: 0; } .aj-courses > li > strong { flex: 1 1 auto; } .aj-sessions > li { justify-content: space-between; } .aj-session-copy { display: grid; gap: 2px; flex: 1 1 16rem; min-width: 0; } .aj-session-copy strong { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .aj-session-copy small { color: var(--porruni-ink-soft); font-size: var(--font-caption); line-height: var(--leading-caption); } .aj-feedback > li { display: grid; gap: var(--space-1); } .aj-feedback-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); } .aj-feedback-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .aj-connector .web-state { margin: 0; } .aj-connector .web-state + .web-state { margin-top: var(--space-3); } .settings-row .studio-segments { flex-wrap: wrap; justify-content: flex-end; } /* Movimiento: sin transiciones con la preferencia del sistema o la del perfil. */ @media (prefers-reduced-motion: reduce) { .settings-tabs [role=tab], .theme-sample, .theme-name, .settings-fold > summary::before { transition: none; } } html[data-reduce-motion="true"] :is(.settings-tabs [role=tab], .theme-sample, .theme-name, .settings-fold > summary::before) { transition: none; } @media (max-width: 700px) { .aj-row-value, .aj-inline { justify-content: flex-start; text-align: left; } .settings-row:has(.aj-row-value), .settings-row:has(.studio-segments) { grid-template-columns: minmax(0, 1fr); } .settings-row .studio-segments { justify-content: flex-start; } .aj-form { max-width: none; } .aj-sessions > li > .secondary-button { width: 100%; } } /* ── css/90-web.css ── */ /* * Porruni web · adaptaciones del diseño de escritorio a la app web (F2). * Las hojas 00–10 son copias del escritorio (brand, system, runi, shell, inicio). Aquí solo: * iconos SVG en línea en vez de máscaras con url(), enlaces en la navegación, logo B claro/oscuro, * pantallas de acceso, cajas de estado, campos, secciones, diálogo y etiquetas. Solo tokens de marca. */ /* Iconos Lucide en línea: mismo tamaño que .studio-icon pero trazados, sin máscara ni fondo. */ .studio-icon.is-svg { background: none; -webkit-mask: none; mask: none; fill: none; stroke: currentColor; } .studio-icon.is-missing { background: none; } /* El selector chevron del escritorio usa un data: URI que la CSP web no permite: flecha con gradientes. */ select { background-image: linear-gradient(45deg, transparent 50%, var(--porruni-ink-soft) 50%), linear-gradient(135deg, var(--porruni-ink-soft) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } /* Navegación con enlaces (rutas profundas) con el aspecto de los botones del escritorio. */ a.nav-item, a.profile, a.brand-home, a.mobile-masthead { text-decoration: none; color: inherit; } a.nav-item { color: var(--porruni-ink-soft); } a.nav-item.active { color: var(--porruni-ink); } .brand-home { display: inline-flex; padding: 2px; border-radius: var(--radius-control); } .porruni-logo-b { display: inline-flex; align-items: center; line-height: 0; } .porruni-logo-b svg { display: block; width: auto; height: 34px; } .mobile-masthead .porruni-logo-b svg { height: 28px; } .porruni-logo-b-dark { display: none !important; } html[data-theme="dark"] .porruni-logo-b-light { display: none !important; } html[data-theme="dark"] .porruni-logo-b-dark { display: block !important; } .profile .avatar::before { content: none; -webkit-mask: none; mask: none; } .profile .avatar svg { width: 20px; height: 20px; } .profile .avatar svg * { stroke: var(--porruni-coral-ink); } /* Arranque y avisos globales */ .boot-screen { display: grid; place-items: center; min-height: 100dvh; color: var(--porruni-ink-soft); } .global-notices { display: grid; gap: var(--space-3); } .global-notices:not(:empty) { margin: var(--space-2) 0 var(--space-4); } .view-root { display: grid; gap: var(--stack-gap, var(--space-6)); min-width: 0; } .workspace a:not([class]) { color: var(--porruni-action-ink); } /* ── Acceso ─────────────────────────────────────────────────────────────────────────────────── */ .auth-shell { min-height: 100dvh; padding: var(--space-6) var(--gutter) var(--space-9); background: var(--porruni-bg); } .auth-brand { max-width: 64rem; margin: 0 auto var(--space-7); } .auth-logo { display: inline-flex; } .auth-logo .porruni-logo-b svg { height: 40px; } .auth-grid { display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: var(--space-8); align-items: center; max-width: 64rem; margin: 0 auto; } .auth-card { display: grid; gap: var(--space-4); padding: var(--space-7); border: var(--hairline); border-radius: var(--radius-sheet, var(--radius-card)); background: var(--porruni-surface); box-shadow: var(--porruni-shadow-1); } .auth-card h1 { margin: 0; font-family: var(--porruni-font-display); font-size: var(--font-title-1); line-height: var(--leading-title-1); } .auth-card h1:focus { outline: none; } .auth-lead { margin: 0; color: var(--porruni-ink-soft); font-size: var(--font-callout); line-height: var(--leading-callout); } .auth-form { display: grid; gap: var(--space-4); } .auth-form .primary-button { width: 100%; min-height: 44px; justify-content: center; } .auth-links { margin: 0; color: var(--porruni-ink-soft); font-size: var(--font-footnote); } .auth-links a, .auth-card p a { color: var(--porruni-action-ink); font-weight: var(--weight-strong); } .auth-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .auth-side { display: grid; justify-items: center; gap: var(--space-4); text-align: center; } .auth-side-copy { max-width: 22rem; margin: 0; color: var(--porruni-ink-soft); font-size: var(--font-callout); line-height: var(--leading-callout); } @media (max-width: 800px) { .auth-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .auth-side { order: -1; } .auth-side .runi { --runi-size: 96px !important; } .auth-side-copy { font-size: var(--font-footnote); } .auth-card { padding: var(--space-5); } .auth-brand { margin-bottom: var(--space-4); } } /* ── Campos y formularios ───────────────────────────────────────────────────────────────────── */ .web-field { display: grid; gap: var(--space-1); min-width: 0; } .web-field label { color: var(--porruni-ink); font-size: var(--font-footnote); font-weight: var(--weight-strong); } .web-field input:not([type=checkbox]):not([type=radio]), .web-field select, .web-field textarea { width: 100%; } .web-hint { margin: 0; color: var(--porruni-ink-soft); font-size: var(--font-caption); line-height: var(--leading-caption); } .web-form-error { margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--porruni-danger-line); border-radius: var(--radius-control); background: var(--porruni-danger-soft); color: var(--porruni-danger-ink); font-size: var(--font-footnote); font-weight: var(--weight-strong); } .web-form-error[hidden] { display: none; } .danger-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px; padding: 8px 16px; border: 1px solid var(--porruni-danger-line); border-radius: var(--radius-pill); background: var(--porruni-danger-soft); color: var(--porruni-danger-ink); font-weight: var(--weight-strong); } .danger-button:hover { background: color-mix(in srgb, var(--porruni-danger-soft) 70%, var(--porruni-danger-line)); } .primary-button, .secondary-button, .quiet-button, .danger-button { text-decoration: none; } [aria-busy="true"] { cursor: progress; } /* ── Cajas de estado: carga, vacío, error, bloqueo, pendiente ─────────────────────────────────── */ .web-state { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-4); border: var(--hairline); border-radius: var(--radius-card); background: var(--porruni-surface); } .web-state-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--porruni-surface-soft); color: var(--porruni-ink-soft); } .web-state-runi { display: grid; place-items: center; } .web-state-copy { display: grid; gap: 2px; min-width: 0; } .web-state-copy strong { color: var(--porruni-ink); font-size: var(--font-headline); line-height: var(--leading-headline); } .web-state-copy p { margin: 0; color: var(--porruni-ink-soft); font-size: var(--font-body); line-height: var(--leading-body); } .web-state-copy small { color: var(--porruni-ink-soft); font-size: var(--font-caption); } .web-state-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); } .web-state.is-empty { background: var(--porruni-mint-soft); border-color: transparent; } .web-state.is-empty .web-state-icon { background: var(--porruni-surface); color: var(--porruni-mint-ink); } .web-state.is-warning { background: var(--porruni-warning-soft); border-color: var(--porruni-warning-line); } .web-state.is-warning .web-state-icon { color: var(--porruni-warning-ink); background: var(--porruni-surface); } .web-state.is-danger { background: var(--porruni-danger-soft); border-color: var(--porruni-danger-line); } .web-state.is-danger .web-state-icon { color: var(--porruni-danger-ink); background: var(--porruni-surface); } .web-state.is-pending, .web-state.is-blocked { background: var(--porruni-provisional-soft); border-color: var(--porruni-provisional-line); } .web-state.is-pending .web-state-icon, .web-state.is-blocked .web-state-icon { color: var(--porruni-provisional-ink); background: var(--porruni-surface); } .web-state.is-success { background: var(--porruni-success-soft); border-color: var(--porruni-success-line); } .web-state.is-loading .web-state-icon { color: var(--porruni-ink-soft); } .web-state.is-loading .web-state-copy strong { font-weight: var(--weight-medium); color: var(--porruni-ink-soft); } /* ── Secciones y tarjetas dentro de un área ────────────────────────────────────────────────── */ .web-section { display: grid; gap: var(--space-4); min-width: 0; padding: var(--card-pad, var(--space-6)); border: var(--hairline); border-radius: var(--radius-card); background: var(--porruni-surface); } .web-section-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); } .web-section-head h2 { margin: 0; font-family: var(--porruni-font-display); font-size: var(--font-title-3); line-height: var(--leading-title-3); } .web-section-desc { margin: 2px 0 0; color: var(--porruni-ink-soft); font-size: var(--font-footnote); } .web-section-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .web-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border: 1px solid var(--porruni-line); border-radius: var(--radius-pill); background: var(--porruni-surface-soft); color: var(--porruni-ink-soft); font-size: var(--font-caption); font-weight: var(--weight-strong); line-height: 1.5; white-space: nowrap; } .web-pill.is-success { border-color: var(--porruni-success-line); background: var(--porruni-success-soft); color: var(--porruni-success-ink); } .web-pill.is-warning { border-color: var(--porruni-warning-line); background: var(--porruni-warning-soft); color: var(--porruni-warning-ink); } .web-pill.is-danger { border-color: var(--porruni-danger-line); background: var(--porruni-danger-soft); color: var(--porruni-danger-ink); } .web-pill.is-provisional { border-color: var(--porruni-provisional-line); background: var(--porruni-provisional-soft); color: var(--porruni-provisional-ink); } /* ── Diálogo de confirmación ───────────────────────────────────────────────────────────────── */ .web-dialog form { display: grid; gap: var(--space-4); } .web-dialog header { margin-bottom: 0; } .web-dialog-body { margin: 0; color: var(--porruni-ink); line-height: var(--leading-body); } .web-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); } /* Aviso flotante: tono por palabra además de color. */ .toast[data-tone="danger"] { border-color: var(--porruni-danger-line); } .toast[data-tone="success"] { border-color: var(--porruni-success-line); } .toast { padding-left: var(--space-4); } /* Foco visible en todo control propio. */ :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--porruni-focus); outline-offset: 2px; } #view-title:focus, #workspace-main:focus, #auth-main:focus { outline: none; } @media (max-width: 700px) { .web-section { padding: var(--space-4); } .web-state { grid-template-columns: minmax(0, 1fr); } .web-state-icon, .web-state-runi { justify-self: start; } } /* ── css/91-admin.css ── */ /* * Porruni web · Administración (F2 · SA-D). No existe en el escritorio: se construye con los componentes de Ajustes * (pestañas .settings-tabs, grupos .settings-group, filas, segmentados e interruptores del sistema) y solo tokens de * marca. Más ancha que Ajustes para las tablas; a ≤ 700 px las tablas pasan a fichas apiladas sin desbordar. * Nombre 91- para no coincidir con 90-web.css en el orden del empaquetado. */ .adm-view { display: grid; gap: var(--space-5); min-width: 0; max-width: 72rem; } .adm-view > .settings-tabs { max-width: 100%; } .adm-pane:focus { outline: none; } .adm-gate { max-width: var(--reading-max); } .adm-gate-form .web-field input { max-width: 12rem; font-variant-numeric: tabular-nums; letter-spacing: .18em; } .adm-privacy { margin: 0; max-width: var(--reading-max); color: var(--porruni-ink-soft); font-size: var(--font-footnote); } .adm-title-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .adm-form { display: grid; gap: var(--space-4); min-width: 0; max-width: 36rem; } .adm-form h4, .adm-circle h4 { margin: 0; font-size: var(--font-headline); line-height: var(--leading-headline); } .adm-form .settings-actions { margin: 0; } .adm-form .web-form-error { order: -1; } .adm-suspend, .adm-grid-form { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--hairline); } .adm-status { margin: var(--space-3) 0 0; color: var(--porruni-ink); font-size: var(--font-footnote); font-weight: var(--weight-medium); line-height: var(--leading-footnote); } .adm-status:empty { display: none; } .adm-muted { color: var(--porruni-ink-soft); font-size: var(--font-caption); } .adm-break { overflow-wrap: anywhere; } .adm-back { justify-self: start; } .adm-group > .web-state + * { margin-top: var(--space-4); } .adm-group > .web-state { margin-bottom: var(--space-4); } /* Búsqueda y formularios en línea: campo(s) y botón alineados abajo. */ .adm-search, .adm-inline-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; align-items: end; gap: var(--space-3); min-width: 0; margin: 0 0 var(--space-4); } .adm-inline-form { grid-template-columns: minmax(0, 1fr) auto; max-width: 36rem; margin: var(--space-4) 0 0; } .adm-search-go { display: flex; } .adm-count { margin: 0 0 var(--space-2); color: var(--porruni-ink-soft); font-size: var(--font-footnote); } .adm-pager { justify-content: flex-end; } /* Tablas semánticas. */ .adm-table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; } .adm-table { width: 100%; border-collapse: collapse; font-size: var(--font-footnote); line-height: var(--leading-footnote); } .adm-table th, .adm-table td { padding: var(--space-2) var(--space-3); border-top: var(--hairline); text-align: left; vertical-align: middle; } .adm-table thead th { border-top: 0; color: var(--porruni-ink-soft); font-size: var(--font-caption); font-weight: var(--weight-strong); letter-spacing: var(--tracking-caption); white-space: nowrap; } .adm-table tbody th { font-weight: var(--weight-strong); } .adm-table code { padding: 1px 5px; border-radius: var(--radius-xs); background: var(--porruni-surface-soft); font-size: .92em; } .adm-table .secondary-button { min-height: var(--control-height-small); padding-block: 6px; } .adm-who { display: grid; gap: 2px; min-width: 0; } .adm-who small { color: var(--porruni-ink-soft); font-weight: var(--weight-regular); } /* Datos de una cuenta y métricas. */ .adm-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-3) var(--space-5); margin: 0 0 var(--space-4); } .adm-facts > div { display: grid; gap: 2px; min-width: 0; padding-top: var(--space-2); border-top: var(--hairline); } .adm-facts dt { color: var(--porruni-ink-soft); font-size: var(--font-caption); font-weight: var(--weight-strong); letter-spacing: var(--tracking-caption); } .adm-facts dd { margin: 0; color: var(--porruni-ink); font-size: var(--font-footnote); overflow-wrap: anywhere; } .adm-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-3); margin: 0; } .adm-metric { display: grid; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-control); background: var(--porruni-surface-soft); } .adm-metric dt { color: var(--porruni-ink-soft); font-size: var(--font-caption); font-weight: var(--weight-strong); } .adm-metric dd { display: grid; gap: 2px; margin: 0; } .adm-metric strong { font-family: var(--porruni-font-display); font-size: var(--font-title-2, var(--font-title-3)); font-variant-numeric: tabular-nums; line-height: 1.1; } .adm-metric small { color: var(--porruni-ink-soft); font-size: var(--font-caption); } .adm-enrolled > li > strong { flex: 1 1 auto; } .adm-events { display: grid; margin: 0; padding: 0; list-style: none; } .adm-events > li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); padding: var(--space-2) 0; border-top: var(--hairline); font-size: var(--font-footnote); } .adm-danger { border-color: var(--porruni-danger-line); } /* Círculo: un recuadro por grupo. */ .adm-circle { display: grid; gap: var(--space-2); min-width: 0; margin-top: var(--space-4); padding: var(--space-4); border: var(--hairline); border-radius: var(--radius-control); } .adm-circle .settings-list { margin: 0; } .adm-circle .settings-list > li { justify-content: space-between; } .adm-circle .adm-inline-form { margin-top: var(--space-2); } /* Opiniones. */ .adm-feedback { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; } .adm-feedback > li { display: grid; gap: var(--space-2); min-width: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--porruni-surface-soft); } .adm-feedback-head, .adm-feedback-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); } .adm-feedback-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--font-footnote); } .adm-feedback-status { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-footnote); font-weight: var(--weight-strong); } .adm-feedback-status select { width: auto; min-width: 9rem; min-height: var(--control-height-small); padding-block: 4px; } .adm-filter { flex-wrap: wrap; } .adm-recovery { margin-top: var(--space-4); } .adm-recovery > .adm-form { margin-top: var(--space-2); } @media (prefers-reduced-motion: reduce) { .adm-view * { transition: none; } } html[data-reduce-motion="true"] .adm-view * { transition: none; } @media (max-width: 700px) { .adm-search, .adm-inline-form { grid-template-columns: minmax(0, 1fr); } .adm-search-go > button { width: 100%; } .adm-pager { justify-content: stretch; } /* Tablas → fichas: cada fila es una tarjeta y cada celda lleva su encabezado. */ .adm-table-wrap { overflow: visible; } .adm-table, .adm-table tbody, .adm-table tr, .adm-table th, .adm-table td { display: block; width: 100%; } .adm-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .adm-table tbody tr { margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--porruni-surface-soft); } .adm-table tbody :is(th, td) { display: grid; grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr); gap: var(--space-2); padding: var(--space-1) 0; border-top: 0; overflow-wrap: anywhere; } .adm-table tbody :is(th, td)::before { content: attr(data-label); color: var(--porruni-ink-soft); font-size: var(--font-caption); font-weight: var(--weight-strong); } .adm-table tbody :is(th, td) > * { justify-self: start; } .adm-facts { grid-template-columns: minmax(0, 1fr); } .adm-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Grupos reales del círculo (GET /api/admin/circle/groups): miembros con nombre y correo. */ .adm-circle-empty { margin: 0; } .adm-circle .settings-list > li > .adm-who { flex: 1 1 12rem; } /* Medición mínima (F1 f3a446c): estado del cupo de correo y notas de definición. */ .adm-mail-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; } .adm-replies, .adm-definitions { margin: 0; max-width: var(--reading-max); overflow-wrap: anywhere; }