/* =========================================================
   HCAPP custom.css (versión final corregida)
   - Se han corregido errores sintácticos y duplicados.
   - Se unificaron definiciones relevantes (cabecero agenda).
   - Se definen variables CSS por defecto para evitar faltas si JS no las setea.
   - No se fuerzan cambios de comportamiento: se conservan breakpoints y decisiones previas.
   ========================================================= */

/* Variables por defecto (puedes sobreescribir desde JS si necesitas precisión) */
:root {
  --agenda-header-top: 54px; /* compensación vertical por defecto para header fijo */
  --agenda-header-h: 64px;   /* altura estimada del header de la agenda */
}

/* ===== Botones inferiores: tamaño fijo y uniforme ===== */
.botones-consulta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  border-top: 1px solid #dee2e6;
  padding-top: 0.75rem;
}

/* Tamaño principal de los botones de la barra inferior */
div.botones-consulta > button.btn,
div.botones-consulta > #delete-step1 > button.btn {
  width: 180px;
  height: 42px;
  border-radius: 6px;
  font-size: 0.9rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  white-space: nowrap;
}

/* Caso especial: botón Eliminar inicial dentro del contenedor dinámico
   NOTE: :has() no está soportado en todos los navegadores (especialmente versiones antiguas de Firefox).
   Si necesitas compatibilidad amplia añade desde JS la clase `has-delete-btn` al contenedor #delete-step1
   y pon el selector alternativo más abajo (está documentado). */
.botones-consulta #delete-step1:has(> button.btn-outline-danger) {
  display: inline-block;
  width: 180px;
}
.botones-consulta #delete-step1 > button.btn-outline-danger {
  width: 100%;
  height: 42px;
}

/* Fallback para navegadores sin :has() (requiere que tu JS añada la clase `has-delete-btn` al nodo #delete-step1)
   Ejemplo JS (si lo añades): document.querySelector('#delete-step1')?.classList.add('has-delete-btn'); */
.botones-consulta #delete-step1.has-delete-btn {
  display: inline-block;
  width: 180px;
}

/* En móvil: dos por fila exactos */
@media (max-width: 768px) {
  div.botones-consulta > button.btn,
  div.botones-consulta > #delete-step1 > button.btn {
    width: calc(50% - 0.25rem);
  }
  .botones-consulta #delete-step1:has(> button.btn-outline-danger),
  .botones-consulta #delete-step1.has-delete-btn {
    width: calc(50% - 0.25rem);
  }
}

/* ==== Botones del cuadro de confirmación de eliminación ==== */
.alert.alert-danger,
.alert.alert-warning {
  text-align: center;
}

.alert.alert-danger div,
.alert.alert-warning div {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.alert.alert-danger button.btn,
.alert.alert-warning button.btn {
  flex: 1 1 0;
  min-width: 120px;
  height: 42px;
  white-space: nowrap;
}

/* ===== Compactar cabecera paciente en consulta_panel.html ===== */
#consulta-contenedor + .container-fluid .card.mb-3,
.container-fluid.my-3 > .card.mb-3 {
  margin: 0 0 0.5rem 0;
  box-shadow: none;
}

.container-fluid.my-3 > .card.mb-3 > .card-body {
  padding: 0.25rem 0.5rem;
  gap: 0.1rem;
}

.container-fluid.my-3 > .card.mb-3 h5 {
  margin: 0;
  line-height: 1.1;
  font-size: 1rem;
  gap: 0.3rem;
}

.container-fluid.my-3 > .card.mb-3 h5 span {
  font-size: 1rem;
}

.container-fluid.my-3 > .card.mb-3 h5 small {
  font-size: 0.85rem;
}

.container-fluid.my-3 > .card.mb-3 p {
  margin: 0;
  line-height: 1.1;
  font-size: 0.8rem;
}

.container-fluid.my-3 > .card.mb-3 .btn {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
}

/* ===== Eliminar margen superior del contenedor en consulta_panel.html ===== */
.container-fluid.my-3 {
  margin-top: 0;
  padding-top: 0;
}

/* ===== Fondo verdoso muy claro en cabecera paciente ===== */
.container-fluid.my-3 > .card.mb-3 {
  background-color: #f8fff8;
  border: 2px solid #006B46;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 107, 70, 0.2);
}

/* ===== Botón "Volver a pacientes" ===== */
.container-fluid.my-3 > .card.mb-3 .btn-outline-secondary {
  background-color: #006B46;
  color: #fff;
  border-color: #006B46;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.2rem 0.7rem;
  transition: all 0.2s ease;
}
.container-fluid.my-3 > .card.mb-3 .btn-outline-secondary:hover {
  background-color: #005a3a;
  border-color: #005a3a;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 107, 70, 0.3);
}

/* ===== Contenedor de detalle de consulta ===== */
#consulta-detalle {
  background-color: #f8fff8;
  border: 2px solid #006B46;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 107, 70, 0.2);
  padding: 0.75rem;
  margin-top: 0.5rem;
}
#panel-izquierdo,
#panel-derecho {
  align-self: stretch;
}
.alert-clinica {
  padding: 0.25rem 0.5rem;
  margin-bottom: 0;
  font-size: 0.9rem;
  line-height: 1.2;
}
#alertas-paciente {
  margin-bottom: 0.5rem;
}
#alertas-paciente .btn-outline-danger.btn-sm {
  height: 100%;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  line-height: 1.2;
  display: flex;
  align-items: center;
}
#alertas-paciente.m-2 {
  margin-top: -0.3rem;
}

/* Corregido: padding-top con valor válido */
#consulta-detalle .card-body,
#consulta-detalle {
  padding-top: 0.1rem;
}

/* === Contenedor principal de la vista de consulta === */
.container-fluid.my-3 {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* ===== Panel listado (izquierdo) ===== */
#panel-izquierdo {
  background-color: #fff;
  border: 2px solid #006B46;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 107, 70, 0.2);
  padding: 0.5rem;
}
#panel-izquierdo .list-group {
  border: none;
  background: transparent;
}
#panel-izquierdo .list-group-item {
  border: 1px solid #dee2e6;
  margin-bottom: 0.1rem;
  border-radius: 4px;
}

/* ===== Panel derecho: detalles del paciente ===== */
#patient-detail-panel {
  border: 2px solid #006B46;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  background-color: #ffffff;
  padding: 1rem;
}
#patient-detail-panel .card {
  border: 2px solid #006B46;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
}
#patient-detail-panel .card-header {
  background-color: #006B46;
  color: #ffffff;
  font-weight: 600;
}
#patient-detail-panel .card-body {
  background-color: #ffffff;
}
#patient-documents {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background-color: #ffffff;
  padding: 1rem;
}

/* ===== Botones del encabezado del paciente ===== */
#patient-detail-panel .btn {
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.25s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Verde (ver) */
#patient-detail-panel .btn-ver {
  background: linear-gradient(180deg, #00995e 0%, #007c4e 100%);
  color: #ffffff;
  border: 1px solid #005c3c;
}
#patient-detail-panel .btn-ver:hover {
  background: linear-gradient(180deg, #00b36b 0%, #008c58 100%);
  box-shadow: 0 3px 6px rgba(0, 90, 50, 0.4);
  transform: translateY(-1px);
}

/* Dorado (editar) */
#patient-detail-panel .btn-editar {
  background: linear-gradient(180deg, #ffd54f 0%, #ffca28 100%);
  color: #4b3b00;
  border: 1px solid #d9a400;
}
#patient-detail-panel .btn-editar:hover {
  background: linear-gradient(180deg, #ffe082 0%, #ffd54f 100%);
  color: #2e2300;
  box-shadow: 0 3px 6px rgba(217, 164, 0, 0.4);
  transform: translateY(-1px);
}

/* Rojo (eliminar) */
#patient-detail-panel .btn-eliminar {
  background: linear-gradient(180deg, #ff5c5c 0%, #e53935 100%);
  color: #ffffff;
  border: 1px solid #b71c1c;
}
#patient-detail-panel .btn-eliminar:hover {
  background: linear-gradient(180deg, #ff7676 0%, #f44336 100%);
  box-shadow: 0 3px 6px rgba(183, 28, 28, 0.45);
  transform: translateY(-1px);
}
#patient-detail-panel .btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ===== Cabecera verde reutilizable ===== */
.clinic-header-green {
  background-color: #006B46;
  color: #ffffff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 0.6rem 1rem;
  margin: -0.5rem -0.5rem 1rem -0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.clinic-header-green h4 {
  color: #ffffff;
  font-weight: 600;
}

/* Código de clínica en el encabezado */
.clinic-header-green .clinic-code {
  font-size: 0.9rem;
  font-weight: normal;
}

/* Número HC del paciente en el encabezado */
.clinic-header-green .hc-number,
#patient-detail-panel .hc-number {
  font-size: 0.9rem;
  font-weight: normal;
}

/* Cuando clinic-header-green se usa dentro del header fijo de la agenda, anular margen negativo
   para evitar solapamientos visuales */
.agenda-fixed-header .clinic-header-green {
  margin: 0;
  border-radius: 0;
  padding: 0.6rem 1rem;
}

/* ===== Botones dentro de clinic-header-green ===== */
.clinic-header-green .btn-ver {
  background: linear-gradient(180deg, #00995e 0%, #007c4e 100%);
  color: #ffffff;
  border: 1px solid #005c3c;
}
.clinic-header-green .btn-ver:hover {
  background: linear-gradient(180deg, #00b36b 0%, #008c58 100%);
  box-shadow: 0 3px 6px rgba(0, 90, 50, 0.4);
  transform: translateY(-1px);
}
.clinic-header-green .btn-editar {
  background: linear-gradient(180deg, #ffd54f 0%, #ffca28 100%);
  color: #4b3b00;
  border: 1px solid #d9a400;
}
.clinic-header-green .btn-editar:hover {
  background: linear-gradient(180deg, #ffe082 0%, #ffd54f 100%);
  color: #2e2300;
  box-shadow: 0 3px 6px rgba(217, 164, 0, 0.4);
  transform: translateY(-1px);
}
.clinic-header-green .btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* === AGENDA RESPONSIVE HCAPP === */
@media (max-width: 991.98px) {
  .clinic-header-green {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .agenda-semana .col-md-3,
  .agenda-semana .col-lg-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .agenda-dia,
  .agenda-semana .card {
    margin-bottom: 0.75rem;
  }
  .agenda-mes {
    overflow-x: auto;
  }
  .agenda-mes table {
    min-width: 600px;
  }
}

/* Semana: resalta hoy */
.agenda-semana .card.is-today {
  outline: 3px solid #FFD54F;
  box-shadow: 0 0 0 3px rgba(255, 213, 79, 0.35);
}
.agenda-semana .card.is-today .card-header {
  background-color: #008c58;
}

/* Mes: resalta hoy */
.agenda-mes td.is-today {
  box-shadow: inset 0 0 0 3px #FFD54F;
  position: relative;
  z-index: 1;
}

/* Cabecero agenda (definición unificada y final) */
.agenda-fixed-header {
  position: fixed;
  top: var(--agenda-header-top, 0);
  left: 0;
  right: 0;
  z-index: 1040;
  background: #006B46;
}

/* Ajuste interno cuando está fijo a ancho completo */
.agenda-fixed-header .clinic-header-green {
  background-color: transparent;
  margin: 0;
  border-radius: 0;
  padding: 0.6rem 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Separación del contenido respecto al cabecero fijo (usa variable de altura si JS la define) */
.agenda-content {
  padding-top: calc(var(--agenda-header-h, 64px) + 0.5rem);
}

/* Responsive para cabecero fijo */
@media (max-width: 575.98px) {
  .agenda-fixed-header .clinic-header-green {
    padding: 0.4rem 0.6rem;
    gap: 0.25rem;
  }
  .agenda-fixed-header .clinic-header-green h4 {
    font-size: 1.05rem;
    margin-bottom: 0;
  }
  .agenda-fixed-header .clinic-header-green .agenda-subtitle {
    display: none;
  }
  .agenda-fixed-header .clinic-header-green .form-select-sm,
  .agenda-fixed-header .clinic-header-green .btn-sm {
    padding: 0.15rem 0.35rem;
    font-size: 0.8rem;
    line-height: 1.1;
  }
}

/* (fragmento añadido — no rompe nada; colócalo al final de tu archivo) */

/* Permitir que week-row reciba padding-inline sin romper layout y facilitar centrado */
.week-row {
  box-sizing: border-box;
}

/* Para la vista mensual, si en tu diseño quieres que haya scroll horizontal activa estas reglas.
   Están comentadas por defecto para no forzar comportamiento en escritorio:*/
   .agenda-mes { overflow-x: auto; }
   .agenda-mes table { min-width: 900px; }

/* ===== Estilos para Offcanvas de Nueva Cita ===== */

/* Cuerpo del offcanvas sin fondo especial */
#offcanvas-cita-body {
  padding: 1rem;
  padding-top: 3rem; /* Espacio para evitar solapamiento con el header */
}

/* Fondo verde muy claro en el contenedor interno del formulario */
#offcanvas-cita-body .card {
  background-color: #f8fff8;
  border: 3px solid #006B46 !important;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 107, 70, 0.15);
}

/* Bordes más suaves para inputs de texto */
#offcanvas-cita-body input.form-control,
#offcanvas-cita-body input.form-control-sm {
  border: 2px solid #78c2a4 !important;
  background-color: #ffffff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#offcanvas-cita-body input.form-control:focus,
#offcanvas-cita-body input.form-control-sm:focus {
  border-color: #00995e !important;
  box-shadow: 0 0 0 3px rgba(0, 107, 70, 0.15) !important;
  outline: none;
}

/* Bordes más suaves para textarea */
#offcanvas-cita-body textarea.form-control,
#offcanvas-cita-body textarea.form-control-sm {
  border: 2px solid #78c2a4 !important;
  background-color: #ffffff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#offcanvas-cita-body textarea.form-control:focus,
#offcanvas-cita-body textarea.form-control-sm:focus {
  border-color: #00995e !important;
  box-shadow: 0 0 0 3px rgba(0, 107, 70, 0.15) !important;
  outline: none;
}

/* Botón principal "Guardar cita" con estilo institucional prominente */
#offcanvas-cita-body .btn-ver,
#offcanvas-cita-body button.btn-ver,
#offcanvas-cita-body .btn.btn-ver {
  background: linear-gradient(180deg, #00995e 0%, #007c4e 100%) !important;
  color: #ffffff !important;
  border: 2px solid #005c3c !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 0.6rem 1.5rem !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 8px rgba(0, 107, 70, 0.3) !important;
  transition: all 0.25s ease;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

#offcanvas-cita-body .btn-ver:hover,
#offcanvas-cita-body button.btn-ver:hover,
#offcanvas-cita-body .btn.btn-ver:hover {
  background: linear-gradient(180deg, #00b36b 0%, #008c58 100%) !important;
  border-color: #005c3c !important;
  box-shadow: 0 4px 12px rgba(0, 107, 70, 0.4) !important;
  transform: translateY(-2px);
}

#offcanvas-cita-body .btn-ver:active,
#offcanvas-cita-body button.btn-ver:active,
#offcanvas-cita-body .btn.btn-ver:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 107, 70, 0.3) !important;
}

/* Botón secundario "Cancelar" con estilo más discreto */
#offcanvas-cita-body .btn-outline-secondary,
#offcanvas-cita-body button.btn-outline-secondary {
  background-color: #ffffff !important;
  color: #6c757d !important;
  border: 2px solid #6c757d !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 0.6rem 1.2rem !important;
  border-radius: 8px !important;
  transition: all 0.25s ease;
}

#offcanvas-cita-body .btn-outline-secondary:hover,
#offcanvas-cita-body button.btn-outline-secondary:hover {
  background-color: #6c757d !important;
  color: #ffffff !important;
  border-color: #6c757d !important;
  box-shadow: 0 2px 6px rgba(108, 117, 125, 0.3) !important;
}

/* Alert de información del paciente con mejor contraste */
#offcanvas-cita-body .alert-info {
  background-color: #d1ecf1;
  border: 2px solid #0c5460;
  border-radius: 6px;
  color: #0c5460;
}

/* Resultado de búsqueda de pacientes */
#offcanvas-cita-body #resultado-busqueda {
  border: 2px solid #006B46;
  border-radius: 6px;
  background-color: #ffffff;
}

/* Labels con mejor visibilidad */
#offcanvas-cita-body .form-label {
  font-weight: 600;
  color: #006B46;
  margin-bottom: 0.4rem;
}

/* ===== Mejoras en la página de pacientes ===== */

/* Asegurar que el cabecero verde del panel izquierdo tenga el margen correcto */
#panel-izquierdo .clinic-header-green {
  margin: -0.5rem -0.5rem 1rem -0.5rem;
}

/* Panel derecho con padding reducido - sin padding superior para alineación */
#panel-derecho {
  padding: 0 0.5rem 0.5rem;
}

/* Espaciado mejorado entre secciones en el panel derecho */
#patient-detail-panel {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-top: 0.5rem;
}

/* Tarjeta de documentos con mejor espaciado */
#patient-detail-panel + .card {
  margin-top: 1rem;
}

/* ===== Responsive para móvil ===== */
@media (max-width: 991.98px) {
  /* En móvil, ambos paneles deben tener el ancho completo */
  #panel-izquierdo,
  #panel-derecho {
    flex: 0 0 100%;
    max-width: 100%;
    border: none !important;
    margin-bottom: 1rem;
  }

  /* Reactivar bordes en móvil para mantener el diseño de las tarjetas */
  #panel-izquierdo {
    border: 2px solid #006B46 !important;
    border-radius: 10px;
    margin-bottom: 1rem;
  }

  /* El panel derecho también necesita margen */
  #panel-derecho {
    padding: 0;
  }

  #patient-detail-panel {
    margin-bottom: 1rem;
  }

  /* Tarjeta de documentos también con separación */
  #patient-detail-panel .card {
    margin-bottom: 1rem;
  }

  /* Asegurar que todos tengan el mismo ancho y padding */
  .col-12.col-lg-4,
  .col-12.col-lg-8 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Reducir padding en contenedor principal para móvil */
  .container-fluid.mt-1 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

.fecha-display {
  color: #006B46;
  background: transparent;
  padding: .25rem .5rem;
}

/* ===== Modal z-index management ===== */
/* Ensure all modals have proper z-index stacking to avoid backdrop issues
   Bootstrap 5.3 default modal z-index is 1055 and backdrop is 1050
   We need to maintain proper stacking order:
   1. Header: 1050
   2. Modal backdrop: 1055 (same as default)
   3. Primary modals (gallery, documents): 1056
   4. Secondary modals (image viewer, document viewer): 1057
   5. Toast notifications: 2000
*/

/* Primary modals - gallery and documents */
#galleryModal,
#documentsModal,
#citaConsultaModal,
#citaPendienteHoyModal {
  z-index: 1056 !important;
}

/* Secondary modals - viewers that open on top of primary modals */
#imageViewerModal,
#imageViewerModalFiles,
#documentViewerModal {
  z-index: 1057 !important;
}

/* Tertiary modals - validation and other system modals */
#patient-validation-modal,
#prescriptionModal {
  z-index: 1058 !important;
}

/* Modal backdrop - use Bootstrap default but ensure it's consistent */
.modal-backdrop {
  z-index: 1055 !important;
}

/* ===== Auto-resize textareas ===== */
/* CSS custom properties are set by textarea-autoresize.js for consistency */
/* Base styles for all textareas with auto-resize */
textarea {
  resize: none !important;           /* Disable manual resize on all devices */
  overflow-y: hidden;                /* Hide scrollbar until max height is reached */
  box-sizing: border-box;            /* Consistent box model */
  transition: height 0.1s ease-out;  /* Smooth height transitions */
  min-height: var(--textarea-min-height, 60px);      /* Minimum height for usability */
  max-height: var(--textarea-max-height, 300px);     /* Maximum height before scrollbar appears */
}

/* On mobile devices, improve touch target size and appearance */
@media (max-width: 768px) {
  textarea {
    -webkit-appearance: none;        /* iOS specific */
    -moz-appearance: none;           /* Firefox specific */
    min-height: var(--textarea-min-height-mobile, 70px);  /* Slightly larger for touch */
    padding: 0.5rem;                 /* Better touch padding */
  }
}

/* When textarea reaches max height, show scrollbar (class added by JS) */
textarea.textarea-scrollable {
  overflow-y: auto !important;
}

/* Specific adjustments for small textareas in forms */
textarea.form-control-sm {
  min-height: var(--textarea-min-height, 60px);
  font-size: 0.875rem;
}

/* Ensure consistent styling for textareas with form-control class */
textarea.form-control {
  width: 100%;
}