/* styles-premium-extend.css - Modo claro alegre + responsive + fondo oscuro elegante */

body:not(.dark) {
  background: linear-gradient(180deg, #e0f2ff 0%, #ffffff 100%);
  color: #1e293b; /* slate-800 */
}

body:not(.dark) .header {
  background: #e0f2ff; /* azul cielo */
  border-bottom: 4px solid #60a5fa; /* blue-400 */
  color: #1e3a8a; /* blue-900 */
  text-shadow: none;
}

body:not(.dark) .footer {
  background: #f0f9ff;
  color: #1e3a8a;
}

body:not(.dark) .footer a {
  color: #2563eb; /* blue-600 */
}

body:not(.dark) .card {
  background: rgba(224, 242, 254, 0.85); /* blue-100 */
  color: #1e3a8a;
  box-shadow: 0 8px 24px rgba(96, 165, 250, 0.4);
}

body:not(.dark) .card:hover {
  box-shadow: 0 12px 28px rgba(96, 165, 250, 0.6);
}

body:not(.dark) table {
  background: #f0f9ff;
  color: #1e3a8a;
}

body:not(.dark) table th {
  background-color: #e0f2ff;
  color: #2563eb;
}

body:not(.dark) table tr:hover {
  background-color: #dbeafe;
}

/* SOLO afecta botones generales, NO los del menú de miembros */
body:not(.dark) button:not(.member-btn) {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

body:not(.dark) button:not(.member-btn):hover {
  background: linear-gradient(135deg, #60a5fa, #93c5fd);
  transform: translateY(-3px) scale(1.05);
}

/* Estilo para modo oscuro elegante */
body.dark {
  background: linear-gradient(to bottom, #0f172a, #1a1a2e);
  color: #ffffff;
  animation: fadeBg 5s ease-in-out forwards;
}

@keyframes fadeBg {
  from { background-position: top; }
  to   { background-position: bottom; }
}

/* Centrando botones */
.center-button {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Responsive improvements */
@media (max-width: 768px) {
  .container { padding: 16px; }
  .card { padding: 16px; }
  .header, .footer { padding: 16px; }
  button { width: 100%; padding: 12px 0; }
}

/* === TABLAS ADAPTATIVAS MODO CLARO / OSCURO === */

.table-adaptada {
  width: 100%;
  border-radius: 0.75rem;
  overflow: hidden;
  font-size: 0.875rem;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(100, 116, 139, 0.3); /* slate-500 */
}

.table-adaptada thead {
  background-color: #e0f2ff; /* modo claro */
  color: #1e3a8a;
}

body.dark .table-adaptada thead {
  background-color: #1f2937; /* gray-800 */
  color: #facc15; /* yellow-400 */
}

.table-adaptada tbody {
  background-color: #ffffff;
  color: #1e293b;
}

body.dark .table-adaptada tbody {
  background-color: #374151; /* gray-700 */
  color: #e5e7eb; /* gray-200 */
}

.table-adaptada tr {
  border-bottom: 1px solid rgba(203, 213, 225, 0.4); /* slate-200 */
}

body.dark .table-adaptada tr:hover {
  background-color: #4b5563; /* gray-600 */
}

/* === BOTONES ADAPTATIVOS === */

.btn-adaptado {
  padding: 0.6rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
  color: white;
  background: linear-gradient(135deg, #3b82f6, #2563eb); /* blue gradient */
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-adaptado:hover {
  transform: translateY(-2px) scale(1.03);
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
}

body.dark .btn-adaptado {
  background: linear-gradient(135deg, #60a5fa, #1e40af); /* azul oscuro para dark */
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3);
}

body.dark .btn-adaptado:hover {
  background: linear-gradient(135deg, #3b82f6, #1e3a8a);
}

/* Modo claro: botones adaptados con mejor contraste */
body:not(.dark) #inactiveUser .btn-adaptado {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25); /* azul */
}

body:not(.dark) #inactiveUser .btn-adaptado:hover {
  filter: brightness(1.05);
}

/* === INPUTS UNIFORMES === */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  background-color: #ffffff;
  color: #1e293b;
  border: 1px solid #cbd5e1; /* slate-300 */
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

input:focus,
textarea:focus {
  outline: none;
  border-color: #38bdf8; /* sky-400 */
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3);
}

body.dark input,
body.dark textarea {
  background-color: #f9fafb; /* blanco suave */
  color: #1e293b;
  border-color: #64748b; /* slate-500 */
}

/* === BOTONES DE ACCIÓN UNIFORMES (duplicado intencional para compatibilidad) === */
.btn-adaptado {
  padding: 0.6rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
  color: white;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-adaptado:hover {
  transform: translateY(-2px) scale(1.03);
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
}

body.dark .btn-adaptado {
  background: linear-gradient(135deg, #60a5fa, #1e40af);
  color: #ffffff;
}

body.dark .btn-adaptado:hover {
  background: linear-gradient(135deg, #3b82f6, #1e3a8a);
}

/* === TABLAS ADAPTATIVAS (duplicado intencional para compatibilidad) === */
.table-adaptada {
  width: 100%;
  border-radius: 0.75rem;
  overflow: hidden;
  font-size: 0.875rem;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(100, 116, 139, 0.3);
}

.table-adaptada thead {
  background-color: #e0f2ff;
  color: #1e3a8a;
}

body.dark .table-adaptada thead {
  background-color: #1f2937;
  color: #facc15;
}

.table-adaptada tbody {
  background-color: #ffffff;
  color: #1e293b;
}

body.dark .table-adaptada tbody {
  background-color: #374151;
  color: #e5e7eb;
}

.table-adaptada tr {
  border-bottom: 1px solid rgba(203, 213, 225, 0.4);
}

body.dark .table-adaptada tr:hover {
  background-color: #4b5563;
}

/* Leyenda modo claro */
body:not(.dark) .legend-head {
  background-color: #dbeafe; /* blue-100 */
  color: #1e3a8a; /* blue-900 */
}

body:not(.dark) .legend-body {
  background-color: #ffffff;
  color: #1e293b; /* slate-800 */
}

/* ---- Botones del menú: el color lo pone Tailwind (bg-*) ---- */
.member-btn,
.member-btn:hover,
.member-btn:focus {
  /* No declaramos background aquí para no pisar bg-* */
  border-radius: 0.5rem;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* ---- Selector de idioma: botones transparentes ---- */
#languageSwitcher button{
  background: transparent !important;
  box-shadow: none !important;
  border: 0;
  padding: 0;
}
#languageSwitcher button img{
  display: block;
  border-radius: 9999px; /* opcional */
}