/* Securata · el panel Dentro de Telegram, los colores son los del tema de quien lo abre: el script de Telegram pone sus --tg-theme-* en y aquí se traducen a variables propias. Fuera de Telegram (o en clientes viejos que no mandan alguno) salen los de respaldo, claros u oscuros según el sistema. panel.js pone data-theme con el esquema de Telegram, para los colores que Telegram no da. Las plantillas no llevan style="…": la CSP no lo deja. */ /* ---- Colores ------------------------------------------------------------ */ :root, [data-theme="light"] { color-scheme: light; --fb-bg: #ffffff; --fb-secondary-bg: #f1f2f6; --fb-text: #000000; --fb-hint: #63676e; --fb-link: #1665c2; --fb-button: #1f6fcf; --fb-separator: #dadce1; --fb-destructive: #c22d26; --ok: #137337; --warn: #a05200; --shadow: rgba(16, 24, 40, 0.14); --chat-bg: #d9e4d0; --inline-button: rgba(38, 64, 40, 0.66); --tint-amount: 14%; --tint-destructive-amount: 14%; --sheet-lift: 0%; --card-lift: 0%; --name-0: #c74b45; --name-1: #a76320; --name-2: #845adf; --name-3: #30853e; --name-4: #197f8c; --name-5: #2977bc; --name-6: #ab4dbb; } [data-theme="dark"] { color-scheme: dark; --fb-bg: #1c1c1e; --fb-secondary-bg: #000000; --fb-text: #ffffff; --fb-hint: #98989f; --fb-link: #4ea1ff; --fb-button: #2f74d0; --fb-separator: #38383b; --fb-destructive: #ff7b73; --ok: #3ccf75; --warn: #ffb340; --shadow: rgba(0, 0, 0, 0.5); --chat-bg: #17212b; --inline-button: rgba(255, 255, 255, 0.14); --tint-amount: 26%; --tint-destructive-amount: 20%; --sheet-lift: 100%; --card-lift: 7%; --name-0: #e7726c; --name-1: #d9812a; --name-2: #a481ed; --name-3: #46a857; --name-4: #28a3b2; --name-5: #4c9add; --name-6: #cc72db; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --fb-bg: #1c1c1e; --fb-secondary-bg: #000000; --fb-text: #ffffff; --fb-hint: #98989f; --fb-link: #4ea1ff; --fb-button: #2f74d0; --fb-separator: #38383b; --fb-destructive: #ff7b73; --ok: #3ccf75; --warn: #ffb340; --shadow: rgba(0, 0, 0, 0.5); --chat-bg: #17212b; --inline-button: rgba(255, 255, 255, 0.14); --tint-amount: 26%; --tint-destructive-amount: 20%; --sheet-lift: 100%; --card-lift: 7%; --name-0: #e7726c; --name-1: #d9812a; --name-2: #a481ed; --name-3: #46a857; --name-4: #28a3b2; --name-5: #4c9add; --name-6: #cc72db; } } /* Se declaran también en cada [data-theme]: una variable que usa otras se calcula donde se declara, y /panel/estilo pinta los dos temas a la vez. */ :root, [data-theme] { --bg: var(--tg-theme-bg-color, var(--fb-bg)); --secondary-bg: var(--tg-theme-secondary-bg-color, var(--fb-secondary-bg)); --section-bg: var(--tg-theme-section-bg-color, var(--bg)); --text: var(--tg-theme-text-color, var(--fb-text)); --hint: var(--tg-theme-hint-color, var(--fb-hint)); --subtitle: var(--tg-theme-subtitle-text-color, var(--hint)); --section-header: var(--tg-theme-section-header-text-color, var(--hint)); --link: var(--tg-theme-link-color, var(--fb-link)); --button: var(--tg-theme-button-color, var(--fb-button)); --button-text: var(--tg-theme-button-text-color, #ffffff); --separator: var(--tg-theme-section-separator-color, var(--fb-separator)); --destructive: var(--tg-theme-destructive-text-color, var(--fb-destructive)); /* Opacos, mezclados con el fondo de sección: sobre el negro del tema oscuro, un tinte transparente no se vería. El rojo lleva menos tinte que el azul para que su texto siga pasando el contraste AA. */ --tint: color-mix(in srgb, var(--button) var(--tint-amount), var(--section-bg)); --tint-destructive: color-mix(in srgb, var(--destructive) var(--tint-destructive-amount), var(--section-bg)); /* En oscuro, la hoja sube un tono sobre la página, y sus grupos otro más. */ --sheet-bg: color-mix(in srgb, var(--section-bg) var(--sheet-lift), var(--secondary-bg)); --sheet-section-bg: color-mix(in srgb, #ffffff var(--card-lift), var(--section-bg)); --fill: color-mix(in srgb, var(--hint) 16%, transparent); --fill-strong: color-mix(in srgb, var(--hint) 34%, transparent); --pressed: color-mix(in srgb, var(--text) 7%, transparent); --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); background: var(--secondary-bg); color: var(--text); } /* ---- Base ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background: var(--secondary-bg); color: var(--text); font: 16px/1.35 var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } h1, h2, p { margin: 0; } button, input, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } h1:focus { outline: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .glyph { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* ---- Pantalla ------------------------------------------------------------- */ .app { max-width: 640px; margin: 0 auto; padding: 8px 16px calc(32px + env(safe-area-inset-bottom)); } .app--forward { animation: enter-forward 200ms var(--ease-out); } .app--back { animation: enter-back 200ms var(--ease-out); } @keyframes enter-forward { from { opacity: 0; transform: translateX(28px); } } @keyframes enter-back { from { opacity: 0; transform: translateX(-28px); } } .header { padding: 16px 4px 20px; } .header__title { font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; } .header__subtitle { margin-top: 4px; color: var(--subtitle); font-size: 15px; } /* Con imagen arriba: la mascota en «Tus grupos», el avatar en un conjunto o en la ficha de una persona. Todas con las mismas medidas. */ .hero { display: grid; justify-items: center; padding: 18px 16px 24px; text-align: center; } .hero > .mascot, .hero > .avatar { width: 88px; height: 88px; margin-bottom: 14px; } .hero > .avatar { font-size: 32px; letter-spacing: 0.01em; } .hero__title { max-width: 100%; font-size: 23px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; text-wrap: balance; } .hero__text { max-width: 34ch; margin-top: 4px; color: var(--hint); font-size: 15px; text-wrap: balance; } /* ---- Mascota -------------------------------------------------------------- */ .mascot { display: block; aspect-ratio: 1; clip-path: circle(50%); } .mascot svg { display: block; width: 100%; height: 100%; } /* Un parpadeo cada pocos segundos: lo único que se mueve sin que nadie toque nada. */ .mascot .mascot-eyes { transform-box: fill-box; transform-origin: center; animation: blink 5.5s 1.4s infinite; } @keyframes blink { 0%, 93%, 100% { transform: none; } 95.5% { transform: scaleY(0.12); } } /* ---- Listas agrupadas ----------------------------------------------------- */ .group { margin-bottom: 28px; } .group__title { margin: 0 16px 7px; color: var(--section-header); font-size: 15px; font-weight: 500; line-height: 1.2; font-variant-caps: all-small-caps; letter-spacing: 0.035em; } .group__body { overflow: hidden; border-radius: 12px; background: var(--section-bg); } .group__footer { margin: 7px 16px 0; color: var(--hint); font-size: 13px; line-height: 1.4; text-wrap: pretty; } /* Las listas de personas llevan los avatares a la medida de Telegram; los grupos y los conjuntos, a la de los iconos. */ .group--people .avatar { width: 40px; height: 40px; font-size: 15px; } .group--people .row:has(> .avatar) { --inset: 68px; } /* ---- Filas ---------------------------------------------------------------- */ .row { --inset: 16px; position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; margin: 0; padding: 10px 16px; border: 0; background: var(--section-bg); color: inherit; text-align: left; text-decoration: none; } .row:has(> .row__icon), .row:has(> .row__link > .row__icon) { --inset: 58px; } .row:has(> .avatar), .row:has(> .row__link > .avatar) { --inset: 60px; } /* La raya entre filas empieza donde empieza el texto, como en Telegram. */ .row + .row::before { content: ""; position: absolute; top: 0; right: 0; left: var(--inset); border-top: 0.5px solid var(--separator); } .row--action { cursor: pointer; transition: background-color 120ms; } .row--action:active, .row__link:active { background-color: var(--pressed); } @media (hover: hover) { .row--action:hover, a.row__link:hover { background-color: var(--pressed); } } .row:focus-visible, .row__link:focus-visible, .row:has(.switch:focus-visible) { outline: 2px solid var(--link); outline-offset: -2px; } .row__icon { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #ffffff; } .row__icon .glyph { width: 19px; height: 19px; stroke-width: 2.1; } .row__icon--blue { background: #3e8ef7; } .row__icon--orange { background: #f39c35; } .row__icon--green { background: #3fb65b; } .row__icon--red { background: #f0524c; } .row__icon--violet { background: #8e6cf0; } .row__icon--teal { background: #35b3c4; } .row__icon--grey { background: #8e8e93; } .row__main { flex: 1; min-width: 0; } .row__label { display: block; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; } .row__hint { display: block; margin-top: 2px; color: var(--subtitle); font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; } .row__hint--error { color: var(--destructive); } .row__value { flex: none; max-width: 45%; overflow: hidden; color: var(--hint); text-overflow: ellipsis; white-space: nowrap; } .row__end { display: flex; flex: none; align-items: center; gap: 8px; } /* Un {% call %} que no pinta nada (una pastilla que no toca) no deja hueco. */ .row__end:not(:has(*)) { display: none; } .row__chevron { flex: none; margin-right: -6px; color: var(--hint); opacity: 0.55; } .row__chevron .glyph { width: 18px; height: 18px; stroke-width: 2.4; } .row--link .row__label { color: var(--link); } .row--destructive .row__label { color: var(--destructive); } .row--stacked { display: block; } /* Un no se deja colocar como un bloque normal si no flota. */ .row--stacked > legend { float: left; width: 100%; margin-bottom: 10px; padding: 0; } .row--stacked > legend + * { clear: both; } /* ---- Filas que se arrastran ----------------------------------------------- */ .row--sortable { padding: 0; gap: 0; } .row__link { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; min-height: 48px; padding: 10px 4px 10px 16px; color: inherit; text-decoration: none; } .row__handle { display: grid; flex: none; place-items: center; width: 48px; align-self: stretch; border: 0; background: none; color: var(--hint); cursor: grab; touch-action: none; } .row__handle:active { cursor: grabbing; } .row__handle:focus-visible { outline-offset: -4px; } .row__handle .glyph { width: 20px; height: 20px; } .row--chosen { background: var(--section-bg); } .row--drag { border-radius: 12px; box-shadow: 0 10px 28px var(--shadow); } .row--drag::before { display: none; } .row--ghost { opacity: 0.35; } /* ---- Interruptor ---------------------------------------------------------- */ .switch { position: relative; flex: none; width: 51px; height: 31px; margin: 0; border-radius: 16px; background: var(--fill-strong); cursor: pointer; transition: background-color 200ms; appearance: none; } .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #ffffff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.05); transition: transform 220ms var(--ease-out); } .switch:checked { background: var(--button); } .switch:checked::after { transform: translateX(20px); } .switch:disabled { cursor: default; opacity: 0.45; } .switch:focus-visible { outline: none; } /* ---- Control segmentado --------------------------------------------------- */ .segmented { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; padding: 2px; border-radius: 10px; background: var(--fill); } .segmented__option { position: relative; min-width: 0; } /* El radio sigue ahí, invisible encima: así valen las flechas del teclado. */ .segmented__input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; cursor: pointer; opacity: 0; } .segmented__label { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 8px; overflow: hidden; border-radius: 8px; font-size: 15px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; transition: background-color 180ms, box-shadow 180ms; } .segmented__input:checked + .segmented__label { background: var(--section-bg); box-shadow: 0 1px 4px var(--shadow), 0 0 0 0.5px rgba(0, 0, 0, 0.04); font-weight: 600; } /* En oscuro, el fondo de la sección no destaca sobre el relleno. */ [data-theme="dark"] .segmented__input:checked + .segmented__label { background: var(--fill-strong); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .segmented__input:checked + .segmented__label { background: var(--fill-strong); } } .segmented__input:focus-visible + .segmented__label { outline: 2px solid var(--link); outline-offset: 1px; } /* ---- Opciones con explicación --------------------------------------------- */ .choices, .fields { min-width: 0; margin: 0; padding: 0; border: 0; } /* El radio sigue ahí, invisible: así valen las flechas del teclado y el lector de pantalla dice cuál está elegida. */ .choice__input { position: absolute; opacity: 0; pointer-events: none; } .choice__mark { flex: none; color: var(--link); visibility: hidden; } .choice__mark .glyph { width: 22px; height: 22px; stroke-width: 2.4; } .choice__input:checked ~ .choice__mark { visibility: visible; } .choice:has(.choice__input:focus-visible) { outline: 2px solid var(--link); outline-offset: -2px; } .choice:has(.choice__input:disabled) { cursor: default; } /* Una opción que ahora no se puede elegir: su explicación dice por qué. */ .choice--blocked .row__label { color: var(--hint); } .choice--blocked .row__hint { color: var(--warn); } /* ---- Formularios en solo lectura ------------------------------------------ */ /* Se lee todo igual de bien: solo se va lo que invita a tocar. */ .fields:disabled .row--action, .fields:disabled .segmented__input { cursor: default; } .fields:disabled .row--action:hover, .fields:disabled .row--action:active { background-color: var(--section-bg); } .fields:disabled .field__input { color: var(--text); -webkit-text-fill-color: var(--text); opacity: 1; } /* El número se queda solo, como el valor de cualquier otra fila. */ .fields:disabled .stepper { background: none; } .fields:disabled .stepper__button { display: none; } .fields:disabled .stepper__input { width: auto; max-width: 6ch; color: var(--hint); -webkit-text-fill-color: var(--hint); font-size: 16px; font-weight: 400; text-align: right; opacity: 1; } .fields:disabled .field__tools { display: none; } /* ---- Selector numérico ---------------------------------------------------- */ .row:has(> .stepper) { padding-block: 6px; } .stepper { display: inline-flex; flex: none; align-items: center; border-radius: 10px; background: var(--fill); } .stepper__button { position: relative; display: grid; place-items: center; width: 40px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--link); cursor: pointer; } /* 36 px a la vista y 44 al dedo. */ .stepper__button::after { content: ""; position: absolute; inset: -4px 0; } .stepper__button:active { background: var(--pressed); } .stepper__button:disabled { color: var(--hint); cursor: default; opacity: 0.5; } .stepper__button .glyph { width: 20px; height: 20px; stroke-width: 2.4; } .stepper__input { width: 3.2ch; padding: 0; border: 0; background: none; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; appearance: textfield; } .stepper__input::-webkit-inner-spin-button, .stepper__input::-webkit-outer-spin-button { margin: 0; appearance: none; } .stepper__input:focus-visible { outline-offset: 0; border-radius: 4px; } /* ---- Abreviaturas --------------------------------------------------------- */ .abbr { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 24px; padding: 0 7px; border-radius: 6px; background: var(--tint); color: var(--link); font: 600 13px/1 var(--mono); letter-spacing: 0.02em; white-space: pre; } .abbr--error { background: var(--tint-destructive); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--destructive) 45%, transparent); color: var(--destructive); } /* ---- Campos de texto ------------------------------------------------------ */ .field { position: relative; display: block; padding: 10px 16px 11px; background: var(--section-bg); } .field + .field::before, .row + .field::before, .field + .row::before { content: ""; position: absolute; top: 0; right: 0; left: 16px; border-top: 0.5px solid var(--separator); } .field__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 3px; } .field__label { color: var(--hint); font-size: 13px; font-weight: 500; } /* 16 px: con menos, iOS amplía la página al escribir. */ .field__input { display: block; width: 100%; padding: 2px 0; border: 0; background: none; font-size: 16px; line-height: 1.4; outline: none; resize: none; } .field__input--multiline { min-height: 2.8em; field-sizing: content; } /* Sin rebajar la pista: hay ejemplos, como «30m, 2h, 1d», que hay que poder leer. */ .field__input::placeholder { color: var(--hint); opacity: 1; } .field:focus-within .field__label { color: var(--link); } .field__note { display: block; margin-top: 4px; color: var(--hint); font-size: 13px; line-height: 1.35; } .field__count { flex: none; color: var(--hint); font-size: 13px; font-variant-numeric: tabular-nums; } .field__count--full { color: var(--warn); } .field--error .field__label, .field--error .field__note { color: var(--destructive); } .field__tools { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 -4px; } /* Alineado con el texto: el hueco del botón queda a la izquierda, fuera. Mide 44 px al dedo, pero come 4 arriba y 4 abajo para no separar el campo. */ .field__tools .button--plain { margin: -4px 0 -4px -12px; font-size: 15px; font-weight: 500; } /* ---- Botones -------------------------------------------------------------- */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 44px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--button); color: var(--button-text); font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform 120ms, opacity 120ms; } .button:active { transform: scale(0.97); } .button__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .button:disabled { cursor: default; opacity: 0.4; transform: none; } .button .glyph { flex: none; width: 20px; height: 20px; margin-left: -4px; } .button--secondary { background: var(--tint); color: var(--link); } .button--destructive { background: var(--tint-destructive); color: var(--destructive); } .button--plain { padding: 0 12px; background: none; color: var(--link); } .button--block { display: flex; width: 100%; } /* Una pastilla dentro de una tarjeta o de una fila: 32 px a la vista y 44 al dedo. */ .button--small { position: relative; min-height: 32px; padding: 0 14px; border-radius: 16px; font-size: 14px; } .button--small::after { content: ""; position: absolute; inset: -6px -4px; } .actions { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 8px; margin-bottom: 28px; } .actions .button { padding: 0 12px; font-size: 15px; } /* ---- Pastillas, avisos y avatares ----------------------------------------- */ .badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; } .badge--accent { background: var(--tint); color: var(--link); } /* Algo más oscuro que la pista: sobre el relleno gris, la pista sola no llega al AA. */ .badge--neutral { background: var(--fill); color: color-mix(in srgb, var(--hint) 80%, var(--text)); } .badge--warn { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); } .badge--destructive { background: var(--tint-destructive); color: var(--destructive); } .notice { display: flex; gap: 10px; margin-bottom: 20px; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.4; } .notice__icon { flex: none; margin-top: -1px; } .notice__icon .glyph { width: 20px; height: 20px; } /* Los errores de un formulario llegan uno por línea. */ .notice__text { white-space: pre-line; } .notice--warn { background: color-mix(in srgb, var(--warn) 13%, var(--section-bg)); } .notice--warn .notice__icon { color: var(--warn); } .notice--info { background: color-mix(in srgb, var(--link) 11%, var(--section-bg)); } .notice--info .notice__icon { color: var(--link); } .notice--error { background: var(--tint-destructive); } .notice--error .notice__icon { color: var(--destructive); } .status { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; white-space: nowrap; } .status .glyph { width: 18px; height: 18px; stroke-width: 2.4; } .status--ok { color: var(--ok); } .status--warn { color: var(--warn); } /* Lo que necesito en un chat: la marca delante y, si falta, qué tocar debajo. */ .check { --inset: 48px; } .check:has(.row__hint) { align-items: flex-start; } .check__icon { flex: none; margin-top: 1px; } .check__icon .glyph { width: 20px; height: 20px; stroke-width: 2.4; } .check--ok .check__icon { color: var(--ok); } .check--warn .check__icon { color: var(--warn); } .check--unknown .check__icon { color: var(--hint); } /* Los degradados de los avatares de Telegram, en su orden (id % 7). */ .avatar { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #ffffff; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; } .avatar--0 { background: linear-gradient(#ff885e, #ff516a); } .avatar--1 { background: linear-gradient(#ffcd6a, #ffa85c); } .avatar--2 { background: linear-gradient(#82b1ff, #665fff); } .avatar--3 { background: linear-gradient(#a0de7e, #54cb68); } .avatar--4 { background: linear-gradient(#53edd6, #28c9b7); } .avatar--5 { background: linear-gradient(#72d5fd, #2a9ef1); } .avatar--6 { background: linear-gradient(#e0a2f3, #d669ed); } /* De alguien de quien solo sé el ID. */ .avatar--unknown { background: color-mix(in srgb, var(--hint) 70%, var(--section-bg)); color: #ffffff; } .avatar--unknown .glyph { width: 62%; height: 62%; stroke-width: 2.2; } /* ---- Vista previa de mensajes --------------------------------------------- */ .bubble { display: grid; gap: 4px; justify-items: start; padding: 14px 12px; border-radius: 12px; background: var(--chat-bg); } .bubble__message { max-width: min(100%, 420px); padding: 7px 11px 8px; border-radius: 16px 16px 16px 6px; background: var(--bg); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); } .bubble__head { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; margin-bottom: 2px; font-size: 14px; } .bubble__name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } /* El color del nombre también sale del id, como en los grupos: los de Telegram, algo más oscuros en claro y más vivos en oscuro para leerse bien. */ .bubble__name--0 { color: var(--name-0); } .bubble__name--1 { color: var(--name-1); } .bubble__name--2 { color: var(--name-2); } .bubble__name--3 { color: var(--name-3); } .bubble__name--4 { color: var(--name-4); } .bubble__name--5 { color: var(--name-5); } .bubble__name--6 { color: var(--name-6); } /* La etiqueta sale donde Telegram pone el título de los miembros. */ .bubble__tag { flex: none; color: var(--hint); font-size: 13px; white-space: pre; } .bubble__text { font-size: 15px; line-height: 1.38; overflow-wrap: anywhere; white-space: pre-line; } /* El marcado de Telegram dentro del texto (web/telegram_html.py). */ .bubble__link { color: var(--link); } .bubble__code { padding: 0 3px; border-radius: 4px; background: var(--fill); font: 0.9em/1 var(--mono); } .bubble__pre, .bubble__quote { display: block; margin: 4px 0; border-radius: 6px; } .bubble__pre { padding: 6px 8px; background: var(--fill); font: 13px/1.4 var(--mono); white-space: pre-wrap; } .bubble__quote { padding: 3px 8px 4px 10px; border-left: 3px solid var(--link); background: color-mix(in srgb, var(--link) 9%, transparent); } /* Telegram lo tapa con un polvo que se mueve; aquí, quieto. */ .bubble__spoiler { border-radius: 4px; background: radial-gradient(circle, var(--fill-strong) 1px, transparent 1.3px) 0 0 / 4px 4px, var(--fill); color: transparent; } .bubble__time { float: right; margin: 6px 0 -4px 12px; color: var(--hint); font-size: 12px; } .bubble__buttons { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 4px; width: min(100%, 420px); } .bubble__button { padding: 9px 8px; overflow: hidden; border-radius: 10px; background: var(--inline-button); color: #ffffff; font-size: 14px; font-weight: 500; text-align: center; text-overflow: ellipsis; white-space: nowrap; } /* ---- Medidor de la etiqueta ----------------------------------------------- */ .meter { --tone: var(--ok); padding: 14px 16px 16px; border-radius: 12px; background: var(--section-bg); } .meter--warn { --tone: var(--warn); } .meter--over { --tone: var(--destructive); } .meter__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .meter__label { color: var(--hint); font-size: 14px; } .meter__count { color: var(--tone); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; } .meter__cells { display: flex; gap: 3px; } .meter__cell { flex: 1; height: 8px; border-radius: 2px; background: var(--fill); transition: background-color 200ms; } .meter__cell--used { background: var(--tone); } .meter__cell--over { background: var(--tone); opacity: 0.55; } /* Lo que no cabe, separado del resto. */ .meter__cell:not(.meter__cell--over) + .meter__cell--over { margin-left: 6px; } .meter__sample { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; } .meter__sample .avatar { width: 26px; height: 26px; font-size: 11px; } .meter__sample .bubble__tag { margin-left: auto; } /* ---- Hojas inferiores ----------------------------------------------------- */ .sheet { position: fixed; inset: auto 0 0; width: 100%; max-width: 640px; max-height: min(88vh, 88dvh); margin: 0 auto; padding: 0 0 env(safe-area-inset-bottom); overflow: auto; overscroll-behavior: contain; border: 0; border-radius: 16px 16px 0 0; background: var(--sheet-bg); color: var(--text); --section-bg: var(--sheet-section-bg); } .sheet[open] { animation: sheet-in 220ms var(--ease-out); } .sheet::backdrop { background: rgba(0, 0, 0, 0.42); animation: fade-in 220ms; } .sheet--closing { animation: sheet-out 180ms var(--ease-in) forwards; } .sheet--closing::backdrop { animation: fade-out 180ms forwards; } @keyframes sheet-in { from { transform: translateY(100%); } } @keyframes sheet-out { to { transform: translateY(100%); } } @keyframes fade-in { from { opacity: 0; } } @keyframes fade-out { to { opacity: 0; } } .sheet__handle { position: sticky; top: 0; z-index: 1; height: 20px; background: inherit; cursor: grab; touch-action: none; } .sheet__handle::before { content: ""; position: absolute; top: 7px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--fill-strong); } .sheet__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 8px 10px 20px; } .sheet__title { font-size: 18px; font-weight: 600; } /* Al abrir, el foco va al título: así se lee, y no sale un anillo en la X. */ .sheet__title:focus { outline: none; } .sheet__close { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--hint); cursor: pointer; } .sheet__close .glyph { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--fill); stroke-width: 2.4; } .sheet__body { padding: 0 16px 20px; } /* Lo que hace la hoja, dicho antes de sus opciones. */ .sheet__lead { margin: 0 4px 16px; color: var(--hint); font-size: 15px; line-height: 1.45; text-wrap: pretty; } .sheet__body > .button--block, .sheet__body > form > .button--block { margin-top: 4px; } .sheet__body > .group:last-child { margin-bottom: 8px; } /* ---- Avisos breves -------------------------------------------------------- */ .toasts { position: fixed; right: 0; bottom: calc(16px + env(safe-area-inset-bottom)); left: 0; z-index: 10; display: grid; justify-items: center; padding: 0 16px; pointer-events: none; } /* Oscuros en los dos temas, como los de Telegram. */ .toast { display: flex; align-items: center; gap: 10px; max-width: 440px; padding: 11px 16px 11px 12px; border-radius: 12px; background: rgba(50, 50, 54, 0.96); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22); color: #ffffff; font-size: 15px; line-height: 1.35; animation: toast-in 220ms var(--ease-out); } .toast--leaving { animation: toast-out 180ms var(--ease-in) forwards; } @keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } } @keyframes toast-out { to { opacity: 0; transform: translateY(8px); } } .toast__icon { display: grid; flex: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; } .toast__icon .glyph { width: 16px; height: 16px; stroke-width: 2.6; } .toast--ok .toast__icon { background: #3ccf75; color: #0b2616; } .toast--error .toast__icon { background: #ff7b73; color: #2e0b09; } /* ---- Esqueleto ------------------------------------------------------------ */ .skeleton { padding-top: 16px; } .skeleton__group { overflow: hidden; border-radius: 12px; background: var(--section-bg); } .skeleton__row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; } .skeleton__icon, .skeleton__line { display: block; border-radius: 7px; background: linear-gradient( 100deg, transparent 30%, color-mix(in srgb, var(--section-bg) 55%, transparent) 50%, transparent 70% ) var(--fill); background-size: 250% 100%; animation: shimmer 1.3s linear infinite; } .skeleton__icon { flex: none; width: 30px; height: 30px; border-radius: 8px; } .skeleton__line { height: 12px; } .skeleton__line--title { width: 46%; height: 22px; margin: 0 4px 22px; } .skeleton__line--long { width: 62%; } .skeleton__line--medium { width: 48%; } .skeleton__line--short { width: 34%; } @keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } } /* ---- Estados vacíos ------------------------------------------------------- */ /* Suele ser la pantalla entera: se centra un poco por encima de la mitad. */ .empty { display: grid; align-content: center; justify-items: center; min-height: min(72vh, 560px); padding: 32px 24px 64px; text-align: center; } .empty .mascot { width: 96px; margin-bottom: 18px; } .empty__title { font-size: 21px; line-height: 1.25; font-weight: 700; text-wrap: balance; } .empty__text { max-width: 34ch; margin-top: 8px; color: var(--hint); font-size: 15px; text-wrap: pretty; } .empty .button { margin-top: 22px; } /* Vacío dentro de una pantalla: la lista que todavía no tiene nada. */ .blank { display: grid; justify-items: center; gap: 4px; padding: 24px 20px; color: var(--hint); font-size: 14px; line-height: 1.4; text-align: center; } .blank .mascot { width: 64px; margin-bottom: 10px; } .blank__title { color: var(--text); font-size: 17px; font-weight: 600; line-height: 1.3; text-wrap: balance; } .blank__text { max-width: 34ch; text-wrap: pretty; } /* ---- Movimiento reducido -------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } .mascot .mascot-eyes, .skeleton__icon, .skeleton__line { animation: none !important; } }