/* ===================================================================== MI DIARIO DE EMOCIONES · Sistema de diseño "El Espectro" --------------------------------------------------------------------- Una identidad visual unificada para todos los roles. Las emociones son un espectro de color; ese espectro corona cada página y une todo el sistema. Cada rol tiene su color de identidad, pero todos comparten tipografía, estructura y ritmo. Uso: ===================================================================== */ :root{ /* Neutros compartidos (tinta cálida, no negro puro) */ --ds-ink:#1f1c2e; --ds-ink-soft:#56516b; --ds-muted:#948fa6; --ds-line:#e9e5f2; --ds-paper:#f3f1f9; --ds-surface:#ffffff; /* Acento por defecto (violeta de marca) */ --ds-role:#6d5ae0; --ds-role-soft:#efeafc; --ds-role-ink:#4b3fb0; /* Espectro emocional: la firma del sistema */ --ds-spectrum:linear-gradient(90deg, #22C55E 0%, #14B8A6 12%, #06B6D4 23%, #3B82F6 35%, #6366F1 46%, #8B5CF6 57%, #EC4899 68%, #F97316 80%, #F59E0B 90%, #84CC16 100%); --ds-radius:18px; --ds-radius-lg:26px; --ds-shadow:0 1px 2px rgba(31,28,46,.04), 0 10px 30px -12px rgba(31,28,46,.16); --ds-shadow-lg:0 20px 50px -18px rgba(31,28,46,.30); --ds-serif:'Fraunces', Georgia, 'Times New Roman', serif; --ds-sans:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* ---- Identidad de color por rol ---- */ body[data-role="student"]{ --ds-role:#ef6d58; --ds-role-soft:#fdeee9; --ds-role-ink:#c0442f; } body[data-role="tutor"]{ --ds-role:#6d5ae0; --ds-role-soft:#efeafc; --ds-role-ink:#4b3fb0; } body[data-role="admin"]{ --ds-role:#0e9488; --ds-role-soft:#e2f5f2; --ds-role-ink:#0a6b62; } body[data-role="superadmin"]{ --ds-role:#59617a; --ds-role-soft:#eceef3; --ds-role-ink:#3d4457; } body[data-role="public"]{ --ds-role:#6d5ae0; --ds-role-soft:#efeafc; --ds-role-ink:#4b3fb0; } /* ===================================================================== Firma: el espectro corona cada página (fina línea superior) Es un elemento fijo, no invasivo, que une todo el sistema. ===================================================================== */ body::before{ content:""; position:fixed; top:0; left:0; right:0; height:4px; background:var(--ds-spectrum); background-size:200% 100%; z-index:9999; animation:ds-spectrum-flow 18s linear infinite; pointer-events:none; } @keyframes ds-spectrum-flow{ 0%{ background-position:0% 50%; } 100%{ background-position:200% 50%; } } @media (prefers-reduced-motion:reduce){ body::before{ animation:none; } } /* ===================================================================== Componentes del sistema (namespace .ds-*) para páginas rediseñadas. No interfieren con los estilos existentes de cada página. ===================================================================== */ .ds-spectrum-bar{ height:4px; border-radius:99px; background:var(--ds-spectrum); } /* Marca / lockup */ .ds-mark{ display:inline-flex; align-items:center; gap:10px; } .ds-mark-dots{ display:inline-flex; gap:3px; } .ds-mark-dots i{ width:9px; height:9px; border-radius:50%; display:inline-block; } .ds-wordmark{ font-family:var(--ds-serif); font-weight:600; letter-spacing:-.01em; color:var(--ds-ink); } /* Eyebrow (etiqueta pequeña sobre los títulos) */ .ds-eyebrow{ font-family:var(--ds-sans); font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ds-role); display:inline-flex; align-items:center; gap:8px; } /* Píldora de rol */ .ds-role-pill{ display:inline-flex; align-items:center; gap:7px; background:var(--ds-role-soft); color:var(--ds-role-ink); border-radius:99px; padding:5px 13px; font-size:.76rem; font-weight:700; font-family:var(--ds-sans); letter-spacing:.02em; } .ds-role-pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--ds-role); } /* Títulos */ .ds-title{ font-family:var(--ds-serif); font-weight:600; letter-spacing:-.015em; color:var(--ds-ink); line-height:1.08; } /* Botones */ .ds-btn{ font-family:var(--ds-sans); font-weight:700; font-size:.9rem; border:none; border-radius:12px; padding:12px 22px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform .16s ease, box-shadow .16s ease, filter .16s ease; } .ds-btn-primary{ background:var(--ds-role); color:#fff; box-shadow:0 10px 24px -10px var(--ds-role); } .ds-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -12px var(--ds-role); } .ds-btn-ghost{ background:var(--ds-surface); color:var(--ds-ink); border:1px solid var(--ds-line); } .ds-btn-ghost:hover{ transform:translateY(-2px); box-shadow:var(--ds-shadow); } /* Tarjeta */ .ds-card{ background:var(--ds-surface); border:1px solid var(--ds-line); border-radius:var(--ds-radius); box-shadow:var(--ds-shadow); } /* Campos de formulario */ .ds-field{ margin-bottom:16px; } .ds-field label{ display:block; font-family:var(--ds-sans); font-weight:600; font-size:.86rem; color:var(--ds-ink-soft); margin-bottom:7px; } .ds-input{ width:100%; padding:13px 16px; border:1.5px solid var(--ds-line); border-radius:12px; font-family:var(--ds-sans); font-size:.95rem; color:var(--ds-ink); background:var(--ds-surface); transition:border-color .16s, box-shadow .16s; } .ds-input::placeholder{ color:var(--ds-muted); } .ds-input:focus{ outline:none; border-color:var(--ds-role); box-shadow:0 0 0 4px var(--ds-role-soft); } /* ===================================================================== Acento de rol en los encabezados de cada panel (aditivo y sutil). Añade una fina línea del color del rol en el borde superior de la primera tarjeta .header / .topbar, para que cada rol reconozca su espacio sin alterar el resto del diseño existente. ===================================================================== */ body[data-role] .header, body[data-role] .topbar{ position:relative; } body[data-role] .header::after, body[data-role] .topbar::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--ds-role); opacity:.9; border-radius:3px 3px 0 0; } /* Realce del botón "activo" de rol donde exista un CTA principal */ body[data-role] .btn-primary{ box-shadow:0 8px 20px -10px var(--ds-role); }