/* Tokens de diseno del CRM Globalita. Extraidos del prototipo (docs/prototipo/Dashboard.dc.html). Fuente unica de color. Regla (manual seccion 9.6): ningun color suelto en el codigo. Todo pasa por estas variables. Uso: . El boton del header cicla claro -> oscuro -> noche y persiste la eleccion en localStorage. */ :root, .tema-claro { --bg: #F2EEE6; --surface: #FAF7F1; --border: #D9D3C8; --text: #2D2D2A; --muted: #5E5A52; --hint: #8A8580; --accent: #0F6E56; --accent-br: #B8CEC5; --accent-light: #D9E9E3; --accent-hover: #0B5A47; --success: #0F6B33; --success-light: #E8F5EB; --error: #B91C1C; --error-light: #FEE2E2; --warning: #9A6B0C; --warning-light: #FEF6E3; --info: #5F6D6B; --info-light: #F1F6F4; --info-br: #CDD8D3; --brand-linkedin: #0C447C; --brand-linkedin-light: #E6F1FB; --brand-linkedin-br: #B5D4F4; --brand-whatsapp: #27500A; --badge-await: #FEF3C7; --badge-await-text: #92400E; --badge-meeting: #D1FAE5; --badge-meeting-text: #065F46; --teal-light: #B8E8D4; --teal-br: #9FCFB8; } .tema-oscuro { --bg: #1a2321; --surface: #242d2a; --border: #3a4844; --text: #e8edea; --muted: #b8c3bf; --hint: #90a09d; --accent: #6fc3b8; --accent-br: #4f8f87; --accent-light: #2d4441; --accent-hover: #83d0c6; --success: #5db366; --success-light: #1a3a22; --error: #f07878; --error-light: #3a1f1f; --warning: #d4a645; --warning-light: #3a3020; --info: #90a09d; --info-light: #2d3735; --info-br: #3a4844; --brand-linkedin: #6BA3E5; --brand-linkedin-light: #1A2F5F; --brand-linkedin-br: #4A7FB3; --brand-whatsapp: #81C995; --badge-await: #664D00; --badge-await-text: #FEF3C7; --badge-meeting: #065F46; --badge-meeting-text: #A7F3D0; --teal-light: #1A3B38; --teal-br: #2d4441; } /* Tema noche: calido, menos contraste, para trabajar de noche. */ .tema-noche { --bg: #191510; --surface: #221d17; --border: #3a322a; --text: #ece4d8; --muted: #c3b7a6; --hint: #9a8e7e; --accent: #e0a45c; --accent-br: #6b563a; --accent-light: #33291d; --accent-hover: #eeb471; --success: #7fbe7f; --success-light: #20301f; --error: #e88b7d; --error-light: #341f1c; --warning: #d9b25f; --warning-light: #332b1b; --info: #a89b89; --info-light: #241f19; --info-br: #3a322a; --brand-linkedin: #8ab4e8; --brand-linkedin-light: #1f2a3d; --brand-linkedin-br: #46587a; --brand-whatsapp: #9ccf9c; --badge-await: #3a2f1a; --badge-await-text: #e8d5a3; --badge-meeting: #20302a; --badge-meeting-text: #a9d8bf; --teal-light: #233029; --teal-br: #33443a; } /* Base heredada del prototipo. */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } @keyframes om-abrir { 0% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes om-pulso { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.35); } } @keyframes om-agendada { 0% { opacity: 0; transform: translateY(-5px) scale(.9); } 55% { opacity: 1; transform: translateY(0) scale(1.06); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes om-agendada-halo { 0% { box-shadow: 0 0 0 0 var(--accent-br); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }