/* cosas.info · Cosas con y Cosas de El mismo estilo que la app: un color plano de fondo (el azul de la app; una lista abierta, el suyo) y una «tinta» blanca o casi negra según su luminancia (data-tono en ). Cabecera con botones redondos y título centrado, filas en píldora y una píldora fija abajo. */ :root { --fuente: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --margen: 16px; --abajo: env(safe-area-inset-bottom, 0px); /* Altura de la barra de abajo (píldora y su margen): lo que hay que dejar libre sobre ella. */ --alto-barra: calc(var(--abajo) + 16px + 56px); --fondo: #2F6FED; --tinta-l: #FFFFFF; --tinta-l-suave: rgba(255, 255, 255, .82); /* Solo sobre --superficie-l (placeholders, detalles). */ --contraste-l: #0A0A0A; --superficie-l: rgba(0, 0, 0, .2); --superficie-l-activa: rgba(0, 0, 0, .34); --filete-l: rgba(255, 255, 255, .24); color-scheme: dark; } :root[data-tono="claro"] { --tinta-l: #0A0A0A; --tinta-l-suave: rgba(10, 10, 10, .8); --contraste-l: #FFFFFF; --superficie-l: rgba(255, 255, 255, .55); --superficie-l-activa: rgba(255, 255, 255, .85); --filete-l: rgba(10, 10, 10, .16); color-scheme: light; } html { background: var(--fondo); color: var(--tinta-l); line-height: 1.4; scroll-behavior: auto; transition: background-color .35s ease; } body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--fondo); color: var(--tinta-l); line-height: 1.4; transition: background-color .35s ease; } ::selection { background: var(--tinta-l); color: var(--fondo); } :focus-visible { outline-color: var(--tinta-l); } .con-app svg, .hoja svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } /* A lo ancho, como la app: los botones redondos van a las esquinas y el contenido, centrado. */ .con-app { flex: 1; width: 100%; padding: 0 var(--margen) calc(var(--alto-barra) + 32px); } .vista { display: none; } .vista.activa { display: block; animation: vista-aparecer .2s ease-out backwards; } /* Solo opacidad: una transform en la vista convertiría a la barra fija en hija suya. */ @keyframes vista-aparecer { from { opacity: 0; } to { opacity: 1; } } @keyframes subir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---------- Cabecera: flecha, título centrado y un botón a la derecha ---------- */ .vista-cabecera { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 8px; margin: 0 calc(var(--margen) * -1); padding: calc(env(safe-area-inset-top, 0px) + 12px) var(--margen) 12px; background: linear-gradient(to bottom, var(--fondo) 75%, transparent); } /* Hasta dos líneas (caben en los 48px de la cabecera): «Cosas con Nombre y Dos Apellidos». */ .vista-titulo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; text-align: center; overflow-wrap: anywhere; } .vista-titulo:focus { outline: none; } .redondo { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--superficie-l); box-shadow: inset 0 0 0 1px var(--filete-l); color: var(--tinta-l); transition: background-color .15s ease, transform .12s ease; } .redondo:active { background: var(--superficie-l-activa); transform: scale(.92); } @media (hover: hover) { .redondo:hover { background: var(--superficie-l-activa); } } /* ---------- Estado de la sincronización: un punto y una palabra ---------- */ .vista-estado { margin: -4px 0 14px; text-align: center; } .estado { display: inline-flex; align-items: center; gap: 7px; flex: none; color: var(--tinta-l); font-size: 13px; font-weight: 600; } .estado-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-l); opacity: .7; transition: background-color .3s ease; } .estado[data-estado="sincronizado"] .estado-punto { background: var(--verde); opacity: 1; } .estado[data-estado="guardando"] .estado-punto { background: #F2B705; opacity: 1; animation: parpadeo 1s ease-in-out infinite; } .estado[data-estado="sin-conexion"] .estado-punto { background: #EF5B5B; opacity: 1; } .estado[data-estado="conectando"] .estado-punto { animation: parpadeo 1s ease-in-out infinite; } .estado[data-estado="local"] .estado-punto { background: #F2B705; opacity: 1; } @keyframes parpadeo { 50% { opacity: .35; } } /* ---------- Listas (conexiones y cosas) ---------- */ .lista { display: block; max-width: 640px; margin: 0 auto; } /* Una conexión: disco con su color e inicial, el nombre y una flecha. Toda la fila es el enlace. */ .conexion { margin: 0 0 8px; } .conexion.nueva { animation: subir .2s ease-out both; } .enlace-conexion { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 14px 8px 8px; border-radius: 30px; background: var(--superficie-l); box-shadow: inset 0 0 0 1px var(--filete-l); color: var(--tinta-l); transition: background-color .15s ease, transform .12s ease; } .enlace-conexion:active { background: var(--superficie-l-activa); transform: scale(.99); } @media (hover: hover) { .enlace-conexion:hover { background: var(--superficie-l-activa); } } .enlace-conexion:focus-visible { outline-offset: 2px; border-radius: 30px; } .disco { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--disco, #F1F3F5); box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .12); color: var(--disco-tinta, #0A0A0A); font-size: 18px; font-weight: 700; line-height: 1; } .conexion-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .conexion-nombre { overflow: hidden; font-size: 17px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .conexion-detalle { overflow: hidden; color: var(--tinta-l-suave); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; } .enlace-conexion .flecha { flex: none; width: 20px; height: 20px; color: var(--tinta-l-suave); stroke-width: 2.2; } /* Sin conexiones (y avisos de «no existe» o «ya es de dos»): centrado, como en la app. */ .vacio-centrado { display: grid; place-content: center; justify-items: center; gap: 12px; min-height: calc(100vh - 12px - 48px - 12px - var(--alto-barra) - 64px); min-height: calc(100dvh - 12px - 48px - 12px - var(--alto-barra) - 64px); padding: 24px 12px; text-align: center; } .vacio-ante { font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; } .vacio-titulo { font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; } .vacio-texto { max-width: 34ch; font-size: 16px; line-height: 1.5; } /* ---------- Barra de abajo, fija como en la app ---------- */ .barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; margin: 0; padding: 14px var(--margen) calc(var(--abajo) + 16px); background: linear-gradient(to bottom, transparent, var(--fondo) 14px); } .pildora { display: flex; align-items: center; gap: 8px; max-width: 640px; height: 56px; margin: 0 auto; padding: 0 6px 0 22px; border-radius: 28px; /* Opaca: el color de la página bajo su superficie, para que las filas pasen por debajo. */ background-image: linear-gradient(var(--superficie-l), var(--superficie-l)), linear-gradient(var(--fondo), var(--fondo)); box-shadow: inset 0 0 0 1px var(--filete-l); transition: box-shadow .15s ease; } .pildora:focus-within { box-shadow: inset 0 0 0 2px var(--tinta-l); } /* «Añadir cosas con»: en reposo la píldora entera es el botón, sin relleno interior. */ .barra-accion:not(.editando) .pildora { padding: 0; } .boton-pildora { flex: 1; min-width: 0; display: grid; place-items: center; height: 100%; padding: 0 16px; border-radius: 28px; color: var(--tinta-l); font-size: 17px; font-weight: 600; line-height: 1.2; text-align: center; transition: background-color .15s ease, transform .12s ease; } .boton-pildora:active { background: var(--superficie-l-activa); transform: scale(.98); } @media (hover: hover) { .boton-pildora:hover { background: var(--superficie-l-activa); } } /* «Cosas con» delante del campo: se lee la lista entera mientras se escribe. */ .prefijo { flex: none; margin-right: -3px; font-size: 17px; font-weight: 600; white-space: nowrap; } .campo { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; outline: none; background: transparent; color: var(--tinta-l); caret-color: var(--tinta-l); font-size: 17px; text-overflow: ellipsis; -webkit-appearance: none; appearance: none; } .campo::placeholder { color: var(--tinta-l-suave); opacity: 1; } .enviar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tinta-l); color: var(--fondo); transition: opacity .15s ease, transform .15s ease, visibility 0s; } .enviar svg { stroke-width: 2.4; } /* «Crear» y «Entrar»: píldora compacta y rellena, como el botón de enviar. */ .confirmar { flex: none; height: 44px; padding: 0 18px; border-radius: 22px; background: var(--tinta-l); color: var(--fondo); font-size: 16px; font-weight: 700; transition: opacity .15s ease, transform .15s ease, visibility 0s; } .enviar:active, .confirmar:active { transform: scale(.94); } /* Sin texto en el campo, el botón del final no se ve (y sale del tabulador). */ .enviar:disabled, .confirmar:disabled { visibility: hidden; opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; } /* ---------- Lista abierta ---------- */ .lista-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; max-width: 640px; margin: 4px auto 16px; } .miembros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .miembro { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 4px; border-radius: 17px; background: var(--superficie-l); box-shadow: inset 0 0 0 1px var(--filete-l); font-size: 13px; font-weight: 600; animation: subir .3s ease-out both; } .avatar { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--avatar, #2F6FED); color: var(--avatar-tinta, #fff); font-size: 12px; font-weight: 700; letter-spacing: 0; } .lista-derecha { display: flex; align-items: center; gap: 14px; margin-left: auto; } .boton-invitar { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; border-radius: 18px; background: var(--tinta-l); color: var(--fondo); font-size: 14px; font-weight: 700; transition: transform .12s ease, opacity .15s ease; } .boton-invitar:hover { opacity: .9; } .boton-invitar:active { transform: scale(.96); } .con-app .boton-invitar svg { width: 17px; height: 17px; stroke-width: 2.4; } /* Las filas, como en la app. */ .fila { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; padding: 8px; border-radius: 30px; background: var(--superficie-l); box-shadow: inset 0 0 0 1px var(--filete-l); contain: layout style; } .fila.nueva { animation: aparecer .28s var(--suave) both; } @keyframes aparecer { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } .fila.saliendo { opacity: 0; transform: scale(.96); pointer-events: none; transition: opacity .16s ease, transform .16s ease; } .hecho { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #F1F3F5; box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .1); color: #6C757D; transition: background-color .18s ease, color .18s ease, transform .12s ease; } .con-app .hecho svg { stroke-width: 2.6; } .hecho:active { transform: scale(.92); } .hecho[aria-pressed="true"] { background: var(--verde); box-shadow: none; color: #fff; animation: latido .36s var(--suave); } @keyframes latido { 40% { transform: scale(1.14); } } .fila-texto { flex: 1; min-width: 0; font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; word-break: break-word; transition: opacity .18s ease; } .fila.hecha .fila-texto { opacity: .65; text-decoration: line-through; text-decoration-thickness: 1.5px; } .fila .avatar { width: 24px; height: 24px; font-size: 11px; } .borrar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--superficie-l); box-shadow: inset 0 0 0 1px var(--filete-l); color: var(--tinta-l); transition: background-color .15s ease, transform .12s ease; } .con-app .borrar svg { width: 22px; height: 22px; stroke-width: 1.8; } .borrar:hover { background: var(--superficie-l-activa); } .borrar:active { transform: scale(.92); } .vacio { padding: 48px 24px; font-size: 17px; text-align: center; } /* ---------- Hojas: tu cuenta y ajustes de la lista ---------- */ .hoja { position: fixed; z-index: 40; inset: 0; display: none; flex-direction: column; justify-content: flex-end; } .hoja.abierta { display: flex; } .hoja-velo { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); animation: velar .2s ease-out both; } @keyframes velar { from { opacity: 0; } to { opacity: 1; } } .hoja-panel { position: relative; width: 100%; max-width: 560px; max-height: calc(100% - 24px); margin: 0 auto; padding: 20px 20px calc(env(safe-area-inset-bottom, 0px) + 28px); overflow-y: auto; overscroll-behavior: contain; border-radius: 28px 28px 0 0; background: var(--fondo); color: var(--tinta-l); box-shadow: 0 0 0 1px var(--filete-l); animation: hoja-subir .26s cubic-bezier(.2, .8, .2, 1) both; } @media (min-width: 640px) { .hoja { justify-content: center; align-items: center; padding: 24px; } .hoja-panel { border-radius: 28px; max-height: calc(100% - 48px); } } @keyframes hoja-subir { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } } .hoja-cabecera { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; } .hoja-titulo { flex: 1; min-width: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; } .hoja-titulo:focus { outline: none; } .hoja-texto { font-size: 16px; line-height: 1.5; } .hoja-texto + .hoja-texto { margin-top: 12px; } .aviso-local { padding: 14px 16px; border-radius: 18px; background: var(--superficie-l); box-shadow: inset 0 0 0 1px var(--filete-l); font-size: 15px; } .hoja .etiqueta { display: block; margin: 22px 0 10px; font-size: 15px; font-weight: 600; } .hoja .etiqueta:first-of-type { margin-top: 0; } .conmutador { display: flex; width: fit-content; padding: 4px; border-radius: 999px; background: var(--superficie-l); box-shadow: inset 0 0 0 1px var(--filete-l); } .conmutador-opcion { padding: 9px 18px; border-radius: 999px; color: var(--tinta-l-suave); font-size: 15px; font-weight: 600; transition: background-color .15s ease, color .15s ease; } .conmutador-opcion[aria-checked="true"] { background: var(--tinta-l); color: var(--fondo); } .conmutador-opcion:disabled { opacity: .4; cursor: default; } .campo-texto { width: 100%; height: 54px; padding: 0 20px; border: 0; border-radius: 27px; outline: none; background: var(--superficie-l); box-shadow: inset 0 0 0 1px var(--filete-l); color: var(--tinta-l); caret-color: var(--tinta-l); font-size: 17px; transition: box-shadow .15s ease; } .campo-texto:focus { box-shadow: inset 0 0 0 2px var(--tinta-l); } .campo-texto::placeholder { color: var(--tinta-l-suave); opacity: 1; } .hoja-muestras { display: flex; flex-wrap: wrap; gap: 12px; } .hoja-muestra { width: 40px; height: 40px; border-radius: 50%; background: var(--muestra); box-shadow: inset 0 0 0 1.5px var(--filete-l); transition: transform .12s ease, box-shadow .15s ease; } .hoja-muestra:hover { transform: scale(1.1); } .hoja-muestra[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--filete-l), 0 0 0 3px var(--fondo), 0 0 0 5.5px var(--tinta-l); } .hoja-acciones { display: grid; gap: 10px; margin-top: 28px; } .boton-ancho { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 8px 24px; border-radius: 27px; background: var(--superficie-l); box-shadow: inset 0 0 0 1px var(--filete-l); color: var(--tinta-l); font-size: 17px; font-weight: 600; transition: background-color .15s ease, transform .12s ease; } .boton-ancho:hover { background: var(--superficie-l-activa); } .boton-ancho:active { transform: scale(.98); } .hoja .boton-ancho svg { width: 20px; height: 20px; } .hoja .boton-ancho .logo-google { stroke: none; } .boton-ancho.principal { background: var(--tinta-l); color: var(--fondo); } .boton-ancho.principal:hover { opacity: .92; } .boton-ancho.peligro { color: #FFD9D9; box-shadow: inset 0 0 0 1px rgba(239, 91, 91, .5); } :root[data-tono="claro"] .boton-ancho.peligro { color: #B42318; } .hoja-nota { margin-top: 10px; font-size: 13.5px; line-height: 1.5; } .hoja-nota code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; overflow-wrap: anywhere; } /* ---------- Cargando ---------- */ .cargando { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 120px 0; font-weight: 600; } .cargando i { width: 10px; height: 10px; border-radius: 50%; background: var(--tinta-l); animation: parpadeo 1s ease-in-out infinite; } /* El aviso va sobre la barra de abajo, en la tinta de la página. */ .toast { bottom: calc(var(--alto-barra) + 14px); background: var(--tinta-l); color: var(--contraste-l); }