:root { --primary:#2e86de; --accent:#48dbfb; --bg:#f4f6f9; --text:#2c3e50; }
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter','Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}

header{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;padding:25px 40px;position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center}
header::before{content:"";position:absolute;top:-20%;left:-20%;width:160%;height:200%;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.18),transparent 65%);transform:rotate(-8deg)}
.hilo{position:absolute;inset:0;pointer-events:none;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="120" viewBox="0 0 800 120"><path d="M0 80 Q120 10 240 70 T480 70 T800 80" fill="none" stroke="rgba(255,255,255,0.35)" stroke-width="3" stroke-dasharray="8 6"/></svg>') repeat-x;background-size:800px 120px;opacity:.75}
.banner-content{position:relative;z-index:2;display:flex;flex-direction:column;gap:6px;max-width:900px}
.title{font-size:22px;font-weight:700;letter-spacing:.5px}
.subtitle{font-size:16px;opacity:.95}
.details{font-size:13px;opacity:.85}
.logo-placeholder{position:relative;z-index:2;width:70px;height:70px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;box-shadow:0 3px 6px rgba(0,0,0,.25);background:conic-gradient(from 210deg,var(--accent),var(--primary));-webkit-mask:radial-gradient(circle at 30% 35%,transparent 14px,#000 15px);mask:radial-gradient(circle at 30% 35%,transparent 14px,#000 15px);color:#fff}

main{padding:30px 40px;max-width:1200px;margin:auto}
h2{margin-top:34px;margin-bottom:14px;font-size:18px;color:var(--primary);border-left:4px solid var(--accent);padding-left:8px}

.panel-control{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:20px;margin-top:8px}
.hexagon{background:linear-gradient(135deg,var(--accent),var(--primary));clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;padding:16px;text-align:center;transition:transform .2s ease, filter .2s ease;box-shadow:0 4px 10px rgba(0,0,0,.12);cursor:pointer}
.hexagon:hover{transform:translateY(-4px) scale(1.04);filter:saturate(115%)}

.list-header{display:flex;align-items:center;gap:12px}
.btn-add{margin-left:auto;background:var(--primary);color:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s}
.btn-add:hover{background:var(--accent)}

table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,.05)}
th,th,td{
    padding: 4px 10px; /* Reducido de 10px 15px */
    text-align:left;
    font-size:12px; /* Mantienes tu font-size original */
}
th{background:#eef2f7;color:#34495e;font-weight:600;white-space:nowrap}
tr:not(:last-child) td{border-bottom:1px solid #e6e9ef}
tr:hover{background:#f9fbff}

.link-btn{background:var(--accent);color:#fff;border:none;border-radius:6px;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer;text-decoration:none}
.link-btn:hover{background:var(--primary)}
.icon-btn{background:#eaf6ff;border:none;border-radius:6px;padding:6px 10px;font-size:12px;font-weight:700;color:var(--primary);cursor:pointer}
.icon-btn:hover{background:#d7efff}

.form-container{display:none;background:#fff;padding:20px;border-radius:10px;box-shadow:0 3px 10px rgba(0,0,0,.1);margin-top:20px}
.form-container h3{margin-bottom:15px;font-size:16px;color:var(--primary)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.form-group label{display:block;font-size:13px;margin-bottom:6px;color:#41556a}
.form-group input,.form-group select{width:100%;padding:9px;border:1px solid #ccd3db;border-radius:8px;font-size:14px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.btn-submit,.btn-cancel{background:var(--primary);color:#fff;padding:10px 18px;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:background .25s}
.btn-submit:hover{background:var(--accent)}
.btn-cancel{background:#95a5ae}
.btn-cancel:hover{background:#7f8c97}

#testBox { position:absolute; top:10px; right:20px; color:#fff; font-weight:600; }

/* Tabla con scroll */
.table-wrap{
  background:#fff;
  border-radius:10px;
  box-shadow:0 4px 15px rgba(0,0,0,.05);
  overflow:auto;                 /* scroll vertical y horizontal */
  max-height:60vh;               /* límite de alto */
  max-width:100%;
  -webkit-overflow-scrolling:touch;
}

table#ap-list {
  min-width: 900px;              /* fuerza barra horizontal si hay muchas columnas */
}

table.compact th, table.compact td{
  font-size:10px;
  padding:8px 10px;
  white-space:nowrap;
}

.hidden { display: none !important; }

/* Fijar penúltima columna (Acceso) */
#ap-list th.sticky-2,
#ap-list td.sticky-2 {
  position: sticky;
  right: 140px;
  z-index: 2;
  background: #fff;
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  box-shadow: -3px 0 6px rgba(0,0,0,.05);
}

/* Fijar última columna (Acciones) */
#ap-list th.sticky,
#ap-list td.sticky {
  position: sticky;
  right: 0;
  z-index: 3;
  background: #fff;
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  box-shadow: -3px 0 6px rgba(0,0,0,.08);
}

/* =========================
   Mensajes de feedback
   ========================= */
#msg {
  margin-top: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.msg-ok {
  color: #27ae60;   /* Verde éxito */
}

.msg-error {
  color: #e74c3c;   /* Rojo error */
}