/* ========================================
   ESTILOS PARA WIDGETS PERSONALIZADOS
   ======================================== */

/* Solo ajustar z-index para que el sidebar esté encima de overlays personalizados */
/* NO modificar position - dejar que Carbon maneje el layout */

/* Forzar que el dashboard use todo el ancho */
[data-extension-slot-name="patient-chart-summary-dashboard-slot"],
[data-extension-slot-name="patient-chart-summary-dashboard-slot"] > div {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Contenedor maestro de widgets personalizados - grid 2x2 a ancho completo */
#custom-widgets-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 1rem !important;
  box-sizing: border-box !important;
}

/* En pantallas pequeñas, apilar verticalmente */
@media (max-width: 900px) {
  #custom-widgets-container {
    grid-template-columns: 1fr !important;
  }
}

/* Contenedor para widgets nativos de OpenMRS (medicamentos, notas, etc) */
#native-widgets-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
  width: 100% !important;
  margin-top: 1rem !important;
}

@media (max-width: 900px) {
  #native-widgets-container {
    grid-template-columns: 1fr !important;
  }
}

/* Estilo común para widgets personalizados */
.custom-widget-card,
#info-general-widget,
#eval-nutri-widget,
#antropometria-widget,
#laboratorio-widget {
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
  overflow: hidden !important;
}

/* ========================================
   FILAS DE MEDICAMENTOS ULTRA COMPACTAS
   ======================================== */

/* Reducir altura de filas en tablas de medicamentos */
[class*="medications"] table tbody tr td,
[class*="Medications"] table tbody tr td,
[class*="orderBasket"] table tbody tr td,
[class*="medicationsDetailsTable"] td,
[class*="activeMedications"] td,
[class*="pastMedications"] td {
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
  line-height: 1.2 !important;
  font-size: 0.8rem !important;
}

/* Reducir altura de filas en listas de medicamentos */
[class*="medications"] [class*="tableRow"],
[class*="Medications"] [class*="tableRow"],
[class*="medicationRecord"],
[class*="MedicationRecord"],
[class*="activeMedications"] tr,
[class*="pastMedications"] tr {
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
  min-height: 24px !important;
  height: auto !important;
}

/* Tablas Carbon Design más compactas en medicamentos */
.cds--data-table tbody tr td {
  padding-top: 0.15rem !important;
  padding-bottom: 0.15rem !important;
  line-height: 1.2 !important;
}

.cds--data-table--compact tbody tr td {
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
}

/* Filas de medicamentos específicas - ultra compactas */
[class*="medicationsList"] [class*="row"],
[class*="MedicationsList"] [class*="row"],
[class*="orderSummary"] [class*="row"],
[class*="drugOrder"] {
  padding: 0.1rem 0.25rem !important;
  margin: 0 !important;
  min-height: 22px !important;
}

/* Reducir espacio entre celdas en tablas de órdenes */
[class*="orderBasket"] table,
[class*="medications"] table {
  border-spacing: 0 !important;
}

/* Headers de tabla más compactos */
[class*="medications"] table thead th,
[class*="Medications"] table thead th,
.cds--data-table thead th {
  padding-top: 0.2rem !important;
  padding-bottom: 0.2rem !important;
  font-size: 0.75rem !important;
}

/* Botones de acción en filas más pequeños */
[class*="medications"] button[class*="action"],
[class*="medications"] [class*="overflow"] {
  padding: 0.1rem !important;
  min-height: 20px !important;
}

/* Contenedor de medicamentos sin espacios extra */
[class*="medicationsContainer"],
[class*="MedicationsContainer"] {
  padding: 0.25rem !important;
}

/* Tags/badges de estado más compactos */
[class*="medications"] [class*="tag"],
[class*="medications"] [class*="badge"],
.cds--tag {
  padding: 0 0.25rem !important;
  font-size: 0.7rem !important;
  min-height: 16px !important;
  line-height: 1 !important;
}

/* ========================================
   SIMPLIFICAR FORMULARIO DE ORDEN DE MEDICAMENTOS
   Solo mostrar: medicamento, instrucciones de texto libre, e instrucciones al paciente
   ======================================== */

/* Ocultar campos de dosificación estructurada */
#doseSelection,
#dosingUnits,
#editRoute,
#editFrequency {
  display: none !important;
}

/* Ocultar los contenedores padre de los campos de dosificación */
#doseSelection + div,
div:has(> #doseSelection),
div:has(> #dosingUnits),
div:has(> #editRoute),
div:has(> #editFrequency) {
  display: none !important;
}

/* Ocultar PRN (según sea necesario) */
#prn,
div:has(> #prn),
label[for="prn"] {
  display: none !important;
}

/* Ocultar campos de duración estructurada pero NO el contenedor si tiene campo personalizado */
#durationInput,
#durationUnitPlaceholder {
  display: none !important;
}
/* Solo ocultar contenedor de durationUnit, NO el de durationInput (para el campo personalizado) */
div:has(> #durationUnitPlaceholder) {
  display: none !important;
}
/* Asegurar que el campo de duración personalizado sea visible */
.custom-duration-container {
  display: block !important;
}
.custom-duration-container input {
  display: block !important;
  pointer-events: auto !important;
}

/* Ocultar campos de dispensación */
#quantityDispensed,
#dispensingUnits,
#prescriptionRefills,
div:has(> #quantityDispensed),
div:has(> #dispensingUnits),
div:has(> #prescriptionRefills) {
  display: none !important;
}

/* Ocultar campo de indicación */
#indication,
div:has(> #indication),
input[name="indication"] {
  display: none !important;
}

/* Ocultar la sección completa de dispensación */
.cds--accordion__item:has(#quantityDispensed),
.cds--accordion__item:has(#prescriptionRefills) {
  display: none !important;
}

/* Ocultar selector de fecha de inicio si existe */
div:has(> input[type="date"]):not(#carga-historica-modal *) {
  display: none !important;
}

/* Ocultar etiquetas de secciones que ya no tienen contenido visible */
/* Dosing section cuando los campos están ocultos */
.formSection:has(#doseSelection):not(:has(#freeTextDosageToggle ~ textarea:not([style*="display: none"]))) > h4 {
  display: none !important;
}

/* ========================================
   ASEGURAR QUE LOS CAMPOS DESEADOS PERMANEZCAN VISIBLES
   ======================================== */

/* Mantener visible el toggle de texto libre y su textarea */
#freeTextDosageToggle,
div:has(> #freeTextDosageToggle),
textarea[name="freeTextDosage"] {
  display: block !important;
}

/* Mantener visible las instrucciones al paciente */
textarea[name="patientInstructions"],
div:has(> textarea[name="patientInstructions"]) {
  display: block !important;
}

/* Asegurar que la búsqueda de medicamentos sea visible */
[class*="drugSearch"],
[class*="DrugSearch"],
div[class*="medicationInfo"] {
  display: block !important;
}

/* ========================================
   OCULTAR BOTÓN "MOSTRAR MÁS" EN BANNER DEL PACIENTE
   ======================================== */
/* Ocultar solo el botón de expandir info del paciente, NO el menú de acciones */
button[class*="contactDetailsButton"],
button[class*="toggleContactDetails"] {
  display: none !important;
}

/* ========================================
   OCULTAR OPCIÓN DE CÁMARA WEB EN ATTACHMENTS
   ======================================== */
/* Ocultar la pestaña de Webcam en el modal de captura de fotos/archivos adjuntos */
/* Carbon Tab con texto "Webcam" o "Cámara web" */
.cds--tabs__nav-item:has(button[aria-controls*="camera"]),
.cds--tabs__nav-item:has(button:contains("Webcam")),
.cds--tab--list button[id*="webcam"],
.cds--tab--list button[aria-controls*="webcam"],
[class*="tabList"] button:nth-child(2),
[class*="cameraSection"] {
  display: none !important;
}

/* Alternativa: ocultar por el índice del tab (webcam suele ser el segundo tab) */
.cds--tabs .cds--tabs__nav-item:nth-child(2) {
  display: none !important;
}

/* Ocultar la sección de vista de cámara si se muestra */
[class*="webcam"],
[class*="Webcam"],
.react-html5-camera-photo {
  display: none !important;
}

/* ========================================
   CALENDARIO PERSONALIZADO EN HOME
   ======================================== */
/* Asegurar que el calendario personalizado sea visible */
#home-calendar-wrapper {
  display: block !important;
}

/* ========================================
   OCULTAR BOTÓN DE AGREGAR PACIENTE
   (Los pacientes se agregan via Google Forms)
   ======================================== */
/* Botón de agregar paciente en la barra superior */
[data-extension-id="add-patient-action"],
[data-extension-id*="add-patient"],
[data-extension-id*="register-patient"],
button[name="AddPatientIcon"],
a[href*="/patient-registration"],
button[aria-label*="Add Patient"],
button[aria-label*="Register Patient"],
button[aria-label*="Agregar paciente"],
button[aria-label*="Registrar paciente"] {
  display: none !important;
}

/* Ocultar el icono de agregar paciente en el header */
[data-extension-slot-name="top-nav-actions-slot"] [data-extension-id*="patient-registration"],
[data-extension-slot-name="top-nav-actions-slot"] a[href*="registration"] {
  display: none !important;
}

/* ========================================
   OCULTAR HERRAMIENTAS DE IMPLEMENTACIÓN
   ======================================== */
[data-extension-id*="implementer"],
[data-extension-id*="tools"],
button[aria-label*="Implementer"],
button[aria-label*="Implementation"],
button[aria-label*="Herramientas"],
button[aria-label*="implementación"],
a[href*="/implementer-tools"] {
  display: none !important;
}

/* ========================================
   OCULTAR OPCIONES DEL MENÚ DE APLICACIÓN (9 puntitos)
   Solo dejar visible: Administración del sistema
   ======================================== */
/* Pantalla de colas / Service Queues */
[data-extension-id*="queue"],
[data-extension-id*="service-queues"],
a[href*="/service-queues"],
a[href*="/queue"] {
  display: none !important;
}

/* Dispensando / Dispensing */
[data-extension-id*="dispensing"],
a[href*="/dispensing"] {
  display: none !important;
}

/* Entrada rápida de datos / Fast Data Entry / Form Entry */
[data-extension-id*="fast-data-entry"],
[data-extension-id*="form-entry"],
[data-extension-id*="form-render"],
a[href*="/form-entry"],
a[href*="/form-render"] {
  display: none !important;
}

/* ========================================
   TABLA DE MEDICAMENTOS MÁS ANGOSTA
   Ocultar columnas innecesarias y reducir ancho
   ======================================== */

/* Ocultar columnas por encabezado de texto */
/* Ruta / Route */
[class*="medications"] th:has([class*="route"]),
[class*="medications"] td:has([class*="route"]),
.cds--data-table th:nth-child(4),
.cds--data-table td:nth-child(4) {
  display: none !important;
}

/* Fecha de inicio / Start date - a veces es redundante */
[class*="medications"] th:has([class*="startDate"]),
[class*="medications"] td:has([class*="startDate"]) {
  display: none !important;
}

/* Reducir el ancho máximo de la tabla de medicamentos */
[class*="medicationsContainer"] table,
[class*="MedicationsContainer"] table,
[class*="activeMedications"] table,
[class*="pastMedications"] table {
  table-layout: fixed !important;
  width: 100% !important;
}

/* Hacer columnas más angostas */
[class*="medications"] th,
[class*="medications"] td,
[class*="Medications"] th,
[class*="Medications"] td {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 120px !important;
}

/* Columna de nombre del medicamento - un poco más ancha */
[class*="medications"] th:first-child,
[class*="medications"] td:first-child,
[class*="Medications"] th:first-child,
[class*="Medications"] td:first-child {
  max-width: 180px !important;
}

/* Columna de acciones - más angosta */
[class*="medications"] th:last-child,
[class*="medications"] td:last-child,
[class*="Medications"] th:last-child,
[class*="Medications"] td:last-child {
  max-width: 60px !important;
  padding: 0 !important;
}

/* Reducir tamaño de iconos de acción */
[class*="medications"] [class*="overflowMenu"],
[class*="medications"] button[class*="action"] {
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 2px !important;
}

/* Texto más pequeño en la tabla */
[class*="medications"] table,
[class*="Medications"] table {
  font-size: 0.75rem !important;
}

/* Reducir ancho total del widget de medicamentos */
[data-extension-id*="medications"],
[class*="medicationsWidget"],
[class*="MedicationsWidget"] {
  max-width: 100% !important;
}

/* Ocultar columna de duración si no es necesaria */
/*
[class*="medications"] th:has([class*="duration"]),
[class*="medications"] td:has([class*="duration"]) {
  display: none !important;
}
*/

/* ========================================
   CAMBIAR ICONO DE CARRITO A MEDICAMENTO
   en la barra lateral derecha (Order Basket)
   ======================================== */

/* Ocultar el icono de carrito original */
button[aria-label="Canasta de órdenes"] svg,
button[aria-label="Order basket"] svg,
button[aria-label="Medicamentos"] svg {
  display: none !important;
}

/* Ocultar botón de listas de pacientes en la barra lateral */
button[aria-label="Patient lists"],
button[aria-label="Listas de pacientes"],
button[aria-label*="patient list"],
button[aria-label*="lista de pacientes"] {
  display: none !important;
}

/* ========================================
   OCULTAR FORMULARIO DE INICIO DE CONSULTA
   (Se procesa automáticamente en segundo plano)
   ======================================== */

/* Ocultar todo el workspace cuando contiene el formulario de visita */
#omrs-workspaces-container:has(form[data-openmrs-role="Start Visit Form"]) {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Ocultar el overlay/backdrop del workspace */
.cds--modal:has(form[data-openmrs-role="Start Visit Form"]),
[class*="workspace"]:has(form[data-openmrs-role="Start Visit Form"]),
[class*="Workspace"]:has(form[data-openmrs-role="Start Visit Form"]) {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Fallback: ocultar el formulario directamente */
form[data-openmrs-role="Start Visit Form"] {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ========================================
   SIMPLIFICAR FORMULARIO DE NOTAS DE VISITA
   ======================================== */

/* Hacer el textarea de notas más grande */
#additionalNote {
  min-height: 300px !important;
  height: 50vh !important;
  max-height: 500px !important;
  width: 100% !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  padding: 12px !important;
  resize: vertical !important;
}

/* Asegurar que el contenedor del textarea use todo el espacio */
#additionalNote + div,
#additionalNote ~ div {
  margin-top: 1rem !important;
}

/* Mostrar icono de píldora estilo outline (igual que los otros iconos) */
button[aria-label="Canasta de órdenes"] > div,
button[aria-label="Order basket"] > div,
button[aria-label="Medicamentos"] > div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

button[aria-label="Canasta de órdenes"] > div::before,
button[aria-label="Order basket"] > div::before,
button[aria-label="Medicamentos"] > div::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  
  
  transform: translate(calc(-50% + 3px), calc(-50% + 3px));
  width: 27px;
  height: 32px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='currentColor' stroke-width='1.5' d='M20.828 11.172a4 4 0 0 0-5.656 0L5.858 20.486a4 4 0 1 0 5.656 5.656l9.314-9.314a4 4 0 0 0 0-5.656zM8.686 23.314l4.243 4.243M16 16l4.243 4.243'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='currentColor' stroke-width='1.5' d='M20.828 11.172a4 4 0 0 0-5.656 0L5.858 20.486a4 4 0 1 0 5.656 5.656l9.314-9.314a4 4 0 0 0 0-5.656zM8.686 23.314l4.243 4.243M16 16l4.243 4.243'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ========================================
   ESTILOS RESPONSIVE PARA MÓVILES
   ======================================== */

@media screen and (max-width: 768px) {
  /* Ocultar texto de ubicación */
  [class*="location"] span:not([class*="icon"]),
  [class*="Location"] span:not([class*="icon"]) {
    display: none !important;
  }

  /* OCULTAR botón de Implementer Tools en móvil */
  [class*="implementer"],
  [class*="Implementer"],
  button[aria-label*="Implementer"],
  button[aria-label*="Tools"],
  [data-extension-id*="implementer"],
  [class*="esm-implementer-tools"] {
    display: none !important;
  }

  /* Ajustar Mis Pacientes para pantalla completa en móvil */
  #mis-pacientes-overlay.active {
    position: fixed !important;
    top: 48px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 12px !important;
    z-index: 100 !important;
    background: #f4f4f4 !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  /* Asegurar que el header y nav estén encima del overlay */
  header,
  .cds--header,
  nav,
  .cds--side-nav,
  .cds--side-nav--expanded,
  .cds--side-nav__overlay,
  .cds--header__menu-trigger,
  .cds--header__action,
  [class*="navbar"],
  [class*="MenuButton"],
  button[aria-label*="menu" i],
  button[aria-label*="Menu" i] {
    z-index: 9000 !important;
  }

  /* El overlay del side-nav debe estar encima de todo cuando está abierto */
  .cds--side-nav__overlay--active {
    z-index: 8999 !important;
  }
}


/* ========================================
   OCULTAR BOTÓN DE NOTAS (BOLÍGRAFO)
   ======================================== */
/* Ocultar el botón de notas con el ícono de bolígrafo */
div:has(> svg use[href="#omrs-icon-pen"]),
button:has(svg use[href="#omrs-icon-pen"]),
a:has(svg use[href="#omrs-icon-pen"]),
[data-extension-id*="visit-note"],
[data-extension-id*="clinical-note"],
[data-extension-id*="note-action"] {
  display: none !important;
}

/* Mostrar campo de fecha en modal de carga historica */
#carga-historica-modal div:has(> input[type="date"]) {
  display: block !important;
}
#carga-historica-modal .ch-form-group {
  display: block !important;
}

/* Ocultar opcion de Citas en navbar del paciente */
[data-extension-slot-name="patient-chart-dashboard-slot"] a[href*="appointments"],
[data-extension-slot-name="patient-chart-dashboard-slot"] button:has(span:contains("Citas")),
nav a[href*="/patient/"][href*="/appointments"],
.cds--side-nav__link[href*="appointments"] {
  display: none !important;
}


/* Ocultar opcion Citas en menu lateral del paciente */
a[href*="/chart/Appointments"],
a[href*="/chart/appointments"],
[href*="Appointments"].cds--side-nav__link,
.cds--side-nav__menu-item a[href*="Appointments"],
.cds--side-nav a[href*="Appointments"] {
  display: none !important;
}

/* ========================================
   LIMPIEZA DE TABLA DE MEDICAMENTOS ACTIVOS
   JavaScript limpia el contenido, CSS solo como fallback
   ======================================== */

/* NO ocultar con CSS - JavaScript se encarga de limpiar */
/* Solo ocultar etiquetas específicas como fallback */
[class*="medications-details-table__label01"],
span[class*="__label01"] {
  display: none !important;
}

[class*="medications-details-table__dosage"],
span[class*="__dosage"] {
  display: none !important;
}