/* ===== Históricos · Mediciones (namespaced) ===== */

/* === Contenedor y "card" (clonado del look de HISTÓRICOS – FORMATO) === */
#screenHistoricosMed .panel{
  margin:14px auto;
  max-width:1200px;              /* mismo tope de ancho que usas en Formatos */
}

#screenHistoricosMed .card{
  background:#fff;
  border-radius:6px;
  padding:16px;
  margin-top:18px;
  box-shadow:0 2px 4px rgba(0,0,0,.12);   /* igual que #screenHistoricos .card */
  border: 1px solid #e7e7e7;              /* borde suave como en la primera imagen */
}

/* ====== Encabezado superior (sección tipo "consultador") ====== */
#screenHistoricosMed .sheet{
  width:100%;
  margin:0 auto;
  padding:0;
  overflow-x:auto;
}

#screenHistoricosMed .header{
  background:#fff;
  border:1px solid #cfd8dc;
  border-radius:10px;
  overflow:hidden;
}

#screenHistoricosMed .header .row-1{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-bottom:1px solid #e3e8ee;
}
#screenHistoricosMed .header .logo{
  width:100px; min-height:44px; display:flex; align-items:center; justify-content:center;
}
#screenHistoricosMed .header .logo img{ max-height:44px; max-width:100px; }
#screenHistoricosMed .header .title{
  flex:1; text-align:center; font-size:18px; font-weight:700; letter-spacing:.3px;
}

#screenHistoricosMed .header .row-2{
  display:grid; grid-template-columns:repeat(4,1fr);
}
#screenHistoricosMed .hdr-cell{
  display:flex; flex-direction:column; border-top:1px solid #edf2f7; border-right:1px solid #edf2f7;
}
#screenHistoricosMed .hdr-cell:last-child{ border-right:none; }
#screenHistoricosMed .hdr-label{
  background:#eef2f7; color:#4b5563; font-size:12px; padding:6px 10px; border-bottom:1px solid #e3e8ee;
}
#screenHistoricosMed .hdr-value{ padding:8px 10px; }

/* Inputs RO (previsualización) */
#screenHistoricosMed input, #screenHistoricosMed select{
  height:32px; border:1px solid #cfd8dc; border-radius:6px; padding:4px 8px; background:#fff; width:100%;
}
#screenHistoricosMed input.ro{ background:#f2f4f7; }

/* ====== Header meta del bloque “HISTÓRICOS MEDICIONES…” (1:1 con Formatos) ====== */
#screenHistoricosMed #histMedHeaderCard .table{
  width:100%; border-collapse:collapse; table-layout:fixed; background:#fff;
}
#screenHistoricosMed #histMedHeaderCard .table th,
#screenHistoricosMed #histMedHeaderCard .table td{
  border:1px solid #bdbdbd; padding:6px; font-size:12px; box-sizing:border-box;
}

/* Título (idéntico a Formatos) */
#screenHistoricosMed #histMedHeaderCard .table .title{
  font-size:20px; font-weight:bold; text-align:center; background:#efefef;
}

/* Logo (idéntico a Formatos) */
#screenHistoricosMed #histMedHeaderCard .logo-cell{ width:120px; text-align:center; }
#screenHistoricosMed #histMedHeaderCard .logo-cell img{ max-width:100px; }

/* Reparto exacto de la fila meta:  th 18% + td 32%  (x2 = 100%) */
#screenHistoricosMed #histMedHeaderCard .meta th{
  width:18%; text-align:left; background:#e9e9e9;
}
#screenHistoricosMed #histMedHeaderCard .meta td{
  width:32%; background:#ffffff;
}

/* ====== Filtros ====== */
#screenHistoricosMed .table-scroll{ width:100%; overflow:auto; }
#screenHistoricosMed .table{
  width:100%; min-width: unset; table-layout:fixed;   /* filtros y header usan 100% del contenedor */
}
#screenHistoricosMed .table thead th{
  background:#eef2f7; color:#374151; border-bottom:1px solid #cfd8dc; padding:6px 8px; font-size:12px;
  text-align:center; vertical-align:middle;
}
#screenHistoricosMed .table td{
  border-top:1px solid #e5e7eb; border-right:1px solid #eff3f6; padding:6px;
}
#screenHistoricosMed .table td:last-child{ border-right:none; }

/* ====== Tabla grande por mes (previsualización) ====== */
#screenHistoricosMed .table-card{
  background:#fff; border:1px solid #cfd8dc; border-radius:10px; margin-top:12px; overflow:clip;
}
@supports not (overflow: clip){ #screenHistoricosMed .table-card{ overflow:hidden; } }

#screenHistoricosMed .table-card .table{
  width:100%;
  min-width: clamp(1600px, 200vw, 2600px);   /* mismo comportamiento que en Mediciones */
  table-layout: fixed;
}

#screenHistoricosMed .table th, #screenHistoricosMed .table td{
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Scroll vertical + reserva para thead fijo */
#screenHistoricosMed .table-card .table-scroll{
  overflow:auto; -webkit-overflow-scrolling:touch;
  height: calc(100vh - var(--topbar-h, 56px) - var(--med-header-h, 160px) - var(--med-hscroll-h, 14px) - 24px);
  padding-top: 42px;
}

/* Scroll horizontal superior sincronizado */
#screenHistoricosMed .hscroll-sync{
  position: sticky; top: var(--topbar-h, 56px); z-index:998;
  overflow-x:auto; overflow-y:hidden;
  background:#fff; border:1px solid #cfd8dc; border-radius:8px; margin:8px 0; height:14px;
}
#screenHistoricosMed .hscroll-sync .hscroll-inner{ height:1px; }

/* Thead clonado fijo */
#screenHistoricosMed .table-head-fixed{
  position:absolute; left:0; right:0; z-index:996; background:#eef2f7; border-bottom:1px solid #cfd8dc; pointer-events:none;
}
#screenHistoricosMed .table-head-fixed .table{
  table-layout:fixed; min-width: clamp(1600px, 200vw, 2600px);
}
#screenHistoricosMed .table-head-fixed .table thead th{ padding:6px 8px; }

/* ====== Responsivo ====== */
@media (max-width: 1280px){
  #screenHistoricosMed .panel{ max-width: 1000px; }     /* se contrae suavemente */
}
@media (max-width: 1060px){
  #screenHistoricosMed .panel{ max-width: 920px; }
  #screenHistoricosMed #histMedHeaderCard .table .title{ font-size:18px; }
}
@media (max-width: 840px){
  #screenHistoricosMed .panel{ max-width: 92vw; }
  #screenHistoricosMed #histMedHeaderCard .logo-cell{ width:100px; }
  #screenHistoricosMed #histMedHeaderCard .table .title{ font-size:17px; }
  #screenHistoricosMed #histMedHeaderCard .table th,
  #screenHistoricosMed #histMedHeaderCard .table td{ padding:5px; font-size:12px; }
}
@media (max-width: 640px){
  /* Para móviles: conserva el reparto 18%/32% pero reduce tipografía/padding */
  #screenHistoricosMed #histMedHeaderCard .table .title{ font-size:16px; }
  #screenHistoricosMed #histMedHeaderCard .table th,
  #screenHistoricosMed #histMedHeaderCard .table td{ padding:4px 6px; font-size:11.5px; }
  #screenHistoricosMed .header .row-2{ grid-template-columns: 1fr 1fr; } /* header del “formulario” RO */
}
@media (max-width: 480px){
  #screenHistoricosMed #histMedHeaderCard .logo-cell{ width:86px; }
  #screenHistoricosMed #histMedHeaderCard .table .title{ font-size:15px; }
  #screenHistoricosMed .header .row-2{ grid-template-columns: 1fr; }     /* stackea campos del sub‑header RO */
  #screenHistoricosMed .card{ padding:12px; }
}