/* ================================================================
   SAT Técnico Diagnosis — Complete Stylesheet
   Rebuilt from scratch to match index.html structure
   ================================================================ */

/* ===== RESET & BASE ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-glow: rgba(37, 99, 235, 0.2);
  --accent-light: #3b82f6;
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --radius: 12px;
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Light Theme (Default) */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-card: rgba(255, 255, 255, 0.95);
  --bg-input: #f1f5f9;
  --border-color: rgba(0, 0, 0, 0.08);
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --title-color: #1e40af;
  --sidebar-bg: #f1f5f9;
  --sidebar-footer-bg: #e2e8f0;
  --assistant-bubble: #f1f5f9;
  --user-bubble: linear-gradient(135deg, #2563eb, #1e3a8a);
  --user-text: #ffffff;
  --code-bg: #f1f5f9;
  --pre-bg: #1e293b;
}

/* Dark Theme */
body.dark-theme {
  --bg-primary: #0b0f19;
  --bg-secondary: #111827;
  --bg-card: rgba(17, 24, 39, 0.95);
  --bg-input: rgba(255, 255, 255, 0.05);
  --border-color: rgba(255, 255, 255, 0.08);
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --title-color: #60a5fa;
  --sidebar-bg: rgba(17, 24, 39, 0.6);
  --sidebar-footer-bg: rgba(0, 0, 0, 0.3);
  --assistant-bubble: rgba(30, 41, 59, 0.8);
  --user-bubble: linear-gradient(135deg, #2563eb, #1e3a8a);
  --user-text: #ffffff;
  --code-bg: rgba(0, 0, 0, 0.3);
  --pre-bg: rgba(0, 0, 0, 0.5);
}

body.dark-theme .lang-btn {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
body.dark-theme .lang-btn:hover {
  border-color: var(--accent-light);
  background: rgba(255, 255, 255, 0.15);
}
body.dark-theme .lang-btn.active {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.12);
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background: var(--bg-primary);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6, strong, b {
  color: var(--title-color);
}

/* ===== AUTH SCREEN ===== */
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  width: 95%;
  max-width: 440px;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
  animation: slideUp 0.5s ease-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== AUTH BANNER ===== */
.auth-banner {
  width: 100%;
  height: 180px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.auth-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.auth-banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to top, var(--bg-card), transparent);
  pointer-events: none;
}

.auth-header { text-align: center; padding: 0 2.5rem; }

.auth-card h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.auth-card p, .auth-header p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.auth-body {
  width: 100%;
  padding: 0.5rem 2.5rem;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.input-group input,
#accessCode {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 1rem;
  font-family: var(--font-main);
  outline: none;
  transition: var(--transition);
}

.input-group input:focus,
#accessCode:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
}

.code-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 18px;
  font-size: 1rem;
  font-family: var(--font-main);
  letter-spacing: 0;
  color: var(--text-primary);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.btn-primary {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--accent), #1e3a8a);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 15px var(--accent-glow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--accent-glow);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.error-text {
  color: var(--error);
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.auth-footer {
  margin-top: 0.5rem;
  padding: 0 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.auth-theme-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.btn-link {
  background: none;
  border: none;
  color: var(--accent-light);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  font-family: var(--font-main);
}

.btn-link:hover {
  color: var(--accent);
}

/* ===== LANGUAGE SELECTOR ===== */
.language-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.language-selector-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 4px;
}

.lang-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  background: var(--bg-input);
  font-size: 1.15rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  padding: 0;
  line-height: 1;
}

.lang-btn:hover {
  border-color: var(--accent-light);
  transform: scale(1.1);
  box-shadow: 0 2px 8px var(--accent-glow);
}

.lang-btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  transform: scale(1.1);
}

.lang-btn img {
  width: 22px;
  height: 22px;
  border-radius: 2px;
  pointer-events: none;
}

/* ===== MAIN CONTAINER ===== */
.container {
  width: 96%;
  max-width: 1400px;
  height: 96vh;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  display: flex;
  overflow: hidden;
  position: relative;
  z-index: 10;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

/* ===== SIDEBAR ===== */
.sidebar {
  width: 280px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: var(--transition);
}

.sidebar-header {
  padding: 1.5rem;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-logo {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.75rem;
  border: 2px solid var(--border-color);
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.sidebar-header h2 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.sidebar-content {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}


.btn-new-chat {
  width: 100%;
  padding: 12px;
  background: white;
  color: #1e293b;
  border: 1.5px solid #1e293b;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: var(--transition);
  margin-bottom: 0;
}

.btn-new-chat:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--accent-glow);
}

body.dark-theme .btn-new-chat {
  background: transparent;
  color: #f1f5f9;
  border-color: #f1f5f9;
}

body.dark-theme .btn-new-chat:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.btn-new-chat span {
  font-size: 1.2rem;
  line-height: 1;
}

.sidebar-search {
  position: relative;
  margin-bottom: 0.75rem;
}

.sidebar-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
}

#searchHistory {
  width: 100%;
  padding: 10px 10px 10px 34px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.85rem;
  transition: var(--transition);
}

#searchHistory:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.history-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-item {
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: var(--transition);
  font-size: 0.85rem;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  position: relative;
  flex-shrink: 0;
}

.history-item-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  margin-bottom: 2px;
}

.history-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.tag-badge {
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent);
  border: 1px solid rgba(37, 99, 235, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.tag-badge:hover {
  background: var(--accent);
  color: white;
}

.history-item-actions {
  display: none;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.history-item:hover .history-item-actions {
  display: flex;
}

.history-item-actions button {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 3px 5px;
  border-radius: 6px;
  transition: var(--transition);
  line-height: 1;
  opacity: 0.6;
}

.history-item-actions button:hover {
  opacity: 1;
  background: rgba(37, 99, 235, 0.1);
}

.history-item-actions .btn-delete-chat:hover {
  background: rgba(239, 68, 68, 0.15);
}

.history-item:hover {
  background: rgba(37, 99, 235, 0.08);
  color: var(--accent);
  border-color: rgba(37, 99, 235, 0.15);
}

/* Sidebar locked while processing */
.sidebar-content.sidebar-locked .history-list,
.sidebar-content.sidebar-locked .btn-new-chat,
.sidebar-content.sidebar-locked .btn-import-chat {
  pointer-events: none;
  opacity: 0.45;
  transition: opacity 0.3s ease;
}

/* Import chat button */
.sidebar-action-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 1rem;
}

.btn-new-chat,
.btn-import-chat {
  flex: 1;
}

.btn-import-chat {
  padding: 12px;
  background: transparent;
  color: var(--text-secondary);
  border: 1.5px dashed var(--border-color);
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: var(--transition);
  font-family: var(--font-main);
}

.btn-import-chat:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(37, 99, 235, 0.05);
}

body.dark-theme .btn-import-chat {
  color: #94a3b8;
  border-color: rgba(255,255,255,0.12);
}

body.dark-theme .btn-import-chat:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.sidebar-footer {
  padding: 1rem;
  background: var(--sidebar-footer-bg);
  border-top: 1px solid var(--border-color);
}

.license-info {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sidebar-controls {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.control-item,
.theme-switch-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.control-label,
.theme-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* ===== TOGGLE SWITCH ===== */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  transition: 0.3s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.3s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input:checked + .slider {
  background-color: var(--accent);
  border-color: var(--accent);
}

input:checked + .slider:before {
  transform: translateX(18px);
}

.slider.round { border-radius: 22px; }
.slider.round:before { border-radius: 50%; }

/* ===== CHAT AREA ===== */
.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-primary);
}

.chat-header {
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
}

.chat-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-indicator {
  width: 8px;
  height: 8px;
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--success);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.chat-title h3 {
  font-size: 1rem;
  font-weight: 600;
}

.chat-expiration-badge {
  font-size: 0.72rem;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* ===== QUOTA BADGE (Indicador de consultas diarias) ===== */
.quota-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: var(--transition);

  /* Estado normal (verde) */
  color: var(--success);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

/* Pocas consultas restantes (≤5) */
.quota-badge.quota-warning {
  color: var(--warning);
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.25);
}

/* Sin consultas restantes */
.quota-badge.quota-exhausted {
  color: var(--error);
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  animation: pulse-quota 2s ease-in-out infinite;
}

@keyframes pulse-quota {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.quota-badge svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.btn-support {
  background: var(--accent);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
  font-family: var(--font-main);
}

.btn-support:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--accent-glow);
}

/* ===== MESSAGES ===== */
.chat-messages {
  flex: 1;
  padding: 1.5rem 2rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  scroll-behavior: smooth;
}

.message {
  display: flex;
  gap: 12px;
  max-width: 80%;
  animation: msgIn 0.3s ease-out;
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.user-message {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.assistant-message {
  align-self: flex-start;
}

.message-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid var(--border-color);
}

.message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.message-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.message-bubble {
  padding: 14px 18px;
  border-radius: 18px;
  font-size: 0.92rem;
  line-height: 1.65;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.assistant-message .message-bubble {
  background: var(--assistant-bubble);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--border-color);
}

.user-message .message-bubble {
  background: var(--user-bubble);
  color: var(--user-text);
  border-bottom-right-radius: 4px;
}

.message-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 6px;
}

.user-message .message-time {
  text-align: right;
}

/* ===== Markdown enriquecido en mensajes del asistente ===== */
.assistant-message .message-bubble { padding: 18px 20px; }
.message-bubble p { margin-bottom: 0.7em; }
.message-bubble p:last-child { margin-bottom: 0; }

/* Negritas: oscuro legible (no azul) para no competir con enlaces/encabezados */
.assistant-message .message-bubble strong,
.assistant-message .message-bubble b {
  color: var(--text-primary);
  font-weight: 700;
}
body.dark-theme .assistant-message .message-bubble strong,
body.dark-theme .assistant-message .message-bubble b { color: #ffffff; }

/* Encabezados de sección: destacados, azul profundo, barra de acento y fondo sutil */
.assistant-message .message-bubble h1,
.assistant-message .message-bubble h2,
.assistant-message .message-bubble h3,
.assistant-message .message-bubble h4 {
  color: #1e3a8a;
  font-weight: 800;
  line-height: 1.25;
  margin: 1.6em 0 0.75em;
  padding: 8px 14px;
  border-left: 5px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: linear-gradient(90deg, rgba(37,99,235,0.10), rgba(37,99,235,0));
  letter-spacing: -0.015em;
}
.assistant-message .message-bubble h1 { font-size: 1.42rem; }
.assistant-message .message-bubble h2 { font-size: 1.3rem; }
.assistant-message .message-bubble h3 { font-size: 1.18rem; }
.assistant-message .message-bubble h4 { font-size: 1.05rem; border-left-width: 4px; }
.assistant-message .message-bubble h1:first-child,
.assistant-message .message-bubble h2:first-child,
.assistant-message .message-bubble h3:first-child { margin-top: 0; }
body.dark-theme .assistant-message .message-bubble h1,
body.dark-theme .assistant-message .message-bubble h2,
body.dark-theme .assistant-message .message-bubble h3,
body.dark-theme .assistant-message .message-bubble h4 {
  color: #93c5fd;
  background: linear-gradient(90deg, rgba(59,130,246,0.18), rgba(59,130,246,0));
}

/* Listas: más aire y marcadores con color de marca */
.message-bubble ul, .message-bubble ol { margin: 0.6em 0 0.9em; padding-left: 1.6em; }
.message-bubble li { margin-bottom: 0.45em; padding-left: 0.2em; }
.message-bubble ol li::marker { color: var(--accent); font-weight: 700; }
.message-bubble ul li::marker { color: var(--accent-light); }

/* Código en línea y valores técnicos */
.message-bubble code {
  background: var(--code-bg);
  color: var(--accent-hover);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.85em;
  font-weight: 600;
  border: 1px solid var(--border-color);
}
body.dark-theme .message-bubble code { color: #93c5fd; }

/* Bloques de código / rutas de menú */
.message-bubble pre {
  background: var(--pre-bg);
  color: #e2e8f0;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  overflow-x: auto;
  margin: 0.9em 0;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  line-height: 1.7;
}
.message-bubble pre code { background: none; padding: 0; color: inherit; border: none; font-weight: 500; }

/* Citas/fuentes: badge sutil para que no dominen el texto */
.message-bubble a {
  display: inline-block;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.82em;
  line-height: 1.4;
  padding: 0px 8px;
  border: 1px solid var(--accent-glow);
  border-radius: 999px;
  background: var(--accent-glow);
  transition: var(--transition);
  vertical-align: baseline;
}
.message-bubble a:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.message-bubble img { max-width: 100%; border-radius: 10px; margin: 0.6em 0; }

/* Separadores entre secciones */
.message-bubble hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, var(--border-color), transparent);
  margin: 1.2em 0;
}

/* Cita destacada (blockquote) */
.message-bubble blockquote {
  margin: 0.8em 0;
  padding: 10px 16px;
  border-left: 4px solid var(--accent-light);
  background: var(--accent-glow);
  border-radius: 0 10px 10px 0;
  color: var(--text-secondary);
}

/* ===== Callouts (párrafos con emoji → tarjetas) ===== */
.message-bubble .callout {
  position: relative;
  margin: 0.7em 0;
  padding: 11px 14px 11px 14px;
  border-radius: 10px;
  border-left: 3px solid var(--accent);
  background: rgba(59, 130, 246, 0.06);
  line-height: 1.6;
}
.message-bubble .callout-ico { margin-right: 6px; }
.message-bubble .callout-warn { border-left-color: var(--warning); background: rgba(245, 158, 11, 0.09); }
.message-bubble .callout-lock { border-left-color: #e11d48; background: rgba(225, 29, 72, 0.07); }
.message-bubble .callout-ok   { border-left-color: var(--success); background: rgba(16, 185, 129, 0.09); }
.message-bubble .callout-tip  { border-left-color: var(--accent-light); background: rgba(59, 130, 246, 0.08); }
.message-bubble .callout-step { border-left-color: var(--accent); background: rgba(59, 130, 246, 0.05); }
body.dark-theme .message-bubble .callout { background: rgba(255,255,255,0.03); }
body.dark-theme .message-bubble .callout-warn { background: rgba(245, 158, 11, 0.12); }
body.dark-theme .message-bubble .callout-lock { background: rgba(225, 29, 72, 0.12); }
body.dark-theme .message-bubble .callout-ok   { background: rgba(16, 185, 129, 0.12); }

/* Generated images by AI */
.generated-image-container {
  margin: 0.8em 0;
  position: relative;
}

.generated-image {
  max-width: 100%;
  max-height: 512px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transition: opacity 0.3s ease;
  display: block;
}

.generated-image.partial {
  opacity: 0.7;
  filter: blur(1px);
  animation: image-pulse 1.5s infinite;
}

@keyframes image-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0.9; }
}

.image-generating-label {
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 600;
  margin-top: 6px;
  animation: image-pulse 1.5s infinite;
}

/* File extract collapsible */
.file-extract { margin-top: 10px; background: rgba(0,0,0,0.03); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.file-extract summary { padding: 8px 12px; font-size: 0.8rem; color: var(--text-muted); cursor: pointer; background: var(--bg-input); }
.file-extract-content { padding: 12px; font-size: 0.85rem; line-height: 1.5; max-height: 250px; overflow-y: auto; }

/* ===== TYPING INDICATOR ===== */
.typing-indicator {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 0.75rem 2rem;
}

.typing-indicator.active {
  display: flex;
}

.typing-indicator .dots {
  display: flex;
  gap: 4px;
}

.typing-indicator .dots span {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out both;
}

.typing-indicator .dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator .dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

.typing-text {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ===== TTS BUTTON ===== */
.btn-tts {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  vertical-align: middle;
}

.btn-tts:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.btn-tts.playing {
  animation: pulse-tts 1.5s infinite;
  color: var(--accent);
  border-color: var(--accent);
}

@keyframes pulse-tts {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ===== MESSAGE ACTIONS (Copy + TTS) ===== */
.message-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.btn-copy {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  vertical-align: middle;
}

.btn-copy:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.btn-copy.copied {
  background: var(--success);
  color: white;
  border-color: var(--success);
  animation: copy-pop 0.3s ease-out;
}

@keyframes copy-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ===== EDIT MESSAGE (User) ===== */
.user-actions {
  justify-content: flex-end;
}

.btn-edit {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  opacity: 0.5;
}

.user-message:hover .btn-edit {
  opacity: 1;
}

.btn-edit:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.message-bubble.editing {
  background: var(--bg-input) !important;
  border: 2px solid var(--accent) !important;
  color: var(--text-primary) !important;
  padding: 8px !important;
}

.edit-textarea {
  width: 100%;
  min-height: 40px;
  max-height: 200px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 0.92rem;
  line-height: 1.5;
  resize: none;
  padding: 6px 8px;
}

.btn-edit-confirm,
.btn-edit-cancel {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.btn-edit-confirm {
  background: var(--success);
  color: white;
  border-color: var(--success);
}

.btn-edit-confirm:hover {
  background: #059669;
  transform: scale(1.1);
}

.btn-edit-cancel {
  background: transparent;
  color: var(--text-muted);
}

.btn-edit-cancel:hover {
  background: var(--error);
  color: white;
  border-color: var(--error);
}

/* ===== CHAT INPUT ===== */
.chat-input-container {
  padding: 1rem 2rem 1.5rem;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
}

.input-wrapper {
  max-width: 900px;
  margin: 0 auto;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 8px 12px;
  transition: var(--transition);
}

.input-wrapper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
  background: var(--bg-primary);
}

.attachment-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--border-color);
}

.preview-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.attachment-preview img,
#previewImg {
  max-height: 40px;
  max-width: 40px;
  border-radius: 6px;
  object-fit: cover;
}

#previewIcon {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#previewName {
  font-size: 0.8rem;
  color: var(--text-secondary);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  margin-left: auto;
}

.btn-remove:hover {
  color: var(--error);
}

.input-actions-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.btn-icon {
  background: transparent;
  border: none;
  color: var(--text-muted);
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}

.btn-icon:hover {
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent);
}

.btn-mic.recording {
  color: var(--error);
  animation: pulse-rec 1.5s infinite;
}

@keyframes pulse-rec {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

#chatInput {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 0.95rem;
  line-height: 1.5;
  resize: none;
  padding: 10px 4px;
  max-height: 120px;
}

#chatInput::placeholder {
  color: var(--text-muted);
}

.input-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-send {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--accent), #1e3a8a);
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  box-shadow: 0 4px 12px var(--accent-glow);
  flex-shrink: 0;
}

.btn-send:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--accent-glow);
}

.btn-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Stop generation button */
.btn-send.btn-stop-mode {
  background: var(--error);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  animation: pulse-stop 1.5s infinite;
}

.btn-send.btn-stop-mode:hover {
  background: #dc2626;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.4);
  transform: translateY(-2px);
}

@keyframes pulse-stop {
  0%, 100% { box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); }
  50% { box-shadow: 0 4px 20px rgba(239, 68, 68, 0.5); }
}

/* ===== MODALS ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.modal-content,
.modal-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease-out;
  overflow: hidden;
}

.modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  font-size: 1.1rem;
  margin: 0;
}

.btn-close,
.btn-close-modal {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: color 0.2s;
}

.btn-close:hover,
.btn-close-modal:hover {
  color: var(--error);
}

.modal-body {
  padding: 1.5rem;
}

/* ===== ADMIN PANEL ===== */
.admin-card {
  max-width: 700px;
}

.admin-content {
  padding: 1rem 1.5rem;
}

.admin-list {
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  transition: var(--transition);
}

.admin-item:hover {
  border-color: var(--accent-light);
  box-shadow: 0 2px 8px var(--accent-glow);
}

/* ===== DEVICE SLOTS (Multi-dispositivo) ===== */
.device-slots-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
}

.device-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  transition: var(--transition);
}

.device-slot.slot-active {
  border-color: rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.04);
}

.device-slot.slot-empty {
  opacity: 0.55;
  border-style: dashed;
}

.slot-label {
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  min-width: 70px;
}

.slot-device-id {
  flex: 1;
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-slot.slot-active .slot-device-id {
  color: var(--success);
  font-weight: 600;
}

.device-slot .toggle-control {
  flex-shrink: 0;
}

.device-slot .toggle-control input:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.admin-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-code {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: 1.05rem;
  color: var(--accent-light);
}

.admin-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.admin-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-badge {
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.status-badge.active { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.status-badge.inactive { background: rgba(239, 68, 68, 0.15); color: var(--error); }

.toggle-control {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.toggle-control input {
  appearance: none;
  width: 36px;
  height: 20px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  position: relative;
  transition: 0.3s;
  cursor: pointer;
}

.toggle-control input::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-control input:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.toggle-control input:checked::before {
  left: 20px;
}

.btn-delete {
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--error);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: var(--transition);
}

.btn-delete:hover {
  background: var(--error);
  color: white;
}

.btn-create {
  background: var(--accent);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-create:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.admin-footer {
  padding: 14px 20px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: center;
}

.supabase-link {
  color: #3ecf8e;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.2s;
}

.supabase-link:hover {
  opacity: 0.7;
  text-decoration: underline;
}

/* ===== SUPPORT FORM ===== */
.support-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-input);
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 0.9rem;
  outline: none;
  transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-group textarea {
  resize: vertical;
}

.contact-card {
  text-align: center;
  padding: 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.contact-card.compact {
  padding: 0.75rem;
}

hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 1rem 0;
}

/* ===== HAMBURGER MENU (hidden on desktop) ===== */
.btn-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-primary);
  width: 38px;
  height: 38px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}

.btn-menu-toggle:hover {
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent);
}

/* Sidebar overlay (mobile only) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
  display: block;
  opacity: 1;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .container {
    width: 100%;
    height: 100vh;
    border-radius: 0;
  }

  /* Mobile sidebar: slide-in drawer */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 300px;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
  }

  .sidebar.sidebar-open {
    transform: translateX(0);
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.15);
  }

  /* Show hamburger on mobile */
  .btn-menu-toggle {
    display: flex;
  }

  .chat-messages {
    padding: 1rem;
  }

  .message {
    max-width: 95%;
  }

  .chat-input-container {
    padding: 0.75rem 1rem 1rem;
  }

  .chat-header {
    padding: 0.75rem 1rem;
  }

  .message-avatar {
    width: 30px;
    height: 30px;
  }

  /* Hide expiration badge text on very small screens */
  .chat-expiration-badge {
    font-size: 0.65rem;
    padding: 3px 6px;
  }

  /* Quota badge: compactar en móvil */
  .quota-badge {
    font-size: 0.65rem;
    padding: 3px 7px;
  }
}

@media (max-width: 480px) {
  .message-bubble {
    font-size: 0.88rem;
    padding: 12px 14px;
  }

  .auth-card {
    padding: 2rem 1.5rem;
  }

  .sidebar {
    width: 85vw;
  }

  .btn-support span {
    display: none;
  }
}

/* ===== PRINT STYLES (Export AI Diagnostic Report) ===== */
@media print {
  /* Margen 0 en la página: así el navegador no imprime su cabecera (fecha, título)
     ni su pie (URL, número de página). El margen real lo pone .printable-report. */
  @page {
    size: A4;
    margin: 0;
  }

  body {
    background: white;
    color: black;
    margin: 0;
    padding: 0;
  }

  /* Hide the entire app UI */
  .container, .sidebar-overlay, .auth-screen {
    display: none !important;
  }

  /* Show and style the printable report */
  .printable-report {
    display: block !important;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 16mm 14mm;
    box-sizing: border-box;
    font-family: var(--font-main);
    line-height: 1.5;
    color: #1a1a1a;
    font-size: 10.5pt; /* Menor tamaño de letra base para PDF */
  }

  .printable-report h1, .printable-report h2, .printable-report h3 {
    color: #000;
    margin-top: 1.2em;
    margin-bottom: 0.4em;
    line-height: 1.2;
  }
  
  .printable-report h1 { font-size: 16pt; border-bottom: 2px solid #ccc; padding-bottom: 6px; }
  .printable-report h2 { font-size: 14pt; }
  .printable-report h3 { font-size: 12pt; }
  
  .printable-report p { margin-bottom: 0.8em; }
  .printable-report ul, .printable-report ol { margin-bottom: 0.8em; padding-left: 20px; }
  .printable-report li { margin-bottom: 0.2em; }
  .printable-report strong { color: #000; }

  /* Cabecera del informe: datos a la izquierda, logo arriba a la derecha */
  .printable-report .report-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 2px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 18px;
  }

  .printable-report .report-header h2 { margin: 0 0 6px 0; }
  .printable-report .report-header p { margin: 0 0 2px 0; font-size: 10pt; }

  .printable-report .report-logo {
    max-height: 70px;
    max-width: 200px;
    object-fit: contain;
    flex-shrink: 0;
  }
}

/* ==========================================
   10. PLANTILLAS DE RESPUESTAS RÁPIDAS
   ========================================== */
.quick-templates {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  gap: 8px;
  padding: 4px 10px 10px 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.quick-templates::-webkit-scrollbar {
  display: none;
}

.btn-template {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  white-space: normal;
  text-align: left;
  max-width: 280px;
  line-height: 1.3;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.btn-template:hover {
  background: var(--bg-hover, rgba(37, 99, 235, 0.05));
  border-color: var(--accent);
  color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

body.dark-theme .btn-template {
  background: rgba(255, 255, 255, 0.03);
}

body.dark-theme .btn-template:hover {
  background: rgba(37, 99, 235, 0.1);
  color: var(--text-primary);
}

/* ==========================================
   11. ESTILOS DE TABLAS (MARKDOWN)
   ========================================== */
.table-container {
  width: 100%;
  overflow-x: auto;
  margin: 1rem 0;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  text-align: left;
}

th {
  background: var(--bg-secondary);
  color: var(--title-color);
  font-weight: 700;
  padding: 12px 16px;
  border-bottom: 2px solid var(--border-color);
}

td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

tr:last-child td {
  border-bottom: none;
}

tr:nth-child(even) {
  background: rgba(37, 99, 235, 0.03);
}

/* Zebra striping en modo oscuro */
body.dark-theme tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

tr:hover {
  background: var(--accent-glow) !important;
}

/* Ajustes específicos para tablas dentro de burbujas */
.assistant-message .message-bubble .table-container {
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.assistant-message .message-bubble table {
  background: transparent;
}

.assistant-message .message-bubble th {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #ffffff;
  border-bottom: none;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}

body.dark-theme .assistant-message .message-bubble th {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #ffffff;
}

/* ==========================================
   12. STREAMING & THINKING SECTION
   ========================================== */
.thinking-section {
  background: rgba(37, 99, 235, 0.04);
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
  max-height: 220px;
  overflow-y: auto;
  transition: var(--transition);
}

.thinking-header {
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent);
  margin-bottom: 6px;
  cursor: pointer;
  user-select: none;
}

.thinking-content {
  white-space: pre-wrap;
  line-height: 1.55;
  font-style: italic;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.thinking-details summary {
  list-style: none;
}

.thinking-details summary::before {
  content: '▶ ';
  font-size: 0.6rem;
  margin-right: 4px;
  transition: transform 0.2s;
  display: inline-block;
}

.thinking-details[open] summary::before {
  content: '▼ ';
}

body.dark-theme .thinking-section {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.15);
}

/* Streaming cursor (blinking bar) */
.streaming-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink-cursor 0.8s steps(2) infinite;
}

@keyframes blink-cursor {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.streaming-text:empty .streaming-cursor {
  margin-left: 0;
}

/* Drag & Drop visual feedback */
.input-wrapper.drag-over,
#chatMessages.drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  background: rgba(37, 99, 235, 0.05);
}

/* Multi-file preview chips */
.preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.preview-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.75rem;
  max-width: 200px;
  color: var(--text-primary);
}

.preview-chip img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.preview-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-chip .chip-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  overflow: visible;
}

.preview-chip button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}

.preview-chip button:hover {
  color: var(--error);
}

/* ── Imágenes verificadas (archivos / Google) ── */
/* Desplegable que agrupa las imágenes al final de la respuesta.
   Se presenta como un botón con relleno para que se vea a la primera. */
.images-details {
  margin-top: 16px;
}

.images-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.09);
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 600;
  user-select: none;
  transition: var(--transition);
}

.images-summary::-webkit-details-marker { display: none; }

.images-summary:hover {
  background: rgba(37, 99, 235, 0.16);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.18);
}

.images-summary::after {
  content: '▶';
  font-size: 0.66rem;
  margin-left: auto;
  display: inline-block;
  transition: transform 0.2s;
}

.images-details[open] .images-summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.images-details[open] .images-summary::after {
  transform: rotate(90deg);
}

/* Contador como pastilla, para que se lea el número de un vistazo */
.images-count {
  font-weight: 700;
  font-size: 0.8rem;
  padding: 1px 8px;
  border-radius: 20px;
  background: var(--accent);
  color: #fff;
}

.images-details[open] .verified-image-container {
  margin-top: 0;
  padding: 14px;
  border: 1.5px solid var(--accent);
  border-top: none;
  border-radius: 0 0 10px 10px;
  background: rgba(37, 99, 235, 0.04);
}

.verified-image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

/* En el PDF se imprimen todas: no hay nada que desplegar */
@media print {
  .images-details > .verified-image-container { display: flex !important; }
  .images-summary { display: none !important; }
}
.verified-image {
  margin: 0;
  max-width: 280px;
  border: 1px solid var(--border-color, #d0d0d0);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-secondary, #f7f7f8);
}
.verified-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.verified-image img.is-loading {
  min-height: 150px;
  background: linear-gradient(100deg, var(--bg-secondary, #f7f7f8) 30%, rgba(148, 163, 184, 0.22) 50%, var(--bg-secondary, #f7f7f8) 70%);
  background-size: 220% 100%;
  animation: verified-image-loading 1.3s ease-in-out infinite;
}
@keyframes verified-image-loading {
  to { background-position-x: -220%; }
}
.verified-image figcaption {
  font-size: 12px;
  padding: 6px 10px;
  color: var(--text-secondary, #555);
  line-height: 1.3;
}

/* Aviso "Buscando imágenes…" mientras el backend resuelve la búsqueda */
.image-searching {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-secondary, #555);
  font-style: italic;
}
.image-searching-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #2563eb);
  animation: image-searching-pulse 1.1s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes image-searching-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .image-searching-dot, .verified-image img.is-loading { animation: none; opacity: 0.8; }
}

/* Imagen que no se pudo cargar: se muestra el motivo en vez de ocultarla */
.verified-image-error {
  border-style: dashed;
  opacity: 0.75;
}
.verified-image-error figcaption {
  font-style: italic;
}

/* Lightbox: estilos inline en chat.js (openImageLightbox) */
.verified-image img { cursor: zoom-in; }


/* ==========================================
   MODAL DE INFORME PARA EL CLIENTE
   ========================================== */
.cr-detail-options {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cr-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 500;
  color: var(--text-secondary);
}

.cr-radio input { accent-color: var(--accent); cursor: pointer; }

.cr-logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cr-logo-preview {
  max-height: 42px;
  max-width: 120px;
  object-fit: contain;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px;
  background: #fff;
}

.cr-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* ==========================================
   VISOR DE DIAGNÓSTICO GUIADO (pasos)
   ========================================== */
.guided-steps {
  margin: 16px 0;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-secondary);
  overflow: hidden;
}

.gs-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 16px 0 16px;
  font-size: 0.85rem;
}

.gs-title {
  font-weight: 600;
  color: var(--text-primary);
}

.gs-counter {
  color: var(--text-secondary);
}

.gs-counter::before {
  content: "·";
  margin-right: 6px;
}

.gs-progress {
  display: flex;
  align-items: center;
  padding: 10px 16px 12px 16px;
}

.gs-dot {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  background: var(--bg-primary);
  cursor: pointer;
  transition: var(--transition);
}

.gs-dot.done {
  border-color: var(--accent);
  background: var(--accent);
}

.gs-dot.current {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}

.gs-line {
  flex: 1;
  height: 3px;
  min-width: 12px;
  background: var(--border-color);
  transition: var(--transition);
}

.gs-line.done {
  background: var(--accent);
}

.gs-body {
  padding: 4px 16px 0 16px;
  border-top: 1px solid var(--border-color);
}

.gs-step-title {
  margin: 12px 0 6px 0;
  font-size: 0.98rem;
  color: var(--text-primary);
}

.gs-step-body > *:first-child { margin-top: 12px; }
.gs-step-body > *:last-child { margin-bottom: 12px; }

.gs-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px 14px 16px;
}

.gs-btn {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.gs-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.gs-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.gs-next {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.gs-next:hover:not(:disabled) {
  color: #fff;
  filter: brightness(1.08);
}

/* En el PDF no tiene sentido un visor por pasos: se imprimen todos */
@media print {
  .guided-steps .gs-step { display: block !important; }
  .guided-steps .gs-nav,
  .guided-steps .gs-progress { display: none !important; }
}

/* ==========================================
   TARJETA DE PREPARACIÓN (sección "3. Aplicación con VCDS")
   Material de consulta: se ve entero, a diferencia del visor por pasos.
   ========================================== */
.prep-card {
  margin: 16px 0;
  padding: 12px 16px 4px 16px;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.04);
}

.prep-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.prep-body > *:last-child { margin-bottom: 12px; }

/* Listas de la tarjeta como lista de comprobación */
.prep-body ul {
  list-style: none;
  padding-left: 4px;
}

.prep-body ul ul {
  padding-left: 22px;
}

.prep-body ul > li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: var(--transition);
}

.prep-body ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-primary);
  transition: var(--transition);
}

.prep-body ul > li:hover::before {
  border-color: var(--accent);
}

.prep-body ul > li.checked::before {
  border-color: var(--accent);
  background: var(--accent);
}

.prep-body ul > li.checked::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 0.42em;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.prep-body ul > li.checked {
  color: var(--text-secondary);
  text-decoration: line-through;
  text-decoration-color: var(--border-color);
}

/* En el PDF: sin fondo de color ni casillas, solo el bloque limpio */
@media print {
  .prep-card {
    background: none;
    border-left-color: #999;
  }
  .prep-body ul > li { cursor: default; }
}

/* ==========================================
   JERARQUÍA DE LA RESPUESTA
   La sección 1 es la respuesta (tarjeta destacada); las de apoyo se pliegan.
   ========================================== */
.result-card {
  margin: 4px 0 18px 0;
  padding: 14px 18px;
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.06);
}

.result-title {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--accent);
  margin-bottom: 10px;
}

.result-body {
  font-size: 1rem;
  line-height: 1.65;
}

.result-body > *:first-child { margin-top: 0; }
.result-body > *:last-child { margin-bottom: 0; }

/* --- Secciones de apoyo plegadas --- */
.section-details {
  margin: 10px 0;
}

.section-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: var(--bg-secondary);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text-primary);
  user-select: none;
  transition: var(--transition);
}

.section-summary::-webkit-details-marker { display: none; }

.section-summary:hover {
  background: rgba(37, 99, 235, 0.08);
  border-color: var(--accent);
}

.section-summary::after {
  content: '▶';
  font-size: 0.66rem;
  margin-left: auto;
  display: inline-block;
  color: var(--accent);
  transition: transform 0.2s;
}

.section-details[open] .section-summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
  background: rgba(37, 99, 235, 0.08);
}

.section-details[open] .section-summary::after {
  transform: rotate(90deg);
}

.section-body {
  padding: 4px 16px 14px 16px;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent);
  border-top: none;
  border-radius: 0 0 10px 10px;
}

.section-body > *:first-child { margin-top: 0; }
.section-body > *:last-child { margin-bottom: 0; }

/* En el PDF se imprime todo abierto */
@media print {
  .section-details > .section-body { display: block !important; border: none; padding: 0; }
  .section-summary {
    background: none;
    border: none;
    border-left: 3px solid #999;
    padding: 6px 12px;
  }
  .section-summary::after { display: none; }
  .result-card { background: none; border-left-color: #999; }
  .result-title { color: #000; }
}

/* ==========================================
   CASOS DE REPARACIÓN RELACIONADOS (smartcases)
   Sección informativa al final de la respuesta. Sigue el patrón visual del
   bloque de razonamiento: plegada, discreta, sin robar atención a la
   respuesta del asistente.
   ========================================== */
.smartcase-section {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-secondary);
  font-size: 0.86rem;
}

.smartcase-header {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-secondary);
  list-style: none;
  user-select: none;
}

.smartcase-header::-webkit-details-marker { display: none; }

.smartcase-header::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s ease;
}

.smartcase-section[open] > .smartcase-header::before { transform: rotate(90deg); }

/* — Cada caso — */
.smartcase-item {
  margin-top: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.smartcase-item + .smartcase-item { margin-top: 6px; }

.smartcase-item > summary {
  cursor: pointer;
  list-style: none;
  padding: 9px 11px;
  border-radius: 10px;
  line-height: 1.45;
  /* El outline por defecto dibujaba un rectángulo azul sobre el caso abierto.
     Se sustituye por un realce propio, y solo para navegación con teclado. */
  outline: none;
}

.smartcase-item > summary::-webkit-details-marker { display: none; }
.smartcase-item > summary:hover { background: rgba(37, 99, 235, 0.05); }
.smartcase-item > summary:focus-visible { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35); }

.smartcase-item[open] {
  background: rgba(37, 99, 235, 0.04);
  border-color: var(--border-color);
}

.smartcase-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
}

.smartcase-brand {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.10);
  color: #2563eb;
}

.smartcase-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--border-color);
  color: var(--text-secondary);
}

.smartcase-title {
  display: block;
  font-weight: 500;
  line-height: 1.45;
}

/* — Contenido del caso — */
.smartcase-body {
  margin: 0 11px 11px;
  padding-left: 12px;
  border-left: 2px solid rgba(37, 99, 235, 0.25);
  color: var(--text-secondary);
  line-height: 1.6;
}

.smartcase-body p { margin: 0 0 9px; }

.smartcase-sec {
  margin: 14px 0 5px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #2563eb;
  opacity: 0.85;
}

.smartcase-sec:first-child { margin-top: 0; }

.smartcase-steps {
  margin: 0 0 9px;
  padding-left: 16px;
  list-style: none;
}

.smartcase-steps li {
  position: relative;
  margin-bottom: 4px;
}

.smartcase-steps li::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.45);
}

body.dark-theme .smartcase-brand {
  background: rgba(37, 99, 235, 0.18);
  color: #93b4fd;
}

body.dark-theme .smartcase-sec { color: #93b4fd; }
body.dark-theme .smartcase-item[open] { background: rgba(37, 99, 235, 0.07); }
body.dark-theme .smartcase-item > summary:hover { background: rgba(37, 99, 235, 0.09); }

/* ==========================================
   VISOR DE INFORMES EN PANTALLA
   El informe se lee aquí; ya no se lanza el diálogo de impresión, que era
   por donde el navegador ofrecía "Guardar como PDF".
   ========================================== */
.report-modal-content {
  max-width: 820px;
  width: 94%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.report-modal-content .modal-body {
  overflow-y: auto;
  padding: 0;
}

.report-viewer {
  padding: 20px 24px 26px;
  line-height: 1.6;
  color: var(--text-primary);
}

.report-viewer .report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--border-color);
}

.report-viewer .report-header h2 { margin: 0 0 8px; font-size: 1.15rem; }
.report-viewer .report-header p { margin: 2px 0; font-size: 0.85rem; color: var(--text-secondary); }
.report-viewer .report-logo { max-height: 56px; max-width: 160px; object-fit: contain; }

.report-viewer h1, .report-viewer h2, .report-viewer h3 {
  margin: 20px 0 8px;
  line-height: 1.3;
}

.report-viewer h1 { font-size: 1.2rem; }
.report-viewer h2 { font-size: 1.05rem; }
.report-viewer h3 { font-size: 0.95rem; }
.report-viewer p { margin: 0 0 10px; }
.report-viewer ul, .report-viewer ol { margin: 0 0 12px; padding-left: 22px; }
.report-viewer li { margin-bottom: 5px; }
.report-viewer table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 0.88rem; }
.report-viewer th, .report-viewer td { border: 1px solid var(--border-color); padding: 7px 9px; text-align: left; }
.report-viewer th { background: var(--bg-secondary); font-weight: 600; }

/* El informe es material de consulta en pantalla: no debe salir por la
   impresora ni por "Guardar como PDF" del navegador. */
@media print {
  #reportModal { display: none !important; }
}