:root{
  --vrt-bg:#ffffff;
  --vrt-text:#161614;
  --vrt-muted:#6b7280;
  --vrt-border:#e5e7eb;
  --vrt-accent:#0d2256;     /* Azul corporativo */
  --vrt-accent-2:#fbc128;   /* Amarillo corporativo */
  --vrt-chip:#eef2ff;
}
.vrtp-protocolos{font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; background:var(--vrt-bg); color:var(--vrt-text); padding:clamp(16px,2.5vw,28px); border:1px solid var(--vrt-border); border-radius:20px; box-shadow:0 6px 24px rgba(0,0,0,.06); }
.vrtp-header h2{margin:0 0 6px; font-size:clamp(20px,2.2vw,28px); color:var(--vrt-accent);}
.vrtp-header p{margin:0; color:var(--vrt-muted)}
.vrtp-controls{display:grid; gap:12px; grid-template-columns:1fr; margin:16px 0 8px}
.vrtp-controls input, .vrtp-controls select{
  height:44px; border:1px solid var(--vrt-border); border-radius:12px; padding:0 12px; outline:0; font-size:15px; background:#fff;
}
.vrtp-controls input:focus, .vrtp-controls select:focus{border-color:var(--vrt-accent-2); box-shadow:0 0 0 3px rgba(251,193,40,.25)}
.vrtp-filters{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.vrtp-table-wrap{overflow:auto; border:1px solid var(--vrt-border); border-radius:16px}
.vrtp-table{width:100%; border-collapse:separate; border-spacing:0; min-width:680px}
.vrtp-table thead th{position:sticky; top:0; background:linear-gradient(0deg,#fff, #fff), var(--vrt-bg); z-index:1; text-align:left; font-weight:600; color:var(--vrt-accent); border-bottom:2px solid var(--vrt-accent-2); padding:12px 14px}
.vrtp-table tbody td{border-bottom:1px solid var(--vrt-border); padding:12px 14px; vertical-align:middle}
.vrtp-chip-proto{display:inline-flex; align-items:center; gap:8px}
.vrtp-badge{display:inline-block; font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--vrt-border); background:var(--vrt-chip)}
.vrtp-ports{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.vrtp-port{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; border:1px dashed var(--vrt-border)}
.vrtp-port b{font-variant-numeric:tabular-nums}
.vrtp-empty{padding:18px; text-align:center; color:var(--vrt-muted)}
.vrtp-footer{margin-top:10px; color:var(--vrt-muted)}
.vrtp-hide-sm{display:table-cell}

/* Tablets (<= 1024px) */
@media (max-width:1024px){
  .vrtp-table{min-width:0}
}

/* Móviles (<= 768px) */
@media (max-width:768px){
  .vrtp-controls{grid-template-columns:1fr}
  .vrtp-filters{grid-template-columns:1fr}
  .vrtp-table{min-width:0}
  .vrtp-hide-sm{display:none}
  .vrtp-table tbody td:first-child{font-weight:600}
  .vrtp-table tbody tr{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:10px 12px}
  .vrtp-table tbody td{border:0; padding:0}
  .vrtp-table tbody td:nth-child(2), .vrtp-table tbody td:nth-child(3){justify-self:start}
  .vrtp-table tbody tr+tr{border-top:1px solid var(--vrt-border)}
}