/* ===================================================================== Consultorios — estilos - Tema claro: landing pública y login - Tema oscuro (.app-dark): panel interno estilo dashboard ===================================================================== */ :root { --brand: #0b6fb8; --brand-dark: #075089; --brand-light: #e7f2fb; --accent: #14b8a6; --ink: #1f2d3d; --muted: #6b7c93; /* Paleta oscura del panel */ --d-bg: #081427; --d-bg2: #0a1b34; --d-panel: #0f2747; --d-panel2: #143057; --d-border: rgba(148,170,200,.16); --d-ink: #e7eefb; --d-muted: #93a6c4; --d-teal: #2bc4dd; --d-green: #22c55e; } body { min-height: 100vh; display: flex; flex-direction: column; color: var(--ink); background-color: #f5f8fb; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -.01em; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5 { font-weight: 700; letter-spacing: -.02em; } /* ===== Landing pública ===== */ .landing-nav { background: #fff; box-shadow: 0 1px 12px rgba(0,0,0,.06); } .hero { background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 55%, var(--accent) 130%); color: #fff; } .hero h1 { font-weight: 700; line-height: 1.1; } .hero .lead { color: rgba(255,255,255,.9); } .feature-icon { width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; border-radius: 1rem; background: var(--brand-light); color: var(--brand); font-size: 1.7rem; } .section-title { font-weight: 700; color: var(--brand-dark); } .price-card { border-radius: 1rem; transition: transform .15s ease, box-shadow .15s ease; } .price-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(11,111,184,.15); } .price-card.featured { border: 2px solid var(--brand); } .landing-footer { background: var(--ink); color: #cfd8e3; } .text-brand { color: var(--brand) !important; } /* ===== Login ===== */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-dark), var(--brand) 60%, var(--accent) 140%); padding: 1.5rem; } .login-card { max-width: 420px; width: 100%; border: none; border-radius: 1rem; } /* ===================================================================== TEMA OSCURO (panel interno) El tema se aplica con la clase en (.app-dark / .app-light) para resolverlo sin parpadeo desde . ===================================================================== */ html.app-dark { background: radial-gradient(1200px 600px at 80% -10%, rgba(43,196,221,.10), transparent 60%), linear-gradient(180deg, var(--d-bg2) 0%, var(--d-bg) 100%); background-attachment: fixed; color: var(--d-ink); } /* En el panel, el body es transparente para que se vea el fondo del tema. */ html.app-dark body, html.app-light body { background: transparent; } .app-dark a { color: var(--d-teal); } .app-dark .text-muted { color: var(--d-muted) !important; } .app-dark .text-brand { color: var(--d-teal) !important; } /* ---- Navbar superior ---- */ .app-dark .app-navbar { background: linear-gradient(90deg, #0a2a3a 0%, #0b2347 55%, #0c1f3f 100%); border-bottom: 1px solid var(--d-border); } .app-navbar .navbar-brand { font-weight: 700; letter-spacing: .2px; color: #fff; } .top-menu .nav-link { color: rgba(255,255,255,.72); font-weight: 500; padding: .35rem .85rem; border-radius: .5rem; } .top-menu .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); } .top-menu .nav-link.active { color: #fff; background: rgba(43,196,221,.18); } .top-menu .nav-link .badge { font-size: .6rem; } .icon-btn { color: rgba(255,255,255,.85); font-size: 1.15rem; position: relative; text-decoration: none; } .icon-btn .dot { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--d-green); border: 2px solid #0b2347; } .avatar-circle { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--d-teal), #1b8fb0); color: #06222b; display: flex; align-items: center; justify-content: center; font-weight: 700; } /* ---- Sidebar ---- */ .app-dark .sidebar { background: rgba(8,20,40,.65); box-shadow: inset -1px 0 0 var(--d-border); min-height: calc(100vh - 48px); } .app-dark .sidebar .nav-link { color: var(--d-muted); border-radius: .5rem; margin: .15rem .5rem; padding: .6rem .85rem; font-weight: 500; display: flex; align-items: center; gap: .6rem; } .app-dark .sidebar .nav-link .bi { color: var(--d-muted); font-size: 1.05rem; } .app-dark .sidebar .nav-link:hover { background: rgba(255,255,255,.05); color: #fff; } .app-dark .sidebar .nav-link.active { background: linear-gradient(90deg, rgba(34,197,94,.20), rgba(34,197,94,.02)); color: #fff; box-shadow: inset 3px 0 0 var(--d-green); } .app-dark .sidebar .nav-link.active .bi { color: var(--d-green); } .app-dark .sidebar .soon { margin-left: auto; font-size: .6rem; background: rgba(255,255,255,.08); color: var(--d-muted); padding: .1rem .4rem; border-radius: .4rem; } /* ---- Tarjetas ---- */ .card { border-radius: .9rem; } .app-dark .card { background: var(--d-panel); border: 1px solid var(--d-border); color: var(--d-ink); box-shadow: 0 6px 24px rgba(0,0,0,.25); } .app-dark .card-header, .app-dark .card-footer { background: transparent; border-color: var(--d-border); color: var(--d-ink); } /* ---- Tarjetas de estadística ---- */ .stat-card { border: none; border-radius: .9rem; } .app-dark .stat-card { background: linear-gradient(180deg, var(--d-panel2), var(--d-panel)); } .stat-card .stat-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: .75rem; font-size: 1.35rem; } .stat-card .stat-num { font-size: 2rem; font-weight: 700; line-height: 1; color: #fff; } .stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--d-muted); } .delta { font-size: .72rem; font-weight: 600; padding: .12rem .45rem; border-radius: .5rem; } .delta-up { background: rgba(34,197,94,.16); color: #4ade80; } .delta-flat { background: rgba(148,170,200,.14); color: var(--d-muted); } /* ---- Tablas ---- */ .table > :not(caption) > * > * { padding: .65rem .75rem; } .app-dark .table { color: var(--d-ink); border-color: var(--d-border); } .app-dark .table > :not(caption) > * > * { border-color: var(--d-border); background: transparent; } .app-dark .table-light { --bs-table-bg: rgba(255,255,255,.03); --bs-table-color: var(--d-muted); } .app-dark .table thead th { color: var(--d-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; } .app-dark .table-hover > tbody > tr:hover > * { background: rgba(255,255,255,.045); color: #fff; } /* ---- Listas, badges, formularios ---- */ .app-dark .list-group-item { background: transparent; border-color: var(--d-border); color: var(--d-ink); } .app-dark .form-control, .app-dark .form-select { background: #0b2143; border: 1px solid var(--d-border); color: var(--d-ink); } .app-dark .form-control::placeholder { color: #6f87a8; } .app-dark .form-control:focus, .app-dark .form-select:focus { background: #0b2143; color: var(--d-ink); border-color: var(--d-teal); box-shadow: 0 0 0 .2rem rgba(43,196,221,.2); } .app-dark .input-group-text { background: #0e2a52; border-color: var(--d-border); color: var(--d-muted); } .app-dark .form-label { color: var(--d-muted); font-weight: 500; } /* ---- Botones ---- */ .btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark); --bs-btn-active-bg: var(--brand-dark); } .app-dark .btn-primary { --bs-btn-bg: #22c55e; --bs-btn-border-color: #22c55e; --bs-btn-hover-bg: #1ca54f; --bs-btn-hover-border-color: #1ca54f; --bs-btn-active-bg: #1ca54f; --bs-btn-color: #06281a; --bs-btn-hover-color: #06281a; font-weight: 600; } .app-dark .btn-light { background: rgba(255,255,255,.08); border-color: var(--d-border); color: var(--d-ink); } .app-dark .btn-light:hover { background: rgba(255,255,255,.15); color: #fff; } .app-dark .btn-outline-secondary { color: var(--d-muted); border-color: var(--d-border); } .app-dark .btn-outline-secondary:hover { background: rgba(255,255,255,.08); color: #fff; border-color: var(--d-border); } .app-dark .btn-outline-primary { color: var(--d-teal); border-color: rgba(43,196,221,.5); } .app-dark .btn-outline-primary:hover { background: var(--d-teal); border-color: var(--d-teal); color: #06222b; } /* ---- Otros componentes en oscuro ---- */ .app-dark .breadcrumb-item, .app-dark .breadcrumb-item a { color: var(--d-muted); } .app-dark .breadcrumb-item.active { color: var(--d-ink); } .app-dark .nav-tabs { border-color: var(--d-border); } .app-dark .nav-tabs .nav-link { color: var(--d-muted); } .app-dark .nav-tabs .nav-link:hover { border-color: transparent; color: #fff; } .app-dark .nav-tabs .nav-link.active { background: var(--d-panel); border-color: var(--d-border) var(--d-border) var(--d-panel); color: #fff; } .app-dark .dropdown-menu { background: #0e2a52; border-color: var(--d-border); } .app-dark .dropdown-item { color: var(--d-ink); } .app-dark .dropdown-item:hover { background: rgba(255,255,255,.08); color: #fff; } .app-dark .dropdown-divider { border-color: var(--d-border); } .app-dark footer.border-top { background: transparent; border-color: var(--d-border) !important; color: var(--d-muted) !important; } /* ---- Puntos de estado (agenda) ---- */ .dot-estado { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .dot-programada { background: #94a6c4; } .dot-confirmada { background: var(--d-teal); } .dot-atendida { background: var(--d-green); } .dot-cancelada { background: #ef4444; } .dot-no_asistio { background: #f59e0b; } /* ===================================================================== TEMA CLARO (panel interno) — estilo SaaS médico: limpio y profesional. Barra blanca, sidebar con acentos suaves y tarjetas con sombras sutiles. ===================================================================== */ html.app-light { background: #f4f7fb; color: var(--ink); } /* ---- Navbar blanca y limpia ---- */ html.app-light .app-navbar { background: #ffffff; border-bottom: 1px solid #e7edf4; box-shadow: 0 1px 2px rgba(16,24,40,.04); } html.app-light .app-navbar .navbar-brand { color: var(--ink); } /* Hamburguesa visible sobre barra blanca (navbar-dark trae icono blanco). */ html.app-light .navbar-toggler { border-color: #dde5ee; } html.app-light .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(51,65,85,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } html.app-light .icon-btn { color: #5b6b82; } html.app-light .icon-btn:hover { color: var(--brand); } html.app-light .icon-btn .dot { border-color: #fff; } html.app-light .avatar-circle { background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff; } /* ---- Sidebar ---- */ html.app-light .sidebar { background: #ffffff; box-shadow: inset -1px 0 0 #e7edf4; min-height: calc(100vh - 48px); } html.app-light .sidebar .nav-link { color: #51627a; border-radius: .6rem; margin: .12rem .55rem; padding: .62rem .9rem; font-weight: 500; display: flex; align-items: center; gap: .7rem; transition: background-color .15s ease, color .15s ease; } html.app-light .sidebar .nav-link .bi { color: #94a3b8; font-size: 1.1rem; } html.app-light .sidebar .nav-link:hover { background: #f1f5fa; color: var(--brand-dark); } html.app-light .sidebar .nav-link:hover .bi { color: var(--brand); } html.app-light .sidebar .nav-link.active { background: linear-gradient(90deg, var(--brand-light), rgba(231,242,251,.35)); color: var(--brand-dark); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand); } html.app-light .sidebar .nav-link.active .bi { color: var(--brand); } /* ---- Tarjetas ---- */ html.app-light .card { border: 1px solid #e9eef5; border-radius: 1rem; box-shadow: 0 1px 3px rgba(16,24,40,.04), 0 1px 2px rgba(16,24,40,.03); } html.app-light .card-header { background: #fff; border-bottom: 1px solid #eef2f7; font-weight: 600; color: var(--ink); } /* ---- Tarjetas de estadística ---- */ html.app-light .stat-card { background: #fff; border: 1px solid #e9eef5; box-shadow: 0 1px 3px rgba(16,24,40,.05); } html.app-light .stat-card .stat-num { color: var(--ink); } html.app-light .stat-label { color: var(--muted); } html.app-light .delta-flat { background: #eef2f7; color: var(--muted); } html.app-light .delta-up { background: rgba(34,197,94,.12); color: #15803d; } /* ---- Tablas ---- */ html.app-light .table thead th { color: #6b7c93; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; border-color: #eef2f7; } html.app-light .table > :not(caption) > * > * { border-color: #f0f3f8; } html.app-light .table-hover > tbody > tr:hover > * { background: #f7fafd; } /* ---- Formularios ---- */ html.app-light .form-control, html.app-light .form-select { border-color: #dde5ee; border-radius: .6rem; } html.app-light .form-control:focus, html.app-light .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 18%, transparent); } /* ---- Footer ---- */ html.app-light footer.border-top { color: var(--muted) !important; border-color: #e7edf4 !important; } /* ===================================================================== REFINAMIENTO GLOBAL (ambos temas) — toques de SaaS profesional. ===================================================================== */ .card { border-radius: 1rem; } .btn { border-radius: .6rem; font-weight: 600; transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease; } .btn-sm { border-radius: .5rem; } .btn-primary { box-shadow: 0 1px 2px rgba(16,24,40,.12); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 35%, transparent); } .btn-primary:active { transform: translateY(0); } .badge { font-weight: 600; } .stat-card .stat-icon { box-shadow: 0 2px 8px rgba(0,0,0,.08); }