/* =========================
   CabalgataCR UI (Logo Palette)
   Base: graphite + gold
========================= */

:root{
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --surface-2: #F1F3F6;

  --text: #111827;
  --muted: #6B7280;

  --brand-900:#1B2430;   /* deep navy */
  --brand-800:#223043;
  --brand-700:#2F3F50;   /* graphite/navy */
  --brand-600:#3B4F66;

  --gold-600:#7A5A22;
  --gold-500:#8A6A2F;
  --gold-400:#D6BC7E;

  --ok:#16A34A;
  --warn:#F59E0B;
  --bad:#DC2626;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(17,24,39,.08);
  --border: 1px solid rgba(17,24,39,.10);

  --focus: 0 0 0 4px rgba(192,160,96,.25);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue";
  line-height:1.35;
}

/* Layout helpers */
.container{
  max-width: 980px;
  margin: 0 auto;
  padding: 20px 14px 60px;
}

.login-logo, .brand img {
  display: block;
  width: 100%;
  max-width: 140px;
  height: auto;
  margin: 0 auto 10px;
  object-fit: contain;
}

.card{
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.stack{ display:flex; flex-direction:column; gap:12px; }
.row{ display:flex; gap:12px; flex-wrap:wrap; }
.row > *{ flex:1; min-width: 220px; }

/* Topbar (optional, if you add it) */
.topbar{
  background: linear-gradient(135deg, var(--brand-900), var(--brand-700));
  color: white;
  padding: 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar .container{ padding:0; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand{
  display:flex; align-items:center; gap:10px;
}
.brand img{
  width:40px; height:40px; object-fit:contain;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.25));
}
.brand .title{
  display:flex; flex-direction:column;
}
.brand .title b{ font-size:16px; letter-spacing:.2px; }
.brand .title span{ font-size:12px; opacity:.85; }

/* Typography */
h2{ margin: 6px 0 14px; font-size: 22px; letter-spacing:.2px; }
h3{ margin: 16px 0 10px; font-size: 16px; }
label{ font-size: 13px; color: var(--muted); }

/* Inputs */
input, select, textarea{
  width:100%;
  background: var(--surface);
  border: var(--border);
  border-radius: 12px;
  padding: 11px 12px;
  font-size: 14px;
  outline: none;
}
textarea{ min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus{
  box-shadow: var(--focus);
  border-color: rgba(192,160,96,.55);
}

/* Buttons */
button{
  appearance:none;
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform .05s ease, filter .15s ease, box-shadow .15s ease;
}

button:active{ transform: translateY(1px); }

.btn-primary{
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: #141820;
  box-shadow: 0 10px 22px rgba(169,130,60,.22);
}
.btn-primary:hover{ filter: brightness(1.03); }

.btn-dark{
  background: linear-gradient(135deg, var(--brand-900), var(--brand-700));
  color: white;
  box-shadow: 0 10px 22px rgba(27,36,48,.18);
}
.btn-dark:hover{ filter: brightness(1.05); }

.btn-ghost{
  background: transparent;
  border: var(--border);
  color: var(--brand-700);
}
.btn-ghost:hover{ background: var(--surface-2); }

/* Default buttons (if you didn’t add classes) */
button{
  background: linear-gradient(135deg, var(--brand-900), var(--brand-700));
  color: white;
  box-shadow: 0 10px 22px rgba(27,36,48,.14);
}

/* Messages */
.msg{
  padding: 10px 12px;
  border-radius: 12px;
  border: var(--border);
  background: var(--surface);
  color: var(--text);
}
.msg.ok{ border-color: rgba(22,163,74,.25); background: rgba(22,163,74,.08); }
.msg.warn{ border-color: rgba(245,158,11,.25); background: rgba(245,158,11,.10); }
.msg.bad{ border-color: rgba(220,38,38,.25); background: rgba(220,38,38,.10); }

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: var(--border);
  background: var(--surface);
}
.badge.ok{ border-color: rgba(22,163,74,.25); color: var(--ok); }
.badge.warn{ border-color: rgba(245,158,11,.25); color: var(--warn); }
.badge.bad{ border-color: rgba(220,38,38,.25); color: var(--bad); }

/* Tables */
table{
  width:100%;
  border-collapse: collapse;
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
}
th, td{
  padding: 12px 10px;
  text-align:left;
  border-bottom: 1px solid rgba(17,24,39,.08);
  font-size: 14px;
}
th{
  background: linear-gradient(135deg, rgba(27,36,48,.95), rgba(47,63,80,.95));
  color: white;
  font-weight: 700;
  font-size: 13px;
}
tr:hover td{ background: rgba(192,160,96,.06); }

/* Small */
small{ color: var(--muted); }

/* Responsive tweak */
@media (max-width: 520px){
  .container{ padding: 16px 12px 50px; }
  h2{ font-size: 20px; }
  th, td{ font-size: 13px; }
}

/* =========================
   Login (Auth)
========================= */
.auth-wrap{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
  align-items: stretch;
  margin-top: 18px;
}

.auth-card{
  padding: 18px;
}

.auth-head h2{
  margin: 0 0 6px;
}

.muted{ color: var(--muted); }

.auth-card button{
  width: 100%;
  margin-top: 10px;
}

.auth-card .msg{
  margin-top: 12px;
}

.auth-side{
  padding: 18px;
  background: linear-gradient(135deg, rgba(27,36,48,.96), rgba(47,63,80,.96));
  color: white;
  border: 1px solid rgba(255,255,255,.10);
}

.auth-side .muted{ color: rgba(255,255,255,.78); }

.auth-bullets{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.bullet{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  box-shadow: 0 10px 20px rgba(192,160,96,.22);
}

@media (max-width: 820px){
  .auth-wrap{ grid-template-columns: 1fr; }
  .auth-side{ order: -1; }
}


/* =========================
   LOGIN (estilo tarjeta + degradado)
========================= */

.login-page{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, var(--brand-900, #1B2430), var(--brand-700, #2F3F50));
}

.login-shell{
  width:100%;
  padding: 26px 14px;
  display:flex;
  justify-content:center;
}

.login-card{
  width:100%;
  max-width: 420px;
  background: var(--surface, #fff);
  border: var(--border, 1px solid rgba(17,24,39,.12));
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
  padding: 22px;
  text-align:center;
}

.login-logo{
  width: 110px;
  height: auto;
  margin: 0 auto 10px;
  display:block;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.18));
}

.login-title{
  margin: 6px 0 6px;
  color: var(--brand-900, #1B2430);
  font-size: 24px;
  letter-spacing: .2px;
}

.login-subtitle{
  margin: 0 0 16px;
  color: rgba(17,24,39,.65);
  font-size: 14px;
}

.login-field{
  text-align:left;
  margin: 14px 0;
}

.login-field label{
  display:block;
  margin-bottom: 6px;
  font-weight: 700;
  color: var(--brand-700, #2F3F50);
  font-size: 13px;
}

.login-field input{
  width:100%;
  padding: 12px 12px;
  border-radius: 10px;
  border: var(--border, 1px solid rgba(17,24,39,.12));
  font-size: 14px;
  outline:none;
  background:#fff;
}

.login-field input:focus{
  border-color: rgba(192,160,96,.65);
  box-shadow: var(--focus, 0 0 0 4px rgba(192,160,96,.25));
}

.btn{
  width:100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: none;
  cursor:pointer;
  font-weight: 800;
  font-size: 14px;
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}

.btn:active{ transform: translateY(1px); }

.btn-primary{
  margin-top: 8px;
  background: linear-gradient(135deg, var(--gold-500, #C0A060), var(--gold-600, #A9823C));
  color: #1B2430;
  box-shadow: 0 12px 22px rgba(169,130,60,.22);
}

.btn-primary:hover{ filter: brightness(1.03); }

.btn-outline{
  margin-top: 10px;
  background: transparent;
  border: 2px solid rgba(255,255,255,.35);
  color: #fff;
  box-shadow: none;
}

/* Como el card es blanco, el outline mejor en tonos del brand */
.login-card .btn-outline{
  border: 2px solid rgba(47,63,80,.55);
  color: var(--brand-700, #2F3F50);
}

.login-card .btn-outline:hover{
  background: rgba(192,160,96,.08);
}

.login-msg{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(220,38,38,.25);
  background: rgba(220,38,38,.10);
  color: #991b1b;
  font-size: 13px;
  text-align:left;
}

.login-footer{
  margin-top: 16px;
  font-size: 12px;
  color: rgba(17,24,39,.55);
}


/* =========================
   Registro/Inscripción (compacto)
   (No afecta al login del index: solo cuando se usa .compact-form)
========================= */
.grid-2cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  row-gap: 8px;
}
@media (max-width: 720px){
  .grid-2cols{ grid-template-columns: 1fr; }
}

/* Compactar espacios verticales SOLO en formularios con .compact-form */
.compact-form .login-field{
  margin: 8px 0;
}
.compact-form .login-field label{
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 1.15;
}
.compact-form .login-field input,
.compact-form .login-field select{
  padding: 10px 12px;
  border-radius: 10px;
}

/* Botones un poco más cercanos dentro de formularios compactos */
.compact-form .btn{
  margin-top: 10px;
}

.brand-vertical{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.brand-logo{
  width:34px;
  height:34px;
  object-fit:contain;
}

/* BASE */
body{
  margin:0;
  font-family: Segoe UI, Tahoma, sans-serif;
  background:#0f172a;
  color:#e5e7eb;
}

.layout{
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:100vh;
}

aside{
  background:#111827;
  border-right:1px solid rgba(255,255,255,.08);
  padding:16px;
}

main{ padding:20px; }

/* BRAND */
.brand{ margin-bottom:14px; }

.brand-vertical{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.brand-logo{
  width:36px;
  height:36px;
  object-fit:contain;
}

.title b{
  font-size:18px;
  letter-spacing:.4px;
}

.title span{
  display:block;
  font-size:12px;
  opacity:.7;
  margin-top:2px;
  text-align:center;
}

/* USER BOX */
.userbox{
  background:#0b1220;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:12px;
  margin-bottom:14px;
}

.muted{ opacity:.75; font-size:12px; }

.username{ font-weight:600; }

/* ROL BADGE */
#usuario_rol{
  margin-top:6px;
  display:inline-block;
  font-size:12px;
  padding:3px 10px;
  border-radius:999px;
  background:rgba(201,162,77,.18);
  color:#e6c97a;
  border:1px solid rgba(201,162,77,.35);
  opacity:1;
}

/* MENU */
.menu a{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:10px;
  color:#e5e7eb;
  text-decoration:none;
  transition:.2s;
}

.menu a:hover{ background:rgba(255,255,255,.06); }

.menu a.active{
  background:rgba(201,162,77,.18);
  border:1px solid rgba(201,162,77,.35);
}

/* ICONOS DORADOS */
.menu .icon{
  color:#c9a24d;      /* dorado */
  min-width:18px;
  text-align:center;
}

.menu a.active .icon{ color:#e6c97a; }  /* dorado claro */
.menu a:hover .icon{ color:#f1d98a; }   /* más brillante */

/* BUTTON */
.btn{
  width:100%;
  margin-top:12px;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;

  background: rgba(201,162,77,.18);
  color: #e6c97a;
  border: 1px solid rgba(201,162,77,.35);

  font-weight:600;
}

.btn:hover{ background: rgba(201,162,77,.28); }

/* MAIN */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}

.page-title{ margin:0; }

.card{
  background:#0b1220;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:14px;
}

.card-title{ margin:0 0 8px 0; }

/* RESPONSIVE */
@media (max-width: 900px){
  .layout{ grid-template-columns:1fr; }
  aside{ position:sticky; top:0; z-index:5; }
}

/* ICONOS DORADOS */
.menu i { color: #C0A060; }
.menu a.active i { color: #D6BC7E; }

/* === PAGE: USUARIOS (SCOPED) ===
   Todo aquí SOLO aplica dentro de .layout.page-usuarios
   para NO afectar dashboard_root ni otras pantallas.
*/
.layout.page-usuarios{ color:#e5e7eb; }

/* Evitar texto demasiado tenue en esta pantalla */
.layout.page-usuarios .muted{
  color: rgba(229,231,235,.78) !important;
  opacity: 1 !important;
}

/* Filtro */
.layout.page-usuarios #filtro{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: #e5e7eb;
  border-radius: 12px;
  padding: 10px 12px;
}
.layout.page-usuarios #filtro::placeholder{ color: rgba(229,231,235,.55); }
.layout.page-usuarios #filtro:focus{
  outline: none;
  border-color: rgba(201,162,77,.55);
  box-shadow: 0 0 0 4px rgba(201,162,77,.18);
}

/* Tabla usuarios */
.layout.page-usuarios #tablaUsuarios{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
}

.layout.page-usuarios #tablaUsuarios thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(17,24,39,.94) !important;
  color: #f9fafb !important;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .25px;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  white-space: nowrap;
}

.layout.page-usuarios #tablaUsuarios tbody td{
  padding: 12px 12px;
  color: #e5e7eb;
  border-bottom: 1px solid rgba(255,255,255,.06);
  white-space: nowrap;
}

/* Hover sin desfase */
.layout.page-usuarios #tablaUsuarios tbody tr:hover{ background: rgba(255,255,255,.03); }

/* Seleccionado por click */
.layout.page-usuarios #tablaUsuarios tbody tr.is-selected{
  background: rgba(201,162,77,.14);
  box-shadow: inset 0 0 0 1px rgba(201,162,77,.35);
}

/* Select de rol (solo root/admin/user) */
.layout.page-usuarios .role-select{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: #e5e7eb;
  border-radius: 12px;
  padding: 8px 10px;
}
.layout.page-usuarios .role-select:focus{
  outline: none;
  border-color: rgba(201,162,77,.55);
  box-shadow: 0 0 0 4px rgba(201,162,77,.12);
}

/* Badge visual del rol */
.layout.page-usuarios .role-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(229,231,235,.92);
}
.layout.page-usuarios .role-badge i{ color: #c9a24d; }

.layout.page-usuarios .role-root{
  border-color: rgba(201,162,77,.45);
  background: rgba(201,162,77,.18);
  color: #f1d98a;
}
.layout.page-usuarios .role-admin{
  border-color: rgba(201,162,77,.28);
  background: rgba(201,162,77,.12);
}
.layout.page-usuarios .role-user{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

/* === ROLE WRAP (SCOPED) === */
.layout.page-usuarios td.role-cell{ overflow:hidden; }
.layout.page-usuarios .role-wrap{
  display:inline-flex;
  align-items:center;
  gap:10px;
  max-width:100%;
  white-space:nowrap;
}
.layout.page-usuarios .role-badge{ margin-left:0 !important; flex:0 0 auto; }

/* === ESTADO BADGE (SCOPED) === */
.layout.page-usuarios .estado-badge{
  display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;
  font-size:12px;font-weight:900;letter-spacing:.15px;text-transform:lowercase;
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:rgba(229,231,235,.92);
}
.layout.page-usuarios .estado-activo{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.35);color:#86efac;}
.layout.page-usuarios .estado-inactivo{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.35);color:#fca5a5;}

/* Acciones: iconos */
.layout.page-usuarios .acciones{
  display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap;
}
.layout.page-usuarios .icon-btn{
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;
  background:rgba(201,162,77,.10);border:1px solid rgba(201,162,77,.28);color:#e6c97a;cursor:pointer;
  padding:0;line-height:1;transition:filter .15s ease, transform .05s ease, background .15s ease;
}
.layout.page-usuarios .icon-btn i{ font-size:15px; }
.layout.page-usuarios .icon-btn:hover{ background:rgba(201,162,77,.16); filter:brightness(1.06); }
.layout.page-usuarios .icon-btn:active{ transform:translateY(1px); }
.layout.page-usuarios .icon-btn--danger{ background:rgba(220,38,38,.10); border-color:rgba(220,38,38,.30); color:#fca5a5; }
.layout.page-usuarios .icon-btn--danger:hover{ background:rgba(220,38,38,.14); }

/* =========================================================
   AJUSTES FINALES – FORMULARIOS & ICONOS DORADOS (FORZADO)
   Agregar al final para evitar que otras reglas lo pisen
   ========================================================= */

/* ---- Formularios: limitar ancho y centrar ---- */
#contenido .card.form-wrap{
  max-width: 860px;      /* ajusta entre 720–920 si deseas */
  margin: 0 auto;        /* centra el formulario */
}

/* ---- Iconos dorados del menú (sidebar) ---- */
.menu a i{
  color: #C0A060 !important; /* dorado base */
}

.menu a:hover i,
.menu a.active i{
  color: #D6BC7E !important; /* dorado claro */
}

/* ---- Iconos dorados dentro del contenido (cards / forms) ---- */
#contenido .card i,
#contenido label i{
  color: #C0A060;
}

/* ---- Inputs con icono interno (opcional, si los usas) ---- */
.input-icon{
  position: relative;
}
.input-icon i{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #C0A060;
  pointer-events: none;
}
.input-icon input,
.input-icon select{
  padding-left: 38px;
}

/* =========================================================
   EVENTOS – TARJETAS / FICHAS (Dashboard ROOT)
   Pega esto AL FINAL de tu styles.css
   ========================================================= */

.evt-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}

@media (max-width: 1100px){
  .evt-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .evt-grid{ grid-template-columns: 1fr; }
}

.evt-card{
  background:#0b1220;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.evt-img{
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
}

.evt-img-fallback{
  width:100%;
  height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: #C0A060; /* dorado */
  font-size: 26px;
}

.evt-body{ padding:12px 12px 10px; }

.evt-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}

.evt-name{
  font-weight:800;
  line-height:1.2;
}

.evt-badge{
  display:inline-block;
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  background: rgba(201,162,77,.18);
  border: 1px solid rgba(201,162,77,.35);
  color:#e6c97a;
  white-space:nowrap;
}

.evt-meta{
  margin-top:10px;
  font-size:12px;
  opacity:.9;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.evt-meta i{ color:#C0A060; width:16px; text-align:center; }

.evt-bottom{
  margin-top:12px;
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:flex-end;
}

.evt-price b, .evt-cupo b{ display:block; margin-top:2px; }

.evt-foot{
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.06);
}


/* === Brand logo (Drive) – Centering fix === */
img[data-brand-logo]{
  display:block;
  margin: 0 auto 10px;
}

/* =========================================================
   PANEL USUARIO – Carrusel + acciones (SCOPED)
   (No afecta otros módulos)
   ========================================================= */ (SCOPED)
   (No afecta otros módulos)
   ========================================================= */
.page-panel-usuario .panel-user{
  text-align:right;
}
.page-panel-usuario h2{ margin-top: 18px; }

.page-panel-usuario .evt-carousel{
  margin-bottom: 18px;
}

.page-panel-usuario .evt-carousel-track{
  display:flex;
  gap:14px;
  overflow:auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}

.page-panel-usuario .evt-card--carousel{
  min-width: 320px;
  max-width: 360px;
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.page-panel-usuario .panel-actions{
  margin-top: 12px;
  display:flex;
  gap:10px;
}

.page-panel-usuario .btn-mini{
  flex:1;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.10);
  cursor:pointer;
}

.page-panel-usuario .btn-mini:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.page-panel-usuario .btn-gold{
  background: rgba(201,162,77,.18);
  color: #e6c97a;
  border-color: rgba(201,162,77,.35);
}
.page-panel-usuario .btn-gold:hover{ background: rgba(201,162,77,.28); }

.page-panel-usuario .btn-red{
  background: rgba(220,38,38,.18);
  color: #fca5a5;
  border-color: rgba(220,38,38,.32);
}
.page-panel-usuario .btn-red:hover{ background: rgba(220,38,38,.26); }

.page-panel-usuario .ticket-card .ticket-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom: 10px;
}
.page-panel-usuario .ticket-title{
  font-weight: 900;
}
.page-panel-usuario .ticket-meta{
  display:flex;
  gap:12px;
  justify-content:space-between;
}
.page-panel-usuario .ticket-meta b{
  display:block;
  margin-top: 4px;
}

/* === PAGE: TIQUETES (SCOPED) ===
   Todo aquí SOLO aplica dentro de .layout.page-tiquetes
   para NO afectar otras pantallas.
*/
.layout.page-tiquetes{ color:#e5e7eb; }

/* Toolbar */
.layout.page-tiquetes .tiq-toolbar{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.layout.page-tiquetes .tiq-toolbar .field{
  min-width: 220px;
  flex: 1;
}
.layout.page-tiquetes .tiq-toolbar label{
  display:block;
  margin: 0 0 6px;
  font-size: 12px;
  color: rgba(229,231,235,.78);
}
.layout.page-tiquetes .tiq-toolbar select,
.layout.page-tiquetes .tiq-toolbar input{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: #e5e7eb;
  border-radius: 12px;
  padding: 10px 12px;
  height: 42px;
}
.layout.page-tiquetes .tiq-toolbar input::placeholder{ color: rgba(229,231,235,.55); }
.layout.page-tiquetes .tiq-toolbar select:focus,
.layout.page-tiquetes .tiq-toolbar input:focus{
  outline:none;
  border-color: rgba(201,162,77,.55);
  box-shadow: 0 0 0 4px rgba(201,162,77,.18);
}

/* Split layout */
.layout.page-tiquetes .tiq-split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items:start;
}
@media (max-width: 980px){
  .layout.page-tiquetes .tiq-split{ grid-template-columns: 1fr; }
}

/* Panels */
.layout.page-tiquetes .panel{
  background:#0b1220;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  overflow:hidden;
}
.layout.page-tiquetes .panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.layout.page-tiquetes .panel-head h3{
  margin:0;
  font-size: 14px;
  letter-spacing:.2px;
}
.layout.page-tiquetes .panel-head .muted{
  color: rgba(229,231,235,.72);
  opacity:1;
  font-size: 12px;
}

/* Tables */
.layout.page-tiquetes table{
  width:100%;
  border-collapse: collapse;
  background: transparent;
}
.layout.page-tiquetes thead th{
  background: rgba(17,24,39,.94);
  color:#f9fafb;
  font-weight: 800;
  font-size: 12px;
  letter-spacing:.25px;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  white-space: nowrap;
}
.layout.page-tiquetes tbody td{
  padding: 12px 12px;
  color:#e5e7eb;
  border-bottom: 1px solid rgba(255,255,255,.06);
  white-space: nowrap;
}
.layout.page-tiquetes tbody tr:hover{ background: rgba(255,255,255,.03); }
.layout.page-tiquetes tbody tr.is-selected{
  background: rgba(201,162,77,.14);
  box-shadow: inset 0 0 0 1px rgba(201,162,77,.35);
}

/* Action buttons */
.layout.page-tiquetes .acciones{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.layout.page-tiquetes .icon-btn{
  width:36px;height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(201,162,77,.10);
  border:1px solid rgba(201,162,77,.28);
  color:#e6c97a;
  cursor:pointer;
  padding:0;
  line-height:1;
  transition:filter .15s ease, transform .05s ease, background .15s ease, opacity .15s ease;
}
.layout.page-tiquetes .icon-btn i{ font-size:15px; }
.layout.page-tiquetes .icon-btn:hover{ background:rgba(201,162,77,.16); filter:brightness(1.05); }
.layout.page-tiquetes .icon-btn:active{ transform: translateY(1px); }
.layout.page-tiquetes .icon-btn:disabled{ opacity:.45; cursor:not-allowed; filter:none; }

/* Status badges */
.layout.page-tiquetes .estado-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  font-size:12px;font-weight:900;letter-spacing:.15px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:rgba(229,231,235,.92);
  text-transform: lowercase;
}
.layout.page-tiquetes .estado-pendiente{
  background:rgba(245,158,11,.14);
  border-color:rgba(245,158,11,.28);
  color:#fcd34d;
}
.layout.page-tiquetes .estado-confirmado{
  background:rgba(34,197,94,.14);
  border-color:rgba(34,197,94,.28);
  color:#86efac;
}
.layout.page-tiquetes .estado-entregado{
  background:rgba(59,130,246,.14);
  border-color:rgba(59,130,246,.28);
  color:#93c5fd;
}

/* Modal */
.layout.page-tiquetes .modal{
  position: fixed;
  inset: 0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background: rgba(0,0,0,.55);
  z-index: 50;
}
.layout.page-tiquetes .modal.is-open{ display:flex; }
.layout.page-tiquetes .modal-card{
  width: 100%;
  max-width: 520px;
  background:#0b1220;
  border:1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  overflow:hidden;
}
.layout.page-tiquetes .modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.layout.page-tiquetes .modal-head h3{ margin:0; font-size: 14px; }
.layout.page-tiquetes .modal-body{ padding: 12px; }
.layout.page-tiquetes .modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding: 12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.layout.page-tiquetes .btn{
  width:auto;
  margin-top:0;
}
.layout.page-tiquetes .btn-secondary{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #e5e7eb;
}
.layout.page-tiquetes .btn-secondary:hover{ background: rgba(255,255,255,.10); }


/* Confirmar pendiente */
.btn-confirmar {
  background-color: #bfa14a; /* dorado */
  color: #111;
}

/* Ya confirmado */
.btn-confirmado {
  background-color: #1f8f4a; /* verde */
  color: #fff;
  cursor: default;
  opacity: 0.85;
}

.btn-confirmado i {
  color: #fff;
}







/* =========================
   MIPASE.VIP – Override Login Primary Button (COLOR ICONO)
========================= */
.login-page .btn-primary{
  background: linear-gradient(135deg, #d18f1b, #a96f12) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 22px rgba(169,111,18,.45) !important;
}
.login-page .btn-primary:hover{
  filter: brightness(1.10) !important;
}



/* =========================================================
   DASHBOARD ROOT – MÓVIL: Menú tipo drawer (no afecta PC)
   ========================================================= */
.mobile-topbar{ display:none; }
.menu-overlay{ display:none; }

html.no-scroll, html.no-scroll body{ overflow:hidden; }

@media (max-width: 768px){
  /* Topbar móvil */
  .mobile-topbar{
    display:flex;
    align-items:center;
    gap:10px;
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:56px;
    padding: 0 12px;
    background:#111827;
    border-bottom:1px solid rgba(255,255,255,.08);
    z-index: 10000;
  }
  .mobile-menu-btn{
    appearance:none;
    border:none;
    background: transparent;
    color:#e5e7eb;
    font-size: 24px;
    line-height: 1;
    padding: 8px 10px;
    border-radius: 12px;
    cursor:pointer;
  }
  .mobile-menu-btn:active{ transform: translateY(1px); }
  .mobile-topbar-title{
    font-weight: 900;
    letter-spacing: .2px;
    color:#e5e7eb;
  }
  .mobile-topbar-spacer{ flex: 1; }

  /* Overlay */
  .menu-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9999;
    display:none;
  }
  .menu-overlay.show{ display:block; }

  /* Layout */
  .layout{
    grid-template-columns: 1fr !important;
  }

  /* Sidebar como drawer */
  .layout > aside{
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh;
    width: 86vw;
    max-width: 320px;
    z-index: 10001; /* encima del overlay */
    transform: translateX(-105%);
    transition: transform .22s ease;
    overflow-y: auto;
    padding-top: 16px; /* mantiene el look */
  }
  .layout > aside.is-open{
    transform: translateX(0);
  }

  /* Contenido: empujar debajo de la topbar móvil */
  main{
    padding-top: 72px !important;
  }

  /* El aside sticky que tenías a 900px ya no aplica en móvil */
  aside{ position: fixed !important; top:0; }
}