/** * IOmed · Centro Médico Dayenu — Capa de Refinamiento v3 * --------------------------------------------------------------------------- * Capa ADITIVA que se carga después de dayenu-v2-tokens.css y dayenu-custom.css. * Eleva la percepción visual del sistema (tipografía editorial, profundidad, * foco de marca, microinteracciones) SIN cambiar estructura, densidad de datos * ni los colores de marca. Todo referencia los tokens existentes. * * Principios: refinar, no reinventar. Respeta modo claro y oscuro. */ /* =========================================================================== 1. Tipografía editorial — fuente display para títulos =========================================================================== */ @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/fraunces/fraunces-600.woff2") format("woff2"); } @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/fraunces/fraunces-700.woff2") format("woff2"); } :root { --font-display: "Fraunces", "Poppins", Georgia, serif; /* Profundidad en capas: sombras suaves y realistas */ --shadow-card: 0 1px 2px rgba(15, 42, 42, 0.04), 0 2px 8px rgba(15, 42, 42, 0.05); --shadow-card-hover: 0 2px 4px rgba(15, 42, 42, 0.05), 0 12px 28px -6px rgba(13, 148, 136, 0.16); --shadow-lg: 0 4px 8px rgba(15, 42, 42, 0.05), 0 18px 40px -12px rgba(15, 42, 42, 0.16); --shadow-focus-ring: 0 0 0 3px rgba(8, 145, 178, 0.16); --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); } /* Títulos de página y de sección: display serif con tracking afinado. Scope acotado a los contenedores de encabezado — NUNCA a tablas ni celdas. */ .page-title, .card-header h1, .card-header h2, .card-header h3, .dayenu-page-title, .io-page-title, h1.page-heading, .content-header h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; color: var(--text-heading); } /* =========================================================================== 2. Tarjetas — profundidad y elevación al pasar el cursor =========================================================================== */ .card { border: 1px solid var(--sidebar-border, #E5E7EB); border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-card); transition: box-shadow 0.28s var(--ease-out-soft), transform 0.28s var(--ease-out-soft), border-color 0.28s var(--ease-out-soft); } /* Elevación solo en tarjetas interactivas (clicables o marcadas como hover). */ .card.card-hoverable:hover, .card.io-card-interactive:hover, a > .card:hover, .card.cursor-pointer:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); border-color: rgba(8, 145, 178, 0.24); } /* Tarjetas de estadística / KPI: número protagonista */ .stat-card .stat-value, .kpi-value, .io-stat-number { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } /* =========================================================================== 3. Botones — transición suave y elevación de marca =========================================================================== */ .btn { transition: background-color 0.2s var(--ease-out-soft), box-shadow 0.2s var(--ease-out-soft), transform 0.12s var(--ease-out-soft), border-color 0.2s var(--ease-out-soft); } .btn-primary { box-shadow: 0 1px 2px rgba(8, 145, 178, 0.18), 0 4px 12px -2px rgba(8, 145, 178, 0.28); } .btn-primary:hover { box-shadow: 0 2px 4px rgba(8, 145, 178, 0.22), 0 8px 20px -4px rgba(8, 145, 178, 0.38); transform: translateY(-1px); } .btn:active { transform: scale(0.97); } /* =========================================================================== 4. Campos de formulario — foco de marca visible y accesible =========================================================================== */ .form-control, .form-select, .io-input, .select2-container--default .select2-selection { transition: border-color 0.18s var(--ease-out-soft), box-shadow 0.18s var(--ease-out-soft); } .form-control:focus, .form-select:focus, .io-input:focus { border-color: var(--color-primary, #0891B2); box-shadow: var(--shadow-focus-ring); } /* =========================================================================== 5. Sidebar — indicador activo con acento de marca y transición fluida =========================================================================== */ .aside-menu-container__aside-menu .nav-link, .sidebar-app-menu .nav-link { transition: background-color 0.2s var(--ease-out-soft), color 0.2s var(--ease-out-soft); border-radius: var(--radius-md, 8px); } .aside-menu-container__aside-menu .nav-link.active, .sidebar-app-menu .nav-link.active { position: relative; font-weight: 600; } /* =========================================================================== 6. Barras de navegación por pestañas (portal paciente, visitas, etc.) =========================================================================== */ .nav-pills .nav-link { transition: background-color 0.2s var(--ease-out-soft), color 0.2s var(--ease-out-soft), box-shadow 0.2s var(--ease-out-soft); font-weight: 500; } .nav-pills .nav-link.active { box-shadow: 0 2px 8px -2px rgba(8, 145, 178, 0.4); } /* =========================================================================== 7. Tablas — encabezados más legibles, filas con hover sutil =========================================================================== */ .table > thead th { font-weight: 600; letter-spacing: 0.01em; text-transform: none; color: var(--text-secondary, #6B7280); } .table-hover > tbody > tr { transition: background-color 0.15s var(--ease-out-soft); } /* =========================================================================== 8. Badges — pill suave y legible =========================================================================== */ .badge { font-weight: 600; letter-spacing: 0.005em; border-radius: 999px; padding: 0.35em 0.7em; } /* =========================================================================== 9. Accesibilidad — respeta reduce-motion =========================================================================== */ @media (prefers-reduced-motion: reduce) { .card, .btn, .btn-primary, .form-control, .nav-pills .nav-link, .aside-menu-container__aside-menu .nav-link { transition: none !important; } .card.card-hoverable:hover, .btn-primary:hover, .btn:active { transform: none !important; } } /* =========================================================================== 10. Calendario de citas — dias sin jornada CLARAMENTE distinguibles plugins.css pinta todos los .flatpickr-day con un selector de 6 clases y aplasta el estilo de flatpickr-disabled; estas reglas (7 clases) lo corrigen. =========================================================================== */ .flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .dayContainer .flatpickr-day.flatpickr-disabled, .flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .dayContainer .flatpickr-day.flatpickr-disabled:hover, .flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .dayContainer .flatpickr-day.prevMonthDay, .flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .dayContainer .flatpickr-day.nextMonthDay { color: #c9d3da; background: transparent; cursor: not-allowed; text-decoration: none; } body.dark-mode .flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .dayContainer .flatpickr-day.flatpickr-disabled, body.dark-mode .flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .dayContainer .flatpickr-day.flatpickr-disabled:hover, body.dark-mode .flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .dayContainer .flatpickr-day.prevMonthDay, body.dark-mode .flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer .flatpickr-days .dayContainer .flatpickr-day.nextMonthDay { color: #4b5563; } /* =========================================================================== 11. Toolbar de tablas — selector "filas por pagina" legible Bootstrap dibuja el chevron del