/* =========================================================
   SCT Security — visuales de las tarjetas Tecnología y Asesoría
   ========================================================= */

/* ---------- Cámara de reconocimiento de patentes (foto fija + capas animadas) ---------- */
.lpr { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 960 / 420; background: #1A2433; }
.lpr img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lpr .rec { right: 8px; top: 8px; }
.lpr .rec::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin-right: 5px; vertical-align: 1px; animation: blink 1.2s infinite; }
.lpr-ts { position: absolute; left: 10px; top: 9px; font: 500 10px/1 ui-monospace, Menlo, Consolas, monospace; color: #fff; letter-spacing: .05em; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.lpr-scan { position: absolute; left: 0; right: 0; height: 2px; top: 0; background: linear-gradient(90deg, transparent, rgba(46,224,127,.85), transparent); box-shadow: 0 0 10px rgba(46,224,127,.6); animation: lprScan 3.6s ease-in-out infinite; }
@keyframes lprScan { 0% { top: -2%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.lpr-result { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.lpr-result b { display: block; font-size: 13.5px; font-weight: 600; }
.lpr-result small { color: var(--ink-3); font-size: 12px; }

/* ---------- Matriz de riesgo ---------- */
.rm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.rm-head .viz-h { margin: 0; }
.rm-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); }
.rm-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.rm-legend .lg-b { background: #E5484D; }
.rm-legend .lg-a { background: var(--primary); margin-left: 8px; }
.rm { display: grid; grid-template-columns: 14px 36px 1fr; grid-template-rows: auto auto auto; column-gap: 6px; }
.rm-y { grid-row: 1; grid-column: 1; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; font-weight: 600; color: var(--ink-2); text-align: center; letter-spacing: .06em; text-transform: uppercase; }
.rm-ylabels { grid-row: 1; grid-column: 2; display: grid; grid-template-rows: repeat(3, 1fr); gap: 4px; font-size: 10.5px; color: var(--ink-3); }
.rm-ylabels span { display: flex; align-items: center; justify-content: flex-end; }
.rm-grid { grid-row: 1; grid-column: 3; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px; aspect-ratio: 1.8; }
.rm-grid .c { border-radius: 6px; position: relative; }
.rm-grid .c em { position: absolute; right: 6px; top: 4px; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.c.low { background: #DDF3E5; } .c.low em { color: #0B7A3B; }
.c.mid { background: #FDF0D5; }
.c.high { background: #FCDCC6; }
.c.crit { background: #F9C9CB; } .c.crit em { color: #B42318; }
.rm-xlabels { grid-row: 2; grid-column: 3; display: grid; grid-template-columns: repeat(3, 1fr); font-size: 10.5px; color: var(--ink-3); text-align: center; margin-top: 5px; }
.rm-x { grid-row: 3; grid-column: 3; text-align: center; font-size: 10px; font-weight: 600; color: var(--ink-2); letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }

/* Cada riesgo parte en su nivel inicial (rojo) y baja a su nivel con SCT (azul) */
.rk {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 5px;
  left: calc((var(--x) + .5) * 33.333%); top: calc((var(--y) + .5) * 33.333%); transform: translate(-50%, -50%);
  animation: rkMove 7s ease-in-out infinite;
}
.rk b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #fff; background: #E5484D; box-shadow: 0 0 0 3px rgba(229,72,77,.22); animation: rkColor 7s ease-in-out infinite; flex-shrink: 0; }
.rk small { font-size: 10px; font-weight: 600; color: var(--ink); background: rgba(255,255,255,.9); padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
.rk-2, .rk-2 b { animation-delay: .25s; }
.rk-3, .rk-3 b { animation-delay: .5s; }
/* Las etiquetas de la columna derecha se dibujan hacia la izquierda para no salirse */

@keyframes rkMove {
  0%, 25%  { left: calc((var(--x) + .5) * 33.333%); top: calc((var(--y) + .5) * 33.333%); }
  50%, 88% { left: calc((var(--x2) + .5) * 33.333%); top: calc((var(--y2) + .5) * 33.333%); }
  100%     { left: calc((var(--x) + .5) * 33.333%); top: calc((var(--y) + .5) * 33.333%); }
}
@keyframes rkColor {
  0%, 25%  { background: #E5484D; box-shadow: 0 0 0 3px rgba(229,72,77,.22); }
  50%, 88% { background: var(--primary); box-shadow: 0 0 0 3px rgba(27,95,209,.2); }
  100%     { background: #E5484D; box-shadow: 0 0 0 3px rgba(229,72,77,.22); }
}

/* Leyenda de riesgos: cómo cambia cada uno con SCT */
.rm-list { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.rm-list li { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; }
.rm-list b { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; color: #fff; background: var(--primary); }
.rm-list span { font-weight: 500; }
.rm-list em { font-style: normal; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.rm-list i { font-style: normal; font-weight: 600; padding: 1px 6px; border-radius: 999px; }
.t-crit { background: #F9C9CB; color: #B42318; }
.t-mid { background: #FDF0D5; color: #9A6100; }
.t-low { background: #DDF3E5; color: #0B7A3B; }
.rm-grid { aspect-ratio: 2.3; }