/* =========================
   CoreSafe – style.css FINAL
   ========================= */

/* ===== Variables ===== */
:root{
  --bg:#f2f4f7;
  --panel:#ffffff;
  --panel-2:#f7f6f3;
  --text:#0b0f14;
  --muted:#6b7280;
  --border:#e5e7eb;

  --danger:#dc2626;
  --ok:#16a34a;
  --warn:#d97706;

  --r:18px;

  --shadow:0 16px 40px rgba(2,6,23,.08);
  --shadow2:0 10px 22px rgba(2,6,23,.06);

  --ring:0 0 0 4px rgba(5,57,145,.22);

  --corp-grad:linear-gradient(135deg,#0b1f4d 0%,#0b2f78 35%,#08255e 70%,#061b45 100%);
  --corp-border:rgba(5,57,145,.55);
  --corp-shadow:0 14px 30px rgba(5,57,145,.22);
}

*{box-sizing:border-box}
html,body{font:15px/1.45 'Urbanist',system-ui,sans-serif;font-weight:500}
body{margin:0;color:var(--text);background:var(--bg)}
.hidden{display:none!important}
.wrap{max-width:1020px;margin:28px auto;padding:0 16px 40px}
.muted{color:var(--muted)}

/* ===== Banner ===== */
.banner{
  background:var(--corp-grad);
  color:#fff;
  border-radius:18px;
  padding:28px 40px;
  margin-bottom:16px;
  box-shadow:0 10px 26px rgba(11,15,20,.18);
}
.bannerInner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.brandBox{display:flex;align-items:center;gap:14px;min-width:0}
.bannerLogo{
  height:30px;width:auto;display:block;border-right:1px solid rgba(255,255,255,.35);padding-right:10px;
}
.bannerText{display:grid;gap:2px;min-width:0}
.bannerTagline{font-size:13.5px;color:rgba(255,255,255,.90);font-weight:400;line-height:1.05}
.bannerTitle{margin:0;font-size:18px;font-weight:850;letter-spacing:.25px;line-height:1.05}

.bannerMeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.tagPill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  font-size:12.5px;font-weight:900;
  color:rgba(255,255,255,.92);
  white-space:nowrap;
}

.bannerSubBlock{
  margin-top:12px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.18);
  display:grid;gap:10px;
  max-width:980px;
}
.bannerSubTitle{margin:0;font-size:14px;font-weight:950;color:rgba(255,255,255,.98)}
.bannerSubText{margin:0;font-size:13.6px;line-height:1.45;color:rgba(255,255,255,.72);font-weight:400}
.bannerSubText b{font-weight:950;color:rgba(255,255,255,.95)}

.bannerUL{
  margin:6px 0;
  padding-left:18px;
  line-height:1.35;
  color:rgba(255,255,255,.72);
  font-weight:400;
  font-size:13.6px;
}
.bannerUL li{margin:2px 0}
.hrCustom{border:0;height:1px;width:100%;background:rgba(229,231,235,.9);margin:14px 0}

@media (max-width:760px){
  .banner{padding:22px 18px}
  .bannerInner{flex-direction:column;align-items:flex-start}
  .bannerMeta{justify-content:flex-start}
}

/* ===== Panel / Card ===== */
.panel{
  background:var(--panel);
  border-radius:16px;
  padding:28px 40px;
  box-shadow:0 10px 18px rgba(11,15,20,.06);
}
.panel--primary{
  border:1px solid rgba(11,15,20,.12);
  box-shadow:0 16px 30px rgba(11,15,20,.10);
}
.panelHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.panelTitle{margin:0;font-weight:950;font-size:18px;letter-spacing:.2px;color:#053991}
.panelSub{margin:10px 0 0;color:var(--muted);line-height:1.35}

@media (max-width:760px){
  .panel{padding:18px 16px}
}

/* ===== Forms ===== */
label{display:grid;gap:6px;font-size:14px}
.fieldLabel{display:inline-flex;align-items:baseline;gap:6px;font-weight:750;color:var(--text)}
.reqStar{color:var(--danger);font-weight:900;line-height:1}
.hint{color:var(--muted);font-size:12.8px;line-height:1.35;margin-top:2px}
.error{color:var(--danger);font-size:12.8px;margin-top:2px}

input,select,textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:14px;
  padding:11px 12px;
  font:inherit;
  outline:none;
  background:#fff;
  transition:box-shadow .15s,border-color .15s,background .15s;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(5,57,145,.55);
  box-shadow:var(--ring);
}
textarea{min-height:120px;resize:vertical;line-height:1.35}

/* bloque empresa */
.companyGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:10px;
}
.companyGrid .span2{grid-column:1/-1}
@media (max-width:640px){
  .companyGrid{grid-template-columns:1fr}
}

/* estado bloqueado empresa */
input.is-locked{
  background:#f9fafb!important;
  border-color:rgba(11,15,20,.14)!important;
  color:rgba(11,15,20,.85)!important;
  box-shadow:none!important;
  cursor:not-allowed!important;
}

/* ===== Buttons ===== */
button{
  border:1px solid var(--border);
  background:#fff;
  border-radius:14px;
  padding:11px 12px;
  font:inherit;
  cursor:pointer;
  transition:background .15s,border-color .15s,transform .06s,opacity .15s,box-shadow .15s,filter .15s;
  box-shadow:0 10px 18px rgba(11,15,20,.06);
}
button:hover{background:#f9fafb;border-color:#d1d5db}
button:active{transform:translateY(1px)}
button:focus-visible{outline:none;box-shadow:var(--ring)}
button[disabled]{opacity:.6;cursor:not-allowed;box-shadow:none}

button.primary{
  background:var(--corp-grad)!important;
  border-color:var(--corp-border)!important;
  color:#fff!important;
  box-shadow:var(--corp-shadow)!important;
}
button.primary:hover{filter:brightness(1.03)}

/* toolbar botones */
.sectionToolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:14px 0 0;
}
.toolbarLeft{display:flex;gap:10px;flex-wrap:wrap}
.pillBtn{
  border:1px solid rgba(11,15,20,.14);
  background:rgba(11,15,20,.04);
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  box-shadow:0 10px 18px rgba(11,15,20,.06);
}
.pillBtn:hover{background:rgba(11,15,20,.07);border-color:rgba(11,15,20,.20)}
.pillBtn.primaryish{
  background:var(--corp-grad);
  border-color:rgba(255,255,255,.14);
  color:#fff;
  box-shadow:var(--corp-shadow);
}
.pillBtn.primaryish:hover{filter:brightness(1.03)}
.miniCounter{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:999px;
  border:1px solid rgba(11,15,20,.14);
  background:rgba(11,15,20,.04);
  font-weight:900;font-size:12.8px;
}

/* outline add/remove */
.btnOutline{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  font-weight:950;
  letter-spacing:.15px;
  background:rgba(255,255,255,.92);
  border:2px solid rgba(5,57,145,.28);
  color:#053991;
  box-shadow:0 10px 18px rgba(2,6,23,.06);
}
.btnOutline:hover{
  background:rgba(5,57,145,.05);
  border-color:rgba(5,57,145,.45);
  box-shadow:0 14px 24px rgba(2,6,23,.08);
}
.btnOutline:active{transform:translateY(1px)}
.btnOutline--danger{
  border-color:rgba(220,38,38,.30);
  color:#b91c1c;
}
.btnOutline--danger:hover{
  background:rgba(220,38,38,.06);
  border-color:rgba(220,38,38,.45);
  box-shadow:0 14px 24px rgba(220,38,38,.08);
}

.btnRow{display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap;margin-top:8px}
.btnRowStart{display:flex;gap:10px;justify-content:flex-start;flex-wrap:wrap;margin-top:8px}

/* Spinner */
.btnSpin{display:inline-flex;align-items:center;gap:10px}
.spinner{
  width:16px;height:16px;border-radius:999px;
  border:2px solid rgba(255,255,255,.55);
  border-top-color:rgba(255,255,255,1);
  animation:spin .8s linear infinite;
  flex:0 0 auto;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Risk Cards ===== */
.riskGrid{display:grid;gap:14px;margin-top:10px}
.riskGridCols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:760px){.riskGridCols{grid-template-columns:1fr}}

.riskCard{
  position:relative;
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(11,15,20,.12);
  background:#fff;
  box-shadow:0 10px 18px rgba(11,15,20,.06);
  cursor:pointer;
  user-select:none;
  transition:transform .08s, box-shadow .15s, border-color .15s, background .15s;
}
.riskCard:hover{
  transform:translateY(-1px);
  border-color:rgba(11,15,20,.18);
  box-shadow:0 14px 24px rgba(11,15,20,.08);
}
.riskCard input{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}

.riskCheck{
  width:22px;height:22px;border-radius:8px;
  border:1.5px solid rgba(11,15,20,.22);
  background:#fff;
  display:grid;place-items:center;
  flex:0 0 auto;
  margin-top:2px;
  transition:background .15s,border-color .15s;
}
.riskCheck svg{
  width:14px;height:14px;
  opacity:0;
  transform:scale(.9);
  transition:opacity .15s,transform .15s;
}

.riskTxt{min-width:0}
.riskTitle{font-weight:950;letter-spacing:.15px;margin:0 0 6px;font-size:14.6px}
.riskRep{margin:0;color:var(--muted);font-size:13px;line-height:1.4}

/* seleccionado (fallback por JS con is-selected) */
.riskCard.is-selected{
  background:var(--corp-grad);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 18px 34px rgba(11,15,20,.22);
}
.riskCard.is-selected .riskTitle,
.riskCard.is-selected .riskRep{color:#fff}
.riskCard.is-selected .riskRep{opacity:.86}
.riskCard.is-selected .riskCheck{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.28);
}
.riskCard.is-selected .riskCheck svg{
  opacity:1;
  transform:scale(1);
  fill:#fff;
}

/* checkbox disabled (Incluido) */
.riskCard input:disabled + .riskCheck{
  opacity:.9;
}

/* ===== Details / Zones ===== */
.stack{display:grid;gap:12px;margin-top:12px}
details.zoneBox{
  border:1px solid rgba(11,15,20,.12);
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 18px rgba(11,15,20,.06);
  overflow:hidden;
}
details.zoneBox summary{
  padding:12px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  cursor:pointer;
  list-style:none;
  font-weight:950;
}
details.zoneBox summary::-webkit-details-marker{display:none}
details.zoneBox .inside{
  padding:0 14px 14px;
  border-top:1px solid rgba(11,15,20,.10);
}
.sumLeft{display:flex;flex-direction:column;gap:2px;min-width:0}
.sumLeft span{font-size:12.8px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.badge{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:900;
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
  white-space:nowrap;
}

/* ===== Table Pro (importante para que no “muera”) ===== */
table.tablePro{
  width:100%;
  border-collapse:separate!important;
  border-spacing:0!important;
  border:1px solid rgba(11,15,20,.14);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 18px rgba(11,15,20,.06);
}
table.tablePro thead th{
  background:rgba(11,15,20,.03);
  color:rgba(75,85,99,.95);
  font-weight:900;
  font-size:12.5px;
  letter-spacing:.35px;
  text-transform:uppercase;
  border-bottom:1px solid rgba(11,15,20,.12);
}
table.tablePro th, table.tablePro td{
  padding:10px 10px;
  border-right:1px solid rgba(11,15,20,.08);
}
table.tablePro th:last-child, table.tablePro td:last-child{border-right:0}
table.tablePro tbody tr:not(:last-child) td{border-bottom:1px solid rgba(11,15,20,.08)}
table.tablePro tbody tr:hover td{background:rgba(5,57,145,.04)}

table.tablePro input,
table.tablePro textarea,
table.tablePro select{
  width:100%;
  border:1px solid rgba(11,15,20,.14)!important;
  border-radius:10px!important;
  padding:10px 10px!important;
  background:#fff;
}
table.tablePro input:focus,
table.tablePro textarea:focus,
table.tablePro select:focus{
  border-color:rgba(5,57,145,.55)!important;
  box-shadow:0 0 0 4px rgba(5,57,145,.18)!important;
}

/* acciones bajo tabla */
.tableActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.p2Actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* ===== Animación reveal ===== */
.reveal{animation:fadeIn .18s ease-out both}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

/* ===== Badge “Nuevo/Incluido” ===== */
.countBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:20px;
  padding:0 7px;
  margin-left:8px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  border:1px solid rgba(11,15,20,.18);
  background:rgba(11,15,20,.06);
  color:var(--text);
  vertical-align:middle;
}
.countBadge.newBadge{
  height:16px;
  padding:0 8px;
  width:fit-content;
  border:1px solid rgba(34,197,94,.45);
  background:rgba(34,197,94,.10);
  color:rgba(21,128,61,1);
  font-weight:800;
  font-size:10px!important;
  letter-spacing:.2px;
  text-transform:uppercase;
  line-height:1;
}

/* ===== Footer de envío ===== */
.formFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #eef2f7;
}
.termsNote{
  margin:0;
  font-size:12.8px;
  line-height:1.35;
  color:var(--muted);
}
@media (max-width:640px){
  .formFooter{flex-direction:column;align-items:stretch}
  .formFooterAction .primary{width:100%;min-width:0}
}