/* ============ PARNASO — tokens ============ */ :root { --negro: #0C0B0A; --desk: #100F0D; --crema: #F2E9DA; --crema-alta: #FFFDF7; --crema-baja: #E9DFCB; --linea: #DED5C4; --linea-2: #C9C0AE; --dashed: #A79F91; --linea-negro: #3A3630; --sec: #6E675C; --sec-negro: #8A857A; --sec-negro-2: #CFC7B8; --inactivo: #7A756B; --cuerpo: #3A3630; --fuente: #1B3CFF; --nota: #C6F24E; --idea: #E8318E; --afirmacion: #FF4A17; --pregunta: #FFC400; --documento: #0C0B0A; --serif: 'Instrument Serif', Georgia, serif; --sans: 'Bricolage Grotesque', system-ui, sans-serif; --mono: 'Space Mono', ui-monospace, monospace; --negro-2: #1A1816; --linea-mapa: #5A544B; --pulso: 2.4s; --tab-h: 74px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); } /* ============ Modo calmo ============ Misma estructura, colores amables: azul grisáceo, salvia, rosa viejo, terracota suave, arena, carbón cálido. */ :root[data-modo="calmo"] { --negro: #2A2724; --negro-2: #353029; --desk: #1F1D1B; --crema: #F3EEE6; --crema-alta: #FBF8F3; --crema-baja: #E6DED1; --linea: #DDD4C6; --linea-2: #CBC2B3; --dashed: #ADA496; --linea-negro: #4A443E; --sec: #736C62; --sec-negro: #9D968B; --sec-negro-2: #D8D1C5; --inactivo: #8E887D; --cuerpo: #433E38; --fuente: #5A71A3; --nota: #BCCDA3; --idea: #D89CAE; --afirmacion: #E2A488; --pregunta: #E9CD94; --documento: #2A2724; --linea-mapa: #655F57; --pulso: 5s; } :root[data-modo="calmo"] .tile, :root[data-modo="calmo"] .fila, :root[data-modo="calmo"] .proy-card { transition: transform .2s ease; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } ::selection { background: var(--nota); color: var(--desk); } html, body { margin: 0; height: 100%; } body { background: var(--desk); font-family: var(--sans); color: var(--negro); -webkit-font-smoothing: antialiased; overscroll-behavior: none; } button { font: inherit; color: inherit; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } @keyframes pulso { 0%,100% { opacity: .25 } 50% { opacity: 1 } } /* ============ Marco de la app ============ */ #app { position: relative; max-width: 480px; height: 100vh; height: 100dvh; margin: 0 auto; overflow: hidden; background: var(--crema); } @media (min-width: 520px) { body { padding: 0; } #app { box-shadow: 0 0 0 1px #1d1b18, 0 30px 90px rgba(0,0,0,.5); } } #screen { position: absolute; inset: 0 0 calc(var(--tab-h) + var(--safe-b)) 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; background: var(--crema); } #screen.sin-tabs { bottom: 0; } #screen.oscuro { background: var(--negro); } .mono { font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; } .serif { font-family: var(--serif); font-weight: 400; } .it { font-style: italic; } .vacio-alto { height: 26px; } /* ============ Cabecera negra de proyecto ============ */ .cabecera { background: var(--negro); color: var(--crema); padding: calc(18px + var(--safe-t)) 20px 0; position: relative; } .cabecera .fila-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--sec-negro); } .cabecera .fila-top button { background: none; border: none; padding: 6px 0; margin: -6px 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; } .estado-vivo { color: var(--nota); } .estado-pausa { color: var(--pregunta); } .estado-cerrado { color: var(--sec-negro); } .titulo-proy { display: flex; align-items: flex-end; gap: 8px; margin-top: 6px; } .titulo-proy h1 { margin: 0; font-family: var(--serif); font-size: 56px; line-height: .88; letter-spacing: -.02em; font-weight: 400; text-wrap: balance; overflow-wrap: anywhere; background: none; border: none; padding: 0; color: inherit; text-align: left; cursor: pointer; } .titulo-proy h1 .it { color: var(--nota); } .lateral { font-family: var(--mono); font-size: 9px; line-height: 1.5; color: var(--sec-negro); padding-bottom: 10px; writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .1em; text-transform: uppercase; flex: none; max-height: 120px; overflow: hidden; } .bajada { margin: 14px 0 0; max-width: 290px; font-size: 13px; line-height: 1.45; color: var(--sec-negro-2); } .chips-proy { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding-bottom: 36px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; } .chips-proy > * { padding: 5px 9px; white-space: nowrap; } .chip-personas { background: var(--crema); color: var(--negro); border-radius: 20px 20px 20px 4px; } .chip-mov { border: 1px solid var(--linea-negro); color: var(--sec-negro-2); border-radius: 4px 20px 20px 20px; } .chip-tension { background: var(--idea); color: var(--negro); border-radius: 20px; } .chip-editar { border: 1px dashed var(--linea-negro); color: var(--sec-negro); border-radius: 20px 4px 20px 20px; background: none; font: inherit; letter-spacing: inherit; } .muesca { position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; background: var(--crema); border-radius: 26px 0 0 0; } /* ============ Mosaico ============ */ .seccion { padding: 14px 20px 0; } .rotulo { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--sec); } .mosaico { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(64px, auto); gap: 8px; margin-top: 12px; } .tile { border: none; text-align: left; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; font-family: var(--sans); min-height: 64px; transition: transform .12s ease, box-shadow .12s ease; } .tile:active { transform: scale(.97); } .tile .lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; } .tile .num { font-size: 38px; line-height: .8; font-weight: 600; letter-spacing: -.04em; } .tile.activo { box-shadow: 0 0 0 2px var(--crema), 0 0 0 4px var(--negro); } .t-fuente { grid-column: span 2; grid-row: span 2; background: var(--fuente); color: var(--crema); border-radius: 22px 22px 6px 22px; padding: 14px; } .t-fuente .lbl { font-size: 10px; letter-spacing: .12em; } .t-fuente .num { font-size: 72px; letter-spacing: -.05em; } .t-fuente .sub { font-size: 11px; line-height: 1.3; opacity: .85; } .t-nota { background: var(--nota); color: var(--negro); border-radius: 6px 22px 6px 22px; } .t-idea { background: var(--negro); color: var(--crema); border-radius: 22px 6px 22px 6px; } .t-idea .lbl { color: var(--idea); } .t-afirmacion { grid-column: span 2; background: var(--afirmacion); color: var(--negro); border-radius: 6px 6px 26px 26px; padding: 12px 14px; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; } .t-afirmacion .txt { font-size: 11px; line-height: 1.25; max-width: 140px; } .t-afirmacion .txt span { opacity: .7; } .t-afirmacion .num { font-size: 44px; } .t-pregunta { background: var(--pregunta); color: var(--negro); border-radius: 26px 6px 6px 26px; } .t-documento { background: var(--negro); color: var(--crema); border-radius: 6px 22px 22px 22px; flex-direction: row; align-items: center; justify-content: space-between; min-height: 44px; padding: 10px 12px; } .t-documento .num { font-size: 26px; } .btn-todo { grid-column: span 2; border: 1px dashed var(--dashed); background: transparent; color: var(--sec); border-radius: 16px; padding: 9px; min-height: 44px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; } .btn-todo.activo { border-style: solid; border-color: var(--negro); color: var(--negro); } /* ============ Constelación ============ */ .constelacion { margin: 20px 12px 0; background: var(--negro); border-radius: 28px; padding: 16px 16px 12px; color: var(--crema); position: relative; overflow: hidden; } .constelacion .rotulo { color: var(--sec-negro); letter-spacing: .12em; } .constelacion .rotulo b { color: var(--nota); font-weight: 400; letter-spacing: .02em; } .constelacion .frase { font-family: var(--serif); font-size: 26px; line-height: 1.05; margin: 8px 0 12px; max-width: 270px; } .constelacion .frase em { color: var(--pregunta); } .constelacion svg { display: block; width: calc(100% + 8px); height: 132px; margin: 0 -4px; } .btn-crema { width: 100%; margin-top: 6px; background: var(--crema); color: var(--negro); border: none; border-radius: 6px 6px 20px 20px; padding: 13px 11px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; } /* ============ Feed ============ */ .feed { padding: 24px 20px 0; } .feed-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .feed-cab h2 { margin: 0; font-family: var(--serif); font-size: 30px; font-weight: 400; letter-spacing: -.01em; line-height: 1; } .feed-cab span { font-family: var(--mono); font-size: 10px; color: var(--sec); letter-spacing: .08em; white-space: nowrap; } .lista { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .fila { border: none; text-align: left; background: var(--crema-alta); padding: 0; display: flex; box-shadow: 0 1px 0 var(--linea); overflow: hidden; width: 100%; } .fila:active { background: #fff; } .fila .barra { width: 8px; flex: none; } .fila .cuerpo { padding: 12px 14px 13px; flex: 1; min-width: 0; } .fila .meta { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sec); } .fila .meta span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fila .meta span:last-child { white-space: nowrap; } .fila .tit { font-size: 16px; line-height: 1.25; margin-top: 5px; font-weight: 500; text-wrap: pretty; overflow-wrap: anywhere; } .chips-fila { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; } .chip-borde { border: 1px solid var(--negro); padding: 3px 7px; border-radius: 12px; } .chip-fondo { background: var(--crema-baja); padding: 3px 7px; border-radius: 12px; } .chip-proy { color: var(--sec); padding: 3px 0; } /* Vacío */ .vacio { margin-top: 14px; background: var(--crema-alta); border-radius: 20px 20px 6px 20px; padding: 22px 20px; box-shadow: 0 1px 0 var(--linea); } .vacio .serif { font-size: 26px; line-height: 1.05; } .vacio p { font-size: 13px; line-height: 1.45; color: var(--cuerpo); margin: 10px 0 16px; } .btn-negro { background: var(--negro); color: var(--crema); border: none; border-radius: 18px 18px 6px 18px; padding: 13px 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; min-height: 44px; } .btn-linea { background: transparent; border: 1px solid var(--negro); color: var(--negro); border-radius: 18px; padding: 13px 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; min-height: 44px; } .btn-rosa { background: var(--idea); color: var(--negro); border: none; border-radius: 20px 20px 20px 6px; padding: 13px 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; min-height: 44px; } .btn-peligro { border-color: var(--afirmacion) !important; color: var(--afirmacion) !important; } .btn-peligro.lleno { background: var(--afirmacion) !important; color: var(--negro) !important; } /* ============ Tab bar ============ */ #tabbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 45; height: calc(var(--tab-h) + var(--safe-b)); padding: 0 16px calc(8px + var(--safe-b)); background: var(--negro); display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; } #tabbar.oculto { display: none; } #tabbar a { color: var(--inactivo); text-decoration: none; min-width: 56px; min-height: 44px; display: flex; align-items: center; justify-content: center; } #tabbar a.on { color: var(--nota); } #tabbar .mas { width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--idea); color: var(--negro); font-size: 22px; line-height: 1; margin-bottom: 6px; font-family: var(--sans); flex: none; } /* ============ Hoja (bottom sheet) ============ */ #sheet:empty { display: none; } .velo { position: absolute; inset: 0; background: rgba(12,11,10,.55); z-index: 50; animation: fundido .26s ease both; } .hoja { position: absolute; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--crema); border-radius: 30px 30px 0 0; overflow: hidden; max-height: 88%; display: flex; flex-direction: column; animation: subir .26s cubic-bezier(.2,.8,.2,1) both; } .saliendo .velo { animation: fundido-out .2s ease both; } .saliendo .hoja { animation: bajar .2s ease both; } @keyframes subir { from { transform: translateY(100%) } to { transform: none } } @keyframes bajar { from { transform: none } to { transform: translateY(100%) } } @keyframes fundido { from { opacity: 0 } to { opacity: 1 } } @keyframes fundido-out { from { opacity: 1 } to { opacity: 0 } } .hoja-cab { padding: 16px 20px 18px; color: var(--negro); flex: none; } .hoja-cab.tinta-crema { color: var(--crema); } .hoja-cab .fila-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; } .hoja-cab .fila-top > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .btn-cerrar { flex: none; background: var(--negro); color: var(--crema); border: none; border-radius: 12px; padding: 6px 11px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: lowercase; } .tinta-crema .btn-cerrar { background: var(--crema); color: var(--negro); } .hoja-cab .tit { font-family: var(--serif); font-size: 32px; line-height: 1.02; margin-top: 10px; overflow-wrap: anywhere; } .hoja-cuerpo { padding: 16px 20px calc(24px + var(--safe-b)); overflow-y: auto; -webkit-overflow-scrolling: touch; } .hoja-cuerpo p.txt { margin: 0; font-size: 14px; line-height: 1.5; color: var(--cuerpo); white-space: pre-wrap; overflow-wrap: anywhere; } .hoja-cuerpo p.txt.vacio-txt { color: var(--sec); font-style: italic; } .rot { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--sec); margin: 18px 0 8px; } .ficha { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-top: 14px; font-size: 13px; line-height: 1.35; color: var(--cuerpo); } .ficha dt { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--sec); padding-top: 3px; } .ficha dd { margin: 0; overflow-wrap: anywhere; } .ficha a { color: var(--fuente); } .enlaces { display: flex; flex-direction: column; gap: 7px; } .enlace { display: flex; align-items: center; gap: 10px; background: var(--crema-alta); border-radius: 14px 6px 14px 6px; padding: 6px 6px 6px 12px; min-height: 44px; } .enlace .ir { flex: 1; display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 4px 0; text-align: left; min-width: 0; } .punto { width: 10px; height: 10px; border-radius: 50%; flex: none; } .punto.negro { box-shadow: inset 0 0 0 1px var(--negro); } .enlace .t { font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; } .enlace .t small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--sec); margin-bottom: 2px; } .rel-contradice { color: var(--idea) !important; } .quitar { flex: none; width: 32px; height: 32px; border-radius: 10px; border: none; background: transparent; color: var(--sec); font-size: 16px; line-height: 1; } .acciones { display: flex; gap: 8px; margin-top: 16px; } .acciones .btn-negro { flex: 1; } .acciones-2 { display: flex; gap: 8px; margin-top: 8px; } .acciones-2 button { flex: 1; } .btn-suave { background: transparent; border: 1px dashed var(--dashed); color: var(--sec); border-radius: 14px; padding: 11px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; min-height: 44px; } /* ============ Formularios ============ */ .campo { display: block; margin-top: 14px; } .campo > span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--sec); margin-bottom: 6px; } .campo input, .campo textarea, .campo select { width: 100%; border: 1px solid var(--linea-2); background: var(--crema-alta); border-radius: 14px 6px 14px 14px; padding: 12px 13px; font-size: 16px; line-height: 1.4; color: var(--negro); outline: none; } .campo textarea { resize: vertical; min-height: 96px; } .campo input:focus, .campo textarea:focus { border-color: var(--negro); } .campo .grande { font-family: var(--serif); font-size: 26px; line-height: 1.1; min-height: 70px; } .fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .fila-campos .campo { margin-top: 14px; } .opciones { display: flex; flex-wrap: wrap; gap: 6px; } .opcion { border: 1px solid var(--negro); background: transparent; color: var(--negro); border-radius: 14px; padding: 8px 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; min-height: 36px; } .opcion.on { background: var(--negro); color: var(--crema); } .nota-form { font-size: 12px; color: var(--sec); line-height: 1.4; margin: 8px 0 0; } /* Selector de tipo (capturar) */ .tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; } .tipo-btn { border: none; text-align: left; padding: 14px; min-height: 92px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; } .tipo-btn:active { transform: scale(.97); } .tipo-btn .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; } .tipo-btn .d { font-size: 12px; line-height: 1.3; opacity: .85; } /* Picker de conexiones */ .buscador { width: 100%; border: 1px solid var(--linea-2); background: var(--crema-alta); border-radius: 16px; padding: 12px 14px; font-size: 16px; outline: none; margin-top: 12px; } .buscador:focus { border-color: var(--negro); } .picker { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } .picker button { display: flex; align-items: center; gap: 10px; background: var(--crema-alta); border: none; border-radius: 14px 6px 14px 6px; padding: 10px 12px; text-align: left; min-height: 48px; } .picker .t { font-size: 13px; line-height: 1.3; } .picker .t small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--sec); } /* ============ Proyectos / Yo (fondo negro) ============ */ .pantalla-negra { background: var(--negro); color: var(--crema); min-height: 100%; padding: calc(28px + var(--safe-t)) 20px 32px; } .pantalla-negra .kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--sec-negro); display: flex; justify-content: space-between; gap: 10px; } .pantalla-negra .kicker a, .pantalla-negra .kicker button { color: var(--sec-negro); text-decoration: none; background: none; border: none; font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 8px 0; margin: -8px 0; } .pantalla-negra h1 { margin: 10px 0 26px; font-family: var(--serif); font-weight: 400; font-size: 52px; line-height: .9; letter-spacing: -.02em; } .pantalla-negra h1 .it { color: var(--nota); } .proyectos { display: flex; flex-direction: column; gap: 10px; } .proy-card { display: flex; flex-direction: column; gap: 22px; padding: 18px 18px 16px; text-align: left; border: none; } .proy-card:active { transform: scale(.985); } .proy-card .top { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; } .proy-card .nom { font-family: var(--serif); font-size: 34px; line-height: .95; overflow-wrap: anywhere; } .proy-card .nom .it { font-style: italic; } .proy-card .pie { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; } .pie-negro { margin-top: 28px; border-top: 1px solid var(--linea-negro); padding-top: 16px; font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--sec-negro); } .btn-fila { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .btn-crema-2 { background: var(--crema); color: var(--negro); border: none; border-radius: 18px 18px 18px 6px; padding: 13px 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; min-height: 44px; } .btn-borde-negro { background: transparent; color: var(--sec-negro-2); border: 1px solid var(--linea-negro); border-radius: 6px 18px 18px 18px; padding: 13px 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; min-height: 44px; } /* Yo */ .yo-nombre { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--linea-negro); color: var(--crema); font-family: var(--serif); font-size: 44px; line-height: 1.05; padding: 4px 0 8px; outline: none; } .yo-nombre::placeholder { color: #4A453D; font-style: italic; } .yo-nombre:focus { border-color: var(--nota); } .yo-bloque { margin-top: 30px; } .yo-bloque h3 { margin: 0 0 12px; font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--sec-negro); display: flex; justify-content: space-between; } .yo-proy { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: none; text-align: left; background: var(--negro-2); color: var(--crema); border-radius: 16px 6px 16px 16px; margin-bottom: 6px; min-height: 52px; } .yo-proy .sw { width: 10px; height: 34px; border-radius: 4px; flex: none; } .yo-proy .n { flex: 1; font-family: var(--serif); font-size: 22px; line-height: 1; } .yo-proy .c { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: var(--sec-negro); text-transform: uppercase; white-space: nowrap; } .yo-proy.on { box-shadow: inset 0 0 0 1px var(--nota); } .yo-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .yo-stats div { background: var(--negro-2); border-radius: 14px; padding: 12px; } .yo-stats b { display: block; font-size: 30px; line-height: .9; font-weight: 600; letter-spacing: -.04em; } .yo-stats span { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--sec-negro); } .yo-txt { font-size: 13px; line-height: 1.5; color: var(--sec-negro-2); margin: 0 0 4px; } /* ============ Buscar ============ */ .buscar-cab { background: var(--negro); color: var(--crema); padding: calc(18px + var(--safe-t)) 20px 0; position: relative; } .buscar-cab h1 { margin: 6px 0 14px; font-family: var(--serif); font-size: 56px; line-height: .88; font-weight: 400; letter-spacing: -.02em; } .buscar-cab h1 .it { color: var(--nota); } .buscar-input { width: 100%; border: 1px solid var(--linea-negro); background: var(--negro-2); color: var(--crema); border-radius: 18px 18px 18px 6px; padding: 14px 16px; font-size: 16px; outline: none; } .buscar-input::placeholder { color: var(--inactivo); } .buscar-input:focus { border-color: var(--nota); } .filtros { display: flex; gap: 6px; overflow-x: auto; padding: 14px 0 38px; scrollbar-width: none; } .filtros::-webkit-scrollbar { display: none; } .filtro { flex: none; border: 1px solid var(--linea-negro); background: transparent; color: var(--sec-negro-2); border-radius: 14px; padding: 7px 11px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; min-height: 34px; display: flex; align-items: center; gap: 6px; } .filtro.on { background: var(--crema); color: var(--negro); border-color: var(--crema); } .alcance { display: flex; gap: 6px; } .alcance button { border: 1px solid var(--negro); background: transparent; border-radius: 12px; padding: 6px 10px; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; min-height: 32px; } .alcance button.on { background: var(--negro); color: var(--crema); } mark { background: var(--nota); color: inherit; border-radius: 3px; padding: 0 1px; } /* ============ Mapa ============ */ .mapa { position: absolute; inset: 0; background: var(--negro); color: var(--crema); overflow: hidden; touch-action: none; } .mapa-cab { position: absolute; left: 0; right: 0; top: 0; padding: calc(16px + var(--safe-t)) 20px 12px; z-index: 3; pointer-events: none; background: linear-gradient(var(--negro) 70%, rgba(12,11,10,0)); } .mapa-cab > * { pointer-events: auto; } .mapa-cab .kick { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--sec-negro); display: flex; justify-content: space-between; gap: 10px; } .mapa-cab .kick b { color: var(--nota); font-weight: 400; } .mapa-cab h1 { margin: 6px 0 10px; font-family: var(--serif); font-size: 40px; line-height: .9; font-weight: 400; letter-spacing: -.02em; } .mapa-cab h1 .it { color: var(--nota); } .leyenda { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .leyenda::-webkit-scrollbar { display: none; } .leyenda button { flex: none; display: flex; align-items: center; gap: 6px; border: 1px solid var(--linea-negro); background: transparent; color: var(--sec-negro-2); border-radius: 14px; padding: 6px 10px; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; min-height: 32px; } .leyenda button.on { background: var(--crema); color: var(--negro); border-color: var(--crema); } .leyenda button.apagado { opacity: .4; } .mapa > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .mapa > svg .nodo { cursor: pointer; } .mapa > svg text { font-family: var(--mono); pointer-events: none; } .mapa-ctrl { position: absolute; right: 14px; bottom: 16px; z-index: 3; display: flex; flex-direction: column; gap: 6px; } .mapa-ctrl button { width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--linea-negro); background: var(--negro-2); color: var(--crema); font-family: var(--mono); font-size: 16px; } .mapa-ley-rel { position: absolute; left: 16px; bottom: 16px; z-index: 3; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--sec-negro); display: flex; flex-direction: column; gap: 6px; } .mapa-ley-rel span { display: flex; align-items: center; gap: 8px; } .mapa-ley-rel svg { flex: none; } .mapa-vacio { position: absolute; left: 20px; right: 20px; top: 45%; transform: translateY(-50%); text-align: center; } .mapa-vacio .serif { font-size: 30px; line-height: 1.05; } .mapa-vacio p { font-size: 13px; color: var(--sec-negro-2); line-height: 1.45; } /* ============ Toast ============ */ #toast { position: absolute; left: 50%; bottom: calc(var(--tab-h) + var(--safe-b) + 14px); transform: translate(-50%, 20px); background: var(--nota); color: var(--negro); padding: 10px 14px; border-radius: 16px 16px 16px 4px; z-index: 80; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } #toast.on { opacity: 1; transform: translate(-50%, 0); } /* Pantallas más anchas: tipografía algo mayor */ @media (min-width: 420px) { .titulo-proy h1 { font-size: 60px; } } /* ============ Disciplinas ============ */ .disciplinas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .disc-btn { border: none; text-align: left; padding: 14px; min-height: 124px; display: flex; flex-direction: column; gap: 6px; } .disc-btn:active { transform: scale(.97); } .disc-btn .n { font-family: var(--serif); font-size: 23px; line-height: 1; } .disc-btn .d { font-size: 12px; line-height: 1.3; opacity: .9; } .disc-btn .m { margin-top: auto; font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .75; line-height: 1.4; } .universo-mini { display: flex; flex-wrap: wrap; gap: 6px 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; } .universo-mini span { display: flex; align-items: center; gap: 6px; } .libres { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .libre { display: flex; align-items: center; gap: 8px; background: var(--crema-alta); border: 1px solid var(--linea-2); border-radius: 14px 6px 14px 14px; padding: 0 0 0 12px; } .libre input { flex: 1; min-width: 0; border: none; background: transparent; padding: 12px 10px 12px 0; font-size: 16px; outline: none; } .t-documento { flex-wrap: wrap; row-gap: 2px; } .t-documento .lbl { min-width: 0; line-height: 1.3; letter-spacing: .06em; } .t-fuente .lbl, .t-nota .lbl, .t-idea .lbl, .t-pregunta .lbl { overflow-wrap: anywhere; } /* ============ Modo: botón y tarjetas ============ */ .modo-btn { display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid var(--linea-negro); border-radius: 14px; padding: 5px 10px; margin: -6px 0; color: var(--sec-negro-2); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; min-height: 32px; } .modo-ic { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(90deg, var(--nota) 50%, var(--idea) 50%); } .modos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .modo-card { display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 14px; border-radius: 18px 18px 18px 6px; background: var(--negro-2); border: 1px solid var(--linea-negro); color: var(--crema); } .modo-card.on { border-color: var(--nota); box-shadow: inset 0 0 0 1px var(--nota); } .mc-sw { display: flex; gap: 4px; } .mc-sw i { width: 18px; height: 18px; border-radius: 6px; display: block; } .mc-t { font-family: var(--serif); font-size: 26px; line-height: 1; } .mc-d { font-size: 12px; line-height: 1.35; color: var(--sec-negro-2); } /* Las muestras siempre enseñan su propia paleta */ .modo-card[data-modo="activo"] { --fuente: #1B3CFF; --nota: #C6F24E; --idea: #E8318E; --afirmacion: #FF4A17; --pregunta: #FFC400; } .modo-card[data-modo="calmo"] { --fuente: #5A71A3; --nota: #BCCDA3; --idea: #D89CAE; --afirmacion: #E2A488; --pregunta: #E9CD94; } /* ============ Ecosistema ============ */ .rotulo-link { color: inherit; text-decoration: none; } .micros { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .micro { padding: 16px 12px 12px; } .micro-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 4px 12px; } .micro-nom { background: none; border: none; padding: 0; color: inherit; font-family: var(--serif); font-size: 34px; line-height: 1; text-align: left; } .micro-num { font-size: 38px; line-height: .8; font-weight: 600; letter-spacing: -.04em; } .micro-proys { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .micro-proy { display: flex; flex-direction: column; gap: 10px; text-align: left; border: none; padding: 12px; background: var(--crema-alta); color: var(--negro); min-height: 104px; } .micro-proy:active { transform: scale(.97); } .mp-top { display: flex; justify-content: space-between; gap: 6px; font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sec); } .mp-top span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mp-top span:last-child { white-space: nowrap; } .mp-nom { font-family: var(--serif); font-size: 21px; line-height: .98; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } .mp-nom .it { font-style: italic; } .mp-pie { margin-top: auto; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; } .micro-nuevo { border: 1px dashed currentColor; background: transparent; color: inherit; opacity: .75; border-radius: 16px; padding: 10px; min-height: 104px; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; } .micro-proys .micro-nuevo:only-child { grid-column: span 2; min-height: 52px; } .chips-proy a { text-decoration: none; } /* ============ Agenda ============ */ .semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 4px; } .dia { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 6px; border-radius: 14px; background: var(--negro-2); border: 1px solid var(--linea-negro); color: var(--sec-negro-2); min-height: 64px; } .dia.hoy { background: var(--crema); color: var(--negro); border-color: var(--crema); } .dia .dl { font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; } .dia .dn { font-size: 20px; font-weight: 600; letter-spacing: -.03em; line-height: 1; } .dia .dp { display: flex; gap: 2px; min-height: 7px; } .dia .dp .punto { width: 6px; height: 6px; } .ag-dia { margin-top: 18px; } .ag-dia h3 { margin: 0 0 8px; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1; } .ag-dia.atrasado h3 { color: var(--afirmacion); } :root[data-modo="activo"] .ag-dia.atrasado h3 { color: #D63A0E; } .ag-lista { display: flex; flex-direction: column; gap: 6px; } .ag-lista.mini { margin-top: 12px; } .ag-fila { display: flex; align-items: stretch; gap: 0; background: var(--crema-alta); border-radius: 16px 6px 16px 16px; box-shadow: 0 1px 0 var(--linea); } .ag-check { flex: none; width: 26px; height: 26px; margin: 14px 0 0 12px; border-radius: 9px; border: 2px solid var(--negro); background: transparent; color: var(--negro); font-size: 14px; line-height: 1; display: grid; place-items: center; padding: 0; } .ag-cuerpo { flex: 1; min-width: 0; border: none; background: none; text-align: left; padding: 11px 14px 12px 12px; display: flex; flex-direction: column; gap: 3px; } .ag-hora { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--sec); } .ag-tit { font-size: 16px; line-height: 1.25; font-weight: 500; overflow-wrap: anywhere; } .ag-meta { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9px; letter-spacing: .04em; color: var(--sec); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ag-meta .punto { width: 8px; height: 8px; } .ag-fila.hecha .ag-tit { text-decoration: line-through; color: var(--sec); } .chip-fecha { background: var(--negro); color: var(--crema); padding: 3px 7px; border-radius: 12px; } .chip-fecha.atrasada { background: var(--afirmacion); color: var(--negro); } .chip-fecha.hecha { background: var(--crema-baja); color: var(--sec); } .chip-proy { display: inline-flex; align-items: center; gap: 5px; } .chip-proy .punto { width: 8px; height: 8px; } /* Hoja de pieza: proyecto y fecha */ .en-proy { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--sec); text-decoration: none; margin-bottom: 12px; } .cuando-caja { display: flex; align-items: center; gap: 12px; background: var(--crema-alta); border-radius: 16px 6px 16px 16px; padding: 10px 12px; margin-bottom: 14px; } .cuando-caja .ag-check { margin: 0; } .cuando-caja b { font-weight: 500; } .cuando-caja small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--sec); margin-top: 2px; } .cuando-caja.hecha b { text-decoration: line-through; } .fuera { color: var(--fuente); } .color-op { width: 40px; height: 40px; padding: 0; border-radius: 12px; border: 2px solid transparent; } .color-op.on { border-color: var(--negro); box-shadow: inset 0 0 0 3px var(--crema); background-clip: padding-box; } .alcance { flex-wrap: wrap; } .alcance button { display: inline-flex; align-items: center; gap: 6px; } /* Mapa del ecosistema */ .vista-toggle { display: flex; gap: 6px; } .vista-toggle button { border: 1px solid var(--linea-negro); background: transparent; color: var(--sec-negro-2); border-radius: 14px; padding: 7px 11px; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; min-height: 34px; } .vista-toggle button.on { background: var(--crema); color: var(--negro); border-color: var(--crema); } .mapa-cab .kick button { background: none; border: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 6px 0; margin: -6px 0; } .mapa > svg .t-proy { font-family: var(--serif); font-size: 14px; letter-spacing: 0; } .mapa > svg .t-area { font-family: var(--mono); font-weight: 700; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; } /* ============ Guía de bienvenida ============ */ @keyframes aparecer { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } } @keyframes trazar { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } } @keyframes entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } #guia { position: absolute; inset: 0; z-index: 100; background: var(--negro); color: var(--crema); overflow-y: auto; } .guia-in { min-height: 100%; display: flex; flex-direction: column; padding: calc(18px + var(--safe-t)) 22px calc(22px + var(--safe-b)); } .g-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .g-puntos { display: flex; gap: 5px; } .g-puntos span { width: 18px; height: 4px; border-radius: 4px; background: var(--linea-negro); } .g-puntos span.on { background: var(--nota); } .g-saltar { background: none; border: none; color: var(--sec-negro); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 10px 0; } .g-cuerpo { flex: 1; animation: entrar .35s ease both; padding-top: 18px; } .g-kick { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--sec-negro); } .g-tit { font-family: var(--serif); font-weight: 400; font-size: 84px; line-height: .9; letter-spacing: -.03em; margin: 10px 0 0; } .g-tit2 { font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: .95; letter-spacing: -.02em; margin: 10px 0 10px; } .g-tit2 .it { color: var(--nota); font-style: italic; } .g-txt { font-size: 15px; line-height: 1.5; color: var(--sec-negro-2); margin: 12px 0 0; max-width: 360px; } .g-txt.suave { color: var(--sec-negro); font-size: 14px; } .g-txt em { font-family: var(--serif); font-size: 18px; color: var(--crema); } .g-txt b { color: var(--nota); font-weight: 500; } .oculto-suave { opacity: 0; transition: opacity .4s; } .g-txt:not(.oculto-suave) { transition: opacity .4s; } .guia-monte { width: 100%; height: auto; margin: 10px 0 0; } .g-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; } .g-nav .btn-crema-2 { flex: 1; max-width: 260px; margin-left: auto; } .musas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; } .musa { aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--c); background: transparent; color: var(--crema); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; transition: background .25s, color .25s; } .musa-n { font-family: var(--serif); font-size: 20px; line-height: 1; } .musa-a { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; text-align: center; } .musa.vista { background: var(--c); color: var(--negro); border-color: var(--c); animation: aparecer .3s ease both; } .musa.vista .musa-n { font-size: 17px; } .g-cuenta { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--sec-negro); margin-top: 12px; } .g-conste { width: 100%; height: auto; margin-top: 8px; } .g-hilos line { stroke: var(--linea-negro); stroke-width: 1.2; stroke-dasharray: 400; animation: trazar 1.6s .8s ease both; } .niveles { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; } .nivel { display: flex; align-items: center; gap: 12px; border: 1px solid var(--linea-negro); background: transparent; color: var(--sec-negro-2); border-radius: 18px 18px 18px 6px; padding: 12px 14px; margin-left: calc(var(--i) * 14px); font-family: var(--serif); font-size: 22px; text-align: left; transition: background .25s, color .25s, border-color .25s; } .nivel span { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: var(--sec-negro); } .nivel.on.n0 { background: var(--crema); color: var(--negro); border-color: var(--crema); } .nivel.on.n1 { background: var(--nota); color: var(--negro); border-color: var(--nota); } .nivel.on.n2 { background: var(--fuente); color: var(--crema); border-color: var(--fuente); } .nivel.on.n3 { background: var(--pregunta); color: var(--negro); border-color: var(--pregunta); } .nivel.on.n4 { background: var(--idea); color: var(--negro); border-color: var(--idea); } .nivel.on span { color: inherit; opacity: .7; } .nivel.actual { box-shadow: 0 0 0 2px var(--negro), 0 0 0 3px var(--crema); } .nivel-txt { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--sec-negro-2); min-height: 66px; animation: entrar .3s ease both; } .nivel-txt b { font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--crema); } .demo-hilos { display: flex; flex-direction: column; align-items: center; margin-top: 16px; } .demo-c { width: 100%; background: var(--crema-alta); color: var(--negro); padding: 12px 14px; border-radius: 18px 6px 18px 18px; font-size: 15px; line-height: 1.3; } .demo-c small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: var(--sec); margin-bottom: 4px; } .demo-c b { background: var(--nota); padding: 0 3px; border-radius: 4px; font-weight: 500; } .demo-c.c1 { border-left: 8px solid var(--fuente); } .demo-c.c2 { border-left: 8px solid var(--nota); border-radius: 6px 18px 18px 18px; } .demo-hilos svg { width: 40px; height: 60px; } .demo-linea { fill: none; stroke: var(--nota); stroke-width: 2; stroke-dasharray: 200; animation: trazar 1.4s .3s ease infinite alternate; } .g-fin { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; } #g-nombre { margin-top: 10px; } /* ============ Pistas ============ */ .pista { position: absolute; left: 12px; right: 12px; bottom: calc(var(--tab-h) + var(--safe-b) + 12px); z-index: 70; background: var(--negro); color: var(--crema); border: 1px solid var(--linea-negro); border-radius: 22px 22px 22px 6px; padding: 14px 16px; box-shadow: 0 18px 40px rgba(0,0,0,.35); animation: entrar .35s ease both; } .pista-k { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--nota); } .pista b { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.05; margin-top: 4px; } .pista p { margin: 6px 0 10px; font-size: 13px; line-height: 1.45; color: var(--sec-negro-2); } .pista button { background: var(--crema); color: var(--negro); border: none; border-radius: 14px 14px 14px 4px; padding: 9px 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; min-height: 38px; } /* ============ Edición e hilos automáticos ============ */ .etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .etiqueta { background: var(--nota); color: var(--negro); border: none; border-radius: 12px; padding: 5px 9px; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; min-height: 30px; } .enlace.auto { background: transparent; border: 1px dashed var(--linea-2); } .mini-btn { flex: none; background: var(--negro); color: var(--crema); border: none; border-radius: 10px; padding: 6px 10px; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; min-height: 32px; } .rel-ciclo { text-decoration: underline dotted; text-underline-offset: 2px; cursor: pointer; padding: 4px 0; } .opcion-nueva { border: 1px dashed var(--negro); background: transparent; border-radius: 14px; padding: 8px 12px; font-family: var(--mono); font-size: 10px; min-height: 36px; width: 130px; outline: none; } .extras { display: flex; flex-direction: column; gap: 6px; } .extra { display: grid; grid-template-columns: 1fr 1.3fr; gap: 6px; } .extra input { width: 100%; border: 1px solid var(--linea-2); background: var(--crema-alta); border-radius: 12px; padding: 10px 11px; font-size: 16px; outline: none; } .uni-bloque { border-left: 8px solid; padding: 2px 0 12px 12px; margin-top: 16px; border-bottom: 1px solid var(--linea); } /* ===================================================================== v5 — herramientas, agenda grande, equilibrio, mundos, escritorio ===================================================================== */ /* Mosaico dinámico */ .mosaico .tile { position: relative; } .t-g { grid-column: span 2; grid-row: span 2; padding: 14px; } .t-g .num { font-size: 72px; letter-spacing: -.05em; } .t-g .lbl { font-size: 10px; letter-spacing: .12em; } .t-g .sub { font-size: 11px; line-height: 1.3; opacity: .85; } .t-w { grid-column: span 2; } .t-s .sub, .t-w .sub { font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .8; line-height: 1.3; } .tile .num.chico { font-size: 26px; letter-spacing: -.03em; } .t-g .num.chico { font-size: 44px; } .tile.oscuro .lbl { color: var(--idea); } .herr-ic { font-style: normal; opacity: .6; margin-left: 5px; font-size: 1.05em; } .t-mas { background: transparent; border: 1px dashed var(--dashed) !important; color: var(--sec); border-radius: 18px 18px 18px 6px; } .mosaico-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .mosaico-acc .btn-todo { grid-column: auto; } .mod-acc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .mod-acc .btn-negro { flex: 1; } .chip-prio { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--linea-2); padding: 3px 7px; border-radius: 12px; } .chip-prio .punto, .ag-hora .punto { width: 8px; height: 8px; display: inline-block; vertical-align: 0; margin-right: 3px; } .opcion.prio { display: inline-flex; align-items: center; gap: 6px; } .opcion.prio.on { background: var(--negro); color: var(--crema); } /* Tareas por prioridad */ .prio-grupo { margin-top: 14px; } .prio-grupo h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-family: var(--serif); font-weight: 400; font-size: 24px; } .prio-grupo h3 .punto { width: 12px; height: 12px; align-self: center; } .prio-grupo h3 small { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--sec); } /* Bitácora */ .bitacora { display: flex; flex-direction: column; border-left: 2px solid var(--linea-2); margin-left: 6px; } .bit-e { display: grid; grid-template-columns: 78px 1fr; gap: 10px; text-align: left; border: none; background: none; padding: 10px 0 12px 14px; position: relative; } .bit-e::before { content: ''; position: absolute; left: -7px; top: 15px; width: 12px; height: 12px; border-radius: 50%; background: var(--crema); border: 2px solid var(--negro); } .bit-f { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--sec); padding-top: 3px; } .bit-c b { display: block; font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.1; } .bit-c span { display: block; font-size: 13px; line-height: 1.45; color: var(--cuerpo); margin-top: 4px; } /* Comparar */ .tabla-wrap { overflow-x: auto; border-radius: 16px 6px 16px 16px; background: var(--crema-alta); box-shadow: 0 1px 0 var(--linea); } .tabla { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 420px; } .tabla th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--sec); padding: 10px 12px; border-bottom: 1px solid var(--linea); white-space: nowrap; } .tabla td { padding: 11px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; } .tabla tr[data-a] { cursor: pointer; } .tabla tr.elegida td { background: color-mix(in srgb, var(--nota) 35%, transparent); } .tabla tr.descartada td { color: var(--sec); text-decoration: line-through; } /* Presupuesto */ .presu-tot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .presu-tot div { background: var(--crema-alta); border-radius: 14px; padding: 10px 12px; box-shadow: 0 1px 0 var(--linea); } .presu-tot span { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--sec); } .presu-tot b { display: block; font-size: clamp(12px, 3.4vw, 17px); white-space: nowrap; font-weight: 600; letter-spacing: -.02em; margin-top: 4px; overflow-wrap: anywhere; } .presu-tot .neg b, .presu-f .neg { color: #C2360C; } .presu-tot .pos b, .presu-f .pos { color: #2F6B1F; } :root[data-modo="calmo"] .presu-tot .neg b, :root[data-modo="calmo"] .presu-f .neg { color: #A5543A; } :root[data-modo="calmo"] .presu-tot .pos b, :root[data-modo="calmo"] .presu-f .pos { color: #5C7446; } .presu-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .presu-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; border: none; background: var(--crema-alta); border-radius: 14px 6px 14px 14px; padding: 11px 14px; box-shadow: 0 1px 0 var(--linea); } .presu-f b { display: block; font-weight: 500; font-size: 15px; } .presu-f small { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: var(--sec); text-transform: uppercase; } .presu-f > span:last-child { font-weight: 600; white-space: nowrap; } .monto-caja { display: flex; justify-content: space-between; align-items: baseline; background: var(--crema-alta); border-radius: 16px 6px 16px 16px; padding: 12px 14px; margin-top: 14px; } .monto-caja span { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--sec); } .monto-caja b { font-size: 26px; font-weight: 600; letter-spacing: -.03em; } .monto-caja.neg b { color: #C2360C; } .monto-caja.pos b { color: #2F6B1F; } /* Archivos */ .beta-aviso { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; line-height: 1.5; color: var(--sec); background: var(--crema-baja); border-radius: 10px; padding: 8px 10px; margin: 8px 0; } .beta-aviso.oscuro { background: var(--negro-2); color: var(--sec-negro-2); } .archivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .arch { display: flex; flex-direction: column; gap: 6px; text-align: left; border: none; background: var(--crema-alta); border-radius: 16px 16px 16px 6px; padding: 12px; min-height: 120px; box-shadow: 0 1px 0 var(--linea); } .arch-ic { display: inline-grid; place-items: center; width: 44px; height: 52px; border-radius: 6px 14px 6px 6px; background: var(--negro); color: var(--crema); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .06em; } .arch-ic.grande { width: 64px; height: 76px; font-size: 12px; flex: none; } .arch b { font-size: 14px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; } .arch small { font-family: var(--mono); font-size: 9px; color: var(--sec); overflow-wrap: anywhere; } .arch-det { display: flex; gap: 14px; align-items: center; margin-top: 14px; } .arch-det b { display: block; overflow-wrap: anywhere; } .arch-det small { display: block; font-family: var(--mono); font-size: 9px; color: var(--sec); margin: 3px 0 6px; } .arch-det a { color: var(--fuente); font-size: 13px; } .subir { display: flex; align-items: center; gap: 12px; border: 1.5px dashed var(--negro); border-radius: 16px; padding: 14px; cursor: pointer; background: var(--crema-alta); } .subir-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--negro); color: var(--crema); display: grid; place-items: center; font-size: 18px; flex: none; } .comparar-f { margin-top: 14px; } /* Elegir herramienta / capturar */ .t-mas-b { background: transparent !important; border: 1.5px dashed var(--negro) !important; color: var(--negro); border-radius: 22px 22px 22px 6px; } .herrs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .herr-card { display: flex; flex-direction: column; gap: 5px; text-align: left; border: 1px solid var(--linea-2); background: var(--crema-alta); padding: 14px; min-height: 170px; } .herr-card:active { transform: scale(.97); } .hc-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--negro); color: var(--crema); display: grid; place-items: center; font-size: 16px; } .hc-v { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sec); margin-top: 4px; } .hc-n { font-family: var(--serif); font-size: 24px; line-height: 1; } .hc-d { font-size: 12px; line-height: 1.35; color: var(--cuerpo); } .hc-e { font-size: 11px; line-height: 1.3; color: var(--sec); font-style: italic; margin-top: auto; } .disc-btn.claro { background: var(--crema-alta); color: var(--negro); border: 1px solid var(--linea-2); } /* Armar */ .armar { display: flex; flex-direction: column; gap: 6px; } .armar-f { display: flex; align-items: center; gap: 8px; background: var(--crema-alta); border-radius: 16px 6px 16px 16px; padding: 6px 6px 6px 10px; box-shadow: 0 1px 0 var(--linea); } .armar-sw { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--crema); box-shadow: 0 0 0 1px var(--linea-2); flex: none; padding: 0; } .armar-n { flex: 1; min-width: 0; text-align: left; border: none; background: none; padding: 6px 4px; } .armar-n b { display: block; font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.05; } .armar-n small { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--sec); } .armar-b { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--linea-2); background: transparent; font-size: 15px; flex: none; } .armar-b:disabled { opacity: .3; } .plantilla-f { margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: 8px; } /* Ecosistema v5 */ .eco-grid { display: block; } .areas { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .area-card { background: var(--crema-alta); border-radius: 22px 22px 8px 22px; box-shadow: 0 1px 0 var(--linea); overflow: hidden; border-top: 8px solid var(--ac); } .area-cab { display: flex; align-items: center; gap: 10px; padding: 12px 14px 6px; flex-wrap: wrap; } .area-sw { width: 14px; height: 14px; border-radius: 50%; background: var(--ac); flex: none; } .area-nom { background: none; border: none; padding: 0; font-family: var(--serif); font-size: 28px; line-height: 1; text-align: left; } .area-cnt { margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--sec); } .area-proys { display: flex; flex-direction: column; padding: 4px 8px 10px; } .area-proy { position: relative; display: flex; flex-direction: column; gap: 2px; text-align: left; border: none; background: none; padding: 10px 44px 10px 8px; border-radius: 12px; } .area-proy + .area-proy { border-top: 1px solid var(--linea); border-radius: 0; } .area-proy:active { background: var(--crema-baja); } .ap-nom { font-family: var(--serif); font-size: 21px; line-height: 1.05; } .ap-nom .it { font-style: italic; } .ap-meta { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--sec); } .ap-badge { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); min-width: 26px; height: 26px; border-radius: 13px; background: var(--negro); color: var(--crema); font-family: var(--mono); font-size: 10px; display: grid; place-items: center; padding: 0 6px; } .area-mas { border: 1px dashed var(--linea-2); background: transparent; color: var(--sec); border-radius: 12px; padding: 9px; margin: 6px 0 0; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; min-height: 40px; } .espiral { display: block; width: 100%; height: auto; } .mundos-card { width: 100%; display: flex; flex-direction: column; gap: 6px; text-align: left; border: none; padding: 18px; border-radius: 26px 26px 26px 6px; background: var(--idea); color: var(--negro); } .mundos-card .mc-k { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; } .mundos-card .mc-t { font-family: var(--serif); font-size: 30px; line-height: .98; } .mundos-card .mc-t .it { font-style: italic; } .mundos-card .mc-d { font-size: 13px; line-height: 1.4; } /* Agenda v5 */ .segmento { display: inline-flex; background: var(--negro-2); border: 1px solid var(--linea-negro); border-radius: 14px; padding: 3px; gap: 3px; } .segmento button { border: none; background: transparent; color: var(--sec-negro-2); border-radius: 11px; padding: 8px 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; min-height: 36px; } .segmento button.on { background: var(--crema); color: var(--negro); } .ag-filtros .filtros { padding: 10px 0 0; } .ag-filtros .filtros:last-child { padding-bottom: 38px; align-items: center; } .sel-oscuro { flex: none; background: var(--negro-2); color: var(--sec-negro-2); border: 1px solid var(--linea-negro); border-radius: 14px; padding: 7px 10px; font-family: var(--mono); font-size: 10px; min-height: 34px; max-width: 200px; } .cal-nav { display: flex; align-items: center; gap: 8px; padding: 14px 20px 0; } .cal-nav b { flex: 1; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1; } .cal-nav button { min-width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--linea-2); background: var(--crema-alta); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 0 10px; } .cal-b { display: flex; align-items: flex-start; gap: 4px; width: 100%; border: none; border-radius: 8px 8px 8px 3px; padding: 4px 6px; text-align: left; font-size: 11px; line-height: 1.2; overflow: hidden; margin-bottom: 3px; } .cal-b.hecha { opacity: .45; text-decoration: line-through; } .cal-h { font-family: var(--mono); font-size: 8.5px; opacity: .8; flex: none; } .cal-t { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 500; } .cal-obl { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; margin-top: 4px; } .semana-wrap { overflow-x: auto; margin: 10px -20px 0; padding: 0 20px; } .semana-grid { display: grid; grid-template-columns: 44px repeat(7, minmax(92px, 1fr)); min-width: 700px; } .sem-esq { font-family: var(--mono); font-size: 8px; color: var(--sec); text-transform: uppercase; letter-spacing: .06em; padding: 6px 4px; } .sem-td-l { border-top: 1px solid var(--linea); } .sem-dia { text-align: center; padding: 6px 0 8px; font-family: var(--mono); font-size: 9px; text-transform: uppercase; color: var(--sec); letter-spacing: .06em; } .sem-dia b { display: block; font-family: var(--sans); font-size: 20px; font-weight: 600; color: var(--negro); letter-spacing: -.03em; } .sem-dia.hoy b { background: var(--negro); color: var(--crema); border-radius: 12px; width: 34px; height: 34px; line-height: 34px; margin: 2px auto 0; } .sem-td { border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); padding: 4px 3px; min-height: 34px; } .sem-horas { position: relative; border-top: 1px solid var(--linea); } .sem-hora { position: absolute; left: 0; font-family: var(--mono); font-size: 8.5px; color: var(--sec); transform: translateY(-5px); } .sem-col { position: relative; border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); background-image: repeating-linear-gradient(var(--linea) 0 1px, transparent 1px 46px); } .sem-col.hoy { background-color: color-mix(in srgb, var(--nota) 12%, transparent); } .mes-grid { margin-top: 10px; } .mes-sem { display: grid; grid-template-columns: repeat(7, 1fr); font-family: var(--mono); font-size: 9px; text-transform: uppercase; color: var(--sec); letter-spacing: .06em; text-align: center; padding-bottom: 6px; } .mes-celdas { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .mes-c { display: flex; flex-direction: column; gap: 2px; align-items: stretch; text-align: left; border: none; background: var(--crema-alta); border-radius: 10px; padding: 4px; min-height: 66px; overflow: hidden; box-shadow: 0 1px 0 var(--linea); } .mes-c.fuera { opacity: .4; } .mes-c.hoy { box-shadow: inset 0 0 0 2px var(--negro); } .mes-c.sel { background: var(--crema-baja); box-shadow: inset 0 0 0 2px var(--idea); } .mes-n { font-size: 12px; font-weight: 600; } .mes-b { display: block; font-size: 8.5px; line-height: 1.2; border-radius: 4px; padding: 1px 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mes-b.hecha { opacity: .45; text-decoration: line-through; } .mes-mas { font-family: var(--mono); font-size: 8px; color: var(--sec); } /* Equilibrio */ .mapa.equilibrio { overflow-y: auto; touch-action: auto; } .mapa-cab.estatico { position: relative; background: none; padding-bottom: 6px; } .equi-cuerpo { padding: 0 20px 30px; } .equi-esp { max-width: 420px; margin: 0 auto; } .equi-lectura { font-family: var(--serif); font-size: 24px; line-height: 1.15; margin: 10px 0 16px; } .equi-tabla { display: flex; flex-direction: column; gap: 10px; } .equi-f { display: grid; grid-template-columns: 12px auto 1fr auto; align-items: center; gap: 4px 10px; } .equi-f b { font-weight: 500; font-size: 15px; } .equi-f small { grid-column: 2 / -1; font-family: var(--mono); font-size: 9px; color: var(--sec-negro); letter-spacing: .04em; } .equi-barra { position: relative; height: 10px; background: var(--negro-2); border-radius: 6px; overflow: visible; } .equi-barra i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; } .equi-barra em { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--crema); opacity: .7; } .equi-pct { font-family: var(--mono); font-size: 12px; } .nota-form.oscuro { color: var(--sec-negro); margin-top: 18px; } .leyenda-esp { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--mono); font-size: 10px; color: var(--sec-negro-2); margin-top: 8px; } .leyenda-esp span { display: inline-flex; align-items: center; gap: 6px; } /* Mundos */ .mundos h1 { margin-bottom: 14px; } .mundos-lista { display: grid; gap: 10px; margin-top: 18px; } .mundo-card { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; text-align: left; border: 1px solid var(--linea-negro); background: var(--negro-2); color: var(--crema); padding: 14px; } .mundo-av { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 22px; flex: none; } .mundo-av.grande { width: 84px; height: 84px; font-size: 34px; } .mundo-t b { display: block; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1; } .mundo-t small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--sec-negro); margin: 4px 0; } .mundo-t em { font-family: var(--serif); font-size: 15px; color: var(--sec-negro-2); } .mundo-mini { width: 80px; } .chip-muestra { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--negro); background: var(--pregunta); border-radius: 10px; padding: 4px 8px; } .mundo-cab { display: flex; align-items: center; gap: 16px; margin-top: 14px; } .mundo-cab h1 { font-size: 44px; } .mundo-cita { font-family: var(--serif); font-size: 26px; line-height: 1.15; margin: 20px 0 0; padding-left: 16px; border-left: 3px solid var(--nota); color: var(--crema); } .como { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.45; color: var(--sec-negro-2); } .mundo-areas { display: grid; gap: 10px; } .mundo-area { background: var(--negro-2); border-radius: 18px 18px 18px 6px; border-top: 6px solid var(--ac); padding: 10px 12px; } .ma-cab { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 22px; } .ma-cab .area-sw { background: var(--ac); } .ma-proy { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: none; background: none; color: var(--crema); padding: 10px 4px; border-top: 1px solid var(--linea-negro); margin-top: 6px; } .ma-proy .ap-meta { color: var(--sec-negro); } .mundo-herrs { display: flex; flex-direction: column; gap: 6px; } .mh { border-left: 6px solid; background: var(--crema-alta); border-radius: 6px 14px 14px 6px; padding: 8px 12px; } .mh b { font-family: var(--serif); font-weight: 400; font-size: 19px; } .mh small { display: block; font-size: 12px; color: var(--cuerpo); line-height: 1.35; } .mundo-piezas { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; } /* Guía v5 */ .g-lead { font-family: var(--serif); font-size: 26px; line-height: 1.15; margin: 16px 0 0; max-width: 520px; } .g-tres { display: grid; gap: 8px; margin-top: 20px; } .g-tres div { background: var(--negro-2); border: 1px solid var(--linea-negro); border-radius: 18px 18px 18px 6px; padding: 12px 14px; } .g-tres b { display: block; font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--nota); margin-bottom: 4px; } .g-tres span { font-size: 14px; line-height: 1.45; color: var(--sec-negro-2); } .mentes-tabs, .niveles-h { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 10px; } .mentes-tabs::-webkit-scrollbar, .niveles-h::-webkit-scrollbar { display: none; } .mentes-tabs button, .niveles-h button { flex: none; border: 1px solid var(--linea-negro); background: transparent; color: var(--sec-negro-2); border-radius: 14px; padding: 8px 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; min-height: 36px; display: flex; align-items: center; gap: 6px; } .niveles-h button span { width: 18px; height: 18px; border-radius: 50%; background: var(--linea-negro); display: grid; place-items: center; font-size: 9px; } .mentes-tabs button.on, .niveles-h button.on { background: var(--crema); color: var(--negro); border-color: var(--crema); } .niveles-h button.on span { background: var(--negro); color: var(--crema); } .mente, .nivel-caja { background: var(--negro-2); border: 1px solid var(--linea-negro); border-radius: 22px 22px 22px 6px; padding: 16px; animation: entrar .3s ease both; } .mente h3 { margin: 0 0 8px; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1; color: var(--crema); } .mente p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--sec-negro-2); } .mente .mente-p { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--linea-negro); color: var(--crema); } .mente-p b { color: var(--nota); font-weight: 500; } .nivel-caja dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; margin: 14px 0 0; font-size: 14px; line-height: 1.45; } .nivel-caja dt { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--sec-negro); padding-top: 3px; } .nivel-caja dd { margin: 0; color: var(--sec-negro-2); } .esq { display: block; width: 100%; } .esq-eco { background: var(--crema); color: var(--negro); border-radius: 16px; padding: 12px; } .esq-eco b { font-family: var(--serif); font-weight: 400; font-size: 22px; } .esq-eco i { display: block; font-family: var(--mono); font-size: 9px; font-style: normal; text-transform: uppercase; letter-spacing: .08em; color: var(--sec); margin-top: 8px; } .esq-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; } .esq-row span { height: 34px; border-radius: 10px; } .esq-areas { display: flex; flex-direction: column; gap: 6px; } .esq-areas div, .esq-proys .ea { display: flex; align-items: center; gap: 8px; background: var(--crema); color: var(--negro); border-radius: 12px; padding: 9px 12px; border-top: 5px solid var(--c); font-family: var(--serif); font-size: 19px; } .esq-areas span, .esq-proys .ea span { width: 10px; height: 10px; border-radius: 50%; background: var(--c); } .esq-proys { display: flex; flex-direction: column; gap: 4px; } .esq-proys .ep { background: var(--crema-alta); color: var(--negro); border-radius: 10px; padding: 8px 12px 8px 26px; font-family: var(--serif); font-size: 17px; margin-left: 14px; } .esq-herr { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 38px; gap: 5px; } .esq-herr span { border-radius: 10px; padding: 6px 8px; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--negro); } .esq-pieza { display: flex; background: var(--crema-alta); color: var(--negro); border-radius: 14px 6px 14px 14px; overflow: hidden; } .esq-pieza i { width: 8px; flex: none; } .esq-pieza div { padding: 10px 12px; } .esq-pieza small { display: block; font-family: var(--mono); font-size: 8.5px; color: var(--sec); letter-spacing: .06em; } .esq-pieza b { display: block; font-weight: 500; font-size: 16px; margin: 3px 0; } .esq-pieza span { font-family: var(--mono); font-size: 9px; color: var(--afirmacion); } .esq-hilos { height: auto; } /* ============ Escritorio: ocupa toda la pantalla ============ */ #tabbar .nav-marca, #tabbar .solo-ancho, #tabbar .nav-ic { display: none; } @media (min-width: 900px) { #app { max-width: none; box-shadow: none; } #tabbar { top: 0; bottom: 0; right: auto; width: 236px; height: auto; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; padding: 26px 14px 20px; overflow-y: auto; font-size: 10.5px; } #tabbar .nav-marca { display: block; font-family: var(--serif); font-size: 38px; text-transform: none; letter-spacing: -.02em; color: var(--crema); padding: 0 10px 18px; } #tabbar .solo-ancho { display: flex; } #tabbar .nav-marca { order: -2; } #tabbar .nav-ic { display: inline-block; font-style: normal; width: 22px; opacity: .7; } #tabbar a { justify-content: flex-start; min-width: 0; padding: 0 10px; border-radius: 12px; min-height: 42px; } #tabbar a.on { background: var(--negro-2); } #tabbar .mas { order: -1; width: auto; height: 46px; border-radius: 16px 16px 16px 6px; margin: 0 0 14px; font-size: 13px; font-family: var(--mono); letter-spacing: .1em; } #tabbar .mas::after { content: ' Capturar'; font-size: 10px; } .nav-proys { flex-direction: column; margin-top: 18px; border-top: 1px solid var(--linea-negro); padding-top: 12px; gap: 2px; } .nav-proys > span { color: var(--sec-negro); padding: 0 10px 6px; font-size: 9px; } .nav-proys a { gap: 8px; text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 13px; color: var(--sec-negro-2) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-proys a .punto { flex: none; } #screen { inset: 0 0 0 236px; } #toast { bottom: 24px; left: calc(50% + 118px); } .pista { left: auto; right: 24px; bottom: 24px; width: 360px; } .cabecera, .buscar-cab { padding-left: 44px; padding-right: 44px; } .titulo-proy h1, .buscar-cab h1 { font-size: 76px; } .bajada { max-width: 560px; font-size: 15px; } .seccion, .feed { padding-left: 44px; padding-right: 44px; } .constelacion { margin-left: 44px; margin-right: 44px; } .cal-nav { padding-left: 44px; padding-right: 44px; } .semana-wrap { margin: 10px 0 0; padding: 0; overflow: visible; } .semana-grid { min-width: 0; grid-template-columns: 56px repeat(7, 1fr); } .mes-c { min-height: 118px; padding: 6px; } .mes-b { font-size: 10.5px; padding: 2px 5px; } .eco-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: 'urg equi' 'areas equi' 'areas mundos'; align-items: start; column-gap: 0; } .eco-urgente { grid-area: urg; } .eco-areas { grid-area: areas; padding-top: 22px; } .eco-equilibrio { grid-area: equi; margin: 18px 44px 0 0 !important; } .eco-mundos { grid-area: mundos; padding-left: 0 !important; padding-top: 18px; } .areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .univ-grid { display: grid; grid-template-columns: minmax(360px, 480px) minmax(0, 1fr); align-items: start; } .univ-mosaico { position: sticky; top: 0; padding-right: 0 !important; } .univ-abajo .constelacion { margin-left: 28px; } .univ-abajo .feed { padding-left: 28px; } .lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .pantalla-negra { padding-left: 56px; padding-right: 56px; } .pantalla-negra.yo, .pantalla-negra.mundos { max-width: 980px; } .yo .yo-bloque { max-width: 640px; } .mundo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .mundos-lista { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); } .mundo-areas { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .equi-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 10px 44px 40px; align-items: center; } .mapa-cab { padding-left: 44px; padding-right: 44px; } /* Hojas: panel a la derecha */ .hoja { left: auto; top: 0; width: min(560px, 50vw); max-height: none; border-radius: 30px 0 0 30px; animation: entrar-der .26s cubic-bezier(.2,.8,.2,1) both; } .saliendo .hoja { animation: salir-der .2s ease both; } .herrs { grid-template-columns: repeat(3, 1fr); } .disciplinas { grid-template-columns: repeat(3, 1fr); } #guia .guia-in { max-width: 760px; margin: 0 auto; } .g-tres { grid-template-columns: repeat(3, 1fr); } .g-tit { font-size: 120px; } } @keyframes entrar-der { from { transform: translateX(100%); } to { transform: none; } } @keyframes salir-der { from { transform: none; } to { transform: translateX(100%); } } @media (min-width: 1300px) { .univ-grid { grid-template-columns: 520px minmax(0, 1fr); } } .titulo-proy h1.largo { font-size: 44px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } @media (min-width: 900px) { .titulo-proy h1.largo { font-size: 64px; } } .mundo-mini .espiral { width: 80px; } /* ============ Bienvenida beta (primer inicio) ============ */ #bienvenida { position: absolute; inset: 0; z-index: 110; display: flex; justify-content: center; transition: background .35s ease; font-family: var(--sans); overflow: hidden; } .bv-in { width: 100%; max-width: 470px; height: 100%; display: flex; flex-direction: column; } .bv-top { display: flex; gap: 5px; align-items: center; padding: calc(22px + var(--safe-t)) 20px 0; flex: none; } .bv-barra { flex: 1; height: 5px; border: none; padding: 0; border-radius: 3px; cursor: pointer; transition: background .35s; position: relative; } .bv-barra::after { content: ''; position: absolute; inset: -12px 0; } .bv-saltar { margin-left: 8px; background: none; border: none; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 10px 0 10px 6px; cursor: pointer; } .bv-cuerpo { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 26px 22px 16px; -webkit-overflow-scrolling: touch; } .bv-paso { animation: bvEntra .4s ease both; } @keyframes bvEntra { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } .bv-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; } .bv-h { margin: 0; font-family: var(--serif); font-weight: 400; line-height: .95; letter-spacing: -.01em; text-wrap: balance; } .bv-h i { font-style: italic; } .bv-p { margin: 16px 0 0; font-size: 15px; line-height: 1.45; } .bv-marca { margin-top: 36px; font-weight: 800; font-size: 84px; line-height: .8; letter-spacing: -.06em; } .bv-formas { display: flex; gap: 8px; margin-top: 22px; } .bv-formas span { height: 54px; flex: none; } .bv-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; } .bv-tile { padding: 12px 14px; min-height: 78px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; color: #0C0B0A; } .bv-tile .n { font-size: 22px; font-weight: 600; letter-spacing: -.02em; } .bv-tile .d { font-size: 11px; line-height: 1.25; } .bv-cartas { position: relative; height: 340px; margin: 14px -6px 0; } .bv-carta { position: absolute; box-sizing: border-box; padding: 14px; font-size: 20px; } .bv-carta .l { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; } .bv-carta .t { font-size: inherit; font-weight: 600; line-height: 1.05; margin-top: 6px; } .bv-carta .t.serif-t { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1; } .bv-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 26px; } .bv-chip { padding: 10px 15px; font-size: 17px; font-weight: 500; color: #0C0B0A; } .bv-beta { position: relative; margin-top: 14px; height: 170px; } .bv-beta .b { position: absolute; left: -8px; top: 0; font-weight: 800; font-size: 150px; line-height: .8; letter-spacing: -.07em; } .bv-beta .sello { position: absolute; right: 4px; top: 92px; background: #0C0B0A; color: #FFC400; padding: 8px 12px; border-radius: 20px 20px 4px 20px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; transform: rotate(-6deg); } .bv-avisos { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; } .bv-avisos > div { display: flex; gap: 12px; align-items: baseline; padding: 11px 14px; font-size: 14px; line-height: 1.35; } .bv-avisos .k { font-family: var(--mono); font-size: 10px; flex: none; } .bv-cuent { background: #E8318E; color: #0C0B0A; padding: 1px 7px; border-radius: 10px; font-family: var(--mono); font-size: 11px; } .bv-pie { flex: none; display: flex; gap: 8px; align-items: center; padding: 10px 20px calc(30px + var(--safe-b)); } .bv-atras { width: 56px; height: 56px; flex: none; border-radius: 50%; border: 1.5px solid; background: transparent; font-size: 20px; cursor: pointer; font-family: inherit; } .bv-sig { flex: 1; height: 56px; border: none; cursor: pointer; border-radius: 28px 28px 8px 28px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; text-align: left; } .bv-sig .f { font-size: 18px; } .bv-adentro { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #F2E9DA; overflow-y: auto; animation: fundido .3s ease both; } .bv-in-adentro { width: 100%; max-width: 470px; padding: 26px; } .bv-salidas { display: flex; flex-direction: column; gap: 8px; margin-top: 28px; } .bv-salidas button { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 16px 18px; border: none; } .bv-s1 { background: #C6F24E; color: #0C0B0A; border-radius: 24px 24px 6px 24px; } .bv-s2 { background: #F2E9DA; color: #0C0B0A; border-radius: 6px 24px 24px 24px; } .bv-s3 { background: transparent; color: #F2E9DA; border: 1.5px solid #E8318E !important; border-radius: 24px 6px 24px 24px; } .bv-s4 { background: transparent; color: #CFC7B8; border: 1px solid #3A3630 !important; border-radius: 24px; padding: 15px 18px !important; } @media (min-width: 900px) { .bv-cuerpo { padding-top: 5vh; } .bv-pie { padding-bottom: 6vh; } } /* ============ Cuéntanos (siempre a mano) ============ */ #cuentanos { position: absolute; right: 0; top: 46%; z-index: 46; border: none; cursor: pointer; background: #E8318E; color: #0C0B0A; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; writing-mode: vertical-rl; transform: rotate(180deg); padding: 12px 6px; border-radius: 0 12px 12px 0; box-shadow: 0 4px 16px rgba(0,0,0,.18); } @media (min-width: 900px) { #cuentanos { writing-mode: horizontal-tb; transform: none; top: auto; right: auto; left: 28px; bottom: 22px; padding: 11px 16px; border-radius: 16px 16px 16px 4px; font-size: 10.5px; } #tabbar { padding-bottom: 76px; } } .aviso-ej { background: #FFC400; color: var(--negro); border-radius: 22px 22px 6px 22px; padding: 14px 16px; margin: 0 0 18px; } .aviso-ej .k { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; } .aviso-ej p { margin: 6px 0 12px; font-size: 14px; line-height: 1.4; } .aviso-ej button { width: 100%; }