/* ===== Reset básico ===== */ * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; background: #f9fafb; /* claro */ color: #1f2937; /* gris-800 */ line-height: 1.5; } /* Modo oscuro (tú ya alternas .dark en ) */ html.dark body { background: #111827; color: #f3f4f6; } /* gris-900 + gris-100 */ /* ===== Layout ===== */ .page { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; } .card { width: 100%; max-width: 720px; background: #ffffff; border-radius: 16px; padding: 24px; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05); border: 1px solid #e5e7eb; } html.dark .card { background: #1f2937; /* gris-800 */ border-color: #374151; /* gris-700 */ box-shadow: 0 10px 15px -3px rgba(0,0,0,.6), 0 4px 6px -2px rgba(0,0,0,.4); } /* ===== Tipografía ===== */ .title { margin: 0; font-weight: 700; font-size: 22px; } .subtitle { margin: 6px 0 0; color: #6b7280; } /* gris-500 */ html.dark .subtitle { color: #d1d5db; } /* gris-300 */ /* ===== Botones ===== */ .actions { display: flex; gap: 12px; align-items: center; margin-top: 18px; } .btn { appearance: none; border: 1px solid transparent; border-radius: 8px; padding: 10px 16px; font-size: 14px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .btn-primary { background: #0f766e; color: #fff; } /* teal-700 */ .btn-primary:hover { background: #0b5e58; } /* teal-800 */ .btn-outline { background: transparent; color: #374151; border-color: #d1d5db; } .btn-outline:hover { background: #f3f4f6; } html.dark .btn-outline { color: #e5e7eb; border-color: #4b5563; } html.dark .btn-outline:hover { background: #374151; } /* ===== Toggle tema ===== */ .toggle { margin-left: auto; background: #0f766e; color: #fff; border-radius: 8px; padding: 8px 12px; font-size: 13px; } .toggle:hover { background: #0b5e58; } /* ===== Utilidades ===== */ .mt-16 { margin-top: 16px; } .mt-6 { margin-top: 6px; } .gap-8 { gap: 8px; } .icon { font-size: 28px; margin-right: 8px; } .row { display: flex; align-items: center; } /* ---------- Reset mínimo y variables ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } :root{ --bg-teal-50: #ecfeff; /* muy claro */ --teal-300: #5eead4; --teal-400: #2dd4bf; --teal-600: #0d9488; --teal-700: #0f766e; --slate-50: #f8fafc; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-600: #475569; --slate-700: #334155; --slate-800: #1f2937; --slate-900: #0f172a; } /* ---------- Lienzo ---------- */ body.page-419 { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; display: flex; align-items: center; justify-content: center; padding: 24px; color: var(--slate-900); background: linear-gradient(135deg, var(--bg-teal-50) 0%, #f0fdfa 100%); } /* Dark mode (prefers + clase .dark opcional) */ @media (prefers-color-scheme: dark) { body.page-419 { color: var(--slate-200); background: linear-gradient(135deg, #0b1324, var(--slate-900)); } } html.dark body.page-419 { color: var(--slate-200); background: linear-gradient(135deg, #0b1324, var(--slate-900)); } /* ---------- Tarjeta ---------- */ .card{ width: 100%; max-width: 560px; background: #fff; border-radius: 16px; padding: 28px; box-shadow: 0 10px 30px rgba(0,0,0,.08), 0 1px 0 rgba(16,185,129,.15) inset; } @media (prefers-color-scheme: dark) { .card{ background: #0f172a; border: 1px solid var(--slate-700); box-shadow: 0 10px 30px rgba(0,0,0,.35); } } html.dark .card{ background: #0f172a; border: 1px solid var(--slate-700); box-shadow: 0 10px 30px rgba(0,0,0,.35); } /* ---------- Tipografías ---------- */ .code{ font-size: 56px; font-weight: 800; letter-spacing: 2px; color: #94a3b8; /* slate-400 */ text-align: center; } .title{ margin-top: 8px; font-size: 22px; font-weight: 700; text-align: center; color: var(--teal-700); } @media (prefers-color-scheme: dark){ .title{ color: var(--teal-400); } } html.dark .title{ color: var(--teal-400); } .text{ margin-top: 10px; text-align: center; color: var(--slate-600); line-height: 1.6; } @media (prefers-color-scheme: dark){ .text{ color: var(--slate-200); } } html.dark .text{ color: var(--slate-200); } /* ---------- Acciones / botones ---------- */ .actions{ margin-top: 22px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .btn{ appearance: none; border: none; border-radius: 10px; padding: 10px 16px; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .08s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; outline: none; } .btn:active{ transform: translateY(1px); } .btn:focus-visible{ outline: 2px solid var(--teal-400); outline-offset: 3px; } .btn--primary{ background: var(--teal-600); color: #fff; box-shadow: 0 6px 16px rgba(13,148,136,.25); } .btn--primary:hover{ background: var(--teal-700); } .btn--primary:focus-visible{ box-shadow: 0 0 0 4px rgba(45,212,191,.25); } .btn--secondary{ background: transparent; border: 1px solid var(--slate-300); color: var(--slate-900); } .btn--secondary:hover{ background: var(--slate-50); } @media (prefers-color-scheme: dark){ .btn--secondary{ border-color: var(--slate-700); color: var(--slate-200); } .btn--secondary:hover{ background: var(--slate-800); } } html.dark .btn--secondary{ border-color: var(--slate-700); color: var(--slate-200); } html.dark .btn--secondary:hover{ background: var(--slate-800); } /* ---------- Responsivo ---------- */ @media (max-width: 380px){ .code{ font-size: 44px; } .title{ font-size: 20px; } }