/* styles.css - Estilo base + Mediciones sticky + Modal Información */

/* ===== Utilidad global ===== */
.hidden { display: none !important; }

/* ===== Base ===== */
body { font-family: sans-serif; padding: 16px; margin: 0; background: #f5f5f5; }
.card { background: #fff; border-radius: 6px; padding: 16px; margin-top: 18px; box-shadow: 0 2px 4px rgba(0,0,0,.12); }
input, textarea { width: 100%; padding: 10px; margin-top: 8px; margin-bottom: 10px; border: 1px solid #aaa; border-radius: 5px; }
h2 { margin-top: 0; font-size: 22px; font-weight: bold; }
.btn { width: 100%; padding: 14px; background: #1976d2; color: #fff; border: none; border-radius: 5px; font-size: 17px; margin-top: 10px; cursor: pointer; }
.btn:hover { background: #0e5aa6; }
.dia h4 { margin-bottom: 8px; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace; }
.missing { border: 2px solid #d32f2f !important; background: #fff0f0 !important; }

/* ===== Contenedor tipo "sheet" ===== */
.wrapper{ width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 12px !important; }
.table-scroll{ width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ===== Topbar y variantes ===== */
.topbar{ display:flex; justify-content:flex-end; align-items:center; gap:8px; padding:8px 12px; background:#fff; border-bottom:1px solid #e5e7eb; }
.btn.gray{ background:#e9eef5; color:#111827; }
.btn.blue{ background:#0d6efd; }
.btn.gray:hover{ background:#dfe7f3; }
.btn.blue:hover{ background:#0b5bd3; }

/* ===== Estados de alerta ===== */
.status .alert{ padding:10px; border-radius:8px; margin:8px 0; }
.alert-info{ background:#e7f1ff; border:1px solid #b3d2ff; }
.alert-success{ background:#e9f7ef; border:1px solid #c6e6d1; }
.alert-danger{ background:#fdeaea; border:1px solid #f3c2c2; }
.alert-warning{ background:#fff6e5; border:1px solid #ffe0a3; }

/* ===== Falta de login ===== */
.need-login .wrapper{ filter: blur(1.5px) grayscale(.1); pointer-events:none; user-select:none; }

/* ===== Responsivo ===== */
@media (max-width: 980px){
  .wrapper{ padding: 0 10px; }
  th, td{ font-size: 12px; padding: 5px; }
  .logo-cell img{ max-width: 70px; }
}
@media (max-width: 560px){
  th, td{ font-size: 11px; padding: 4px; }
  .btn{ font-size: 15px; padding: 12px; }
  input, select, textarea{ font-size: 16px; } /* anti-zoom iOS */
}

/* =================================================================== */
/* REFUERZO VISUAL DEL MODAL (base de login/ayuda) */
/* =================================================================== */
.modal{
  position: fixed; inset: 0; display: none; place-items: center;
  background: rgba(17, 24, 39, .45);
  z-index: 9999;
  backdrop-filter: blur(2px);
}
.modal__card{
  width: min(92vw, 720px);
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.28);
  border: 1px solid #e5e7eb;
  animation: modal-in .18s ease-out;
  max-height: 80vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal__form{ display: grid; gap: 10px; margin-top: 10px; }
.modal__msg{ min-height: 18px; font-size: 13px; color: #b91c1c; }
.modal .btn{ width: auto; min-width: 120px; padding: 10px 14px; margin-top: 6px; font-size: 15px; border-radius: 8px; }
.modal .btn.gray{ background: #f3f4f6; color:#111827; border: 1px solid #e5e7eb; }
.modal .btn.gray:hover{ background:#e5e7eb; }
.modal .btn.blue{ background: #0d6efd; border: 1px solid #0b5bd3; }
.modal .btn.blue:hover{ background:#0b5bd3; }
.help__content h4 { margin: 12px 0 6px; font-size: 15px; }
.help__content ul { margin: 0 0 10px 18px; padding: 0; }
.help__content li { margin: 4px 0; line-height: 1.25; }
.modal button:focus-visible,
.modal a:focus-visible,
.modal input:focus-visible,
.modal select:focus-visible,
.modal textarea:focus-visible{
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .25);
  border-radius: 6px;
}
.btn:focus-visible{ outline: 2px solid #2563eb; outline-offset: 2px; box-shadow: 0 0 0 2px rgba(37, 99, 235, .25); border-radius: 6px; }

/* Tablas genéricas */
table { background-color: #fff; }
th { background: #e9e9e9; }

/* Botones en topbar redondeados */
.topbar .btn { border-radius: 6px; }

/* ================================
   MEDICIONES (namespaced)
   ================================ */
#screenMediciones .sheet{
  width:min(100%,1200px);
  margin:clamp(10px,2vw,18px) auto;
  padding:0 clamp(10px,2vw,18px);
  overflow-x:auto;
}
#screenMediciones .header{
  background:#fff; border:1px solid #cfd8dc; border-radius:10px; overflow:hidden;
}
#screenMediciones .header .row-1{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-bottom:1px solid #e3e8ee;
}
#screenMediciones .header .logo{ width:100px; min-height:44px; display:flex; align-items:center; justify-content:center; }
#screenMediciones .header .logo img{ max-height:44px; max-width:100px; }
#screenMediciones .header .title{ flex:1; text-align:center; font-size:18px; font-weight:700; letter-spacing:.3px; }
#screenMediciones .header .row-2{ display:grid; grid-template-columns:repeat(4,1fr); }
#screenMediciones .hdr-cell{ display:flex; flex-direction:column; border-top:1px solid #edf2f7; border-right:1px solid #edf2f7; }
#screenMediciones .hdr-cell:last-child{ border-right:none; }
#screenMediciones .hdr-label{ background:#eef2f7; color:#4b5563; font-size:12px; padding:6px 10px; border-bottom:1px solid #e3e8ee; }
#screenMediciones .hdr-value{ padding:8px 10px; }
#screenMediciones input, #screenMediciones select{ height:32px; border:1px solid #cfd8dc; border-radius:6px; padding:4px 8px; background:#fff; width:100%; }
#screenMediciones input.ro{ background:#f2f4f7; }

/* Panel tabla */
#screenMediciones .table-card{
  background:#fff; border:1px solid #cfd8dc; border-radius:10px;
  margin-top:12px; overflow:auto; -webkit-overflow-scrolling:touch;
  position: relative;
}

/* Área scrolleable interna (X/Y) */
#screenMediciones .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: 0; /* sin overlays */
}

/* Tabla */
#screenMediciones .table{
  width:100%;
  table-layout: fixed;            /* respeta colgroup */
  min-width: clamp(1600px, 200vw, 2600px);
}
#screenMediciones .table th, #screenMediciones .table td{
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#screenMediciones .table td{
  border-top:1px solid #e5e7eb; border-right:1px solid #eff3f6; padding:4px;
}
#screenMediciones .table td:last-child{ border-right:none; }
#screenMediciones .table input{ width:100%; height:28px; border:1px solid #cfd8dc; border-radius:6px; padding:3px 6px; }

/* Barra de scroll superior sincronizada */
#screenMediciones .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;
}
#screenMediciones .hscroll-sync .hscroll-inner{ height: 1px; }

/* =========================
   STICKY (títulos y 2 columnas)
   ========================= */

/* Títulos (todo el thead) */
#screenMediciones .table thead th.sticky-top{
  position: sticky; top: 0; z-index: 5;
  background:#eef2f7; color: #374151; border-bottom:1px solid #cfd8dc; padding: 6px 8px;
}

/* Columna 1: Rancho (th + td) */
#screenMediciones .table th.freeze-col-1,
#screenMediciones .table td.freeze-col-1{
  position: sticky;
  left: var(--fcol1-left, 0px);
  width: var(--fcol1-width, auto);
  min-width: var(--fcol1-width, auto);
  max-width: var(--fcol1-width, auto);
  background: #fff;
  z-index: 3;
}

/* Columna 2: Nombre Común (th + td) */
#screenMediciones .table th.freeze-col-2,
#screenMediciones .table td.freeze-col-2{
  position: sticky;
  left: var(--fcol2-left, 0px);  /* = width(col1) */
  width: var(--fcol2-width, auto);
  min-width: var(--fcol2-width, auto);
  max-width: var(--fcol2-width, auto);
  background: #fff;
  z-index: 3;
}

/* Intersección (títulos de las 2 columnas congeladas) */
#screenMediciones .table thead th.freeze-header{
  z-index: 7; background:#eef2f7;
}

/* Separador visual en borde derecho de columnas congeladas */
#screenMediciones .table td.freeze-col-1::after,
#screenMediciones .table td.freeze-col-2::after{
  content:''; position:absolute; right:-1px; top:0; bottom:0; width:1px; background:#e5e7eb;
}

/* Botones en pantalla de mediciones */
#screenMediciones .btn{ border:1px solid transparent; border-radius:8px; padding:10px 14px; cursor:pointer; font-weight:700; }
#screenMediciones .btn.blue{ background:#0d6efd; color:#fff; }
#screenMediciones .btn.gray{ background:#e9eef5; color:#111827; }
#screenMediciones .btn.gray:hover{ background:#dfe7f3; }
#screenMediciones .btn.blue:hover{ background:#0b5bd3; }

#screenMediciones .status{ padding:10px; }
#screenMediciones .status .alert{ padding:10px; border-radius:8px; }

@media (max-width:980px){ #screenMediciones .header .row-2{ grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ #screenMediciones .header .row-2{ grid-template-columns: 1fr; } #screenMediciones .btn{ width:100%; } }

#screenMediciones input.missing, #screenMediciones select.missing, #screenMediciones textarea.missing{
  border:2px solid #d32f2f !important; background:#fff0f0 !important; outline:none !important; box-shadow:0 0 0 2px rgba(211,47,47,.15) !important;
}

/* =================================================================== */
/*  Modal "Información de últimos" (creado por mediciones.js)          */
/*  - Respeta \n y añade scroll vertical en el cuerpo                   */
/*  - Funciona aunque el card no tenga clase (selecciona 1er hijo)      */
/* =================================================================== */

/* El overlay ya existe como #medInfoModal (display:grid al abrir) */
#medInfoModal{}

/* Tarjeta del modal (primer hijo directo) — forzamos grid y layout */
#medInfoModal > div{
  display: grid !important;
  grid-template-rows: auto 1fr auto;
  width: min(92vw, 960px);
  max-height: 82vh;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 40px rgba(0,0,0,.28);
}

/* Encabezado (si le pones id desde JS lo tomará; si no, hereda estilos del card) */
#medInfoModalHeader{
  font-weight: 700;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
}

/* CUERPO con SCROLL + respeta \n */
#medInfoModalBody{
  display:block;
  padding: 12px 16px;
  min-height: 120px;         /* evita colapso si el grid no mide todavía */
  overflow: auto;            /* ← SCROLL VERTICAL cuando hay muchas líneas */
  max-height: 60vh;
  white-space: pre-wrap;     /* ← respeta saltos de línea (\n) */
  overflow-wrap: anywhere;
  color:#111;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13.5px;
  line-height: 1.35;
  box-sizing: border-box;
}

/* Pie del modal (botonera) */
#medInfoModalFooter{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid #e5e7eb;
}

/* Variante opcional: lista con viñetas si decides renderizar <ul><li> */
#medInfoModalBody .med-info-list{
  margin: 0;
  padding-left: 1.15rem;
  font-size: 13.5px;
  line-height: 1.35;
}
#medInfoModalBody .med-info-list li{
  margin: 4px 0;
  list-style: disc;
  overflow-wrap: anywhere;
}


/* ===== Ajustes visuales para menú y topbar (sin tocar lógica) ===== */
.topbar{
  background: linear-gradient(180deg, #111827, #0f172a) !important;
  border-bottom: 1px solid rgba(148,163,184,.18) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.topbar .btn{
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-weight: 700;
}
#btnBackToMenu{
  background: #f59e0b !important;
  color: #111827 !important;
  border: 1px solid rgba(245,158,11,.35) !important;
}
#btnLogout, #btnHelpForm, #btnHelpHist, #btnHelpAccess, #btnHelpAdmin{
  background: rgba(255,255,255,.06) !important;
  color: #e5eef9 !important;
  border: 1px solid rgba(148,163,184,.2) !important;
}