/* =========================================================
   AIJesgtel — css.css unificado
   Basado en la paleta de index.php
   ========================================================= */

:root {
    --bg-color:       #0f172a;
    --chat-bg:        #1e293b;
    --panel-bg:       #1e293b;
    --card-bg:        #253449;
    --user-bubble:    #2563eb;
    --user-hover:     #3b82f6;
    --ai-bubble:      #334155;
    --text-color:     #f1f5f9;
    --text-dim:       #94a3b8;
    --accent:         #60a5fa;
    --accent-hover:   #3b82f6;
    --thought-bg:     #162032;
    --thought-border: #1e3a8a;
    --thought-text:   #93c5fd;
    --search-bg:      #0c1e32;
    --search-border:  #0ea5e9;
    --search-text:    #38bdf8;
    --border-color:   #334155;
    --success:        #4ade80;
    --danger:         #f87171;
    --warning:        #fbbf24;
}

* { box-sizing: border-box; }

body {
    font-family: 'Segoe UI', system-ui, Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    margin: 0;
}

/* =========================================================
   NAVEGACIÓN (index + entrenamiento)
   ========================================================= */
.main-nav {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

.nav-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
}

.nav-brand {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.nav-brand .badge {
    font-size: 0.6rem;
    background: var(--accent);
    color: #0f172a;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-links a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dim);
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.nav-links a:hover {
    color: var(--text-color);
    background: rgba(255,255,255,0.05);
}

.nav-links a.active {
    color: var(--accent);
    background: rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.25);
}

.nav-links a.logout {
    color: var(--danger);
}

.nav-links a.logout:hover {
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.2);
}

.nav-links a.train-link {
    color: var(--success);
}

.nav-links a.train-link:hover {
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.2);
}

.version {
    font-size: 0.65rem;
    background: #475569;
    color: #cbd5e1;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* =========================================================
   CHAT (index.php)
   ========================================================= */
#chat {
    flex: 1;
    padding: 24px 20px;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.msg {
    position: relative;
    max-width: 85%;
    padding: 14px 18px;
    border-radius: 18px;
    line-height: 1.6;
    font-size: 0.98rem;
    word-wrap: break-word;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.user {
    align-self: flex-end;
    background: var(--user-bubble);
    color: white;
    border-bottom-right-radius: 4px;
    white-space: pre-wrap;
}

.ai {
    align-self: flex-start;
    background: var(--ai-bubble);
    color: var(--text-color);
    border-bottom-left-radius: 4px;
    border: 1px solid #475569;
    padding: 0;
}

.error {
    align-self: flex-start;
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #f87171;
    border-bottom-left-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    white-space: pre-wrap;
    font-size: 0.88rem;
}

/* ── Pensamiento ── */
.thought-block {
    display: flex;
    flex-direction: column;
}

.thought-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--thought-bg);
    border-bottom: 1px solid var(--thought-border);
    cursor: pointer;
    user-select: none;
    font-size: 0.82rem;
    color: var(--thought-text);
    letter-spacing: 0.3px;
    transition: background 0.2s;
}

.thought-header:hover {
    background: #1a263b;
}

.thought-header:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.thought-header .svg-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.thought-header .chevron {
    margin-left: auto;
    width: 14px;
    height: 14px;
    transition: transform 0.2s;
}

.thought-header.collapsed .chevron {
    transform: rotate(-90deg);
}

.thought-body {
    padding: 10px 16px 12px;
    background: var(--thought-bg);
    color: var(--thought-text);
    font-size: 0.85rem;
    font-style: italic;
    border-bottom: 1px solid var(--thought-border);
    overflow: hidden;
    transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.4s ease,
                opacity 0.5s ease;
    max-height: 800px;
    opacity: 1;
    white-space: pre-wrap;
    word-break: break-word;
}

.thought-body.collapsing {
    max-height: 800px;
    opacity: 0.4;
}

.thought-body.hidden {
    display: none;
}

/* Llamada a herramienta dentro del razonamiento (renderRazonamiento de
   markdownChat.js): igual en el chat y en las vistas previas del dataset. */
.herramienta-bloque {
    display: block;
    margin: 6px 0;
    padding: 6px 10px;
    border-left: 3px solid var(--search-border);
    border-radius: 4px;
    background: var(--search-bg);
    color: var(--search-text);
    font-style: normal;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Búsqueda en chat ── */
.search-block {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: var(--search-bg);
    border-bottom: 1px solid #103454;
    font-size: 0.82rem;
    color: var(--search-text);
    letter-spacing: 0.2px;
}

.search-block .svg-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex-shrink: 0;
}

.search-block .spin-icon {
    animation: spin 1.5s linear infinite;
}

.search-block.search-done .spin-icon {
    animation: none;
}

.search-block .search-label {
    opacity: 0.85;
}

.search-block .search-query {
    font-weight: 600;
    color: #38bdf8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 350px;
}

.search-block .search-source {
    margin-left: auto;
    font-size: 0.75rem;
    opacity: 0.6;
    background: rgba(56, 189, 248, 0.15);
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.search-sources {
    position: relative;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 22px 16px 10px 16px;
    background: var(--search-bg);
    border-bottom: 1px solid #103454;
    scrollbar-width: thin;
}

.search-sources::before {
    content: "Fuentes";
    position: absolute;
    top: 4px;
    left: 16px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
}

.source-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    max-width: 220px;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    color: var(--search-text);
    text-decoration: none;
    font-size: 0.78rem;
    transition: background 0.2s, transform 0.15s;
}

.source-chip:hover {
    background: rgba(56, 189, 248, 0.2);
    transform: translateY(-1px);
}

.source-chip img {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

.source-chip .source-num {
    font-weight: 700;
    opacity: 0.7;
}

.source-chip .source-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Cursor / typing ── */
.cursor {
    display: inline-block;
    width: 2px;
    height: 1.15em;
    background: var(--accent);
    margin-left: 3px;
    vertical-align: text-bottom;
    animation: blink 0.8s steps(1) infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

.answer-block {
    padding: 16px;
}

.answer-block p:first-child { margin-top: 0; }
.answer-block p:last-child  { margin-bottom: 0; }

.typing-dots {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 0;
}

.typing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    animation: bounce 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

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

/* ── Input área ── */
.input-area {
    background: var(--chat-bg);
    padding: 16px 20px;
    display: flex;
    justify-content: center;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    flex-direction: column;
    align-items: center;
}

.input-container {
    width: 100%;
    max-width: 850px;
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

#input {
    flex: 1;
    min-width: 0;
    padding: 12px 18px;
    border-radius: 22px;
    border: 1px solid #475569;
    background: #0f172a;
    color: white;
    outline: none;
    font-size: 0.98rem;
    font-family: inherit;
    resize: none;
    max-height: 180px;
    height: 45px;
    line-height: 1.4;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}

#input:disabled { opacity: 0.5; cursor: not-allowed; }

#send {
    height: 45px;
    padding: 0 22px;
    border-radius: 22px;
    border: none;
    background: var(--user-bubble);
    color: white;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s, transform 0.1s;
    white-space: nowrap;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

#send:hover:not(:disabled) { background: var(--user-hover); }
#send:active:not(:disabled) { transform: scale(0.98); }
#send:disabled { opacity: 0.5; cursor: not-allowed; }

#new-chat {
    background: #475569;
    color: white;
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    cursor: pointer;
    font-size: 1.4rem;
    transition: background 0.2s, transform 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

#new-chat:hover { background: #64748b; transform: rotate(90deg); }

#attach-btn {
    background: #475569;
    color: white;
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background 0.2s, transform 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

#attach-btn:hover:not(:disabled) { background: var(--accent); transform: scale(1.06); }
#attach-btn:disabled { opacity: 0.5; cursor: not-allowed; }

#emoji-btn {
    background: #475569;
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    transition: background 0.2s, transform 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
#emoji-btn:hover:not(:disabled) { background: var(--accent); transform: scale(1.06); }
#emoji-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.attachment-chip-row {
    width: 100%;
    max-width: 850px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(96, 165, 250, 0.15);
    color: var(--accent);
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 16px;
    padding: 5px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    max-width: 320px;
}

.attachment-chip span#attachment-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


#chat::-webkit-scrollbar       { width: 8px; }
#chat::-webkit-scrollbar-thumb { background: #475569; border-radius: 10px; }
#chat::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* ── Markdown ── */
/* Código en línea (`…`): chip oscuro con borde, coherente con los bloques
   ``` … ``` resaltados por highlight.js. Se cubren todos los contextos
   donde markdownChat.js escribe HTML: chat, vista previa del dataset y
   RLHF (entrenamientoRLHF.php usa renderMarkdown y vuelca en .answer-body). */
.answer-block code,
.answer-body code,
.ds-preview code {
    background: #0f172a;
    border: 1px solid #2d3748;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.88em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: #f43f5e;
    word-break: break-word;
}

/* El <code> dentro de un <pre> NO es código en línea: es el cuerpo de un
   bloque ``` … ```, y su estilo lo llevan .code-block y el tema de
   highlight.js. Acá solo se anula el chip del inline. */
.answer-block pre code,
.answer-body pre code,
.ds-preview pre code {
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
}

/* Bloque de código: <div class="code-block"> con cabecera (lenguaje +
   botón Copiar) y el <pre> debajo, ambos dentro de un mismo marco. */
.answer-block .code-block,
.answer-body .code-block,
.ds-preview .code-block {
    margin: 12px 0;
    border: 1px solid #2d3748;
    border-radius: 10px;
    overflow: hidden;
    background: #0f172a;
}

.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid #2d3748;
    font-size: 0.72rem;
    color: #94a3b8;
}

.code-block-lang {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    text-transform: lowercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    color: #94a3b8;
}

.code-block-copy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.code-block-copy:hover {
    background: rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.3);
    color: var(--accent);
}
.code-block-copy svg { flex-shrink: 0; }

/* El <pre> dentro de la envoltura: sin borde ni radio propios, que los
   lleva .code-block. El fondo lo aporta la envoltura (el tema de
   highlight.js solo pinta los tokens de color). */
.answer-block .code-block pre,
.answer-body .code-block pre,
.ds-preview .code-block pre {
    margin: 0;
    padding: 14px;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow-x: auto;
}

/* ── Tablas ── */
.answer-block table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 0.95rem;
}
.answer-block th,
.answer-block td {
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}
.answer-block th {
    background: rgba(96, 165, 250, 0.1);
    font-weight: 600;
}
.answer-block td ul,
.answer-block th ul {
    margin: 4px 0;
    padding-left: 18px;
}
.answer-block td li,
.answer-block th li {
    margin: 2px 0;
}

/* ── Tablas en RLHF ── */
.answer-body table,
.response-card .thought-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 0.95rem;
}
.answer-body th, .answer-body td,
.response-card .thought-body th,
.response-card .thought-body td {
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}
.answer-body th,
.response-card .thought-body th {
    background: rgba(96, 165, 250, 0.1);
    font-weight: 600;
}
.answer-body td ul, .answer-body th ul,
.response-card .thought-body td ul,
.response-card .thought-body th ul {
    margin: 4px 0;
    padding-left: 18px;
}
.answer-body td li, .answer-body th li,
.response-card .thought-body td li,
.response-card .thought-body th li {
    margin: 2px 0;
}



/* =========================================================
   ENTRENAMIENTO RLHF (entrenamientoRLHF.php)
   ========================================================= */
main {
    max-width: 820px;
    margin: 0 auto;
    padding: 24px 20px;
}

.panel {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.panel h3 {
    margin: 0 0 14px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.segmented {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.segmented button {
    flex: 1;
    min-width: 90px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: #0f172a;
    color: var(--text-color);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.segmented button:hover { border-color: var(--accent); }
.segmented button.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #0f172a;
    font-weight: 700;
}
.segmented button:active { transform: scale(0.97); }

#num_responses_row .segmented button { flex: 0 0 46px; min-width: 46px; }

.field { margin-top: 16px; }
.field label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 6px;
}

textarea#user_input,
.comment-field textarea {
    width: 100%;
    min-height: 70px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: #0f172a;
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    outline: none;
}

textarea#user_input:focus,
.comment-field textarea:focus { border-color: var(--accent); }

.btn-primary {
    margin-top: 18px;
    width: 100%;
    padding: 13px;
    border-radius: 12px;
    border: none;
    background: var(--accent);
    color: #0f172a;
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.btn-primary:hover:not(:disabled) { background: var(--accent-hover); color: white; }
.btn-primary:active:not(:disabled) { transform: scale(0.99); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.loading-row {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    color: var(--text-dim);
    font-size: 0.88rem;
}
.loading-row.show { display: flex; }

.spinner {
    width: 16px; height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.banner {
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 0.9rem;
    margin-bottom: 20px;
    line-height: 1.5;
}
.banner.info    { background: rgba(96,165,250,0.1);  border: 1px solid rgba(96,165,250,0.3);  color: var(--accent); }
.banner.error   { background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); color: var(--danger); }
.banner.success { background: rgba(74,222,128,0.1);  border: 1px solid rgba(74,222,128,0.3);  color: var(--success); }
.banner.warning { background: rgba(251,191,36,0.1);  border: 1px solid rgba(251,191,36,0.3);  color: var(--warning); }

.question-banner {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 0.92rem;
}
.question-banner .q-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-dim);
    margin-bottom: 4px;
}

.inline-question {
    padding: 8px 16px;
    background: rgba(96,165,250,0.06);
    border-bottom: 1px dashed var(--border-color);
    font-size: 0.78rem;
    color: var(--text-dim);
    white-space: pre-wrap;
    word-break: break-word;
}

.response-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    margin-bottom: 18px;
    overflow: hidden;
}

.response-card .rc-header {
    padding: 10px 16px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-dim);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Thought en RLHF (reutiliza .thought-header/.thought-body del chat) */
.response-card .thought-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--thought-bg);
    border-bottom: 1px solid var(--thought-border);
    cursor: pointer;
    user-select: none;
    font-size: 0.8rem;
    color: var(--thought-text);
}

.response-card .thought-header .chevron {
    margin-left: auto;
    width: 14px; height: 14px;
    transition: transform 0.2s;
}

.response-card .thought-header.collapsed .chevron { transform: rotate(-90deg); }

.response-card .thought-body {
    padding: 10px 16px;
    background: var(--thought-bg);
    color: var(--thought-text);
    font-size: 0.83rem;
    font-style: italic;
    white-space: pre-wrap;
    word-break: break-word;
    border-bottom: 1px solid var(--thought-border);
}

.response-card .thought-body.hidden { display: none; }

/* Búsqueda en RLHF */
.response-card .search-block {
    padding: 10px 16px;
    background: rgba(14,165,233,0.06);
    border-bottom: 1px solid var(--thought-border);
    font-size: 0.82rem;
}

.response-card .search-query { color: #38bdf8; margin-bottom: 6px; }
.response-card .search-query em { font-style: normal; font-weight: 600; }
.response-card .search-empty { color: var(--text-dim); font-size: 0.78rem; }
.response-card .search-sources {
    margin: 0;
    padding-left: 18px;
    list-style: decimal;
}
.response-card .search-sources li { margin-bottom: 4px; }
.response-card .search-sources a {
    color: #7dd3fc;
    text-decoration: none;
    font-size: 0.82rem;
    word-break: break-word;
}
.response-card .search-sources a:hover { text-decoration: underline; }

.answer-body {
    padding: 14px 16px;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.55;
    font-size: 0.95rem;
}

.rating-form {
    border-top: 1px solid var(--border-color);
    padding: 14px 16px 16px;
}

.irrelevant-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 14px;
    cursor: pointer;
    user-select: none;
}
.irrelevant-toggle input { accent-color: var(--danger); width: 16px; height: 16px; }

.criterion { margin-bottom: 12px; }
.criterion:last-child { margin-bottom: 0; }

.criterion .c-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--text-dim);
    margin-bottom: 6px;
}
.criterion .c-label .c-name { color: var(--text-color); font-weight: 600; }
.criterion .c-question { font-size: 0.75rem; color: var(--text-dim); }

.score-pills {
    display: flex;
    gap: 6px;
}
.score-pills button {
    flex: 1;
    padding: 8px 0;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: #0f172a;
    color: var(--text-dim);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.88rem;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.score-pills button:hover { border-color: var(--accent); }
.score-pills button.selected {
    background: var(--accent);
    border-color: var(--accent);
    color: #0f172a;
}
.rating-form.disabled .score-pills button { opacity: 0.35; pointer-events: none; }

.comment-field { margin: 18px 0 10px; }
.comment-field label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.result-metric {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
    text-align: center;
}
.result-metric .rm-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    color: var(--text-dim);
    letter-spacing: 0.4px;
}
.result-metric .rm-value {
    font-size: 1.05rem;
    font-weight: 700;
    margin-top: 2px;
}
.rm-value.pos { color: var(--success); }
.rm-value.neg { color: var(--danger); }

#new-round-btn {
    margin-top: 16px;
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-weight: 600;
    cursor: pointer;
}
#new-round-btn:hover { background: rgba(96,165,250,0.1); }

/* =========================================================
   LOGIN (login.php)
   ========================================================= */
.login-body {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-container {
    width: 100%;
    max-width: 400px;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 36px 28px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

.login-header {
    text-align: center;
    margin-bottom: 28px;
}

.login-header .logo {
    font-size: 2.4rem;
    margin-bottom: 8px;
}

.login-header h1 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-color);
}

.login-header p {
    margin: 8px 0 0;
    font-size: 0.88rem;
    color: var(--text-dim);
}

.login-container .field {
    margin-bottom: 18px;
}

.login-container .field label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.login-container input[type="password"] {
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: #0f172a;
    color: var(--text-color);
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-container input[type="password"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.error-msg {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: var(--danger);
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 0.88rem;
    margin-bottom: 18px;
    text-align: center;
}

.back-link {
    display: block;
    text-align: center;
    margin-top: 20px;
    font-size: 0.85rem;
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.2s;
}
.back-link:hover { color: var(--accent); }

.lock-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lock-icon svg {
    width: 28px;
    height: 28px;
    color: var(--accent);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Con la sesión de administrador la barra tiene 7 enlaces: por debajo del
   ancho de .nav-inner (900px + márgenes) se muestran solo los íconos (cada
   enlace conserva su title). */
@media (max-width: 940px) {
    .nav-links { gap: 2px; }
    .nav-links a span { display: none; }
}

@media (max-width: 520px) {
    .nav-links a span { display: none; }
    .nav-links a { padding: 8px 10px; }
    .nav-brand span:not(.badge) { display: none; }
}

@media (max-width: 400px) {
    .nav-links a { padding: 8px 7px; }
}

@media (max-width: 480px) {
    #send span { display: none; }
    #send { padding: 0; width: 45px; justify-content: center; }
    #send svg { margin: 0; }
    /* Con 4 botones redondos, el cuadro de texto necesita el espacio. */
    .input-container { gap: 6px; }
    #new-chat, #attach-btn, #emoji-btn { width: 40px; height: 40px; margin-bottom: 2px; }
    #emoji-btn { font-size: 1.1rem; }
}

/* =========================================================
   LAYOUTS ESPECÍFICOS POR PÁGINA
   ========================================================= */

.chat-layout {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior-y: auto;
}

.rlhf-layout {
    min-height: 100dvh;
    padding-bottom: 60px;
}

/* =========================================================
   FIXES Y EXTRAS
   ========================================================= */

/* 1. Botón de login: margen correcto */
.login-container .btn-primary {
    margin-top: 6px;
}

/* 1b. Encabezado de las páginas de administración (RLHF / revisión):
   alineado con el <main> centrado de 820px. */
.rlhf-layout > header {
    max-width: 820px;
    margin: 0 auto;
    padding: 20px 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.rlhf-layout > header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}
.rlhf-layout > header .badge {
    font-size: 0.65rem;
    background: var(--accent);
    color: #0f172a;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
}
.rlhf-layout > header .corpus-volver {
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}
/* 1c. Revisión de chats (revisionChats.php) */
.review-small {
    color: var(--text-dim);
    font-size: 0.85rem;
}
.review-record-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 12px;
}
.review-preview {
    margin-top: 12px;
}
.review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

/* 2. Hint text (reemplaza inline style en RLHF) */
.hint-text {
    color: var(--text-dim);
    font-size: 0.78rem;
    display: block;
    margin-top: 8px;
}

/* 3. Página de logout */
.logout-body {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.logout-card {
    width: 100%;
    max-width: 400px;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 40px 28px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

.logout-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logout-icon svg {
    width: 32px;
    height: 32px;
    color: var(--accent);
}

.logout-card h1 {
    margin: 0 0 8px;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text-color);
}

.logout-card p {
    margin: 0 0 24px;
    font-size: 0.9rem;
    color: var(--text-dim);
}

.logout-card .btn-primary {
    margin-top: 0;
    display: inline-block;
    width: auto;
    padding: 12px 28px;
    text-decoration: none;
}

/* =========================================================
   ACCIONES DE MENSAJE (Editar / Reintentar / Copiar)
   ========================================================= */

.msg-actions {
    position: absolute;
    bottom: -30px;
    right: 8px;
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateY(-4px);
    z-index: 10;
    pointer-events: none;
}

.msg:hover .msg-actions,
.msg-actions:focus-within {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.msg-action-btn {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-dim);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
    pointer-events: auto;
}

.msg-action-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #0f172a;
}

.msg-action-btn:active {
    transform: scale(0.95);
}

/* Espacio extra para que las acciones del último mensaje no queden tapadas */
#chat .msg:last-child {
    margin-bottom: 36px;
}

/* =========================================================================
   AVISO FLOTANTE: donar PDF para entrenamiento
   -------------------------------------------------------------------------
   A propósito NO vive dentro de #chat -- es una nota aparte de la
   conversación (ver index.php), flotante sobre toda la pantalla, para que
   quede claro que es una pregunta del sistema y no un mensaje más del
   chat. Mismas variables de tema que el resto de la UI.
========================================================================= */
.pdf-donation-toast {
    position: fixed;
    left: 50%;
    bottom: 84px;
    transform: translateX(-50%) translateY(12px);
    width: min(92vw, 420px);
    z-index: 500;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.pdf-donation-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.pdf-donation-toast .pdf-donation-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.pdf-donation-toast .pdf-donation-icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}

.pdf-donation-toast .pdf-donation-msg {
    color: var(--text-color);
    font-size: 0.9rem;
    line-height: 1.45;
}

.pdf-donation-toast .pdf-donation-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.pdf-donation-btn {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 7px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    background: transparent;
    color: var(--text-color);
}

.pdf-donation-btn.pdf-donation-yes {
    background: var(--accent);
    border-color: var(--accent);
    color: #0f172a;
}

.pdf-donation-btn.pdf-donation-yes:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.pdf-donation-btn.pdf-donation-no:hover {
    background: var(--ai-bubble);
}

.pdf-donation-toast.pdf-donation-thanks .pdf-donation-icon {
    color: var(--success);
}

@media (max-width: 480px) {
    .pdf-donation-toast {
        bottom: 76px;
        width: min(94vw, 380px);
    }
}

/* =========================================================
   REVISIÓN DEL CORPUS (revisionCorpus.php)
   ========================================================= */
.corpus-layout main,
.corpus-layout > header {
    max-width: 1400px;
}

.corpus-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.corpus-filtros input,
.corpus-filtros select {
    flex: 1 1 240px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: #0f172a;
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
}

.corpus-filtros input:focus,
.corpus-filtros select:focus { border-color: var(--accent); }

.corpus-tabla-panel { padding: 0; overflow: hidden; }

.corpus-tabla-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.corpus-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.corpus-tabla th,
.corpus-tabla td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.corpus-tabla th {
    color: var(--text-dim);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: rgba(255, 255, 255, 0.02);
}

.corpus-tabla tbody tr { cursor: pointer; transition: background 0.15s; }
.corpus-tabla tbody tr:hover,
.corpus-tabla tbody tr:focus-visible { background: rgba(96, 165, 250, 0.08); outline: none; }

.corpus-nombre { word-break: break-word; font-weight: 500; }
.corpus-vacio { padding: 20px; text-align: center; }

.corpus-tag {
    display: inline-block;
    padding: 2px 8px;
    margin: 1px 0;
    border-radius: 999px;
    font-size: 0.72rem;
    border: 1px solid var(--border-color);
    white-space: nowrap;
}
.corpus-tag.ok   { color: var(--success); border-color: rgba(74, 222, 128, 0.35); }
.corpus-tag.warn { color: var(--warning); border-color: rgba(251, 191, 36, 0.35); }
.corpus-tag.bad  { color: var(--danger);  border-color: rgba(248, 113, 113, 0.35); }
.corpus-tag.info { color: var(--accent);  border-color: rgba(96, 165, 250, 0.35); }

.corpus-volver {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
    margin-bottom: 14px;
}
.corpus-volver:hover { text-decoration: underline; }

.corpus-doc-titulo {
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--text-color) !important;
    font-size: 1.05rem !important;
    word-break: break-word;
}

.corpus-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 0.82rem;
    color: var(--text-dim);
}

.corpus-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.corpus-toolbar .btn-primary {
    width: auto;
    margin-top: 0;
    padding: 10px 20px;
}

.corpus-estado { font-size: 0.85rem; color: var(--text-dim); }
.corpus-estado.ok    { color: var(--success); }
.corpus-estado.dirty { color: var(--warning); }
.corpus-estado.error { color: var(--danger); }

.corpus-btn-sec {
    margin: 6px 6px 0 0;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 0.82rem;
}
.corpus-btn-sec:hover { background: rgba(255, 255, 255, 0.06); }

.corpus-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.corpus-col { min-width: 0; }

.corpus-col-titulo {
    font-size: 0.72rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

#fuente,
.corpus-preview {
    width: 100%;
    height: 68vh;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--thought-bg);
    color: var(--text-color);
}

#fuente {
    display: block;
    padding: 14px 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.84rem;
    line-height: 1.55;
    resize: vertical;
    outline: none;
    white-space: pre-wrap;
}
#fuente:focus { border-color: var(--accent); }

.corpus-preview {
    overflow: auto;
    padding: 14px 20px;
    font-size: 0.92rem;
    line-height: 1.6;
}
.corpus-preview h1, .corpus-preview h2, .corpus-preview h3 {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 6px;
}
.corpus-preview p { white-space: pre-wrap; }
.corpus-preview code {
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.6);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.85em;
    color: #f43f5e;
}
.corpus-preview pre {
    margin: 10px 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.6);
    overflow-x: auto;
}
.corpus-preview pre code { padding: 0; background: none; white-space: pre; }
/* Botones de formato en la cabecera de la columna de texto (editorFormato.js). */
.corpus-barra-formato { text-transform: none; letter-spacing: 0; }
.corpus-barra-formato .ds-tokens { margin: 0; justify-content: flex-end; }
.corpus-preview table { border-collapse: collapse; margin: 12px 0; }
.corpus-preview th, .corpus-preview td {
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    vertical-align: top;
}
.corpus-preview th { background: rgba(96, 165, 250, 0.1); }
.corpus-preview td ul, .corpus-preview th ul { margin: 4px 0; padding-left: 18px; }

.banner code {
    background: rgba(15, 23, 42, 0.6);
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 0.85em;
}

@media (max-width: 600px) {
    .corpus-tabla th:nth-child(3), .corpus-tabla td:nth-child(3),
    .corpus-tabla th:nth-child(4), .corpus-tabla td:nth-child(4) { display: none; }
    .corpus-tabla th, .corpus-tabla td { padding: 10px; }
}

@media (max-width: 900px) {
    .corpus-split { grid-template-columns: 1fr; }
    #fuente, .corpus-preview { height: 42vh; }
    .corpus-toolbar .btn-primary { width: 100%; }
}

/* =========================================================
   TÉRMINOS Y CONDICIONES (terminos.php) + enlace en el chat
   ========================================================= */
.terms-note {
    margin: 8px 0 0;
    font-size: 0.75rem;
    color: var(--text-dim);
    text-align: center;
}
.terms-note a { color: var(--text-dim); text-decoration: underline; }
.terms-note a:hover { color: var(--accent); }

.legal-layout { min-height: 100dvh; padding-bottom: 60px; }

.legal {
    max-width: 820px;
    margin: 0 auto;
    padding: 28px 20px;
    line-height: 1.65;
}
.legal h1 { margin: 0 0 4px; font-size: 1.6rem; font-weight: 600; }
.legal h2 {
    margin: 32px 0 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent);
    scroll-margin-top: 72px;   /* que el título no quede bajo la barra fija */
}
.legal p, .legal li { color: var(--text-color); font-size: 0.95rem; }
.legal ul { padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal a { color: var(--accent); }
.legal em { color: var(--text-dim); }
.legal-vigencia { color: var(--text-dim) !important; font-size: 0.85rem !important; margin-top: 0; }
.legal .banner { margin: 20px 0; }
.legal-indice {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px 18px;
}
.legal-indice ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 28px; }
.legal-indice li { margin: 0; padding: 3px 0; font-size: 0.88rem; break-inside: avoid; }
.legal-indice a { text-decoration: none; }
.legal-indice a:hover { text-decoration: underline; }
.legal-volver { margin-top: 36px; }

/* Tabla de cupos y límites vigentes (terminos.php §4) */
.legal-tabla-envoltura { overflow-x: auto; margin: 12px 0; }
.legal-tabla { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.legal-tabla th, .legal-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--border-color); text-align: left; white-space: nowrap; }
.legal-tabla thead th { color: var(--text-dim); font-weight: 500; }
.legal-tabla tbody th { font-weight: 500; white-space: normal; }
.legal code { font-size: 0.85em; }

@media (max-width: 600px) {
    .legal-indice ol { columns: 1; }
    .legal h1 { font-size: 1.35rem; }
}

/* Guía del razonamiento en revisionChats.php */
.razonamiento-guia {
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--text-dim);
}
.razonamiento-guia summary { cursor: pointer; color: var(--accent); }
.razonamiento-guia ol { margin: 6px 0; padding-left: 20px; }
.razonamiento-guia li { margin: 3px 0; }
.razonamiento-ejemplo {
    background: var(--thought-bg);
    border-left: 3px solid var(--thought-border);
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--thought-text);
}

/* =========================================================
   REVISIÓN DEL DATASET (revisionDataset.php)
   Reutiliza el esqueleto de .corpus-*; aquí solo lo propio.
   ========================================================= */
.corpus-filtros .ds-ir-linea { flex: 0 1 170px; }
.corpus-filtros .ds-nuevo { flex: 0 0 auto; width: auto; margin-top: 0; padding: 10px 16px; }
.ds-agregar-turno { align-self: flex-start; margin: 0; color: var(--accent); }
.ds-agregar { align-self: flex-start; margin: 0; color: var(--accent); font-size: 0.78rem; padding: 4px 10px; }
.ds-opcional { border-style: dashed; }
.ds-tokens { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ds-tokens button {
    padding: 3px 9px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-color);
    color: var(--search-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
    cursor: pointer;
}
.ds-tokens button:hover { border-color: var(--accent); }
.ds-tokens .ds-quitar { margin-left: auto; color: var(--danger); font-family: inherit; }
.ds-num { color: var(--accent); font-variant-numeric: tabular-nums; }
.ds-fila-error td { color: var(--danger); }

/* Selector de archivo (DatasetTrain.jsonl / DatasetVal.jsonl) y filtro por tipo */
.corpus-filtros .ds-sel-dataset { flex: 1 1 260px; font-weight: 600; }
.corpus-filtros .ds-filtro-cat  { flex: 1 1 240px; }
.corpus-filtros select option:disabled { color: var(--text-dim); }
.ds-cats { display: inline-flex; flex-wrap: wrap; gap: 3px; }
td.ds-cats { display: table-cell; white-space: normal; min-width: 64px; }
td.ds-cats .ds-cat { margin: 0 2px 2px 0; }
.ds-cat { padding: 1px 6px; font-size: 0.78rem; line-height: 1.4; cursor: default; }
.corpus-meta .ds-cats .ds-cat { color: var(--text-color); }

/* Panel flotante de búsqueda web (revisionDataset.php): no es modal, para
   poder seguir editando el razonamiento con el panel abierto. */
.ds-busqueda {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 600;
    width: min(460px, calc(100vw - 32px));
    max-height: min(78vh, 720px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: var(--panel-bg);
    border: 1px solid var(--search-border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.ds-busqueda[hidden] { display: none; }
.ds-busqueda-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--search-text); }
.ds-busqueda-cerrar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: none;
    color: var(--text-dim);
    cursor: pointer;
}
.ds-busqueda-cerrar:hover { color: var(--text-color); border-color: var(--accent); }
.ds-busqueda-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ds-busqueda-form input[type="search"] {
    flex: 1 1 200px;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-color);
    color: var(--text-color);
    font: inherit;
    font-size: 0.9rem;
    outline: none;
}
.ds-busqueda-form input:focus { border-color: var(--accent); }
.ds-busqueda-cita { display: inline-flex; align-items: center; gap: 2px; font-size: 0.8rem; color: var(--text-dim); white-space: nowrap; }
.ds-busqueda-cita input {
    width: 3.4em;
    padding: 6px 4px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-color);
    color: var(--text-color);
    font: inherit;
    text-align: center;
}
.ds-busqueda-form .btn-primary,
.ds-busqueda-acciones .btn-primary { width: auto; margin-top: 0; padding: 9px 16px; }
.ds-busqueda-estado:empty { display: none; }
.ds-busqueda-estado.ok    { color: var(--success); }
.ds-busqueda-estado.dirty { color: var(--warning); }
.ds-busqueda-estado.error { color: var(--danger); }
#busqueda-resultado { display: flex; flex-direction: column; gap: 8px; }
#busqueda-resultado[hidden] { display: none; }
.ds-busqueda-meta { font-size: 0.82rem; color: var(--text-dim); }
.ds-busqueda-fuentes { margin: 0; padding-left: 26px; font-size: 0.8rem; }
.ds-busqueda-fuentes:empty { display: none; }
.ds-busqueda-fuentes li { margin: 2px 0; word-break: break-word; }
.ds-busqueda-fuentes a { color: var(--search-text); }
.ds-busqueda-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ds-busqueda-acciones .corpus-btn-sec { margin: 0; }
.corpus-toolbar .ds-btn-busqueda { margin: 0; color: var(--search-text); }
.corpus-toolbar .ds-btn-busqueda[aria-expanded="true"] { background: var(--search-bg); }

@media (max-width: 600px) {
    .ds-busqueda { right: 8px; left: 8px; bottom: 8px; width: auto; max-height: 70vh; }
}

/* Panel de palabras (revisionDataset.php): diagnóstico del tokenizer —
   todas las palabras del ejemplo con su nº de tokens, destacando las que
   superan un umbral. Comparte el esqueleto de .ds-busqueda. */
.ds-palabras { width: min(560px, calc(100vw - 32px)); }
.ds-palabras-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text-dim);
    white-space: nowrap;
    cursor: pointer;
}
.ds-palabras-scroll {
    max-height: 46vh;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-color);
}
.ds-palabras-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.ds-palabras-tabla th {
    position: sticky;
    top: 0;
    background: var(--panel-bg);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-dim);
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-color);
}
.ds-palabras-tabla td {
    padding: 3px 10px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.4);
    vertical-align: top;
}
.ds-palabras-tabla tbody tr:hover { background: rgba(96, 165, 250, 0.05); }
.ds-palabras-tabla .ds-palabra-txt {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    word-break: break-all;
    max-width: 160px;
}
.ds-palabras-tabla .ds-palabra-piezas {
    color: var(--text-dim);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    word-break: break-all;
}
.ds-palabras-tabla tr.supera td:first-child,
.ds-palabras-tabla tr.supera td:nth-child(2) {
    color: var(--warning);
    font-weight: 600;
}
.ds-palabras-tabla td:nth-child(2),
.ds-palabras-tabla td:nth-child(4) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.corpus-toolbar .ds-btn-palabras { margin: 0; }
.corpus-toolbar .ds-btn-palabras[aria-expanded="true"] { background: var(--thought-bg); }

/* La tabla del dataset tiene 5 columnas (Línea, Mensaje, Tipo, Turnos,
   Caracteres): en pantallas chicas se ocultan Turnos y Caracteres y se
   mantiene Tipo (la regla general de .corpus-tabla oculta la 3 y la 4). */
@media (max-width: 600px) {
    .ds-tabla th:nth-child(3), .ds-tabla td:nth-child(3) { display: table-cell; }
    .ds-tabla th:nth-child(5), .ds-tabla td:nth-child(5) { display: none; }
}

.ds-cabecera {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ds-cabecera-centro { flex: 1; min-width: 0; }
.ds-cabecera .corpus-doc-titulo { margin: 0 0 6px; }
.ds-flecha {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 1.1rem;
    cursor: pointer;
}
.ds-flecha:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.ds-flecha:disabled { opacity: 0.35; cursor: not-allowed; }

.ds-medida { margin-left: auto; font-size: 0.85rem; color: var(--text-dim); }
.ds-bien  { color: var(--success); }
.ds-mal   { color: var(--danger); font-weight: 600; }
.ds-aviso { color: var(--warning); }

/* Revisión de chats: acciones propias */
.rc-corregir { background: var(--success); width: auto; margin-top: 0; }
.rc-borrar { color: var(--danger); border-color: var(--danger); }
.rc-borrar:hover:not(:disabled) { background: var(--danger); color: #0f172a; }

/* Calificación de cada turno (gate + recompensa de GRPO) */
.ds-calificacion { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; font-size: 0.85rem; }
.ds-calificacion.ds-desactualizada { opacity: 0.5; }
.ds-cal-turno { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 6px 10px;
                border: 1px solid var(--border-color); border-radius: 8px; }
.ds-cal-titulo { font-weight: 600; }
.ds-cal-clase { padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; border: 1px solid currentColor; }
.ds-c-excelente, .ds-c-buena { color: var(--success); }
.ds-c-aceptable { color: var(--text-dim); }
.ds-c-revisar { color: var(--warning); }
.ds-c-problematica { color: var(--danger); }
.ds-cal-fila { width: 100%; color: var(--text-dim); }
.ds-cal-diag { display: inline-block; margin: 2px 4px 0 0; padding: 0 6px; border-radius: 4px;
               color: var(--warning); border: 1px solid currentColor; font-size: 0.75rem; }
.ds-cal-detalle { width: 100%; }
.ds-cal-detalle summary { cursor: pointer; color: var(--text-dim); }
.ds-cal-detalle table { border-collapse: collapse; margin-top: 4px; }
.ds-cal-detalle td { padding: 1px 10px 1px 0; font-variant-numeric: tabular-nums; }

.ds-col-titulo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; }
.ds-modos { display: inline-flex; gap: 4px; text-transform: none; letter-spacing: 0; }
.ds-modos button {
    background: none;
    border: 1px solid transparent;
    color: var(--text-dim);
    border-radius: 6px;
    padding: 2px 8px;
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}
.ds-modos button.activo { border-color: var(--accent); color: var(--accent); }

.ds-form,
.ds-preview {
    height: 68vh;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--thought-bg);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ds-form #fuente { height: 100%; border: none; padding: 0; background: transparent; resize: none; }

.ds-turno {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--panel-bg);
}
.ds-turno-titulo { font-size: 0.8rem; font-weight: 600; color: var(--accent); }
.ds-campo label {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.ds-txt {
    width: 100%;
    min-height: 56px;
    padding: 9px 11px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-color);
    color: var(--text-color);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.84rem;
    line-height: 1.5;
    resize: vertical;
    outline: none;
}
.ds-txt:focus { border-color: var(--accent); }

.ds-bloque {
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    padding: 8px 12px;
}
.ds-bloque summary { cursor: pointer; color: var(--text-dim); font-size: 0.82rem; }
.ds-bloque[open] summary { margin-bottom: 8px; }
.ds-bloque-texto {
    font-size: 0.82rem;
    color: var(--text-dim);
    white-space: pre-wrap;
    max-height: 220px;
    overflow-y: auto;
}

/* La regla global .error (burbuja de error del chat) no debe teñir el
   estado ni los avisos de las páginas de revisión (corpus, dataset y
   donaciones comparten body.corpus-layout). */
.corpus-layout .corpus-estado.error {
    background: none;
    border: 0;
    padding: 0;
    color: var(--danger);
    font-family: inherit;
    font-size: 0.85rem;
    white-space: normal;
}
.corpus-layout .banner.error { align-self: auto; font-family: inherit; font-size: 0.88rem; }
.ds-errores { display: flex; flex-direction: column; gap: 6px; }
.ds-errores .banner { margin: 0 0 6px; }
.ds-preview { gap: 16px; }
.ds-preview .msg { max-width: 92%; animation: none; }
.ds-texto-plano { white-space: pre-wrap; }
.ds-adjunto {
    display: block;
    margin-top: 8px;
    padding: 8px 10px;
    max-height: 160px;
    overflow-y: auto;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.35);
    font-size: 0.82rem;
}

@media (max-width: 900px) {
    .ds-form, .ds-preview { height: auto; max-height: none; }
    .ds-form #fuente { height: 50vh; }
    .ds-medida { margin-left: 0; width: 100%; }
}

/* =========================================================
   DONACIONES DE PDF (revisionDonaciones.php)
   Reutiliza el esqueleto de .corpus-*; aquí solo lo propio.
   ========================================================= */
.don-seccion { margin-bottom: 28px; }
.don-seccion code { font-size: 0.85em; }
.don-seccion .review-small a { color: var(--accent); }
.don-subir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-color);
}
.don-subir .corpus-btn-sec { margin: 0; color: var(--accent); }
.don-subir .corpus-btn-sec:disabled { opacity: 0.45; cursor: not-allowed; }

.don-grid {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 16px;
    align-items: start;
}
.don-lista { max-height: 82vh; overflow-y: auto; }
.don-lista .corpus-tabla .review-small { margin-top: 2px; }
.corpus-tabla tbody tr.don-sel { background: rgba(96, 165, 250, 0.14); box-shadow: inset 3px 0 0 var(--accent); }

.don-revision { min-width: 0; }
.don-revision .corpus-doc-titulo { word-break: break-word; }
.don-revision .banner { margin: 8px 0; }

.don-visor {
    height: 62vh;
    margin-top: 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.don-visor iframe { width: 100%; height: 100%; border: 0; display: block; }

.don-enlace {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--accent);
}
.don-enlace[hidden], .don-visor[hidden] { display: none; }

.don-comparar { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-color); }
.don-comparar > .corpus-btn-sec { margin: 0 10px 6px 0; color: var(--accent); }
.don-comparar > .corpus-btn-sec:disabled { opacity: 0.5; cursor: progress; }
#rev-comparacion { margin-top: 8px; }
#rev-comparacion .banner { margin: 8px 0 0; }
.don-coincidencias { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.don-coincidencias li { border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 12px; background: var(--bg-color); }
.don-coin-cabecera { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.don-barras { display: grid; grid-template-columns: minmax(0, auto) minmax(80px, 1fr); gap: 4px 10px; align-items: center; font-size: 0.8rem; color: var(--text-dim); }
.don-barra { height: 8px; border-radius: 4px; background: var(--border-color); overflow: hidden; }
.don-barra > span { display: block; height: 100%; background: var(--warning); }
.don-coincidencias .don-enlace { margin-top: 6px; margin-right: 10px; }

.don-acciones {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 12px;
    align-items: end;
    margin: 14px 0 6px;
}
.don-acciones .btn-primary { width: auto; margin-top: 0; padding: 10px 18px; }
.don-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 0.78rem; color: var(--text-dim); }
.don-campo input,
.don-nombre {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-color);
    color: var(--text-color);
    font: inherit;
    font-size: 0.9rem;
    outline: none;
}
.don-campo input:focus { border-color: var(--accent); }
.don-nombre { display: flex; align-items: center; gap: 2px; padding: 0 11px; }
.don-nombre:focus-within { border-color: var(--accent); }
.don-nombre input { flex: 1; min-width: 60px; border: 0; padding: 9px 0; background: transparent; }
.don-nombre input:disabled { opacity: 0.5; }
.don-prefijo { color: var(--text-dim); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.82rem; }
.don-rechazar { margin: 0; padding: 10px 18px; color: var(--danger); }
.don-rechazar:disabled, .don-convertir:disabled { opacity: 0.45; cursor: not-allowed; }

.don-tabla-fija tbody tr { cursor: default; }
/* En pantallas chicas .corpus-tabla oculta sus columnas 3 y 4; aquí son el
   estado y las acciones, así que se mantienen visibles. */
.don-lista .corpus-tabla th:nth-child(3), .don-lista .corpus-tabla td:nth-child(3),
.don-tabla-fija th:nth-child(3), .don-tabla-fija td:nth-child(3),
.don-tabla-fija th:nth-child(4), .don-tabla-fija td:nth-child(4) { display: table-cell; }
.don-celda-acciones { width: 1%; white-space: nowrap; text-align: right; }
.don-celda-acciones .corpus-btn-sec { display: inline-block; margin: 2px 0 2px 6px; text-decoration: none; color: var(--accent); }

.don-extraccion-cabecera { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.don-log { margin-top: 10px; }
.don-log summary { cursor: pointer; color: var(--text-dim); font-size: 0.82rem; }
.don-log pre {
    max-height: 240px;
    overflow: auto;
    margin: 8px 0 0;
    padding: 10px;
    border-radius: 8px;
    background: var(--bg-color);
    color: var(--text-dim);
    font-size: 0.76rem;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 900px) {
    .don-grid { grid-template-columns: 1fr; }
    .don-lista { max-height: 40vh; }
    .don-visor { height: 55vh; }
    .don-acciones { grid-template-columns: 1fr; }
    .don-acciones .btn-primary, .don-rechazar { width: 100%; }
    .don-celda-acciones { white-space: normal; }
    .don-celda-acciones .corpus-btn-sec { display: block; margin: 4px 0; text-align: center; }
    .don-tabla-fija th:nth-child(2), .don-tabla-fija td:nth-child(2) { display: none; }
}


/* =========================================================
   SELECTOR DE EMOJIS (editorFormato.js: index.php y editores)
   ========================================================= */
.emoji-panel {
    position: fixed;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    max-height: min(360px, 70vh);
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
.emoji-panel[hidden] { display: none; }
.emoji-tabs {
    display: flex;
    gap: 2px;
    padding: 6px;
    overflow-x: auto;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.emoji-tabs button {
    flex: 0 0 auto;
    width: 34px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    font-size: 1.1rem;
    cursor: pointer;
}
.emoji-tabs button.activo { border-color: var(--accent); background: rgba(96, 165, 250, 0.12); }
.emoji-titulo { padding: 6px 10px 2px; font-size: 0.75rem; color: var(--text-dim); flex-shrink: 0; }
.emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 2px;
    padding: 4px 6px 8px;
    overflow-y: auto;
}
.emoji-grid button {
    height: 36px;
    border: none;
    border-radius: 8px;
    background: none;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}
.emoji-grid button:hover,
.emoji-grid button:focus-visible { background: rgba(96, 165, 250, 0.18); outline: none; }
.md-texto-plano { white-space: pre-wrap; }

.variant-ctrl {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-top: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.78rem;
    color: var(--text-dim);
    border-bottom-left-radius: 4px;
}
.variant-ctrl button {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-dim);
    padding: 2px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
}
.variant-ctrl button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.variant-ctrl button:disabled { opacity: 0.4; cursor: not-allowed; }
.variant-info { min-width: 36px; text-align: center; }
.attachment-chip button {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
    font-size: 0.9rem;
    padding: 0 0 0 4px;
}
.attachment-chip button:hover { opacity: 1; }

/* =========================================================
   STAFF: login, mi cuenta, personal y auditoría
   ========================================================= */
/* Todos los campos del login y de los formularios de cuenta, no solo
   type="password" (correo, código de verificación…). */
.login-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: #0f172a;
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.98rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.login-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}
.login-container .banner { margin-bottom: 18px; }

/* «Salir» en la barra es un formulario POST: el botón se ve como un enlace. */
.nav-form { margin: 0; display: flex; }
.nav-links .nav-form button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--danger);
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}
.nav-links .nav-form button:hover {
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.2);
}
@media (max-width: 940px) {
    .nav-links .nav-form button span { display: none; }
}

.cuenta-form { display: flex; flex-direction: column; gap: 4px; max-width: 460px; }
.cuenta-form .field { margin-top: 10px; }
.cuenta-form .field > span, .cuenta-form legend {
    display: block;
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 6px;
}
.cuenta-form fieldset { border: 0; padding: 0; margin: 10px 0 0; }
.cuenta-form .btn-primary { width: auto; align-self: flex-start; padding: 11px 20px; }
.cuenta-pasos { margin: 0 0 12px; padding-left: 20px; color: var(--text-dim); font-size: 0.9rem; }
.cuenta-pasos li { margin: 4px 0; }
/* El QR va sobre blanco: las apps no leen un QR claro sobre fondo oscuro. */
.cuenta-qr { display: inline-block; background: #fff; padding: 8px; border-radius: 8px; line-height: 0; }
.cuenta-qr:empty { display: none; }
.cuenta-clave {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    color: var(--search-text);
    word-break: break-all;
}
.cuenta-codigos { border-color: var(--warning); }
.cuenta-lista-codigos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px 16px;
    margin: 10px 0 14px;
    padding-left: 22px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.cuenta-peligro { margin-top: 18px; color: var(--text-dim); }
.cuenta-peligro summary { cursor: pointer; color: var(--danger); }

.staff-nuevo summary { cursor: pointer; }
.staff-roles { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.staff-rol { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; cursor: pointer; }
.staff-rol input { accent-color: var(--accent); width: 16px; height: 16px; }
.staff-tabla .staff-fila td { border-bottom: 0; }
.staff-tabla tbody tr.staff-fila { cursor: default; }
.staff-tabla tbody tr.staff-detalle { cursor: default; }
.staff-tabla tbody tr.staff-detalle:hover, .staff-tabla tbody tr.staff-fila:hover { background: none; }
.staff-detalle td { padding-top: 0; }
.staff-detalle summary { cursor: pointer; color: var(--accent); font-size: 0.85rem; }
.staff-inactivo .corpus-nombre { color: var(--text-dim); text-decoration: line-through; }
.staff-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.staff-acciones form { margin: 0; }
.staff-acciones .corpus-btn-sec { margin: 0; }

.aud-filtros { margin-bottom: 20px; }
.aud-filtros .aud-fecha { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-dim); }
.aud-filtros .aud-fecha input { flex: 0 0 auto; }
.aud-detalle summary { cursor: pointer; color: var(--accent); font-size: 0.82rem; }
.aud-detalle pre {
    margin: 4px 0 8px;
    padding: 8px 10px;
    max-width: 520px;
    max-height: 260px;
    overflow: auto;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.6);
    font-size: 0.78rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.aud-paginas { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 24px; }

/* Aviso de solo lectura en las páginas de revisión (permiso *.ver sin *.editar). */
.banner.solo-lectura { margin: 0 auto 0; max-width: 1400px; }

/* Barra con muchas secciones (staff con varios permisos): se ensancha
   hasta el ancho de las páginas de revisión y pasa a solo íconos antes de
   desbordarse. En pantallas chicas los íconos se desplazan en horizontal. */
.main-nav.nav-amplia .nav-inner { max-width: 1400px; }
@media (max-width: 1400px) {
    .main-nav.nav-amplia .nav-links a span,
    .main-nav.nav-amplia .nav-links .nav-form button span { display: none; }
}
@media (max-width: 640px) {
    .nav-inner { gap: 8px; }
    .nav-links {
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .nav-links::-webkit-scrollbar { display: none; }
    .nav-links a, .nav-links .nav-form button { flex-shrink: 0; }
}

/* =========================================================
   CUENTAS DE USUARIO (entrar, registro…) Y CHAT CON HISTORIAL
   ========================================================= */
.cuenta-enlaces { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; font-size: 0.85rem; }
.cuenta-enlaces a { color: var(--accent); text-decoration: none; }
.cuenta-enlaces a:hover { text-decoration: underline; }
.back-link.cuenta-staff { margin-top: 8px; font-size: 0.75rem; opacity: 0.7; }
.cuenta-check { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; font-size: 0.85rem; color: var(--text-dim); line-height: 1.45; cursor: pointer; }
.cuenta-check input { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }
.cuenta-check a { color: var(--accent); }
/* Campo trampa para bots: fuera de la vista, pero no display:none (algunos bots lo detectan). */
.cuenta-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cuenta-boton { display: block; text-align: center; text-decoration: none; margin-top: 8px; }
.login-container .btn-primary.cuenta-boton { width: 100%; }

/* Barra de cupo: línea de ancho completo entre #chat y .input-area */
.cupo-barra {
    --cupo-color: var(--success);
    position: relative;
    flex-shrink: 0;
    width: 100%;
    height: 4px;
    background: rgba(148, 163, 184, 0.18);   /* tramo ya gastado */
    overflow: hidden;
}
.cupo-barra[hidden] { display: none; }
.cupo-barra-fill {
    height: 100%;
    width: 100%;
    background: var(--cupo-color);
    box-shadow: 0 0 8px var(--cupo-color);
    border-radius: 0 2px 2px 0;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1), background 0.8s ease, box-shadow 0.8s ease;
}
.cupo-barra.cupo-agotado .cupo-barra-fill { width: 0 !important; box-shadow: none; }
/* La barra ya hace de separador: se quita el borde superior del área de escritura */
.cupo-barra + .input-area { border-top: 0; }

.cupo-nota { margin: 6px 0 0; font-size: 0.75rem; color: var(--text-dim); text-align: center; }
.cupo-nota.cupo-agotado { color: var(--warning); }
.cupo-nota a { color: var(--accent); }

.conv-toggle {
    position: fixed;
    top: 68px;
    left: 12px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--panel-bg);
    color: var(--text-color);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.conv-toggle:hover { border-color: var(--accent); }
.conv-toggle[hidden] { display: none; }
.conv-panel {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    z-index: 120;
    width: min(340px, 92vw);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--panel-bg);
    border-right: 1px solid var(--border-color);
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
.conv-panel[hidden] { display: none; }
.conv-cabecera { display: flex; align-items: center; justify-content: space-between; }
.conv-cerrar { background: none; border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-dim); width: 30px; height: 30px; cursor: pointer; }
.conv-buscar {
    width: 100%;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-color);
    font: inherit;
    font-size: 0.88rem;
    outline: none;
}
.conv-buscar:focus { border-color: var(--accent); }
.conv-acciones { display: flex; gap: 8px; }
.conv-acciones .corpus-btn-sec { margin: 0; color: var(--accent); }
.conv-lista { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.conv-subtitulo { margin: 8px 0 2px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-dim); }
.conv-tema > summary { display: flex; align-items: center; gap: 6px; padding: 6px 4px; cursor: pointer; font-size: 0.85rem; list-style: none; }
.conv-tema > summary::-webkit-details-marker { display: none; }
.conv-tema > summary span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-tema .conv-item { margin-left: 12px; }
.conv-tema-op { background: none; border: 0; color: var(--text-dim); cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.conv-tema-op:hover { color: var(--text-color); background: rgba(255, 255, 255, 0.06); }
.conv-item { position: relative; display: flex; align-items: center; border-radius: 8px; }
.conv-item:hover, .conv-item.activa { background: rgba(96, 165, 250, 0.1); }
.conv-item.activa .conv-abrir { color: var(--accent); }
.conv-abrir {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 0;
    background: none;
    color: var(--text-color);
    font: inherit;
    font-size: 0.86rem;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conv-menu > summary { list-style: none; padding: 4px 8px; cursor: pointer; color: var(--text-dim); border-radius: 6px; }
.conv-menu > summary::-webkit-details-marker { display: none; }
.conv-menu[open] > summary { color: var(--text-color); }
.conv-menu-cuerpo {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 180px;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.conv-menu-cuerpo button, .conv-menu-cuerpo label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text-color);
    font: inherit;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
}
.conv-menu-cuerpo button:hover { background: rgba(255, 255, 255, 0.06); }
.conv-menu-cuerpo select { flex: 1; min-width: 0; background: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 6px; padding: 3px; font: inherit; font-size: 0.8rem; }
.conv-menu-cuerpo .conv-borrar { color: var(--danger); }
.conv-vacio { padding: 6px 10px; }
@media (max-width: 640px) {
    .conv-toggle span { display: none; }
}
.param-tabla td { vertical-align: middle; }
.param-valor { white-space: nowrap; }
.param-valor .login-input { width: 140px; padding: 8px 10px; }
.param-valor select { padding: 8px; border-radius: 10px; background: #0f172a; color: var(--text-color); border: 1px solid var(--border-color); }

/* =========================================================
   FASE 3 — Plan y saldo (facturacion.php), pagos, cuentas y planes (staff)
   ========================================================= */
.fact-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
.fact-resumen .panel { margin-bottom: 0; }
.fact-tarjeta h4 { margin: 0 0 6px; font-size: 0.8rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.cuenta-detalle .fact-tarjeta { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 14px; }
.fact-cifra { font-size: 1.6rem; font-weight: 600; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.fact-cifra small { font-size: 0.8rem; font-weight: 400; color: var(--text-dim); }
.fact-barra { height: 8px; border-radius: 4px; background: var(--card-bg); overflow: hidden; margin-bottom: 8px; }
.fact-barra span { display: block; height: 100%; background: var(--accent); }
.fact-compra { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.fact-compra fieldset { border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 16px 16px; margin: 0; min-width: 0; }
.fact-compra legend { padding: 0 6px; color: var(--text-dim); font-size: 0.85rem; }
.fact-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.fact-items legend, .fact-items > p { grid-column: 1 / -1; }
.fact-item { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 12px 38px;
             border: 1px solid var(--border-color); border-radius: 10px; background: var(--card-bg); cursor: pointer; }
.fact-item input { position: absolute; left: 12px; top: 14px; }
.fact-item:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.fact-item:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.fact-item-nombre { font-weight: 600; }
.fact-precio { color: var(--accent); font-weight: 600; font-size: 0.9rem; }
.fact-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 12px; }
.fact-compra .field { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.fact-compra .field > span { font-size: 0.82rem; color: var(--text-dim); }
.fact-instrucciones { background: var(--card-bg); border-radius: 8px; padding: 10px 12px; font-size: 0.88rem; margin: 10px 0 0; }
.fact-tabla-envoltura { overflow-x: auto; }
.fact-neg { color: var(--danger); font-variant-numeric: tabular-nums; }
.fact-pos { color: var(--success); font-variant-numeric: tabular-nums; }
.pago-estado { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.78rem; border: 1px solid var(--border-color); white-space: nowrap; }
.pago-aprobado { color: var(--success); border-color: rgba(74, 222, 128, 0.35); }
.pago-en_revision, .pago-capturado, .pago-pendiente { color: var(--warning); border-color: rgba(251, 191, 36, 0.35); }
.pago-rechazado, .pago-reembolsado, .pago-reembolso_parcial { color: var(--danger); border-color: rgba(248, 113, 113, 0.35); }
.pago-cancelado { color: var(--text-dim); }
.pago-datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 16px; font-size: 0.9rem; }
.pago-datos dt { color: var(--text-dim); }
.pago-datos dd { margin: 0; overflow-wrap: anywhere; }
.pago-acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 16px 0; align-items: start; }
.pago-acciones h4, .pago-detalle h4, .cuenta-detalle h4 { margin: 18px 0 8px; font-size: 0.85rem; color: var(--text-dim); }
.pago-comprobante { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: flex-end; }
.pago-comprobante .field { display: flex; flex-direction: column; gap: 4px; }
.pago-vistas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pago-vistas a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-color); color: var(--text-dim); text-decoration: none; font-size: 0.85rem; }
.pago-vistas a.activo { color: var(--text-color); border-color: var(--accent); background: rgba(96, 165, 250, 0.12); }
.pago-detalle a:not(.corpus-btn-sec), .cuenta-detalle a, .corpus-tabla a, .fact-tabla-envoltura a, .aud-paginas a { color: var(--accent); }
.pago-busqueda { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.pago-busqueda .login-input { flex: 1 1 220px; width: auto; }
.plan-form { padding: 8px 0 4px; }
.plan-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 12px; }
.plan-form .field { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.plan-form .field > span { font-size: 0.8rem; color: var(--text-dim); }
.plan-form .btn-primary { margin-top: 12px; }
@media (max-width: 600px) {
    .pago-datos { grid-template-columns: 1fr; }
    .pago-datos dt { margin-top: 6px; }
}

/* Fase 5 — sistemas conectados (tenants.php, sistemas.php) */
.tenant h3 code { font-size: 0.8rem; color: var(--text-dim); text-transform: none; }
.tenant-pasos { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-left: 18px; margin: 10px 0; font-size: 0.85rem; color: var(--text-dim); }
.tenant-pasos li.hecho { color: var(--success); }
.tenant-pasos li.hecho::marker { content: '✓ '; }
.tenant-adjuntos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tenant-adjuntos .nav-form { display: inline; }
.tenant-keys { list-style: none; padding: 0; }
.tenant-keys li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
.sistemas-limite { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sistemas-limite .login-input { width: 130px; }
.corpus-layout main a:not([class]) { color: var(--accent); }

/* ── Portal de descargas (fase 7) ───────────────────────────────────────── */
.portal-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.portal-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.portal-tabs a { color: var(--text-dim); text-decoration: none; padding: 6px 12px; border-radius: 8px; font-size: 0.9rem; }
.portal-tabs a:hover { color: var(--text-color); background: var(--card-bg); }
.portal-tabs a.activa { color: var(--text-color); background: var(--card-bg); box-shadow: inset 0 -2px 0 var(--accent); }
.portal-main { max-width: 1100px; margin: 0 auto; }
.portal-hero h1 { margin: 0 0 8px; font-size: 1.5rem; }
.portal-hero p { margin: 0; color: var(--text-dim); max-width: 70ch; }
.portal-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; }
.portal-version { font-size: 1.1rem; margin: 4px 0; }
.portal-boton { display: inline-block; text-decoration: none; margin: 8px 0; width: auto; }
.portal-sha { font-size: 0.75rem; word-break: break-all; }
.portal-notas summary { cursor: pointer; color: var(--accent); }
.portal-pasos ol { padding-left: 20px; display: grid; gap: 6px; }
.portal-snippet { background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; overflow-x: auto; }
.portal-doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.portal-indice { position: sticky; top: 12px; font-size: 0.85rem; }
.portal-indice ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.portal-indice a { color: var(--text-dim); text-decoration: none; }
.portal-indice a:hover { color: var(--accent); }
.portal-md { line-height: 1.6; max-width: 100%; }
.portal-md h1 { font-size: 1.6rem; margin-top: 0; }
.portal-md h2 { font-size: 1.25rem; margin-top: 1.6em; padding-top: 0.4em; border-top: 1px solid var(--border-color); }
.portal-md h3 { font-size: 1.05rem; margin-top: 1.3em; }
.portal-md code { background: var(--bg-color); padding: 1px 5px; border-radius: 4px; font-size: 0.88em; }
.portal-md pre { background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; overflow-x: auto; }
.portal-md pre code { padding: 0; background: none; }
.portal-md blockquote { margin: 1em 0; padding: 4px 14px; border-left: 3px solid var(--accent); color: var(--text-dim); }
.md-tabla { overflow-x: auto; margin: 1em 0; }
.md-tabla table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.md-tabla th, .md-tabla td { border: 1px solid var(--border-color); padding: 6px 10px; text-align: left; vertical-align: top; }
.md-tabla th { background: var(--card-bg); }
@media (max-width: 860px) {
    .portal-grid, .portal-doc { grid-template-columns: minmax(0, 1fr); }
    .portal-indice { position: static; }
}

/* ── Cola de trabajos (fase 8) ──────────────────────────────────────────── */
.trabajo-params { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.trabajo-params[hidden] { display: none; }
.cuenta-form label.check { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; margin-top: 8px; }
.trabajo-datos dd { margin: 0; overflow-wrap: anywhere; }
.trabajo-log {
    max-height: 60vh; overflow: auto; margin: 0; padding: 12px; border-radius: 8px;
    background: var(--input-bg, rgba(0, 0, 0, 0.25)); border: 1px solid var(--border-color);
    font: 0.78rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
}
.trabajo-log:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.piloto-uso table { font-size: 0.82rem; }
.piloto-uso td.num, .piloto-uso th.num { text-align: right; white-space: nowrap; }

/* ── Configuración (solo superadministrador) ─────────────────────────────── */
.config-tabs { margin: 0 0 16px; }
.config-form { max-width: 820px; }
.config-grupo { border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)); border-radius: 10px; padding: 12px 16px 14px; margin: 14px 0; }
.config-grupo legend { padding: 0 6px; font-size: 0.85rem; color: var(--text-dim); }
.config-form .field { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.config-form .field > span:first-child { font-size: 0.8rem; color: var(--text-dim); }
.config-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.config-form .check { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 0.9rem; }
.config-form .btn-primary { margin-top: 6px; }
.campo-error { color: var(--danger, #f87171); font-size: 0.8rem; }
.config-form [aria-invalid="true"] { border-color: var(--danger, #f87171); }
.config-atenuado { opacity: 0.55; }
.config-prueba { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.config-prueba .login-input { flex: 1 1 260px; width: auto; }

/* ── Chat anónimo (anonimos.php, solo lectura) ───────────────────────────── */
.anon-tabla td.num, .anon-tabla th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.anon-cupo { min-width: 140px; }
.anon-cupo .fact-barra { margin: 2px 0 4px; }
.fact-barra span.lleno { background: var(--danger); }
.anon-tabla .corpus-tag { margin-left: 6px; }
.anon-resumen { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.anon-resumen .fact-cifra { font-size: 1.45rem; }

/* cuentas.php: activación de registros que no se completaron */
.activacion-panel { border: 1px solid var(--border-color); border-left: 4px solid #d29922; border-radius: 12px; padding: 4px 16px 12px; margin: 14px 0; }
.activacion-panel h4 { margin-top: 12px; }
.activacion-enlaces { margin: 6px 0; padding-left: 18px; }
.activacion-aviso { color: #d29922; }
.activacion-url p { margin: 0 0 8px; }
.activacion-copiar { display: flex; gap: 8px; flex-wrap: wrap; }
.activacion-copiar .login-input { flex: 1 1 240px; min-width: 0; font-family: ui-monospace, monospace; font-size: 0.8rem; }
.anon-staff { margin-top: -6px; }

/* configuracion_inferencia.php */
.inferencia-campos { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.inferencia-campos code { font-size: 0.75rem; }
.config-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.config-botones .btn-primary { width: auto; padding: 11px 20px; }
.inline-form { display: inline; margin-left: 8px; }
.inferencia-presupuesto th { text-align: left; padding-top: 12px; }
.inferencia-presupuesto td.num { text-align: right; white-space: nowrap; }
#system { font-family: ui-monospace, monospace; font-size: 0.85rem; }

/* Respuesta que sigue generándose en el servidor (el navegador se desconectó: p. ej. pantalla bloqueada) */
.generando-aviso { margin: 6px 0 0; font-size: 0.78rem; color: var(--text-dim); font-style: italic; }

/* ── Configuración → Estado (estado.php) ───────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.estado-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; border-left: 4px solid var(--border-color); }
.estado-resumen.estado-ok    { border-left-color: var(--success); }
.estado-resumen.estado-aviso { border-left-color: var(--warning); }
.estado-resumen.estado-error { border-left-color: var(--danger); }
.estado-resumen-titulo { display: flex; align-items: center; gap: 14px; flex: 1 1 260px; }
.estado-resumen-titulo h3 { margin: 0 0 2px; font-size: 1.05rem; }
.estado-resumen-titulo p { margin: 0; }
.estado-resumen-titulo .estado-marca { width: 36px; height: 36px; font-size: 1.1rem; }
.estado-contadores { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0; padding: 0; font-size: 0.85rem; color: var(--text-dim); }
.estado-contadores strong { font-size: 1.1rem; margin-right: 4px; }
.estado-contadores .estado-error strong { color: var(--danger); }
.estado-contadores .estado-aviso strong { color: var(--warning); }
.estado-contadores .estado-ok strong    { color: var(--success); }
.estado-contadores .estado-info strong  { color: var(--accent); }
.estado-recargar { text-decoration: none; margin: 0; }
.estado-desc { margin: -8px 0 12px; word-break: break-word; }
.estado-tabla-envoltura { overflow-x: auto; }
.estado-tabla { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.estado-tabla th, .estado-tabla td { padding: 8px 10px; border-top: 1px solid var(--border-color); text-align: left; vertical-align: top; }
.estado-tabla thead th { border-top: 0; color: var(--text-dim); font-weight: 500; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.estado-tabla tbody th { font-weight: 600; white-space: nowrap; }
.estado-tabla td:first-child { width: 32px; }
.estado-tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.estado-tabla td:nth-child(3) { color: var(--text-dim); word-break: break-word; }
.estado-fila-error td:nth-child(3) { color: var(--text-color); }
.estado-ms.medio { color: var(--warning); }
.estado-ms.lento { color: var(--danger); font-weight: 600; }
.estado-marca { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 0.75rem; font-weight: 700; }
.estado-marca.estado-ok    { background: rgba(74,222,128,0.15);  color: var(--success); }
.estado-marca.estado-aviso { background: rgba(251,191,36,0.15);  color: var(--warning); }
.estado-marca.estado-error { background: rgba(248,113,113,0.15); color: var(--danger); }
.estado-marca.estado-info  { background: rgba(96,165,250,0.15);  color: var(--accent); }
.estado-claves tbody th { white-space: normal; overflow-wrap: anywhere; }
.estado-claves .estado-par { display: block; margin-top: 3px; font-weight: 400; font-size: 0.78rem; color: var(--text-dim); }
.estado-claves .estado-huella { white-space: nowrap; }
.estado-claves td:nth-child(3) { color: var(--text-color); }
@media (max-width: 700px) {
    .estado-tabla tbody th { white-space: normal; }
    .estado-tabla .sin-ms { display: none; }
    .estado-tabla thead { display: none; }
    .estado-tabla tr { display: grid; grid-template-columns: 32px 1fr auto; border-top: 1px solid var(--border-color); padding: 6px 0; }
    .estado-tabla th, .estado-tabla td { border-top: 0; padding: 4px 6px; }
    .estado-tabla tr > :nth-child(3) { grid-column: 2 / -1; }
    .estado-tabla tr > :nth-child(n+4) { grid-column: 2 / -1; text-align: left; }
}