contenedor de la guía. */ .guide-page * { box-sizing: border-box; } .guide-page *:focus-visible { outline: 3px solid #DC2626; outline-offset: 3px; border-radius: 4px; } .guide-page { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.65; color: #1a1a1a; background: #fafafa; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } /* ---------- Layout ---------- */ .guide-shell { display: grid; grid-template-columns: minmax(0, 1fr); } @media (min-width: 1024px) { .guide-shell { grid-template-columns: 280px minmax(0, 1fr); } } /* ---------- Header ---------- */ .guide-header { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid #e5e5e5; padding: 12px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04); min-height: 56px; } .guide-header a.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: #1a1a1a; font-weight: 700; font-size: 14px; letter-spacing: .03em; flex-shrink: 0; } .guide-header a.brand img { height: 28px; width: auto; } .guide-header a.brand .brand-text { display: none; } @media (min-width: 640px) { .guide-header a.brand .brand-text { display: inline; } } .guide-header .crumb { color: #666; font-size: 13px; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .guide-header .crumb a { color: #666; text-decoration: none; } .guide-header .crumb a:hover { color: #DC2626; } .guide-header .right { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; } .guide-header .right a { color: #666; text-decoration: none; font-size: 13px; padding: 7px 10px; border-radius: 6px; } .guide-header .right a:hover { background: #f0f0f0; color: #1a1a1a; } @media (max-width: 639px) { .guide-header .right .hide-sm { display: none; } } /* ---------- Sidebar TOC ---------- */ .guide-toc { position: sticky; top: 64px; align-self: start; height: calc(100vh - 64px); overflow-y: auto; padding: 28px 20px 60px; background: #fff; border-right: 1px solid #e5e5e5; display: none; } @media (min-width: 1024px) { .guide-toc { display: block; } } .guide-toc h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: #888; font-weight: 700; margin: 24px 0 10px; } .guide-toc h4:first-child { margin-top: 0; } .guide-toc a { display: block; padding: 8px 12px; margin: 1px 0; text-decoration: none; color: #444; font-size: 13.5px; line-height: 1.4; border-radius: 6px; border-left: 3px solid transparent; transition: background .15s, color .15s, border-color .15s; } .guide-toc a:hover { background: #fff5f5; color: #DC2626; } .guide-toc a.active { background: #fff0f0; color: #DC2626; border-left-color: #DC2626; font-weight: 600; } /* ---------- Mobile TOC summary ---------- */ .toc-mobile { display: block; background: #fff; border: 1px solid #e5e5e5; border-radius: 12px; margin: 0 0 24px; padding: 0; overflow: hidden; } @media (min-width: 1024px) { .toc-mobile { display: none; } } .toc-mobile summary { padding: 16px 20px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; } .toc-mobile summary::-webkit-details-marker { display: none; } .toc-mobile summary:after { content: '▾'; color: #888; } .toc-mobile[open] summary:after { content: '▴'; } .toc-mobile ol { margin: 0; padding: 0 20px 16px 40px; } .toc-mobile li { margin: 6px 0; } .toc-mobile a { color: #444; text-decoration: none; } .toc-mobile a:hover { color: #DC2626; } /* ---------- Main ---------- */ .guide-main { padding: 32px 24px 120px; max-width: 100%; overflow-x: hidden; } @media (min-width: 768px) { .guide-main { padding: 48px 40px 120px; } } /* Texto cómodo de leer (~75ch); capturas y tablas aprovechan más ancho. */ .guide-main > * { max-width: 880px; margin-inline: auto; } .guide-main > figure, .guide-main > .table-wrap, .guide-main > .role-hero { max-width: 1180px; } @media (min-width: 1440px) { .guide-main > * { max-width: 960px; } .guide-main > figure, .guide-main > .table-wrap, .guide-main > .role-hero { max-width: 1320px; } } /* ---------- Hero ---------- */ .role-hero { background: linear-gradient(135deg, #DC2626 0%, #EF4444 100%); color: #fff; padding: 36px 28px; border-radius: 18px; margin-bottom: 36px; box-shadow: 0 8px 30px rgba(123, 20, 48, .25); } .role-hero .eyebrow { text-transform: uppercase; font-size: 12px; letter-spacing: .15em; opacity: .85; margin-bottom: 6px; } .role-hero h1 { margin: 0 0 10px; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; } .role-hero p { margin: 0; font-size: 14.5px; line-height: 1.55; opacity: .95; max-width: 60ch; } /* ---------- Headings ---------- */ .guide-main h2 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); font-weight: 800; letter-spacing: -.015em; color: #1a1a1a; margin: 56px 0 14px; padding-top: 14px; border-top: 1px solid #e5e5e5; } .guide-main h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; } .guide-main h2 .num { display: inline-block; min-width: 1.7em; font-size: .7em; font-weight: 700; color: #DC2626; letter-spacing: .05em; vertical-align: 1px; } .guide-main h3 { font-size: 1.08rem; font-weight: 700; margin: 28px 0 10px; color: #1a1a1a; } .guide-main h4 { font-size: .95rem; font-weight: 700; margin: 22px 0 8px; color: #333; } .guide-main p { margin: 0 0 14px; } .guide-main strong { color: #000; font-weight: 700; } .guide-main code, .guide-main .kbd { font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace; font-size: .92em; background: #f0f0f0; padding: 2px 7px; border-radius: 4px; color: #c00; } .guide-main .kbd { background: #fff; border: 1px solid #ccc; border-bottom-width: 2px; color: #333; padding: 1px 6px; } /* ---------- Steps ---------- */ .steps { counter-reset: step; margin: 18px 0 24px; padding: 0; list-style: none; } .steps > li { position: relative; counter-increment: step; padding: 12px 14px 12px 50px; margin: 6px 0; background: #fff; border: 1px solid #ececec; border-radius: 10px; font-size: 14.5px; line-height: 1.6; } .steps > li::before { content: counter(step); position: absolute; left: 12px; top: 11px; width: 26px; height: 26px; border-radius: 50%; background: #DC2626; color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; } /* ---------- Screenshots ---------- */ figure.shot { margin: 18px 0 28px; background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.05); } figure.shot img { display: block; width: 100%; height: auto; border-bottom: 1px solid #e5e5e5; } figure.shot figcaption { padding: 10px 16px; font-size: 14px; color: #555; background: #fafafa; font-style: italic; } figure.shot.ann { /* with annotation */ position: relative; } /* Captura de teléfono: estrecha, flota al costado del texto en desktop. */ figure.shot.shot-phone { max-width: 320px; margin-inline: auto; } figure.shot.shot-phone img { /* Las capturas móviles son portrait (~9:20). Aspect-ratio: auto deshace el 16/10 que .zoomable impone para capturas desktop. */ aspect-ratio: auto; background: transparent; } @media (min-width: 900px) { figure.shot.shot-phone { float: right; clear: right; max-width: 280px; margin: 4px 0 20px 32px; } } @media (min-width: 1280px) { figure.shot.shot-phone { max-width: 300px; margin-left: 40px; } } /* Los bloques que rompen sección limpian el float para que no se acumulen capturas a la derecha de varios encabezados consecutivos. */ .guide-main h2, .guide-main h3, .guide-main .callout, .guide-main .table-wrap, .guide-main figure.shot:not(.shot-phone) { clear: both; } /* ---------- Callouts ---------- */ .callout { margin: 16px 0; padding: 14px 18px; border-radius: 10px; border-left: 4px solid; font-size: 14px; line-height: 1.6; } .callout strong { display: block; margin-bottom: 4px; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; } .callout p { margin: 0; } .callout p + p { margin-top: 8px; } .callout.info { background: #eff6ff; border-color: #2563eb; color: #1e3a8a; } .callout.info strong { color: #1e3a8a; } .callout.warn { background: #fffbeb; border-color: #d97706; color: #78350f; } .callout.warn strong { color: #78350f; } .callout.danger { background: #fef2f2; border-color: #dc2626; color: #7f1d1d; } .callout.danger strong { color: #7f1d1d; } .callout.tip { background: #f0fdf4; border-color: #16a34a; color: #14532d; } .callout.tip strong { color: #14532d; } .callout.notif { background: #faf5ff; border-color: #9333ea; color: #581c87; } .callout.notif strong { color: #581c87; } /* ---------- Pills / badges ---------- */ .badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin-right: 4px; } .badge-A { background: #dcfce7; color: #166534; } .badge-B { background: #fef3c7; color: #92400e; } .badge-attended { background: #dcfce7; color: #166534; } .badge-partial { background: #fef3c7; color: #92400e; } .badge-absent { background: #fee2e2; color: #991b1b; } .badge-excused { background: #e0e7ff; color: #3730a3; } .badge-pending { background: #f3f4f6; color: #4b5563; } .badge-cancelled { background: #f3f4f6; color: #6b7280; text-decoration: line-through; } /* ---------- Glossary ---------- */ dl.glossary { margin: 18px 0; } dl.glossary dt { font-weight: 700; color: #1a1a1a; margin-top: 16px; font-size: 14.5px; } dl.glossary dd { margin: 4px 0 0; color: #444; } /* ---------- FAQ ---------- */ .faq details { background: #fff; border: 1px solid #e5e5e5; border-radius: 10px; margin: 10px 0; } .faq summary { padding: 14px 18px; cursor: pointer; font-weight: 600; font-size: 14.5px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; font-weight: 400; font-size: 22px; color: #888; } .faq details[open] summary::after { content: '−'; } .faq details[open] summary { border-bottom: 1px solid #f0f0f0; } .faq .answer { padding: 12px 20px 16px; font-size: 14px; color: #444; line-height: 1.65; } .faq .answer p { margin: 0 0 10px; } .faq .answer p:last-child { margin-bottom: 0; } /* ---------- Footer ---------- */ .guide-footer { max-width: 820px; margin: 80px auto 0; padding: 24px 0; border-top: 1px solid #e5e5e5; color: #888; font-size: 14px; text-align: center; } .guide-footer a { color: #DC2626; text-decoration: none; } .guide-footer a:hover { text-decoration: underline; } /* ---------- Index page (rol cards) ---------- */ .role-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 28px 0; } @media (min-width: 640px) { .role-grid { grid-template-columns: repeat(2, 1fr); } } .role-card { display: block; padding: 24px 22px; background: #fff; border: 1px solid #e5e5e5; border-radius: 14px; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s, border-color .2s; } .role-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); border-color: #DC2626; } .role-card.disabled { opacity: .5; pointer-events: none; } .role-card .icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1; margin-bottom: 14px; } .role-card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; } .role-card p { margin: 0; color: #666; font-size: 14px; line-height: 1.55; } .role-card .tag { display: inline-block; margin-top: 12px; font-size: 12px; color: #888; } /* ---------- Anchor links on headings ---------- */ .guide-main h2, .guide-main h3 { position: relative; } .guide-main h2 .anchor-link, .guide-main h3 .anchor-link { position: absolute; left: -1.2em; top: 50%; transform: translateY(-50%); width: 1em; text-align: center; color: #ddd; text-decoration: none; font-weight: 400; font-size: .9em; opacity: 0; transition: opacity .18s, color .18s; } .guide-main h2:hover .anchor-link, .guide-main h3:hover .anchor-link, .guide-main h2:focus-within .anchor-link, .guide-main h3:focus-within .anchor-link { opacity: 1; } .guide-main h2 .anchor-link:hover, .guide-main h3 .anchor-link:hover { color: #DC2626; } .guide-main h2 .anchor-link.copied::after, .guide-main h3 .anchor-link.copied::after { content: "✓ copiado"; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 8px; background: #16a34a; color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; text-transform: uppercase; letter-spacing: .03em; } @media (max-width: 1023px) { .guide-main h2 .anchor-link, .guide-main h3 .anchor-link { display: none; } } /* ---------- Tables (scroll horizontal en móvil) ---------- */ .table-wrap { overflow-x: auto; margin: 16px 0; -webkit-overflow-scrolling: touch; } .table-wrap table { margin: 0 !important; min-width: 520px; } .guide-main table { font-size: 14px; } .guide-main table th, .guide-main table td { padding: 9px 12px; } /* ---------- Back to top button ---------- */ .back-to-top { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: 44px; height: 44px; border: none; border-radius: 50%; background: #DC2626; color: #fff; font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(123, 20, 48, .35), 0 2px 4px rgba(0, 0, 0, .1); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s, background .15s; pointer-events: none; } .back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-to-top:hover { background: #c81111; } /* ---------- Prev / next nav ---------- */ .guide-pager { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 56px 0 12px; } @media (min-width: 640px) { .guide-pager { grid-template-columns: 1fr 1fr; } } .guide-pager a { display: block; padding: 16px 18px; background: #fff; border: 1px solid #e5e5e5; border-radius: 12px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s, box-shadow .15s; } .guide-pager a:hover { border-color: #DC2626; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .06); } .guide-pager .label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #888; margin-bottom: 4px; } .guide-pager .title { display: block; font-weight: 600; color: #1a1a1a; } .guide-pager .next { text-align: right; } /* ---------- Updated meta ---------- */ .guide-updated { display: inline-block; margin: 8px 0 0; padding: 4px 10px; background: #f5f5f5; border-radius: 999px; font-size: 12px; color: #666; } /* ---------- Scroll offset para anchors ---------- El staff app tiene topbar sticky de 56px. El sitio público no tiene topbar sticky pero las guías sí, lo que requiere ~80px. Usamos :has() para activar el padding solo cuando hay una guía en la página. */ html:has(.guide-page) { scroll-padding-top: 80px; } html.has-staff-topbar:has(.guide-page) { scroll-padding-top: 72px; } /* ---------- Dark mode (web-admin con next-themes class="dark") ---------- */ .dark .guide-page { background: transparent; color: #e5e5e5; } .dark .guide-page .guide-toc { background: #0d0d0d; border-right-color: #262626; } .dark .guide-page .guide-toc h4 { color: #6b6b6b; } .dark .guide-page .guide-toc a { color: #b3b3b3; } .dark .guide-page .guide-toc a:hover { background: #1a1011; color: #ff5252; } .dark .guide-page .guide-toc a.active { background: #1f0d0d; color: #ff5252; } .dark .guide-page .toc-mobile { background: #0d0d0d; border-color: #262626; } .dark .guide-page .toc-mobile a { color: #c5c5c5; } .dark .guide-page .guide-main h2 { color: #f5f5f5; border-top-color: #262626; } .dark .guide-page .guide-main h3 { color: #ededed; } .dark .guide-page .guide-main h4 { color: #c5c5c5; } .dark .guide-page .guide-main strong { color: #fff; } .dark .guide-page .guide-main code { background: #1f1f1f; color: #ff7676; } .dark .guide-page .guide-main .kbd { background: #181818; border-color: #333; color: #d5d5d5; } .dark .guide-page .steps > li { background: #131313; border-color: #262626; } .dark .guide-page figure.shot { background: #0d0d0d; border-color: #262626; } .dark .guide-page figure.shot img { border-bottom-color: #262626; } .dark .guide-page figure.shot figcaption { background: #161616; color: #a0a0a0; } .dark .guide-page .callout.info { background: #0e1d3d; color: #c2d6ff; } .dark .guide-page .callout.info strong { color: #dce8ff; } .dark .guide-page .callout.warn { background: #2a1d05; color: #f5dba1; } .dark .guide-page .callout.warn strong { color: #ffe7b8; } .dark .guide-page .callout.danger { background: #2b0a0a; color: #f5b8b8; } .dark .guide-page .callout.danger strong { color: #ffd0d0; } .dark .guide-page .callout.tip { background: #0d2818; color: #b9e8ce; } .dark .guide-page .callout.tip strong { color: #d4f3df; } .dark .guide-page .callout.notif { background: #1f0d2a; color: #d8c2f0; } .dark .guide-page .callout.notif strong { color: #e9d6f9; } .dark .guide-page dl.glossary dt { color: #f5f5f5; } .dark .guide-page dl.glossary dd { color: #b5b5b5; } .dark .guide-page .faq details { background: #131313; border-color: #262626; } .dark .guide-page .faq summary { color: #ededed; } .dark .guide-page .faq details[open] summary { border-bottom-color: #262626; } .dark .guide-page .faq .answer { color: #b5b5b5; } .dark .guide-page .guide-pager a { background: #131313; border-color: #262626; } .dark .guide-page .guide-pager a:hover { border-color: #ff5252; } .dark .guide-page .guide-pager .title { color: #ededed; } .dark .guide-page .role-card { background: #131313; border-color: #262626; } .dark .guide-page .role-card:hover { border-color: #ff5252; } .dark .guide-page .role-card h3 { color: #f5f5f5; } .dark .guide-page .role-card p { color: #a8a8a8; } .dark .guide-page .guide-updated { background: #1f1f1f; color: #b8b8b8; } .dark .guide-page table th { background: #181818 !important; color: #ededed; } .dark .guide-page table td, .dark .guide-page table th { border-color: #262626 !important; } .dark .guide-page .guide-main h2 .anchor-link { color: #444; } .dark .guide-page .guide-main h2 .anchor-link:hover, .dark .guide-page .guide-main h3 .anchor-link:hover { color: #ff5252; } /* ---------- Print ---------- */ @media print { .guide-header, .guide-toc, .toc-mobile, .guide-footer, .back-to-top { display: none; } .guide-shell { grid-template-columns: 1fr; } body, .guide-page { background: #fff; color: #000; font-size: 12pt; } figure.shot { break-inside: avoid; page-break-inside: avoid; } .steps > li { break-inside: avoid; } .lb-overlay { display: none !important; } } /* ---------- Lightbox ---------- */ .guide-main img.zoomable { cursor: zoom-in; transition: box-shadow 0.15s ease; /* Reservar aspect ratio para evitar CLS (las imágenes cargan lazy y sin dimensiones explícitas el browser hace scroll-anchoring que se siente como "rebote" al scrollear). 16:10 = 1440x900 nativo de las capturas. */ aspect-ratio: 16 / 10; height: auto; width: 100%; object-fit: contain; background: #fafafa; } .guide-main img.zoomable:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } .guide-main img.zoomable:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; } .dark .guide-main img.zoomable { background: #1a1a1a; } body.lb-open { overflow: hidden; } .lb-overlay { position: fixed; inset: 0; z-index: 9999; display: none; flex-direction: column; background: rgba(8, 12, 20, 0.94); opacity: 0; transition: opacity 0.18s ease; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .lb-overlay.open { display: flex; opacity: 1; } .lb-toolbar { flex-shrink: 0; display: flex; align-items: center; gap: 16px; padding: 12px 20px; color: rgba(255, 255, 255, 0.92); background: rgba(0, 0, 0, 0.45); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .lb-caption { flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .lb-actions { display: inline-flex; gap: 6px; align-items: center; } .lb-zoom { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.78); min-width: 44px; text-align: right; padding: 0 8px 0 4px; user-select: none; } .lb-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.92); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease; padding: 0; } .lb-btn:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.26); } .lb-btn:active { transform: scale(0.95); } .lb-btn:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; } .lb-btn-close { margin-left: 4px; background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.32); } .lb-btn-close:hover { background: rgba(239, 68, 68, 0.26); border-color: rgba(239, 68, 68, 0.5); } .lb-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 24px; cursor: default; touch-action: none; overscroll-behavior: contain; } .lb-img { display: block; user-select: none; -webkit-user-drag: none; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); border-radius: 4px; transform-origin: center center; will-change: transform; transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1); cursor: zoom-in; touch-action: none; } .lb-overlay.zoomed .lb-img { cursor: zoom-out; } .lb-overlay.dragging .lb-img { cursor: grabbing; transition: none; } .lb-overlay.wheeling .lb-img { transition: none; } @media (max-width: 640px) { .lb-toolbar { padding: 10px 12px; gap: 10px; } .lb-caption { font-size: 12px; -webkit-line-clamp: 1; } .lb-stage { padding: 12px; } .lb-btn { width: 34px; height: 34px; } .lb-zoom { display: none; } }