/* ==========================================================
   SENDA CONSCIENTE — TEMA OSCURO (EDICIÓN PATEK)
   Elegancia sobria, fondo satinado, acento dorado y tipografía Lato
   ========================================================== */

:root {
  --color-bg: #121212;
  --color-bg-secondary: #1a1a1a;
  --color-text: #f3f2ed;
  --color-muted: #b5b3ad;
  --color-accent: #c6a664;
  --color-border: #2a2a2a;
  --color-hover: #d5b96a;
  --shadow-soft: 0 2px 6px rgba(0,0,0,0.45);
  --shadow-medium: 0 4px 14px rgba(0,0,0,0.65);
  --transition-speed: 0.5s;
}

/* ----------------------------------------------------------
   BASE GENERAL (a2, b3, g1)
---------------------------------------------------------- */
body.dark {
  background: radial-gradient(circle at 50% 20%, rgba(198,166,100,0.05), #121212 80%) fixed;
  color: var(--color-text);
  font-family: 'Lato', sans-serif;
  line-height: 1.6;
  transition: background-color var(--transition-speed), color var(--transition-speed);
}

body.dark * {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

body.dark a {
  color: var(--color-accent);
  transition: color 0.3s ease;
}
body.dark a:hover {
  color: var(--color-hover);
}

/* ----------------------------------------------------------
   CABECERA (d1, d2) y NAV
---------------------------------------------------------- */
body.dark .site-header {
  background: rgba(18,18,18,0.9);
  color: var(--color-text);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
  transition: all .35s ease;
}

body.dark .site-header.compact {
  padding: 0.4em 1em;
  background: rgba(24,24,24,0.92);
  box-shadow: 0 4px 12px rgba(0,0,0,0.8);
}

body.dark nav a {
  color: var(--color-text);
  transition: color 0.25s ease;
}
body.dark nav a:hover {
  color: var(--color-accent);
}

/* ----------------------------------------------------------
   BOTONES (e1, e2, e3)
---------------------------------------------------------- */
body.dark button,
body.dark .btn,
body.dark .btn-primary {
  background: var(--color-accent);
  color: #111;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  transition: background-color .25s ease, transform .1s ease, box-shadow .25s ease;
}
body.dark button:hover,
body.dark .btn:hover {
  background: var(--color-hover);
  box-shadow: 0 3px 10px rgba(213,185,106,0.3);
}
body.dark button:active {
  transform: translateY(1px);
}

/* Botón de tema coherente con el modo oscuro */
body.dark .btn-theme {
  background: var(--color-accent);
  color: #111;
  border: 1px solid var(--color-accent);
  box-shadow: 0 0 6px rgba(198,166,100,0.25);
}
body.dark .btn-theme:hover {
  background: var(--color-hover);
  color: #000;
  box-shadow: 0 0 12px rgba(198,166,100,0.45);
}

/* ----------------------------------------------------------
   TARJETAS, FORMULARIOS, INPUTS (a3)
---------------------------------------------------------- */
body.dark .card,
body.dark .panel {
  background: var(--color-bg-secondary);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}
body.dark .card:hover {
  box-shadow: var(--shadow-medium);
}

body.dark input,
body.dark select,
body.dark textarea {
  background: #1b1b1b;
  color: var(--color-text);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  transition: border .2s ease, box-shadow .2s ease;
}
body.dark input:focus,
body.dark select:focus,
body.dark textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(198,166,100,0.2);
}

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

/* ----------------------------------------------------------
   MAIN + FOOTER (f1, f2, f3)
---------------------------------------------------------- */
body.dark footer {
  background: radial-gradient(circle at 50% 20%, rgba(198,166,100,0.1), rgba(18,18,18,0.9)) , #1a1a1a;
  color: var(--color-muted);
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.6);
}
body.dark footer a {
  color: var(--color-text);
}
body.dark footer a:hover {
  color: var(--color-accent);
}
body.dark .social-icons img {
  filter: brightness(0.9) invert(0.85);
  transition: filter 0.3s ease, transform 0.3s ease;
}
body.dark .social-icons img:hover {
  transform: scale(1.05);
  filter: brightness(1) invert(0.95);
}

/* ----------------------------------------------------------
   CHAT USUARIO (c1, c2, c4)
---------------------------------------------------------- */
body.dark .chat-shell {
  background: linear-gradient(180deg, #141414 0%, #181818 100%);
  color: var(--color-text);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

body.dark .chat-header {
  background: #1b1b1b;
  color: var(--color-accent);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

body.dark .chat-box {
  background: #121212;
  padding: 1rem 1.2rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.dark .message.sent {
  align-self: flex-end;
  background: linear-gradient(135deg, #d8c27b 0%, #c6a664 100%);
  color: #111;
  border-radius: 14px 14px 2px 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
body.dark .message.received {
  align-self: flex-start;
  background: linear-gradient(135deg, #2c2c2c 0%, #3a3a3a 100%);
  color: #f3f2ed;
  border-radius: 14px 14px 14px 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

/* Footer chat */
body.dark .chat-footer {
  background: #1b1b1b;
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.4);
}
body.dark .chat-footer input#msg {
  background: #222;
  color: var(--color-text);
  border: 1px solid rgba(255,255,255,0.08);
}
body.dark .chat-footer input#msg::placeholder {
  color: var(--color-muted);
}
body.dark .chat-footer button#btnEnviar {
  background: var(--color-accent);
  color: #111;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  transition: background 0.3s ease, transform 0.1s ease;
}
body.dark .chat-footer button#btnEnviar:hover {
  background: var(--color-hover);
  transform: translateY(-1px);
}

/* ----------------------------------------------------------
   ADMIN CHAT (c1–c4 coherencia visual)
---------------------------------------------------------- */
body.dark .admin-chat-main {
  background: linear-gradient(180deg, #121212 0%, #171717 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-medium);
}
body.dark .admin-chat-usuarios {
  background: #151515;
  border-right: 1px solid rgba(255,255,255,0.08);
}
body.dark .admin-chat-usuarios .u {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background .3s ease, color .3s ease;
}
body.dark .admin-chat-usuarios .u:hover {
  background: #1f1f1f;
}
body.dark .admin-chat-usuarios .u.active {
  background: var(--color-accent);
  color: #111;
  font-weight: 600;
}
body.dark .admin-chat-box {
  background: #121212;
  color: var(--color-text);
}
body.dark .admin-chat-box .message.sent {
  align-self: flex-end;
  background: linear-gradient(135deg, #2c2c2c 0%, #3a3a3a 100%);
  color: #f3f2ed;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
body.dark .admin-chat-box .message.received {
  align-self: flex-start;
  background: linear-gradient(135deg, #d8c27b 0%, #c6a664 100%);
  color: #111;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
body.dark .admin-chat-footer {
  background: #1b1b1b;
  border-top: 1px solid rgba(255,255,255,0.08);
}
body.dark .admin-chat-footer #msg {
  background: #222;
  color: var(--color-text);
  border: 1px solid rgba(255,255,255,0.08);
}
body.dark .admin-chat-footer #sendBtn {
  background: var(--color-accent);
  color: #111;
  font-weight: 600;
  border-radius: 8px;
  border: none;
}
body.dark .admin-chat-footer #sendBtn:hover {
  background: var(--color-hover);
}

/* ----------------------------------------------------------
   INDICADOR DE ESCRITURA (c2)
---------------------------------------------------------- */
body.dark .typing-indicator {
  font-size: 0.8rem;
  color: var(--color-accent);
  font-style: italic;
  padding-left: 8px;
  border-left: 2px solid rgba(198,166,100,0.5);
  opacity: 0.7;
  transition: opacity 0.4s ease;
}

/* ----------------------------------------------------------
   SCROLLBAR Y ANIMACIONES (g2, g3)
---------------------------------------------------------- */
body.dark ::-webkit-scrollbar-thumb {
  background-color: #3a3a3a;
}
body.dark ::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-accent);
}

@keyframes fadeInSmooth {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
body.dark, body.dark .main-content {
  animation: fadeInSmooth 1.2s ease-out both;
}