:root{
    --ink:#0b1220;
    --muted:#5b6475;
    --brand:#ba101b;
    --line:#e4e7ec;
    --bg:#fff;
    --bg-alt:#f7f8fa;
    --radius:12px;
    --shadow:0 10px 28px rgba(15,23,42,.08);
  }

  /* Contenedor general */
  .contacts{
    background:var(--bg);
    border:1px solid rgba(15,23,42,.12);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:16px;
  }

  /* Barra de categorías (tabs accesibles) */
  .catbar{
    display:flex; flex-wrap:wrap; gap:8px;
    margin:0 0 12px 0; padding:0; list-style:none;
  }
  .catbar button{
    appearance:none; border:1px solid var(--line);
    background:var(--bg); color:var(--ink);
    padding:10px 14px; border-radius:999px; cursor:pointer;
    font-weight:600; letter-spacing:.2px;
    transition:background .15s ease,border-color .15s ease, color .15s ease;
  }
  .catbar button:hover{ background:var(--bg-alt) }
  .catbar button[aria-selected="true"]{
    background:rgba(186,16,27,.08);
    border-color:rgba(186,16,27,.35);
    color:var(--ink);
  }

  /* Paneles */
  .catpanel{ display:none; }
  .catpanel.is-active{ display:block; }

  .catpanel h4{
    margin:6px 0 12px 0; color:var(--ink);
  }

  /* Tabla “bonita” y responsive a tarjetas */
  .ctable{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
  }
  .ctable thead th{
    background:var(--bg-alt);
    color:var(--ink);
    font-weight:700;
    padding:12px 10px;
    border-bottom:1px solid var(--line);
    text-align:left;
    white-space:nowrap;
  }
  .ctable tbody td{
    padding:10px; border-bottom:1px solid var(--line); vertical-align:top;
  }
  .ctable tbody tr:hover{ background:#fafbfc; }
  .ctable tbody tr:last-child td{ border-bottom:0; }

  .ctable i{ color:var(--muted); margin-right:4px; }
  .ctable a{ color:#0b6bcb; text-decoration:none; }
  .ctable a:hover{ text-decoration:underline; }

  /* Tarjetas en pantallas pequeñas */
  @media (max-width: 768px){
    .ctable thead{ display:none; }
    .ctable, .ctable tbody, .ctable tr, .ctable td{ display:block; width:100%; }
    .ctable tbody tr{
      border-bottom:1px solid var(--line);
      padding:10px 10px 6px 10px;
    }
    .ctable tbody tr:last-child{ border-bottom:0; }
    .ctable td{
      border:0 !important;
      padding:6px 0 !important;
    }
    .ctable td[data-label]::before{
      content:attr(data-label) " ";
      display:block; font-size:12px; color:var(--muted);
      margin-bottom:2px;
    }
  }