/* =========================================================================
rediseño v2 — capa sobre styles.css
inspiración: opencode.ai · docker.com
reglas de la casa, respetadas en todo el archivo:
· nada de cajas ni botones: la estructura la dan líneas de 1px y aire
· sólo blanco y negro: ni un tono de color, salvo la foto
· mayúsculas sólo en los rótulos que nombran partes de la página
(ver el bloque MAYÚSCULAS al final); el resto va en minúscula
esta hoja se carga DESPUÉS de styles.css y la pisa. para volver al diseño
anterior basta con borrar el de styles-v2.css en el index.html.
========================================================================= */
/* ---------- tokens ----------
sólo blanco y negro: ni un tono de color en toda la paleta. el acento ES el
blanco puro (o el negro puro en tema claro), y la jerarquía la llevan los
grises y el grosor de las líneas. */
:root{
--bg:#0A0A0A;
--panel:#141414;
--panel-2:#1A1A1A;
--text:#F5F5F5;
--muted:#A1A1A1;
--faint:#707070;
--line:#242424;
--line-2:#3A3A3A;
--accent:#FFFFFF;
--accent-soft:rgba(255,255,255,.14);
--star:#F5F5F5;
--frame:1088px;
--gutter:44px; /* aire contra los rieles del contenedor (se encoge con
el ancho: ver el bloque responsive del final) */
--gutter-in:30px; /* aire a cada lado de las divisorias internas */
}
:root[data-theme="light"]{
--bg:#FFFFFF;
--panel:#FAFAFA;
--panel-2:#F2F2F2;
--text:#0A0A0A;
--muted:#565656;
--faint:#7A7A7A;
--line:#E4E4E4;
--line-2:#C8C8C8;
--accent:#000000;
--accent-soft:rgba(0,0,0,.10);
--star:#0A0A0A;
}
/* ---------- el salto de 15px al cambiar de pestaña ----------
Blog mide 613px de alto y cabe en la pantalla, así que no hay barra de
scroll. Pelis mide 1753px, aparece la barra, y el ancho útil pasa de 1100
a 1085: la página entera se corre 15px a la izquierda de golpe. Con los
rieles verticales de más abajo se nota todavía más, porque el marco
también se mueve.
scrollbar-gutter:stable reserva el canal siempre, haya barra o no, así que
el ancho no cambia nunca y no hay salto. Se pone en , no en body:
el que hace scroll es el elemento raíz.
En un navegador que no lo soporte simplemente no pasa nada y vuelve el
salto — no rompe nada. Se descartó overflow-y:scroll (el otro arreglo
típico) porque deja el riel de la barra a la vista todo el tiempo, y en un
diseño de líneas de 1px eso mete una franja gris que no pinta nada. */
html{ scrollbar-gutter:stable }
/* ---------- rieles verticales del contenedor ----------
dos líneas fijas que recorren toda la página: es lo único que "encuadra",
y no encierra nada. */
body{ position:relative }
body::before{
content:""; position:fixed; top:0; bottom:0; left:50%;
width:var(--frame); transform:translateX(-50%);
border-left:1px solid var(--line); border-right:1px solid var(--line);
pointer-events:none; z-index:0;
}
@media (max-width:1140px){ body::before{ display:none } }
body > *{ position:relative; z-index:1 }
.wrap{ max-width:var(--frame); padding:0 var(--gutter) }
/* ---------- barra superior ---------- */
.controls{
justify-content:space-between; gap:22px;
padding:0 var(--gutter); height:54px; align-items:center;
border-bottom:1px solid var(--line);
background:color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter:saturate(140%) blur(8px);
position:sticky; top:0; z-index:20;
}
/* anula el adorno de la hoja base: el lugar y la hora son html real */
.controls::before{ content:none }
.nav-loc{
margin-right:auto; font-family:var(--mono); font-size:.78rem; color:var(--faint);
}
.nav-loc #clock{ color:var(--muted); font-variant-numeric:tabular-nums }
.ctrl-theme svg{ width:17px; height:17px }
.ctrl-theme:hover{ color:var(--accent) }
.ctrl-blog{
font-size:.8rem; padding:0 0 3px;
border-bottom:1px solid transparent;
}
.ctrl-blog:hover{ color:var(--text); border-bottom-color:var(--line-2) }
.ctrl-blog.is-active{ color:var(--accent); border-bottom-color:var(--accent) }
/* ---------- una sola pantalla ----------
la vista CV ocupa el alto de la ventana: el hero se centra en el espacio
que sobra y educación/experiencia quedan ancladas abajo, sin scroll. */
#cv{
display:flex; flex-direction:column;
min-height:calc(100dvh - 54px);
}
/* IMPORTANTE: el javascript esconde la portada con cv.hidden = true para
mostrar el blog. una regla de autor (el display:flex de arriba) le gana
siempre al display:none que el navegador aplica por el atributo hidden,
así que sin esta línea la portada no se oculta nunca y el blog aparece
pegado debajo de ella. lo mismo vale para cualquier elemento al que el
css le fije un display y el js lo oculte con hidden. */
#cv[hidden]{ display:none }
/* mismo caso: los formularios de administración se ocultan con hidden y
.pelis-form les fija display:flex */
.pelis-form[hidden], .pelis-add[hidden], .pelis-admin[hidden]{ display:none }
.top{ flex:1 1 auto; display:flex; align-items:center }
.top > .wrap{ width:100% }
.cols{ flex:0 0 auto }
/* ---------- hero ---------- */
.top{
position:relative; overflow:hidden;
padding:clamp(28px,5.5vh,72px) 0; border-bottom:1px solid var(--line);
}
/* trama de puntos en un pseudo-elemento, para que el degradado que la
desvanece no afecte al texto */
.top::before{
content:""; position:absolute; inset:0; pointer-events:none;
background-image:radial-gradient(var(--line) 1px, transparent 1px);
background-size:26px 26px;
-webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.55), transparent 68%);
mask-image:linear-gradient(180deg, rgba(0,0,0,.55), transparent 68%);
}
/* el hero: una columna de texto a la izquierda y la foto a la derecha,
ocupando todo el alto de esa columna.
fila 1: título ┐
fila 2: descripción ├── columna 1 foto ── columna 2
fila 3: redes ┘ (filas 1 a 3)
.intro no pinta nada por sí misma, así que con display:contents sus hijos
entran directamente en esta retícula y se colocan fila por fila, sin
necesidad de envolturas extra en el html. */
.hero{
position:relative; display:grid;
grid-template-columns:1fr auto;
gap:clamp(18px,3vh,30px) clamp(30px,5vw,64px);
align-items:start;
}
.intro{ display:contents }
h1{ grid-column:1; grid-row:1 }
.presento{ grid-column:1; grid-row:2 }
/* fila 3: las redes */
.socials{ grid-column:1; grid-row:3 }
/* la foto abarca las tres filas: su alto es el de toda la columna de texto */
.photo-col{ grid-column:2; grid-row:1 / 4; align-self:stretch }
/* el nombre a sangre, en dos líneas, cerrado por una regla de 1px.
line-height por debajo de 1 aprieta las dos líneas a propósito, pero no
puede bajar de ~.94: la cola de la coma de "Hola," cae justo encima de la
"N" de "Nico" y a este tamaño se rozan. */
h1{
font-size:clamp(2.4rem,7.6vw,6.6rem); letter-spacing:-.05em; line-height:.96; font-weight:700;
text-wrap:balance;
}
h1 .n{ color:var(--accent) }
/* sin la regla de 1px que cerraba el nombre, el aire que la separaba del
párrafo pasa a ser margen inferior del título */
h1::after{ content:none }
h1{ margin-bottom:clamp(18px,3vh,34px) }
/* el margen superior lo pone el gap de la retícula del hero */
.presento{ font-size:1rem; line-height:1.72; margin-top:0; max-width:58ch }
.presento a{ color:var(--text); border-bottom:1px solid var(--line-2) }
.presento a:hover{ color:var(--accent); border-color:var(--accent) }
/* íconos: en fila, alineados a la izquierda bajo la descripción */
.socials{ display:flex; align-items:center; gap:22px; margin-top:0 }
.socials a{ color:var(--muted); transition:color .16s ease, transform .16s ease }
.socials a:hover{ color:var(--accent); transform:translateY(-2px) }
.socials svg{ width:21px; height:21px }
/* el correo, como texto junto a los íconos */
.socials a.mail{
font-family:var(--mono); font-size:.82rem; color:var(--muted);
border-bottom:1px solid var(--line-2); padding-bottom:2px;
transition:color .16s ease, border-color .16s ease;
}
.socials a.mail:hover{ color:var(--accent); border-color:var(--accent); transform:none }
/* la foto: una línea de 1px y ticks de esquina que aparecen al pasar el mouse.
no tiene alto propio — lo recibe de la columna de texto que tiene al lado —,
por eso pierde el aspect-ratio fijo. */
.photo-col{
display:flex; flex-direction:column; align-items:flex-start;
align-self:stretch; position:relative;
}
.photo{
position:relative; flex:1 1 auto; min-height:0; aspect-ratio:auto;
width:clamp(200px,27vw,340px); border-radius:0;
background:var(--panel); border:1px solid var(--line);
}
/* "click me" sale del flujo para no restarle alto a la foto: si contara,
la foto quedaría más baja que el título por esos ~26px. */
.click{
position:absolute; top:100%; left:0; margin:10px 0 0;
font-size:.74rem; color:var(--faint); white-space:nowrap;
}
/* la foto va a color: es el único punto de color de la página, y ese es
justamente el efecto. */
/* las fotos del array tienen proporciones distintas entre sí. anclada a los
cuatro bordes, la imagen ya no puede imponerle su tamaño a la caja: la caja
manda y la imagen se recorta para llenarla (cover, nunca deformada). así
todas se ven exactamente del mismo tamaño al ir cambiándolas. */
.photo img{
position:absolute; inset:0;
width:100%; height:100%; object-fit:cover; object-position:center;
filter:none;
}
.photo::before, .photo::after{
content:""; position:absolute; width:16px; height:16px; z-index:2; pointer-events:none;
border-color:var(--accent); border-style:solid; opacity:0; transition:opacity .18s ease;
}
.photo::before{ top:-1px; left:-1px; border-width:1px 0 0 1px }
.photo::after{ bottom:-1px; right:-1px; border-width:0 1px 1px 0 }
.photo:hover{ border-color:var(--line-2) }
.photo:hover::before, .photo:hover::after{ opacity:1 }
/* ---------- secciones: grilla de líneas, no de cajas ---------- */
.cols{
counter-reset:sec; grid-template-columns:repeat(3,1fr);
gap:0; margin-top:0; padding-bottom:0;
}
.cols > section{
counter-increment:sec; min-width:0;
padding:clamp(24px,3.6vh,44px) 0 clamp(28px,4.4vh,52px);
}
/* divisorias verticales entre educación · experiencia · bitácora */
.cols > section:nth-child(1),
.cols > section:nth-child(2){ padding-right:var(--gutter-in); border-right:1px solid var(--line) }
.cols > section:nth-child(2),
.cols > section:nth-child(3){ padding-left:var(--gutter-in) }
/* las secciones a todo el ancho se separan con una línea horizontal */
.col-projects, .stk{ border-top:1px solid var(--line) }
/* encabezado: 01 · educación ──────────────── */
.cols h2, .col-projects h2{
display:flex; align-items:center; gap:14px;
font-family:var(--mono); font-weight:400; font-size:.82rem; letter-spacing:.02em;
color:var(--muted); margin-bottom:clamp(16px,2.6vh,30px);
}
.cols h2::before{
content:counter(sec,decimal-leading-zero); color:var(--accent); font-size:.78rem;
}
/* sin filete a la derecha del título: el número y el aire de la izquierda ya
marcan dónde empieza cada columna */
.cols h2::after{ content:none }
/* riel de bitácora ---------------------------------------------------- */
.rail{ border-left:1px dashed var(--line-2); gap:clamp(18px,2.8vh,30px) }
.node::before{
border-radius:1px; width:7px; height:7px; left:-32px; top:7px; background:var(--accent);
box-shadow:0 0 0 3px var(--accent-soft);
}
.node-ghost::before{
background:transparent; box-shadow:none; border:1px dashed var(--faint); width:7px; height:7px;
}
.ndate{ font-size:.74rem; color:var(--faint); margin-bottom:5px }
.ehead h3{ font-size:1.08rem; letter-spacing:-.01em }
.desc{ font-size:.94rem; line-height:1.65; margin-top:5px }
.stack{ margin-top:8px; font-size:.76rem; color:var(--faint) }
.desc a.link-emp:hover, .ehead a.link-emp:hover{ color:var(--accent); border-color:var(--accent) }
/* ---------- stack: rótulo, y bajo él cada tecnología con su logo ----------
los logos son de Simple Icons (CC0): un solo path, silueta, sin color de
marca. Embebidos y con fill:currentColor, como los de github y linkedin,
así que siguen el blanco y negro y cambian solos con el tema. */
.stk{
border-top:1px solid var(--line);
padding:clamp(24px,3.6vh,44px) 0 clamp(28px,4.4vh,52px);
}
/* tres celdas en los mismos ejes que educación · experiencia · bitácora, con
la misma divisoria vertical: la columna se prolonga hacia abajo en vez de
abrir una retícula nueva a media página. */
.stk-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; max-width:none }
.stk-row{ display:block; padding-right:var(--gutter-in) }
.stk-row + .stk-row{ padding-left:var(--gutter-in) }
.stk-row:not(:last-child){ border-right:1px solid var(--line) }
.stk-row dt{ margin-bottom:11px }
.lg-list{ display:flex; flex-direction:column; gap:10px; margin:0 }
.lg{
display:inline-flex; align-items:center; gap:9px;
font-size:.92rem; color:var(--muted); transition:color .16s ease;
}
.lg:hover{ color:var(--text) }
.lg svg{ flex:0 0 auto; width:15px; height:15px }
/* proyectos: columnas separadas por aire y una línea superior fina */
.proj-grid{ gap:34px 40px; grid-template-columns:repeat(3,1fr) }
.proj-grid .entry{ padding-top:18px; border-top:1px solid var(--line); margin:0 }
.proj-grid .entry:hover{ border-top-color:var(--accent) }
.proj-grid .entry{ transition:border-color .18s ease }
.gh:hover, .live:hover{ color:var(--accent) }
/* ---------- bitácora: últimos posts en la portada ---------- */
.ultimos{ display:flex; flex-direction:column }
.ultimo{
display:block; width:100%; text-align:left; cursor:pointer;
background:none; border:none; border-bottom:1px solid var(--line);
padding:0 0 12px; margin-bottom:12px;
transition:border-color .16s ease;
}
.ultimo:last-of-type{ border-bottom:none }
.ultimo-fecha{
display:block; font-family:var(--mono); font-size:.72rem; color:var(--faint); margin-bottom:4px;
}
.ultimo-titulo{
display:block; font-family:var(--display); font-weight:600; font-size:.98rem;
line-height:1.3; color:var(--text); transition:color .16s ease;
}
.ultimo:hover{ border-bottom-color:var(--line-2) }
.ultimo:hover .ultimo-titulo{ color:var(--accent) }
.ultimos-todos{
align-self:flex-start; margin-top:6px; padding:0 0 3px; cursor:pointer;
background:none; border:none; border-bottom:1px solid transparent;
font-family:var(--mono); font-size:.76rem; color:var(--muted);
transition:color .16s ease, border-color .16s ease;
}
.ultimos-todos:hover{ color:var(--accent); border-bottom-color:var(--accent) }
.ultimos-msg{ font-family:var(--mono); font-size:.78rem; color:var(--faint) }
.stk{ padding-top:46px }
.stk-row dt{ font-size:.78rem; color:var(--faint) }
footer{ padding:22px 0 44px; font-size:.74rem; border-top:1px solid var(--line) }
footer a{ border-bottom-color:var(--line-2) }
footer a:hover{ color:var(--accent) }
/* ---------- vista blog / listas ---------- */
.listas, .blog{ padding-top:52px }
.blog-head{ align-items:baseline; margin-bottom:32px }
.blog-head h2, #listas-title{
font-family:var(--display); font-weight:700; font-size:clamp(1.8rem,4vw,2.5rem);
letter-spacing:-.03em;
}
.back:hover{ color:var(--accent) }
/* pestañas: texto con subrayado, sin caja */
.hub-tabs{ gap:22px; margin-bottom:30px }
.hub-tab{ font-size:.84rem; border-bottom:1px solid transparent; padding:0 0 4px }
.hub-tab:hover{ color:var(--text); border-bottom-color:var(--line-2) }
.hub-tab.is-active{ color:var(--accent); border-bottom-color:var(--accent) }
.sub-tab.is-active{ color:var(--accent); border-bottom-color:var(--accent) }
.sub-tab .n{ color:var(--faint) }
/* lista de posts: filas separadas por una línea, sin recuadro */
.post-link{
border:none; border-bottom:1px solid var(--line); border-radius:0;
padding:20px 0; background:none;
transition:border-color .16s ease;
}
.post-link:first-child{ border-top:1px solid var(--line) }
.post-link:hover{ border-bottom-color:var(--accent) }
.post-link:hover h3{ color:var(--accent) }
.post-link .date{ font-size:.76rem; color:var(--faint) }
/* post */
.post h2{ font-size:1.95rem; letter-spacing:-.03em }
.post .date{ font-size:.78rem }
.post a{ color:var(--accent); border-bottom-color:var(--accent) }
.post pre{ background:var(--panel); border-color:var(--line); padding:16px 18px }
.post code{ background:var(--panel) }
.post blockquote{ border-left:2px solid var(--accent); color:var(--muted) }
/* ---------- listas (pelis / anime / manga) ---------- */
.tl-rail{ border-left:1px dashed var(--line-2) }
.tl-rail .tl-label::before{ border-radius:1px; border-color:var(--accent) }
.tl-activo .tl-label b::before{ background:var(--accent); border-radius:1px }
.prow{ padding:12px 0; border-bottom:1px solid var(--line) }
.prow:hover{ border-bottom-color:var(--line-2) }
.col-stars{ color:var(--star) }
.col-stars .g.h::before{ color:var(--star) }
.eps-resumen .col-stars{ color:var(--star) }
/* controles de admin: texto, no botones */
.prow-admin button, .post-admin button, .bf-tools button, .eps-todos{
border:none; background:none; padding:5px 0; margin-left:14px; color:var(--faint);
border-bottom:1px solid transparent;
}
.prow-admin button:hover, .post-admin button:hover, .bf-tools button:hover, .eps-todos:hover{
color:var(--accent); border-bottom-color:var(--accent); background:none;
}
.bf-tools{ gap:0 }
.bf-tools button{ margin:0 18px 0 0 }
.hcard-cover{ border-radius:0 }
.hcard-admin button{ border:none; background:rgba(0,0,0,.55) }
/* con el acento en blanco, el texto del hover tiene que ser el fondo */
.hcard-admin button:hover{ background:var(--accent); color:var(--bg) }
/* ---------- los últimos restos de color ----------
el rojo de borrar y del corazón, y los emoji de las listas: aquí se
neutraliza todo. la jerarquía la lleva el gris, no el matiz. */
.back-logout{ color:var(--muted) }
.back-logout:hover{ color:var(--text) }
.pe-del{ color:var(--muted) }
.pe-del:hover{ color:var(--text) }
.pcard-fav{ color:var(--text) }
/* 🍿 y 🔖 son emoji de color; el filtro los pasa a gris */
.pcard-cine, .pa-check{ filter:grayscale(1) }
/* ---------- formularios ----------
los campos conservan su línea (un input necesita mostrar dónde se escribe),
pero los botones pasan a ser texto con subrayado. */
.pelis-admin{ border:none; border-left:1px solid var(--line); background:none; padding:4px 0 4px 26px }
.pelis-form input, .pelis-form textarea, .pa-search,
.pa-field input, .pa-field select, .pa-datos textarea, .eps-nota, .eps-fecha{
background:var(--panel); transition:border-color .14s ease, box-shadow .14s ease;
}
.pelis-form input:focus, .pelis-form textarea:focus, .pa-search:focus,
.pa-field input:focus, .pa-field select:focus, .pa-datos textarea:focus,
.eps-nota:focus, .eps-fecha:focus{
border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.pelis-form button, .pa-datos button[type="submit"], .eps-actions button{
background:none; color:var(--accent); border:none; border-bottom:1px solid var(--accent);
border-radius:0; padding:4px 0; align-self:flex-start;
}
.pelis-form button:hover, .pa-datos button[type="submit"]:hover, .eps-actions button:hover{
opacity:1; color:var(--text); border-bottom-color:var(--text);
}
.pelis-form button.blog-cancelar, .pelis-form button.bf-prev-btn{
color:var(--muted); background:none; border:none; border-bottom:1px solid var(--line-2);
}
.pelis-form button.blog-cancelar:hover, .pelis-form button.bf-prev-btn:hover{
color:var(--accent); border-bottom-color:var(--accent);
}
.pa-link{ color:var(--accent) }
.pa-res:hover{ background:var(--panel) }
.pm-opt:hover{ border-color:var(--accent) }
.bf-preview{ border-color:var(--line-2) }
.pa-radio input, .pa-check input, .eps-check input{ accent-color:var(--accent) }
/* =========================================================================
MAYÚSCULAS
agrupadas aquí para poder ajustarlas o quitarlas de una sola vez.
el criterio: van en versales las palabras que NOMBRAN una parte de la
página, no las que dicen algo. quedan fuera, a propósito, el nombre, los
títulos de entradas y posts, las fechas, las redes, los tabs y todos los
párrafos: un texto largo en mayúsculas es ilegible, se pierde la silueta
de las palabras. cada bloque lleva su espaciado entre letras, porque una
versal apretada se lee mal.
========================================================================= */
/* etiquetas de sección: 01 · EDUCACIÓN */
.cols h2, .col-projects h2{ text-transform:uppercase; letter-spacing:.16em }
/* el rótulo que parte "ahora" del historial */
.tl-sep span{ text-transform:uppercase; letter-spacing:.16em }
/* encabezados de grupo: el mes en pelis, el estado en series y manga */
.tl-label{ text-transform:uppercase; letter-spacing:.12em }
/* sub-secciones: diario · por ver · archivo */
.sub-tab{ text-transform:uppercase; letter-spacing:.12em }
/* etiquetas de los campos del formulario y de las filas de stack */
.pa-field, .stk-row dt{ text-transform:uppercase; letter-spacing:.12em }
/* nombres de sección del hub: Blog · Pelis · Series · Manga · Juegos.
Llevan su inicial porque son nombres, y porque sin ella la jerarquía
quedaba al revés: los rótulos CHICOS gritaban en versales (DIARIO,
JULIO 2026, VIENDO AHORA) mientras el nombre de la sección, que es lo
más grande de la pantalla, iba en minúscula.
El texto va con mayúscula en el html y en TITULOS de js/hub.js; esto sólo
desactiva el text-transform:lowercase que .pelis (styles.css) le impone al
título. Sin esta línea el html dice "Blog" y la pantalla muestra "blog".
Las pestañas son