/* ============================================================ No-MMS UI Kit (v1) Goal: consistent UI without Tailwind rework / bundlers. Use: nm-page, card, btn, nm-label, nm-control, nm-invalid, nm-error ============================================================ */ :root{ /* Dynamic theme variables - RGB triplets for Tailwind CDN (rgb(var(--...)/alpha)) - HEX colors for raw CSS usage (var(--nm-primary-700)) */ --nm-primary-rgb-50: 235 243 247; --nm-primary-rgb-100: 215 231 240; --nm-primary-rgb-400: 79 150 189; --nm-primary-rgb-500: 41 128 175; --nm-primary-rgb-600: 3 105 161; --nm-primary-rgb-700: 2 86 132; --nm-secondary-500: 15 118 110; --nm-danger-500: 220 38 38; --nm-primary: #0369a1; /* fallback: sky-700 — clínico */ --nm-primary-600: #0369a1; --nm-primary-700: #025684; --nm-primary-ring: rgba(3, 105, 161, .18); --nm-border: #e2e8f0; /* slate-200 */ --nm-text: #0f172a; /* slate-900 */ --nm-muted: #64748b; /* slate-500 */ --nm-bg: #ffffff; --nm-neutral: #0b1220; --nm-surface: #ffffff; --nm-danger: #ef4444; /* red-500 */ --nm-danger-600: #dc2626; /* red-600 */ --nm-danger-ring: rgba(239, 68, 68, .18); --nm-danger-bg: #fef2f2; /* red-50 */ /* Teal — estados clínicos activos (En consulta, Internado, Nuevo) */ --nm-teal: #0f766e; /* teal-700 — mismo que --nm-secondary-500 */ --nm-teal-bg: #f0fdfa; /* teal-50 */ --nm-teal-ring: rgba(15, 118, 110, .18); /* Semantic: success */ --nm-success: #059669; /* emerald-600 — contraste 4.54:1 sobre blanco */ --nm-success-bg: #ecfdf5; /* emerald-50 */ --nm-success-ring: rgba(5, 150, 105, .18); /* Semantic: warning — usar amber-600, NO amber-500 (falla WCAG AA) */ --nm-warning: #d97706; /* amber-600 — texto/iconos sobre blanco */ --nm-warning-text: #92400e; /* amber-900 — texto puro sobre fondo blanco */ --nm-warning-bg: #fffbeb; /* amber-50 */ /* Semantic: info */ --nm-info: #0284c7; /* sky-600 */ --nm-info-bg: #f0f9ff; /* sky-50 */ --nm-info-ring: rgba(2, 132, 199, .18); --nm-radius: 12px; } /* -------------------------------------------------------------------------- Live Look&Feel (global propagation) When Unidad Médica -> Look & Feel updates CSS variables, the whole shell must react immediately (no-save preview across the app shell). -------------------------------------------------------------------------- */ /* App background */ /* NOTE: keep canvas background driven by Tailwind (bg-slate-100) like Rollback; do not force theme surface onto . */ /* Wrapper helpers (set in js/core/app.js) */ .nm-app{ background-color: #f5f7fa; /* canvas ligeramente más cálido que slate-100 */ } /* Header: keep it clean/white but brand it with the primary color */ .nm-app-header{ background: #fff; border-bottom: 1px solid var(--nm-border); box-shadow: 0 1px 2px rgba(15,23,42,.06); /* shadow-sm */ } /* SideNav: keep Rollback dark base; use primary only as accent */ .nm-sidenav{ background-color: #0f172a !important; /* slate-900 */ color: rgba(255,255,255,0.92) !important; } .nm-sidenav .text-slate-100{ color: rgba(255,255,255,0.92) !important; } .nm-sidenav .text-slate-300{ color: rgba(255,255,255,0.58) !important; } .nm-sidenav .border-slate-800{ border-color: rgba(255,255,255,0.10) !important; } .nm-sidenav .nm-sidenav-item:hover{ background: rgba(255,255,255,0.08) !important; } .nm-sidenav .nm-sidenav-active{ background: rgba(255,255,255,0.10) !important; color: #fff !important; box-shadow: inset 3px 0 0 0 var(--nm-primary); } /* page container */ .nm-page{ width: 100%; max-width: none; margin: 0; padding: 1.25rem 1rem; } @media (min-width: 640px){ .nm-page{ padding: 1.5rem 1.5rem; } } @media (min-width: 1024px){ .nm-page{ padding: 1.5rem 2rem; } } /* cards */ .card, .nm-card{ background: var(--nm-bg); border: 1px solid var(--nm-border); border-radius: var(--nm-radius); box-shadow: 0 1px 2px rgba(15,23,42,.06); } .card-body, .nm-card-body{ padding: 1rem; } @media (min-width: 640px){ .card-body, .nm-card-body{ padding: 1.25rem; } } /* typography helpers */ .nm-label{ display:block; font-size: .75rem; /* text-xs like monolith */ font-weight: 600; color: #334155; /* slate-700 */ margin-bottom: .25rem; } .nm-required{ color: var(--nm-danger); margin-left: .25rem; } .nm-help{ font-size: .75rem; color: var(--nm-muted); margin-top: .25rem; } .nm-error{ font-size: .75rem; color: var(--nm-danger-600); margin-top: .25rem; } /* controls */ .nm-control{ width: 100%; border: 1px solid var(--nm-border); border-radius: 10px; /* rounded-lg-ish */ padding: .5rem .75rem; /* px-3 py-2 */ font-size: .875rem; color: var(--nm-text); background: #fff; outline: none; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .nm-control:focus{ border-color: var(--nm-primary); box-shadow: 0 0 0 3px var(--nm-primary-ring); } .nm-control:disabled{ background: #f1f5f9; /* slate-100 */ color: #64748b; cursor: not-allowed; } /* layout helpers (forms/grids) */ .nm-field{ display:flex; flex-direction:column; gap:6px; } .nm-grid-2{ display:grid; grid-template-columns:1fr; gap:16px; } @media(min-width:768px){ .nm-grid-2{ grid-template-columns:1fr 1fr; } } .nm-actions{ display:flex; gap:12px; justify-content:flex-end; flex-wrap:wrap; } .nm-inline{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; } /* invalid state (monolith-style) */ .nm-invalid{ border-color: #f87171 !important; /* red-400 */ background: var(--nm-danger-bg) !important; } .nm-invalid:focus{ border-color: #f87171 !important; box-shadow: 0 0 0 3px var(--nm-danger-ring) !important; } /* buttons */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius: 10px; padding:.5rem .75rem; font-weight:600; font-size:.875rem; border:1px solid transparent; cursor:pointer; user-select:none; transition: background-color .15s ease, border-color .15s ease, color .15s ease, filter .15s ease; } .btn:focus{ outline:none; box-shadow: 0 0 0 3px var(--nm-primary-ring); } .btn-sm{ padding:.4rem .6rem; font-size:.8125rem; } /* Square icon buttons (used in tables) */ .btn-icon{ width: 40px; height: 40px; padding: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 640px){ .btn-icon{ width: 44px; height: 44px; border-radius: 14px; } } .btn-primary{ background: var(--nm-primary); color:#fff; } .btn-primary:hover{ background: var(--nm-primary-700); } .btn-secondary{ background:#fff; color:#0f172a; border-color:#cbd5e1; /* slate-300 */ } .btn-secondary:hover{ background:#f8fafc; /* slate-50 */ border-color:#94a3b8; /* slate-400 */ } .btn-danger{ background: var(--nm-danger); color:#fff; } .btn-danger:hover{ filter: brightness(.95); } .btn-success{ background: var(--nm-success); color:#fff; } .btn-success:hover{ filter: brightness(.92); } .btn-warning{ background: var(--nm-warning); color:#fff; } .btn-warning:hover{ filter: brightness(.92); } .btn-info{ background: var(--nm-info); color:#fff; } .btn-info:hover{ filter: brightness(.92); } .btn-teal{ background: var(--nm-teal); color:#fff; } .btn-teal:hover{ filter: brightness(.92); } /* tables (lightweight) */ .nm-table{ width:100%; border-collapse: separate; border-spacing: 0; } .nm-table th{ text-align:left; font-size:.75rem; font-weight:700; color:#475569; /* slate-600 */ padding:.75rem .75rem; border-bottom:1px solid var(--nm-border); background:#f8fafc; /* slate-50 */ } .nm-table td{ padding:.75rem .75rem; border-bottom:1px solid var(--nm-border); vertical-align: middle; color:#0f172a; font-size:.875rem; } .nm-table tr:hover td{ background:#f8fafc; } /* Disabled + loading states (global, No-MMS) */ .btn:disabled, .btn[disabled]{ opacity: .6; cursor: not-allowed; filter: none; } .btn:disabled:hover, .btn[disabled]:hover{ filter: none; } .btn-primary:disabled, .btn-primary[disabled]{ background: var(--nm-primary-600); } .btn-secondary:disabled, .btn-secondary[disabled]{ background: #fff; color: var(--nm-text); border-color: var(--nm-border); } /* ============================================================ FullCalendar (No-MMS Theme) - Scope all overrides under .nm-fullcalendar to avoid affecting other pages. - Uses FullCalendar CSS variables for quick theming. ============================================================ */ .nm-fullcalendar{ --fc-border-color: var(--nm-border); --fc-page-bg-color: transparent; --fc-neutral-bg-color: rgba(15, 23, 42, .04); --fc-neutral-text-color: var(--nm-muted); --fc-today-bg-color: rgba(37, 99, 235, .08); --fc-button-text-color: #fff; --fc-button-bg-color: var(--nm-primary); --fc-button-border-color: var(--nm-primary); --fc-button-hover-bg-color: var(--nm-primary-700); --fc-button-hover-border-color: var(--nm-primary-700); --fc-button-active-bg-color: var(--nm-primary-700); --fc-button-active-border-color: var(--nm-primary-700); --fc-event-bg-color: var(--nm-primary); --fc-event-border-color: var(--nm-primary); --fc-event-text-color: #fff; } .nm-fullcalendar .fc{ font-size: .9rem; } .nm-fullcalendar .fc .fc-toolbar-title{ font-size: 1.05rem; font-weight: 800; color: var(--nm-text); letter-spacing: .2px; } /* Buttons: mimic No-MMS .btn */ .nm-fullcalendar .fc .fc-button{ border-radius: var(--nm-radius); padding: .32rem .6rem; font-weight: 700; text-transform: none; box-shadow: 0 1px 2px rgba(0,0,0,.06); } .nm-fullcalendar .fc .fc-button:focus{ outline: none; box-shadow: 0 0 0 3px var(--nm-primary-ring); } /* Day cells */ .nm-fullcalendar .fc .fc-daygrid-day-frame{ padding: .15rem; } .nm-fullcalendar .fc .fc-daygrid-day-number{ font-size: .85rem; padding: .25rem .35rem; border-radius: 10px; } .nm-fullcalendar .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number{ background: rgb(var(--nm-primary-rgb, 37 99 235) / 0.10); color: var(--nm-primary-700); } /* Events as pills */ .nm-fullcalendar .fc .fc-event{ border-radius: 999px; padding: 0 .35rem; } .nm-fullcalendar .fc .fc-event-title{ font-weight: 700; } /* Popover / more-events */ .nm-fullcalendar .fc .fc-popover{ border-radius: var(--nm-radius); border-color: var(--nm-border); box-shadow: 0 12px 30px rgba(15, 23, 42, .14); } /* ======================================================= NO-MMS dynamic theming (live Look & Feel) - Sidebar hover/active reacts instantly to palette changes. - Uses --nm-primary and --nm-primary-rgb (set by UnidadMedicaView). ======================================================= */ .nm-sidenav .nm-sidenav-link:hover { background: rgba(255,255,255,0.08); } .nm-sidenav .nm-sidenav-active { background: rgba(255,255,255,0.10); box-shadow: inset 3px 0 0 0 var(--nm-primary); } .nm-sidenav .nm-sidenav-active:hover { background: rgba(255,255,255,0.14); } /* ------------------------------ No-MMS: Read-only "VIEW" values (Avoid disabled inputs in view mode) -------------------------------- */ .nm-viewvalue{ min-height: 42px; padding: 0.5rem 0.75rem; border: 1px dashed #cbd5e1; background: #f8fafc; border-radius: 0.75rem; color: #0f172a; display: flex; align-items: center; } .nm-viewvalue--multiline{ align-items: flex-start; white-space: pre-wrap; } .nm-viewvalue .nm-chip{ margin-left: 0.75rem; } /* ============================================================ No-MMS: Badges / Chips semánticos Uso: Activo ============================================================ */ .nm-badge{ display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 999px; /* pill */ font-size: .75rem; font-weight: 600; line-height: 1.4; white-space: nowrap; } .nm-badge--success{ background: var(--nm-success-bg); color: var(--nm-success); } .nm-badge--danger{ background: var(--nm-danger-bg); color: var(--nm-danger-600); } .nm-badge--warning{ background: var(--nm-warning-bg); color: var(--nm-warning-text); /* amber-900 para contraste */ } .nm-badge--info{ background: var(--nm-info-bg); color: var(--nm-info); } .nm-badge--teal{ background: var(--nm-teal-bg); color: var(--nm-teal); } .nm-badge--neutral{ background: #f1f5f9; /* slate-100 */ color: #475569; /* slate-600 */ } /* Variant con borde (más prominente) */ .nm-badge--outline-success{ background: transparent; color: var(--nm-success); box-shadow: inset 0 0 0 1px var(--nm-success); } .nm-badge--outline-danger{ background: transparent; color: var(--nm-danger-600); box-shadow: inset 0 0 0 1px var(--nm-danger-600); } .nm-badge--outline-warning{ background: transparent; color: var(--nm-warning); box-shadow: inset 0 0 0 1px var(--nm-warning); } .nm-badge--outline-info{ background: transparent; color: var(--nm-info); box-shadow: inset 0 0 0 1px var(--nm-info); } .nm-badge--outline-teal{ background: transparent; color: var(--nm-teal); box-shadow: inset 0 0 0 1px var(--nm-teal); } .nm-badge--outline-neutral{ background: transparent; color: #64748b; /* slate-500 */ box-shadow: inset 0 0 0 1px #cbd5e1; /* slate-300 */ }