/* ================================================================
   SIDEPANEL — Panel lateral de información
   Estrategia:
   - Estado base (.sidepanel): caja con dimensiones fijas (top/bottom/
     width). El tamaño NO depende del contenido, así el panel siempre
     abre igual independientemente de qué tan rápido renderice
     Plotly/echarts/DT.
   - Estado draggable (.jq-active): se aplica solo cuando el usuario
     arrastra o redimensiona. jQuery UI controla width/height/left/top
     vía inline styles. Aquí solo definimos visuales que no compiten.
   - Layout interno (.sp-layout): flexbox uniforme (header/body/footer)
     compartido por todos los renderers.
   ================================================================ */

/* ---------- Estado base (NO draggable) ---------- */
.sidepanel:not(.jq-active) {
  position: fixed !important;
  top: auto !important;
  bottom: 20px !important;
  height: 64vh !important;
  right: -52% !important;
  width: 50% !important;
  max-width: 720px !important;
  background-color: #FFFFFF !important;
  transition: right 0.3s ease-in-out !important;
  box-shadow: -8px 0 28px rgba(0,0,0,0.14) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  z-index: var(--z-sidepanel) !important;
  padding: 15px !important;
  border-radius: 10px 0 0 10px !important;
  pointer-events: auto !important;
  overflow: hidden !important;
}

.sidepanel.open:not(.jq-active) {
  right: 0 !important;
}

/* ---------- Estado draggable/resizable (escritorio >=1200px) ---------- */
/* jQuery UI controla position/width/height/left/top vía inline styles.
   Aquí solo definimos propiedades visuales que NO compiten con jQuery UI. */
.sidepanel.jq-active {
  position: fixed;
  background-color: #FFFFFF;
  z-index: var(--z-sidepanel);
  padding: 15px;
  pointer-events: auto;
  transition: none;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  min-width: 380px;
  min-height: 240px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
}

/* Cursor auto para elementos interactivos dentro del panel */
.sidepanel.jq-active .closeButton,
.sidepanel.jq-active input,
.sidepanel.jq-active textarea,
.sidepanel.jq-active button,
.sidepanel.jq-active select,
.sidepanel.jq-active a,
.sidepanel.jq-active .js-plotly-plot,
.sidepanel.jq-active canvas,
.sidepanel.jq-active svg {
  cursor: auto;
}

/* Handle de arrastre: zona superior donde el usuario agarra para mover */
.sidepanel-drag-handle {
  width: 100%;
  height: 24px;
  cursor: move;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
}
.sidepanel-drag-handle::after {
  content: '';
  width: 42px;
  height: 3px;
  background: rgba(0, 0, 0, 0.16);
  border-radius: 2px;
}

/* Indicador visual de resize en la esquina inferior-derecha */
.sidepanel.jq-active::before {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 14px;
  height: 14px;
  border-right: 3px solid rgba(0, 0, 0, 0.2);
  border-bottom: 3px solid rgba(0, 0, 0, 0.2);
  border-bottom-right-radius: 4px;
  pointer-events: none;
  z-index: 2100;
}

/* Handles de resize manual — zonas invisibles en bordes y esquinas */
.sp-resize { position: absolute; z-index: 2100; }
.sp-resize-n  { top: -4px; left: 12px; right: 12px; height: 8px; cursor: n-resize; }
.sp-resize-s  { bottom: -4px; left: 12px; right: 12px; height: 8px; cursor: s-resize; }
.sp-resize-e  { right: -4px; top: 12px; bottom: 12px; width: 8px; cursor: e-resize; }
.sp-resize-w  { left: -4px; top: 12px; bottom: 12px; width: 8px; cursor: w-resize; }
.sp-resize-ne { top: -4px; right: -4px; width: 14px; height: 14px; cursor: ne-resize; }
.sp-resize-se { bottom: -4px; right: -4px; width: 14px; height: 14px; cursor: se-resize; }
.sp-resize-sw { bottom: -4px; left: -4px; width: 14px; height: 14px; cursor: sw-resize; }
.sp-resize-nw { top: -4px; left: -4px; width: 14px; height: 14px; cursor: nw-resize; }

/* ---------- Botón cerrar ---------- */
.sidepanel .closeButton {
  position: absolute !important;
  right: 10px !important;
  top: 10px !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  font-size: 20px !important;
  color: #64748b !important;
  z-index: 2000 !important;
  padding: 5px !important;
  line-height: 0.5 !important;
}

/* ================================================================
   Layout interno estándar
   Estructura uniforme para todos los renderers del panel:
     .panel-content
       └── .sp-layout
             ├── .sp-header   (info de ubicación, etc.)
             ├── .sp-body     (gráfico/tabla — ocupa el espacio sobrante)
             └── .sp-footer   (disclaimer)
   ================================================================ */
.sidepanel .panel-content {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
/* Cuando el handle de drag está presente, descontarle 24px al contenido */
.sidepanel .sidepanel-drag-handle ~ .panel-content {
  height: calc(100% - 24px) !important;
}
/* uiOutput envuelve el sp-layout — debe estirarse igual */
.sidepanel .panel-content > .shiny-html-output {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.sp-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.sp-header {
  flex: 0 0 auto;
  padding: 10px;
  color: #1f2937;
  font-family: 'Inter', sans-serif;
}
.sp-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 10px;
  overflow: hidden;
}
.sp-body--scroll {
  overflow-y: auto;
}
.sp-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: #0076A8;
  color: #ffffff;
  border: 1px solid #0076A8;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 118, 168, 0.18);
  white-space: normal;
  max-width: 90%;
  text-align: center;
}

.sp-action-pill:hover {
  background: #005f88;
  border-color: #005f88;
  box-shadow: 0 2px 6px rgba(0, 118, 168, 0.28);
  transform: translateY(-1px);
}

.sp-action-pill:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 118, 168, 0.2);
}

/* Wrapper del selector de variable (chips) arriba de la grafica custom.
   Reusa los estilos .fpanel-chip / .fpanel-chip.active de map_fpanel.css. */
.sp-custom-var-selector {
  display: flex;
  justify-content: center;
  padding: 4px 0 8px;
  height: 42px;
  box-sizing: border-box;
}
.sp-custom-var-selector .fpanel-chips {
  display: inline-flex;
  gap: 6px;
}

/* ============================================================
   Slider con dos vistas (gráficas precalculadas <-> formulario)
   Usado en sidepanel PALMSIM. Toggle via [data-view] en .sp-slider.
   ============================================================ */
.sp-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sp-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    opacity   0.35s ease;
  will-change: transform, opacity;
}

.sp-view--precalc { transform: translateX(0);    opacity: 1; }
.sp-view--form    { transform: translateX(100%); opacity: 0; pointer-events: none; }
.sp-view--results { transform: translateX(100%); opacity: 0; pointer-events: none; }

.sp-slider[data-view="form"] .sp-view--precalc {
  transform: translateX(-25%);
  opacity: 0;
  pointer-events: none;
}
.sp-slider[data-view="form"] .sp-view--form {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.sp-slider[data-view="results"] .sp-view--precalc {
  transform: translateX(-25%);
  opacity: 0;
  pointer-events: none;
}
.sp-slider[data-view="results"] .sp-view--form {
  transform: translateX(-25%);
  opacity: 0;
  pointer-events: none;
}
.sp-slider[data-view="results"] .sp-view--results {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.sp-view-header {
  flex: 0 0 auto;
  padding: 10px;
  color: #1f2937;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.4;
}

.sp-view-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 10px;
  overflow: hidden;
}

/* Plotly llena el .sp-view-body igual que en .sp-body */
.sp-view-body > .js-plotly-plot,
.sp-view-body > .plotly,
.sp-view-body > .html-widget,
.sp-view-body > .shiny-plot-output {
  width: 100% !important;
  height: 100% !important;
}

/* ---------- Formulario compacto ---------- */
.sp-form-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15, 27, 45, 0.06);
}

.sp-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid rgba(15, 27, 45, 0.12);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #4a5868;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sp-back-btn:hover {
  background: rgba(0, 118, 168, 0.06);
  border-color: rgba(0, 118, 168, 0.4);
  color: #0076A8;
}

/* Variante "descartar": mismo formato que sp-back-btn pero con acento ambar
   al hover para indicar accion destructiva. */
.sp-back-btn.sp-discard-btn:hover {
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.5);
  color: #b45309;
}

.sp-form-title {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #1f2937;
  letter-spacing: -0.1px;
}

.sp-form-body {
  overflow-y: auto;
  padding: 14px 14px 10px;
  font-family: 'Inter', sans-serif;
}

.sp-form-field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.sp-form-field > label {
  flex: 0 0 auto;
  width: 92px;
  font-size: 10px;
  font-weight: 600;
  color: #4a5868;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.15;
}

/* Hijos no-label del field (selects, dateInputs, readonly) ocupan el resto. */
.sp-form-field > *:not(label) {
  flex: 1 1 auto;
  min-width: 0;
}

.sp-form-readonly {
  padding: 6px 10px;
  background: rgba(15, 27, 45, 0.04);
  border: 1px solid rgba(15, 27, 45, 0.08);
  border-radius: 8px;
  font-size: 12.5px;
  color: #1f2937;
}

.sp-form-row {
  display: flex;
  gap: 12px;
}
.sp-form-row > .sp-form-field { flex: 1; min-width: 0; }

/* ---------- Modo comparar: bloques A / B ---------- */
.sp-form-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
/* Especie (unico campo del toprow, 30% de ancho): mantiene label arriba,
   asi no se aprieta el valor en ancho. */
.sp-form-toprow .sp-form-field {
  display: block;
}
.sp-form-toprow .sp-form-field > label {
  display: block;
  width: auto;
  margin: 0 0 4px 0;
}
.sp-form-toprow .sp-form-field > *:not(label) {
  flex: none;
}
.sp-compare-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sp-compare-toggle > label {
  font-size: 10.5px;
  font-weight: 600;
  color: #4a5868;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 0;
}
.sp-compare-toggle .form-group,
.sp-compare-toggle .shiny-input-container { margin: 0; width: auto; }

.sp-sim-block-header {
  display: none;
  font-size: 11.5px;
  font-weight: 700;
  color: #0076A8;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 6px 0 8px;
  border-bottom: 1px solid rgba(0, 118, 168, 0.15);
  margin-bottom: 10px;
}
.sp-sim-block--b { display: none; }

[data-compare="true"] .sp-sim-block-header { display: block; }
[data-compare="true"] .sp-sim-block--b { display: block; margin-top: 16px; }
[data-compare="true"] .sp-sim-block {
  padding: 10px 12px;
  border: 1px solid rgba(15, 27, 45, 0.08);
  border-radius: 8px;
  background: rgba(15, 27, 45, 0.015);
}

.sp-pick-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #ffffff;
  border: 1px dashed rgba(0, 118, 168, 0.5);
  color: #0076A8;
  border-radius: 8px;
  padding: 6px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sp-pick-btn:hover {
  background: rgba(0, 118, 168, 0.06);
  border-style: solid;
}
.sp-pick-summary {
  font-size: 11.5px;
  color: #4a5868;
  font-family: 'Inter', sans-serif;
}

/* Estilizar inputs nativos (selectInput / dateInput) dentro del formulario */
.sp-form-body .form-group { margin-bottom: 0; }
.sp-form-body .shiny-input-container { width: 100%; }

/* Estilo unificado con .fpanel-select del resto de la plataforma:
   fondo tintado, borde sutil, flecha SVG embebida en los selects. */
.sp-form-body select,
.sp-form-body .form-control,
.sp-form-body input[type="text"] {
  width: 100%;
  padding: 6px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: #2c3e54;
  background: rgba(15, 27, 45, 0.04);
  border: 1px solid rgba(15, 27, 45, 0.10);
  border-radius: 8px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  box-shadow: none;
  height: auto;
}

.sp-form-body select {
  padding-right: 28px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%232c3e54' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
}

.sp-form-body select:hover,
.sp-form-body .form-control:hover,
.sp-form-body input[type="text"]:hover {
  background-color: rgba(15, 27, 45, 0.07);
  border-color: rgba(15, 27, 45, 0.18);
}

.sp-form-body select:focus,
.sp-form-body .form-control:focus,
.sp-form-body input[type="text"]:focus {
  outline: none;
  border-color: #0076A8;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 118, 168, 0.15);
}

.sp-form-body .input-group-addon {
  background: rgba(15, 27, 45, 0.04);
  border: 1px solid rgba(15, 27, 45, 0.15);
  border-left: none;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  color: #4a5868;
}

.sp-form-body .input-group .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.sp-footer {
  flex: 0 0 auto;
  padding: 8px 10px 0;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  color: #64748b;
}
/* Plotly / echarts / htmlwidgets llenan el body en modo no-scrollable.
   En modo scrollable (sp-body--scroll) los widgets respetan su height
   declarado (p. ej. echarts4rOutput(..., height = "200px")) para que
   varios puedan apilarse sin estirarse a la altura completa. */
.sp-body:not(.sp-body--scroll) > .js-plotly-plot,
.sp-body:not(.sp-body--scroll) > .plotly,
.sp-body:not(.sp-body--scroll) > .html-widget,
.sp-body:not(.sp-body--scroll) > .shiny-plot-output {
  width: 100% !important;
  height: 100% !important;
}

/* ---------- Panel de enfermedades: dos calendarios alternables ----------
   Ambos paneles se renderizan con dimensiones reales (visibility:hidden
   conserva el layout, a diferencia de display:none), por lo que echarts
   dibuja correctamente desde el inicio. Las pills solo alternan cuál es
   visible — sin re-render ni resize. */
.enf-stack {
  position: relative;
  height: 235px;
}
.enf-pane {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  visibility: hidden;
}
.enf-pane.enf-pane-active {
  visibility: visible;
}

/* ---------- Tablas DT dentro del panel — versión compacta ---------- */
.sidepanel .sp-body {
  overflow-y: auto;
}
.sidepanel table.dataTable thead th,
.sidepanel table.dataTable thead td {
  padding: 6px 10px !important;
  font-size: 12px !important;
}
.sidepanel table.dataTable tbody td {
  padding: 4px 10px !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}
.sidepanel table.dataTable {
  font-size: 12px !important;
}

/* ==================== TABLET <=1024px ==================== */
@media screen and (max-width: 1024px) {
  .sidepanel:not(.jq-active) {
    width: 60% !important;
    right: -62% !important;
    max-width: none !important;
  }
}

/* ==================== MOBILE <=768px ==================== */
@media screen and (max-width: 768px) {
  .sidepanel:not(.jq-active) {
    width: 100% !important;
    right: -100% !important;
    top: auto !important;
    height: 74vh !important;
    bottom: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-width: none !important;
  }
}

/* ==================== SMALL MOBILE <=480px ==================== */
@media screen and (max-width: 480px) {
  .sidepanel:not(.jq-active) {
    height: 80vh !important;
    padding: 10px !important;
  }
  .sidepanel:not(.jq-active) .closeButton {
    font-size: 24px !important;
    padding: 10px !important;
  }
}

/* ==================== LANDSCAPE MOBILE ==================== */
@media (max-width: 768px) and (orientation: landscape) {
  .sidepanel:not(.jq-active) {
    height: 88vh !important;
  }
}