/* comparador-textos — estilos específicos */

/* Tabs de modo entrada */
.input-tabs {
    display: flex;
    gap: 0;
    border: 2px solid var(--border, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1rem;
    width: fit-content;
}

.input-tab {
    padding: 0.55rem 1.25rem;
    border: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.input-tab+.input-tab {
    border-left: 2px solid var(--border, #e2e8f0);
}

.input-tab.active {
    background: var(--primary, #2563eb);
    color: #fff;
}

.input-tab:hover:not(.active) {
    background: rgba(37, 99, 235, 0.06);
    color: var(--primary, #2563eb);
}

/* Panel de entrada pegado */
.input-panel {
    display: none;
}

.input-panel.visible {
    display: block;
}

/* Grid lado a lado para las áreas de texto */
.textarea-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.textarea-col label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}

.textarea-col label .lbl-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.textarea-col label .lbl-dot.dot-a {
    background: #2563eb;
}

.textarea-col label .lbl-dot.dot-b {
    background: #7c3aed;
}

.textarea-col textarea {
    width: 100%;
    min-height: 200px;
    padding: 0.85rem 1rem;
    border: 2px solid var(--border, #e2e8f0);
    border-radius: 10px;
    font-family: 'JetBrains Mono', 'Ubuntu Mono', monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text, #1e293b);
    background: var(--bg-input, #f8fafc);
    resize: vertical;
    transition: border-color 0.18s, box-shadow 0.18s;
    box-sizing: border-box;
}

.textarea-col textarea:focus {
    outline: none;
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
    background: #fff;
}

.textarea-col.col-b textarea:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.10);
}

/* Barra de acciones del textarea: limpiar, pegar demo */
.textarea-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.35rem;
    flex-wrap: wrap;
}

.ta-action-btn {
    padding: 0.25rem 0.7rem;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: 20px;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: all 0.13s;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.ta-action-btn:hover {
    border-color: var(--primary, #2563eb);
    color: var(--primary, #2563eb);
    background: rgba(37, 99, 235, 0.05);
}

/* Área de subida de archivos */
.file-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.file-drop-zone {
    border: 2px dashed var(--border, #e2e8f0);
    border-radius: 12px;
    padding: 1.5rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.18s;
    background: var(--bg-alt, #f8fafc);
    font-family: 'Montserrat', sans-serif;
}

.file-drop-zone:hover,
.file-drop-zone.drag-over {
    border-color: var(--primary, #2563eb);
    background: rgba(37, 99, 235, 0.04);
}

.file-drop-zone .fdz-icon {
    font-size: 1.5rem;
    color: var(--primary, #2563eb);
    margin-bottom: 0.5rem;
}

.file-drop-zone .fdz-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
}

.file-drop-zone .fdz-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text, #1e293b);
    margin-top: 0.3rem;
    min-height: 1.1em;
}

.file-drop-zone input[type="file"] {
    display: none;
}

/* Opciones de comparación */
.options-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    align-items: center;
}

.opt-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    user-select: none;
}

.opt-toggle input[type="checkbox"] {
    display: none;
}

.opt-toggle .toggle-track {
    width: 34px;
    height: 18px;
    background: var(--border, #e2e8f0);
    border-radius: 9px;
    position: relative;
    transition: background 0.15s;
    flex-shrink: 0;
}

.opt-toggle input:checked+.toggle-track {
    background: var(--primary, #2563eb);
}

.opt-toggle .toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.opt-toggle input:checked+.toggle-track::after {
    transform: translateX(16px);
}

.opt-toggle .tog-label {
    font-size: 0.79rem;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    color: var(--text, #1e293b);
}

/* Selector de granularidad */
.granularity-btns {
    display: flex;
    gap: 0;
    border: 2px solid var(--border, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
}

.gran-btn {
    padding: 0.35rem 0.85rem;
    border: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: all 0.13s;
}

.gran-btn+.gran-btn {
    border-left: 1.5px solid var(--border, #e2e8f0);
}

.gran-btn.active {
    background: var(--primary, #2563eb);
    color: #fff;
}

.gran-btn:hover:not(.active) {
    background: rgba(37, 99, 235, 0.06);
    color: var(--primary, #2563eb);
}

/* Estadísticas rápidas del input */
.input-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.istat {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
}

.istat strong {
    color: var(--text, #1e293b);
    font-family: 'Ubuntu', monospace, sans-serif;
}

/* Nota privacidad */
.privacy-note {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 0.6rem 0.9rem;
    background: rgba(5, 150, 105, 0.06);
    border-left: 3px solid #10b981;
    border-radius: 0 8px 8px 0;
    font-size: 0.78rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--text, #1e293b);
    margin-bottom: 1rem;
}

.privacy-note i {
    color: #10b981;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* === SECCIÓN RESULTADOS === */

/* Barra de similitud */
.similarity-hero {
    background: linear-gradient(135deg, #1e293b, #334155);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.sim-gauge-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.sim-gauge-wrap svg {
    transform: rotate(-90deg);
}

.sim-gauge-wrap .sg-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 8;
}

.sim-gauge-wrap .sg-val {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.7s ease;
}

.sim-pct-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Ubuntu', monospace, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.sim-info {
    flex: 1;
    min-width: 180px;
}

.sim-info .si-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.3rem;
}

.sim-info .si-val {
    font-family: 'Ubuntu', monospace, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.sim-info .si-sub {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.3rem;
}

/* Cards de estadísticas */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.stat-card {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    padding: 0.85rem 0.9rem;
    background: #fff;
}

.stat-card .sc-label {
    font-size: 0.68rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: var(--text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

.stat-card .sc-row {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-family: 'Ubuntu', monospace, sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
}

.stat-card .sc-a {
    color: #2563eb;
}

.stat-card .sc-b {
    color: #7c3aed;
}

.stat-card .sc-sep {
    color: var(--text-muted, #cbd5e1);
    font-size: 0.75rem;
}

/* Tabs de vista de resultados */
.result-view-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border, #e2e8f0);
    margin-bottom: 1rem;
}

.rv-tab {
    padding: 0.6rem 1.1rem;
    border: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.14s;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.rv-tab.active {
    color: var(--primary, #2563eb);
    border-bottom-color: var(--primary, #2563eb);
}

.rv-tab:hover:not(.active) {
    color: var(--text, #1e293b);
}

.rv-tab .rv-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: rgba(37, 99, 235, 0.12);
    color: var(--primary, #2563eb);
    font-size: 0.65rem;
    font-weight: 700;
}

/* Panel de vista de resultados */
.rv-panel {
    display: none;
}

.rv-panel.visible {
    display: block;
}

/* Vista lado a lado */
.diff-side-by-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    font-family: 'JetBrains Mono', 'Ubuntu Mono', monospace;
    font-size: 0.8rem;
    line-height: 1.7;
}

.diff-col-header {
    padding: 0.55rem 1rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.diff-col-header.hdr-a {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    border-bottom: 1px solid var(--border, #e2e8f0);
}

.diff-col-header.hdr-b {
    background: rgba(124, 58, 237, 0.08);
    color: #7c3aed;
    border-bottom: 1px solid var(--border, #e2e8f0);
    border-left: 1px solid var(--border, #e2e8f0);
}

.diff-col-body {
    max-height: 450px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.diff-col-body.body-b {
    border-left: 1px solid var(--border, #e2e8f0);
}

.diff-line {
    display: flex;
    align-items: flex-start;
    min-height: 1.7em;
}

.diff-line-num {
    min-width: 38px;
    padding: 0 0.5rem;
    text-align: right;
    color: rgba(100, 116, 139, 0.5);
    font-size: 0.72rem;
    user-select: none;
    flex-shrink: 0;
    line-height: 1.7;
    border-right: 1px solid var(--border, #e2e8f0);
}

.diff-line-content {
    padding: 0 0.75rem;
    flex: 1;
    white-space: pre-wrap;
    word-break: break-all;
}

.diff-line.line-equal {
    background: transparent;
}

.diff-line.line-del {
    background: rgba(220, 38, 38, 0.07);
}

.diff-line.line-add {
    background: rgba(5, 150, 105, 0.07);
}

.diff-line.line-empty {
    background: rgba(100, 116, 139, 0.04);
}

.diff-line.line-del .diff-line-content {
    color: #991b1b;
}

.diff-line.line-add .diff-line-content {
    color: #065f46;
}

.diff-line.line-empty .diff-line-content {
    color: transparent;
}

.diff-line-marker {
    width: 14px;
    flex-shrink: 0;
    text-align: center;
    font-weight: 700;
    line-height: 1.7;
    font-size: 0.8rem;
}

.diff-line.line-del .diff-line-marker {
    color: #dc2626;
}

.diff-line.line-add .diff-line-marker {
    color: #059669;
}

.diff-line.line-equal .diff-line-marker {
    color: transparent;
}

/* Highlight de palabras dentro de la línea */
.tok-add {
    background: rgba(5, 150, 105, 0.22);
    border-radius: 2px;
}

.tok-del {
    background: rgba(220, 38, 38, 0.18);
    border-radius: 2px;
    text-decoration: line-through;
}

/* Vista unificada (inline) */
.diff-unified {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    font-family: 'JetBrains Mono', 'Ubuntu Mono', monospace;
    font-size: 0.8rem;
    line-height: 1.7;
    max-height: 500px;
    overflow-y: auto;
}

.unified-line {
    display: flex;
    align-items: flex-start;
}

.unified-line .ul-nums {
    display: flex;
    flex-shrink: 0;
}

.unified-line .ul-num {
    min-width: 38px;
    padding: 0 0.5rem;
    text-align: right;
    color: rgba(100, 116, 139, 0.5);
    font-size: 0.72rem;
    user-select: none;
    border-right: 1px solid var(--border, #e2e8f0);
    line-height: 1.7;
}

.unified-line .ul-marker {
    width: 22px;
    text-align: center;
    font-weight: 700;
    line-height: 1.7;
    flex-shrink: 0;
}

.unified-line .ul-content {
    padding: 0 0.75rem;
    flex: 1;
    white-space: pre-wrap;
    word-break: break-all;
}

.unified-line.ul-del {
    background: rgba(220, 38, 38, 0.07);
}

.unified-line.ul-add {
    background: rgba(5, 150, 105, 0.07);
}

.unified-line.ul-del .ul-marker {
    color: #dc2626;
}

.unified-line.ul-add .ul-marker {
    color: #059669;
}

.unified-line.ul-del .ul-content {
    color: #991b1b;
}

.unified-line.ul-add .ul-content {
    color: #065f46;
}

.unified-hunk {
    background: rgba(37, 99, 235, 0.06);
    padding: 0.25rem 1rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: #2563eb;
    border-top: 1px solid var(--border, #e2e8f0);
    border-bottom: 1px solid var(--border, #e2e8f0);
}

/* Vista solo cambios (palabras) */
.word-diff-wrap {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    max-height: 500px;
    overflow-y: auto;
}

.word-diff-line {
    display: flex;
    gap: 0;
    align-items: flex-start;
    border-bottom: 1px solid var(--border, #e2e8f0);
}

.word-diff-line:last-child {
    border-bottom: none;
}

.word-diff-line:nth-child(even) {
    background: var(--bg-alt, #f8fafc);
}

.wdl-num {
    min-width: 38px;
    padding: 0.4rem 0.5rem;
    text-align: right;
    color: rgba(100, 116, 139, 0.5);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    border-right: 1px solid var(--border, #e2e8f0);
    flex-shrink: 0;
    line-height: 1.6;
}

.wdl-content {
    padding: 0.4rem 0.85rem;
    flex: 1;
    font-family: 'JetBrains Mono', 'Ubuntu Mono', monospace;
    font-size: 0.8rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
}

.w-add {
    background: rgba(5, 150, 105, 0.2);
    border-radius: 3px;
    color: #065f46;
    padding: 0 2px;
    font-weight: 700;
}

.w-del {
    background: rgba(220, 38, 38, 0.15);
    border-radius: 3px;
    color: #991b1b;
    padding: 0 2px;
    font-weight: 700;
    text-decoration: line-through;
}

/* Leyenda de colores */
.diff-legend {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    align-items: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.ld-add {
    background: rgba(5, 150, 105, 0.25);
    border: 1.5px solid #059669;
}

.ld-del {
    background: rgba(220, 38, 38, 0.18);
    border: 1.5px solid #dc2626;
}

.ld-eq {
    background: var(--bg-alt, #f1f5f9);
    border: 1.5px solid var(--border, #e2e8f0);
}

/* Sin diferencias */
.no-diff-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-muted, #64748b);
    font-family: 'Montserrat', sans-serif;
}

.no-diff-msg i {
    font-size: 2rem;
    color: #10b981;
}

.no-diff-msg strong {
    font-size: 1rem;
    color: var(--text, #1e293b);
}

/* Scrollbar sincronizado — indicador visual */
.sync-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #10b981;
    margin-left: auto;
}

@media (max-width: 680px) {
    .textarea-grid {
        grid-template-columns: 1fr;
    }

    .file-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .diff-side-by-side {
        grid-template-columns: 1fr;
    }

    .diff-col-header.hdr-b,
    .diff-col-body.body-b {
        border-left: none;
        border-top: 2px solid var(--border, #e2e8f0);
    }

    .similarity-hero {
        flex-direction: column;
        gap: 0.75rem;
    }
}