/* ════════════════════════════════════════════════════════════════════════
   FLORE · Asistente IA de Flomay — widget flotante global
   Presente en todas las páginas (solo administradores).
   ════════════════════════════════════════════════════════════════════════ */

:root {
    --flora-grad: linear-gradient(135deg, #2563eb 0%, #0d9488 100%);
    --flora-azul: #2563eb;
    --flora-verde: #0d9488;
}

/* ── La F de FLORE: una efe elegante en cursiva, sin iconos ── */
.flore-f {
    display: inline-block;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    transform: translateY(-1px);
}
/* En la burbuja y la cabecera va en blanco sobre el degradado */
.flora-fab .flore-f  { font-size: 30px; }
.flora-logo .flore-f { font-size: 22px; }
/* En la bienvenida, la propia F lleva el degradado */
.flore-f-grande {
    font-size: 46px;
    background: var(--flora-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* En tarjetas y etiquetas fuera del widget */
.flore-f-tarjeta {
    font-size: 1.6em;
    background: var(--flora-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.flore-f-mini {
    font-size: 1.05em;
    margin-right: 4px;
    background: var(--flora-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── Burbuja flotante ── */
.flora-fab {
    position: fixed;
    right: 18px;
    bottom: 78px;               /* por encima de la barra de navegación */
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    background: var(--flora-grad);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    z-index: 1300;
    box-shadow: 0 6px 20px rgba(37, 99, 235, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s, box-shadow .15s;
}
.flora-fab:hover { transform: scale(1.08); box-shadow: 0 8px 26px rgba(13, 148, 136, .5); }
.flora-fab:active { transform: scale(.94); }
.flora-fab .flora-fab-cerrar { display: none; }
.flora-fab.abierta .flora-fab-icono { display: none; }
.flora-fab.abierta .flora-fab-cerrar { display: block; }

/* ── Panel ── */
.flora-panel {
    position: fixed;
    right: 18px;
    bottom: 146px;
    width: 420px;
    max-width: calc(100vw - 24px);
    height: 600px;
    max-height: calc(100vh - 170px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .30);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 1299;
    font-family: 'Segoe UI', system-ui, sans-serif;
}
.flora-panel.abierta { display: flex; animation: floraEntra .22s ease-out; }
@keyframes floraEntra { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Pantalla completa */
.flora-panel.completa {
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
}
.flora-panel.completa .flora-mensajes { max-width: 860px; width: 100%; margin: 0 auto; }
.flora-panel.completa .flora-entrada { max-width: 860px; width: 100%; margin: 0 auto; }

/* ── Cabecera ── */
.flora-cabecera {
    background: var(--flora-grad);
    color: #fff;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.flora-logo {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
}
.flora-titulo { flex: 1; line-height: 1.2; }
.flora-titulo b { font-size: 16px; letter-spacing: .04em; }
.flora-titulo small { display: block; font-size: 11px; opacity: .85; }
.flora-cabecera button {
    border: none; background: rgba(255, 255, 255, .15); color: #fff;
    width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
    font-size: 14px; transition: background .15s;
}
.flora-cabecera button:hover { background: rgba(255, 255, 255, .3); }

/* ── Accesos rápidos: Pedido IA · Presupuesto IA · Reparto automatizado ── */
.flora-accesos {
    display: flex; gap: 6px; padding: 7px 10px; flex-wrap: wrap;
    background: #faf5ff; border-bottom: 1px solid #ede9fe;
}
.flora-accesos button {
    border: 1px solid #ddd6fe; border-radius: 999px; cursor: pointer;
    background: #fff; color: #6d28d9; font-size: 11.5px; font-weight: 700;
    padding: 5px 11px; font-family: inherit; transition: background .15s, color .15s;
    display: inline-flex; align-items: center; gap: 5px;
}
.flora-accesos button:hover { background: linear-gradient(135deg, #6d28d9, #2563eb); color: #fff; border-color: transparent; }

/* Botón "Ver en gestión de rutas/entradas" bajo la respuesta de FLORE */
.flora-ir-pagina {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 8px 6px 0 0; padding: 8px 14px; border-radius: 10px;
    background: linear-gradient(135deg, #15803d, #22c55e); color: #fff !important;
    font-size: 12.5px; font-weight: 700; text-decoration: none;
    box-shadow: 0 2px 8px rgba(34, 197, 94, .3);
}
.flora-ir-pagina:hover { filter: brightness(1.08); }

/* ── Buscador del historial de conversaciones ── */
.flora-conv-buscar {
    width: 100%; box-sizing: border-box; margin: 4px 0 10px;
    padding: 8px 11px; border: 1.5px solid #e2e8f0; border-radius: 9px;
    font-size: 13px; font-family: inherit; color: #1e293b; outline: none;
    transition: border-color .15s;
}
.flora-conv-buscar:focus { border-color: #6d28d9; }

/* ── GUÍA de FLORE ── */
.flora-guia-botones { display: flex; gap: 6px; align-items: center; }
.flora-guia-pdf {
    border: none; background: rgba(255, 255, 255, .18); color: #fff;
    height: 30px; padding: 0 11px; border-radius: 8px; cursor: pointer;
    font-size: 12px; font-weight: 700; font-family: inherit;
    display: inline-flex; align-items: center; gap: 5px;
}
.flora-guia-pdf:hover { background: rgba(255, 255, 255, .32); }
.flora-guia-pdf:disabled { opacity: .6; cursor: wait; }
/* El botón lleva texto (los demás son solo icono): ancho a su aire */
#floraGuia {
    width: auto; padding: 0 10px;
    display: flex; align-items: center; gap: 5px;
    font-weight: 800; font-size: 11px; letter-spacing: .5px;
}
.flora-guia {
    position: absolute; inset: 0; z-index: 60;
    background: #fff; display: flex; flex-direction: column;
    border-radius: inherit; overflow: hidden;
    animation: pr-aparecer .18s ease;
}
.flora-guia-cab {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; color: #fff; font-size: 14.5px; flex-shrink: 0;
    background: linear-gradient(135deg, #6d28d9 0%, #2563eb 60%, #0ea5e9 100%);
}
.flora-guia-cerrar {
    border: none; background: rgba(255, 255, 255, .18); color: #fff;
    width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.flora-guia-cerrar:hover { background: rgba(255, 255, 255, .32); }
.flora-guia-cuerpo { flex: 1; overflow: auto; padding: 14px 16px 20px; }
.flora-guia-intro { font-size: 13px; color: #475569; margin: 0 0 14px; line-height: 1.55; }
.flora-guia-sec { margin-bottom: 15px; }
.flora-guia-sec h4 { margin: 0 0 4px; font-size: 13.5px; color: #1e3a5f; }
.flora-guia-sec p { margin: 0 0 7px; font-size: 12.5px; color: #475569; line-height: 1.55; }
.flora-guia-ejs { display: flex; flex-wrap: wrap; gap: 6px; }
.flora-guia-ej {
    border: 1px solid #e9d5ff; background: #faf5ff; color: #6d28d9;
    border-radius: 999px; padding: 4px 11px; font-size: 11.5px; cursor: pointer;
    text-align: left; font-family: inherit; transition: background .15s;
}
.flora-guia-ej:hover { background: #f3e8ff; }

/* ── Selector de modo (Consultas / Generación de archivos) ── */
.flora-modos {
    display: flex; gap: 6px; padding: 8px 10px;
    background: #f1f5f9; border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.flora-modos button {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid transparent; background: transparent; color: #64748b;
    border-radius: 8px; padding: 7px 8px; font-size: 12.5px; font-weight: 600;
    cursor: pointer; transition: background .15s, color .15s, box-shadow .15s;
}
.flora-modos button:hover { background: #e2e8f0; color: #334155; }
.flora-modos button.activo {
    background: #fff; color: var(--flora-azul); border-color: #dbe3ee;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.flora-modos button i { font-size: 12px; }
/* En generación, la barra avisa de que se están creando documentos de verdad */
.flora-modo-generacion .flora-modos { background: #fff7ed; border-bottom-color: #fed7aa; }
.flora-modo-generacion .flora-modos button.activo { color: #c2410c; border-color: #fed7aa; }

/* ── Atajos de frases (siempre a mano, no solo en la bienvenida) ── */
.flora-atajos {
    display: flex; gap: 6px; padding: 8px 10px 0;
    overflow-x: auto; flex-shrink: 0;
    scrollbar-width: thin;
}
.flora-atajos button {
    border: 1px solid #dbe3ee; background: #fff; color: var(--flora-azul);
    border-radius: 999px; padding: 6px 11px; font-size: 12px; cursor: pointer;
    white-space: nowrap; transition: background .15s;
}
.flora-atajos button:hover { background: #eff6ff; }
.flora-modo-generacion .flora-atajos button { border-color: #fed7aa; color: #c2410c; }
.flora-modo-generacion .flora-atajos button:hover { background: #fff7ed; }

/* Marca en la conversación de que se ha cambiado de modo */
.flora-cambio-modo {
    align-self: center; margin: 4px auto; padding: 3px 10px;
    background: #f1f5f9; color: #64748b; border-radius: 999px;
    font-size: 11px; font-weight: 600; letter-spacing: .02em;
}

/* ── Mensajes ── */
.flora-mensajes {
    flex: 1;
    overflow-y: auto;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f6f8fb;
}

.flora-bienvenida { text-align: center; color: #64748b; margin: auto; padding: 14px; }
.flora-bienvenida .flora-flor { font-size: 38px; background: var(--flora-grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; }
.flora-bienvenida h3 { color: #1e293b; margin-bottom: 4px; }
.flora-bienvenida p { font-size: 13px; margin-bottom: 14px; }
.flora-ejemplos { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.flora-ejemplos button {
    border: 1px solid #dbe3ee; background: #fff; color: var(--flora-azul);
    border-radius: 999px; padding: 7px 12px; font-size: 12px; cursor: pointer;
    transition: background .15s;
}
.flora-ejemplos button:hover { background: #eff6ff; }

.flora-msj { display: flex; }
.flora-msj--yo { justify-content: flex-end; }
.flora-burbuja {
    max-width: 88%;
    border-radius: 14px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.55;
    word-break: break-word;
}
.flora-msj--yo .flora-burbuja {
    background: var(--flora-grad);
    color: #fff;
    border-bottom-right-radius: 4px;
    white-space: pre-wrap;
}
.flora-msj--flora .flora-burbuja {
    background: #fff;
    color: #1e293b;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
    border-bottom-left-radius: 4px;
}
.flora-burbuja p { margin: 0 0 8px; }
.flora-burbuja p:last-child { margin-bottom: 0; }
.flora-burbuja ul, .flora-burbuja ol { margin: 4px 0 8px 18px; }
.flora-burbuja code { background: #f1f5f9; padding: 1px 6px; border-radius: 4px; font-size: 12.5px; }
.flora-burbuja a { color: var(--flora-azul); font-weight: 600; }
.flora-burbuja .tabla-scroll { overflow-x: auto; margin: 6px 0 10px; }
.flora-burbuja table { border-collapse: collapse; font-size: 12.5px; min-width: 60%; }
.flora-burbuja th {
    text-align: left; padding: 5px 9px; background: #e0f2f1; color: #0f766e;
    border-bottom: 1px solid #cbd5e1; white-space: nowrap;
}
.flora-burbuja td { padding: 5px 9px; border-bottom: 1px solid #f1f5f9; white-space: nowrap; }

/* Archivos generados */
.flora-archivo {
    display: inline-flex; align-items: center; gap: 9px;
    background: #f0fdfa; border: 1px solid #99f6e4;
    border-radius: 10px; padding: 9px 13px; margin-top: 8px;
    text-decoration: none; color: #0f766e; font-size: 13px; font-weight: 600;
    transition: background .15s;
}
.flora-archivo:hover { background: #ccfbf1; }
.flora-archivo i { font-size: 18px; }
.flora-archivo--excel i { color: #16a34a; }
.flora-archivo--word i { color: #2563eb; }
.flora-archivo--pdf i { color: #dc2626; }
.flora-archivo--zip i { color: #b45309; }

/* Tarjeta de correo listo para Outlook */
.flora-correo {
    background: #fff; border: 1px solid #dbe3ee; border-left: 4px solid #2563eb;
    border-radius: 10px; padding: 10px 13px; margin-top: 8px; font-size: 13px;
}
.flora-correo-cab { font-weight: 700; color: #1d4ed8; margin-bottom: 6px; }
.flora-correo-cab i { margin-right: 5px; }
.flora-correo-linea { color: #374151; margin: 2px 0; }
.flora-correo-cuerpo {
    background: #f8fafc; border-radius: 8px; padding: 8px 10px; margin: 7px 0;
    white-space: pre-wrap; color: #4b5563; font-size: 12.5px;
    max-height: 180px; overflow-y: auto;
}
.flora-correo-boton {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--flora-grad); color: #fff !important; font-weight: 700;
    border-radius: 8px; padding: 8px 14px; text-decoration: none; font-size: 13px;
}
.flora-correo-boton:hover { filter: brightness(1.1); }

/* Progreso en vivo */
.flora-progreso-cab { display: flex; align-items: center; gap: 9px; color: #64748b; font-size: 13px; }
.flora-puntos { display: inline-flex; gap: 4px; }
.flora-puntos span { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: floraPensando 1.2s infinite; }
.flora-puntos span:nth-child(2) { animation-delay: .2s; }
.flora-puntos span:nth-child(3) { animation-delay: .4s; }
@keyframes floraPensando { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.flora-progreso {
    font-size: 11px; color: #94a3b8; margin-top: 7px;
}
.flora-progreso summary { cursor: pointer; font-weight: 600; color: var(--flora-verde); }
.flora-progreso code {
    display: block; margin: 4px 0; padding: 5px 8px; background: #f8fafc;
    border-radius: 6px; font-size: 10.5px; white-space: pre-wrap; word-break: break-all; color: #475569;
}
.flora-progreso code span { color: #16a34a; font-weight: 600; }
.flora-espera { opacity: .6; }

/* Detalle de consultas en la respuesta final */
.flora-consultas { font-size: 11px; color: #94a3b8; margin-top: 7px; }
.flora-consultas summary { cursor: pointer; }
.flora-consultas code {
    display: block; margin: 4px 0; padding: 5px 8px; background: #f8fafc;
    border-radius: 6px; font-size: 10.5px; white-space: pre-wrap; word-break: break-all; color: #475569;
}

/* ── Entrada ── */
.flora-entrada {
    display: flex; gap: 8px; align-items: flex-end;
    padding: 10px 12px; background: #fff; border-top: 1px solid #e8edf3;
    flex-shrink: 0;
}
.flora-entrada textarea {
    flex: 1; resize: none; border: 1px solid #dbe3ee; border-radius: 12px;
    padding: 10px 13px; font: 14px 'Segoe UI', sans-serif; outline: none;
    max-height: 110px; transition: border-color .15s, box-shadow .15s;
}
.flora-entrada textarea:focus { border-color: var(--flora-azul); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.flora-entrada button {
    width: 40px; height: 40px; border: none; border-radius: 50%;
    background: var(--flora-grad); color: #fff; font-size: 14px; cursor: pointer;
    flex-shrink: 0; transition: filter .15s, transform .1s;
}
.flora-entrada button:hover { filter: brightness(1.1); }
.flora-entrada button:disabled { opacity: .5; cursor: wait; }

/* Micrófono (dictado por voz) */
.flora-mic {
    background: #eef2f7 !important;
    color: #475569 !important;
}
.flora-mic:hover { background: #e2e8f0 !important; }
.flora-mic.escuchando {
    background: #dc2626 !important;
    color: #fff !important;
    animation: floraMicPulso 1.2s infinite;
}
@keyframes floraMicPulso {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .45); }
    50% { box-shadow: 0 0 0 9px rgba(220, 38, 38, 0); }
}

/* Toggle de voz activo en la cabecera */
.flora-cabecera button.activa {
    background: rgba(255, 255, 255, .35);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7);
}

/* Aviso sin clave */
.flora-aviso {
    margin: 10px 12px 0; padding: 10px 13px; border-radius: 10px;
    background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; font-size: 12.5px;
}
.flora-aviso code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; }

/* ── Móvil ── */
@media (max-width: 640px) {
    .flora-fab { right: 12px; bottom: 72px; width: 52px; height: 52px; font-size: 21px; }
    .flora-panel {
        right: 8px; left: 8px; bottom: 132px;
        width: auto; height: calc(100vh - 150px);
    }
    .flora-burbuja { max-width: 94%; }
    /* En móvil el selector va más compacto y los atajos se deslizan */
    .flora-modos { padding: 6px 8px; }
    .flora-modos button { font-size: 12px; padding: 6px; }
    .flora-atajos { padding: 6px 8px 0; }
    .flora-atajos button { font-size: 11.5px; padding: 5px 10px; }
}
@media (max-width: 380px) {
    /* Muy estrecho: el icono del modo basta, sin texto */
    .flora-modos button span { display: none; }
}

/* ── Conversaciones guardadas ─────────────────────────────────────────────
   Todo lo que se habla con FLORE queda en el servidor, con su dueño. Esta es
   la lista para volver a cualquiera de ellas. */
.flora-historial { padding: 4px 2px; width: 100%; }
.flora-historial h4 {
    color: #1e293b; font-size: 13px; margin: 2px 4px 10px;
    text-transform: uppercase; letter-spacing: .04em;
}
.flora-conv {
    display: flex; align-items: stretch; gap: 6px; margin-bottom: 7px;
}
.flora-conv-abrir {
    flex: 1; text-align: left; cursor: pointer;
    border: 1px solid #dbe3ee; background: #fff; border-radius: 10px;
    padding: 9px 11px; display: flex; flex-direction: column; gap: 3px;
    transition: background .15s, border-color .15s;
}
.flora-conv-abrir:hover { background: #eff6ff; border-color: var(--flora-azul); }
.flora-conv-titulo {
    color: #1e293b; font-size: 13px; font-weight: 600; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.flora-conv-datos { color: #64748b; font-size: 11px; }
.flora-conv-borrar {
    border: 1px solid #dbe3ee; background: #fff; color: #94a3b8;
    border-radius: 10px; width: 34px; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.flora-conv-borrar:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

/* ── Adjuntar ficheros a la conversación ─────────────────────────────────
   Se le puede dar a FLORE una foto, una factura, un Excel o un correo: por
   el clip, arrastrando encima del panel o pegando con Ctrl+V. */
.flora-adjuntos {
    display: none; flex-wrap: wrap; gap: 6px;
    padding: 0 12px 8px; max-height: 120px; overflow-y: auto;
}
.flora-adjunto {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    background: #eff6ff; border: 1px solid #dbe3ee; border-radius: 999px;
    padding: 5px 6px 5px 11px; font-size: 12px; color: #1e293b;
}
.flora-adjunto i { color: var(--flora-azul); }
.flora-adjunto-nombre {
    max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flora-adjunto-peso { color: #94a3b8; font-size: 11px; }
.flora-adjunto button {
    border: none; background: none; color: #94a3b8; cursor: pointer;
    padding: 2px 4px; border-radius: 50%; line-height: 1;
}
.flora-adjunto button:hover { background: #fee2e2; color: #dc2626; }
.flora-adjunto-aviso {
    width: 100%; font-size: 12px; color: #b45309;
    background: #fffbeb; border: 1px solid #fde68a;
    border-radius: 8px; padding: 6px 10px;
}
/* Lo que se mandó, dentro de la burbuja del mensaje */
.flora-adjunto-enviado {
    margin-top: 6px; font-size: 11.5px; opacity: .85;
    display: flex; align-items: center; gap: 5px;
}
/* Al arrastrar un fichero por encima */
.flora-panel.flora-soltando { outline: 2px dashed var(--flora-azul); outline-offset: -6px; }