.iotp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none;align-items:stretch}
.iotp-grid > li{display:flex;min-width:0}
.iotp-card{display:flex;flex-direction:column;align-items:center;width:100%;min-width:0;flex:1;padding:20px 16px 16px;background:#eef6ff;border-radius:12px;text-align:center}
.iotp-card img{width:40px;height:40px;flex:none;margin:0 0 12px}
.iotp-card-body{display:flex;flex-direction:column;align-items:center;width:100%;min-width:0;flex:1}
.iotp-card h3{margin:10px 0 16px;max-width:16em;color:var(--ufro-deep);font-size:14px;line-height:1.35;font-weight:750;text-align:center}
.iotp-value{margin:0;color:#00407b;font-size:32px;font-weight:800;line-height:1;letter-spacing:-.4px}
.iotp-bands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;width:100%;max-width:240px;margin:0 auto;padding:0;list-style:none}
.iotp-bands li{display:flex;flex-direction:column;align-items:center;min-width:0}
.iotp-band{display:block;margin:6px 0 0;color:#536d88;font-size:13px;font-weight:750;letter-spacing:.02em;line-height:1.2}
.iotp-bands .iotp-value{font-size:26px}
.iotp-meta{margin:4px 0 0;color:#536d88;font-size:12px;line-height:1.35}
.iotp-state{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:auto 0 0;min-height:24px;padding:1px 8px;border-radius:999px;background:#fff;color:#24384d;font-size:12px;font-weight:750}
.iotp-mark{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)}
.iotp-amarillo .iotp-mark,.iotp-mark-amarillo{background:#c89600}
.iotp-rojo .iotp-mark,.iotp-mark-rojo{background:#c62828}
.iotp-verde .iotp-mark,.iotp-mark-verde{background:#1b7f45}
.iotp-help{margin-top:12px;border:1px solid #d5e6f5;border-radius:10px;background:#f7fbff}
.iotp-help summary{min-height:44px;display:flex;align-items:center;padding:8px 14px;color:#00407b;font-weight:750;cursor:pointer}
.iotp-help summary:focus-visible{outline:3px solid #002b5b;outline-offset:2px}
.iotp-help-body{padding:0 14px 14px}
.iotp-help-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 18px}
.iotp-help h3{margin:0 0 6px;color:var(--ufro-deep);font-size:14px}
.iotp-help ul{margin:0;padding:0;list-style:none}
.iotp-help li{display:flex;align-items:center;gap:6px;margin:3px 0;color:#24384d;font-size:13px;line-height:1.35}
.iotp-help-body > p{margin:12px 0 0;padding-top:10px;border-top:1px solid #d5e6f5;color:#24384d;font-size:13px;line-height:1.45}
@media (prefers-reduced-motion:no-preference){
  .iotp-card{transition:box-shadow .2s ease}
  .iotp-card:hover{box-shadow:0 8px 18px rgba(3,46,97,.08)}
}
@media (max-width:900px){
  .iotp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .iotp-grid > li:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:768px){
  .iotp-help-cols{grid-template-columns:1fr}
}
@media (max-width:640px){
  .iotp-grid{grid-template-columns:1fr}
  .iotp-value{font-size:34px}
  .iotp-bands .iotp-value{font-size:28px}
}