/* ==========================================================
   SENDA CONSCIENTE — TEMA OSCURO PREMIUM (EDICIÓN PATEK)
   Oscuro luminoso · Elegante · Minimalista · Sin dramatismo
   ========================================================== */

:root {
  --dark-bg: #161616;
  --dark-bg-2: #1e1e1e;
  --dark-bg-3: #232323;
  --dark-text: #f2f1ee;
  --dark-muted: #b9b8b4;
  --dark-border: rgba(255,255,255,0.06);
  --dark-accent: #c6a664;
  --dark-accent-hover: #d8be75;
  --dark-shadow: 0 4px 18px rgba(0,0,0,0.30);
  --transition: 0.35s ease;
}

/* ==========================================================
   BASE GLOBAL
   ========================================================== */
body.dark {
  background: var(--dark-bg);
  color: var(--dark-text);
  font-family: 'Lato', sans-serif;
  transition: background-color var(--transition), color var(--transition);
  animation: fadeDarkIn 0.6s ease-out both;
}

body.dark * {
  transition:
    background-color var(--transition),
    color var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

body.dark a {
  color: var(--dark-accent);
}
body.dark a:hover {
  color: var(--dark-accent-hover);
}

/* ==========================================================
   HEADER
   ========================================================== */
body.dark .site-header {
  background: #1c1c1c;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 1px 4px rgba(0,0,0,0.32);
  backdrop-filter: blur(8px);
}

body.dark .site-header.compact {
  background: #1d1d1d;
  box-shadow: 0 2px 8px rgba(0,0,0,0.42);
}

body.dark nav a {
  color: var(--dark-text);
  opacity: 0.88;
}

body.dark nav a:hover {
  opacity: 1;
  color: var(--dark-accent);
  background: rgba(198,166,100,0.07);
  border-color: rgba(198,166,100,0.35);
}

/* Botón tema */
body.dark .btn-theme {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--dark-text);
}
body.dark .btn-theme:hover {
  background: rgba(198,166,100,0.09);
  border-color: rgba(198,166,100,0.6);
  color: var(--dark-accent-hover);
}

/* Títulos */
body.dark h1,
body.dark h2,
body.dark h3,
body.dark .admin-title,
body.dark .panel-title {
  color: var(--dark-text) !important;
  opacity: 0.96;
}

/* ==========================================================
   TARJETAS / PANELES
   ========================================================== */
body.dark .card,
body.dark .box,
body.dark .panel {
  background: var(--dark-bg-3);
  border: 1px solid var(--dark-border);
  box-shadow: var(--dark-shadow);
}

/* ==========================================================
   INPUTS
   ========================================================== */
body.dark input,
body.dark select,
body.dark textarea {
  background: #202020;
  color: var(--dark-text);
  border: 1px solid var(--dark-border);
}

body.dark input:focus,
body.dark select:focus,
body.dark textarea:focus {
  border-color: var(--dark-accent);
  box-shadow: 0 0 0 2px rgba(198,166,100,0.25);
}

/* Inputs chat */
body.dark .chat-footer input#msg,
body.dark .admin-chat-footer input {
  background: #222 !important;
  color: var(--dark-text) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* Botones chat */
body.dark .chat-footer button#btnEnviar,
body.dark .admin-chat-footer #sendBtn {
  background: var(--dark-accent) !important;
  color: #111 !important;
}
body.dark .chat-footer button#btnEnviar:hover {
  background: var(--dark-accent-hover) !important;
}

/* ==========================================================
   TABLAS / ALERTAS
   ========================================================== */
body.dark th {
  color: var(--dark-accent);
}
body.dark td,
body.dark th {
  border-color: var(--dark-border);
}
body.dark .alert {
  background: #1e1e1e;
  border-left: 4px solid var(--dark-accent);
  color: var(--dark-text);
}

/* ==========================================================
   FOOTER
   ========================================================== */
body.dark footer {
  background: #1b1b1b !important;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: var(--dark-muted);
}

/* ==========================================================
   SCROLLBAR
   ========================================================== */
body.dark ::-webkit-scrollbar-thumb {
  background: #3b3b3b;
}
body.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--dark-accent);
}

/* ==========================================================
   CHAT — USUARIO + ADMIN
   ========================================================== */

/* Contenedores */
body.dark #chat-box,
body.dark .admin-chat-box {
  display: flex;
  flex-direction: column;
  gap: 4px !important;
}

/* Burbujas */
body.dark .message {
  display: inline-flex;
  padding: 10px 14px;
  border-radius: 14px;
  margin: 1px 0 !important;
  max-width: 75%;
  word-break: break-word;
}

/* Usuario */
body.dark .chat-shell {
  background: var(--dark-bg-2);
  border: 1px solid var(--dark-border);
}

body.dark #chat-box.chat-box {
  background: #161616 !important;
}

body.dark .message.sent {
  background: var(--dark-accent);
  color: #111;
}
body.dark .message.received {
  background: #2e2e2e;
  color: var(--dark-text);
}

/* Header chat usuario */
body.dark .chat-header {
  background: #1d1d1d !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

/* Footer */
body.dark .chat-footer {
  background: #1b1b1b;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Indicador escribiendo */
body.dark .typing-indicator {
  color: var(--dark-accent);
  opacity: 0.75;
}

/* Badge unread */
body.dark .unread-badge {
  background: var(--dark-accent) !important;
  color: #111 !important;
  border-radius: 999px !important;
  padding: 2px 7px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35) !important;
  top: 0 !important;
}

/* ==========================================================
   ADMIN CHAT
   ========================================================== */

body.dark .admin-chat-main {
  background: var(--dark-bg-2);
  border: 1px solid var(--dark-border);
}

/* Lista izquierda */
body.dark .admin-chat-usuarios {
  background: #1f1f1f !important;
  border-right: 1px solid rgba(255,255,255,0.03) !important;
}

body.dark .admin-chat-usuarios .user-item {
  background: #1f1f1f !important;
  color: var(--dark-text) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

body.dark .admin-chat-usuarios .user-item:hover {
  background: #2a2a2a !important;
  color: var(--dark-accent) !important;
}

/* Panel derecho */
body.dark .admin-chat-area {
  background: #181818 !important;
  border-left: 1px solid rgba(255,255,255,0.015) !important;
}

/* Caja mensajes admin */
body.dark .admin-chat-box {
  background: #161616 !important;
}

body.dark .admin-chat-box .message.sent {
  background: var(--dark-accent);
  color: #111;
}
body.dark .admin-chat-box .message.received {
  background: #2d2d2d;
  color: var(--dark-text);
}

/* Footer admin */
body.dark .admin-chat-footer {
  background: #1e1e1e;
  border-top: 1px solid var(--dark-border);
}

/* Placeholder admin */
body.dark .admin-chat-box:empty::before {
  content: "Selecciona un usuario para cargar la conversación.";
  color: var(--dark-muted);
  opacity: 0.5;
}

/* ==========================================================
   ANIMACIONES
   ========================================================== */
@keyframes fadeDarkIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ==========================================================
   FIXES CRÍTICOS — Fondo blanco y texto admin invisible
   ========================================================== */

/* Eliminar fondo blanco heredado del tema claro */
body.dark section {
  background: transparent !important;
}

/* Fondo del contenedor principal admin */
body.dark .admin-section {
  background: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

/* Título admin legible en modo oscuro */
body.dark .admin-section h1,
body.dark .admin-section h2,
body.dark .admin-section h3 {
  color: var(--dark-text) !important;
}
/* ==========================================================
   LOGIN — MODO OSCURO PREMIUM
   Coherente con el estilo Sereno/Patek
   ========================================================== */

body.dark .login-card,
body.dark .login-container,
body.dark form.login-box {
  background: #1e1e1e !important; /* Fondo de tarjeta oscuro */
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35) !important;
  padding: 2rem 2.5rem !important;
  color: var(--dark-text) !important;
}

/* Título “Iniciar sesión” */
body.dark .login-card h2,
body.dark .login-box h2,
body.dark .login-title {
  color: var(--dark-text) !important;
  opacity: 0.96 !important;
}

/* Labels */
body.dark label {
  color: var(--dark-muted) !important;
  opacity: 0.9;
  font-weight: 500;
}

/* Inputs */
body.dark .login-card input,
body.dark .login-box input,
body.dark input[type="email"],
body.dark input[type="password"] {
  background: #222 !important;
  color: var(--dark-text) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  padding: 0.55rem 0.75rem !important;
  transition: 0.25s;
}

body.dark .login-card input:focus,
body.dark .login-box input:focus {
  border-color: var(--dark-accent) !important;
  box-shadow: 0 0 0 2px rgba(198,166,100,0.25) !important;
  outline: none !important;
}

/* Botón ENTRAR — Dorado Premium */
body.dark .login-card button,
body.dark .login-box button,
body.dark button.login-btn,
body.dark input[type="submit"] {
  background: var(--dark-accent) !important;
  color: #111 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0.55rem 0.75rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background var(--transition);
}

body.dark .login-card button:hover,
body.dark .login-box button:hover,
body.dark button.login-btn:hover,
body.dark input[type="submit"]:hover {
  background: var(--dark-accent-hover) !important;
}

/* Enlace “Regístrate aquí” */
body.dark .login-card a,
body.dark .login-box a,
body.dark .register-link {
  color: var(--dark-accent) !important;
  opacity: 0.85;
  font-weight: 500;
  text-decoration: none;
}

body.dark .login-card a:hover,
body.dark .login-box a:hover {
  opacity: 1 !important;
  text-decoration: underline;
}

/* Ajuste de campos muy oscuros en tu screenshot */
body.dark .login-card input::placeholder,
body.dark .login-box input::placeholder {
  color: var(--dark-muted) !important;
  opacity: 0.5 !important;
}

/* Centrado vertical suave */
body.dark .login-wrapper,
body.dark .login-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: calc(100vh - 180px) !important;
}
/* ==========================================================
   FIX FOOTER — Mantener el footer pegado abajo en páginas cortas
   ========================================================== */

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main,
.main-content {
  flex: 1 0 auto;
  min-height: calc(100vh - 180px); /* altura real del header + footer */
}

footer.footer {
  flex-shrink: 0;
}
/* =====================================================
   LOGIN PAGE — Ajuste perfecto sin romper el layout
   ===================================================== */

body.login-page {
  display: block !important;      /* Cancelamos el flex global */
  min-height: 100vh;              /* Garantiza pantalla completa */
  position: relative;
  padding-bottom: 140px;          /* Altura real del footer */
}

body.login-page footer.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
/* =========================================
   LOGO - Ajuste para modo oscuro
========================================= */
/* Logo - Mostrar/ocultar según modo */
.logo-dark-mode {
    display: none;
}

body.dark .logo-light-mode {
    display: none;
}

body.dark .logo-dark-mode {
    display: inline-block;
}