/* * TatuARTE — Legal site styles * docs.danuagency.site * * Diseño minimalista, legible, accesible (WCAG 2.2 AA). * Soporta modo claro y oscuro vía prefers-color-scheme + override manual * (atributo data-theme en ). * Print-friendly: los usuarios deben poder imprimir cualquier documento * sin perder estructura ni contraste. */ /* ───────────────────────────────────────────────────────────────────────── * Tokens de diseño (CSS custom properties) * ───────────────────────────────────────────────────────────────────────── */ :root { /* Tipografía */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Espaciado base (escala 4px) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* Tamaños tipográficos */ --fs-xs: 0.8125rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; /* Layout */ --max-content: 720px; --max-page: 1200px; --radius: 6px; --radius-lg: 10px; /* Modo claro (default) */ --color-bg: #ffffff; --color-bg-subtle: #f7f7f8; --color-bg-elevated: #ffffff; --color-border: #e5e5e7; --color-border-strong: #c8c8cc; --color-text: #1a1a1c; --color-text-muted: #5a5a62; --color-text-subtle: #767680; --color-link: #1f4ed8; --color-link-hover: #163aa8; --color-accent: #1a1a1c; --color-accent-bg: #1a1a1c; --color-accent-text: #ffffff; --color-callout-bg: #fff7e6; --color-callout-border: #f0c14b; --color-callout-text: #5b3d00; --color-code-bg: #f1f1f3; /* Sombras */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); } /* Modo oscuro vía preferencia del sistema */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #0e0e10; --color-bg-subtle: #16161a; --color-bg-elevated: #1c1c20; --color-border: #2a2a30; --color-border-strong: #3a3a42; --color-text: #ececef; --color-text-muted: #a8a8b3; --color-text-subtle: #80808d; --color-link: #7da3ff; --color-link-hover: #a6c0ff; --color-accent: #ececef; --color-accent-bg: #ececef; --color-accent-text: #0e0e10; --color-callout-bg: #2a2410; --color-callout-border: #b8842a; --color-callout-text: #f2d896; --color-code-bg: #1f1f24; } } /* Override manual: toggle desde el botón */ :root[data-theme="dark"] { --color-bg: #0e0e10; --color-bg-subtle: #16161a; --color-bg-elevated: #1c1c20; --color-border: #2a2a30; --color-border-strong: #3a3a42; --color-text: #ececef; --color-text-muted: #a8a8b3; --color-text-subtle: #80808d; --color-link: #7da3ff; --color-link-hover: #a6c0ff; --color-accent: #ececef; --color-accent-bg: #ececef; --color-accent-text: #0e0e10; --color-callout-bg: #2a2410; --color-callout-border: #b8842a; --color-callout-text: #f2d896; --color-code-bg: #1f1f24; } :root[data-theme="light"] { --color-bg: #ffffff; --color-bg-subtle: #f7f7f8; --color-bg-elevated: #ffffff; --color-border: #e5e5e7; --color-border-strong: #c8c8cc; --color-text: #1a1a1c; --color-text-muted: #5a5a62; --color-text-subtle: #767680; --color-link: #1f4ed8; --color-link-hover: #163aa8; --color-accent: #1a1a1c; --color-accent-bg: #1a1a1c; --color-accent-text: #ffffff; --color-callout-bg: #fff7e6; --color-callout-border: #f0c14b; --color-callout-text: #5b3d00; --color-code-bg: #f1f1f3; } /* ───────────────────────────────────────────────────────────────────────── * Reset / base * ───────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; /* deja sitio bajo la header fija */ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.65; color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Foco accesible */ :focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; border-radius: 2px; } /* Salto al contenido (accesibilidad) */ .skip-link { position: absolute; top: -100px; left: 0; background: var(--color-accent-bg); color: var(--color-accent-text); padding: var(--space-3) var(--space-4); text-decoration: none; z-index: 1000; font-weight: 600; } .skip-link:focus { top: 0; } /* ───────────────────────────────────────────────────────────────────────── * Tipografía * ───────────────────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-4) 0; line-height: 1.25; color: var(--color-text); font-weight: 700; letter-spacing: -0.01em; } h1 { font-size: var(--fs-3xl); margin-top: var(--space-5); margin-bottom: var(--space-5); letter-spacing: -0.02em; } h2 { font-size: var(--fs-2xl); margin-top: var(--space-7); padding-top: var(--space-2); scroll-margin-top: 6rem; } h3 { font-size: var(--fs-xl); margin-top: var(--space-6); scroll-margin-top: 6rem; } h4 { font-size: var(--fs-lg); margin-top: var(--space-5); } p { margin: 0 0 var(--space-4) 0; } ul, ol { margin: 0 0 var(--space-4) 0; padding-left: var(--space-6); } li { margin-bottom: var(--space-2); } li > ul, li > ol { margin-top: var(--space-2); margin-bottom: 0; } strong { font-weight: 700; color: var(--color-text); } em { font-style: italic; } small { font-size: var(--fs-sm); color: var(--color-text-muted); } code { font-family: var(--font-mono); font-size: 0.92em; background-color: var(--color-code-bg); padding: 0.15em 0.4em; border-radius: 4px; border: 1px solid var(--color-border); } hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; } blockquote { margin: var(--space-5) 0; padding: var(--space-4) var(--space-5); border-left: 4px solid var(--color-border-strong); background-color: var(--color-bg-subtle); color: var(--color-text-muted); border-radius: 0 var(--radius) var(--radius) 0; } blockquote p:last-child { margin-bottom: 0; } /* ───────────────────────────────────────────────────────────────────────── * Enlaces * ───────────────────────────────────────────────────────────────────────── */ a { color: var(--color-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color 0.15s ease; } a:hover { color: var(--color-link-hover); text-decoration-thickness: 2px; } a:visited { color: var(--color-link); } /* ───────────────────────────────────────────────────────────────────────── * Tablas * ───────────────────────────────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; margin: var(--space-5) 0; font-size: var(--fs-sm); background-color: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; } thead { background-color: var(--color-bg-subtle); } th, td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; } th { font-weight: 600; color: var(--color-text); } tbody tr:last-child td { border-bottom: none; } tbody tr:nth-child(even) { background-color: var(--color-bg-subtle); } /* Tablas responsivas: scroll horizontal en móvil */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--space-5) 0; } .table-wrap table { margin: 0; min-width: 480px; } /* ───────────────────────────────────────────────────────────────────────── * Layout — header * ───────────────────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background-color: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border); backdrop-filter: saturate(180%) blur(8px); -webkit-backdrop-filter: saturate(180%) blur(8px); } .site-header__inner { max-width: var(--max-page); margin: 0 auto; padding: var(--space-3) var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .site-brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); text-decoration: none; font-weight: 700; font-size: var(--fs-lg); letter-spacing: -0.01em; } .site-brand:hover { color: var(--color-text); } .site-brand__mark { display: inline-block; width: 28px; height: 28px; border-radius: 8px; background-color: var(--color-accent-bg); color: var(--color-accent-text); font-size: 0.85rem; font-weight: 700; text-align: center; line-height: 28px; letter-spacing: -0.02em; } .site-nav { display: flex; align-items: center; gap: var(--space-3); } .site-nav__link { color: var(--color-text-muted); text-decoration: none; font-size: var(--fs-sm); padding: var(--space-2) var(--space-3); border-radius: var(--radius); } .site-nav__link:hover { color: var(--color-text); background-color: var(--color-bg-subtle); } .theme-toggle { background: transparent; border: 1px solid var(--color-border); color: var(--color-text-muted); padding: var(--space-2) var(--space-3); border-radius: var(--radius); cursor: pointer; font-size: var(--fs-sm); font-family: inherit; line-height: 1; } .theme-toggle:hover { border-color: var(--color-border-strong); color: var(--color-text); } /* ───────────────────────────────────────────────────────────────────────── * Layout — breadcrumbs * ───────────────────────────────────────────────────────────────────────── */ .breadcrumbs { max-width: var(--max-page); margin: 0 auto; padding: var(--space-3) var(--space-4) 0; font-size: var(--fs-sm); color: var(--color-text-muted); } .breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); } .breadcrumbs li { margin: 0; display: inline-flex; align-items: center; gap: var(--space-2); } .breadcrumbs li + li::before { content: "/"; color: var(--color-text-subtle); } .breadcrumbs a { color: var(--color-text-muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--color-link); text-decoration: underline; } .breadcrumbs [aria-current="page"] { color: var(--color-text); font-weight: 500; } /* ───────────────────────────────────────────────────────────────────────── * Layout — main grid (TOC sidebar + content) * ───────────────────────────────────────────────────────────────────────── */ .layout { max-width: var(--max-page); margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-8); display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 960px) { .layout--with-toc { grid-template-columns: minmax(0, 1fr) 240px; } .layout--with-toc .toc { order: 2; } .layout--with-toc .doc { order: 1; } } .doc { max-width: var(--max-content); min-width: 0; } /* ───────────────────────────────────────────────────────────────────────── * Table of Contents (TOC) * ───────────────────────────────────────────────────────────────────────── */ .toc { font-size: var(--fs-sm); } @media (min-width: 960px) { .toc { position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; padding: var(--space-4); background-color: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } } .toc__title { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-subtle); margin: 0 0 var(--space-3) 0; } .toc ol, .toc ul { list-style: none; padding: 0; margin: 0; } .toc li { margin: 0; } .toc__list--nested { padding-left: var(--space-4); margin-top: var(--space-1); margin-bottom: var(--space-2); } .toc a { display: block; padding: var(--space-1) 0; color: var(--color-text-muted); text-decoration: none; border-left: 2px solid transparent; padding-left: var(--space-3); margin-left: calc(-1 * var(--space-3)); line-height: 1.4; transition: color 0.15s ease, border-color 0.15s ease; } .toc a:hover { color: var(--color-link); border-left-color: var(--color-link); } .toc a.is-active { color: var(--color-text); border-left-color: var(--color-accent); font-weight: 500; } /* TOC móvil: collapsible */ @media (max-width: 959px) { .toc { background-color: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); } .toc summary { cursor: pointer; font-weight: 600; color: var(--color-text); list-style: none; } .toc summary::-webkit-details-marker { display: none; } .toc summary::after { content: "▾"; float: right; color: var(--color-text-muted); transition: transform 0.2s; } .toc[open] summary::after { transform: rotate(180deg); } .toc__title { display: none; } } /* ───────────────────────────────────────────────────────────────────────── * Documento — bloque principal * ───────────────────────────────────────────────────────────────────────── */ .doc__lead { font-size: var(--fs-lg); color: var(--color-text-muted); margin-bottom: var(--space-5); line-height: 1.55; } .doc__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-subtle); margin: 0 0 var(--space-5) 0; padding: var(--space-3) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .doc__meta dt { font-weight: 600; color: var(--color-text-muted); margin-right: var(--space-1); display: inline; } .doc__meta dt::after { content: ":"; } .doc__meta dd { margin: 0; display: inline; } .doc__meta > div { display: inline-flex; gap: var(--space-1); } /* Anchor permalink en cada heading */ .doc h2, .doc h3 { position: relative; } .heading-anchor { position: absolute; left: -1.25rem; top: 50%; transform: translateY(-50%); opacity: 0; text-decoration: none; color: var(--color-text-subtle); font-weight: 400; font-size: 0.85em; padding: 0 0.25em; transition: opacity 0.15s; } .doc h2:hover .heading-anchor, .doc h3:hover .heading-anchor, .heading-anchor:focus { opacity: 1; } @media (max-width: 720px) { .heading-anchor { display: none; } } /* ───────────────────────────────────────────────────────────────────────── * Componentes — callout / alert * ───────────────────────────────────────────────────────────────────────── */ .callout { background-color: var(--color-callout-bg); border: 1px solid var(--color-callout-border); border-left: 4px solid var(--color-callout-border); color: var(--color-callout-text); padding: var(--space-4) var(--space-5); border-radius: var(--radius); margin: var(--space-5) 0; } .callout__title { font-weight: 700; margin: 0 0 var(--space-2) 0; font-size: var(--fs-base); color: var(--color-callout-text); } .callout p:last-child { margin-bottom: 0; } .callout--info { --color-callout-bg: rgba(31, 78, 216, 0.08); --color-callout-border: #1f4ed8; --color-callout-text: var(--color-text); } .callout--warning { /* default amber styles */ } /* ───────────────────────────────────────────────────────────────────────── * Componentes — landing (index.html) * ───────────────────────────────────────────────────────────────────────── */ .hero { max-width: var(--max-page); margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-6); text-align: left; } .hero h1 { font-size: var(--fs-3xl); margin-bottom: var(--space-3); } .hero p { font-size: var(--fs-lg); color: var(--color-text-muted); max-width: 640px; margin: 0; } .doc-grid { max-width: var(--max-page); margin: 0 auto; padding: var(--space-4) var(--space-4) var(--space-8); display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); } .doc-card { display: block; background-color: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); text-decoration: none; color: inherit; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .doc-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); color: inherit; } .doc-card:visited { color: inherit; } .doc-card__kicker { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--color-text-subtle); margin-bottom: var(--space-2); } .doc-card__title { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 var(--space-2) 0; color: var(--color-text); letter-spacing: -0.01em; } .doc-card__desc { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.55; } /* ───────────────────────────────────────────────────────────────────────── * Footer * ───────────────────────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--color-border); background-color: var(--color-bg-subtle); margin-top: var(--space-8); } .site-footer__inner { max-width: var(--max-page); margin: 0 auto; padding: var(--space-6) var(--space-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-5); font-size: var(--fs-sm); } .site-footer__col h2 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-subtle); font-weight: 700; margin: 0 0 var(--space-3) 0; } .site-footer__col ul { list-style: none; padding: 0; margin: 0; } .site-footer__col li { margin-bottom: var(--space-2); } .site-footer__col a { color: var(--color-text-muted); text-decoration: none; } .site-footer__col a:hover { color: var(--color-link); text-decoration: underline; } .site-footer__bottom { max-width: var(--max-page); margin: 0 auto; padding: var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--fs-xs); color: var(--color-text-subtle); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); } /* ───────────────────────────────────────────────────────────────────────── * Formularios (contact form placeholder) * ───────────────────────────────────────────────────────────────────────── */ .form { display: grid; gap: var(--space-4); max-width: 520px; margin: var(--space-5) 0; } .form__row { display: grid; gap: var(--space-2); } .form label { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); } .form input, .form textarea, .form select { font-family: inherit; font-size: var(--fs-base); padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius); background-color: var(--color-bg-elevated); color: var(--color-text); width: 100%; line-height: 1.4; } .form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid var(--color-link); outline-offset: 1px; border-color: var(--color-link); } .form textarea { min-height: 140px; resize: vertical; } .btn { display: inline-block; background-color: var(--color-accent-bg); color: var(--color-accent-text); border: 1px solid var(--color-accent-bg); padding: var(--space-3) var(--space-5); border-radius: var(--radius); font-size: var(--fs-base); font-weight: 600; text-decoration: none; cursor: pointer; font-family: inherit; line-height: 1.4; transition: opacity 0.15s ease; } .btn:hover { opacity: 0.88; color: var(--color-accent-text); } .btn--secondary { background-color: transparent; color: var(--color-text); border-color: var(--color-border-strong); } .btn--secondary:hover { background-color: var(--color-bg-subtle); color: var(--color-text); } /* ───────────────────────────────────────────────────────────────────────── * FAQ (support page) * ───────────────────────────────────────────────────────────────────────── */ .faq { margin: var(--space-5) 0; } .faq details { border-bottom: 1px solid var(--color-border); padding: var(--space-3) 0; } .faq details[open] { padding-bottom: var(--space-4); } .faq summary { cursor: pointer; font-weight: 600; color: var(--color-text); list-style: none; padding: var(--space-2) 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 1.5em; color: var(--color-text-muted); font-weight: 400; line-height: 1; transition: transform 0.2s; flex-shrink: 0; } .faq details[open] summary::after { content: "−"; } .faq__body { padding-top: var(--space-3); color: var(--color-text-muted); } .faq__body p:last-child { margin-bottom: 0; } /* ───────────────────────────────────────────────────────────────────────── * Utilities * ───────────────────────────────────────────────────────────────────────── */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .text-muted { color: var(--color-text-muted); } .text-small { font-size: var(--fs-sm); } /* ───────────────────────────────────────────────────────────────────────── * Print * ───────────────────────────────────────────────────────────────────────── */ @media print { :root { --color-bg: #ffffff; --color-bg-subtle: #ffffff; --color-bg-elevated: #ffffff; --color-border: #cccccc; --color-text: #000000; --color-text-muted: #333333; --color-link: #000000; } body { font-size: 11pt; line-height: 1.5; } .site-header, .site-footer, .breadcrumbs, .toc, .theme-toggle, .skip-link, .heading-anchor { display: none !important; } .layout { display: block; max-width: none; padding: 0; } .doc { max-width: none; } h1, h2, h3 { page-break-after: avoid; } p, li { page-break-inside: avoid; } a { text-decoration: underline; color: #000; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; } a[href^="#"]::after, a[href^="mailto:"]::after { content: ""; } table { page-break-inside: avoid; } }