@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,700;1,400&display=swap');

:root {
    --color-bg: #f2f0eb;
    --color-text: #3c1642;
    --color-accent: #1dd3b0;
    --color-white: #fff;

    --font-main: 'Alegreya', Georgia, "Times New Roman", serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background: radial-gradient(circle at top left, rgba(60, 22, 66, 0.35), transparent 60%),
                radial-gradient(circle at bottom right, rgba(107, 42, 99, 0.3), transparent 60%),
                var(--color-bg);
    min-height: 100%;
}

body {
    font-family: var(--font-main);
    color: var(--color-text);
    background-color: transparent;
    min-height: 100vh;
}

/* Tabla */
/* overflow-x: auto (no hidden) para que la tabla scrollee en pantallas
   estrechas en lugar de aplastar/recortar columnas */
.table-wrapper {
    background-color: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(60, 22, 66, 0.08);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.tabla-conversaciones {
    width: 100%;
    /* Ancho mínimo legible: por debajo de esto el wrapper scrollea */
    min-width: 44rem;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.tabla-conversaciones thead tr {
    background-color: var(--color-text);
    color: var(--color-white);
}

.tabla-conversaciones th {
    padding: 0.9rem 1.1rem;
    text-align: left;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.tabla-conversaciones td {
    padding: 0.85rem 1.1rem;
    color: var(--color-text);
    border-bottom: 1px solid rgba(60, 22, 66, 0.07);
}

.tabla-conversaciones tbody tr:last-child td {
    border-bottom: none;
}

.tabla-conversaciones tbody tr:hover {
    background-color: rgba(60, 22, 66, 0.03);
    cursor: pointer;
}

.fila-conversacion.no-revisada {
    border-left: 3px solid var(--color-accent);
}

/* Badges status */
.badge {
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.badge-activa {
    background-color: rgba(29, 211, 176, 0.15);
    color: #0a8a72;
}

.badge-finalizada {
    background-color: rgba(60, 22, 66, 0.1);
    color: var(--color-text);
}

.badge-abandonada {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

/* ===== Markdown renderizado (resúmenes IA y respuestas del chat) =====
   Se aplica al HTML que produce cerodefectos.markdown_render. Anula el
   `white-space: pre-wrap` heredado: aquí los saltos ya son <p>/<br> reales. */
.markdown-body {
    white-space: normal;
}

.markdown-body > *:first-child {
    margin-top: 0;
}

.markdown-body > *:last-child {
    margin-bottom: 0;
}

.markdown-body p {
    margin: 0 0 0.75rem;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
    margin: 1.4rem 0 0.6rem;
}

.markdown-body h1 { font-size: 1.25rem; }
.markdown-body h2 { font-size: 1.08rem; }
.markdown-body h3 { font-size: 0.98rem; }
.markdown-body h4 { font-size: 0.92rem; }

/* Separador visual entre apartados del resumen */
.markdown-body h2 {
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(60, 22, 66, 0.12);
}

.markdown-body ul,
.markdown-body ol {
    margin: 0 0 0.75rem;
    padding-left: 1.35rem;
}

.markdown-body li {
    margin-bottom: 0.3rem;
}

.markdown-body li > ul,
.markdown-body li > ol {
    margin-top: 0.3rem;
    margin-bottom: 0;
}

.markdown-body strong {
    font-weight: 700;
}

.markdown-body hr {
    border: none;
    border-top: 1px solid rgba(60, 22, 66, 0.12);
    margin: 1.2rem 0;
}

.markdown-body blockquote {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.9rem;
    border-left: 3px solid var(--color-accent);
    background: rgba(60, 22, 66, 0.03);
}

.markdown-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
    background: rgba(60, 22, 66, 0.07);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}

.markdown-body pre {
    background: rgba(60, 22, 66, 0.05);
    border-radius: 8px;
    padding: 0.85rem;
    margin: 0 0 0.75rem;
    overflow-x: auto;
}

.markdown-body pre code {
    background: none;
    padding: 0;
}

/* Tablas: envueltas en un contenedor con scroll propio para que no desborden
   la columna del resumen ni la burbuja del chat en pantallas estrechas. */
.markdown-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88em;
    margin: 0 0 0.9rem;
}

.markdown-body thead tr {
    background-color: var(--color-text);
}

.markdown-body th {
    color: var(--color-white);
    font-weight: 500;
    text-align: left;
    padding: 0.5rem 0.7rem;
    white-space: nowrap;
}

.markdown-body td {
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid rgba(60, 22, 66, 0.08);
    vertical-align: top;
}

.markdown-body tbody tr:nth-child(even) {
    background-color: rgba(60, 22, 66, 0.025);
}

.markdown-body tbody tr:last-child td {
    border-bottom: none;
}

.markdown-body .tabla-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0.9rem;
    border-radius: 8px;
    border: 1px solid rgba(60, 22, 66, 0.1);
}

.markdown-body .tabla-scroll table {
    margin-bottom: 0;
}

/* ===== Miga de pan "volver" (.btn-volver / .btn-volver-dashboard) =====
   Antes: color: var(--color-text) (#3c1642) a opacity 0.5, directamente sobre
   el radial-gradient de rgba(60, 22, 66, ...) del <html> — texto morado sobre
   fondo morado, casi invisible. Se sube el contraste con una chip de fondo
   claro (siempre legible, gradiente incluido) en vez de bajar la opacidad del
   propio texto. Definido una sola vez aquí; antes estaba duplicado en 9 CSS. */
.btn-volver,
.btn-volver-dashboard {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: fit-content;
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    opacity: 1;
    white-space: nowrap;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-volver:hover,
.btn-volver-dashboard:hover,
.btn-volver:focus-visible,
.btn-volver-dashboard:focus-visible {
    color: var(--color-text);
    background: var(--color-white);
    box-shadow: 0 2px 10px rgba(60, 22, 66, 0.15);
}

/* Checkbox: sustituye el azul de Bootstrap por el color corporativo */
.form-check-input:checked {
    background-color: #3c1642;
    border-color: #3c1642;
}

.form-check-input:focus {
    border-color: #3c1642;
    box-shadow: 0 0 0 0.25rem rgba(60, 22, 66, 0.25);
}

/* Scrollbar de los wrappers de tabla: discreta pero visible, para que se vea
   que hay contenido a la derecha */
.table-wrapper::-webkit-scrollbar,
.tabla-wrapper::-webkit-scrollbar {
    height: 8px;
}

.table-wrapper::-webkit-scrollbar-track,
.tabla-wrapper::-webkit-scrollbar-track {
    background: rgba(60, 22, 66, 0.05);
}

.table-wrapper::-webkit-scrollbar-thumb,
.tabla-wrapper::-webkit-scrollbar-thumb {
    background: rgba(60, 22, 66, 0.25);
    border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover,
.tabla-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(60, 22, 66, 0.4);
}

.table-wrapper,
.tabla-wrapper {
    scrollbar-width: thin;
    scrollbar-color: rgba(60, 22, 66, 0.25) rgba(60, 22, 66, 0.05);
}

/* ===== Responsive ===== */

/* Tablet */
@media (max-width: 992px) {
    .tabla-conversaciones {
        font-size: 0.9rem;
    }

    .tabla-conversaciones th {
        padding: 0.75rem 0.9rem;
    }

    .tabla-conversaciones td {
        padding: 0.7rem 0.9rem;
    }
}

/* Móvil */
@media (max-width: 768px) {
    .tabla-conversaciones {
        font-size: 0.85rem;
    }

    .tabla-conversaciones th {
        padding: 0.65rem 0.75rem;
        white-space: nowrap;
    }

    .tabla-conversaciones td {
        padding: 0.65rem 0.75rem;
    }

    /* En móvil las filas clicables ya no necesitan hover de puntero */
    .tabla-conversaciones tbody tr:hover {
        background-color: transparent;
    }
}

/* Contenedor de Bootstrap (.container) usado en usuarios_list: reducir padding */
@media (max-width: 576px) {
    .container.py-4 {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }
}

/* Padding de los wrappers de página en pantallas estrechas.
   Prefijo `body` para ganar en especificidad al `padding: 2rem` que cada CSS
   de app declara y que se carga DESPUÉS de base.css (un @media no aporta
   especificidad por sí mismo). */
@media (max-width: 992px) {
    body .dashboard-wrapper,
    body .list-wrapper,
    body .sub-wrapper,
    body .usuario-wrapper,
    body .detail-wrapper,
    body .uso-wrapper {
        padding: 1.5rem 1.25rem;
    }
}

@media (max-width: 768px) {
    body .dashboard-wrapper,
    body .list-wrapper,
    body .sub-wrapper,
    body .usuario-wrapper,
    body .detail-wrapper,
    body .uso-wrapper {
        padding: 1.25rem 0.9rem;
    }
}