/* ============================================================ Sistema Facultad — Aurora Vidrio, resplandor y dock flotante. Sin CDN: funciona offline. El color de marca lo pone la carrera (ver js/carreras.js) y cada materia tiene el suyo, que se pasa con --mat. ============================================================ */ /* --- Reset ------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } a { color: inherit; } /* --- Tokens ------------------------------------------------ */ :root { color-scheme: dark; --bg: #070a12; --vidrio: rgba(255,255,255,.055); --vidrio-alto: rgba(255,255,255,.088); --vidrio-hondo: rgba(0,0,0,.30); --borde: rgba(255,255,255,.11); --borde-alto: rgba(255,255,255,.20); --texto: #f2f5fb; --tenue: #a7b0c2; --debil: #6f7b92; /* Los pisa js/carreras.js según la carrera activa. */ --carrera: #d9663a; --carrera-2: #ef9563; --sobre-carrera: #1a0a02; /* Semáforo: estos colores significan algo, no decoran. Bajados de saturación para que no compitan con el contenido; siguen siendo distinguibles entre sí de un vistazo. */ --ok: #56b06a; --media: #d2ad4a; --riesgo: #d95f57; --inerte: #6e7681; /* Color de la tarjeta en curso; cada una lo redefine. */ --mat: #7d8ba3; /* Radios. Subidos a pedido suyo: la app entera va más redondeada. Todo lo que redondea sale de acá, así no queda una tarjeta con un radio y el modal de al lado con otro. */ --r-sm: 15px; --r: 22px; --r-lg: 30px; --alto-dock: 74px; /* Alto de la cabecera pegajosa. Lo necesita cualquier pantalla que quiera ocupar exactamente lo que queda y no una gota más. Ojo: es el alto de la fila. Lo que la cabecera ocupa de verdad es esto MÁS la franja del reloj (--cielo). */ --alto-cab: 68px; /* La franja de arriba que se come el sistema: reloj, señal, batería. Con viewport-fit=cover el navegador nos deja dibujar debajo de ella, así que si nadie la descuenta el logo queda tapado por el reloj. En la compu vale 0 y no cambia nada. */ --cielo: env(safe-area-inset-top, 0px); /* Dónde apoya el dock. Antes eran 20 px POR ENCIMA de la franja de gestos y en un celular quedaba flotando a 56 px del borde, como despegado. Ahora apoya justo sobre el borde seguro. */ --piso: max(10px, env(safe-area-inset-bottom, 0px)); --resorte: cubic-bezier(.34, 1.45, .5, 1); /* Cuánto se sale del borde el resplandor de un elemento cuando está en hover o elegido, contando el desenfoque de la sombra y los 2-5 px que se levanta. Todo contenedor que recorte tiene que dejarle este lugar, o el resplandor se ve cortado en cuadrado. */ --halo: 16px; --trama-fondo: none; --trama-size: auto; } /* --- Base -------------------------------------------------- */ body { background-color: var(--bg); background-image: var(--trama-fondo); background-size: var(--trama-size); color: var(--texto); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100dvh; overflow-x: hidden; padding-bottom: calc(var(--alto-dock) + 26px + var(--piso)); } /* Manchas de color del fondo, fijas y difusas. */ body::before, body::after { content: ""; position: fixed; border-radius: 50%; filter: blur(130px); z-index: -1; pointer-events: none; } body::before { width: 640px; height: 640px; top: -290px; left: -190px; background: color-mix(in srgb, var(--carrera) 16%, transparent); transition: background 0.5s ease; } body::after { width: 560px; height: 560px; top: 90px; right: -250px; background: rgba(124, 108, 200, .09); } ::selection { background: var(--carrera); color: var(--sobre-carrera); } /* Sin border-radius acá: el navegador le da al contorno la forma del elemento. Forzarlo a 6px dibujaba un rectángulo naranja alrededor de las fichas redondas, y eso era lo que se veía "cortado". */ :focus-visible { outline: 2px solid var(--carrera-2); outline-offset: 2px; } /* --- Tipografía -------------------------------------------- */ h1 { font-size: 1.9rem; font-weight: 750; letter-spacing: -.03em; } h2 { font-size: 1.25rem; font-weight: 690; letter-spacing: -.02em; } h3 { font-size: 1.03rem; font-weight: 650; letter-spacing: -.015em; } .sub { color: var(--tenue); font-size: .91rem; } .menor { font-size: .84rem; } .etiqueta { font-size: .69rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 750; color: var(--debil); } .num { font-variant-numeric: tabular-nums; } /* --- Estructura -------------------------------------------- */ .contenedor { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 18px; } .cabecera { position: sticky; top: 0; z-index: 30; /* El relleno de arriba es la franja del reloj. Va como padding y no como margen para que el vidrio esmerilado la cubra: si no, el reloj queda leyéndose sobre el contenido que pasa por debajo. */ padding-top: var(--cielo); backdrop-filter: blur(22px); background: linear-gradient(to bottom, rgba(7,10,18,.93), rgba(7,10,18,.55)); border-bottom: 1px solid rgba(255,255,255,.07); } /* Tres columnas para que el buscador quede centrado de verdad y no "más o menos al medio": las dos laterales se reparten lo que sobra, así que el del medio cae siempre en el eje. */ .cabecera-fila { display: grid; grid-template-columns: 1fr minmax(0, 430px) 1fr; align-items: center; gap: 13px; height: 68px; } .marca { display: flex; align-items: center; gap: 11px; min-width: 0; cursor: pointer; } /* Adentro va el eje en línea (ver index.html), no una letra: por eso no lleva font-*. `color` sigue haciendo falta — es de donde el SVG saca su currentColor, así que la marca se tiñe sola con la carrera. */ .marca-logo { width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; isolation: isolate; background: linear-gradient(140deg, var(--carrera-2), var(--carrera)); color: var(--sobre-carrera); box-shadow: 0 0 20px color-mix(in srgb, var(--carrera) 24%, transparent); } .marca-logo svg { width: 24px; height: 24px; } .marca-logo .logo-tema-svg { width: 100%; height: 100%; } /* Los dos estilos alternativos del modal "Acerca de" (js/app.js). El degradé de arriba sigue siendo el de icons/ — éstos son sólo para la marca dentro de la app. */ .marca-logo.vidrio { background: var(--vidrio-alto); border: 1px solid var(--borde-alto); color: var(--carrera-2); box-shadow: none; } .marca-logo.negro { background: #050608; border: 1px solid rgba(255,255,255,.08); color: var(--texto); box-shadow: 0 0 16px color-mix(in srgb, var(--carrera) 22%, transparent); } .marca-txt { min-width: 0; } .marca-txt strong { display: block; font-size: .94rem; font-weight: 700; letter-spacing: -.015em; } .marca-txt span { display: block; font-size: .74rem; color: var(--debil); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- El modal "Acerca de Axis" ------------------------------------ */ .acerca-marca { display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 4px 0 20px; text-align: center; } .acerca-previa { width: 72px; height: 72px; border-radius: 22px; } .acerca-previa svg { width: 44px; height: 44px; } .acerca-previa .logo-tema-svg { width: 100%; height: 100%; } .acerca-previa { overflow: hidden; isolation: isolate; } .acerca-lema { color: var(--tenue); font-size: .93rem; max-width: 30ch; line-height: 1.5; } .buscador { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 15px; background: var(--vidrio); border: 1px solid var(--borde); color: var(--tenue); font-size: .84rem; text-align: left; transition: border-color .25s, box-shadow .25s, background .25s; } .buscador:hover { border-color: color-mix(in srgb, var(--carrera) 38%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--carrera) 10%, transparent); } .buscador .crece { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .buscador kbd { font-size: .65rem; font-family: ui-monospace, monospace; background: rgba(255,255,255,.1); border: 1px solid var(--borde); padding: 2px 7px; border-radius: 6px; flex-shrink: 0; } /* --- Accesos de la cabecera (Gemini, NotebookLM, Ajustes) ---- */ .cabecera-acciones { display: flex; align-items: center; gap: 7px; justify-content: flex-end; } .icono-tool { width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; text-decoration: none; color: var(--tenue); background: var(--vidrio); border: 1px solid var(--borde); transition: transform .28s var(--resorte), background .2s, border-color .2s, color .2s; } .icono-tool svg { width: 19px; height: 19px; } .icono-tool:hover { transform: translateY(-2px); color: color-mix(in srgb, var(--mat, var(--carrera-2)) 88%, #fff); background: color-mix(in srgb, var(--mat, var(--carrera)) 14%, var(--vidrio)); border-color: color-mix(in srgb, var(--mat, var(--carrera)) 45%, transparent); box-shadow: 0 0 18px -5px color-mix(in srgb, var(--mat, var(--carrera)) 55%, transparent); } .icono-tool:active { transform: scale(.93); } /* En pantallas chicas no hay lugar para centrar nada: cada cosa ocupa lo que necesita y el buscador se queda con el resto. */ @media (max-width: 720px) { .cabecera-fila { grid-template-columns: auto 1fr auto; } .buscador .crece, .buscador kbd { display: none; } .buscador { width: auto; margin-left: auto; } } @media (max-width: 560px) { .marca-txt { display: none; } .icono-tool { width: 34px; height: 34px; border-radius: 10px; } .icono-tool svg { width: 17px; height: 17px; } } .vista { padding: 24px 0 20px; } .vista-cab { margin-bottom: 20px; } .vista-cab h1 { margin-bottom: 2px; } .fila { display: flex; align-items: center; gap: 12px; } .fila-sep { justify-content: space-between; } .crece { flex: 1; min-width: 0; } .pila { display: flex; flex-direction: column; gap: 13px; } .seccion { margin-top: 30px; } .seccion-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; } /* --- Tu piel: el fondo detrás del vidrio (Ajustes) y el color/emoji de cada materia (detalle de materia → Configurar). Maqueta aprobada en disenos/AI-piel.html. --- */ /* La capa del fondo. Va DEBAJO de las dos manchas que dibuja body::before/::after (z-index -1): el automático las deja ver, y cualquier otro fondo las tapa. Fija, nunca hace scroll. */ #fondo-app { position: fixed; inset: 0; z-index: -2; pointer-events: none; background-size: cover; background-position: center; opacity: 0; transition: opacity .45s ease; } /* La foto se desenfoca y se le baja el color antes de tocar el vidrio: sin esto, una foto con contraste se come el texto de las tarjetas. El scale evita que el blur deje ver el borde transparente. */ #fondo-app.es-foto { filter: blur(16px) saturate(.72); transform: scale(1.08); } /* El velo: la perilla no baja la opacidad del fondo (quedaría gris lavado), sube este negro encima — así el fondo queda oscuro y profundo, que es lo que el vidrio necesita para seguir leyéndose. */ #velo-fondo-app { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: var(--bg); opacity: 0; transition: opacity .45s ease; } .fondos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; padding: var(--halo); margin: calc(var(--halo) * -1); } .fondo-op { border: none; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; gap: 7px; text-align: center; font: inherit; color: var(--tenue); } .fondo-tile { aspect-ratio: 9/13; border-radius: var(--r-sm); border: 1px solid var(--borde); background-size: cover; background-position: center; position: relative; overflow: hidden; transition: transform .18s var(--resorte), border-color .18s, box-shadow .18s; } /* Una miniatura del vidrio adentro de la miniatura del fondo: sin esto elegís un fondo lindo y recién adentro de la app te enterás de que la tarjeta encima no se lee. */ .fondo-tile::after { content: ""; position: absolute; left: 14%; right: 14%; top: 38%; height: 26%; border-radius: 7px; background: var(--vidrio-alto); border: 1px solid var(--borde-alto); backdrop-filter: blur(6px); } .fondo-op:hover .fondo-tile { transform: translateY(-3px); border-color: var(--borde-alto); } .fondo-op[aria-pressed="true"] .fondo-tile { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 6px 22px rgba(255,255,255,.16); } .fondo-op[aria-pressed="true"] { color: var(--texto); } .fondo-op span { font-size: .74rem; font-weight: 600; } .control-fila { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; color: var(--tenue); font-size: .88rem; } .control-fila input[type=range] { flex: 1; min-width: 160px; accent-color: var(--carrera); } .control-fila .valor { font-variant-numeric: tabular-nums; color: var(--texto); font-weight: 650; min-width: 40px; } /* El sello de la materia: un emoji antes del nombre, para reconocerla sin leer. Vacío = no se dibuja y la tarjeta queda como siempre. */ .mat-sello { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; line-height: 1; background: color-mix(in srgb, var(--mat) 26%, transparent); border: 1px solid color-mix(in srgb, var(--mat) 45%, transparent); } /* El panel de Personalizar (color + emoji), adentro de Configurar en el detalle de una materia — js/views/materias.js. */ .piel-colores, .piel-emojis { display: flex; flex-wrap: wrap; gap: 10px; padding: var(--halo); margin: calc(var(--halo) * -1) calc(var(--halo) * -1) 4px; } .piel-color-op { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; padding: 0; transition: transform .16s var(--resorte), box-shadow .16s; } .piel-color-op:hover { transform: scale(1.14); } .piel-color-op[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 0 14px currentColor; transform: scale(1.1); } .piel-emoji-op { width: 36px; height: 36px; border-radius: 11px; font-size: 17px; cursor: pointer; background: var(--vidrio); border: 1px solid var(--borde); color: var(--texto); display: grid; place-items: center; padding: 0; transition: transform .16s var(--resorte), border-color .16s, background .16s; } .piel-emoji-op:hover { transform: translateY(-2px); border-color: var(--borde-alto); background: var(--vidrio-alto); } .piel-emoji-op[aria-pressed="true"] { border-color: #fff; background: var(--vidrio-alto); } .piel-emoji-op.ninguno { font-size: .64rem; font-weight: 700; color: var(--debil); letter-spacing: .04em; } /* --- Vidrio ------------------------------------------------ */ .tarjeta, .tarjeta-int { position: relative; overflow: hidden; background: var(--vidrio); backdrop-filter: blur(28px); border: 1px solid var(--borde); border-radius: var(--r); box-shadow: 0 20px 50px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.09); padding: 18px; transition: transform .38s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .38s, background .3s; } /* Reflejo interno teñido por la materia */ .tarjeta::before, .tarjeta-int::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .42; transition: opacity .35s; background: radial-gradient(430px 130px at 8% 0%, color-mix(in srgb, var(--mat) 13%, transparent), transparent 70%); } .tarjeta > *, .tarjeta-int > * { position: relative; } .tarjeta-int { width: 100%; text-align: left; display: block; } .tarjeta-int:hover, .tarjeta.viva:hover { transform: translateY(-5px); background: var(--vidrio-alto); border-color: color-mix(in srgb, var(--mat) 38%, transparent); box-shadow: 0 30px 62px -24px rgba(0,0,0,.85), 0 0 34px color-mix(in srgb, var(--mat) 13%, transparent), inset 0 1px 0 rgba(255,255,255,.13); } .tarjeta-int:hover::before, .tarjeta.viva:hover::before { opacity: .78; } .tarjeta-int:active { transform: translateY(-2px) scale(.99); transition-duration: .1s; } /* Las tarjetas de Hoy (Clases, Tareas, Progreso, Semáforo, Bloc) quedaban rígidas al lado de la destacada de arriba, que sí "se infla" al tocarla. Mismo gesto —se despega un toque, brilla un toque— pero teñido con --carrera en vez de --mat: estas tarjetas no son de una sola materia como para tomar ese color. */ .tarjeta.panel:hover { transform: translateY(-4px); background: var(--vidrio-alto); border-color: color-mix(in srgb, var(--carrera) 32%, var(--borde)); box-shadow: 0 26px 54px -22px rgba(0,0,0,.8), 0 0 28px color-mix(in srgb, var(--carrera) 10%, transparent), inset 0 1px 0 rgba(255,255,255,.12); } .tarjeta.panel:hover::before { opacity: .7; } .tarjeta.panel:active { transform: translateY(-1px) scale(.995); transition-duration: .1s; } /* Franja de color a la izquierda */ .franja { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--mat); box-shadow: 0 0 14px color-mix(in srgb, var(--mat) 38%, transparent); } .con-franja { padding-left: 24px; } .grilla { display: grid; gap: 13px; grid-template-columns: 1fr; } @media (min-width: 640px) { .grilla-2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .grilla-3 { grid-template-columns: repeat(3, 1fr); } } /* --- Destacado --------------------------------------------- */ .destacado { padding: 24px; margin-bottom: 16px; border-radius: var(--r-lg); } .destacado h2 { margin: 9px 0 3px; font-size: 1.42rem; } .cuenta { font-size: 3.3rem; font-weight: 790; letter-spacing: -.05em; line-height: 1; color: var(--mat); text-shadow: 0 0 34px color-mix(in srgb, var(--mat) 24%, transparent); } .pie-destacado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; } /* Pulso "en vivo" */ .vivo { display: inline-flex; align-items: center; gap: 9px; font-size: .7rem; font-weight: 780; letter-spacing: .09em; text-transform: uppercase; color: var(--mat); } .punto { width: 11px; height: 11px; border-radius: 50%; background: var(--mat); position: relative; box-shadow: 0 0 9px color-mix(in srgb, var(--mat) 55%, transparent); flex-shrink: 0; } .punto::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--mat); animation: onda 2.2s cubic-bezier(0,.55,.45,1) infinite; } @keyframes onda { 0% { transform: scale(.55); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } /* --- Anillos de progreso ----------------------------------- */ .metricas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; } @media (min-width: 720px) { .metricas { grid-template-columns: repeat(4, 1fr); } } .metrica { padding: 20px; text-align: center; } .aro { width: 78px; height: 78px; margin: 0 auto 10px; position: relative; } .aro svg { transform: rotate(-90deg); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--mat) 30%, transparent)); } .aro circle { fill: none; stroke-width: 8; stroke-linecap: round; } .aro .fondo { stroke: rgba(255,255,255,.09); } .aro .valor { stroke: var(--mat); stroke-dasharray: 201; transition: stroke-dashoffset 1.1s var(--resorte); } .aro b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.18rem; font-weight: 760; letter-spacing: -.03em; } .metrica .rotulo { font-size: .81rem; color: var(--tenue); font-weight: 550; } /* --- Insignias --------------------------------------------- */ .insignia { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: .77rem; font-weight: 660; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--tono, var(--mat)) 13%, transparent); color: color-mix(in srgb, var(--tono, var(--mat)) 82%, #ffffff); border: 1px solid color-mix(in srgb, var(--tono, var(--mat)) 24%, transparent); } .insignia[data-tono="ok"] { --tono: var(--ok); } .insignia[data-tono="media"] { --tono: var(--media); } .insignia[data-tono="riesgo"] { --tono: var(--riesgo); } .insignia[data-tono="acento"] { --tono: var(--carrera-2); } .insignia[data-tono="inerte"] { --tono: var(--tenue); background: rgba(255,255,255,.07); border-color: var(--borde); } /* --- Botones ----------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 18px; border-radius: 999px; min-height: 42px; font-size: .89rem; font-weight: 680; background: linear-gradient(135deg, var(--carrera-2), var(--carrera)); color: var(--sobre-carrera); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--carrera) 55%, transparent); transition: transform .3s var(--resorte), filter .2s, background .25s, border-color .25s; } .btn:hover { transform: scale(1.045); filter: brightness(1.1); } .btn:active { transform: scale(.96); } .btn-suave { background: var(--vidrio); color: var(--texto); border: 1px solid var(--borde); box-shadow: none; } .btn-suave:hover { background: var(--vidrio-alto); border-color: var(--borde-alto); filter: none; } .btn-fantasma { background: none; color: var(--tenue); box-shadow: none; } .btn-fantasma:hover { background: var(--vidrio); color: var(--texto); filter: none; } .btn-peligro { background: rgba(255,69,58,.14); color: var(--riesgo); border: 1px solid rgba(255,69,58,.34); box-shadow: none; } /* Botón teñido por la materia: se usa adentro del panel de una materia, donde el naranja de la carrera competiría con su color. */ .btn-mat { background: color-mix(in srgb, var(--mat) 22%, transparent); border: 1px solid color-mix(in srgb, var(--mat) 55%, transparent); color: var(--texto); box-shadow: none; } .btn-mat:hover { background: color-mix(in srgb, var(--mat) 34%, transparent); filter: none; } .btn-sm { padding: 7px 14px; min-height: 34px; font-size: .8rem; } .btn-icono { width: 42px; padding: 0; flex-shrink: 0; } .btn-bloque { width: 100%; } /* --- Listas ------------------------------------------------ */ .lista { display: flex; flex-direction: column; gap: 9px; } .item { --mat: var(--inerte); position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--vidrio-hondo); border: 1px solid rgba(255,255,255,.07); border-left: 3px solid var(--mat); transition: transform .22s, background .22s, box-shadow .22s, border-color .22s; } .item.tap { cursor: pointer; } .item.tap:hover { transform: translateX(4px); background: rgba(0,0,0,.45); box-shadow: -8px 0 22px -12px color-mix(in srgb, var(--mat) 45%, transparent); } .item-txt { flex: 1; min-width: 0; } .item-txt .titulo { font-weight: 570; font-size: .95rem; } .item-txt .meta { font-size: .79rem; color: var(--debil); } .hecha .titulo { text-decoration: line-through; color: var(--debil); font-weight: 400; } /* --- Importante y orden a mano (tareas y notas) -------------- */ /* El asa: agarra sólo desde acá, así el resto de la fila —tildar, abrir, editar— sigue funcionando como siempre. touch-action:none le saca la ambigüedad al dedo: sin esto, arrancar el arrastre desde la fila entera compite con el scroll de la página. */ .asa { width: 28px; height: 34px; flex-shrink: 0; margin: -6px 0; display: grid; place-items: center; color: var(--debil); cursor: grab; touch-action: none; border-radius: 8px; transition: color .2s, background .2s; } .asa:hover { color: var(--tenue); background: rgba(255,255,255,.05); } .asa:active { cursor: grabbing; } /* La estrella: nada de semáforo (ya dice "vencida", "al día"...). Se prende con el color de la carrera, grande y con resplandor — el pedido fue "que resalte", no un ícono más. */ .estrella { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; color: var(--debil); background: transparent; border: 1px solid transparent; transition: transform .25s var(--resorte), background .2s, color .2s, border-color .2s; } .estrella:hover { color: var(--tenue); background: rgba(255,255,255,.06); } .estrella .ico { transition: fill .2s; } .estrella[aria-pressed="true"] { color: var(--carrera-2); background: color-mix(in srgb, var(--carrera) 16%, transparent); border-color: color-mix(in srgb, var(--carrera) 40%, transparent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--carrera) 55%, transparent)); } .estrella[aria-pressed="true"] .ico { fill: currentColor; } .estrella:active { transform: scale(.88); } /* La fila o tarjeta importante: un lavado suave de --carrera de punta a punta. El borde de la izquierda sigue siendo el de la materia (--mat): esto tiñe el borde EXTERIOR, no lo reemplaza. */ .item.importante { background: color-mix(in srgb, var(--carrera) 7%, var(--vidrio-hondo)); border-color: color-mix(in srgb, var(--carrera) 30%, rgba(255,255,255,.07)); } /* La fila que se está agarrando: se despega del documento y sigue al dedo. pointer-events:none deja que elementFromPoint "vea a través" de ella para encontrar qué hay debajo. */ .item.arrastrando { position: fixed; z-index: 60; pointer-events: none; margin: 0; box-shadow: 0 28px 60px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12); transform: scale(1.02) rotate(-.3deg); } .placeholder-arrastre { border: 1.5px dashed color-mix(in srgb, var(--carrera) 55%, transparent); border-radius: var(--r-sm); background: color-mix(in srgb, var(--carrera) 6%, transparent); } body.hay-arrastre { -webkit-user-select: none; user-select: none; } .chk { appearance: none; width: 22px; height: 22px; flex-shrink: 0; border: 2px solid rgba(255,255,255,.24); border-radius: 50%; position: relative; transition: transform .35s var(--resorte), background .2s, border-color .2s; } .chk:checked { background: var(--mat); border-color: var(--mat); transform: scale(1.1); } .chk:checked::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg); } .vacio { color: var(--debil); font-size: .91rem; padding: 26px 0; text-align: center; } /* --- Materias ---------------------------------------------- */ .tarjeta-int.tap { cursor: pointer; } .materia-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 9px; } .materia-nombre { font-size: 1.02rem; font-weight: 660; line-height: 1.3; letter-spacing: -.015em; } /* El lapicito de "Personalizar": adentro de .materia-cab (un ítem flex más, no position:absolute) para que nunca le gane lugar a la insignia de estado — con space-between, la insignia sigue siendo siempre el último ítem pegado al borde, se agregue lo que se agregue antes. Transparente hasta el hover/foco, y siempre visible en celular porque ahí no hay hover que lo revele. */ .mat-editar { display: inline-flex; flex-shrink: 0; opacity: 0; transition: opacity .15s; } .tarjeta-int.tap:hover .mat-editar, .tarjeta-int.tap:focus-within .mat-editar { opacity: 1; } @media (hover: none) { .mat-editar { opacity: 1; } } /* La previsualización del panel de Personalizar es la tarjeta real, pero inerte: sin esto, tocarla dispararía "ver-materia" (o de nuevo el lapicito) por encima del propio panel que la muestra. */ .mat-preview { pointer-events: none; } .materia-datos { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; } .dato { font-size: .74rem; color: var(--tenue); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); padding: 3px 10px; border-radius: 999px; } .dato strong { color: var(--texto); font-weight: 680; } /* Una nota en la tarjeta se lee por color antes que por número. */ .dato[data-tono] { border-color: color-mix(in srgb, var(--tono) 30%, transparent); } .dato[data-tono] strong { color: var(--tono); } .dato[data-tono="ok"] { --tono: var(--ok); } .dato[data-tono="media"] { --tono: var(--media); } .dato[data-tono="riesgo"] { --tono: var(--riesgo); } .barra { height: 6px; border-radius: 999px; background: rgba(255,255,255,.09); overflow: hidden; margin-top: 11px; } .barra > i { display: block; height: 100%; border-radius: 999px; background: var(--mat); box-shadow: 0 0 10px color-mix(in srgb, var(--mat) 34%, transparent); transition: width .9s var(--resorte); } .barra[data-tono="media"] > i { background: var(--media); box-shadow: 0 0 10px color-mix(in srgb, var(--media) 30%, transparent); } .barra[data-tono="riesgo"] > i { background: var(--riesgo); box-shadow: 0 0 10px color-mix(in srgb, var(--riesgo) 30%, transparent); } .grupo-anio { margin-top: 26px; } .grupo-anio:first-child { margin-top: 0; } .grupo-anio > h2 { margin-bottom: 12px; display: flex; align-items: center; gap: 12px; } .grupo-anio > h2::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.08); } /* --- Correlativas ------------------------------------------ */ .correlativa { display: flex; align-items: center; gap: 11px; padding: 9px 0; font-size: .89rem; border-bottom: 1px solid rgba(255,255,255,.06); } .correlativa:last-child { border-bottom: none; } .correlativa .marca-est { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: .69rem; font-weight: 800; } .correlativa[data-cumple="si"] .marca-est { background: rgba(50,215,75,.18); color: var(--ok); } .correlativa[data-cumple="no"] .marca-est { background: rgba(255,69,58,.18); color: var(--riesgo); } .correlativa[data-cumple="?"] .marca-est { background: rgba(255,214,10,.18); color: var(--media); } /* --- Segmentos / sub-pestañas ------------------------------ */ /* Scroll horizontal + resplandor: el padding le da lugar al halo y el margen negativo lo devuelve, así los segmentos quedan alineados con el resto de la pantalla igual que antes. Ver --halo. */ .segmentos { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding: var(--halo); margin: calc(var(--halo) * -1); } .segmentos::-webkit-scrollbar { display: none; } /* Mientras la arrastrás con el mouse (ver iniciarEscuchas en app.js): sin `user-select: none` el gesto pinta de azul los nombres de las materias en vez de mover la tira. */ .arrastrando { cursor: grabbing; user-select: none; -webkit-user-select: none; } .arrastrando * { cursor: grabbing; } /* Con el dedo apoyado el navegador anima el desplazamiento y la tira va siempre un instante atrás de donde soltaste. */ .arrastrando { scroll-behavior: auto; } .segmento { padding: 8px 15px; border-radius: 999px; font-size: .82rem; font-weight: 640; border: 1px solid var(--borde); background: var(--vidrio); color: var(--tenue); white-space: nowrap; flex-shrink: 0; transition: transform .28s var(--resorte), background .22s, color .22s, border-color .22s; } .segmento:hover { transform: translateY(-2px); color: var(--texto); } /* El puntito de color hace que la elijas por color antes que por leer el nombre, que es lo que uno hace en el celular. */ .segmento-punto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mat, var(--inerte)); margin-right: 7px; vertical-align: 1px; } .segmento.mas { color: var(--debil); border-style: dashed; } .segmento[aria-pressed="true"] { background: color-mix(in srgb, var(--carrera) 16%, transparent); color: var(--carrera-2); border-color: color-mix(in srgb, var(--carrera) 32%, transparent); box-shadow: none; } /* Selector de tema de marca: cada opción muestra miniatura + texto, para no elegir a ciegas por nombre. */ .temas-logo { flex-wrap: wrap; overflow: visible; } .segmento-tema { min-width: 146px; border-radius: 14px; display: grid; grid-template-columns: 24px 1fr; gap: 9px; align-items: center; text-align: left; padding: 8px 10px; } .segmento-tema[aria-pressed="true"] { background: rgba(255,255,255,.055); color: var(--texto); border-color: color-mix(in srgb, var(--carrera) 26%, rgba(255,255,255,.12)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); } .segmento-ico { width: 24px; height: 24px; display: block; border-radius: 7px; overflow: hidden; isolation: isolate; } .segmento-ico .logo-tema-svg { width: 100%; height: 100%; } .segmento-txt { display: block; line-height: 1.2; } .segmento-txt b { display: block; font-size: .78rem; color: var(--texto); } .segmento-txt span { display: block; font-size: .68rem; color: var(--debil); } /* Sub-pestañas dentro de una vista (Lista / Mapa) */ .subtabs { display: inline-flex; gap: 3px; padding: 4px; border-radius: 14px; background: var(--vidrio-hondo); border: 1px solid rgba(255,255,255,.07); } .subtab { padding: 8px 17px; border-radius: 11px; font-size: .85rem; font-weight: 650; color: var(--tenue); transition: .25s var(--resorte); } .subtab[aria-pressed="true"] { background: var(--vidrio-alto); color: var(--texto); box-shadow: 0 2px 10px rgba(0,0,0,.4); } /* --- Formularios ------------------------------------------- */ .campo { display: flex; flex-direction: column; gap: 6px; } .campo > label { font-size: .81rem; color: var(--tenue); font-weight: 570; } .entrada { width: 100%; padding: 11px 13px; min-height: 44px; background: var(--vidrio-hondo); border: 1px solid var(--borde); border-radius: var(--r-sm); color: var(--texto); transition: border-color .2s, box-shadow .2s; } .entrada:focus { outline: none; border-color: color-mix(in srgb, var(--carrera) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--carrera) 15%, transparent); } .entrada::placeholder { color: var(--debil); } textarea.entrada { resize: vertical; min-height: 110px; line-height: 1.6; } select.entrada { appearance: none; padding-right: 36px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--tenue) 50%), linear-gradient(135deg, var(--tenue) 50%, transparent 50%); background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-size: 5px 5px; background-repeat: no-repeat; } select.entrada:hover { border-color: var(--borde-alto); } /* La lista desplegable la dibuja el sistema operativo y casi no se puede tocar; al menos que no salga blanca sobre la app oscura. */ select.entrada option { background: #12161f; color: var(--texto); } .campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* --- Modal ------------------------------------------------- */ .velo { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.72); backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; animation: aparecer .18s; } @keyframes aparecer { from { opacity: 0; } } @media (min-width: 640px) { .velo { align-items: center; padding: 24px; } } .modal { width: 100%; max-width: 500px; overflow-y: auto; /* Menos la franja del reloj: un modal largo llegaba a taparla. */ max-height: calc(90dvh - var(--cielo)); background: rgba(19,24,38,.96); backdrop-filter: blur(30px); border: 1px solid var(--borde-alto); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 22px 22px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 60px rgba(0,0,0,.8); animation: subir .32s cubic-bezier(.16,1,.3,1); } @keyframes subir { from { transform: translateY(24px); opacity: 0; } } @media (min-width: 640px) { .modal { border-radius: var(--r-lg); padding-bottom: 22px; } } .modal-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .modal-pie { display: flex; gap: 9px; justify-content: flex-end; margin-top: 22px; } .modal-pie .btn { flex: 1; } @media (min-width: 640px) { .modal-pie .btn { flex: 0 1 auto; } } /* --- Dock flotante ----------------------------------------- */ .nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--piso); z-index: 50; display: flex; gap: 5px; padding: 9px; border-radius: 26px; max-width: calc(100vw - 20px); background: rgba(11,16,30,.84); backdrop-filter: blur(30px); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 24px 55px -14px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.16); } .nav-item { --mat: var(--carrera); display: flex; flex-direction: column; align-items: center; gap: 3px; /* Todas del mismo ancho: "Hoy" mide 22 px menos que "Enfoque" y sin esto el botón del agente queda corrido del centro del dock. El número sale de medir: con 62 y este padding, el dock pide 337 de los 355 que hay en un celular de 375, y sigue entrando en uno de 360. */ min-width: 62px; padding: 9px 9px; border-radius: 19px; color: var(--tenue); font-size: .65rem; font-weight: 660; text-decoration: none; transition: transform .3s var(--resorte), background .25s, color .25s; } .nav-item svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .nav-item:hover { transform: translateY(-7px) scale(1.07); color: #fff; background: rgba(255,255,255,.09); } .nav-item[aria-current="page"] { color: #fff; background: color-mix(in srgb, var(--mat) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mat) 32%, transparent); } .nav-item[aria-current="page"] svg { filter: none; } /* El agente, en el medio del dock. No es una pestaña sino una acción: por eso va levantado, sin etiqueta y con el color de la carrera pleno. Sin etiqueta es también lo único que lo hace entrar — con una quinta pestaña de texto el dock se pasa de los 355 px que hay en un celular de 375. */ .nav-agente { position: relative; z-index: 1; display: grid; place-items: center; cursor: pointer; width: 50px; height: 50px; border-radius: 17px; margin: -1px 2px; border: 0; font-family: inherit; color: var(--sobre-carrera); background: linear-gradient(135deg, var(--carrera-2), var(--carrera)); box-shadow: 0 8px 22px color-mix(in srgb, var(--carrera) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .3s var(--resorte), box-shadow .3s ease; } .nav-agente svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 2.1; } .nav-agente:hover { transform: translateY(-6px) scale(1.06); box-shadow: 0 14px 30px color-mix(in srgb, var(--carrera) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.35); } .nav-agente:active { transform: translateY(-2px) scale(.97); } /* El resplandor de atrás. Sin esto es un botón naranja más y no se despega del dock. */ .nav-agente::before { content: ''; position: absolute; inset: -3px; border-radius: 20px; z-index: -1; background: linear-gradient(135deg, #58c6d8, var(--carrera-2), #c96ab0); opacity: .55; filter: blur(5px); } /* ============================================================ Novedades — la burbuja de abajo a la derecha Vive fuera de las pantallas y encima de todo. Se corre por encima del dock: en un celular el dock ocupa el centro de abajo y una burbuja ahí sería intocable. ============================================================ */ .novedades { position: fixed; right: 16px; z-index: 60; /* Los 26 son los mismos que el padding de abajo del body: el dock mide más que --alto-dock por su propio padding, y con menos la burbuja le toca la esquina. */ bottom: calc(26px + var(--alto-dock) + var(--piso)); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } @media (min-width: 861px) { /* En la compu el dock no llega hasta el borde: la burbuja baja a su altura y queda a la mano del mouse. */ .novedades { bottom: calc(14px + var(--piso)); } } .nov-burbuja, .nov-tab { /* Sin esto el navegador interpreta el primer movimiento vertical como scroll de la página y nunca llega a nuestro `pointermove`: el arrastre se sentiría trabado o ni arrancaría en el celular. */ touch-action: none; } /* Mientras se arrastra, sin transición: sigue al dedo en vez de venir detrás con el resorte de siempre, que se siente pegajoso. */ .novedades.nov-arrastrando .nov-burbuja, .novedades.nov-arrastrando .nov-tab { transition: none; } .nov-burbuja { position: relative; display: grid; place-items: center; cursor: pointer; width: 52px; height: 52px; border-radius: 50%; font-family: inherit; color: var(--texto); background: rgba(11,16,30,.86); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid var(--borde-alto); box-shadow: 0 14px 34px rgba(0,0,0,.55); transition: transform .3s var(--resorte), box-shadow .3s ease, border-color .3s ease; } .nov-burbuja:hover { transform: translateY(-4px) scale(1.05); } .nov-burbuja svg { width: 22px; height: 22px; } /* Sin nada nuevo la burbuja no se va: baja el contraste y nada más. El tamaño no se toca — el dedo tiene que encontrar siempre el mismo blanco, esté vacía o llena. */ .nov-burbuja.vacia { background: rgba(11,16,30,.72); border-color: var(--borde); } .nov-burbuja.vacia svg { color: var(--tenue); } .nov-burbuja.vacia:hover svg { color: var(--texto); } /* Con algo sin ver, la burbuja toma el color de la carrera y late una sola vez: alcanza para que la veas sin que quede parpadeando. */ .nov-burbuja.con-novedad { border-color: color-mix(in srgb, var(--carrera) 55%, var(--borde)); box-shadow: 0 14px 34px color-mix(in srgb, var(--carrera) 35%, transparent); animation: nov-latir .7s var(--resorte) 1; } .nov-burbuja.con-novedad svg { color: var(--carrera-2); } @keyframes nov-latir { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } } .nov-globo { position: absolute; top: -3px; right: -3px; min-width: 21px; height: 21px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; font-size: .68rem; font-weight: 780; background: var(--carrera); color: var(--sobre-carrera); border: 2px solid var(--bg); } /* Lo que queda de la burbuja cuando la escondés (mantener apretado): bien chica y apagada — sacarla del medio es el punto — pero nunca invisible, porque un botón que desaparece del todo no se vuelve a encontrar. Sigue avisando con un puntito si hay algo sin ver. */ .nov-tab { position: relative; display: grid; place-items: center; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; font-family: inherit; background: rgba(11,16,30,.6); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--borde); box-shadow: 0 10px 24px rgba(0,0,0,.4); opacity: .65; transition: opacity .2s ease, transform .3s var(--resorte); } .nov-tab:hover, .nov-tab:focus-visible { opacity: 1; transform: scale(1.08); } .nov-tab.con-novedad { opacity: 1; border-color: color-mix(in srgb, var(--carrera) 55%, var(--borde)); box-shadow: 0 10px 24px color-mix(in srgb, var(--carrera) 35%, transparent); } .nov-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--carrera-2); } .nov-girando-chico { width: 15px; height: 15px; } /* Mientras revisa Autogestión. Sin texto: no es una tarea tuya. */ .nov-girando { width: 19px; height: 19px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--carrera) 30%, transparent); border-top-color: var(--carrera-2); animation: nov-girar .8s linear infinite; } @keyframes nov-girar { to { transform: rotate(360deg); } } /* Mientras baja algo en segundo plano. Va arriba de la burbuja, en la misma columna: la burbuja está en todas las pantallas, así que te podés ir a donde quieras y seguir viendo por dónde va. Tocándola se abre el modal de Traer, que es donde está el detalle. */ .nov-progreso { width: min(250px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 7px; cursor: pointer; padding: 10px 13px 11px; border-radius: 15px; font-family: inherit; text-align: left; color: var(--texto); background: rgba(11,16,30,.9); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid var(--borde-alto); box-shadow: 0 14px 34px rgba(0,0,0,.5); animation: nov-entrar .3s var(--resorte); } .nov-progreso-fila { display: flex; align-items: center; gap: 9px; } .nov-progreso .nov-girando { width: 14px; height: 14px; flex: 0 0 auto; } .nov-progreso-tit { font-size: .77rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nov-progreso-det { font-size: .68rem; color: var(--debil); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nov-barra { height: 3px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--carrera) 20%, transparent); } .nov-barra i { display: block; height: 100%; border-radius: 999px; background: var(--carrera-2); transition: width .35s ease; } .nov-panel { width: min(360px, calc(100vw - 32px)); max-height: min(60dvh, 460px); display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r); border: 1px solid var(--borde-alto); background: rgba(11,16,30,.92); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); box-shadow: 0 24px 60px rgba(0,0,0,.7); animation: nov-entrar .22s var(--resorte); } @keyframes nov-entrar { from { opacity: 0; transform: translateY(10px) scale(.97); } } .nov-cab { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 14px 16px; border-bottom: 1px solid var(--borde); } .nov-cab h2 { font-size: .95rem; font-weight: 740; } .nov-cuando { font-size: .7rem; color: var(--debil); margin-left: auto; } .nov-cerrar { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; flex: 0 0 auto; background: var(--vidrio); border: 1px solid var(--borde); color: var(--tenue); font-family: inherit; font-size: .8rem; } .nov-cerrar:hover { color: var(--texto); background: var(--vidrio-alto); } .nov-lista { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 8px; } .nov-vacio { font-size: .82rem; color: var(--debil); line-height: 1.5; padding: 14px 10px; } .nov-item { display: flex; align-items: flex-start; gap: 11px; width: 100%; cursor: pointer; text-align: left; font-family: inherit; padding: 11px 12px; margin-bottom: 3px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; color: var(--texto); transition: background .18s ease, transform .18s var(--resorte); } .nov-item:hover { background: var(--vidrio); transform: translateX(2px); } /* Lo que no viste queda con el punto de color; lo leído se apaga pero no se va: a veces querés volver a mirarlo. */ .nov-item.nueva { background: color-mix(in srgb, var(--m) 10%, transparent); } .nov-item:not(.nueva) { opacity: .62; } .nov-ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--m); background: color-mix(in srgb, var(--m) 15%, transparent); border: 1px solid color-mix(in srgb, var(--m) 30%, transparent); } .nov-ico svg { width: 15px; height: 15px; } .nov-cuerpo { min-width: 0; flex: 1; } .nov-tit { display: block; font-size: .83rem; font-weight: 700; } .nov-det { display: block; font-size: .77rem; color: var(--tenue); line-height: 1.45; margin-top: 2px; } .nov-hora { flex: 0 0 auto; font-size: .68rem; color: var(--debil); } .nov-pie { flex: 0 0 auto; padding: 9px 12px; border-top: 1px solid var(--borde); text-align: right; } .nov-limpiar { cursor: pointer; font-family: inherit; font-size: .76rem; font-weight: 640; color: var(--tenue); background: none; border: 0; padding: 4px 6px; } .nov-limpiar:hover { color: var(--texto); } /* La tarjeta de nota nueva, arriba de todo en Hoy. */ .nota-nueva { position: relative; overflow: hidden; margin-bottom: 16px; border-radius: var(--r); padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--carrera) 38%, var(--borde)); background: radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--carrera) 20%, transparent) 0%, transparent 60%), var(--vidrio); } .nota-nueva-cab { display: flex; align-items: center; gap: 9px; font-size: .88rem; font-weight: 740; margin-bottom: 11px; } .nota-nueva-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--carrera-2); box-shadow: 0 0 12px var(--carrera-2); } .nota-nueva-lista { list-style: none; display: flex; flex-direction: column; gap: 6px; } .nota-nueva-lista li { position: relative; padding-left: 14px; font-size: .87rem; color: var(--tenue); line-height: 1.5; } .nota-nueva-lista li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--m); } .nota-nueva-pie { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } /* --- El parcial que se viene ------------------------------- */ /* Todo esto vive DENTRO de .tarjeta.destacado, que ya pone la franja, el título, la fecha y la insignia de días. Acá abajo va sólo el cruce: qué entra, quién lo dijo y qué de eso no te sale. */ /* Las pestañas de los próximos parciales. Sin contenedor con scroll a propósito: `overflow-x: auto` recorta el halo en cuadrado, y escribir `overflow-y: visible` no salva porque el navegador lo computa `auto` igual. Con dos o tres entran; si fueran más, se envuelven. */ .par-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 14px; } .par-tab { font: inherit; cursor: pointer; font-size: .79rem; font-weight: 600; border-radius: 999px; padding: 5px 12px; background: transparent; border: 1px solid var(--borde); color: var(--tenue); display: inline-flex; align-items: center; gap: 7px; transition: border-color .18s, color .18s, background .18s; } .par-tab:hover { color: var(--texto); } .par-tab[aria-selected="true"] { background: color-mix(in srgb, var(--m) 14%, transparent); border-color: color-mix(in srgb, var(--m) 45%, transparent); color: var(--texto); } .par-tab i { width: 7px; height: 7px; border-radius: 50%; background: var(--m); flex: none; } /* El sello de dónde salió el alcance. SIN colores de semáforo: la insignia de días ya usa verde/ámbar/rojo para urgencia, y dos semáforos con significados distintos en la misma tarjeta hacen que ninguno signifique nada. Acá la palabra carga el sentido. */ .par-sello { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--texto); margin-top: 14px; padding-bottom: 9px; margin-bottom: 11px; border-bottom: 1px solid var(--borde); } .par-sello span { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .78rem; color: var(--debil); } .par-sello.sin { color: var(--debil); } .par-cita { font-size: .91rem; line-height: 1.6; color: var(--texto); border-left: 2px solid color-mix(in srgb, var(--mat) 55%, transparent); padding-left: 12px; margin-bottom: 14px; } .par-clases { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .par-clases li { position: relative; padding-left: 15px; font-size: .87rem; color: var(--tenue); line-height: 1.5; } .par-clases li::before { content: ''; position: absolute; left: 0; top: .58em; width: 5px; height: 5px; border-radius: 50%; background: var(--mat); opacity: .65; } .par-clases li b { color: var(--texto); font-weight: 600; } .par-clases-modal { max-height: none; margin-top: 14px; } .par-clases-modal li.es-examen b { color: var(--carrera-2); } .par-mini { font-size: .78rem; color: var(--debil); } .par-aclara { margin: -8px 0 14px; } .par-rot { font-size: .86rem; color: var(--tenue); margin-bottom: 8px; } .par-rot b { color: var(--texto); } .par-flojos { display: flex; flex-wrap: wrap; gap: 7px; } .par-nodo { font-size: .82rem; border-radius: 999px; padding: 4px 11px; background: color-mix(in srgb, var(--riesgo) 13%, transparent); border: 1px solid color-mix(in srgb, var(--riesgo) 32%, transparent); color: color-mix(in srgb, var(--riesgo) 68%, var(--texto)); } /* Que la cátedra no cargue el temario no es una falla de la app. Sin explicar qué es el temario, ese estado se lee como que algo se rompió — y nadie sabe que esa página de Autogestión existe. */ .par-explica { font-size: .87rem; color: var(--tenue); line-height: 1.6; background: color-mix(in srgb, var(--media) 7%, transparent); border: 1px solid color-mix(in srgb, var(--media) 22%, transparent); border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 14px; } .par-explica b { color: var(--texto); } .par-barra { height: 5px; border-radius: 999px; background: var(--borde); overflow: hidden; margin: 10px 0 7px; } .par-barra i { display: block; height: 100%; background: var(--media); border-radius: 999px; } /* --- Aviso ------------------------------------------------- */ .aviso { display: flex; gap: 11px; align-items: flex-start; border-radius: var(--r-sm); padding: 13px 15px; font-size: .89rem; background: color-mix(in srgb, var(--tono, var(--media)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tono, var(--media)) 30%, transparent); } .aviso b { color: var(--tono, var(--media)); flex-shrink: 0; } .aviso[data-tono="ok"] { --tono: var(--ok); } /* --- Toast ------------------------------------------------- */ .toast { position: fixed; z-index: 80; left: 50%; transform: translateX(-50%); bottom: calc(var(--alto-dock) + 24px + var(--piso)); padding: 12px 20px; border-radius: 20px; background: rgba(255,255,255,.95); color: #0a0d16; font-size: .86rem; font-weight: 680; box-shadow: 0 14px 40px rgba(0,0,0,.6); animation: sube .25s var(--resorte); } @keyframes sube { from { opacity: 0; transform: translate(-50%, 14px); } } /* Se puede tocar para sacarlo, así que se ve que se puede tocar. */ .toast { display: flex; align-items: center; gap: 14px; cursor: pointer; width: max-content; max-width: min(520px, calc(100vw - 32px)); } /* Antes iba en una sola línea con puntos suspensivos: en el celular, cualquier cartel que dijera algo (el de la condición de una materia, por ejemplo) se cortaba a la mitad y no había forma de leer el final. Ahora baja de renglón — por eso el borde dejó de ser píldora: con dos líneas, una curva de 999px se come las esquinas del texto. */ .toast > span { line-height: 1.4; overflow-wrap: anywhere; text-align: center; } .toast-deshacer { flex-shrink: 0; padding: 5px 13px; border-radius: 999px; font-size: .79rem; font-weight: 730; letter-spacing: -.01em; color: #fff; background: #0a0d16; transition: transform .25s var(--resorte), filter .2s; } .toast-deshacer:hover { filter: brightness(1.5); } .toast-deshacer:active { transform: scale(.94); } /* La flecha del acceso directo: mismo gris apagado que el resto del cartel, para no competir con el botón Deshacer, que es el que de verdad tiene urgencia. */ .toast-flecha { flex-shrink: 0; color: #0a0d16; opacity: .38; font-size: 1.05rem; font-weight: 800; } .toast-clic:hover .toast-flecha { opacity: .7; } /* --- Mapa de correlativas ---------------------------------- */ .mapa-caja { background: var(--vidrio); backdrop-filter: blur(28px); border: 1px solid var(--borde); border-radius: var(--r); overflow: hidden; box-shadow: 0 20px 50px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.09); } .mapa-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.07); } .mapa-leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: .78rem; color: var(--tenue); } .mapa-leyenda span { display: inline-flex; align-items: center; gap: 6px; } .mapa-leyenda i { width: 9px; height: 9px; border-radius: 3px; display: block; } .l-apr { background: var(--ok); } .l-cur { background: var(--carrera); } .l-hab { background: var(--media); } .l-blo { background: #39414f; } .mapa-zoom { display: flex; gap: 6px; flex-wrap: wrap; } .mapa-zoom .btn { min-width: 38px; } .mapa-zoom [data-electivas][aria-pressed="true"] { background: color-mix(in srgb, var(--carrera) 11%, transparent); border-color: color-mix(in srgb, var(--carrera) 45%, transparent); color: var(--carrera-2); } .pista-avance { height: 5px; background: rgba(255,255,255,.06); display: flex; } .pista-avance i { display: block; height: 100%; transition: width 1s var(--resorte); } .mapa-lienzo { position: relative; height: 62vh; min-height: 340px; max-height: 640px; overflow: hidden; cursor: grab; touch-action: none; /* Arrastrar el mapa hacia abajo no tiene que recargar la página ni mover la pantalla de atrás: el gesto es del mapa. */ overscroll-behavior: contain; background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0) 0 0 / 26px 26px; } .mapa-lienzo.agarrando { cursor: grabbing; } /* El `svg { max-width: 100% }` de la base achicaba el mapa de 1086 px a los 337 de un celular y lo dibujaba al 31% adentro de una caja con bandas vacías arriba y abajo: las fichas quedaban de 44×9 px y el zoom mentía, porque toda la cuenta de arrastre usa el ancho real. Acá el tamaño lo manda el transform, no el contenedor. */ .mapa-lienzo .mapa { transform-origin: 0 0; will-change: transform; max-width: none; } .mapa-nivel { fill: var(--debil); font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; } .arista { stroke: #232a38; stroke-width: 1.4; fill: none; transition: stroke .25s, stroke-width .25s, opacity .25s; } .arista.viva { stroke: var(--media); stroke-width: 2.2; filter: none; } .arista.apagada { opacity: .12; } .nodo { cursor: pointer; } .nodo rect { stroke-width: 1.3; transition: opacity .25s; } .nodo text { font-size: 11.5px; font-weight: 600; fill: var(--texto); pointer-events: none; letter-spacing: -.01em; } .nodo .cod { font-size: 9.5px; font-weight: 800; fill: rgba(255,255,255,.45); } .nodo.apagado { opacity: .15; } .nodo.elegido rect { stroke-width: 2.4; } /* La materia fijada con un toque se marca más fuerte que la que sólo estás mirando de paso. */ .mapa.con-eleccion .nodo.elegido rect { stroke: #fff; stroke-width: 2.6; filter: drop-shadow(0 0 5px rgba(255,255,255,.3)); } .n-apr rect { fill: rgba(50,215,75,.16); stroke: rgba(50,215,75,.5); } .n-apr text { fill: #b9f5c4; } .n-cur rect { fill: color-mix(in srgb, var(--carrera) 20%, transparent); stroke: color-mix(in srgb, var(--carrera) 60%, transparent); } .n-cur text { fill: #ffd9c2; } .n-hab rect { fill: rgba(255,214,10,.14); stroke: rgba(255,214,10,.6); } .n-hab text { fill: #ffeC9b; } .n-blo rect { fill: #131926; stroke: #29313f; } .n-blo text { fill: #79839a; } .pulso { animation: latido 2.4s ease-in-out infinite; } @keyframes latido { 0%, 100% { opacity: .82; } 50% { opacity: 1; } } .mapa-ayuda { font-size: .74rem; color: var(--debil); text-align: center; padding: 10px; border-top: 1px solid rgba(255,255,255,.07); } .mapa-ayuda kbd { font-family: ui-monospace, monospace; font-size: .68rem; background: rgba(255,255,255,.09); border: 1px solid var(--borde); padding: 1px 5px; border-radius: 5px; } /* La ayuda es distinta con dedo que con mouse: en un celular no hay rueda ni Ctrl, y leer "Ctrl + rueda" ahí es ruido. */ .mapa-ayuda .ayuda-dedo { display: none; } @media (hover: none) { .mapa-ayuda .ayuda-mouse { display: none; } .mapa-ayuda .ayuda-dedo { display: inline; } /* 38 px es el mínimo cómodo para un mouse, no para un pulgar. */ .mapa-zoom .btn { min-width: 46px; min-height: 42px; } .mapa-barra { padding: 12px; } } .mapa-panel { margin-top: 13px; min-height: 150px; /* Al elegir una materia el panel se trae a la vista solo. Sin estos márgenes de scroll queda pegado abajo de la cabecera o tapado por el dock. */ scroll-margin-top: calc(var(--alto-cab) + var(--cielo) + 10px); scroll-margin-bottom: calc(var(--alto-dock) + 26px + var(--piso)); } /* --- Modo enfoque ------------------------------------------ */ .enfoque-grilla { display: grid; gap: 13px; grid-template-columns: 1fr; align-items: start; } @media (min-width: 900px) { .enfoque-grilla { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } } .titulo-chico { font-size: 1rem; font-weight: 660; letter-spacing: -.015em; } .reloj-caja { padding: 26px 20px 22px; text-align: center; border-radius: var(--r-lg); } .reloj-aro { position: relative; width: 236px; max-width: 78vw; margin: 0 auto 4px; } .reloj-aro svg { width: 100%; height: auto; display: block; transform: rotate(-90deg); } .reloj-aro circle { fill: none; stroke-width: 9; stroke-linecap: round; } .reloj-aro .fondo { stroke: rgba(255,255,255,.07); } .reloj-aro .valor { stroke: var(--mat); transition: stroke-dashoffset .3s linear, stroke .4s; } /* Sólo cuando corre se enciende: en pausa el aro queda apagado y se nota de un vistazo, sin leer nada. */ .reloj-caja.corriendo .reloj-aro svg { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--mat) 32%, transparent)); } .reloj-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .reloj-fase { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mat); } .reloj-centro b { font-size: clamp(2.5rem, 13vw, 3.2rem); font-weight: 750; letter-spacing: -.045em; line-height: 1; } .reloj-ciclo { font-size: .74rem; color: var(--debil); } .reloj-materia { margin-top: 10px; font-size: .92rem; font-weight: 570; color: var(--tenue); } .reloj-botones { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 18px; } .reloj-botones .btn { min-width: 104px; } /* En celular los tres entran en una fila repartiéndose el ancho. */ @media (max-width: 480px) { .reloj-botones .btn { flex: 1; min-width: 0; padding: 11px 8px; } } /* --- Sonidos ----------------------------------------------- */ .sonidos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; } .sonido { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: var(--r-sm); background: var(--vidrio); border: 1px solid var(--borde); color: var(--tenue); font-size: .85rem; font-weight: 570; text-align: left; transition: transform .25s var(--resorte), background .25s, border-color .25s, color .25s; } .sonido:hover { transform: translateY(-2px); color: var(--texto); border-color: var(--borde-alto); } .sonido-ico { font-size: 1.15rem; line-height: 1; } .sonido[aria-pressed="true"] { color: var(--texto); background: color-mix(in srgb, var(--carrera) 13%, transparent); border-color: color-mix(in srgb, var(--carrera) 42%, transparent); } /* Late mientras suena: es la única señal de que está prendido si tenés el volumen bajo. */ .sonido[aria-pressed="true"] .sonido-ico { animation: latido 2.4s ease-in-out infinite; } .volumen { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: rgba(255,255,255,.11); outline: none; } .volumen::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 19px; height: 19px; border-radius: 50%; cursor: pointer; background: var(--carrera-2); box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 12px color-mix(in srgb, var(--carrera) 45%, transparent); } .volumen::-moz-range-thumb { width: 19px; height: 19px; border: none; border-radius: 50%; cursor: pointer; background: var(--carrera-2); } /* --- Métricas chicas (3 en fila, también en celular) -------- */ .metricas-3 { grid-template-columns: repeat(3, 1fr); } .metrica.chica { padding: 15px 10px; } .metrica.chica b { display: block; font-size: 1.16rem; font-weight: 750; letter-spacing: -.03em; color: var(--mat); margin-bottom: 3px; } /* --- Presupuesto de faltas --------------------------------- La barra tiene el futuro adentro: sólido lo que ya gastaste, rayado a dónde vas a llegar, una línea blanca en el tope. */ .faltas-pista { position: relative; height: 15px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.07); overflow: hidden; } .faltas-usado { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--tono); box-shadow: 0 0 14px color-mix(in srgb, var(--tono) 45%, transparent); transition: width .8s var(--resorte); } /* Rayado = proyección. Tiene que leerse distinto de lo que ya pasó. */ .faltas-proyectado { position: absolute; top: 0; bottom: 0; border-radius: 0 999px 999px 0; background: repeating-linear-gradient(115deg, color-mix(in srgb, var(--tono) 42%, transparent) 0 5px, transparent 5px 11px); transition: left .8s var(--resorte), width .8s var(--resorte); } .faltas-tope { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--texto); box-shadow: 0 0 8px rgba(255,255,255,.5); transition: left .8s var(--resorte); } .faltas-leyenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: .74rem; color: var(--debil); } .faltas-leyenda span { display: inline-flex; align-items: center; gap: 6px; } .faltas-llave { width: 15px; height: 9px; border-radius: 3px; flex-shrink: 0; } .faltas-llave.solido { background: var(--tenue); } .faltas-llave.rayado { background: repeating-linear-gradient(115deg, var(--tenue) 0 4px, transparent 4px 8px); } .faltas-llave.linea { width: 2px; height: 13px; border-radius: 0; background: var(--texto); } .faltas-titular { font-size: 1.02rem; font-weight: 680; letter-spacing: -.015em; margin-top: 16px; } .faltas-titular[data-estado="ok"] { color: color-mix(in srgb, var(--ok) 82%, #fff); } .faltas-titular[data-estado="cerrado"] { color: color-mix(in srgb, var(--ok) 82%, #fff); } .faltas-titular[data-estado="media"] { color: color-mix(in srgb, var(--media) 88%, #fff); } .faltas-titular[data-estado="riesgo"] { color: color-mix(in srgb, var(--riesgo) 85%, #fff); } .faltas-titular[data-estado="libre"] { color: color-mix(in srgb, var(--riesgo) 85%, #fff); } .faltas-sub { color: var(--tenue); font-size: .88rem; margin-top: 5px; } .faltas-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 16px; } .faltas-cifra { background: rgba(255,255,255,.045); border: 1px solid var(--borde); border-radius: var(--r-sm); padding: 10px 11px; } .faltas-cifra b { display: block; font-size: 1.12rem; font-weight: 740; letter-spacing: -.03em; } .faltas-cifra span { font-size: .71rem; color: var(--debil); } /* El aviso de Hoy se tiñe del estado, no de la materia: si está en rojo tiene que gritar rojo aunque la materia sea verde. */ .faltas-aviso { margin-bottom: 16px; border-color: color-mix(in srgb, var(--tono) 26%, var(--borde)); } .faltas-aviso .franja { background: var(--tono); box-shadow: 0 0 14px color-mix(in srgb, var(--tono) 40%, transparent); } .faltas-aviso[data-estado="riesgo"], .faltas-aviso[data-estado="libre"] { background: color-mix(in srgb, var(--riesgo) 7%, var(--vidrio)); } /* --- Elegir materia (reemplaza al