@charset "utf-8"; :root { /* Existing Variables */ --brand: #2563eb; --ok: #16a34a; --warn: #f59e0b; --err: #ef4444; /* Zinc Palette from panelmedico.css */ --font-sans: 'Inter', sans-serif; --shadcn-background: #ffffff; --shadcn-foreground: #09090b; --shadcn-card: #ffffff; --shadcn-card-foreground: #09090b; --shadcn-popover: #ffffff; --shadcn-popover-foreground: #09090b; --shadcn-primary: #18181b; --shadcn-primary-foreground: #fafafa; --shadcn-secondary: #f4f4f5; --shadcn-secondary-foreground: #18181b; --shadcn-muted: #f4f4f5; --shadcn-muted-foreground: #71717a; --shadcn-accent: #f4f4f5; --shadcn-accent-foreground: #18181b; --shadcn-destructive: #ef4444; --shadcn-destructive-foreground: #fafafa; --shadcn-border: #e4e4e7; --shadcn-input: #e4e4e7; --shadcn-ring: #18181b; --shadcn-radius: 0.5rem; /* Color mappings for new buttons using old vars */ --coloroscuro: var(--shadcn-primary); /* Assuming mapping */ } .btn-circle.btn-xl { width: 70px; height: 70px; padding: 10px 16px; border-radius: 35px; font-size: 24px; line-height: 1.33; } .btn-circle { width: 30px; height: 30px; padding: 6px 0px; border-radius: 15px; text-align: center; font-size: 12px; line-height: 1.42857; } #milogo{ max-width: 100%; height: auto; } .numeros { color: #000080; font-family:"Arial Black", Gadget, sans-serif; font-size:90px; text-align: right; } .numeropresupuesto { text-align: right; } .boxes { color: #000; font-family:Gadget, sans-serif; font-size:30px } #main-menu{ float:right; margin-top:30px; } /*login*/ .btn-label {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;} .btn-labeled {padding-top: 0;padding-bottom: 0;} /*.input-group { margin-bottom:10px; }*/ .separator { border-right: 1px solid #dfdfe0; } /*form registro*/ .colorgraph { height: 5px; border-top: 0; background: #c4e17f; border-radius: 5px; background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); } /*footer-commom*/ #social:hover { -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); } #social { -webkit-transform:scale(0.8); /* Browser Variations: */ -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; } /* Only Needed in Multi-Coloured Variation */ .social-fb:hover { color: #3B5998; } .social-tw:hover { color: #4099FF; } .social-gp:hover { color: #d34836; } .social-em:hover { color: #f39c12; } #pfooter{ font-size:10px; } /*pie de pagina*/ /* 1. Definir el scroll solo en el nivel más alto */ html { height: 100%; overflow-y: scroll; /* Forzamos scroll siempre para evitar saltos de layout */ overflow-x: hidden; } /* Bootstrap bloquea el scroll de fondo con overflow:hidden en , pero aqui el scroll real vive en . Con un modal abierto (ver shown.bs.modal/hidden.bs.modal en nuevo.js) bloqueamos tambien para que la pagina de fondo no scrollee en lugar del modal. */ html.modal-abierto { overflow: hidden !important; } /* 2. El body debe ser un contenedor fluido, no un segundo scroll */ body { min-height: 100%; /* Permite que crezca si hay contenido */ margin: 0; padding: 0; overflow: visible; /* IMPORTANTE: Deja que el html maneje el scroll */ } /* Wrapper for page content to push down footer */ #wrap { flex: 1; /* Ocupa el espacio disponible */ } /* Set the fixed height of the footer here */ #push, #footer { min-height: 60px; height: auto !important; } #footer { background-color: var(--colorclaro); } /* Lastly, apply responsive CSS fixes as necessary */ @media (max-width: 767px) { #footer { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } } /* Required field START */ .required-field-block { position: relative; } .required-field-block .required-icon { display: inline-block; vertical-align: middle; margin: -0.25em 0.25em 0em; background-color: #E8E8E8; border-color: #E8E8E8; padding: 0.5em 0.8em; color: rgba(0, 0, 0, 0.65); text-transform: uppercase; font-weight: normal; border-radius: 0.325em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-transition: background 0.1s linear; -moz-transition: background 0.1s linear; transition: background 0.1s linear; font-size: 75%; } .required-field-block .required-icon { background-color: transparent; position: absolute; top: 0em; right: 0em; z-index: 10; margin: 0em; width: 30px; height: 30px; padding: 0em; text-align: center; -webkit-transition: color 0.2s ease; -moz-transition: color 0.2s ease; transition: color 0.2s ease; } .required-field-block .required-icon:after { position: absolute; content: ""; right: 1px; top: 1px; z-index: -1; width: 0em; height: 0em; border-top: 0em solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 0em solid transparent; border-right-color: inherit; -webkit-transition: border-color 0.2s ease; -moz-transition: border-color 0.2s ease; transition: border-color 0.2s ease; } .required-field-block .required-icon .text { color: #B80000; font-size: 26px; margin: -3px 0 0 12px; } /*COMBO*/ /*inicio alertas*/ .alert-group>.alert:first-child:not(:last-child){ -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; -webkit-border-bottom-right-radius:0; -webkit-border-bottom-left-radius:0; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomright:0; -moz-border-radius-bottomleft:0; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-right-radius:0; border-bottom-left-radius:0; margin-bottom:0 } .alert-group>.alert:not(:first-child):not(:last-child){ -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; border-top:0; margin-bottom:0 } .alert-group>.alert:last-child:not(:first-child){ -webkit-border-top-left-radius:0; -webkit-border-top-right-radius:0; -webkit-border-bottom-right-radius:5px; -webkit-border-bottom-left-radius:5px; -moz-border-radius-topleft:0; -moz-border-radius-topright:0; -moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; border-top-left-radius:0; border-top-right-radius:0; border-bottom-right-radius:5px; border-bottom-left-radius:5px; border-top:0 } /*fin alertas*/ /*MENU movil*/ #mobile-menu-button{ float:left; width:44px; margin:5px 0; } #mobile-main-menu { display:none; text-decoration:none; } #mobile-main-menu a{ display:block; width:100%; padding:3px 0; border-top: 1px solid #eee; color:#428bca; text-align:left; text-transform:uppercase; text-decoration:none; } #mobile-main-menu li { text-decoration:none; } #mobile-main-menu a:hover{ color:#fff; text-decoration:none; background-color:#428bca; } #parrainforma{ padding:10px 10px 0 10px; text-align:justify; } #participacion{ border-style:double; padding:20px; margin-top:30px; border:double; } #participacion td { padding:5px; } #participacion th { text-align:center; font-family:Arial, Helvetica, sans-serif; font:bold; font-size:12px; } #participacion td { font-family:Arial, Helvetica, sans-serif; margin-right:5px; font-size:12px; } .encabezadopdf{ text-align:center; margin:0; } .p1{ font:bold; font-size:16px; font-style:normal; font-family:Arial, Helvetica, sans-serif; margin:1px; } .p2{ font:bold; font-size:14px; font-style:normal; font-family:Arial, Helvetica, sans-serif; margin:1px; } .p3{ font:bold; font-size:12px; font-style:normal; font-family:Arial, Helvetica, sans-serif; margin:1px; } /* pestana*/ .contenedor{ margin: auto; padding: 20px 15px 50px 50px; border-radius: 10px; box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.8); } .contenedor .titulo{ font-size:20px; font-weight: bold; margin-left: 10px; margin-bottom: 1px; } #pestanas { float: top; font-size: 12px; font-weight: bold; } #pestanas ul{ margin-left: -40px; } #pestanas li{ list-style-type: none; float: left; text-align: center; margin: 0px 1px -1px -0px; background: darkgrey; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid bisque; border-bottom: dimgray; padding: 0px 2px 0px 2px; } #pestanas a:link{ text-decoration: none; color: bisque; } #contenidopestanas{ clear: both; padding: 20px 0px 20px 20px; border-radius: 5px; border-top-left-radius: 0px; border: 2px solid bisque; } .mdbtnmesa{ width:25% } p.saltodepagina { page-break-after: always; } .socio{ font-size:12px; margin-top:10px; margin-bottom:10px; font-family:"Arial Black", Gadget, sans-serif; } .entrada{ font-size:12px; margin-top:5px; margin-bottom:5px; font-family:"Times New Roman", Times, serif; } .tentrada{ margin-top:5px; margin-bottom:5px; } .timbrado{ font-size:18px; } .WindowLoad { position:fixed; top:0; left:0; width:100%; height:100%; z-index:3200; filter:alpha(opacity=65); -moz-opacity:65; opacity:0.65; background:#999; display:flex; justify-content:center; align-items:center; } .WindowLoad > div { text-align:center; } .WindowLoad .loader-text { color:#000; font-size:20px; font-weight:bold; margin-bottom:10px; } #tablas th { text-align:center; text-height:font-size; margin:auto; font-size:12px; } #tablas td { margin:auto; text-align:center; font-size:10px; } #tablas td input { font-size:14px; width:50px; height:37px; text-align:center; } #origin { background-color: lightgreen; } #origin img, #drop img { margin-top: 3px; margin-left: 5px; } #drop { background-color: red; min-height: 120px; } .over { border: solid 5px purple; } .draggable { border: solid 2px gray; } .fecha{ max-width:150px; } .hora{ max-width:150px; } #duracion{ max-width:150px; } .mismalinea{ display:inline-block; } .verde{ color: #094; font-size: 19px; } .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; } #img-upload{ width: 50%; } .monto{ text-align:right; } #citas{ font-size:14px; } #idpaciente { max-width:200px; } #edad{ max-width:50px !important; } #analisis label{ font-size:9px; font-family:Arial, Helvetica, sans-serif; } #estudios label{ font-size:9px; font-family:Arial, Helvetica, sans-serif; } #estudios div{ margin-top:3px; padding-right:5px; padding-left:25px; } #analisis div{ margin-top:3px; padding-right:5px; padding-left:25px; } #resumentratamientos td { font-size:11px; } #sexo { max-width:50px !important; } #monto1 { max-width:60px !important; max-height:27px !important; font-size:11px; } #table-medico th { font-size:12px !important; } #table-contrato td { font-size:12px !important; } .cobros td { font-size:11px; } .cobros th td { font-size:10px !important; padding: .1rem; } .cobros th div { padding: .1rem !important; font-size: 11px; text-align:center } .dropdown-menu { font-size: .700rem !important } .form-control{ height: calc(1rem + 0.75rem + 2px) !important; } textarea.form-control { height: auto !important; } /*Dashboard*/ .my-card { position:absolute; left:27%; top:-20px; border-radius:10%; } .table tbody tr.selected td{ background-color:#5fc27e !important; opacity: 0.65 } .card-titulo { position:absolute; left:3%; top:-20px; border-radius:10%; } .precioseguro .preciopaciente{ width:50px; } .diaseleccionado{ background: #17a2b8; color:#fff; } #idpresupuesto{ width: 100px; } .divnotas{ width: 50px; word-wrap: break-word; } .fc-event{ font-size: 11px !important; } .campotabla{ height: 22px !important; } .with-boton{ height: 40px; } .margin-left-10{ margin-left: 10px; } .miboton{ height: 33px; } .alert-custom { color: #410485; background-color: #DDCDFF; border-color: #C4BAFF; } .alert-custom hr { border-top-color: #AAA1FF; } .alert-custom .alert-link { color: #1F0353; } .btn-success-circle { color: #000000; background-color: #28a746a7; border-color: #28a745; } .alert-naranja { color: #212529; background-color: #ff6a008c; border-color: #ffc107; } .alert-naranja hr { border-top-color: #ff9800; } .alert-naranja .alert-link { color: #1F0353; } .alert-amarillo { color: #212529; background-color: #ffed03; border-color: #ffe9a8; } .alert-amarillo hr { border-top-color: #ffed03; } .alert-amarillo .alert-link { color: #1F0353; } .ordenmenu{ max-width: 25px; } .btn-prioridad { color: #fff; background-color: #dc35458f; border-color: #dc35458f; } .contenedorprincipal { width: 97%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .spinner-grow { animation: growEffect 1s infinite ease-in-out; } .spinner-grow:nth-child(1) { animation-delay: 0s; } .spinner-grow:nth-child(2) { animation-delay: 0.2s; } .spinner-grow:nth-child(3) { animation-delay: 0.4s; } @keyframes growEffect { 0%, 100% { transform: scale(0.5); opacity: 0.5; } 50% { transform: scale(1); opacity: 1; } } .ordenadordelfooter { display: flex; flex-direction: column; min-height: 100vh; /* Altura mínima igual a toda la pantalla */ } /*modal soporte tecnico*/ .help-icon { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background-color: #25D366; color: white; border-radius: 50%; display: none; justify-content: center; align-items: center; cursor: pointer; font-size: 30px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .modalsoporte { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; } .modalsoporte-content { background: white; padding: 20px; border-radius: 10px; text-align: center; width: 80%; max-width: 400px; } .modalsoporte-content h4 { margin-bottom: 10px; } .modalsoporte-content p { text-decoration: none; color: #e03b09; font-size: 30px; margin-top: 20px; } .modalsoporte-content a { text-decoration: none; color: #25D366; font-size: 18px; margin-top: 10px; display: inline-block; } .modalclose-btn { background: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; margin-top: 20px; } .whatsapp-icon { font-size: 20px; vertical-align: middle; margin-right: 5px; } /*Modal soporte tecnico*/ .numeroprecio { text-align: right; font-family: calibri; font-size: 11px; padding: 1px; width: 60px; border-width: 1px } #chipsActivos .chip-active{ background:#f1f5f8;border:1px solid #d9e2ec;border-radius:20px; padding:4px 10px;margin:3px;font-size:.85rem } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 5px; } ::-webkit-scrollbar-thumb { background: var(--colorclaro, #888); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--colorletra, #555); } /* Firefox support */ * { scrollbar-width: thin; scrollbar-color: var(--colorclaro, #888) #f1f1f1; } #chipsActivos .chip-active i{cursor:pointer;margin-left:8px} html, body { -moz-user-select: text; user-select: text; } a, button, .btn, [role="button"], .no-select, .draggable { -moz-user-select: text; user-select: text; } ::selection { background: #1a73e8; color: #fff; } ::-moz-selection { background: #1a73e8; color: #fff; } .card { background: linear-gradient(135deg, #fff, #f9f9f9); border: 1px solid var(--colorclaro); border-radius: 1rem; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); } .card-header { background: linear-gradient(180deg, rgba(37,99,235,0.05), transparent); border-bottom: 1px solid var(--colorclaro); } .card-body { color: var(--colorletra); } .container-xl { max-width: 1320px; } .pill { padding: .25rem .6rem; border-radius: 999px; font-size: .75rem; } .pill-ok { background: rgba(34, 197, 94, .15); color: #bbf7d0; border: 1px solid ; } .pill-warn { background: rgba(245, 158, 11, .15); color: #fde68a; border: 1px solid rgba(245, 158, 11, .35); } .pill-info { background: rgba(14, 165, 233, .15); color: #bae6fd; border: 1px solid rgba(14, 165, 233, .35); } .form-label small { color: var(--muted); } .form-control:focus, .form-select:focus { border-color: var(--coloroscuro); box-shadow: 0 0 0 .2rem rgba(56, 189, 248, .25); } .accordion-button { background: #0f172a; background: transparent; } .accordion-button:not(.collapsed) { background: #111827; color: #fff; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .05); } .nav-tabs .nav-link { color: var(--colorletra); } .nav-tabs .nav-link.active { color: #fff; background: var(--colorclaro); border-color: var(--coloroscuro); } .sticky-top-info { position: sticky; top: 0; z-index: 1020; background: linear-gradient(180deg, rgba(11, 18, 32, .98), rgba(11, 18, 32, .90)); border-bottom: 1px solid var(--line); } .badge-outline { background: transparent; border: 1px solid var(--colorclaro); } .section-help { color: var(--muted); font-size: .85rem; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media(max-width: 992px) { .grid-2 { grid-template-columns: 1fr; } } /* Títulos de secciones */ .section-title { font-size: 1.125rem; color: #333; border-bottom: 1px solid #e0e0e0; margin-bottom: .75rem; padding-bottom: .25rem; } /* Inputs, selects y textareas */ input.form-control, select.form-control, textarea.form-control { border: 1px solid #ddd; border-radius: 8px; background-color: #fff; transition: border 0.3s, box-shadow 0.3s; font-family: 'Poppins', sans-serif; } input.form-control:focus, select.form-control:focus, textarea.form-control:focus { border-color: #007bff; box-shadow: 0 0 8px rgba(0, 123, 255, 0.2); } h1,h2,h3,h4,h5{ font-family: 'Poppins', sans-serif; } /* Botones */ .btn { border-radius: 8px; font-weight: 500; transition: all 0.3s; } /* Nav Tabs */ .nav-tabs .nav-link { border: none; color: #6c757d; background: #e9ecef; margin-right: 0.5rem; border-radius: 50px; padding: 0.5rem 1.5rem; transition: background 0.3s, color 0.3s; } /* Modern Active Tab (Green) */ .nav-tabs .nav-link.active { background: #198754 !important; /* Green */ color: #fff !important; border-color: #198754 !important; font-weight: 600; } .nav-tabs .nav-item { margin-bottom: 10px; } /* Acordeones */ .accordion-button { background-color: #f1f1f1; color: #333; font-weight: 500; border: none; border-radius: 0.5rem; transition: background-color 0.3s; } .accordion-button:not(.collapsed) { background-color: #007bff; color: #fff; } .accordion-button::after { filter: invert(50%); } .accordion-body .btn { font-size: 0.9rem; } /* Sticky side */ .sticky-side .card { background: #fff; border: 1px solid #e9ecef; } /* Listas */ .list-group-item { transition: background 0.3s; } .list-group-item:hover { background: #f0f8ff; } /* Toggle Overrides */ .toggle.btn { border-radius: calc(var(--shadcn-radius) - 2px) !important; border-color: var(--shadcn-border) !important; overflow: hidden; /* Clip corners */ } .toggle.btn-sm { min-width: 6.125rem; min-height: 2rem !important; height: 2rem !important; padding-left: 0 !important; padding-right: 0 !important; } /* OFF State: Neutral Gray (Shadcn Secondary) */ .toggle-off.btn { background-color: #f1f5f9 !important; /* Slate-100/Zinc-like */ color: #64748b !important; /* Slate-500 */ border-color: #e2e8f0 !important; } .toggle-off.btn:hover { background-color: #e2e8f0 !important; } /* ON State: Success Green */ .toggle-on.btn { background-color: #198754 !important; border-color: #198754 !important; color: #fff !important; } .toggle-on.btn:hover { background-color: #157347 !important; } /* Handle */ .toggle-handle { background: #fff !important; border: 1px solid #e2e8f0 !important; } /* Track OFF */ .toggle-off.btn { background-color: #e5e7eb !important; border-color: #d1d5db !important; } /* Handle OFF */ .toggle-off .toggle-handle { background-color: #ffffff !important; border: 2px solid #9ca3af !important; box-shadow: 0 1px 2px rgba(0,0,0,.15); } .toggle-handle.btn-light{ background:#198754 !important; border:1px solid #64748b !important; } .form-control:disabled { background-color: #cee7ff; opacity: 1; color:var(--colorletra); font-weight: bold; } input.form-control, select.form-control, textarea.form-control { border: 1px solid #bfddfd; border-radius: 8px; background-color: #fff; transition: border 0.3s, box-shadow 0.3s; } .fs-14{ font-size: 14px; } .fs-12{ font-size: 12px; } .form-control { font-size: 14px; } .btn-etiqueta { color: #fff !important; background-color: var(--colorclaro); border-color: var(--coloroscuro); } /* ====== Botones ====== */ .btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 500; border-radius: calc(var(--shadcn-radius) - 2px) !important; font-size: 0.875rem !important; padding: 0.5rem 1rem !important; transition: color 0.2s, background-color 0.2s, border-color 0.2s !important; letter-spacing: -0.01em; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); height: 2.5rem; /* Force height */ line-height: 1; text-transform: none; } .btn-sm { height: 2rem !important; padding: 0 0.75rem !important; font-size: 0.75rem !important; } /* Bootstrap 5 Colors applied to Shadcn Shape */ .btn-primary { background-color: #0d6efd !important; border-color: #0d6efd !important; color: #fff !important; } .btn-primary:hover { background-color: #0b5ed7 !important; border-color: #0a58ca !important; } .btn-info { background-color: #0dcaf0 !important; border-color: #0dcaf0 !important; color: #000 !important; /* Bootstrap 5 Info text is usually dark */ } .btn-info:hover { background-color: #31d2f2 !important; border-color: #25cff2 !important; } /* Secondary / Outline */ .btn-outline-secondary, .btn-light { background-color: transparent !important; border: 1px solid var(--shadcn-border) !important; color: var(--shadcn-foreground) !important; box-shadow: none !important; } .btn-outline-secondary:hover, .btn-light:hover { background-color: var(--shadcn-accent) !important; color: var(--shadcn-accent-foreground) !important; } /* Success Button - Bootstrap 5 */ .btn-success { background-color: #198754 !important; border-color: #198754 !important; color: #fff !important; } .btn-success:hover { background-color: #157347 !important; border-color: #146c43 !important; } /* Warning/Danger - Bootstrap 5 */ .btn-warning { background-color: #ffc107 !important; border-color: #ffc107 !important; color: #000 !important; } .btn-warning:hover { background-color: #ffca2c !important; border-color: #ffc720 !important; } .btn-danger { background-color: #dc3545 !important; border-color: #dc3545 !important; } .btn-danger:hover { background-color: #bb2d3b !important; border-color: #b02a37 !important; } #paciente.form-control.btn-danger:disabled { color: #fff !important; font-weight: bold; } /* Custom Oscuro Button */ .btn-oscuro { background-color: var(--coloroscuro) !important; border-color: var(--coloroscuro) !important; color: #fff !important; } .btn-oscuro:hover { filter: brightness(0.9); } /* Action Buttons (Outline Colored) */ .btn-outline-info { color: #0284c7 !important; border-color: #e0f2fe !important; background-color: #f0f9ff !important; border: 1px solid transparent !important; } .btn-outline-info:hover { background-color: #e0f2fe !important; border-color: #bae6fd !important; } .btn-outline-success { color: #16a34a !important; border-color: #dcfce7 !important; background-color: #f0fdf4 !important; border: 1px solid #000000 !important; } .btn-outline-success:hover { background-color: #dcfce7 !important; border-color: #bbf7d0 !important; } /* Outline Primary (Soft Blue) */ .btn-outline-primary { color: #2563eb !important; border-color: #dbeafe !important; background-color: #eff6ff !important; border: 1px solid transparent !important; } .btn-outline-primary:hover { background-color: #dbeafe !important; border-color: #bfdbfe !important; } /* Outline Warning (Soft Amber) */ .btn-outline-warning { color: #d97706 !important; border-color: #fef3c7 !important; background-color: #fffbeb !important; border: 1px solid transparent !important; } .btn-outline-warning:hover { background-color: #fef3c7 !important; border-color: #fde68a !important; } /* Outline Danger (Soft Red) */ .btn-outline-danger { color: #dc2626 !important; border-color: #fee2e2 !important; background-color: #fef2f2 !important; border: 1px solid transparent !important; } .btn-outline-danger:hover { background-color: #fee2e2 !important; border-color: #fecaca !important; } /* Outline Dark */ .btn-outline-dark { color: #212529 !important; border-color: #212529 !important; background-color: transparent !important; } .btn-outline-dark:hover { background-color: #212529 !important; color: #fff !important; } .fila-cabecera-proveedor td{ font-weight: 700 !important; background: #f2f2f2 !important; border-top: 2px solid #d0d0d0 !important; } .fila-detalle-concepto td{ background: #ffffff !important; } .fila-debito-automatico td{ background: #e7f1ff !important; } /* ======================================== ESTILOS UNIVERSALES ACTIVE/NOTACTIVE Para todos los componentes Bootstrap 5 ======================================== */ /* Estilos base para cualquier elemento */ .active { transition: all 0.3s ease; } .notActive { transition: all 0.3s ease; } /* RadioBtn Pattern - Mantiene compatibilidad con código existente */ .radioBtn .active { color: #fff !important; background-color: var(--coloroscuro, #0d6efd) !important; border-color: var(--coloroscuro, #0d6efd) !important; font-weight: 500; } .radioBtn .notActive { background-color: #fff !important; color: var(--colorclaro, #0d6efd) !important; border-color: var(--coloroscuro, #0d6efd) !important; } .radioBtn .notActive:hover { background-color: rgba(13, 110, 253, 0.1) !important; } /* Buttons genéricos */ .btn.active { background-color: var(--coloroscuro, #0d6efd) !important; border-color: var(--coloroscuro, #0d6efd) !important; color: #fff !important; font-weight: 500; box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } .btn.notActive { background-color: #fff !important; color: var(--colorclaro, #0d6efd) !important; border-color: var(--coloroscuro, #0d6efd) !important; } .btn.notActive:hover { background-color: rgba(13, 110, 253, 0.05) !important; border-color: var(--coloroscuro, #0d6efd) !important; } /* Button Groups */ .btn-group .btn.active, .btn-group-toggle .btn.active { background-color: var(--coloroscuro, #0d6efd) !important; border-color: var(--coloroscuro, #0d6efd) !important; color: #fff !important; z-index: 1; } /* Navigation Tabs */ .nav-tabs .nav-link.active { background-color: #198754 !important; color: #fff !important; border-color: #198754 !important; font-weight: 500; } .nav-tabs .nav-link.notActive { background-color: transparent; color: #495057; border-color: transparent; } .nav-tabs .nav-link.notActive:hover { border-color: #dee2e6 #dee2e6 #fff; color: #198754; } /* Navigation Pills */ .nav-pills .nav-link.active { background-color: var(--coloroscuro, #0d6efd) !important; color: #fff !important; } .nav-pills .nav-link.notActive { background-color: transparent; color: var(--colorclaro, #0d6efd); } .nav-pills .nav-link.notActive:hover { background-color: rgba(13, 110, 253, 0.1); } /* List Group Items */ .list-group-item.active { background-color: var(--coloroscuro, #0d6efd) !important; border-color: var(--coloroscuro, #0d6efd) !important; color: #fff !important; } .list-group-item.notActive { background-color: #fff; border-color: rgba(0, 0, 0, 0.125); color: #212529; } .list-group-item.notActive:hover { background-color: rgba(13, 110, 253, 0.05); } /* Cards */ .card.active { border-color: var(--coloroscuro, #0d6efd) !important; box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); } .card.notActive { border-color: rgba(0, 0, 0, 0.125); } .card.notActive:hover { border-color: var(--colorclaro, #0d6efd); box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); } /* Badges */ .badge.active { background-color: var(--coloroscuro, #0d6efd) !important; color: #fff !important; } .badge.notActive { background-color: #e9ecef; color: #6c757d; } /* Dropdown Items */ .dropdown-item.active { background-color: var(--coloroscuro, #0d6efd) !important; color: #fff !important; } /* Pagination */ .page-item.active .page-link { background-color: var(--coloroscuro, #0d6efd) !important; border-color: var(--coloroscuro, #0d6efd) !important; } /* Sidebar - Mantiene estilos especiales existentes */ .sidebar-menu a.active { background-color: var(--sidebar-accent, var(--coloroscuro, #0d6efd)); color: var(--sidebar-accent-fg, #fff); font-weight: 700; border-left: 4px solid #fff; } /* Filter Buttons - Contextos específicos */ #tlFilters .btn.active, .tl-filtros .btn.active { background: var(--brand, var(--coloroscuro, #1f3fd1)) !important; color: #fff !important; border-color: var(--brand, var(--coloroscuro, #1f3fd1)) !important; } /* Accesibilidad y estados de foco */ .active:focus, .btn.active:focus { outline: 2px solid var(--coloroscuro, #0d6efd); outline-offset: 2px; } /* Estados deshabilitados */ .active:disabled, .active.disabled { opacity: 0.65; pointer-events: none; } .notActive:disabled, .notActive.disabled { opacity: 0.65; pointer-events: none; } /* Fix: multipleSelect dropdown (.ms-drop) es position:absolute y queda clippeado por overflow:hidden de Bootstrap en .modal-content. Se aplica a modales pequeños con combos (sin scroll interno necesario). */ #modalmotivo .modal-content, #modalmotivo .modal-body { overflow: visible !important; } #modalmotivo .ms-drop { z-index: 9999 !important; } /* Mismo fix para el modal de Editar Concepto (recepcionmercaderia.php): el combo de conceptos no scrolleaba porque el dropdown quedaba clippeado. */ #modalconcepto .modal-content, #modalconcepto .modal-body { overflow: visible !important; } #modalconcepto .ms-drop { z-index: 9999 !important; } /* Modal Transacciones Conciliadas: mas ancha y con scroll interno en el body para que la tabla no desborde el viewport y tape el contenido de atras. */ #modalconciliados .modal-dialog { max-width: 95%; } #modalconciliados .modal-content { max-height: 92vh; } #modalconciliados .modal-body { overflow-y: auto; } .badgetipoconcilia { font-size: 0.85rem; padding: 0.45em 0.75em; }