/* ===== TeUbika.com — admin.css =====
   Solo lo usa admin.html: pantalla de login del panel y el dashboard
   (pestañas, tablas, badges). No se enlaza desde ninguna otra página
   pública -- admin.html no aparece en el menú principal a propósito
   (ver README, sección "Panel de administración"). */

.admin-shell{
  min-height:calc(100vh - 64px);
  background:var(--crema);
  display:flex;
  flex-direction:column;
}
.admin-topbar{
  background:#fff; border-bottom:1px solid var(--borde);
  padding:16px 32px; display:flex; align-items:center; justify-content:space-between;
}
.admin-topbar .logo img{height:30px;}
.admin-topbar-actions{display:flex; align-items:center; gap:14px;}
.admin-security-banner{
  background:#fff7e6; border-bottom:1px solid #ffe1a8; color:#8a5a00;
  font-size:12.5px; padding:9px 32px; text-align:center;
}
.admin-security-banner code{background:rgba(0,0,0,.06); padding:1px 5px; border-radius:4px;}

/* ---- Login ---- */
.admin-login-wrap{
  flex:1; display:flex; align-items:center; justify-content:center; padding:40px 20px;
}
.admin-login-card{
  background:#fff; border-radius:16px; box-shadow:var(--sombra); padding:38px;
  width:100%; max-width:380px; text-align:center;
}
.admin-login-card img{height:34px; margin-bottom:18px;}
.admin-login-card h1{font-size:20px; color:var(--azul); margin-bottom:6px;}
.admin-login-card .sub{font-size:13px; color:var(--gris-texto); margin-bottom:22px;}
.admin-login-card form{text-align:left;}
.admin-login-error{
  color:#c0392b; font-size:12.5px; margin-top:10px; min-height:16px;
}

/* ---- Dashboard ---- */
.admin-main{flex:1; max-width:1400px; width:100%; margin:0 auto; padding:26px 32px 80px;}
.admin-tabs{display:flex; gap:10px; margin-bottom:22px; flex-wrap:wrap;}
.admin-tabs button{
  padding:9px 18px; border-radius:20px; border:1.5px solid var(--borde); background:#fff;
  font-size:13px; font-weight:700; color:var(--azul); cursor:pointer;
}
.admin-tabs button.active{background:var(--azul); border-color:var(--azul); color:#fff;}
.admin-tab-panel{display:none;}
.admin-tab-panel.active{display:block;}

.admin-panel-box{
  background:#fff; border:1px solid var(--borde); border-radius:14px; padding:22px; margin-bottom:22px;
}
.admin-filters-row{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; align-items:flex-end;}
.admin-filters-row .form-group{margin-bottom:0; min-width:160px;}
.admin-filters-row .form-group.grow{flex:1; min-width:220px;}
.admin-count{font-size:12.5px; color:var(--gris-texto); margin-bottom:12px;}

/* Grid de 2 columnas para los paneles de la pestaña Métricas (por tipo /
   por plan / top ciudades). Antes venía como style="" inline en
   js/pages/admin.js -- eso no podía colapsar en celular con un @media
   externo, y sin min-width:0 los .admin-panel-box tampoco se encogían
   por debajo del ancho mínimo de sus filas de barra (.bar-row), que
   desbordaban el panel angosto. */
.admin-two-col{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.admin-two-col > *{min-width:0;}
@media (max-width: 700px){
  .admin-two-col{grid-template-columns:1fr;}
}

.admin-table-wrap{overflow-x:auto;}
.admin-table{width:100%; border-collapse:collapse; font-size:13px;}
.admin-table th{
  text-align:left; padding:9px 10px; background:var(--crema); color:var(--azul);
  font-size:11.5px; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap;
}
.admin-table td{padding:9px 10px; border-bottom:1px solid var(--borde); vertical-align:middle;}
.admin-table tr:last-child td{border-bottom:none;}
.admin-table select{
  padding:6px 8px; border:1.5px solid var(--borde); border-radius:7px; font-size:12.5px; color:#1c2b3f;
}
.admin-muted{color:var(--gris-texto); font-size:11.5px;}
.admin-badge{
  display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700;
}
.admin-badge.ok{background:#e3f6ea; color:var(--verde-dark);}
.admin-badge.off{background:#fdeaea; color:#c0392b;}
.admin-badge.plan-basico{background:var(--crema); color:var(--gris-texto);}
.admin-badge.plan-destacado{background:#fff3d6; color:#8a5a00;}
.admin-badge.plan-premium{background:#e7e9ff; color:#3a3fb0;}
.admin-badge.risk-bajo{background:#e3f6ea; color:var(--verde-dark);}
.admin-badge.risk-medio{background:#fff3d6; color:#8a5a00;}
.admin-badge.risk-alto{background:#fdeaea; color:#c0392b;}

.admin-notice{
  background:#eef4f9; border:1px solid #cfe0ee; color:var(--azul); font-size:13px;
  padding:16px 18px; border-radius:10px; line-height:1.6;
}

@media (max-width: 700px){
  .admin-topbar, .admin-main{padding-left:18px; padding-right:18px;}
  .admin-filters-row .form-group{min-width:120px;}
}