/*================================================================================ Item Name: Materialize - Material Design Admin Template Version: 5.0 Author: PIXINVENT Author URL: https://themeforest.net/user/pixinvent/portfolio ================================================================================ NOTE: ------ PLACE HERE YOUR OWN CSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS. WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS. */ .modal-content-select2-container { z-index: 10000; } .select2-container--open { z-index: 10000; } .title-table-medicamentos { font-size: 10px; } @media only screen and (min-width: 800px) { .title-table-medicamentos { font-size: 9px; } } .modal-header-modify { width: 95%; max-height: 90%; z-index: 99999999 !important; } .item-text { text-align: justify; white-space: normal !important; text-transform: lowercase; /* width: 20%; */ } .item-text:first-letter { text-transform: capitalize; } .item-text-none { text-align: justify; white-space: normal !important; text-transform: none; } .chip.white:hover { background-color: #00838f !important; } .dropdown-placa { width: 250px !important; /* top: 1px !important; */ height: auto !important; } /* .dropdown-placa-left eliminado 2026-07-10: era un corrimiento de -170px para que los menús de los dientes del borde (27/28/37/38) no se salieran de la celda. Desde que los menús se montan en (container: document.body), ese left absoluto los mandaba al borde izquierdo de la PANTALLA. Materialize ahora los alinea solo contra el viewport. */ table.dataTable tbody tr.selected { background-color: #b0bed9; } .overlay-image-placa-uno-dos { width: 90%; height: 90%; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); } .overlay-image-placa-tres-cuatro { width: 90%; height: 90%; position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%); } .overlay-imagen-diente-supernumerario { position: absolute; top: 14%; transform: translate(-5%, -50%); right: 0%; width: 24px; height: 44px; } .dropdown-imagen { width: 20px; height: 20px; position: relative; top: 0%; left: 0%; vertical-align: middle; margin: 0 12px 0 0; } .dropdown-imagen-supernumerario { width: 20px; height: 26px; position: relative; top: 0%; left: 0%; vertical-align: middle; margin: 0 12px 0 0; } .options-dropdown { padding: 0px !important; } .main-overlay-image { background-image: url(../../images/gallery/portada-historia-clinica-2.jpg); background-repeat: no-repeat; background-size: cover; } .image-formula { height: 64px; width: 64px; } .registro { display: flex; flex-direction: column; justify-content: center; align-items: center; } .registro-item { width: 50% !important; } .center-indice { display: flex; flex-direction: row; justify-content: center; align-items: center; } .triangle-right { width: 0; height: 5px; border-top: 20px solid transparent; border-left: 25px solid #cccccc75; border-bottom: 20px solid transparent; left: -5px; border-right: 20px; display: flex; justify-content: flex-end; align-items: flex-end; position: relative; border-radius: 20px; transition: 0.2s ease-in-out all; cursor: pointer; box-sizing: unset; } .triangle-down { width: 5px; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 25px solid #cccccc75; top: 15px; display: flex; justify-content: flex-end; align-items: flex-end; position: relative; border-radius: 20px; transition: 0.2s ease-in-out all; cursor: pointer; box-sizing: unset; } .triangle-left { width: 0; height: 5px; border-top: 20px solid transparent; border-right: 25px solid #cccccc75; border-bottom: 20px solid transparent; left: 5px; display: flex; justify-content: flex-end; align-items: flex-end; position: relative; border-radius: 20px; transition: 0.2s ease-in-out all; cursor: pointer; box-sizing: unset; } .triangle-up { width: 5px; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 25px solid #cccccc75; position: relative; top: -15px; display: flex; justify-content: flex-end; align-items: flex-end; border-radius: 20px; transition: 0.2s ease-in-out all; cursor: pointer; box-sizing: unset; } .triangle-up:hover { transform: scale(1.05); } .triangle-left:hover { transform: scale(1.05); } .triangle-down:hover { transform: scale(1.05); } .triangle-right:hover { transform: scale(1.05); } .descripcion-consulta { text-align: justify; white-space: normal !important; overflow-wrap: break-word; width: 50%; padding: 1rem; border-radius: 10px; border-top: 0.5px solid #ce8e7b; border-bottom: 0.5px solid #ce8e7b; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); position: relative; overflow: hidden; cursor: pointer; transition: 0.2s ease-in-out all; } .evolucion-tratamiento { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; white-space: normal !important; overflow-wrap: break-word; } .evolucion-tratamiento-div { display: flex; flex-direction: row; justify-content: space-between; width: 100%; } .evolucion-tratamiento-div div { width: 50%; } .bagdge-radius-6 { border-radius: 6px !important; } .content-radiografias { padding: 1rem; border-radius: 10px; border-top: 0.5px solid #ce8e7b; border-bottom: 0.5px solid #ce8e7b; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } .habilitar-evolucion { padding: 1rem; border-radius: 10px; border-top: 0.5px solid #ce8e7b; border-bottom: 0.5px solid #ce8e7b; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } .section-content { padding: 1rem; border-radius: 10px; border-top: 0.5px solid #ce8e7b; border-bottom: 0.5px solid #ce8e7b; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); width: 100%; } .evolucion-diagnostico { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; } .firma-imagen { width: 64px !important; height: 64px !important; } .datos_paciente { text-transform: uppercase; } .evolucion-separacion { border-bottom: 6px solid #00838f; padding-bottom: 10px; } .fila-seleccionada { background-color: #00838f !important; color: white !important; } .header-search-wrapper { width: calc(100% - 950px) !important; } .logo-barra { width: 350px; height: 70px; vertical-align: middle; } .car-header--modified { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; } .car-header--modified-column { display: flex; flex-direction: column; justify-content: center; align-items: center; width: auto; } #ul-horizontal-nav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow-x: auto; width: 96%; margin-left: 23px; white-space: nowrap; } @media print { body { background-color: none; } .non-printable { display: none !important; } .printable { display: block; } } .table-screen { overflow: inherit; width: 100%; } .custom-badges { font-size: 0.8rem; font-weight: 300; color: #fff; display: inline-block; float: none; margin-left: auto; line-height: 22px; box-sizing: border-box; min-width: 3rem; height: 22px; padding: 0 6px; text-align: center; border-radius: 6px !important; background-color: #00bcd4 !important; white-space: normal !important; overflow-wrap: break-word; cursor: pointer; } .canvas-container { width: 100vw; height: 100vh; } .canvas-container img { width: 100vw; height: 100vh; } @media only screen and (min-width: 500px) and (max-width: 800px) { .table-screen-m { overflow-x: auto; width: 100%; } } @media only screen and (min-width: 801px) and (max-width: 1380px) { .table-screen-l { overflow-x: auto; width: 100%; } } @media only screen and (min-width: 1381px) { .table-screen-xl { overflow: inherit; width: 100%; } } .section-qr { text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; } .btn-outline-secondary { color: #6d788d; border-color: #6d788d; background: transparent; } .btn { cursor: pointer; display: inline-flex !important; align-items: center; justify-content: center; text-transform: capitalize; letter-spacing: 0.4px; } .procedimiento-detalle { display: none; background: #fafafa; padding: 1rem; border-radius: 5px; border: 1px solid #ccc; } .consentimiento-item { margin-bottom: 1rem; display: flex; flex-wrap: wrap; } .nombre-consentimiento { display: flex; align-items: center; } .detalle-consentimiento { display: flex; align-items: flex-start; } @media screen and (max-width: 600px) { .consentimiento-item { flex-direction: column; } } .checkbox-wrapper { display: flex; align-items: start; } .checkbox-wrapper label { margin-right: 20px; } .seccion-procedimiento { margin-bottom: 2rem; } .firma-label { display: block; margin-bottom: 8px; font-size: 1.1rem; color: #444; } /* .firma-contenedor { border: 1px solid #ccc; width: 100%; max-width: 520px; margin: 0 auto 10px auto; background-color: #fff; touch-action: none; } */ .firma-container { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 600px; height: 250px; margin: 0 auto; } .justify-text { text-align: justify; } .firma-contenedor { width: 100%; max-width: 500px; height: 200px; border: 1px solid #ccc; margin: 10px auto; background-color: #fff; position: relative; overflow: hidden; } canvas#canvas-firma-revoca { width: 100%; height: 200px; cursor: pointer; } canvas#canvas-firma-paciente { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; pointer-events: auto; } firma-datos-adicionales { margin-top: 20px; font-size: 0.95rem; color: #333; } .firma-datos-adicionales p { margin: 0.2rem 0; } .firma-datos-adicionales strong { font-weight: 600; } #canvas-firma { border: 2px solid #ccc; border-radius: 6px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); touch-action: none; /* para que el touch en móviles funcione bien */ background-color: #fff; max-width: 100%; } #canvas-firma-revocatoria { border: 2px solid #ccc; border-radius: 6px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); touch-action: none; /* para que el touch en móviles funcione bien */ background-color: #fff; max-width: 100%; } .btn-limpiar { color: red; font-weight: bold; cursor: pointer; margin-top: 10px; display: inline-block; } .btn-limpiar-revocatoria { color: red; font-weight: bold; cursor: pointer; margin-top: 10px; display: inline-block; } .info { margin-top: 12px; color: #555; font-size: 14px; font-weight: bold; } .contenedor-canvas { width: 100%; max-width: 600px; margin: auto; } .contenedor-canvas-firma-profesional { width: 100%; max-width: 600px; margin: auto; display: flex; justify-content: center; align-items: center; height: 150px; border: 2px solid #ccc; border-radius: 6px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); touch-action: none; background-color: #fff; max-width: 100%; width: 600px; } .consent-card { background-color: #fff; border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); margin-bottom: 12px; padding: 16px; transition: all 0.3s ease; display: flex; justify-content: space-between; align-items: center; } .consent-card:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } .consent-info { flex: 1; } .consent-title { font-weight: 600; font-size: 1.1rem; margin-bottom: 4px; color: #1e1e1e; } .consent-date { font-size: 0.85rem; color: #777; } .edit-button { background: transparent; border: none; color: #007aff; font-size: 1.3rem; cursor: pointer; transition: color 0.3s ease; } .edit-button:hover { color: #005bb5; } .modal-footer-content { display: flex; justify-content: flex-end; align-items: center; width: 100%; } .boton-flotante-editar { position: absolute; bottom: 12px; right: 12px; background-color: #25d366; /* verde estilo WhatsApp */ color: #fff; border: none; border-radius: 50%; width: 42px; height: 42px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s ease-in-out; z-index: 10; } .boton-flotante-editar:hover { background-color: #1ebe5d; transform: scale(1.1); } .boton-flotante-editar i { font-size: 22px; } .editable-container { position: relative; } .procedimiento-detalle[contenteditable="true"] { border: 1px dashed #b2dfdb; background-color: #f9f9f9; padding: 10px; border-radius: 8px; transition: background-color 0.2s ease, border 0.2s ease; } /* .procedimiento-detalle { transition: background-color 0.2s ease, border 0.2s ease; } */ .btn-edit { position: absolute; bottom: 10px; right: 15px; background-color: #25d366; color: white; border: none; border-radius: 50%; padding: 10px; cursor: pointer; transition: background-color 0.3s; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } .btn-edit:hover { background-color: #1ebe5d; } .editable-activo { border: 1px dashed #ccc; background-color: #fffef2; padding: 10px; border-radius: 6px; } /* Detalle Historia Clínica Styles */ /*================================================================================ Item Name: Materialize - Material Design Admin Template Version: 5.0 Author: PIXINVENT Author URL: https://themeforest.net/user/pixinvent/portfolio ================================================================================ NOTE: ------ PLACE HERE YOUR OWN CSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS. WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS. */ /* ==================================== HISTORIAS - TABLA DE HISTORIAS CLÍNICAS ==================================== */ /* Remover los símbolos de expansión del responsive de DataTables */ #historias-list-datatable tbody td::before, #historias-list-datatable tbody td:empty::before { content: none !important; display: none !important; } /* ==================================== ESTILOS PARA COLUMNA DE CONTROL ==================================== */ /* Desactiva pseudo-elemento del responsive por seguridad (si quedara activo) */ #historias-list-datatable td.dtr-control::before { content: none !important; display: none !important; } /* Columna de expandir, angosta */ #historias-list-datatable th.dt-control, #historias-list-datatable tbody td.dt-control-cell { width: 28px !important; min-width: 28px !important; max-width: 28px !important; padding-left: 0 !important; padding-right: 0 !important; text-align: center !important; padding: 8px 4px !important; vertical-align: middle !important; white-space: nowrap !important; } #historias-list-datatable th.dt-control-cell { font-size: 0; /* oculta “Expandir” */ } #historias-list-datatable th.dt-control-cell::after { content: "↕"; font-size: 14px; } #historias-list-datatable col:nth-child(1) { width: 28px !important; } /* El contenedor del icono */ #historias-list-datatable .dt-control-icon { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 4px; border-radius: 4px; transition: background-color 0.2s ease, color 0.2s ease; user-select: none; } /* Asegura que el icono no “infle” el ancho */ #historias-list-datatable .dt-control-icon .material-symbols-outlined { font-size: 18px; line-height: 18px; } #historias-list-datatable .dt-control-icon:hover { background-color: #e3f2fd; } #historias-list-datatable .dt-control-icon i { font-size: 22px; color: #666; font-weight: 300; } /* ==================================== ESTILOS PARA FILAS CERRADAS ==================================== */ #historias-list-datatable tr.historia-cerrada { background-color: #fdecea !important; color: #c43b3b; } #historias-list-datatable tr.historia-cerrada td { color: #c43b3b; border-top-color: #f5bfb3; border-bottom-color: #f5bfb3; } #historias-list-datatable tr.historia-cerrada .btn-floating.historia-cerrada-icons { background-color: #c43b3b !important; } #historias-list-datatable tr.historia-cerrada .btn-floating.historia-cerrada-icons i { color: white !important; } /* ==================================== ESTILOS PARA PANEL DE DETALLE ==================================== */ .detail-panel-wrapper { padding: 0; width: 100%; } .detail-panel { background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); margin: 12px; border-left: 4px solid #2196f3; animation: slideDown 0.3s ease-out; overflow: hidden; } .detail-panel.detail-cerrada { border-left-color: #c43b3b; } .detail-panel.detail-abierta { border-left-color: #4caf50; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .detail-header { background-color: #f5f5f5; padding: 16px; border-bottom: 1px solid #e0e0e0; } .detail-panel.detail-cerrada .detail-header { background-color: #fdecea; border-bottom-color: #f5bfb3; } .detail-panel.detail-abierta .detail-header { background-color: #e8f5e9; border-bottom-color: #c8e6c9; } .detail-title { margin: 0; font-size: 16px; font-weight: 600; color: #2196f3; letter-spacing: 0.5px; } .detail-panel.detail-cerrada .detail-title { color: #c43b3b; } .detail-panel.detail-abierta .detail-title { color: #2e7d32; } .detail-content { padding: 20px; } .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; row-gap: 16px; } .detail-item { display: flex; flex-direction: column; gap: 6px; } .detail-item-full { grid-column: 1 / -1; } .detail-label { font-size: 11px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 0.8px; } .detail-value { font-size: 14px; color: #333; font-weight: 500; word-break: break-word; line-height: 1.4; } .detail-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; width: fit-content; } .historia-abierta-badge { background-color: #e8f5e9; color: #2e7d32; } .historia-cerrada-badge { background-color: #fdecea; color: #c43b3b; } .detail-badge i { font-size: 18px; } /* Fila secundaria del detalle */ #historias-list-datatable tr.dt-child-row { background-color: white !important; border: none !important; } #historias-list-datatable tr.dt-child-row td { padding: 0 !important; border: none !important; background-color: white !important; } #historias-list-datatable tr.fila-seleccionada { background-color: #f9f9f9 !important; } /* Responsive */ @media (max-width: 768px) { .detail-grid { grid-template-columns: 1fr; } .detail-panel { margin: 8px; } .detail-content { padding: 12px; } } /* ------------------------------------------------------------------ 2026-07-07 · Alturas mínimas para los contenedores que el JS llena después de cargar (secciones 2-8 y odontogramas del formulario de historia). Evita que la página "salte" y muestre huecos en blanco mientras se construye el contenido (reduce CLS). ------------------------------------------------------------------ */ #tabla-antecedentes, #tabla-examen-estomatologico, #tabla-articulacion-mandibular, #tabla-examen-pulpar, #tabla-tejidos-oclusion, #tabla-alteraciones-periodontales { min-height: 140px; } #tabla-placa-dental, #tabla-placa-dental-final, #tabla-placa-dental-bacteriana { min-height: 260px; } /* ------------------------------------------------------------------ 2026-07-09 · Skeleton loaders del formulario de historia clínica. Bloques shimmer que ocupan el área aproximada del contenido real mientras el JS lo construye — el usuario ve QUÉ viene y DÓNDE. ------------------------------------------------------------------ */ @keyframes duo-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .duo-skeleton-row, .duo-skeleton-tooth { background: #eef1f4 linear-gradient(90deg, #eef1f4 25%, #e0e5ea 37%, #eef1f4 63%); background-size: 800px 100%; animation: duo-shimmer 1.4s ease-in-out infinite; border-radius: 6px; } .duo-skeleton-row { height: 34px; margin: 10px 0; } .duo-skeleton-row.duo-skeleton-header { height: 22px; width: 45%; } .duo-skeleton-odonto { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 6px; } .duo-skeleton-tooth { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; } /* ------------------------------------------------------------------ 2026-07-09 · content-visibility: el navegador NO calcula layout ni pinta el contenido de estas cajas mientras estén fuera de pantalla. Con miles de nodos (odontograma ≈ 3.200), esto elimina el bloqueo del scroll y del main thread al construirse las secciones. contain-intrinsic-size reserva alto estimado (la barra de scroll no salta). Navegadores sin soporte: lo ignoran, sin efecto. ------------------------------------------------------------------ */ #tabla-antecedentes, #tabla-examen-estomatologico, #tabla-articulacion-mandibular, #tabla-examen-pulpar, #tabla-tejidos-oclusion, #tabla-alteraciones-periodontales { content-visibility: auto; contain-intrinsic-size: auto 320px; } #tabla-placa-dental, #tabla-placa-dental-final, #tabla-placa-dental-bacteriana { content-visibility: auto; contain-intrinsic-size: auto 340px; } /* pipeline ship verificado 2026-07-09 */ /* ------------------------------------------------------------------ 2026-07-09 · Menús del odontograma (estados del diente): montados en (ver init de .dropdown-trigger) + altura máxima con scroll interno — la lista de 24 estados ya no se corta contra el contenedor, el header fijo ni el borde de la pantalla. Aplica a odontograma inicial, final y control de placa bacteriana (create y update). ------------------------------------------------------------------ */ [id^="dropdown-inicial-"].dropdown-content, [id^="dropdown-placa-"].dropdown-content { max-height: 65vh; overflow-y: auto; z-index: 10000; } /* ── Acciones de impresión de la historia clínica ──────────────────── */ .duo-print-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 2px; } .duo-print-btn { display: inline-flex; align-items: center; gap: 6px; background: #0f3d3a; color: #fff; border: 0; border-radius: 6px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s, box-shadow 0.15s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); } .duo-print-btn:hover { background: #16564f; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22); } .duo-print-btn .material-icons { font-size: 18px; line-height: 1; } .duo-print-btn-sec { background: #fff; color: #0f3d3a; border: 1px solid #b2dfdb; } .duo-print-btn-sec:hover { background: #e0f2f1; }