/* Montañita RP — Theme unificado (v2)
   Paleta inspirada en el logo:
   Amarillos/Naranjas: #f8c10a → #f59f0b
   Fondo azul oscuro con degradado
*/

:root{
  /* Colores base */
  --bg:#0f1724;            /* fondo superior */
  --bg-2:#071018;          /* fondo inferior */
  --panel:#142230;         /* panel/side */
  --card:#0d1822;          /* tarjetas */
  --border:#223545;        /* bordes sutiles */
  --text:#eaf2fb;          /* texto principal */
  --muted:#9fb0be;         /* texto secundario */

  /* Acentos (logo) */
  --accent:#f59f0b;        /* naranja profundo */
  --accent-2:#f8c10a;      /* amarillo */
  --accent-3:#ffd34d;      /* amarillo claro */

  --success:#16a34a;
  --danger:#c53030;

  /* Efectos */
  --glass:rgba(255,255,255,.03);
  --shadow:0 12px 28px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg,var(--bg),var(--bg-2));
  color:var(--text);
}

/* ================= Header ================= */
.header{
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(255,255,255,.02));
  border-bottom:3px solid var(--accent);
  padding:18px 28px;
  display:flex; align-items:center; gap:18px;
}
.header .brand{
  font-weight:900; font-size:22px; letter-spacing:.2px;
  color:#fff; display:flex; align-items:center; gap:10px;
}
.header .brand img{height:26px; vertical-align:middle}
.header nav{margin-left:auto; display:flex; gap:12px; align-items:center}
.header nav a{
  color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:10px;
  border:1px solid transparent; font-weight:700;
}
.header nav a:hover{border-color:var(--border); color:#dfe9f3}
.header nav a.active{
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  color:#0a0e12; border-color:transparent;
}

/* ================= Layout ================= */
.container{
  max-width:1200px; margin:28px auto; padding:0 12px;
  display:grid; grid-template-columns:300px 1fr; gap:20px;
}
@media (max-width:900px){
  .container{grid-template-columns:1fr; padding:12px}
}

.sidebar{
  background:linear-gradient(180deg,var(--glass),rgba(255,255,255,.015));
  border:1px solid var(--border);
  padding:20px; border-radius:16px;
  box-shadow:var(--shadow);
}
.sidebar h3{color:#fff; margin:0 0 12px 0; font-weight:800}
.stat{
  display:flex; justify-content:space-between; padding:10px 0;
  border-bottom:1px dashed rgba(255,255,255,.07); color:var(--muted)
}
.sidebar .quicklinks{margin-top:10px; display:flex; flex-direction:column; gap:6px}
.sidebar .quicklinks a{
  display:block; color:var(--accent-2); text-decoration:underline;
  padding:6px 8px; border-radius:10px;
}
.sidebar .quicklinks a.active{
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  color:#0b1014; text-decoration:none;
}

/* ================= Main ================= */
.main{min-height:80vh}

/* Controles superiores (buscador/filtros) */
.controls{display:flex; gap:12px; align-items:center; margin-bottom:12px}
.search{flex:1; display:flex; gap:8px}
.search input{
  flex:1; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:var(--card); color:inherit
}
.filters{display:flex; gap:8px; margin-bottom:12px}
.select{
  padding:10px 12px; border-radius:10px; background:var(--card);
  border:1px solid var(--border); color:var(--muted)
}

/* ================= Buttons ================= */
.btn{
  padding:10px 14px; border-radius:12px; border:none; cursor:pointer;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  color:#0b1014; font-weight:900; box-shadow:0 4px 14px rgba(245,159,11,.25);
  transition:.15s transform ease;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.ghost{
  background:transparent; border:1px solid var(--border); color:var(--muted);
  box-shadow:none;
}
.btn.secondary{
  background:#0f2330; color:var(--accent-2); border:1px solid rgba(255,255,255,.06);
}
.btn.danger{background:var(--danger); color:#fff; box-shadow:none}
.btn.success{background:var(--success); color:#fff; box-shadow:none}

/* ================= Cards ================= */
.cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:18px}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid var(--border); border-radius:16px; padding:16px;
  box-shadow:var(--shadow);
}
.card .title{display:flex; justify-content:space-between; align-items:center; gap:10px}
.card h4{margin:0; color:#fff; font-weight:800}
.badge{
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  color:#0b1014; padding:6px 10px; border-radius:999px; font-weight:900; font-size:12px
}

/* Filas dentro de cards */
.row{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 0; border-top:1px dashed rgba(255,255,255,.06)
}
.row .label{color:var(--muted); font-size:13px}
.row .value{font-weight:900}

/* Listado de miembros */
.members{background:rgba(255,255,255,.03); padding:10px; border-radius:12px; margin-top:10px}
.member{display:flex; justify-content:space-between; padding:8px; border-bottom:1px solid rgba(255,255,255,.05)}
.member:last-child{border-bottom:none}
.member .nick{color:var(--accent-3); font-weight:700}

/* Inputs genéricos */
input, select, textarea{
  width:100%; padding:10px 12px; border-radius:10px;
  background:#0b1620; color:var(--text); border:1px solid var(--border)
}
textarea{min-height:140px; resize:vertical}
label{display:block; margin:8px 0 6px 0; color:var(--muted)}
.field{margin:10px 0}

/* Mensajes */
.error, .notice{
  padding:10px 12px; border-radius:12px; border:1px solid var(--border); margin:8px 0;
}
.error{background:#2b1111; color:#ffc9c9}
.notice{background:#0f2219; color:#c7ffd9}

/* Prosa (normativas) */
.prose p{line-height:1.65; margin:8px 0}
.prose h2,.prose h3{margin:14px 0 6px; color:#fff}
.prose ul{margin:8px 0 10px 18px}

/* Tabla simple (cuando se use) */
.table{width:100%; border-collapse:separate; border-spacing:0 8px}
.table th{color:#dfe9f3; text-align:left; font-weight:800; padding:6px 10px}
.table td{padding:10px; background:#0b1620; border:1px solid var(--border)}
.table tr td:first-child{border-radius:10px 0 0 10px}
.table tr td:last-child{border-radius:0 10px 10px 0}

/* Helpers */
.muted{color:var(--muted)}
.center{text-align:center}
.hide{display:none !important}
.mt-1{margin-top:6px} .mt-2{margin-top:12px} .mt-3{margin-top:18px}

/* ===== Responsive ajustes ===== */
@media (max-width:600px){
  .header{padding:14px 16px}
  .header .brand{font-size:20px}
  .btn{padding:10px 12px}
}

/* 1) Evita problemas de viewport dinámico (móvil/desktop con barras) */
html, body { height:auto; min-height:100dvh; }

/* 2) Asegura espacio al fondo para que nada quede tapado */
.container { padding-bottom:24px; }

/* 3) Sidebar: no fuerces height fijo; usa max-height + scroll interno */
.sidebar{
  /* Quita esta línea si la tienes: height:calc(100vh - 140px); */
  height:auto;                      /* <-- nuevo */
  max-height:calc(100dvh - 140px);  /* <-- nuevo */
  overflow:auto;                    /* <-- nuevo */
  position:sticky; top:20px;        /* mantenemos sticky */
}

/* 4) (Opcional) Si alguna tarjeta larga rozaba el borde, dale respiro */
.main { padding-bottom: 8px; }

/* 5) (Opcional) Asegura que el header siempre quede encima */
.header { z-index: 10; position: relative; }

/* Footer del botón en la card de grupo */
.group-card__footer{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
}

/* Forzar look del botón "Ver" dentro de las cards del listado */
.cards .card .btn.btn-view{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:8px 14px !important;
  border-radius:12px !important;
  font-weight:800 !important;
  text-decoration:none !important;
  line-height:1 !important;

  /* Colores del tema */
  background:linear-gradient(90deg,var(--accent-2),var(--accent)) !important;
  color:#0b1014 !important;
  border:1px solid transparent !important;

  /* Quitar “glow”/ring heredado y poner uno suave */
  box-shadow:0 4px 14px rgba(245,159,11,.18) !important;
  text-shadow:none !important;
  filter:none !important;
}

/* Hover / Active / Focus sin glow feo */
.cards .card .btn.btn-view:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(245,159,11,.22) !important;
  filter:brightness(1.03) !important;
}
.cards .card .btn.btn-view:active{
  transform:translateY(0);
  box-shadow:0 2px 8px rgba(245,159,11,.18) !important;
}
.cards .card .btn.btn-view:focus,
.cards .card .btn.btn-view:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 3px rgba(245,159,11,.35) !important; /* ring limpio */
}

/* Si quedara muy pegado en cards estrechas */
.cards .card .btn.btn-view{ min-width:76px; }

/* === LISTA DE USUARIOS (alineación limpia) === */
.table { width:100%; border-collapse:separate; border-spacing:0 6px; }
.table th { color:#dfe9f3; text-align:left; padding:10px 12px; }
.table td { padding:10px 12px; background:#0b1620; border:1px solid var(--border); vertical-align:middle; }
.table tr td:first-child { border-radius:10px 0 0 10px; }
.table tr td:last-child  { border-radius:0 10px 10px 0; }

.role-cell form,
.actions-cell { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.role-cell select { min-width:180px; }
.role-cell .btn   { padding:6px 12px; border-radius:10px; }

.pass-form input.select { min-width:220px; }
.pass-form .btn        { padding:6px 12px; border-radius:10px; }

.delete-form .btn { padding:6px 12px; border-radius:10px; }

/* Versión compacta de botón (útil en celdas) */
.btn.sm { padding:6px 12px; border-radius:10px; font-size:13px; }

/* En pantallas estrechas, apila acciones y evita “desborde feo” */
@media (max-width: 1100px) {
  .role-cell form,
  .actions-cell { flex-direction:column; align-items:flex-start; }
  .pass-form input.select { min-width: 180px; width:100%; }
}