/* legado/styles.css — UI compartida entre login/signup/vault/admin */ :root { --ink-950: #07091A; --ink-900: #0B0E24; --ink-850: #0F1330; --ink-800: #141A3D; --ink-700: #1C2451; --ink-600: #2A3470; --line: rgba(255,255,255,0.08); --line-strong: rgba(255,255,255,0.14); --paper: #F4EFE6; --gold: #D4A574; --gold-soft: #E8C9A0; --teal: #6FD3C7; --sage: #A8C8A8; --text-50: #F8F5EE; --text-100: #E8E1D2; --text-300: #B5B0C2; --text-500: #7E7A91; --danger: #E26D5C; --safe: #7AB87A; --ember: #F08C5A; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --shadow-card: 0 1px 0 rgba(255,255,255,0.05) inset, 0 30px 60px -30px rgba(0,0,0,0.55); color-scheme: dark; } /* ── Modo claro ────────────────────────────────────────────── Se activa con html.light (toggle en el cog menu del vault). Persistido en localStorage.legado_theme y aplicado en un script del para evitar flash dark→light en el primer paint. Mantenemos el mismo gold/teal de marca; lo que cambia es la escala de "ink" (fondos) y los grises de texto. Decisión: NO atamos a prefers-color-scheme — es opt-in explícito desde la config. Quien usa Legado de noche probablemente quiere dark fijo aunque el SO esté en light. */ html.light { --ink-950: #F4F1EA; /* viewport bg — tono cálido, no blanco puro */ --ink-900: #FBFAF6; /* card bg principal */ --ink-850: #FFFFFF; /* card bg elevada */ --ink-800: #F1EEE6; /* inputs / chips */ --ink-700: #E8E3D7; /* hover de inputs */ --ink-600: #DCD6C7; --line: rgba(20, 22, 50, 0.10); --line-strong: rgba(20, 22, 50, 0.18); --gold: #B8854F; /* más oscuro para contraste */ --gold-soft: #C99A5C; --teal: #2E8C82; --sage: #5C8A5C; --text-50: #1A1F2B; /* casi negro pero cálido */ --text-100: #2A3040; --text-300: #555B6B; --text-500: #8A8E99; --danger: #C84A38; --safe: #4A8B4A; --ember: #C56738; --shadow-card: 0 1px 0 rgba(0,0,0,0.04) inset, 0 12px 30px -16px rgba(20,22,50,0.18); color-scheme: light; } /* En modo claro el background-radial de la página es muy oscuro: suavizamos a tonos pastel para que el "glow" no se vea como mancha. */ html.light body::before { background: radial-gradient(ellipse 1100px 700px at 12% -10%, rgba(184,133,79,0.10), transparent 60%), radial-gradient(ellipse 800px 500px at 100% 30%, rgba(46,140,130,0.06), transparent 55%), radial-gradient(ellipse 1000px 600px at 50% 110%, rgba(212,165,116,0.06), transparent 60%); } html.light .topbar { background: rgba(244, 241, 234, 0.85); } /* Modal overlay backdrop: en light usamos tinte cálido en vez de azul oscuro */ html.light .overlay { background: rgba(20, 22, 50, 0.45); } /* Inputs en light: bordes y texto se invierten */ html.light input, html.light textarea, html.light select { background: var(--ink-850); color: var(--text-50); border-color: var(--line-strong); } /* Code/textarea legibilidad */ html.light kbd { background: var(--ink-800); color: var(--text-50); border-color: var(--line-strong); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: 'Geist', system-ui, -apple-system, sans-serif; background: var(--ink-950); color: var(--text-100); line-height: 1.55; min-height: 100vh; -webkit-font-smoothing: antialiased; } body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse 1100px 700px at 12% -10%, rgba(42,52,112,0.45), transparent 60%), radial-gradient(ellipse 800px 500px at 100% 30%, rgba(212,165,116,0.10), transparent 55%), radial-gradient(ellipse 1000px 600px at 50% 110%, rgba(111,211,199,0.07), transparent 60%); pointer-events: none; z-index: 0; } main { position: relative; z-index: 1; } a { color: var(--gold-soft); text-decoration: none; } a:hover { text-decoration: underline; } .display { font-family: 'Fraunces', 'Times New Roman', serif; font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; } .display em { font-style: italic; color: var(--gold-soft); } .mono { font-family: 'JetBrains Mono', 'SF Mono', monospace; } .muted { color: var(--text-500); } .dim { color: var(--text-300); } /* Topbar */ .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; backdrop-filter: blur(12px); background: rgba(7, 9, 26, 0.78); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 10px; font-family: 'Fraunces', serif; font-size: 18px; font-weight: 500; color: var(--text-50); } .brand .dot { width: 26px; height: 26px; background: url('/static/favicon.svg') center/contain no-repeat; border-radius: 6px; } .topbar .tools { display: flex; gap: 12px; align-items: center; font-size: 13px; } /* Menú de config con ruedita */ .cog-wrap { position: relative; } .cog-btn { background: transparent; border: 1px solid var(--line); color: var(--text-300); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; } .cog-btn:hover { color: var(--gold-soft); border-color: var(--gold-soft); transform: rotate(30deg); } .cog-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: var(--ink-800); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); min-width: 220px; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6); z-index: 100; padding: 6px; } .cog-menu.on { display: block; } .cog-menu a, .cog-menu button { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 6px; font-size: 13px; color: var(--text-100); background: transparent; border: none; width: 100%; text-align: left; cursor: pointer; font-family: inherit; } .cog-menu a:hover, .cog-menu button:hover { background: var(--ink-700); text-decoration: none; color: var(--text-50); } .cog-menu .sep { height: 1px; background: var(--line); margin: 4px 0; } .cog-menu .cog-section { padding: 8px 14px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-500); } /* Cards del checklist de preparación */ .prep-card { background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 12px; text-align: center; cursor: pointer; transition: all .15s; font-family: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; } .prep-card:hover { border-color: var(--gold-soft); transform: translateY(-2px); } .prep-card.prep-done { background: rgba(122, 184, 122, 0.05); border-color: rgba(122, 184, 122, 0.3); } .prep-card.prep-done:hover { border-color: var(--safe); } /* Toolbar de acciones compactas en cards de custodios */ .cust-act { width: 32px; height: 32px; border-radius: 6px; background: transparent; border: 1px solid var(--line); color: var(--text-300); font-size: 14px; cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; justify-content: center; } .cust-act:hover { border-color: var(--gold-soft); color: var(--text-50); transform: translateY(-1px); } .cust-act-danger { color: var(--danger); } .cust-act-danger:hover { border-color: var(--danger); background: rgba(226, 109, 92, 0.08); } /* Cards */ .card { background: linear-gradient(180deg, var(--ink-850), var(--ink-900)); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 32px; } /* Inputs */ .fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .fld label { font-size: 12px; color: var(--text-300); text-transform: uppercase; letter-spacing: .08em; } .fld input, .fld select, .fld textarea { background: rgba(255,255,255,0.04); color: var(--text-50); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; font-family: inherit; outline: none; transition: border-color .15s; width: 100%; /* color-scheme:dark le dice al browser que use UI controls oscuros (Chrome Windows abre el dropdown en blanco con texto blanco si no se setea esto). */ color-scheme: dark; } /* Override para radios/checkboxes: width:100% del global los estiraba en contenedores flex, empujando el label al otro lado del modal y dejando el control flotando en una "columna" sola. Estos son auto-width. */ .fld input[type="radio"], .fld input[type="checkbox"] { width: auto; padding: 0; margin: 0; flex: 0 0 auto; accent-color: var(--gold-soft); } .fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--gold-soft); } /* Estilo explícito de las opciones del select — sin esto el dropdown nativo abre con fondo blanco/texto blanco en Windows. */ .fld select option { background: var(--ink-800); color: var(--text-50); } .fld textarea { min-height: 90px; resize: vertical; font-family: 'JetBrains Mono', monospace; font-size: 13px; } .fld .hint { font-size: 11px; color: var(--text-500); } /* Tabs de Editar/Vista para textareas con soporte Markdown */ .md-tab { background: transparent; border: 0; color: var(--text-300); font-family: inherit; font-size: 11px; font-weight: 500; padding: 5px 12px; border-radius: 4px; cursor: pointer; transition: all .15s; } .md-tab.on { background: var(--gold-soft); color: var(--ink-900); } .md-tab:hover:not(.on) { color: var(--text-50); background: rgba(255,255,255,.04); } /* Toolbar de formato (negrita / cursiva / subrayado / lista / link) sobre los textareas de Markdown. Botones chicos, fondo transparente, hover sutil — el textarea es la estrella, no la barra. */ .md-tb-btn { background: transparent; border: 0; color: var(--text-300); font-family: inherit; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 4px; cursor: pointer; transition: color .15s, background .15s; min-width: 26px; } .md-tb-btn:hover { color: var(--text-50); background: rgba(255,255,255,.06); } .md-tb-btn:active { background: rgba(255,255,255,.10); } .md-rendered u { text-decoration: underline; } /* Estilos del Markdown rendered (preview en items + render en unlock/share) */ .md-rendered p { margin: 0 0 8px 0; } .md-rendered p:last-child { margin-bottom: 0; } .md-rendered ul, .md-rendered ol { margin: 6px 0 10px 22px; padding: 0; } .md-rendered li { margin: 3px 0; } .md-rendered a { color: var(--gold-soft); text-decoration: underline; } .md-rendered a:hover { color: var(--gold); } .md-rendered strong { color: var(--text-50); font-weight: 600; } .md-rendered em { color: var(--text-50); font-style: italic; } .md-rendered code { color: var(--gold-soft); } .md-rendered pre { margin: 8px 0; } .md-rendered pre code { color: var(--text-100); } /* Wrapper para inputs de password con el botón ojito al lado. crypto.js inserta automáticamente este div alrededor de cada input[type=password]. */ .pwd-wrap { position: relative; display: block; } .pwd-wrap input[type="password"], .pwd-wrap input[type="text"] { padding-right: 44px; } .pwd-toggle { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); background: transparent; border: 0; color: var(--text-300); cursor: pointer; font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 4px; transition: color .15s, background .15s; } .pwd-toggle:hover { color: var(--gold-soft); background: rgba(255,255,255,0.04); } .pwd-toggle:focus { outline: 1px solid var(--gold-soft); outline-offset: 1px; } /* Tabs principales del vault: Mi legado vs Soy custodio. Estilo segmented control con borde inferior dorado en el activo. */ .vault-tabs { display: flex; gap: 4px; margin-top: 24px; margin-bottom: 8px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .vault-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--text-300); cursor: pointer; padding: 12px 18px; font-family: inherit; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; margin-bottom: -1px; transition: color .15s, border-color .15s; } .vault-tab:hover { color: var(--text-50); } .vault-tab.on { color: var(--gold-soft); border-bottom-color: var(--gold-soft); } /* Mobile: con 5 tabs los textos completos no entran en una línea. Achicamos el padding y dejamos que .vault-tabs scroll horizontal — más common UX que wrap a 2 filas. */ @media (max-width: 760px) { .vault-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .vault-tab { padding: 10px 12px; font-size: 12.5px; flex-shrink: 0; white-space: nowrap; } .vault-tab span:not(.vault-tab-badge) { font-size: 12.5px; } } .vault-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--gold-soft); color: var(--ink-900); font-size: 11px; font-weight: 600; font-family: 'JetBrains Mono', monospace; } /* Botones */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; font-family: inherit; border: 1px solid transparent; cursor: pointer; transition: all .15s; } .btn-primary { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: var(--ink-900); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(212,165,116,0.5); } .btn-ghost { background: transparent; color: var(--text-100); border-color: var(--line-strong); } .btn-ghost:hover { border-color: var(--gold-soft); color: var(--text-50); } .btn-danger { background: rgba(226, 109, 92, 0.15); color: var(--danger); border-color: rgba(226, 109, 92, 0.4); } .btn-block { width: 100%; justify-content: center; padding: 14px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-sm { padding: 6px 12px; font-size: 12px; } /* Center container */ .center-wrap { min-height: calc(100vh - 70px); display: flex; align-items: center; justify-content: center; padding: 32px 16px; } .auth-card { max-width: 460px; width: 100%; } .auth-card h1 { font-family: 'Fraunces', serif; font-size: 32px; margin-bottom: 8px; color: var(--text-50); font-weight: 400; } .auth-card .sub { color: var(--text-300); margin-bottom: 28px; font-size: 14px; } /* App layout */ .app-wrap { max-width: 1140px; margin: 0 auto; padding: 32px 24px; } .section-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; } .section-head h2 { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 400; color: var(--text-50); } .section-head .sub { color: var(--text-300); font-size: 13px; margin-top: 4px; } /* Status banner */ .banner { border-radius: var(--radius-sm); padding: 12px 16px; font-size: 13px; margin: 12px 0; border: 1px solid var(--line-strong); } .banner-info { background: rgba(111, 211, 199, 0.08); border-color: rgba(111, 211, 199, 0.3); color: var(--teal); } .banner-warn { background: rgba(212, 165, 116, 0.08); border-color: rgba(212, 165, 116, 0.3); color: var(--gold-soft); } .banner-error { background: rgba(226, 109, 92, 0.08); border-color: rgba(226, 109, 92, 0.3); color: var(--danger); } .banner-ok { background: rgba(122, 184, 122, 0.08); border-color: rgba(122, 184, 122, 0.3); color: var(--safe); } /* Categoría chips */ .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; } .chip { padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); font-size: 12px; color: var(--text-300); cursor: pointer; transition: all .15s; } .chip:hover { border-color: var(--gold-soft); color: var(--text-100); } .chip.on { background: var(--gold-soft); color: var(--ink-900); border-color: var(--gold-soft); } .chip .badge { margin-left: 6px; opacity: 0.7; font-family: 'JetBrains Mono', monospace; font-size: 10px; } /* Items */ .items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .item-card { background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 20px; transition: border-color .15s, transform .15s; cursor: pointer; /* Flex column: el grid stretchea las cards a la altura de la fila; con flex column + margin-top:auto en el footer, los footers/toolbars quedan siempre al fondo aunque el contenido del medio sea distinto entre cards (ej. custodio con vs sin WhatsApp). */ display: flex; flex-direction: column; } .item-card:hover { border-color: var(--gold-soft); transform: translateY(-2px); } .item-card .cat { font-size: 11px; color: var(--text-500); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; } .item-card .titulo { color: var(--text-50); font-weight: 500; margin-bottom: 4px; word-break: break-word; } .item-card .preview { font-size: 12px; color: var(--text-300); } .item-card .footer { font-size: 11px; color: var(--text-500); margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; } /* Empty state */ .empty { text-align: center; padding: 60px 20px; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); } .empty .ico { font-size: 48px; margin-bottom: 12px; opacity: 0.6; } .empty .titulo { font-family: 'Fraunces', serif; font-size: 22px; color: var(--text-100); margin-bottom: 8px; } .empty .desc { color: var(--text-300); font-size: 14px; max-width: 400px; margin: 0 auto 18px; } /* Modal */ .overlay { position: fixed; inset: 0; background: rgba(7, 9, 26, 0.88); display: none; align-items: center; justify-content: center; z-index: 100; padding: 16px; } .overlay.on { display: flex; } .modal { background: linear-gradient(180deg, var(--ink-850), var(--ink-900)); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 28px; } .modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .modal-head h3 { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 400; } .modal-close { background: none; border: none; color: var(--text-300); font-size: 22px; cursor: pointer; padding: 4px 10px; } /* Toast */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink-800); color: var(--text-50); padding: 14px 22px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); z-index: 200; font-size: 14px; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6); display: none; } .toast.on { display: block; animation: toastIn .25s ease; } .toast.err { border-color: rgba(226, 109, 92, 0.5); color: var(--danger); } .toast.ok { border-color: rgba(122, 184, 122, 0.5); color: var(--safe); } @keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } } /* ========================================================================== v4 design system — "dark luxury" + tactile soft. Override de tokens y reglas que aplican a TODA la app. IMPORTANTE: tokens dark solo via :root:not(.light) para no pisar light theme. ========================================================================== */ :root:not(.light) { --ink-950: #0B0816; --ink-900: #110C24; --ink-850: #1A1430; --ink-800: #221944; --gold: #E8B86D; --gold-soft: #F5C880; } :root { /* Tonos por categoría — usados por las item cards. Funcionan en ambos modos. */ --c-doc: #7AB8E8; --c-acc: #E8B86D; --c-cont: #E8A8C0; --c-instr: #7AB897; --c-act: #9B87E8; --c-notas: #E89D9D; } :root.light { --gold: #B8893E; --gold-soft: #D8A458; --c-doc: #2C7BAD; --c-acc: #B8893E; --c-cont: #B86A8E; --c-instr: #4A8866; --c-act: #6B5BB0; --c-notas: #B85959; } body { font-family: 'Inter', 'Geist', system-ui, -apple-system, sans-serif; letter-spacing: -0.005em; } :root:not(.light) body::before { background: radial-gradient(ellipse 1100px 700px at 12% -10%, rgba(232,184,109,0.06), transparent 55%), radial-gradient(ellipse 800px 500px at 100% 30%, rgba(155,135,232,0.06), transparent 50%), radial-gradient(ellipse 1000px 600px at 50% 110%, rgba(232,184,109,0.04), transparent 60%); } .display, h1, h2, h3 { font-family: 'Plus Jakarta Sans', 'Fraunces', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; } .display em { font-style: italic; } .app-wrap { max-width: 1400px !important; } :root:not(.light) .topbar { background: rgba(11, 8, 22, 0.7); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); } /* Iconos Lucide — tamaño consistente. Lucide reemplaza por ; necesitamos !important para overridarlos. */ .lic, svg.lucide.lic { width: 16px !important; height: 16px !important; flex-shrink: 0; vertical-align: middle; } .lic-sm, svg.lucide.lic-sm { width: 14px !important; height: 14px !important; } .lic-lg, svg.lucide.lic-lg { width: 20px !important; height: 20px !important; } .tools .lic, .tools svg.lucide { width: 18px !important; height: 18px !important; } svg.lucide { width: 16px; height: 16px; } /* Tabs estilo segmented control */ .vault-tabs { background: var(--ink-800); border: 1px solid var(--line); border-radius: 14px; padding: 4px; gap: 2px; display: inline-flex; width: fit-content; max-width: 100%; } .vault-tab { background: transparent !important; border: 0 !important; border-radius: 10px !important; padding: 9px 16px !important; color: var(--text-300); display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; transition: background .15s ease, color .15s ease; } .vault-tab:hover { color: var(--text-50); background: var(--ink-700) !important; } .vault-tab.on, .vault-tab[aria-selected="true"] { background: var(--ink-700) !important; color: var(--text-50); box-shadow: 0 1px 0 var(--line-strong) inset; } .vault-tab.on .lic { color: var(--gold); } @media (max-width: 720px) { .vault-tabs { width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; position: relative; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent 100%); } .vault-tabs::-webkit-scrollbar { display: none; } .vault-tab { padding: 11px 14px !important; font-size: 13.5px; min-height: 44px; } } /* Item cards: hover lift + accent line por categoría */ .item-card { position: relative; border-radius: var(--radius-lg); transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; overflow: hidden; } .item-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--cat-color, var(--gold)) 50%, transparent 100%); opacity: 0.5; pointer-events: none; } .item-card:hover { transform: translateY(-2px); border-color: var(--line-strong); } :root:not(.light) .item-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.04) inset; } :root.light .item-card:hover { box-shadow: 0 6px 16px rgba(20,22,50,0.08), 0 1px 0 rgba(255,255,255,0.6) inset; } .item-card:hover::before { opacity: 0.85; } .item-card[data-cat="documentos"] { --cat-color: var(--c-doc); } .item-card[data-cat="accesos"] { --cat-color: var(--c-acc); } .item-card[data-cat="contactos"] { --cat-color: var(--c-cont); } .item-card[data-cat="instrucciones"] { --cat-color: var(--c-instr); } .item-card[data-cat="activos"] { --cat-color: var(--c-act); } .item-card[data-cat="notas"] { --cat-color: var(--c-notas); } .item-card .cat { color: var(--cat-color, var(--gold)); } .item-card .i-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .item-card .i-badges { display: inline-flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; } .item-card .i-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; border: 1px solid; } .item-card .i-badge svg.lucide { width: 11px !important; height: 11px !important; } .item-card .i-badge-capsule { background: rgba(122,184,151,0.12); color: var(--c-instr); border-color: rgba(122,184,151,0.28); } .item-card .i-badge-capsule.is-past { background: rgba(255,255,255,0.04); color: var(--text-300); border-color: var(--line); } .item-card .i-badge-legado { background: rgba(155,135,232,0.12); color: var(--c-act); border-color: rgba(155,135,232,0.28); } .item-card .i-badge-now { background: rgba(122,184,232,0.10); color: var(--c-doc); border-color: rgba(122,184,232,0.24); } :root.light .item-card .i-badge-now { background: rgba(44,123,173,0.08); color: var(--c-doc); border-color: rgba(44,123,173,0.30); } :root.light .item-card .i-badge-capsule { background: rgba(74,136,102,0.10); color: var(--c-instr); border-color: rgba(74,136,102,0.30); } :root.light .item-card .i-badge-legado { background: rgba(107,91,176,0.10); color: var(--c-act); border-color: rgba(107,91,176,0.30); } /* Botón primario con gradient dorado */ .btn-primary { background: linear-gradient(180deg, #F0BE74 0%, var(--gold) 100%) !important; color: #1A1009 !important; box-shadow: 0 4px 12px rgba(232,184,109,0.25), 0 1px 0 rgba(255,255,255,0.4) inset !important; border: 0 !important; } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(232,184,109,0.35), 0 1px 0 rgba(255,255,255,0.5) inset !important; } /* Onboarding card */ #onboarding-card { border-radius: var(--radius-lg) !important; overflow: hidden; position: relative; } :root:not(.light) #onboarding-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(232,184,109,0.10) 0%, transparent 45%); pointer-events: none; } #onboarding-card > * { position: relative; } /* Chips */ .chip { border-radius: 999px !important; padding: 8px 13px !important; display: inline-flex !important; align-items: center; gap: 7px; font-size: 13px; } .chip.on { background: rgba(232,184,109,0.12) !important; border-color: rgba(232,184,109,0.28) !important; color: var(--gold-soft) !important; } :root.light .chip.on { background: rgba(184,137,62,0.10) !important; border-color: rgba(184,137,62,0.30) !important; color: var(--gold) !important; } .chip .lic { width: 13px; height: 13px; } /* ========================================================================== v4 — ajustes específicos para modo claro (html.light) Los iconos Lucide usan stroke="currentColor" así que toman el color del padre. Acá ajustamos elementos que cambian de color/contraste en light. ========================================================================== */ /* Topbar en light: el bg ya está override más arriba a paper claro (.topbar { background: rgba(244, 241, 234, 0.85) }). El backdrop-filter v4 que metimos para dark debe estar OFF en light para no engominar. */ :root.light .topbar { background: rgba(255, 253, 247, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--line-strong); } /* Cog button: el border + color en light tiene que tener más contraste sobre el paper bg. */ :root.light .cog-btn { border-color: var(--line-strong); color: var(--text-100); } :root.light .cog-btn:hover { color: var(--gold); border-color: var(--gold); background: rgba(184,137,62,0.06); } /* Cog menu en light: surface más clara con shadow más sutil */ :root.light .cog-menu { background: var(--ink-850); border-color: var(--line-strong); box-shadow: 0 12px 32px -10px rgba(20, 22, 50, 0.18), 0 1px 0 rgba(255,255,255,0.5) inset; } :root.light .cog-menu a:hover, :root.light .cog-menu button:hover { background: var(--ink-800); } /* Tabs: el surface elevation que usamos en dark (rgba blanco semi-transparente) no funciona en light. Override con el ink scale que ya respeta tema. */ :root.light .vault-tabs { background: var(--ink-800); border-color: var(--line); } :root.light .vault-tab.on, :root.light .vault-tab[aria-selected="true"] { background: var(--ink-850) !important; color: var(--text-50); box-shadow: 0 1px 3px rgba(20,22,50,0.06), 0 1px 0 rgba(255,255,255,0.6) inset; } /* Item cards: en light el border default es muy sutil. Aumentamos un poco. El hover shadow ya tenía variante light arriba. */ :root.light .item-card { background: var(--ink-900); border-color: var(--line); } /* Botón primary: el gradient dorado y texto oscuro funcionan en ambos modos, pero en light el gold del var() es más oscuro — usamos gradient con tonos más cálidos para que el botón se distinga del paper bg. */ :root.light .btn-primary { background: linear-gradient(180deg, #D8A458 0%, var(--gold) 100%) !important; color: #1A1009 !important; box-shadow: 0 2px 8px rgba(184,137,62,0.30), 0 1px 0 rgba(255,255,255,0.4) inset !important; } :root.light .btn-primary:hover { box-shadow: 0 4px 14px rgba(184,137,62,0.40), 0 1px 0 rgba(255,255,255,0.5) inset !important; } /* btn-ghost en light: forzar border + color para que se vea contra paper */ :root.light .btn-ghost { border: 1px solid var(--line-strong); color: var(--text-100); } :root.light .btn-ghost:hover { background: var(--ink-800); color: var(--text-50); border-color: var(--gold); } /* cust-act buttons (toolbar de custodian/member cards): 28-32px, los iconos toman el color del texto. En light necesitan border más visible. */ :root.light .cust-act { border-color: var(--line-strong); color: var(--text-300); } :root.light .cust-act:hover { color: var(--gold); border-color: var(--gold); background: rgba(184,137,62,0.06); } :root.light .cust-act-danger:hover { color: var(--danger); border-color: var(--danger); background: rgba(200,74,56,0.06); } /* Banners en light: bg semi-translúcido sobre paper. El warn/error con colores más sólidos para que destaquen sobre el paper bg. */ :root.light .banner-warn { background: rgba(232,184,109,0.10); border-color: rgba(184,137,62,0.30); color: #6B4F1E; } :root.light .banner-error { background: rgba(226,109,92,0.08); border-color: rgba(200,74,56,0.30); color: #8B3525; } :root.light .banner-ok { background: rgba(122,184,122,0.08); border-color: rgba(74,139,74,0.30); color: #2E5A2E; } :root.light .banner-info { background: rgba(122,184,232,0.08); border-color: rgba(44,123,173,0.28); color: #1F4F73; } /* Lang switch (landing v3 también lo usa pero esto solo aplica en dashboard) */ :root.light .lang-switch button.active { color: #1A1009; } /* Onboarding card: el radial highlight gold solo aplicaba en dark. En light agregamos un highlight similar pero más sutil. */ :root.light #onboarding-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(184,137,62,0.06) 0%, transparent 50%); pointer-events: none; }