/* ═══════════════════════════════════════════════════════════════════════════════
   Softmasters Remote Core — Console & Authentication Styles
   assets/console.css
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══ Authentication / Login View ══════════════════════════════════════════════ */
#login-overlay,
#authView,
.login-container {
  position: fixed;
  inset: 0;
  background: var(--bg-base, #020617);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
  z-index: 500;
  overflow-y: auto;
}

#login-overlay.hidden,
#authView.hidden,
.login-container.hidden {
  display: none !important;
}

/* Login Card Container */
.login-card {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

/* Card Header & Branding */
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.login-brand .brand-mark {
  margin: 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 0.95rem;
  font-weight: 800;
  border-radius: 8px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #020617;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
}

.login-brand .brand-title {
  font-weight: 600;
  font-size: 1.125rem;
  color: #f8fafc;
  line-height: 1.25;
}

.login-brand .brand-subtitle {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 0.25rem;
}

/* Form Fields inside Login Card */
.login-card .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.login-card .form-label {
  font-size: 0.8125rem;
  color: #cbd5e1;
  font-weight: 500;
}

.login-card .form-input {
  background: #020617;
  border: 1px solid #1e293b;
  border-radius: 6px;
  color: #f8fafc;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.login-card .form-input:focus {
  border-color: #10b981;
  outline: none;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.login-card .form-input::placeholder {
  color: #64748b;
}

.login-card .btn-primary {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background: #10b981;
  color: #020617;
  border: 1px solid #10b981;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  box-shadow: 0 0 20px -3px rgba(16, 185, 129, 0.35);
  transition: background-color 0.15s, border-color 0.15s;
}

.login-card .btn-primary:hover:not(:disabled) {
  background: #059669;
  border-color: #059669;
}

.login-card .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.login-card #login-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  color: #ef4444;
  font-size: 0.75rem;
}

/* ═══ Credentials Modal Adjustments ═══════════════════════════════════════════ */
.cred-label {
  width: 7.5rem !important;
}


/* ═══ Acciones de licencia ═════════════════════════════════════════════════════ */
.lic-actions { display:flex; gap:0.25rem; justify-content:flex-end; flex-wrap:wrap; }
.data-table tr.row-off td { opacity:0.85; }

/* ═══ Responsive: tablets y celulares ═════════════════════════════════════════ */
@media (max-width: 860px) {
  .console-topbar { gap:0.625rem 0.875rem; padding:0.625rem 1rem; }
  .console-topbar .nav-tabs { order:10; width:100%; }
  .console-topbar .nav-tab { flex:1; justify-content:center; padding:0.5rem; }
  .telemetry-item[title^="Tiempo restante"] { display:none; }
  .topbar-spacer { display:none; }
  .user-area { margin-left:auto; }
  #console-main { padding:1rem; }
}

@media (max-width: 760px) {
  /* Toolbars apiladas y botones táctiles */
  .ab-toolbar { gap:0.625rem; }
  .ab-toolbar h2 { width:100%; }
  .search-wrap { max-width:none; min-width:0; flex:1 1 100%; order:2; }
  .search-hint { display:none; }
  #search-input, #search-licenses { padding-right:1rem; }
  .ab-toolbar .btn { order:3; }
  .ab-count { order:4; }

  .kpi-grid { grid-template-columns:repeat(3, 1fr); gap:0.5rem; }
  .kpi-card { padding:0.625rem 0.75rem; }
  .kpi-label { font-size:0.5625rem; line-height:1.3; }
  .kpi-value { font-size:1.25rem; }

  /* Tabla → tarjetas */
  .table-wrap { border:none; background:transparent; overflow:visible; }
  .data-table thead { display:none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display:block; width:100%; }
  .data-table tr {
    background:var(--bg-panel); border:1px solid var(--border);
    border-radius:var(--radius); margin-bottom:0.75rem; padding:0.75rem 0.875rem;
  }
  .data-table tr:hover td { background:transparent; }
  .data-table td {
    border-bottom:1px dashed var(--border); padding:0.5rem 0;
    display:flex; align-items:center; justify-content:space-between; gap:0.75rem;
    text-align:right !important;
  }
  .data-table td::before {
    content:attr(data-label); font-size:0.625rem; font-family:var(--font-mono);
    text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted);
    flex-shrink:0; text-align:left;
  }
  .data-table td > * { min-width:0; }
  .data-table td.cell-main { display:block; text-align:left !important; padding-top:0; }
  .data-table td.cell-main::before { display:none; }
  .data-table td.cell-actions { display:block; border-bottom:none; padding-bottom:0; }
  .data-table td.cell-actions::before { display:none; }
  .lic-actions { display:grid; grid-template-columns:repeat(3, 1fr); gap:0.375rem; margin-top:0.25rem; }
  .lic-actions .btn { width:100%; justify-content:center; padding:0.5rem 0.25rem; font-size:0.75rem; min-height:36px; }

  /* Libreta */
  .peer-footer { flex-direction:column; align-items:stretch; }
  .peer-actions { display:grid; grid-template-columns:1fr 1fr; }
  .peer-actions .btn { justify-content:center; min-height:36px; }

  /* Modales tipo hoja inferior */
  .modal-overlay { align-items:flex-end; padding:0; }
  .modal { max-width:none !important; border-radius:var(--radius-lg) var(--radius-lg) 0 0; max-height:92vh; overflow-y:auto; }
  .modal-footer { flex-direction:column-reverse; }
  .modal-footer .btn { width:100%; justify-content:center; min-height:42px; }
  .cred-label { width:6rem !important; }
}

@media (max-width: 380px) {
  .kpi-grid { grid-template-columns:1fr; }
  .lic-actions { grid-template-columns:repeat(2, 1fr); }
}
.lic-actions[hidden] { display:none !important; }
.lic-actions .btn:disabled { opacity:0.4; cursor:not-allowed; }
.lic-email { white-space:nowrap; }
@media (max-width: 760px) { .lic-email { white-space:normal; word-break:break-all; } }

/* ═══ Registro de conexiones ═══════════════════════════════════════════════════ */
body:not(.is-admin) .admin-only { display:none !important; }
.audit-filter { width:auto; max-width:180px; padding:0.45rem 0.6rem; font-size:0.8125rem; }
@media (max-width: 760px) {
  .audit-filter { max-width:none; flex:1 1 45%; order:3; }
  #audit-user.audit-filter { flex-basis:100%; }
}
@media (max-width: 1400px) and (min-width: 861px) {
  .telemetry-item[title^="Tiempo restante"] { display:none; }
  .console-topbar { gap:0.875rem; }
  .nav-tab { padding:0.375rem 0.625rem; }
}