/* AL DIA — shared theme + layout (sidebar nav + main pane). Dark green base with gold accent, same palette as the etiquetas app. */ :root { --bg: #0f1814; --bg-2: #1a2620; --card: #16221c; --card-border: #243329; --accent: #2a5141; --gold: #c9a961; --gold-soft: #d9bc77; --text: #ecefe8; --text-dim: #9aa6a0; --error: #d97362; --success: #6dbf86; --warn: #e6c46c; --radius: 14px; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --sidebar-w: 240px; --sidebar-w-collapsed: 64px; } /* ===== MODO CLARO ===== Activado via — toggle desde el sidebar. Paleta clara con buen contraste. Necesitamos overrides agresivos porque hay MUCHOS inline styles con rgba(0,0,0,*) hardcoded en los HTMLs (inputs, cards, etc) que no respetan las CSS vars. */ body.theme-light { /* Paleta principal — colores OSCUROS para máxima legibilidad sobre crema. */ --bg: #f4efe2; /* crema cálido suave */ --bg-2: #e7dec6; --card: #ffffff; --card-border: #d8cdb0; /* borde cálido visible sobre crema */ --accent: #2c5340; /* verde más oscuro */ --gold: #5c4314; /* dorado MUY oscuro (casi marrón) — máximo contraste sobre blanco */ --gold-soft: #6e5418; /* dorado oscuro para enlaces */ --text: #0f1814; /* casi negro */ --text-dim: #3d4640; /* gris-verde MUY oscuro (era #5a655d, ahora ~30% más oscuro) */ --error: #9b3830; --success: #1f5e34; --warn: #8b5e1c; } /* Ambient: atenuar mucho los efectos decorativos en modo claro */ body.theme-light::before { background-image: radial-gradient(circle at 1px 1px, rgba(139, 106, 31, 0.18) 1px, transparent 1.4px); } body.theme-light::after { background: radial-gradient(circle at 18% 22%, rgba(139, 106, 31, 0.06) 0%, transparent 38%), radial-gradient(circle at 82% 78%, rgba(61, 110, 87, 0.10) 0%, transparent 50%); opacity: 0.5; } body.theme-light .aurora { display: none; } body.theme-light .sparkles { display: none; } /* ===== OVERRIDES AGRESIVOS: defeated inline styles oscuros ===== Muchos inputs, selects, textareas y cards en los HTMLs usan inline style="background: rgba(0,0,0,0.30); ..." que se ven NEGROS sobre crema. Forzamos colores claros con !important. */ body.theme-light input[type="text"], body.theme-light input[type="email"], body.theme-light input[type="password"], body.theme-light input[type="number"], body.theme-light input[type="search"], body.theme-light input[type="tel"], body.theme-light input[type="url"], body.theme-light input:not([type]), body.theme-light select, body.theme-light textarea { background: #ffffff !important; color: var(--text) !important; border-color: var(--card-border) !important; } body.theme-light input::placeholder, body.theme-light textarea::placeholder { color: #6f7872 !important; /* placeholder ~30% más oscuro */ opacity: 1; } body.theme-light input:focus, body.theme-light select:focus, body.theme-light textarea:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(139, 106, 31, 0.15) !important; outline: none; } /* Buttons "ghost" / outline / secondary: forzar texto oscuro y borde visible */ body.theme-light button, body.theme-light .btn-secondary { color: var(--text); } body.theme-light .ghost, body.theme-light .secondary, body.theme-light .aldia-confirm-btn.cancel, body.theme-light .plan-cta:not(.is-current):not(:disabled) { background: #ffffff !important; color: var(--text) !important; border: 1px solid var(--card-border) !important; } body.theme-light .ghost:hover, body.theme-light .secondary:hover, body.theme-light .aldia-confirm-btn.cancel:hover { background: #f4efe2 !important; border-color: var(--gold-soft) !important; } /* Code blocks legibles */ body.theme-light code { background: #f0e8d0 !important; color: var(--text) !important; } /* Cards y wrappers que abusan de rgba(0,0,0,X) en inline style: los pisamos con un background neutro. Truco: attribute selectors. */ body.theme-light [style*="rgba(0,0,0,0.30)"], body.theme-light [style*="rgba(0, 0, 0, 0.30)"], body.theme-light [style*="rgba(0,0,0,0.40)"], body.theme-light [style*="rgba(0, 0, 0, 0.40)"] { background: #ffffff !important; color: var(--text) !important; } body.theme-light [style*="rgba(0,0,0,0.20)"], body.theme-light [style*="rgba(0, 0, 0, 0.20)"], body.theme-light [style*="rgba(0,0,0,0.28)"] { background: #f9f5e8 !important; } /* Enlaces dorados: en modo claro usan gold MUY oscuro (casi marrón) para máxima legibilidad sobre fondo crema/blanco. */ body.theme-light a { color: var(--gold) !important; } body.theme-light a:hover { color: #3d2c0c !important; /* aún más oscuro en hover */ text-decoration: underline; } /* Headings y elementos con --gold como color heredan el oscuro automático. Pero por las dudas, forzamos algunos selectores comunes que usan dorado como color de texto en lugar de fondo. */ body.theme-light h1, body.theme-light h2, body.theme-light h3, body.theme-light h4, body.theme-light h5, body.theme-light h6 { color: var(--text) !important; } body.theme-light .lead, body.theme-light p { color: var(--text) !important; } body.theme-light .text-dim, body.theme-light .info-row .lbl { color: var(--text-dim) !important; } /* Eyebrow / subtítulos / hints chiquitos: text-dim sobre fondo claro queda visible sin ser intenso. */ body.theme-light [class*="eyebrow"], body.theme-light .sec-sub, body.theme-light .tagline, body.theme-light .micro { color: var(--text-dim) !important; } /* Sidebar en modo claro: fondo crema suave, no transparente sobre nada */ body.theme-light .sidebar { background: #ede6d2 !important; border-right: 1px solid var(--card-border) !important; } body.theme-light .sidebar nav a { color: var(--text); } body.theme-light .sidebar nav a:hover { background: rgba(139, 106, 31, 0.08) !important; } body.theme-light .sidebar nav a.active { background: rgba(139, 106, 31, 0.14) !important; color: var(--gold) !important; } body.theme-light .sidebar .quota-widget { background: #f9f5e8 !important; border-color: var(--card-border) !important; } body.theme-light .sidebar .quota-widget-bar { background: rgba(0, 0, 0, 0.06) !important; } body.theme-light .sidebar .user-block .user-name:hover { background: rgba(139, 106, 31, 0.10) !important; color: var(--gold) !important; } /* Cards/info-cards: que tengan fondo blanco sólido (no transparente) */ body.theme-light .card, body.theme-light .info-card, body.theme-light .dropcard, body.theme-light .auth-card, body.theme-light details.section, body.theme-light .plan-card, body.theme-light .benefit-card, body.theme-light .review-card, body.theme-light .faq-item { background: #ffffff !important; border-color: var(--card-border) !important; } body.theme-light details.section .body code, body.theme-light p code { background: #f0e8d0 !important; color: var(--text) !important; } /* Tablas con header dim + filas con borde claro */ body.theme-light table th { color: var(--text-dim) !important; border-bottom: 1px solid var(--card-border) !important; } body.theme-light table td { border-bottom: 1px solid #ece4cf !important; } /* Modal de confirmación con backdrop blanco semi en modo claro */ body.theme-light .aldia-confirm-overlay { background: rgba(255, 255, 255, 0.70) !important; } body.theme-light .aldia-confirm-card { background: #ffffff !important; border-color: var(--card-border) !important; box-shadow: 0 24px 60px rgba(80, 60, 20, 0.18) !important; } /* Dropzones (drag-and-drop) — fondo claro y borde dashed visible */ body.theme-light .dropzone { background: #f9f5e8 !important; border-color: var(--accent) !important; } body.theme-light .dropzone:hover, body.theme-light .dropzone.drag { background: rgba(139, 106, 31, 0.06) !important; border-color: var(--gold) !important; } /* Labels y hints en formularios: forzar contraste */ body.theme-light .lbl, body.theme-light .hint { color: var(--text-dim) !important; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.55; -webkit-font-smoothing: antialiased; position: relative; overflow-x: hidden; } /* Dotted grid that fades toward the edges */ body::before { content: ""; position: fixed; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(201, 169, 97, 0.10) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 25%, transparent 100%); mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 25%, transparent 100%); pointer-events: none; z-index: 0; } /* Drifting ambient orbs (gold + green) */ body::after { content: ""; position: fixed; inset: -10%; background: radial-gradient(circle at 18% 22%, rgba(201, 169, 97, 0.10) 0%, transparent 38%), radial-gradient(circle at 82% 78%, rgba(42, 81, 65, 0.40) 0%, transparent 50%), radial-gradient(circle at 70% 14%, rgba(201, 169, 97, 0.06) 0%, transparent 32%), radial-gradient(circle at 12% 80%, rgba(42, 81, 65, 0.20) 0%, transparent 35%); pointer-events: none; z-index: 0; animation: ambient-drift 28s ease-in-out infinite alternate; } @keyframes ambient-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(40px, -22px, 0) scale(1.08); } } /* Aurora: slow-moving gold ribbon */ .aurora { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .aurora::before { content: ""; position: absolute; top: -30%; left: -20%; width: 140%; height: 60%; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(201, 169, 97, 0.10) 0%, transparent 70%); filter: blur(40px); animation: aurora-sweep 22s linear infinite; transform: rotate(-8deg); } @keyframes aurora-sweep { 0% { transform: rotate(-8deg) translateX(-30%); opacity: 0.0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: rotate(-8deg) translateX(40%); opacity: 0.0; } } /* Floating sparkles (small gold dots that twinkle) */ .sparkles { position: fixed; inset: 0; pointer-events: none; z-index: 0; } .sparkles::before, .sparkles::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 12% 18%, rgba(201, 169, 97, 0.7), transparent), radial-gradient(1px 1px at 28% 70%, rgba(201, 169, 97, 0.6), transparent), radial-gradient(1.5px 1.5px at 48% 32%, rgba(201, 169, 97, 0.5), transparent), radial-gradient(1px 1px at 65% 85%, rgba(201, 169, 97, 0.7), transparent), radial-gradient(2px 2px at 78% 22%, rgba(201, 169, 97, 0.6), transparent), radial-gradient(1px 1px at 90% 60%, rgba(201, 169, 97, 0.5), transparent), radial-gradient(1.5px 1.5px at 35% 92%, rgba(201, 169, 97, 0.6), transparent), radial-gradient(1px 1px at 55% 12%, rgba(201, 169, 97, 0.5), transparent), radial-gradient(1.5px 1.5px at 8% 50%, rgba(201, 169, 97, 0.6), transparent), radial-gradient(1px 1px at 95% 38%, rgba(201, 169, 97, 0.5), transparent); animation: sparkle-twinkle 5s ease-in-out infinite; } .sparkles::after { background-image: radial-gradient(1px 1px at 22% 8%, rgba(201, 169, 97, 0.5), transparent), radial-gradient(1.5px 1.5px at 42% 58%, rgba(201, 169, 97, 0.6), transparent), radial-gradient(1px 1px at 72% 68%, rgba(201, 169, 97, 0.5), transparent), radial-gradient(2px 2px at 88% 90%, rgba(201, 169, 97, 0.7), transparent), radial-gradient(1px 1px at 5% 30%, rgba(201, 169, 97, 0.5), transparent), radial-gradient(1px 1px at 60% 45%, rgba(201, 169, 97, 0.6), transparent); animation-delay: -2.5s; } @keyframes sparkle-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.85; } } .app { position: relative; z-index: 1; } a { color: var(--gold); } /* ---------- Layout ---------- */ .app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; transition: grid-template-columns .18s ease; } .app.sidebar-collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; } .sidebar { background: rgba(0, 0, 0, 0.28); border-right: 1px solid var(--card-border); display: flex; flex-direction: column; padding: 18px 14px; position: sticky; top: 0; height: 100vh; overflow: hidden; } .sidebar .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: 0.12em; color: var(--gold); margin-bottom: 28px; padding: 0 6px; white-space: nowrap; transition: gap .18s ease, padding .18s ease, justify-content .18s ease; } .sidebar .brand .dot { width: 10px; height: 10px; background: var(--gold); border-radius: 50%; flex-shrink: 0; animation: brand-pulse 2.6s ease-in-out infinite; } @keyframes brand-pulse { 0%, 100% { box-shadow: 0 0 8px rgba(201, 169, 97, 0.55); } 50% { box-shadow: 0 0 18px rgba(201, 169, 97, 0.95), 0 0 28px rgba(201, 169, 97, 0.30); } } /* Label colapsable: no usamos solo opacity (deja huella en el layout). Animamos max-width para que el texto se "doble" hacia el icono y la transición sea continua con el cambio de ancho del sidebar. */ .sidebar .brand .label { max-width: 200px; overflow: hidden; display: inline-block; transition: max-width .18s ease, opacity .15s ease; } .app.sidebar-collapsed .sidebar .brand { padding: 0; gap: 0; justify-content: center; } .app.sidebar-collapsed .brand .label { max-width: 0; opacity: 0; pointer-events: none; } /* Theme toggle button (☀️/🌙) en el brand del sidebar */ .sidebar .brand .theme-toggle { margin-left: auto; background: transparent; border: 1px solid var(--card-border); border-radius: 7px; padding: 5px 8px; cursor: pointer; font-size: 14px; line-height: 1; color: var(--text); transition: background .15s, border-color .15s, transform .12s; } .sidebar .brand .theme-toggle:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(201, 169, 97, 0.40); transform: translateY(-1px); } /* Mostrar el icono según el modo activo */ .theme-toggle .theme-icon-light { display: none; } body.theme-light .theme-toggle .theme-icon-dark { display: none; } body.theme-light .theme-toggle .theme-icon-light { display: inline; } .app.sidebar-collapsed .sidebar .brand .theme-toggle { display: none; } .sidebar nav { display: flex; flex-direction: column; gap: 4px; } .sidebar nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--text-dim); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .12s, color .12s, gap .18s ease, padding .18s ease; } .sidebar nav a:hover { background: rgba(255,255,255,0.04); color: var(--text); } .sidebar nav a.active { background: rgba(201, 169, 97, 0.10); color: var(--gold); } .sidebar nav a .ico { font-size: 18px; flex-shrink: 0; width: 22px; text-align: center; } .sidebar nav a .label { max-width: 200px; overflow: hidden; display: inline-block; transition: max-width .18s ease, opacity .15s ease; } .app.sidebar-collapsed .sidebar nav a { gap: 0; } .app.sidebar-collapsed .sidebar nav a .label { max-width: 0; opacity: 0; pointer-events: none; } .sidebar .as-user-block { /* Sin márgenes laterales: el ancho lo da el padding 14px del .sidebar, igual que los items de nav para que queden alineados verticalmente. */ margin: 16px 0 6px; padding: 10px 12px; border: 1px solid rgba(201, 169, 97, 0.30); border-radius: 8px; background: rgba(201, 169, 97, 0.05); display: flex; flex-direction: column; gap: 6px; max-height: 200px; opacity: 1; overflow: hidden; transition: max-height .18s ease, opacity .15s ease, margin .18s ease, padding .18s ease, border-width .18s ease; } .sidebar .as-user-block .as-user-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar .as-user-block select { background: rgba(0,0,0,0.30); border: 1px solid var(--card-border); color: var(--gold); border-radius: 6px; padding: 9px 12px; /* más padding vertical para no cortar descenders */ font-size: 13px; font-weight: 600; line-height: 1.3; /* espacio interno suficiente */ width: 100%; cursor: pointer; appearance: none; /* removemos el caret nativo, usamos el custom */ -webkit-appearance: none; -moz-appearance: none; /* Caret custom dorado en vez del feo del browser */ background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; /* espacio para el caret */ } .sidebar .as-user-block select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.20); } .app.sidebar-collapsed .sidebar .as-user-block { max-height: 0; opacity: 0; margin: 0; padding: 0 12px; border-width: 0; pointer-events: none; } .as-user-banner { background: linear-gradient(135deg, rgba(201, 169, 97, 0.18), rgba(201, 169, 97, 0.06)); border: 1px solid rgba(201, 169, 97, 0.40); border-radius: 10px; color: var(--gold-soft); padding: 12px 18px; margin-bottom: 18px; font-size: 13.5px; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-weight: 500; } .as-user-banner b { color: var(--gold); font-weight: 700; } .as-user-banner button { background: transparent; border: 1px solid rgba(201, 169, 97, 0.45); color: var(--gold); border-radius: 6px; padding: 6px 12px; font-size: 12px; cursor: pointer; transition: background .12s; } .as-user-banner button:hover { background: rgba(201, 169, 97, 0.10); } .sidebar .spacer { flex: 1; } /* Widget de cuota mensual de etiquetas (visible solo para usuarios con quota — ocultado para admin y grandfathered). Click → /cuenta */ .sidebar .quota-widget { margin: 14px 0 0; padding: 10px 12px; background: rgba(0, 0, 0, 0.30); border: 1px solid var(--card-border); border-radius: 10px; transition: border-color .2s, background .2s; } .sidebar .quota-widget:hover { border-color: rgba(201, 169, 97, 0.30); background: rgba(0, 0, 0, 0.40); } .sidebar .quota-widget-link { display: block; text-decoration: none; color: inherit; } .sidebar .quota-widget-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); font-weight: 600; margin-bottom: 6px; } .sidebar .quota-widget-bar { height: 5px; background: rgba(255, 255, 255, 0.06); border-radius: 3px; overflow: hidden; margin-bottom: 6px; } .sidebar .quota-widget-fill { height: 100%; border-radius: 3px; transition: width .35s cubic-bezier(0.4, 0, 0.2, 1); } .sidebar .quota-widget-nums { font-family: var(--mono); font-size: 12px; color: var(--text); } .sidebar .quota-widget-nums b { font-weight: 700; } .app.sidebar-collapsed .sidebar .quota-widget { /* En sidebar colapsado: solo mostrar la barra, sin label ni números */ padding: 8px 6px; } .app.sidebar-collapsed .sidebar .quota-widget-label, .app.sidebar-collapsed .sidebar .quota-widget-nums { display: none; } /* Soporte WhatsApp link en el sidebar (justo encima del user-block) */ .sidebar .support-link { display: flex; align-items: center; gap: 12px; padding: 9px 10px; margin: 0 0 8px; border-radius: 8px; color: var(--text-dim); text-decoration: none; font-size: 12.5px; font-weight: 500; background: rgba(37, 211, 102, 0.06); /* verde WhatsApp suave */ border: 1px solid rgba(37, 211, 102, 0.18); transition: background .15s ease, color .15s ease, border-color .15s ease; } .sidebar .support-link:hover { background: rgba(37, 211, 102, 0.12); border-color: rgba(37, 211, 102, 0.35); color: var(--text); } .sidebar .support-link .ico { font-size: 14px; flex-shrink: 0; width: 22px; text-align: center; } .sidebar .support-link .label { max-width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: max-width .18s ease, opacity .15s ease; } .app.sidebar-collapsed .sidebar .support-link { padding-left: 10px; padding-right: 10px; gap: 0; } .app.sidebar-collapsed .sidebar .support-link .label { max-width: 0; opacity: 0; pointer-events: none; } .sidebar .user-block { display: flex; flex-direction: column; gap: 6px; padding: 10px 8px; margin-bottom: 10px; border-top: 1px solid var(--card-border); padding-top: 14px; } .sidebar .user-block .user-name { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; padding: 8px 10px; border-radius: 8px; text-decoration: none; cursor: pointer; transition: gap .18s ease, padding .18s ease, background .15s ease, color .15s ease; } .sidebar .user-block .user-name:hover { background: rgba(201, 169, 97, 0.10); color: var(--gold-soft); } .sidebar .user-block .user-name:hover .user-icon { filter: brightness(1.15); } .sidebar .user-block .user-name .user-icon { font-size: 16px; flex-shrink: 0; width: 22px; text-align: center; } .sidebar .user-block .user-name .label { max-width: 180px; overflow: hidden; text-overflow: ellipsis; display: inline-block; transition: max-width .18s ease, opacity .15s ease; } .app.sidebar-collapsed .sidebar .user-block .user-name { gap: 0; } .app.sidebar-collapsed .sidebar .user-block .user-name .label { max-width: 0; opacity: 0; pointer-events: none; } .sidebar .logout-btn { display: flex; align-items: center; gap: 12px; background: transparent; border: 1px solid var(--card-border); border-radius: 8px; color: var(--text-dim); font-size: 12.5px; padding: 8px 12px; cursor: pointer; text-align: left; width: 100%; transition: color .12s, border-color .12s, background .12s, gap .18s ease, padding .18s ease; } .sidebar .logout-btn:hover { color: var(--error); border-color: rgba(217, 115, 98, 0.40); background: rgba(217, 115, 98, 0.06); } .sidebar .logout-btn .ico { font-size: 14px; flex-shrink: 0; width: 22px; text-align: center; } .sidebar .logout-btn .label { max-width: 180px; overflow: hidden; display: inline-block; transition: max-width .18s ease, opacity .15s ease; } .app.sidebar-collapsed .sidebar .logout-btn { gap: 0; } .app.sidebar-collapsed .sidebar .logout-btn .label { max-width: 0; opacity: 0; pointer-events: none; } /* Estado colapsado: todos los items se centran horizontalmente y se reduce el padding lateral para que no haya overflow ni descentrado. Las transiciones se declaran en cada elemento (no acá) para que estén siempre activas. */ .app.sidebar-collapsed .sidebar nav a { padding-left: 0; padding-right: 0; justify-content: center; } .app.sidebar-collapsed .sidebar .user-block { padding-left: 0; padding-right: 0; } .app.sidebar-collapsed .sidebar .user-name { padding-left: 0; padding-right: 0; justify-content: center; } .app.sidebar-collapsed .sidebar .logout-btn { padding-left: 0; padding-right: 0; justify-content: center; } /* user-block container también necesita transición en padding */ .sidebar .user-block { transition: padding .18s ease; } .sidebar-toggle { background: transparent; color: var(--text-dim); border: 1px solid var(--card-border); border-radius: 8px; padding: 8px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; align-self: flex-end; transition: color .12s, border-color .12s, align-self .18s ease; } .sidebar-toggle:hover { color: var(--text); border-color: var(--accent); } .sidebar-toggle .arrow { display: inline-block; transition: transform .25s ease; } .app.sidebar-collapsed .sidebar-toggle { align-self: center; } .app.sidebar-collapsed .sidebar-toggle .arrow { transform: rotate(180deg); } /* ---------- Main pane ---------- */ /* El main ocupa toda la columna disponible al lado del sidebar (grid 1fr). Cap a 1600px para que en monitores 4K+ no se estire demasiado y se mantenga legible — y margin auto para centrarlo en ese caso. */ .main { padding: 36px 36px 80px; max-width: 1600px; width: 100%; margin: 0 auto; box-sizing: border-box; } @media (max-width: 1100px) { .main { padding: 32px 28px 70px; } } @media (max-width: 720px) { .main { padding: 24px 18px 60px; } .app, .app.sidebar-collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; } .sidebar .brand .label, .sidebar nav a .label { opacity: 0; pointer-events: none; } } header.page-header { margin-bottom: 24px; position: relative; padding-top: 8px; animation: header-in .4s ease-out both; } header.page-header::before { content: ""; position: absolute; top: 0; left: 0; width: 38px; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); border-radius: 2px; } header.page-header h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; background: linear-gradient(180deg, var(--text) 0%, rgba(236, 239, 232, 0.85) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } header.page-header p.lead { font-size: 14.5px; color: var(--text-dim); margin: 0; max-width: 760px; } @keyframes header-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Cards & generic ---------- */ .card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 22px 22px 22px 24px; margin-bottom: 18px; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; animation: card-in .35s ease-out backwards; position: relative; overflow: hidden; } .card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: .55; } .card.section-dispatch::before { background: var(--gold); } .card.section-stats::before { background: #6dbf86; } /* green */ .card.section-labels::before { background: #e6c46c; } /* amber */ .card.section-avg::before { background: #7fb3d5; } /* soft blue */ .card.section-stock::before { background: var(--gold); } .card.section-learned::before { background: #b48cd6; } /* violet */ .card.section-history::before { background: #9aa6a0; } /* dim */ .card.section-dispatch h2 { color: var(--gold); } .card.section-stats h2 { color: #6dbf86; } .card.section-labels h2 { color: #e6c46c; } .card.section-avg h2 { color: #7fb3d5; } .card.section-stock h2 { color: var(--gold); } .card.section-learned h2 { color: #b48cd6; } .card.section-history h2 { color: #9aa6a0; } .card:hover { border-color: rgba(201, 169, 97, 0.18); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.20), 0 0 0 1px rgba(201, 169, 97, 0.04); } .main > .card:nth-of-type(1) { animation-delay: .04s; } .main > .card:nth-of-type(2) { animation-delay: .10s; } .main > .card:nth-of-type(3) { animation-delay: .16s; } .main > .card:nth-of-type(4) { animation-delay: .22s; } .main > .card:nth-of-type(5) { animation-delay: .28s; } @keyframes card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .card h2 { font-size: 14px; font-weight: 600; color: var(--text-dim); letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 16px; } .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } input[type=text], input[type=number], input[type=password], select { background: rgba(0,0,0,0.25); color: var(--text); border: 1px solid var(--card-border); border-radius: 8px; padding: 9px 12px; font: inherit; font-size: 14px; } input:focus, select:focus { outline: none; border-color: var(--accent); } input[type=number] { width: 100px; text-align: right; font-variant-numeric: tabular-nums; } select { min-width: 200px; } button { background: rgba(255,255,255,0.04); color: var(--text); border: 1px solid var(--card-border); border-radius: 8px; padding: 9px 14px; font: inherit; font-size: 14px; cursor: pointer; transition: background .12s, border-color .12s; } button:hover { background: rgba(255,255,255,0.08); border-color: var(--accent); } button.primary { background: var(--gold); color: #1a1208; border-color: var(--gold); font-weight: 700; } button.primary:hover { background: var(--gold-soft); } button.ghost { background: transparent; color: var(--text-dim); } button.ghost:hover { color: var(--text); } button.danger { background: transparent; color: var(--error); border-color: rgba(217, 115, 98, 0.35); } button.danger:hover { background: rgba(217, 115, 98, 0.1); border-color: var(--error); color: var(--error); } button:disabled { opacity: .45; cursor: not-allowed; } table { width: 100%; border-collapse: collapse; font-size: 13.5px; } th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); } th { color: var(--text-dim); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; } td.qty { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; } td.actions { text-align: right; white-space: nowrap; } .empty { text-align: center; padding: 28px 0; color: var(--text-dim); font-size: 13px; } .badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .badge.ok { background: rgba(109, 191, 134, 0.14); color: var(--success); } .badge.low { background: rgba(230, 196, 108, 0.14); color: var(--warn); } .badge.neg { background: rgba(217, 115, 98, 0.18); color: var(--error); } .cat-pill { display: inline-block; background: rgba(201, 169, 97, 0.10); color: var(--gold); padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; margin-left: 6px; } .mult-pill { display: inline-block; background: rgba(230, 196, 108, 0.18); color: var(--warn); padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; margin-left: 4px; } .toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--card); color: var(--text); border: 1px solid var(--card-border); padding: 11px 18px; border-radius: 8px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); opacity: 0; transition: opacity .18s, transform .18s; pointer-events: none; z-index: 100; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); } /* ---------- Modal de confirmación (window.aldiaConfirm) ---------- */ .aldia-confirm-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; transition: opacity .18s ease; } .aldia-confirm-overlay.visible { opacity: 1; } .aldia-confirm-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; padding: 28px 28px 22px; width: calc(100% - 40px); max-width: 420px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(201, 169, 97, 0.05); transform: translateY(8px) scale(0.98); transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1); } .aldia-confirm-overlay.visible .aldia-confirm-card { transform: translateY(0) scale(1); } .aldia-confirm-card h3 { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .aldia-confirm-card p { margin: 0 0 22px; font-size: 13.5px; color: var(--text-dim); line-height: 1.55; } .aldia-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; } .aldia-confirm-btn { appearance: none; border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.04); color: var(--text); padding: 10px 18px; font-size: 13.5px; font-weight: 600; border-radius: 9px; cursor: pointer; transition: background .15s, border-color .15s, transform .12s, box-shadow .15s; font-family: inherit; } .aldia-confirm-btn:hover { background: rgba(255, 255, 255, 0.08); } .aldia-confirm-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .aldia-confirm-btn.cancel { /* default style — neutral */ } .aldia-confirm-btn.primary { background: linear-gradient(180deg, var(--gold) 0%, var(--gold-soft) 100%); color: #1a1408; border-color: transparent; box-shadow: 0 6px 16px rgba(201, 169, 97, 0.25); } .aldia-confirm-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(201, 169, 97, 0.35); } .aldia-confirm-btn.danger { background: linear-gradient(180deg, rgba(217, 115, 98, 0.95) 0%, rgba(184, 92, 78, 0.95) 100%); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(217, 115, 98, 0.25); } .aldia-confirm-btn.danger:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(217, 115, 98, 0.40); } @media (max-width: 480px) { .aldia-confirm-card { padding: 22px 20px 18px; } .aldia-confirm-actions { flex-direction: column-reverse; } .aldia-confirm-btn { width: 100%; padding: 12px 16px; } } /* ===== Onboarding FAB GLOBAL (vive en aldia.js, en todas las páginas) ===== Botón flotante en esquina inferior derecha. Click → popup con la lista de hitos. NO se puede ocultar manualmente — solo desaparece cuando el user completa los 4 pasos. */ #onboarding-fab { position: fixed; bottom: 22px; right: 22px; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%); color: #1a1408; border: none; border-radius: 999px; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 12px 28px rgba(201, 169, 97, 0.35), 0 0 0 4px rgba(201, 169, 97, 0.10); transition: transform .18s ease, box-shadow .22s ease; font-family: inherit; } #onboarding-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(201, 169, 97, 0.45), 0 0 0 6px rgba(201, 169, 97, 0.15); } #onboarding-fab .fab-icon { font-size: 18px; line-height: 1; } #onboarding-fab .fab-text { font-weight: 700; } #onboarding-fab .fab-counter { font-family: var(--mono); font-size: 12px; background: rgba(26, 20, 8, 0.20); padding: 3px 9px; border-radius: 999px; font-weight: 800; } #onboarding-popup { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); align-items: flex-end; justify-content: flex-end; padding: 22px; opacity: 0; transition: opacity .18s ease; } #onboarding-popup.visible { opacity: 1; } .onboarding-popup-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; padding: 22px 22px 18px; width: 100%; max-width: 420px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); transform: translateY(20px); opacity: 0; transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1), opacity .18s ease; } #onboarding-popup.visible .onboarding-popup-card { transform: translateY(0); opacity: 1; } .onboarding-popup-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; } .onboarding-popup-header h3 { margin: 0 0 4px; font-size: 17px; color: var(--gold); } .onboarding-popup-header p { margin: 0; font-size: 12.5px; color: var(--text-dim); } #onboarding-popup-close { background: transparent; border: none; color: var(--text-dim); font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; } #onboarding-popup-close:hover { color: var(--text); } #onboarding-steps { display: flex; flex-direction: column; gap: 8px; } .onboarding-step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.20); } .onboarding-step-check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--card-border); background: rgba(0, 0, 0, 0.30); display: flex; align-items: center; justify-content: center; color: #1a1408; font-weight: 800; font-size: 12px; flex-shrink: 0; transition: background .2s, border-color .2s; } .onboarding-step.done .onboarding-step-check { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); border-color: transparent; } .onboarding-step-label { flex: 1; font-size: 13px; color: var(--text); } .onboarding-step.done .onboarding-step-label { color: var(--text-dim); text-decoration: line-through; text-decoration-color: rgba(201, 169, 97, 0.40); } .onboarding-step-link { font-size: 12px; color: var(--gold-soft); text-decoration: none; font-weight: 600; white-space: nowrap; } .onboarding-step-link:hover { color: var(--gold); } .onboarding-step-badge { color: var(--success); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; } .onboarding-popup-progress { margin-top: 14px; height: 5px; background: rgba(255, 255, 255, 0.06); border-radius: 3px; overflow: hidden; } .onboarding-popup-progress > div { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), #E8CB7E); transition: width .4s cubic-bezier(0.4, 0, 0.2, 1); } /* Modo claro: ajustes para que el popup se vea bien sobre crema */ body.theme-light #onboarding-popup { background: rgba(255, 255, 255, 0.55) !important; } body.theme-light .onboarding-step { background: #f9f5e8 !important; } body.theme-light .onboarding-step-check { background: #ffffff !important; } body.theme-light .onboarding-popup-progress { background: rgba(0, 0, 0, 0.06) !important; } @media (max-width: 600px) { #onboarding-fab { bottom: 16px; right: 16px; padding: 10px 14px; font-size: 12.5px; } #onboarding-popup { align-items: stretch; justify-content: center; padding: 16px; } .onboarding-popup-card { max-width: none; align-self: flex-end; } }