:root{ --bg:#0C0D10; --panel:#15161A; --text:#EAEAEC; --muted:#9B9DA3; --faint:#888A91; --line:#23242A; --accent:var(--text); --display:"Space Grotesk", system-ui, sans-serif; --body:"IBM Plex Sans", system-ui, sans-serif; --mono:"JetBrains Mono", ui-monospace, monospace; } /* tema claro: se activa con el botón (data-theme="light" en ) */ :root[data-theme="light"]{ --bg:#F7F7F5; --panel:#FFFFFF; --text:#1A1B1E; --muted:#56585F; --faint:#6A6C73; --line:#E4E4E1; --accent:var(--text); } *{ box-sizing:border-box; margin:0; padding:0 } html{ -webkit-text-size-adjust:100% } body{ background:var(--bg); color:var(--text); font-family:var(--body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background-color .2s ease, color .2s ease; } @media (prefers-reduced-motion: reduce){ body{ transition:none } } a{ color:inherit; text-decoration:none } ::selection{ background:rgba(155,157,163,.32) } .wrap{ max-width:920px; margin:0 auto; padding:0 28px } /* ---------- hero ---------- */ .top{ padding:34px 0 0 } .hero{ display:grid; grid-template-columns:1fr auto; gap:40px; align-items:start } h1{ font-family:var(--display); font-weight:700; font-size:clamp(2.1rem,5vw,2.8rem); letter-spacing:-.02em; line-height:1.05 } .role{ font-family:var(--display); font-weight:600; font-size:1.18rem; margin-top:14px } .loc{ font-family:var(--mono); font-size:.8rem; color:var(--muted); margin-top:6px } #clock{ font-variant-numeric:tabular-nums } .presento{ color:var(--muted); font-size:.95rem; line-height:1.7; max-width:52ch; margin-top:22px } .presento a{ color:var(--text); border-bottom:1px solid var(--line); transition:border-color .16s ease } .presento a:hover{ border-color:var(--text) } .socials{ display:flex; gap:16px; margin-top:30px } .socials a{ color:var(--muted); display:inline-flex; transition:color .16s ease } .socials a:hover{ color:var(--text) } .socials svg{ width:21px; height:21px } .photo-col{ justify-self:end; text-align:right } .photo{ width:248px; max-width:42vw; aspect-ratio:1/1; display:grid; place-items:center; background:var(--panel); border:1px solid var(--line); border-radius:0; overflow:hidden; cursor:pointer; padding:0; color:var(--faint); font-family:var(--mono); font-size:.74rem; transition:border-color .16s ease, transform .16s ease; } .photo:hover{ border-color:var(--faint) } .photo:active{ transform:scale(.99) } .photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .18s ease } @media (prefers-reduced-motion: reduce){ .photo img{ transition:none } } .click{ font-family:var(--mono); font-size:.8rem; color:var(--muted); margin-top:12px; transition:color .16s ease } .photo-col:hover .click{ color:var(--text) } /* ---------- experiencia / educación / proyectos ---------- */ .cols{ display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:72px; padding-bottom:80px } h2{ font-family:var(--display); font-weight:600; font-size:1.5rem; margin-bottom:26px } .entry{ margin-bottom:24px } .entry:last-child{ margin-bottom:0 } .ehead{ display:flex; align-items:center; gap:8px; margin-bottom:4px } .ehead h3{ font-family:var(--display); font-weight:600; font-size:1.14rem } .gh, .live{ color:var(--faint); display:inline-flex; transition:color .16s ease } .gh:hover, .live:hover{ color:var(--text) } .gh svg, .live svg{ width:15px; height:15px } .desc{ color:var(--muted); font-size:.95rem } .desc a.link-emp{ color:var(--muted); border-bottom:1px solid var(--line); transition:color .16s ease, border-color .16s ease } .desc a.link-emp:hover{ color:var(--text); border-color:var(--faint) } .ehead a.link-emp{ color:inherit; border-bottom:1px solid var(--line); transition:border-color .16s ease } .ehead a.link-emp:hover{ border-color:var(--faint) } .stack{ font-family:var(--mono); font-size:.78rem; color:var(--faint); margin-top:3px } /* ---------- riel de bitácora (educación / experiencia) ---------- */ .rail{ border-left:1px solid var(--line); margin-left:5px; padding-left:28px; display:grid; gap:24px } .rail .entry{ margin-bottom:0 } .node{ position:relative } .node::before{ content:""; position:absolute; left:-33px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--text) } @media (prefers-reduced-motion: no-preference){ .node-live::before{ animation:pulso 2.2s ease-in-out infinite } } .node-ghost::before{ background:transparent; border:1px dashed var(--faint); width:8px; height:8px } .node-ghost h3{ color:var(--faint); font-weight:400 } .ndate{ font-family:var(--mono); font-size:.74rem; color:var(--faint); margin-bottom:3px } /* ---------- proyectos (ocupan el ancho completo, debajo de las dos columnas) ---------- */ .col-projects{ grid-column:1 / -1 } .proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px 40px } /* ---------- stack (ocupa el ancho completo, debajo de las dos columnas) ---------- */ .stk{ grid-column:1 / -1 } .stk-list{ display:grid; gap:14px; max-width:560px } .stk-row{ display:grid; grid-template-columns:120px 1fr; gap:18px; align-items:baseline } .stk-row dt{ font-family:var(--mono); font-size:.78rem; color:var(--faint) } .stk-row dd{ color:var(--muted); font-size:.95rem } @media (max-width:640px){ .stk-row{ grid-template-columns:1fr; gap:2px } } footer{ border-top:1px solid var(--line); padding:22px 0 56px; font-family:var(--mono); font-size:.74rem; color:var(--faint) } footer a{ color:var(--muted); border-bottom:1px solid var(--line) } footer a:hover{ color:var(--text) } /* ---------- accesibilidad ---------- */ a:focus-visible, .photo:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:0 } /* ---------- movimiento ---------- */ @media (prefers-reduced-motion: no-preference){ .reveal{ opacity:0; transform:translateY(10px); animation:rise .55s ease forwards } } @keyframes rise{ to{ opacity:1; transform:none } } /* ---------- barra de controles (tema + blog) ---------- */ .controls{ display:flex; justify-content:flex-end; align-items:center; gap:20px; padding-top:26px } .ctrl-theme{ color:var(--muted); background:none; border:none; padding:0; display:inline-flex; cursor:pointer; transition:color .16s ease; } .ctrl-theme:hover{ color:var(--text) } .ctrl-theme svg{ width:20px; height:20px } .ctrl-blog{ color:var(--muted); background:none; border:none; cursor:pointer; font-family:var(--mono); font-size:.82rem; padding:0 0 2px; border-bottom:1px solid var(--line); transition:color .16s ease, border-color .16s ease; } .ctrl-blog:hover{ color:var(--text); border-color:var(--faint) } .ctrl-blog.is-active{ color:var(--text); border-color:var(--text) } .pelis-nota{ color:var(--muted); font-size:.82rem; margin-bottom:20px; max-width:640px; line-height:1.5 } /* ---------- vista blog ---------- */ .blog{ padding:8px 0 80px } .blog-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:34px } .blog-head h2{ margin-bottom:0 } .back{ font-family:var(--mono); font-size:.8rem; color:var(--muted); background:none; border:none; cursor:pointer; padding:0; transition:color .16s ease } .back:hover{ color:var(--text) } .blog-head-r{ display:flex; align-items:baseline; gap:18px } .back-logout{ color:#e5484d } .back-logout:hover{ color:#c93c40 } .back-logout[hidden]{ display:none } .post-list{ display:grid; gap:4px } .post-link{ display:grid; grid-template-columns:1fr auto; gap:18px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--line); cursor:pointer; text-align:left; background:none; border-left:none; border-right:none; border-top:none; width:100%; } .post-link:first-child{ border-top:1px solid var(--line) } .post-link h3{ font-family:var(--display); font-weight:600; font-size:1.14rem; color:var(--text); transition:color .16s ease } .post-link:hover h3{ color:var(--accent) } .post-link .date{ font-family:var(--mono); font-size:.76rem; color:var(--faint); white-space:nowrap } .post{ max-width:680px } .post h2{ font-size:1.7rem; margin-bottom:6px } .post .date{ font-family:var(--mono); font-size:.78rem; color:var(--faint); display:block; margin-bottom:26px } .post p{ color:var(--muted); margin-bottom:16px } .post p:last-child{ margin-bottom:0 } .post a{ color:var(--accent); border-bottom:1px solid var(--line) } .post figure{ margin:0 0 20px } .post img{ display:block; max-width:100%; height:auto; border:1px solid var(--line); border-radius:0 } .post figcaption{ font-family:var(--mono); font-size:.76rem; color:var(--faint); margin-top:8px } .post h3{ font-family:var(--display); font-weight:600; font-size:1.16rem; margin:26px 0 10px } .post h3:first-child{ margin-top:0 } .post pre{ background:var(--panel); border:1px solid var(--line); padding:14px 16px; overflow-x:auto; margin:0 0 16px } .post pre code{ font-family:var(--mono); font-size:.82rem; line-height:1.6; color:var(--text); background:none; border:none; padding:0 } .post code{ font-family:var(--mono); font-size:.85em; color:var(--text); background:var(--panel); border:1px solid var(--line); padding:1px 5px } .post ul, .post ol{ color:var(--muted); margin:0 0 16px; padding-left:22px } .post li{ margin-bottom:6px } .post li:last-child{ margin-bottom:0 } .post blockquote{ border-left:2px solid var(--line); padding-left:16px; color:var(--faint); margin:0 0 16px } @media (max-width:640px){ .post-link{ grid-template-columns:1fr; gap:3px } .post-link .date{ order:-1 } } /* ---------- vista pelis (mini-letterboxd) ---------- */ .pelis{ padding:8px 0 80px; text-transform:lowercase } .pelis-status{ font-family:var(--mono); font-size:.8rem; color:var(--faint); margin-bottom:12px; min-height:1em } .pelis-vacio{ color:var(--muted) } .pelis-list{ display:flex; flex-direction:column; gap:30px } /* riel de bitácora en las listas: SOLO la cronología (los meses) cuelga de la línea de tiempo. "viendo ahora", "por jugar", "en pausa", etc. son estado, no cronología, y quedan fuera del riel. */ .tl-rail{ border-left:1px solid var(--line); margin-left:5px; padding-left:24px; display:flex; flex-direction:column; gap:30px } .mal-list .tl-rail{ gap:34px } /* grupos (mes en pelis · estado en anime/manga): encabezado plano estilo letterboxd */ .tl-label{ font-family:var(--mono); font-size:.82rem; font-weight:400; color:var(--muted); margin-bottom:4px } .tl-label b{ color:var(--text); font-weight:500 } .tl-count{ color:var(--faint); margin-left:8px } .tl-films{ display:flex; flex-direction:column } /* dentro del riel, cada mes lleva su nodo hueco sobre la línea */ .tl-rail .tl-label{ position:relative } .tl-rail .tl-label::before{ content:""; position:absolute; left:-29px; top:4px; width:8px; height:8px; border-radius:50%; border:1px solid var(--faint); background:var(--bg); } /* sección "ahora" (viendo/leyendo/jugando): punto en vivo junto al texto, fuera del riel */ .tl-activo .tl-label b{ color:var(--text) } .tl-activo .tl-label b::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--text); margin-right:9px; vertical-align:1px; } @media (prefers-reduced-motion: no-preference){ .tl-activo .tl-label b::before{ animation:pulso 2.2s ease-in-out infinite } } @keyframes pulso{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } } /* separador entre "ahora" y el historial por mes */ .tl-sep{ display:flex; align-items:center; gap:14px; margin:30px 0 16px } .tl-sep span{ font-family:var(--mono); font-size:.72rem; color:var(--faint); letter-spacing:1px } .tl-sep::after{ content:""; flex:1; height:1px; background:var(--line) } /* fila unificada (pelis · series · manga): portada · título+fecha ···· estrellas · ♥ · extra */ .prow{ display:flex; gap:14px; align-items:center; padding:10px 2px; border-bottom:1px solid var(--line) } .prow-has-eps{ align-items:flex-start; flex-wrap:wrap } .prow-poster{ width:92px; flex:none } .poster{ width:100%; aspect-ratio:2/3; object-fit:cover; display:block; border-radius:0; border:1px solid var(--line); background:var(--panel) } .poster-ph{ display:flex; align-items:center; justify-content:center; text-align:center; padding:5px; font-family:var(--mono); font-size:.54rem; line-height:1.2; color:var(--faint) } .prow-main{ flex:1; min-width:0 } .prow-title{ font-family:var(--display); font-weight:600; font-size:1.05rem; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block } .prow-year{ font-family:var(--mono); font-weight:400; font-size:.78rem; color:var(--faint); margin-left:6px } .prow-sub{ font-family:var(--mono); font-size:.72rem; color:var(--faint); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .prow-meta{ flex:none; display:flex; align-items:center } .col{ display:flex; align-items:center; white-space:nowrap } .col-stars{ width:100px; justify-content:flex-end; font-size:.98rem; color:var(--accent); letter-spacing:1px } .pcard-eps{ font-family:var(--mono); font-size:.72rem; color:var(--faint); letter-spacing:normal } .col-stars .g{ position:relative; display:inline-block } .col-stars .g.e{ color:var(--line) } .col-stars .g.h{ color:var(--line) } .col-stars .g.h::before{ content:"★"; position:absolute; left:0; top:0; height:100%; width:50%; overflow:hidden; color:var(--accent) } .col-fav{ width:32px; justify-content:center } .col-extra{ width:62px; justify-content:flex-end; gap:7px } .pcard-fav{ color:#e5484d; font-size:1.05rem; line-height:1 } .pcard-cine{ font-size:.92rem; line-height:1 } .pcard-rew{ font-family:var(--mono); font-size:1rem; color:var(--faint); line-height:1 } .pcard-prog{ font-family:var(--mono); font-size:.8rem; color:var(--faint) } .prow-admin{ flex:none; display:flex; gap:6px; margin-left:4px; visibility:hidden } .prow:hover .prow-admin{ visibility:visible } .prow-admin button{ border:1px solid var(--line); border-radius:0; background:var(--panel); color:var(--muted); cursor:pointer; font-family:var(--mono); font-size:.7rem; padding:5px 9px; white-space:nowrap; transition:color .14s ease, border-color .14s ease } .prow-admin button:hover{ color:var(--text); border-color:var(--faint) } /* formulario de administración */ .pelis-admin{ border:1px solid var(--line); border-radius:0; padding:18px; margin-bottom:30px; background:var(--panel) } .pelis-form{ display:flex; flex-wrap:wrap; gap:10px; align-items:center } .pelis-form--add{ flex-direction:column; align-items:stretch; max-width:420px } .pelis-form input, .pelis-form textarea{ font-family:var(--body); font-size:.9rem; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:0; padding:9px 11px; width:100%; } .pelis-form input:focus, .pelis-form textarea:focus{ outline:none; border-color:var(--accent) } .pelis-form textarea{ resize:vertical } .pelis-form button{ font-family:var(--mono); font-size:.82rem; color:var(--bg); background:var(--accent); border:none; border-radius:0; padding:9px 16px; cursor:pointer; transition:opacity .16s ease; } .pelis-form button:hover{ opacity:.9 } #pelis-unlock{ max-width:340px; flex-wrap:nowrap } #pelis-unlock input{ flex:1; width:auto } .pelis-msg{ font-family:var(--mono); font-size:.78rem; color:var(--muted); margin-top:10px; min-height:1em } /* formulario de agregar (buscar en TMDB + tus datos) */ .pelis-add{ max-width:460px } .pa-fuente{ display:flex; gap:18px; margin-bottom:10px } .pa-radio{ display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.82rem; color:var(--muted); cursor:pointer } .pa-radio input{ accent-color:var(--accent); cursor:pointer } .pa-radio span{ color:var(--faint); font-size:.7rem } .pa-search{ width:100%; font-family:var(--body); font-size:.92rem; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:0; padding:10px 12px } .pa-search:focus{ outline:none; border-color:var(--accent) } .pa-results{ display:flex; flex-direction:column; gap:2px; margin-top:8px; max-height:280px; overflow-y:auto } .pa-res{ display:flex; align-items:center; gap:10px; text-align:left; background:none; border:none; cursor:pointer; padding:6px; border-radius:0; width:100% } .pa-res:hover{ background:var(--bg) } .pa-res img, .pa-res-ph{ width:34px; height:51px; object-fit:cover; border-radius:0; border:1px solid var(--line); flex:none; background:var(--bg) } .pa-res-t{ font-size:.9rem; color:var(--text) } .pa-res-t em{ font-style:normal; color:var(--faint); font-family:var(--mono); font-size:.8rem } .pa-chosen-head{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px } .pa-poster{ width:56px; aspect-ratio:2/3; object-fit:cover; border-radius:0; border:1px solid var(--line) } .pa-nombre{ font-family:var(--display); font-weight:600; font-size:1.02rem } .pa-link{ background:none; border:none; color:var(--accent); cursor:pointer; font-family:var(--mono); font-size:.76rem; padding:4px 0 } .pa-datos{ display:flex; flex-direction:column; gap:12px } .pa-field{ display:flex; flex-direction:column; gap:4px; font-family:var(--mono); font-size:.74rem; color:var(--faint) } .pa-field input, .pa-field select, .pa-datos textarea{ font-family:var(--body); font-size:.9rem; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:0; padding:9px 11px } .pa-field input:focus, .pa-field select:focus, .pa-datos textarea:focus{ outline:none; border-color:var(--accent) } .pa-datos textarea{ resize:vertical } .pa-check{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.82rem; color:var(--muted); cursor:pointer } .pa-check input{ accent-color:var(--accent); width:15px; height:15px } .pa-datos button[type="submit"]{ font-family:var(--mono); font-size:.82rem; color:var(--bg); background:var(--accent); border:none; border-radius:0; padding:10px 16px; cursor:pointer; margin-top:2px } .pa-datos button[type="submit"]:hover{ opacity:.9 } .pe-actions{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:2px } .pe-del{ background:none; border:none; color:#e5484d; cursor:pointer; font-family:var(--mono); font-size:.78rem; padding:6px 0 } .pe-del:hover{ text-decoration:underline } /* selector de póster (modal) */ .pelis-modal{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:24px } .pelis-modal[hidden]{ display:none } .pm-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6) } .pm-panel{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:0; width:100%; max-width:640px; max-height:82vh; display:flex; flex-direction:column; overflow:hidden } .pm-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:.82rem; color:var(--text) } .pm-close{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:.9rem; padding:2px 6px } .pm-close:hover{ color:var(--text) } .pm-body{ padding:16px; overflow-y:auto } .pm-msg{ font-family:var(--mono); font-size:.8rem; color:var(--muted) } .pm-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr)); gap:12px } .pm-opt{ padding:0; border:1px solid var(--line); border-radius:0; background:none; cursor:pointer; overflow:hidden; transition:border-color .14s ease } .pm-opt:hover{ border-color:var(--accent) } .pm-opt img{ display:block; width:100%; aspect-ratio:2/3; object-fit:cover } /* tracker por episodio */ .eps-tools{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap } .eps-resumen{ font-family:var(--mono); font-size:.78rem; color:var(--muted) } .eps-resumen .col-stars{ display:inline-flex; width:auto; letter-spacing:1px; color:var(--accent) } .eps-todos{ font-family:var(--mono); font-size:.72rem; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:0; padding:6px 10px; cursor:pointer } .eps-todos:hover{ border-color:var(--faint); color:var(--text) } .eps-list{ display:flex; flex-direction:column } .eps-row{ display:flex; align-items:center; gap:12px; padding:8px 2px; border-bottom:1px solid var(--line) } .eps-check{ display:flex; align-items:center } .eps-check input{ accent-color:var(--accent); width:16px; height:16px; cursor:pointer } .eps-num{ font-family:var(--mono); font-size:.82rem; color:var(--muted); width:48px; flex:none } .eps-nota{ flex:1 1 auto; min-width:0; font-family:var(--body); font-size:.85rem; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:0; padding:6px 8px } .eps-fecha{ flex:none; font-family:var(--body); font-size:.8rem; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:0; padding:6px 8px } .eps-nota:focus, .eps-fecha:focus{ outline:none; border-color:var(--accent) } /* capítulos vistos: lista vertical bajo el título de cada serie en el diario */ .prow-eps{ flex-basis:100%; width:100%; margin-top:10px; display:flex; flex-direction:column; gap:3px; font-family:var(--mono); font-size:.74rem; color:var(--muted); font-variant-numeric:tabular-nums } .epsl-row{ display:flex; align-items:center; gap:14px } .epsl-num{ color:var(--faint); width:42px; flex:none } .epsl-row .col-stars{ width:66px; justify-content:flex-start; font-size:.8rem; flex:none } .epsl-fecha{ color:var(--faint) } .eps-actions{ position:sticky; bottom:0; background:var(--panel); padding-top:12px; margin-top:2px; justify-content:flex-start } .eps-actions button{ font-family:var(--mono); font-size:.82rem; color:var(--bg); background:var(--accent); border:none; border-radius:0; padding:10px 16px; cursor:pointer } .eps-actions button:hover{ opacity:.9 } /* ===== hub: pestañas pelis / anime / manga ===== */ .hub-tabs{ display:flex; flex-wrap:wrap; gap:20px; margin:0 0 30px } .hub-tab{ background:none; border:none; cursor:pointer; font-family:var(--mono); font-size:.82rem; color:var(--muted); padding:0 0 2px; border-bottom:1px solid var(--line); transition:color .16s ease, border-color .16s ease } .hub-tab:hover{ color:var(--text); border-color:var(--faint) } .hub-tab.is-active{ color:var(--text); border-color:var(--text) } /* sub-secciones dentro de una sección (diario · en curso · archivo) */ .sub-tabs{ display:flex; flex-wrap:wrap; gap:18px; margin:-6px 0 24px } .sub-tabs[hidden]{ display:none } .sub-tab{ background:none; border:none; cursor:pointer; font-family:var(--mono); font-size:.75rem; color:var(--faint); padding:0 0 3px; border-bottom:1px solid transparent; transition:color .16s ease, border-color .16s ease } .sub-tab:hover{ color:var(--muted) } .sub-tab.is-active{ color:var(--text); border-bottom-color:var(--text) } .sub-tab .n{ margin-left:5px; font-size:.9em; color:var(--line) } .sub-tab.is-active .n{ color:var(--faint) } .hub-panel[hidden]{ display:none } /* ===== pestaña blog ===== */ .blog-volver{ font-family:var(--mono); font-size:.8rem; color:var(--muted); background:none; border:none; cursor:pointer; padding:0 0 20px; display:inline-block; transition:color .16s ease; } .blog-volver:hover{ color:var(--text) } /* lista de posts: controles de admin al pasar el mouse */ .post-item{ position:relative } .post-admin{ position:absolute; right:0; top:0; bottom:0; display:flex; align-items:center; gap:6px; padding-left:34px; background:linear-gradient(to right, transparent, var(--bg) 34px); opacity:0; transition:opacity .14s ease; } .post-item:hover .post-admin{ opacity:1 } .post-admin button{ border:1px solid var(--line); border-radius:0; background:var(--panel); color:var(--muted); cursor:pointer; font-family:var(--mono); font-size:.7rem; padding:5px 9px; transition:color .14s ease, border-color .14s ease; } .post-admin button:hover{ color:var(--text); border-color:var(--faint) } /* formulario del blog */ #blog-unlock{ max-width:340px; flex-wrap:nowrap } #blog-unlock input{ flex:1; width:auto } .blog-form-actions{ display:flex; gap:10px; align-items:center } .pelis-form button.blog-cancelar{ background:none; color:var(--muted); border:1px solid var(--line) } .pelis-form button.blog-cancelar:hover{ color:var(--text); border-color:var(--faint); opacity:1 } /* barra de plantillas del editor */ .bf-tools{ display:flex; flex-wrap:wrap; gap:6px } .bf-tools button{ border:1px solid var(--line); border-radius:0; background:var(--bg); color:var(--muted); cursor:pointer; font-family:var(--mono); font-size:.7rem; padding:5px 9px; transition:color .14s ease, border-color .14s ease; } .bf-tools button:hover{ color:var(--text); border-color:var(--faint) } .pelis-form button.bf-prev-btn{ background:none; color:var(--muted); border:1px solid var(--line) } .pelis-form button.bf-prev-btn:hover{ color:var(--text); border-color:var(--faint); opacity:1 } .bf-preview{ border:1px dashed var(--line); padding:18px; margin-top:14px; max-width:none } .bf-preview:empty{ display:none } /* ===== listas anime / manga ===== */ .mal-list{ display:flex; flex-direction:column; gap:34px } .pcard-prog{ font-family:var(--mono); font-size:.82rem; color:var(--faint); white-space:nowrap } /* estantería horizontal de "viendo/leyendo ahora" */ .mal-shelf{ display:flex; gap:14px; overflow-x:auto; padding:2px 2px 12px; scroll-snap-type:x proximity; scrollbar-width:thin } /* grilla sin scroll: portadas juntas en horizontal que bajan en filas (usada en pelis · por ver) */ .pcard-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:24px 14px; padding:2px 2px 4px } .pcard-grid .hcard{ width:auto } .hcard{ flex:0 0 auto; width:112px; scroll-snap-align:start } .hcard-cover{ position:relative; border-radius:0; overflow:hidden; border:1px solid var(--line); background:var(--panel) } .hcard-cover .poster{ border:none; border-radius:0 } .hcard-t{ font-family:var(--display); font-weight:600; font-size:.85rem; line-height:1.25; margin-top:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .hcard-meta{ font-family:var(--mono); font-size:.72rem; color:var(--faint); margin-top:2px } .hcard-admin{ position:absolute; left:0; right:0; bottom:0; display:flex; gap:4px; padding:5px; background:linear-gradient(to top, rgba(0,0,0,.78), transparent); opacity:0; transition:opacity .14s ease } .hcard-cover:hover .hcard-admin{ opacity:1 } .hcard-admin button{ flex:1; border:1px solid rgba(255,255,255,.35); border-radius:0; background:rgba(0,0,0,.5); color:#fff; cursor:pointer; font-family:var(--mono); font-size:.6rem; padding:4px 2px; white-space:nowrap } .hcard-admin button:hover{ background:var(--accent); border-color:var(--accent); color:var(--bg) } @media (max-width:640px){ .hero{ grid-template-columns:1fr; gap:28px } .photo-col{ justify-self:start; text-align:left } .photo{ max-width:248px } .click{ text-align:left } .socials{ margin-top:24px } .cols{ grid-template-columns:1fr; gap:44px } .rail{ margin-left:2px; padding-left:22px } .node::before{ left:-27px } .tl-rail{ margin-left:2px; padding-left:18px } .tl-rail .tl-label::before{ left:-23px } .proj-grid{ grid-template-columns:1fr; gap:24px } .prow{ gap:10px } .prow-poster{ width:74px } .prow-title{ font-size:.98rem } .col-stars{ width:82px; font-size:.9rem } .col-fav{ width:26px } .col-extra{ width:48px } }