/* ============================================================================= DLV+Design — contenido dentro de .container-default ============================================================================= El shell vive en css/shell.css. Acá sólo va lo que en el template sería una pantalla de dominio: bloques separados por el gap de 1.5rem del contenedor canónico, con las proporciones de Material que publica public/sass (tarjeta y campo 0.5rem, botón 2.5rem de alto, chip 2rem). font-size en em · layout en rem · line-height sin unidad · un decimal. Responsive sin media queries de ancho: data-bp de es el espejo de BreakpointService (js/breakpoints.js). ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { font-size: 1em; -webkit-text-size-adjust: 100%; width: 100%; height: 100%; /* clip, no hidden: hidden sigue permitiendo desplazamiento programático y deja scrollWidth inflado. Acá nada debe desbordar el documento. */ overflow: clip; } body { margin: 0; padding: 0; height: 100%; /* El shell es .admin__container con position:absolute e inset:0, y el scroll vive en .admin__body. El documento no se desplaza: sin esto quedaban 4 px de desborde horizontal a 360 px. El contenido SÍ se desplaza, dentro del cuerpo del shell. */ overflow: clip; background: var(--theme-bg); color: var(--theme-text); font-family: var(--secondary-font); font-size: 1em; font-weight: var(--font-regular); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font-family: var(--secondary-font); color: inherit; cursor: pointer; } p { margin: 0; text-wrap: pretty; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--primary-font); font-weight: var(--font-semibold); line-height: 1.25; text-wrap: balance; } strong, b { font-weight: var(--font-semibold); } :focus-visible { outline: 0.2rem solid var(--accent-ink); outline-offset: 0.2rem; border-radius: 0.2rem; } .salto-contenido { position: absolute; left: 0.8rem; top: -10rem; z-index: 60; padding: 0.8rem 1.6rem; background: var(--accent-ink); color: var(--accent-on); border-radius: var(--card-radius); font-family: var(--primary-font); font-weight: var(--font-semibold); transition: top var(--dur-rapida) var(--ease-decelera); } .salto-contenido:focus { top: 0.8rem; } .solo-lectores { position: absolute; width: 0.1rem; height: 0.1rem; padding: 0; margin: -0.1rem; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ============================================================================= Tarjeta — radio 0.5rem de public/sass/material/_cards.scss ============================================================================= */ .card { display: grid; gap: 1.2rem; padding: 1.5rem; background: var(--theme-bg-elevated); border: 0.1rem solid var(--theme-border); border-radius: var(--card-radius); } [data-handset='true'] .card { padding: 1.2rem; } .card__encabezado { display: grid; gap: 0.4rem; } .card__titulo { font-size: 1.3em; letter-spacing: -0.01em; } .card__sub { font-size: 0.9em; color: var(--theme-text-secondary); } .epigrafe { font-family: var(--monospace-font); font-size: 0.8em; font-weight: var(--font-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2-ink); } .meta { font-family: var(--monospace-font); font-size: 0.8em; color: var(--theme-text-secondary); font-variant-numeric: tabular-nums; } /* ============================================================================= Presentación — retrato real dentro del contenedor ============================================================================= */ .presentacion { align-items: center; } [data-bp='large'] .presentacion, [data-bp='xlarge'] .presentacion { grid-template-columns: minmax(0, 1fr) minmax(min(100%, 22rem), 0.62fr); gap: 2.4rem; } [data-bp='medium'] .presentacion { grid-template-columns: minmax(0, 1fr) minmax(min(100%, 18rem), 0.6fr); gap: 1.8rem; } .presentacion__texto { display: grid; gap: 0.8rem; align-content: center; } .presentacion__titulo { font-size: clamp(1.8em, 3.4vw, 2.6em); line-height: 1.15; letter-spacing: -0.02em; max-width: 20ch; } .presentacion__titulo em { font-style: normal; color: var(--accent-2-ink); } .presentacion__bajada { font-size: 1em; font-weight: var(--font-light); color: var(--theme-text-secondary); max-width: 56ch; } .presentacion__acciones { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.4rem; } .presentacion__retrato { margin: 0; border-radius: var(--card-radius); overflow: hidden; border: 0.1rem solid var(--theme-border); } .presentacion__retrato img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 28%; } [data-handset='true'] .presentacion__retrato img { aspect-ratio: 3 / 2; object-position: 50% 32%; } [data-handset='true'] .presentacion__retrato { order: -1; } .datos-rapidos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1rem; padding-top: 1.2rem; border-top: 0.1rem solid var(--theme-border); } .datos-rapidos li { display: grid; gap: 0.2rem; align-content: start; } .dato__clave { font-family: var(--monospace-font); font-size: 0.8em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--theme-text-secondary); } .dato__valor { font-size: 1em; } /* ============================================================================= Botones — alto 2.5rem de public/sass/material/_buttons.scss ============================================================================= */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; height: var(--button-height); padding-inline: 1.2rem; border: 0.1rem solid transparent; border-radius: var(--field-radius); font-family: var(--secondary-font); font-size: var(--control-font-size); font-weight: var(--font-semibold); letter-spacing: 0.01em; transition: background var(--dur-rapida) var(--ease-suave), border-color var(--dur-rapida) var(--ease-suave), color var(--dur-rapida) var(--ease-suave), transform var(--dur-rapida) var(--ease-suave); } .btn::before { content: ''; position: absolute; inset: 50% 0 auto 0; height: var(--touch-target); transform: translateY(-50%); } .btn:active { transform: scale(0.985); transition-duration: var(--dur-instantanea); } .btn[disabled], .btn[aria-disabled='true'] { cursor: not-allowed; opacity: 0.55; } .btn[aria-busy='true'] { color: transparent; pointer-events: none; } .btn[aria-busy='true']::after { content: ''; position: absolute; width: 1.4rem; height: 1.4rem; border: 0.2rem solid currentColor; border-top-color: transparent; border-radius: 50%; color: var(--accent-on); animation: girar 0.85s linear infinite; } .btn--fantasma[aria-busy='true']::after { color: var(--accent-ink); } @keyframes girar { to { transform: rotate(360deg); } } .btn--primario { background: var(--accent-ink); color: var(--accent-on); border-color: var(--accent-ink); } .btn--primario:hover { background: var(--accent-hover); } .btn--primario:focus-visible { background: var(--accent-focus); } .btn--primario:active { background: var(--accent-active); } .btn--fantasma { background: transparent; color: var(--theme-text); border-color: var(--theme-border-control); } .btn--fantasma:hover { border-color: var(--accent-ink); color: var(--accent-ink); } .btn--fantasma:focus-visible { border-color: var(--accent-ink); background: var(--accent-soft); } .btn--fantasma:active { background: var(--theme-divider); } .btn--ancho { width: 100%; } .enlace-flecha { display: inline-flex; align-items: center; gap: 0.4rem; height: var(--button-height); font-family: var(--secondary-font); font-size: var(--control-font-size); font-weight: var(--font-semibold); color: var(--accent-ink); } /* Variante botón: evita el fondo y borde nativos del navegador. */ button.enlace-flecha { appearance: none; border: 0; border-radius: var(--card-radius); background: transparent; padding: 0 0.6rem; min-height: var(--touch-target); height: auto; width: fit-content; text-align: left; cursor: pointer; } button.enlace-flecha:hover { background: var(--accent-soft); } button.enlace-flecha:active { background: var(--theme-divider); } button.enlace-flecha:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; } button[data-mas-resena]:hover .material-symbols-outlined { transform: none; } /* el tamaño lo da la clase icon-small del template, no se redeclara acá */ .enlace-flecha .material-symbols-outlined { transition: transform var(--dur-rapida) var(--ease-suave); } .enlace-flecha:hover .material-symbols-outlined { transform: translateX(0.3rem); } .enlace-flecha--atras:hover .material-symbols-outlined { transform: translateX(-0.3rem); } /* ============================================================================= Chip — radio 2rem de _buttons.scss ============================================================================= */ .chip { display: inline-flex; align-items: center; gap: 0.4rem; height: 2rem; padding-inline: 0.8rem; border: 0.1rem solid var(--theme-border-control); border-radius: var(--chip-radius); font-family: var(--monospace-font); font-size: 0.8em; color: var(--theme-text-secondary); white-space: nowrap; } .chip--acento { border-color: var(--accent-ink); color: var(--accent-ink); } /* ============================================================================= Trabajos ============================================================================= */ .trabajos { display: grid; grid-template-columns: var(--grid-container-width); gap: 1.2rem; } .trabajo { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 0.8rem; border-radius: var(--card-radius); } .trabajo__lienzo { position: relative; overflow: hidden; border-radius: var(--card-radius); border: 0.1rem solid var(--theme-border); background: var(--theme-bg-surface); aspect-ratio: 808 / 632; transition: border-color var(--dur-lenta) var(--ease-suave); } .trabajo__lienzo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; transition: opacity var(--dur-lenta) var(--ease-decelera), transform var(--dur-lenta) var(--ease-suave); } .trabajo__lienzo[data-estado='listo'] img { opacity: 1; } .trabajo:hover .trabajo__lienzo img, .trabajo:focus-within .trabajo__lienzo img { transform: scale(1.022); } .trabajo:hover .trabajo__lienzo, .trabajo:focus-within .trabajo__lienzo { border-color: var(--theme-border-control); } /* Barrido de carga por TRANSFORM: es la única propiedad que el compositor mueve sin repintar. La variante que desplazaba el origen del degradado de fondo daba 481 pintados en 4 s contra 0 (verificacion/medir-carga.mjs). */ .trabajo__lienzo[data-estado='cargando']::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 24%, var(--theme-bg-elevated) 50%, transparent 76%); transform: translateX(-100%); animation: barrido 1.7s var(--ease-suave) infinite; animation-delay: calc(var(--i, 0) * 0.09s); } @keyframes barrido { to { transform: translateX(100%); } } .trabajo__lienzo[data-estado='error'] img { display: none; } .trabajo__fallo { position: absolute; inset: 0; display: grid; place-content: center; justify-items: start; gap: 0.8rem; padding: 1.2rem; } .trabajo__lienzo:not([data-estado='error']) .trabajo__fallo { display: none; } .trabajo__cuerpo { display: grid; gap: 0.4rem; align-content: start; } .trabajo__nombre { font-size: 1em; } .trabajo__enlace::after { content: ''; position: absolute; inset: 0; border-radius: var(--card-radius); } .trabajo__enlace:focus-visible { outline: none; } .trabajo__enlace:focus-visible::after { outline: 0.2rem solid var(--accent-ink); outline-offset: 0.3rem; } .trabajo--destacado { grid-column: 1 / -1; } [data-bp='large'] .trabajo--destacado, [data-bp='xlarge'] .trabajo--destacado { grid-template-rows: auto; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; } [data-bp='large'] .trabajo--destacado .trabajo__nombre, [data-bp='xlarge'] .trabajo--destacado .trabajo__nombre { font-size: 1.5em; } /* ============================================================================= Listas de dos columnas (servicios, capacidades, trayectoria) ============================================================================= */ .bloques { display: grid; grid-template-columns: var(--grid-container-width); gap: 1.2rem; } .bloque { display: grid; gap: 0.6rem; align-content: start; padding: 1.2rem; background: var(--theme-bg-surface); border: 0.1rem solid var(--theme-border); border-radius: var(--card-radius); } .bloque__numero { font-family: var(--monospace-font); font-size: 0.8em; color: var(--accent-ink); } .bloque__titulo { font-size: 1em; } .bloque__texto { font-size: 0.9em; color: var(--theme-text-secondary); } .grupo { display: grid; gap: 0.6rem; align-content: start; } .grupo__titulo { font-family: var(--monospace-font); font-size: 0.8em; font-weight: var(--font-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); padding-bottom: 0.4rem; border-bottom: 0.1rem solid var(--theme-border); } .grupo__items { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; } .grupo__items li { font-size: 0.9em; color: var(--theme-text-secondary); } .grupo__items li:not(:last-child)::after { content: ' ·'; color: var(--theme-text-disabled); } /* --- trayectoria: filas de tabla, no tarjetas ----------------------------- */ .trayectoria { display: grid; } .hito { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem 1.2rem; padding-block: 0.8rem; border-bottom: 0.1rem solid var(--theme-border); } .hito:last-child { border-bottom: 0; } .hito__anio { font-family: var(--monospace-font); font-size: 0.8em; font-variant-numeric: tabular-nums; color: var(--accent-2-ink); } .hito__empresa { font-size: 1em; } .hito__detalle { font-size: 0.9em; color: var(--theme-text-secondary); } /* ============================================================================= Campos — radio 0.5rem, 0.875rem, line-height 1.5 de _forms.scss ============================================================================= */ .campos { display: grid; grid-template-columns: var(--forma-input-width, minmax(0, 1fr)); gap: 1rem; } .campo { display: grid; gap: 0.4rem; } .campo__etiqueta { font-size: var(--control-font-size); font-weight: var(--font-semibold); } .campo__control { width: 100%; min-height: var(--touch-target); padding: 0.6rem 0.8rem; background: var(--theme-bg-surface); border: 0.1rem solid var(--theme-border-control); border-radius: var(--field-radius); color: var(--theme-text); font-family: var(--secondary-font); font-size: var(--field-font-size); line-height: 1.5; transition: border-color var(--dur-rapida) var(--ease-suave); } .campo__control::placeholder { color: var(--theme-text-disabled); } .campo__control:hover { border-color: var(--theme-text-secondary); } .campo__control:focus-visible { border-color: var(--accent-ink); outline: 0.2rem solid var(--accent-soft); outline-offset: 0; } .campo__control[aria-invalid='true'] { border-color: var(--estado-error-ink); } textarea.campo__control { min-height: 7rem; resize: vertical; } .campo__error { font-size: 0.8em; color: var(--estado-error-ink); font-family: var(--monospace-font); } .pestanas { display: flex; gap: 0; border-bottom: 0.1rem solid var(--theme-border); } .pestana { flex: 0 1 auto; height: var(--touch-target); padding-inline: 1.2rem; background: transparent; border: 0; border-bottom: 0.2rem solid transparent; font-family: var(--secondary-font); font-size: var(--control-font-size); font-weight: var(--font-semibold); color: var(--theme-text-secondary); transition: color var(--dur-rapida) var(--ease-suave), border-color var(--dur-rapida) var(--ease-suave); } .pestana:hover { color: var(--theme-text); } .pestana[aria-selected='true'] { color: var(--accent-ink); border-bottom-color: var(--accent-ink); } .canales { display: grid; gap: 0.6rem; } .canal { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; min-height: var(--touch-target); padding: 0.6rem 0.8rem; border: 0.1rem solid var(--theme-border); border-radius: var(--field-radius); transition: border-color var(--dur-rapida) var(--ease-suave), background var(--dur-rapida) var(--ease-suave); } .canal:hover { border-color: var(--accent-ink); background: var(--accent-soft); } .canal__valor { font-family: var(--monospace-font); font-size: var(--control-font-size); word-break: break-all; } .aviso { display: grid; gap: 0.4rem; margin: 0; padding: 1rem; border: 0.1rem solid var(--theme-border); border-radius: 0.8rem; background: var(--theme-bg-surface); font-size: 0.9em; line-height: 1.5; } /* ============================================================================= Detalle de trabajo ============================================================================= */ .detalle { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; } [data-bp='large'] .detalle, [data-bp='xlarge'] .detalle { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); } .detalle__lienzo { border-radius: var(--card-radius); border: 0.1rem solid var(--theme-border); overflow: hidden; background: var(--theme-bg-surface); } .detalle__lienzo img { width: 100%; } .ficha { display: grid; gap: 0; } .ficha-fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem; padding-block: 0.8rem; border-bottom: 0.1rem solid var(--theme-border); } .ficha-fila__clave { font-family: var(--monospace-font); font-size: 0.8em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--theme-text-secondary); } .ficha-fila__valor { font-size: 0.9em; } [data-resena][data-recortado='true'] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; } .relacionados { display: grid; grid-template-columns: var(--gallery-pic-width); gap: 1rem; } .paginacion { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding-top: 1.2rem; border-top: 0.1rem solid var(--theme-border); } .estado-bloque { display: grid; justify-items: start; gap: 0.8rem; padding: 1.5rem; border: 0.1rem dashed var(--theme-border-control); border-radius: var(--card-radius); } .buscador { display: grid; gap: 0.4rem; max-width: 26rem; } /* ============================================================================= Entrada — un solo gesto, en la primera pantalla ============================================================================= */ @keyframes entrar { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: none; } } .con-movimiento [data-entrada] { animation: entrar var(--dur-entrada) var(--ease-decelera) both; } .con-movimiento [data-entrada='1'] { animation-delay: 0s; } .con-movimiento [data-entrada='2'] { animation-delay: 0.08s; } .con-movimiento [data-entrada='3'] { animation-delay: 0.16s; } /* ============================================================================= Movimiento reducido ============================================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-entrada] { animation: none !important; opacity: 1 !important; transform: none !important; } .btn:active, .mat-icon-button:active { transform: none; } .trabajo:hover .trabajo__lienzo img, .trabajo:focus-within .trabajo__lienzo img { transform: none; } .enlace-flecha:hover .material-symbols-outlined { transform: none; } .trabajo__lienzo[data-estado='cargando']::before { animation: none !important; transform: none; background: var(--theme-bg-elevated); opacity: 0.5; } .btn[aria-busy='true']::after { animation: girar 1.7s linear infinite !important; } } /* Experiencia presentada por aportes, sin columna cronológica. */ .perfil__disponibilidad { color: var(--accent-ink); font-weight: var(--font-semibold); max-width: 48rem; } .hito > div { min-width: 0; display: grid; gap: 0.6rem; } ul.hito__detalle { display: grid; gap: 0.7rem; padding-inline-start: 1.2rem; } /* Experiencias: resumen visible y detalle accesible sin JavaScript. */ details.experiencia { display: block; } .experiencia__resumen { display: flex; align-items: flex-start; gap: 1rem; list-style: none; cursor: pointer; min-height: var(--touch-target); padding: 0.5rem; border-radius: var(--card-radius); } .experiencia__resumen::-webkit-details-marker { display: none; } .experiencia__texto { display: grid; gap: 0.5rem; flex: 1; min-width: 0; } .experiencia__texto .hito__empresa { font-family: var(--primary-font); font-weight: var(--font-semibold); } .experiencia__signo { display: grid; place-items: center; flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 1.5rem; line-height: 1; } .experiencia__menos { display: none; } .experiencia[open] .experiencia__mas { display: none; } .experiencia[open] .experiencia__menos { display: inline; } .experiencia__resumen:hover { background: var(--accent-soft); } .experiencia__resumen:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; } .experiencia__contenido { padding: 1rem 0.5rem 0.5rem; }