/* ============================================================
   Kelp para concesionarios · Seguridad. La página es la de kelp.work
   (seguridad.css) con contenido de concesionario; aquí solo va lo propio:
   «Lo que pregunta un gerente antes de dar acceso». Prefijo: cs-.
   ============================================================ */
.cs3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.cs { display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.cs:last-child { border-right: 0; }
.cs-v { position: relative; height: 290px; margin: 20px 20px 0; border-radius: 16px; }
.cs-cv { --cw: 340px; --ch: 250px; }
.cs h3 { padding: 24px clamp(20px, 2.6vw, 32px) 0; font-size: 21px; line-height: 1.2; letter-spacing: -0.02em; font-weight: var(--w-head); }
.cs p { padding: 8px clamp(20px, 2.6vw, 32px) 34px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

/* El correo: la pantalla de permisos de Microsoft */
.cs-ms { position: absolute; left: 10px; top: 8px; width: 320px; padding: 14px 16px 12px; border-radius: 14px; }
.cs-ms-h { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.cs-ms-h img { width: 18px; height: 18px; }
.cs-ms-h b { display: block; font-size: 13px; font-weight: 600; }
.cs-ms-h small { display: block; font-size: 11px; color: var(--ink-3); }
.cs-p { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 12.5px; font-weight: 500; }
.cs-p i { width: 17px; height: 17px; border-radius: 50%; flex: none; background: #3BA57E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.cs-p.cs-no { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgb(1 33 32 / .35); }
.cs-p.cs-no i { background: #C9D2CF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 9px no-repeat; }
.cs-sw { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 600; }
.cs-tg { position: relative; width: 34px; height: 20px; border-radius: 10px; background: #3BA57E; transition: background-color .25s; }
.cs-tg i { position: absolute; left: 16px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: left .25s var(--ease-out); }
.cs-tg.off { background: #C9D2CF; }
.cs-tg.off i { left: 2px; }
.cs-st { justify-items: start; }

/* Los sistemas de la marca: el informe, en solo lectura */
.cs-bi { position: absolute; left: 14px; top: 10px; width: 312px; height: 158px; border-radius: 14px; overflow: hidden; }
.cs-bi-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.cs-bi-h img { width: 16px; height: 16px; }
.cs-bi-h b { font-size: 12.5px; font-weight: 600; }
.cs-ro { margin-left: auto; display: flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 99px; background: var(--foam-2); color: var(--ok); font-size: 11px; font-weight: 700; }
.cs-ro .ic { width: 12px; height: 12px; }
.cs-bi-b { display: flex; align-items: flex-end; gap: 18px; padding: 14px 14px 0; }
.cs-bars { display: flex; align-items: flex-end; gap: 6px; height: 72px; }
.cs-bars i { width: 20px; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(#E9BE76, #CF923A); opacity: .55; transition: opacity .3s; }
.cs-bars i.cs-hit.on { opacity: 1; box-shadow: 0 0 0 2px var(--teal); }
.cs-rows { flex: 1; display: grid; gap: 9px; padding-bottom: 6px; }
.cs-rows i { height: 7px; border-radius: 4px; background: #E4EAE8; }
.cs-rows i:nth-child(2) { width: 76%; }
.cs-rows i:nth-child(3) { width: 58%; }
.cs-scan { position: absolute; top: 40px; bottom: 0; left: 0; width: 40px; background: linear-gradient(90deg, transparent, rgb(0 74 72 / .14), transparent); opacity: 0; }
.cs-ed { position: absolute; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 7px; background: #F1F4F2; color: var(--ink-3); font-size: 11px; font-weight: 600; }
.cs-ed .ic { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.cs-ed.no { animation: cs-shake .4s; }
@keyframes cs-shake { 25% { translate: -3px 0; } 75% { translate: 3px 0; } }
.cs-rd { position: absolute; left: 50%; translate: -50% 0; top: 184px; display: flex; align-items: center; gap: 10px; padding: 10px 13px 10px 10px; border-radius: 12px; }
.cs-rd .kbot { width: 26px; height: 26px; }
.cs-rd b { font-size: 13.5px; font-weight: 600; white-space: nowrap; }

/* Los datos de los clientes: el contrato y después los datos */
.cs-dpa { position: absolute; left: 20px; top: 8px; width: 300px; padding: 13px 15px 12px; border-radius: 14px; }
.cs-dpa-h { display: flex; align-items: center; gap: 8px; }
.cs-dpa-h .ic { width: 15px; height: 15px; color: var(--teal); }
.cs-dpa-h b { font-size: 12.5px; font-weight: 600; }
.cs-ln { display: grid; gap: 7px; margin: 12px 0 14px; }
.cs-ln i { height: 6px; border-radius: 3px; background: #E4EAE8; }
.cs-ln i:nth-child(2) { width: 84%; }
.cs-ln i:nth-child(3) { width: 66%; }
.cs-sig { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cs-sig svg { width: 100%; height: 30px; border-bottom: 1px solid var(--line-2); overflow: visible; }
.cs-sig path { fill: none; stroke: var(--deep); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; }
.cs-sig small { display: block; margin-top: 4px; font-size: 10.5px; color: var(--ink-3); }
.cs-fd { position: absolute; left: 50%; translate: -50% 0; top: 178px; display: flex; align-items: center; gap: 11px; padding: 11px 13px 11px 11px; border-radius: 12px; transition: box-shadow .3s; }
.cs-lk { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--foam-2); color: var(--ok); flex: none; transition: background-color .3s, color .3s; }
.cs-lk .ic { width: 16px; height: 16px; }
.cs-fd.shut .cs-lk { background: #EEF1EF; color: var(--ink-3); }
.cs-fd b { font-size: 13.5px; font-weight: 600; white-space: nowrap; }

@media (max-width: 980px) {
  .cs3 { grid-template-columns: 1fr; }
  .cs { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ---- Hero: lo que lee Kelp (en solo lectura), dónde quedan los datos y lo que sale ---- */
#s-cofre { height: 600px; }
.cf-cv { --cw: 1040px; --ch: 460px; }
.cf-s { position: absolute; left: 0; width: 230px; height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 8px; border-radius: 14px; background: #fff; box-shadow: 0 18px 34px -18px rgb(0 0 0 / .6); transition: box-shadow .3s; }
.cf-s.on { box-shadow: 0 0 0 2px #7FE0BE, 0 18px 34px -18px rgb(0 0 0 / .6); }
.cf-si { display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 36px; height: 36px; padding: 0 6px; border-radius: 10px; background: #F1F4F2; color: var(--teal); flex: none; }
.cf-si img, .cf-si .ic { width: 17px; height: 17px; }
.cf-s b { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.cf-ro { position: absolute; left: 0; top: 52px; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: rgb(198 238 227 / .12); box-shadow: inset 0 0 0 1px rgb(198 238 227 / .25); color: var(--foam); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.cf-ro .ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.cf-ln { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cf-tr { fill: none; stroke: rgb(198 238 227 / .22); stroke-width: 1.5; }
.cf-fl { fill: none; stroke: #7FE0BE; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 12; opacity: 0; transition: opacity .3s; }
.cf-fl.on { opacity: 1; animation: cf-flow .7s linear infinite; }
@keyframes cf-flow { to { stroke-dashoffset: -14; } }
.cf-at { fill: none; stroke: #E39B35; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.cf-pt { position: absolute; left: 340px; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #0E3F3C; box-shadow: 0 0 0 2px rgb(198 238 227 / .5); transition: background-color .3s, box-shadow .3s; z-index: 2; }
.cf-pt.on { background: #7FE0BE; box-shadow: 0 0 0 4px rgb(127 224 190 / .25); }
.cf-box { position: absolute; left: 340px; top: 30px; width: 362px; height: 368px; border-radius: 22px; background: linear-gradient(180deg, rgb(255 255 255 / .1), rgb(255 255 255 / .04)); box-shadow: inset 0 0 0 1.5px rgb(198 238 227 / .42), 0 0 0 10px rgb(198 238 227 / .035), 0 40px 80px -40px rgb(0 0 0 / .7); }
.cf-bh { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px; border-bottom: 1px solid rgb(198 238 227 / .16); }
.cf-k { position: relative; width: 28px; height: 28px; border-radius: 8px; }
.cf-k .rp { width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 10px; box-shadow: 0 0 0 2px var(--foam); }
.cf-bh b { font-size: 14.5px; font-weight: 600; color: #F2FBF8; }
.cf-eu { margin-left: auto; display: flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; border-radius: 99px; background: rgb(198 238 227 / .14); color: var(--foam); font-size: 11px; font-weight: 600; white-space: nowrap; }
.cf-eu i { width: 16px; height: 16px; border-radius: 50%; background: #1D3E8F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23FFCC00'%3E%3Ccircle cx='12' cy='5' r='1.2'/%3E%3Ccircle cx='15.5' cy='6' r='1.2'/%3E%3Ccircle cx='18' cy='8.5' r='1.2'/%3E%3Ccircle cx='19' cy='12' r='1.2'/%3E%3Ccircle cx='18' cy='15.5' r='1.2'/%3E%3Ccircle cx='15.5' cy='18' r='1.2'/%3E%3Ccircle cx='12' cy='19' r='1.2'/%3E%3Ccircle cx='8.5' cy='18' r='1.2'/%3E%3Ccircle cx='6' cy='15.5' r='1.2'/%3E%3Ccircle cx='5' cy='12' r='1.2'/%3E%3Ccircle cx='6' cy='8.5' r='1.2'/%3E%3Ccircle cx='8.5' cy='6' r='1.2'/%3E%3C/g%3E%3C/svg%3E") center / 16px no-repeat; }
.cf-r { position: absolute; left: 18px; right: 18px; height: 54px; display: flex; align-items: center; gap: 14px; padding: 0 14px; border-radius: 12px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(198 238 227 / .1); transition: background-color .35s; }
.cf-r.on { background: #fff; box-shadow: 0 14px 28px -16px rgb(0 0 0 / .6); }
.cf-r > span { display: grid; gap: 1px; min-width: 132px; }
.cf-r small { font-size: 11.5px; font-weight: 600; color: rgb(198 238 227 / .6); transition: color .35s; }
.cf-r b { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: rgb(242 251 248 / .4); font-variant-numeric: tabular-nums; transition: color .35s; }
.cf-r.on small { color: var(--ink-3); }
.cf-r.on b { color: var(--ink); }
.cf-rb { flex: 1; height: 6px; border-radius: 3px; background: rgb(198 238 227 / .14); overflow: hidden; transition: background-color .35s; }
.cf-r.on .cf-rb { background: rgb(1 33 32 / .08); }
.cf-rb i { display: block; height: 100%; border-radius: 3px; background: var(--teal); transform-origin: left; }
.cf-hit { position: absolute; right: -2px; width: 4px; height: 40px; margin-top: -20px; border-radius: 2px; background: #E39B35; box-shadow: 0 0 14px 3px rgb(227 155 53 / .45); opacity: 0; }
.cf-gt { position: absolute; right: -4px; top: 168px; width: 8px; height: 60px; border-radius: 4px; background: #0E3F3C; box-shadow: inset 0 0 0 1.5px #E39B35; overflow: hidden; }
.cf-gt i { position: absolute; inset: 0; background: #E39B35; transform-origin: top; }
.cf-g { position: absolute; left: 790px; width: 250px; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-radius: 14px; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1.5px rgb(198 238 227 / .2); color: rgb(198 238 227 / .6); }
.cf-g .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.cf-g b { display: block; font-size: 13px; font-weight: 600; color: rgb(242 251 248 / .7); }
.cf-gs { display: block; font-size: 11.5px; font-weight: 600; color: #F5C98A; }
.cf-out { position: absolute; left: 726px; top: 186px; width: 214px; display: grid; gap: 9px; padding: 12px 14px; border-radius: 14px; box-shadow: 0 24px 48px -20px rgb(0 0 0 / .6); }
.cf-oh { display: flex; align-items: center; gap: 8px; }
.cf-oh img { width: 16px; height: 16px; }
.cf-oh b { font-size: 13px; font-weight: 600; white-space: nowrap; }
.cf-os { justify-items: start; }
.cf-ap { padding: 6px 12px; border-radius: 8px; background: var(--deep); color: var(--foam); font-size: 12px; font-weight: 600; }
.cf-done { display: flex; align-items: center; gap: 6px; padding: 6px 2px; color: var(--ok); font-size: 12px; font-weight: 700; }
.cf-done .ic { width: 14px; height: 14px; }
.cf-to { position: absolute; left: 976px; top: 190px; width: 64px; display: grid; justify-items: center; gap: 5px; }
.cf-to img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgb(255 255 255 / .9), 0 14px 28px -12px rgb(0 0 0 / .6); transition: box-shadow .3s; }
.cf-to.on img { box-shadow: 0 0 0 3px #7FE0BE, 0 0 0 9px rgb(127 224 190 / .2); }
.cf-to small { font-size: 11.5px; font-weight: 600; color: #F2FBF8; white-space: nowrap; }
.cs-lg { display: flex; gap: 4px; }

/* Los cajones de «Dónde se guardan los datos»: cada área con su icono en lugar de siglas */
.ai-lb .co .ic { width: 13px; height: 13px; color: #fff; }