/* ============================================================================= dt_tokens.css — Sistema de diseño unificado de DianaTool. Se carga el ÚLTIMO en (después de los CSS de página) para ganar a los estilos legacy sin tocar 15 ficheros. Regla de marca: UNA fuente (Inter), UN radio de botón, UN color de texto. (Naranja = acento puntual: no va aquí.) Ver GUIA_COLOR_MARCA.md. ============================================================================= */ :root{ --dt-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Escala de radios CANÓNICA (single source of truth). Migración incremental: los componentes nuevos usan estos tokens; los legacy se van pasando a ellos. Nada de radios fuera de esta escala (hoy conviven 9/10/12/13/30px sueltos). */ --dt-radius-sm: 8px; /* inputs, chips pequeños */ --dt-radius-btn: 11px; /* CANON: botones y tarjetas */ --dt-radius-md: 11px; /* alias semántico de --dt-radius-btn */ --dt-radius-lg: 16px; /* modales y paneles grandes */ --dt-radius-pill: 999px; /* pastillas / avatares */ --dt-text: #16323c; --dt-text-muted: #5f726d; } /* Fix concreto (QA #8): el control "+N más" del calendario salía a 0px (radio por defecto de la librería). Se normaliza a la escala. dt_tokens.css carga el último, así que gana al CSS de la librería sin tocar sus ficheros. */ .fc .fc-daygrid-more-link, .fc-daygrid-more-link, a.fc-more-link, .fc-more-link, .fc-more{ border-radius: var(--dt-radius-sm) !important; } /* QW1 · Inter en TODA la app: mata el Montserrat legacy y el fallback Arial de los botones. Cubre controles y librerías de terceros (Bootstrap, FullCalendar). NO usamos '*' para no tocar las fuentes de iconos. */ body, button, input, select, textarea, optgroup, .btn, .button, .fc, .fc button, .fc a, .modal, .modal-content, .card, .form-control, .dropzone{ font-family: var(--dt-font) !important; } /* Salvaguarda: los iconos conservan SIEMPRE su propia fuente (no heredan Inter). */ .material-symbols-outlined{ font-family: 'Material Symbols Outlined' !important; } .material-symbols-rounded{ font-family: 'Material Symbols Rounded' !important; } .material-symbols-sharp{ font-family: 'Material Symbols Sharp' !important; } /* QW2 · Radio de botón único (unifica el 8px legacy y el 11px moderno). Con !important para ganar a selectores legacy más específicos (finanzas, briefing). NO incluye .toggle-filter-button del calendario (control segmentado que va a 0px a propósito). */ .btn, .button, button.btn, .aa-btn, .btn-clear-all, .filter-btn, .btn-primary, .primary-button, .outline-button, .gradient-button, .danger-button{ border-radius: var(--dt-radius-btn) !important; } /* QW3 · UN único botón primario de marca: degradado cian→verde + texto blanco. Colapsa los 3-4 estilos previos (Bootstrap azul, cian plano #00acd0, teal…). El rojo #dc3545 NO se toca: queda reservado para acciones destructivas. */ .btn-primary, .btn.btn-primary, .primary-button, .button.primary-button, .gradient-button, .aa-primary, .btn-crear{ background: linear-gradient(135deg, #00ACD0, #59D49A) !important; color: #fff !important; border: none !important; } .btn-primary:hover, .btn.btn-primary:hover, .primary-button:hover, .button.primary-button:hover, .gradient-button:hover, .aa-primary:hover, .btn-crear:hover{ filter: brightness(1.05); color: #fff !important; } /* QW4 · Color de texto principal AUTORITATIVO + gris secundario único. body con !important fija la base para TODO el texto que hereda (la gran mayoría). A propósito NO forzamos !important en h1..h6/p: aplastaría acentos (badges, texto de color, y sobre todo texto claro sobre fondos oscuros, que hereda). Los pocos "casi-negros" hardcodeados que queden son visualmente idénticos a --dt-text y se limpian por componente en la migración legacy. */ body{ color: var(--dt-text) !important; } .text-muted, small.text-muted, .subtitle, .muted, .text-secondary, .subtitulo, .descripcion, .help-text, .hint, .form-text, figcaption{ color: var(--dt-text-muted) !important; } /* QW4 (cont.) · Títulos al color principal: colapsa los ~5 "casi-negros" legacy de las páginas viejas. Con !important para ganar a los colores hardcodeados. */ h1, h2, h3, h4, h5, h6{ color: var(--dt-text) !important; } /* ⚠️ EXCEPCIÓN OBLIGATORIA — texto BLANCO sobre tarjetas de fondo de color. Los KPI de /blog/stats (.metric-highlight) llevan degradado de marca + texto blanco. Incluye selectores de MAYOR especificidad (.metric-highlight .subtitle = 0,2,0) para GANAR SIEMPRE a `.subtitle`/`.subtitulo`/`.descripcion` (0,1,0), sin depender del orden. Confirmado por QA: el subtítulo salía gris sobre teal. */ .metric-highlight, .metric-highlight *, .metric-highlight .subtitle, .metric-highlight .subtitulo, .metric-highlight .descripcion, .metric-highlight .text-muted, .metric-highlight small{ color: #fff !important; } /* P1-B · Título de página unificado. Se APLICA con la clase .dt-page-title al único título de cada pantalla (no se estila 'h1' en global porque hay h1 mal usados, p.ej. el nombre de cada plan en changeProduct). */ .dt-page-title{ font-size: 1.5rem !important; font-weight: 700 !important; letter-spacing: -0.02em; line-height: 1.2; color: var(--dt-text) !important; display: inline-flex; align-items: center; gap: 9px; } /* Diana como icono de marca dentro de botones (Generar / Crear / Adaptar…). grad=False -> hereda color del texto del botón (blanco en botones gradiente). flex:none evita que se deforme; vertical-align para botones no-flex. */ .dt-diana.btn-diana{ flex: none; vertical-align: -3px; }