/* --- Estilos Base y Layout General --- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #f4f7f6;
  color: #333;
  margin: 0;
}

h1, h2, h3 {
  color: #2c3e50;
}

.main-layout {
  display: flex;
  height: calc(100vh - 60px);
  overflow: hidden;
}

.content {
  flex-grow: 1;
  padding: 2rem;
  background-color: #f4f7f6;
  overflow-y: auto;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

/* --- Cabecera y Menú Lateral (Sidebar) --- */
.dashboard-header {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 0 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  box-sizing: border-box;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.menu-toggle-btn {
  display: none;
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: #2c3e50;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sidebar {
  width: 220px;
  background-color: #2c3e50;
  color: white;
  padding-top: 1rem;
  flex-shrink: 0;
  transition: transform 0.3s ease-in-out;
}
.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar ul li a {
  display: block;
  padding: 1rem 1.5rem;
  color: #ecf0f1;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
  border-left: 3px solid transparent;
}
.sidebar ul li a:hover {
  background-color: #34495e;
  color: white;
}
.sidebar ul li a.active {
  background-color: #46627f;
  border-left: 3px solid #3498db;
  font-weight: bold;
  color: white;
}

/* --- Página de Login --- */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.login-form {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 100%;
  max-width: 400px;
}

/* --- Componentes Generales --- */
.card {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  margin-bottom: 2rem;
}

.form-group { text-align: left; margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; }
.form-group input:not([type="checkbox"]):not([type="radio"]), .form-group select { width: 100%; padding: 0.8rem; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.form-group select[multiple] { height: 150px; }
.radio-group { display: flex; align-items: center; gap: 1rem; }
.radio-group input { width: auto; }
.radio-group label { margin-bottom: 0; font-weight: normal; }

button, .action-btn { padding: 0.8rem 1.2rem; border: none; border-radius: 4px; background-color: #3498db; color: white; font-size: 0.9rem; font-weight: bold; cursor: pointer; transition: background-color 0.3s; text-decoration: none; display: inline-block; }
button:hover, .action-btn:hover { background-color: #2980b9; }
button:disabled { background-color: #bdc3c7; cursor: not-allowed; }
button.delete-btn { background-color: #e74c3c; }
button.delete-btn:hover { background-color: #c0392b; }
.save-btn { background-color: #2ecc71; }
.save-btn:hover { background-color: #27ae60; }
.action-btn-icon { background: #f39c12; padding: 0.6rem; line-height: 1; font-size: 1rem; }
.action-btn-icon:hover { background: #e67e22; }
button.action-btn-icon[title="Añadir Grupo"] { background: #2ecc71; }
button.action-btn-icon[title="Añadir Grupo"]:hover { background: #27ae60; }
button.action-btn-icon[title="Regenerar Token"] { background-color: #f39c12; }
button.action-btn-icon[title="Regenerar Token"]:hover { background-color: #e67e22; }

/* --- Tablas --- */
table { width: 100%; border-collapse: collapse; margin-top: 1rem; table-layout: fixed; }
table th, table td { padding: 0.8rem; text-align: left; border-bottom: 1px solid #ddd; vertical-align: middle; word-wrap: break-word; }
table th { background-color: #ecf0f1; }
.actions-cell { white-space: nowrap; width: auto; }
table td .action-btn, table td button { margin-right: 0.5rem; }

/* --- Mensajes y Estados --- */
.message { margin-top: 1rem; padding: 0.8rem; border-radius: 4px; font-weight: 500; }
.message.success { background-color: #d4edda; color: #155724; }
.message.error { background-color: #f8d7da; color: #721c24; }
.error-message { color: #e74c3c; margin-top: 1rem; font-weight: bold; }
.status { padding: 0.2rem 0.6rem; border-radius: 12px; font-size: 0.8rem; font-weight: bold; color: white; white-space: nowrap; }
.status-active { background-color: #2ecc71; }
.status-inactive { background-color: #95a5a6; }
.status-error { background-color: #e74c3c; }

/* --- Editor de Paquetes --- */
.editor-container-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1.5rem; align-items: start; }
.form-hint { font-size: 0.9rem; color: #7f8c8d; margin-top: -0.5rem; margin-bottom: 1rem; }
#rules-list { list-style: none; padding: 0; margin: 0; border: 1px solid #ddd; border-radius: 4px; padding: 0.5rem; }
#rules-list li { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem; border-bottom: 1px solid #ecf0f1; }
#rules-list li:last-child { border-bottom: none; }
#rules-list li div { word-break: break-all; }
.delete-rule-btn { background: none; border: none; color: #e74c3c; font-size: 1.5rem; line-height: 1; padding: 0 0.5rem; cursor: pointer; }
.filter-controls { display: flex; gap: 0.5rem; align-items: center; }
.filter-controls select { flex-grow: 1; }
.action-btn-icon { padding: 0.8rem; line-height: 1; }
.channel-checkbox-list { height: 250px; border: 1px solid #ccc; border-radius: 4px; overflow-y: auto; padding: 0.5rem; }
.channel-list-placeholder { display: flex; height: 100%; align-items: center; justify-content: center; color: #7f8c8d; }
.channel-list-placeholder.error { color: #e74c3c; }
.channel-item { display: flex; align-items: center; padding: 0.5rem; border-radius: 4px; transition: background-color 0.2s; font-size: 1.1em; }
.channel-item:hover { background-color: #f4f7f6; }
.channel-item input[type="checkbox"] { flex-shrink: 0; margin-right: 12px; transform: scale(1.3); width: auto; }
.channel-item label { cursor: pointer; flex-grow: 1; margin: 0; padding: 0; display: block; }
.channel-logo { width: 48px; height: 48px; object-fit: contain; margin-right: 12px; background-color: #eee; border-radius: 50%; flex-shrink: 0; }

/* --- Dashboard y Actividad --- */
.stats-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
.card-full-row { grid-column: 1 / -1; }
.provider-list { list-style: none; padding: 0; margin: 0; }
.provider-list li { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #ecf0f1; }
.provider-list li:last-child { border-bottom: none; }
#ws-status { font-size: 0.8rem; vertical-align: middle; margin-left: 1rem; }
.stat-card { padding: 1.5rem; text-align: center; }
.stat-card h3 { margin-top: 0; color: #34495e; }
.stat-card p { font-size: 2.5rem; font-weight: bold; color: #3498db; margin-bottom: 0; }

/* --- Tabla de Usuarios (Copy Container) --- */
.copy-container { display: flex; min-width: 250px; }
.copy-container input { flex-grow: 1; border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; background-color: #f8f9fa; color: #495057; padding: 0.5rem; border: 1px solid #ccc; min-width: 0; }
.copy-container button { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0.5rem 0.8rem; font-size: 0.8rem; flex-shrink: 0; }

/* --- ESTILOS RESPONSIVOS (Tablet y Móvil) --- */
@media screen and (max-width: 992px) {
  .sidebar { position: fixed; top: 60px; left: 0; height: calc(100% - 60px); z-index: 1000; transform: translateX(-100%); }
  .sidebar.sidebar-visible { transform: translateX(0); }
  .menu-toggle-btn { display: block; }
  .editor-container-grid { grid-template-columns: 1fr; }
}

@media screen and (max-width: 768px) {
  table { border: 0; }
  table thead { display: none; }
  table tr { display: block; margin-bottom: 1rem; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
  table td { display: block; text-align: right; border-bottom: 1px solid #eee; }
  table td:last-child { border-bottom: 0; }
  table td::before { content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase; font-size: 0.9em; }
  .copy-container { justify-content: flex-end; }
  .actions-cell { text-align: right !important; }
}