/* ========================================================== CRM - MODOS DE DISEÑO Cuatro variantes de FORMA y MOVIMIENTO, no de color. El color de acento, el tema claro/oscuro y el brillo son del panel de Apariencia y no se tocan aca — cambiar de modo no debe pisarle a nadie el acento que eligió. Lo que cambia entre modos: radios de borde, sombras, grosor de borde, curvas y duraciones de transición, y cuanto se mueve algo al pasar el mouse. Es la diferencia entre "una suite con personalidad" y "el mismo layout con otro botón de más". Igual que data-tema y data-fondo (ver js/apariencia.js), esto es un atributo en : data-modo="suave|nitido|elevado|compacto". Sin atributo = Clásico, el diseño de siempre, cero reglas nuevas. .metric-card son las tarjetas KPI del dashboard, .lead-card las fichas de lead en vista tarjeta: los dos nombres reales que usa el CRM (comprobado contra el DOM, no supuesto). Va despues de claro.css a proposito: varias reglas de legibilidad ya usan !important (border-radius del modal, por ejemplo), y sin iguales armas acá esas ganan siempre sin importar el orden de los . No es prolijo, pero es el mismo patrón que ya usa este proyecto para pisar temas. ========================================================== */ /* --- SUAVE: redondeado y amable -------------------------------- Radios grandes, sombras difusas, todo levanta un poco al pasar el mouse. Para quien quiere que el CRM se sienta menos "panel de control" y mas "app prolija". */ html[data-modo="suave"] .btn, html[data-modo="suave"] .btn-secondary, html[data-modo="suave"] .btn-primary-3d, html[data-modo="suave"] .metric-card, html[data-modo="suave"] .lead-card, html[data-modo="suave"] .campana-seccion, html[data-modo="suave"] .campana-texto { border-radius: 20px !important; transition: transform var(--d-base, 220ms) var(--c-out, ease-out), box-shadow var(--d-base, 220ms) var(--c-out, ease-out) !important; } html[data-modo="suave"] .modal-card { border-radius: 28px !important; } html[data-modo="suave"] input[type="text"], html[data-modo="suave"] input[type="email"], html[data-modo="suave"] input[type="password"], html[data-modo="suave"] input[type="number"], html[data-modo="suave"] select, html[data-modo="suave"] textarea { border-radius: 14px !important; } html[data-modo="suave"] .btn:hover, html[data-modo="suave"] .btn-secondary:hover, html[data-modo="suave"] .btn-primary-3d:hover { transform: translateY(-2px); } html[data-modo="suave"] .metric-card:hover, html[data-modo="suave"] .lead-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.35); } /* --- NITIDO: afilado y directo ----------------------------------- Esquinas casi rectas, bordes marcados en vez de sombras, sin animaciones de sobra. Para quien quiere velocidad visual: nada se mueve que no tenga que moverse. */ html[data-modo="nitido"] .btn, html[data-modo="nitido"] .btn-secondary, html[data-modo="nitido"] .btn-primary-3d, html[data-modo="nitido"] .metric-card, html[data-modo="nitido"] .lead-card, html[data-modo="nitido"] .modal-card, html[data-modo="nitido"] .glass-panel, html[data-modo="nitido"] .campana-seccion, html[data-modo="nitido"] .campana-texto { border-radius: 4px !important; box-shadow: none !important; border: 1.5px solid var(--border-color) !important; transition: border-color var(--d-instant, 80ms) linear, background var(--d-instant, 80ms) linear !important; } html[data-modo="nitido"] input[type="text"], html[data-modo="nitido"] input[type="email"], html[data-modo="nitido"] input[type="password"], html[data-modo="nitido"] input[type="number"], html[data-modo="nitido"] select, html[data-modo="nitido"] textarea { border-radius: 4px !important; } html[data-modo="nitido"] .metric-card:hover, html[data-modo="nitido"] .lead-card:hover, html[data-modo="nitido"] .btn:hover, html[data-modo="nitido"] .btn-secondary:hover { transform: none !important; } /* --- ELEVADO: con profundidad ------------------------------------- Sombras marcadas, las tarjetas "flotan" sobre el fondo, el modal entra con mas presencia. Para pantallas grandes donde la profundidad se aprecia y no molesta. */ html[data-modo="elevado"] .metric-card, html[data-modo="elevado"] .lead-card, html[data-modo="elevado"] .campana-seccion, html[data-modo="elevado"] .campana-texto { border-radius: 16px !important; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.55) !important; border-color: transparent !important; transition: transform var(--d-base, 220ms) var(--c-out, ease-out), box-shadow var(--d-base, 220ms) var(--c-out, ease-out) !important; } html[data-modo="elevado"] .metric-card:hover, html[data-modo="elevado"] .lead-card:hover, html[data-modo="elevado"] .campana-texto:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.6) !important; } html[data-modo="elevado"] .modal-card { border-radius: 24px !important; box-shadow: 0 30px 70px -12px rgba(0, 0, 0, 0.7), 0 0 50px var(--accent-glow, transparent) !important; } html[data-modo="elevado"] .glass-panel { backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } html[data-modo="elevado"] .btn-primary-3d { box-shadow: 0 10px 24px -8px rgba(var(--acento-rgb), 0.55) !important; } /* --- COMPACTO: denso y directo ------------------------------------- Menos aire entre los elementos, radios chicos, transiciones cortas. Para quien mueve mucho volumen por pantalla — la cartera entera, no una tarjeta a la vez — y prefiere ver mas de un vistazo antes que espacio decorativo. */ html[data-modo="compacto"] .btn, html[data-modo="compacto"] .btn-secondary { padding-top: 6px !important; padding-bottom: 6px !important; border-radius: 8px !important; } html[data-modo="compacto"] .metric-card, html[data-modo="compacto"] .lead-card { padding: 10px 12px !important; border-radius: 8px !important; } html[data-modo="compacto"] .campana-seccion { padding: 12px 14px !important; border-radius: 10px !important; } html[data-modo="compacto"] .modal-card { border-radius: 12px !important; } html[data-modo="compacto"] .metric-card:hover, html[data-modo="compacto"] .lead-card:hover, html[data-modo="compacto"] .btn:hover, html[data-modo="compacto"] .btn-secondary:hover { transform: none !important; transition: background var(--d-instant, 80ms) linear !important; }