/* ==== SOLO para el formulario ATS – Recursos Humanos ==== */
:root{
  --pas-azul:#0073c5;
  --pas-gris:#e9edf2;
  --pas-borde:#cfd8e3;
  --pas-texto:#0b1f2a;
}

/* Encabezado de la tabla superior: líneas más nítidas */
.ats-header{ border-color:#000 !important; }
.ats-header td{ padding:.35rem .5rem !important; vertical-align:middle; }

/* Bandas tipo “A. / B. / C.” */
.ats-band{
  background-color: var(--pas-azul);
  color:#fff; padding:6px 8px; font-weight:700; font-size:14px;
}

/* ================== MATRIZ DE 15 RIESGOS ================== */
/* Tabla principal: 2 riesgos por fila (como en la hoja) */
.risk-matrix{
  width:100%;
  border-collapse:separate;
  border-spacing:16px 12px;       /* separaciones como en la hoja */
  table-layout: fixed;
  margin: 10px 0 18px;
}

/* “Tarjeta” de cada riesgo */
.risk{
  border:1px solid var(--pas-borde);
  border-radius:4px;
  background:#fff;
  overflow:hidden;
}

/* Banda gris superior con número + título (MAYÚSCULAS) */
.risk-head{
  background:var(--pas-gris);
  color:var(--pas-texto);
  font-weight:800;
  text-transform:uppercase;
  font-size:12.5px;
  letter-spacing:.2px;
  padding:6px 8px;
  border-bottom:1px solid var(--pas-borde);
  display:flex;
  align-items:center;
  gap:6px;
  line-height:1.15;
}
.risk-num{ font-weight:900; }

/* Cuerpo: icono a la izquierda, área de controles a la derecha */
.risk-body{
  display:grid;
  grid-template-columns: 92px 1fr;  /* ancho del icono similar a la hoja */
  min-height: 92px;
}
.risk-icon{
  display:flex; align-items:center; justify-content:center;
  padding:10px;
}
.risk-icon img{
  max-width:72px; max-height:72px;
}

/* Área de notas/controles (vacía por ahora; la llenaremos) */
.risk-notes{
  border-left:1px solid var(--pas-borde);
  background:#f9fbfc;
}

/* Imprimir con html2pdf */
@media print{
  .risk-matrix{ border-spacing:12px 10px }
  .risk-head{ font-size:12px }
}

/* === Ajustes para 3 columnas en cada riesgo: ICONO | CONTROLES | TEXTO === */
.risk-body{
  display:grid;
  grid-template-columns: 92px 240px 1fr; /* ícono fijo, controles fijos, texto flexible */
  min-height: 110px;
}

.risk-icon{
  display:flex; align-items:center; justify-content:center;
  padding:10px;
}
.risk-icon img{ max-width:72px; max-height:72px; }

.risk-col-left{
  background:#f9fbfc;
  border-left:1px solid var(--pas-borde);
  padding:10px 10px 8px;
}
.risk-col-right{
  background:#f9fbfc;
  border-left:1px solid var(--pas-borde);
  padding:10px 10px 8px;
}

/* Lista de controles (checkbox) compacta y estable para PDF */
.risk-options{ list-style:none; margin:0; padding:0; }
.risk-options li{ display:flex; align-items:center; gap:6px; margin:4px 0; }
.risk-options input[type="checkbox"]{
  width:14px; height:14px; margin:0; /* tamaño pequeño para A4 */
}

/* Campos de texto a la derecha */
.risk-notes-list{ display:flex; flex-direction:column; gap:6px; }
.risk-notes-list input[type="text"]{
  width:100%;
  height:28px;
  padding:4px 6px;
  font-size:12px;
}

/* En PDF: bordes y tamaños ligeramente más compactos */
@media print{
  .risk-body{ grid-template-columns: 88px 220px 1fr; min-height: 100px; }
  .risk-options li{ margin:3px 0; }
  .risk-notes-list input[type="text"]{ height:24px; font-size:11.5px; }
}

/* ====== Ajuste de la tarjeta: 3 columnas (ICONO | CONTROLES | TEXTO) con numeración ====== */
.risk-body{
  display:grid;
  grid-template-columns: 92px 240px 1fr; /* icono fijo | controles fijos | texto flexible */
  min-height: 110px;
}
.risk-col-left{
  background:#f9fbfc; border-left:1px solid var(--pas-borde); padding:10px 10px 8px;
}
.risk-col-right{
  background:#f9fbfc; border-left:1px solid var(--pas-borde); padding:10px 10px 8px;
}

/* Opciones con checkbox (1–4) */
.risk-options{ list-style:none; margin:0; padding:0; }
.risk-options li{ display:flex; align-items:center; gap:8px; margin:4px 0; font-size: 14px; }
.risk-n{ width:18px; text-align:right; font-weight:700; } /* numerito 1., 2., ... */
.risk-options input[type="checkbox"]{ width:14px; height:14px; margin:0; }

/* Entradas de texto (5–10) */
.risk-notes-list{ display:flex; flex-direction:column; gap:6px; }
.risk-note{
  display:flex; align-items:center; gap:8px;
}
.risk-note input[type="text"]{
  width:100%; height:28px; padding:4px 6px; font-size:12px;
}
.risk-note .risk-n{ width:18px; text-align:right; font-weight:700; }

/* Icono */
.risk-icon{ display:flex; align-items:center; justify-content:center; padding:10px; }
.risk-icon img{ max-width:72px; max-height:72px; }

/* Compactación en PDF */
@media print{
  .risk-body{ grid-template-columns: 88px 220px 1fr; min-height: 100px; }
  .risk-options li{ margin:3px 0; font-size: 12.5px; }
  .risk-note input[type="text"]{ height:24px; font-size:11.5px; }
}

/* ===== Título de la sección de riesgos: centrado y más grande ===== */
.rc-title-band{
  background:#0073c5;
  color:#fff;
  padding:10px 12px;
  font-weight:800;
  text-align:center;
  letter-spacing:.3px;
  font-size:clamp(18px, 2.6vw, 26px);
  margin:28px 0 12px;
}

/* ===== Tarjeta: icono más grande y entradas de texto más compactas ===== */
.risk-body{
  display:grid;
  grid-template-columns: 128px 260px 1fr; /* Icono más ancho, controles fijos, texto flexible */
  min-height:128px;
}
.risk-icon{
  display:flex; align-items:center; justify-content:center; padding:10px;
}
.risk-icon img{ max-width:96px; max-height:96px; }

.risk-col-left{
  background:#f9fbfc; border-left:1px solid var(--pas-borde); padding:10px 10px 8px;
}
.risk-col-right{
  background:#f9fbfc; border-left:1px solid var(--pas-borde); padding:10px 10px 8px;
}

/* Lista de checkboxes (1–5) */
.risk-options{ list-style:none; margin:0; padding:0; }
.risk-options li{ display:flex; align-items:center; gap:8px; margin:4px 0; font-size:14px; }
.risk-n{ width:18px; text-align:right; font-weight:700; }
.risk-options input[type="checkbox"]{ width:14px; height:14px; margin:0; }

/* Campos 6–10 compactos */
.risk-notes-list{ display:flex; flex-direction:column; gap:4px; }
.risk-note{ display:flex; align-items:center; gap:8px; }
.risk-note .risk-n{ width:18px; text-align:right; font-weight:700; }
.risk-note input[type="text"]{
  width:100%; height:24px; padding:3px 6px; font-size:12px;
}

/* PDF */
@media print{
  .rc-title-band{ font-size:22px; }
  .risk-body{ grid-template-columns: 120px 240px 1fr; min-height:118px; }
  .risk-note input[type="text"]{ height:22px; font-size:11.5px; }
}

/* =============== OVERRIDES: tamaño de icono + versión responsive =============== */

/* Icono más grande y cuerpo con icono más ancho */
.risk-body{
  grid-template-columns: 140px 260px 1fr !important; /* ICONO | CONTROLES | TEXTO */
  min-height: 140px !important;
}
.risk-icon img{
  max-width: 110px !important;
  max-height: 110px !important;
}

/* Título centrado y grande (por si alguna regla previa lo empequeñece) */
.rc-title-band{
  text-align: center !important;
  font-size: clamp(20px, 2.8vw, 28px) !important;
  padding: 12px !important;
}

/* ---------- Breakpoint: laptops/tablets (2 tarjetas por fila, tarjetas más compactas) ---------- */
@media (max-width: 1100px){
  .risk-matrix{ border-spacing: 12px 10px !important; }
  .risk-body{
    grid-template-columns: 128px 240px 1fr !important;
    min-height: 128px !important;
  }
  .risk-icon img{ max-width: 100px !important; max-height: 100px !important; }
}

/* ---------- Breakpoint: <= 900px → tarjetas apiladas (1 por fila) ---------- */
@media (max-width: 900px){
  /* Hacemos que cada celda ocupe la fila completa */
  .risk-matrix tr{ display:block; }
  .risk-matrix td{ display:block; width:100%; }
  .risk{ margin-bottom: 10px; }

  /* Dentro de cada tarjeta: dejamos 2 columnas (ICONO | CONTROLES+TEXTO) */
  .risk-body{
    grid-template-columns: 96px 1fr !important;
    min-height: unset !important;
  }
  .risk-icon img{ max-width: 84px !important; max-height: 84px !important; }

  /* Unimos controles y texto en bloque vertical para que respiren mejor */
  .risk-col-left{ border-left: 1px solid var(--pas-borde); border-top: none; }
  .risk-col-right{
    grid-column: 2 / 3; /* va debajo pero en la misma columna del contenido */
    border-left: none;
    border-top: 1px solid var(--pas-borde);
    margin-top: 6px;
  }

  .risk-options li{ font-size: 13px; }
  .risk-note input[type="text"]{ height: 24px; font-size: 12px; }
}

/* ---------- Breakpoint: <= 600px → una sola columna interna (ICONO arriba) ---------- */
@media (max-width: 600px){
  .risk-body{
    grid-template-columns: 1fr !important; /* todo en una columna */
  }
  .risk-icon{
    justify-content: flex-start;
    padding-bottom: 2px;
  }
  .risk-icon img{ max-width: 76px !important; max-height: 76px !important; }
  .risk-col-left, .risk-col-right{
    border-left: none;
    border-top: 1px solid var(--pas-borde);
    padding-top: 8px;
  }
  .risk-col-right{ margin-top: 6px; }
}

/* ===== Selector de área (botones azules) ===== */
.area-picker { background:#f5f9ff; border:1px solid #d8e7f8; }

.area-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center; /* centrado */
}

.btn-area{
  background:#2286cd;      /* azul del logo */
  color:#fff;
  border:1px solid #1b73b2;
  border-radius:12px;
  padding:10px 14px;
  font-weight:700;
  letter-spacing:.2px;
  min-width:240px;         /* todas del mismo ancho */
  transition:transform .12s ease, filter .12s ease;
}
.btn-area:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.btn-area:disabled{ opacity:.75; cursor:not-allowed; }

.btn-area.is-selected{
  background:#1b73b2;
  box-shadow: 0 6px 18px rgba(27,115,178,.25);
}

.btn-ats-outline{
  background:#fff;
  color:#1b73b2;
  border:1px solid #1b73b2;
  border-radius:10px;
  padding:6px 10px;
  font-weight:700;
}
.btn-ats-outline:hover{ background:#e8f2fb; }

/* Área elegida (ya validada o congelada) */
.btn-area.is-selected {
  background-color: #0073C5;   /* azul PAS */
  color: white;
  font-weight: bold;
  opacity: 1 !important;
}

/* —— Cuando el formulario está en solo lectura: el resto queda gris y no clickeable —— */
.readonly .btn-area:not(.is-selected) {
  background: #cbd5e1 !important;   /* gris “desactivado”, pero legible */
  color: #374151 !important;
  pointer-events: none !important;
  filter: none !important;
  opacity: 1 !important;
}