/* Correo Variavista IA - SOLO estilos de la barra de IA (no toca el tema de Elastic).
 * Botoncitos sutiles con icono + texto, neutros (se adaptan a claro y oscuro). */

.vv-ai-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 4px 0;
  margin: 2px 0 4px 0;
  background: transparent;
  border: 0;
}
.vv-ai-bar--reading { margin: 6px 8px; }

.vv-ai-spark { display: inline-flex; color: #38A1DB; margin-right: 2px; }
.vv-ai-spark svg { width: 16px; height: 16px; }

.vv-ai-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 8px;
  background: transparent; border: 1px solid transparent;
  color: inherit; opacity: .72; cursor: pointer;
  font-size: 12.5px; font-weight: 500; line-height: 1;
  transition: opacity .12s ease, color .12s ease, background .12s ease, border-color .12s ease;
}
.vv-ai-btn svg { width: 16px; height: 16px; flex: none; }
.vv-ai-btn:hover { opacity: 1; color: #38A1DB; background: rgba(56, 161, 219, .12); border-color: rgba(56, 161, 219, .22); }

/* Grupo derecho: traducir (idioma + confirmar) + tono */
.vv-ai-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.vv-ai-trgroup { display: inline-flex; align-items: center; gap: 6px; }
.vv-ai-tonewrap { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; opacity: .6; white-space: nowrap; }

.vv-ai-toneselect, .vv-ai-lang, .vv-ai-tplselect {
  background: transparent; color: inherit; opacity: .9;
  border: 1px solid rgba(128, 128, 128, .3); border-radius: 7px;
  font-size: 12px; padding: 4px 6px; outline: none;
}
.vv-ai-tplselect:hover { border-color: rgba(56, 161, 219, .5); color: #38A1DB; }
.vv-ai-toneselect option, .vv-ai-lang option, .vv-ai-tplselect option { background: #1a1320; color: #e6e0f2; }

/* Panel inline (redactar desde una idea) */
.vv-ai-panel { display: flex; gap: 6px; margin: 0 0 6px 0; align-items: center; }
.vv-ai-input {
  flex: 1; background: rgba(128, 128, 128, .08);
  border: 1px solid rgba(128, 128, 128, .3); border-radius: 8px;
  padding: 8px 11px; color: inherit; font-size: 13px; outline: none;
}
.vv-ai-input:focus { border-color: #38A1DB; }
.vv-ai-go {
  background: transparent; color: #38A1DB;
  border: 1px solid #38A1DB; border-radius: 8px;
  padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .12s ease;
}
.vv-ai-go--sm { padding: 4px 11px; font-size: 12px; }
.vv-ai-go:hover { background: rgba(56, 161, 219, .12); }

/* Indicador visible de "generando con IA" */
.vv-ai-bar.vv-ai-busy .vv-ai-btn { opacity: .4; pointer-events: none; }
.vv-ai-loading {
  align-items: center; gap: 10px;
  padding: 9px 14px; margin: 0 0 6px 0;
  border-radius: 9px;
  background: linear-gradient(90deg, rgba(56, 161, 219, .16), rgba(180, 121, 249, .16));
  border: 1px solid rgba(56, 161, 219, .32);
  color: #38A1DB; font-weight: 600; font-size: 13px;
  position: relative; overflow: hidden;
}
.vv-ai-loading::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent);
  transform: translateX(-100%);
  animation: vv-shimmer 1.3s linear infinite;
}
.vv-ai-spin {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid rgba(56, 161, 219, .3); border-top-color: #38A1DB;
  animation: vv-spin .8s linear infinite;
}
@keyframes vv-spin { to { transform: rotate(360deg); } }
@keyframes vv-shimmer { to { transform: translateX(100%); } }

/* Panel de resultado en lectura (resumen / traduccion) */
.vv-ai-result {
  margin: 6px 8px; border: 1px solid rgba(128, 128, 128, .25);
  border-radius: 10px; background: rgba(128, 128, 128, .05); overflow: hidden;
}
.vv-ai-result-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid rgba(128, 128, 128, .2);
  opacity: .7; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
}
.vv-ai-result-close { background: transparent; border: 0; color: inherit; opacity: .6; cursor: pointer; font-size: 18px; line-height: 1; }
.vv-ai-result-close:hover { opacity: 1; }
.vv-ai-result-body { padding: 12px; white-space: pre-wrap; line-height: 1.5; font-size: 13px; }

/* === Acerca de (rebrand Variavista) === */
.vv-about .sysname { margin: .2em 0 .1em; }
.vv-about-tagline { opacity: .8; margin: 0 0 1em; }
.vv-about a { color: #38A1DB; }
.vv-about-credit {
  margin: 1.4em 0; padding: 12px 14px; border-radius: 10px;
  background: rgba(128, 128, 128, .06); border: 1px solid rgba(128, 128, 128, .16);
  font-size: .82rem; opacity: .75;
}
.vv-about-credit p { margin: .35em 0; }

/* === Modo oscuro hibrido del cuerpo del correo (clases puestas por reading.js) ===
   El HTML del correo va inline en .message-htmlpart; Elastic lo fuerza a blanco (dark.less).
   Aqui lo sobreescribimos segun el tipo de correo. */

/* Correo simple (sin diseno propio): integrado en el fondo oscuro */
html.dark-mode .message-htmlpart.vv-mail-simple {
  background-color: #1a1320 !important;
  color: #e6e0f2 !important;
}
html.dark-mode .message-htmlpart.vv-mail-simple p,
html.dark-mode .message-htmlpart.vv-mail-simple div,
html.dark-mode .message-htmlpart.vv-mail-simple span,
html.dark-mode .message-htmlpart.vv-mail-simple td,
html.dark-mode .message-htmlpart.vv-mail-simple th,
html.dark-mode .message-htmlpart.vv-mail-simple li,
html.dark-mode .message-htmlpart.vv-mail-simple h1,
html.dark-mode .message-htmlpart.vv-mail-simple h2,
html.dark-mode .message-htmlpart.vv-mail-simple h3,
html.dark-mode .message-htmlpart.vv-mail-simple h4,
html.dark-mode .message-htmlpart.vv-mail-simple h5,
html.dark-mode .message-htmlpart.vv-mail-simple strong,
html.dark-mode .message-htmlpart.vv-mail-simple b,
html.dark-mode .message-htmlpart.vv-mail-simple em,
html.dark-mode .message-htmlpart.vv-mail-simple small {
  color: #e6e0f2 !important;
  background-color: transparent !important;
}
html.dark-mode .message-htmlpart.vv-mail-simple a { color: #38A1DB !important; }
html.dark-mode .message-htmlpart.vv-mail-simple blockquote { border-color: #6e8bff !important; color: #c9c0e0 !important; }
html.dark-mode .message-htmlpart.vv-mail-simple hr { border-color: rgba(255, 255, 255, .15) !important; }

/* Newsletter / HTML con diseno propio: se mantiene en tarjeta clara, enmarcada sobre el fondo oscuro */
html.dark-mode .message-htmlpart.vv-mail-card {
  border-radius: 12px;
  box-shadow: 0 4px 22px rgba(0, 0, 0, .38);
  overflow: hidden;
}

/* === Pantalla Configuracion -> IA === */
.vv-settings { padding: 26px 30px 40px; max-width: 1040px; }
.vv-settings-head { margin-bottom: 4px; }
.vv-settings-title { margin: 0 0 .3em; font-size: 1.5rem; font-weight: 600; }
.vv-settings-hint { opacity: .62; margin: 0; max-width: 840px; line-height: 1.5; font-size: .9rem; }
.vv-settings-toolbar {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px;
  margin: 16px 0 12px; padding: 14px 16px;
  background: rgba(128, 128, 128, .06); border: 1px solid rgba(128, 128, 128, .18);
  border-radius: 12px;
}
.vv-settings-field { display: inline-flex; flex-direction: column; gap: 5px; }
.vv-settings-field label { font-size: 11px; opacity: .65; text-transform: uppercase; letter-spacing: .4px; }
.vv-settings-field .form-control { min-width: 220px; }
.vv-settings-tone { margin-left: auto; }
.vv-settings-toolbar .vv-ai-btn {
  align-self: flex-end; padding: 8px 14px; opacity: 1;
  border: 1px solid rgba(56, 161, 219, .45); color: #38A1DB;
}
#vv-context.form-control {
  width: 100%; min-height: 52vh;
  line-height: 1.6; font-family: inherit; border-radius: 12px; padding: 14px 16px; resize: vertical;
}
#vv-context.form-control:focus { border-color: #38A1DB; box-shadow: 0 0 0 3px rgba(56, 161, 219, .15); }
.vv-settings .vv-ai-loading { margin: 0 0 12px; }
.vv-settings-actions { margin-top: 18px; }

/* === Seccion Tareas === */
/* Icono del menu lateral */
#taskmenu a.tasks::before,
#layout-menu #taskmenu a.tasks::before {
  content: "\f0ae";
  font-family: 'Icons';
  font-weight: 900;
}
body.task-tareas #taskmenu a.tasks { color: #38A1DB; }

.vv-tasks { padding: 22px 30px 40px; max-width: 700px; }
.vv-tasks .vv-settings-title { font-size: 1.3rem; }
.vv-tasks .vv-settings-hint { margin-bottom: 4px; }

/* Alta: una sola fila limpia, sin tarjeta */
.vv-task-add {
  display: flex; gap: 8px; align-items: center;
  margin: 14px 0 4px; padding: 0; background: transparent; border: 0;
}
.vv-task-add #vv-task-title {
  flex: 1; min-width: 0;
  background: rgba(128, 128, 128, .06); border: 1px solid rgba(128, 128, 128, .16);
  border-radius: 10px; padding: 11px 14px;
}
.vv-task-add #vv-task-title:focus {
  border-color: rgba(56, 161, 219, .45); background: rgba(56, 161, 219, .05); box-shadow: none;
}
.vv-task-add .vv-task-due-in {
  flex: 0 0 auto; width: 142px; color: inherit;
  background: rgba(128, 128, 128, .06); border: 1px solid rgba(128, 128, 128, .16);
  border-radius: 10px; padding: 11px 10px;
}
.vv-task-add .vv-task-due-in:focus { border-color: rgba(56, 161, 219, .45); box-shadow: none; }
/* El selector de fecha sigue el tema: en oscuro -> icono claro + calendario oscuro; en claro -> al reves.
   accent-color tine el dia seleccionado y las flechas de azul Variavista (el fondo del popup nativo
   lo pinta el navegador y NO es recoloreable por CSS). */
.vv-task-add .vv-task-due-in,
.vv-task-edit .vv-edit-due { accent-color: #38A1DB; }
html.dark-mode .vv-task-add .vv-task-due-in,
html.dark-mode .vv-task-edit .vv-edit-due { color-scheme: dark; }
.vv-task-add #vv-task-add {
  flex: 0 0 auto; border: 0; border-radius: 10px; padding: 11px 18px;
  background: #38A1DB; color: #fff; font-weight: 600; cursor: pointer;
}
.vv-task-add #vv-task-add:hover { background: #2f8fc4; }

.vv-task-empty { opacity: .5; padding: 18px 4px; font-size: .9rem; }

/* Lista: filas con divisor fino, sin tarjetas */
.vv-task-list { list-style: none; margin: 10px 0 0; padding: 0; }
.vv-task {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 6px; margin: 0;
  background: transparent; border: 0; border-bottom: 1px solid rgba(128, 128, 128, .12);
  border-radius: 8px; transition: background .12s ease, opacity .12s ease;
}
.vv-task:hover { background: rgba(56, 161, 219, .05); }
.vv-task.is-done { opacity: .5; }

/* Checkbox custom */
.vv-task-check { position: relative; flex: none; cursor: pointer; line-height: 1; padding-top: 1px; }
.vv-task-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.vv-task-box {
  display: inline-block; width: 18px; height: 18px; border-radius: 6px;
  border: 2px solid rgba(128, 128, 128, .45); transition: all .15s ease;
}
.vv-task-check input:checked + .vv-task-box { background: #38A1DB; border-color: #38A1DB; }
.vv-task-check input:checked + .vv-task-box::after {
  content: ""; position: absolute; left: 6px; top: 3px;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.vv-task-main { flex: 1; min-width: 0; }
.vv-task-title { font-size: .95rem; line-height: 1.4; word-break: break-word; }
.vv-task.is-done .vv-task-title { text-decoration: line-through; }
.vv-task.is-overdue .vv-task-title { color: #ff7a7a; }
.vv-task-notes { font-size: .8rem; opacity: .6; margin-top: 2px; white-space: pre-wrap; word-break: break-word; }

.vv-task-duebadge { flex: none; align-self: center; font-size: .74rem; opacity: .65; white-space: nowrap; }
.vv-task.is-overdue .vv-task-duebadge { color: #ff7a7a; opacity: 1; }

.vv-task-actions { flex: none; display: inline-flex; gap: 0; align-self: center; opacity: 0; transition: opacity .12s ease; }
.vv-task:hover .vv-task-actions, .vv-task:focus-within .vv-task-actions { opacity: 1; }
.vv-task-actions button {
  background: transparent; border: 0; color: inherit; opacity: .55; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 3px 6px; border-radius: 6px;
}
.vv-task-actions button:hover { opacity: 1; background: rgba(128, 128, 128, .12); }
.vv-task-del:hover { color: #ff7a7a; }

/* Edicion inline */
.vv-task-edit { flex-basis: 100%; width: 100%; margin-top: 9px; display: flex; flex-direction: column; gap: 7px; }
.vv-task-edit .vv-task-edit-row { display: flex; gap: 8px; align-items: center; }
.vv-task-edit .vv-edit-due { min-width: 142px; flex: 0 0 auto; }
.vv-task-edit .vv-edit-save { margin-left: auto; }