/** ------------------------------------------------------------------
 *  codigo.css — bloque de código, vista diff y resaltado de sintaxis
 *  ------------------------------------------------------------------ */

.archivo {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
    margin-bottom: 1.1rem;
    background-color: #0b1017;
}

.archivo__barra {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .9rem;
    background-color: var(--fondo-3);
    border-bottom: 1px solid var(--borde);
    font-size: .8rem;
}

.archivo__ruta {
    font-family: var(--fuente-mono);
    color: var(--texto);
}
.archivo__lenguaje {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--texto-3);
    padding: .1rem .45rem;
    border: 1px solid var(--borde);
    border-radius: 4px;
}
.archivo__nota {
    color: var(--texto-3);
    font-size: .76rem;
    margin-left: auto;
    text-align: right;
}

.archivo__acciones { display: flex; gap: .4rem; margin-left: auto; }
.archivo__acciones + .archivo__nota { margin-left: .6rem; }

.boton-mini {
    padding: .22rem .6rem;
    font-size: .74rem;
    border-radius: 5px;
    border: 1px solid var(--borde);
    background-color: var(--fondo);
    color: var(--texto-2);
    cursor: pointer;
}
.boton-mini:hover { color: var(--texto); border-color: var(--texto-3); }
.boton-mini.activo {
    color: var(--primario);
    border-color: rgb(255 193 7 / 45%);
    background-color: rgb(255 193 7 / 10%);
}

/* ── Código ───────────────────────────────────────────────────────── */
.codigo {
    margin: 0;
    padding: .8rem 0;
    overflow-x: auto;
    font-family: var(--fuente-mono);
    font-size: .84rem;
    line-height: 1.65;
    tab-size: 4;
}

.linea {
    display: flex;
    min-width: max-content;
    width: 100%;
}
.linea__marca {
    flex: 0 0 auto;
    width: 2.4rem;
    padding-right: .5rem;
    text-align: right;
    color: #3d4b5e;
    user-select: none;
}
.linea__texto {
    flex: 1 1 auto;
    padding-right: 1.2rem;
    white-space: pre;
}

.linea--add { background-color: rgb(63 191 127 / 12%); }
.linea--add .linea__marca { color: var(--exito); }
.linea--del { background-color: rgb(242 97 107 / 12%); }
.linea--del .linea__marca { color: var(--peligro); }
.linea--del .linea__texto { opacity: .65; }

.leyenda-diff {
    display: flex;
    gap: 1rem;
    padding: .45rem .9rem;
    border-top: 1px solid var(--borde);
    background-color: var(--fondo-2);
    font-size: .74rem;
    color: var(--texto-3);
}
.leyenda-diff b { font-weight: 600; }
.leyenda-diff .es-add { color: var(--exito); }
.leyenda-diff .es-del { color: var(--peligro); }

/* ── Resaltado de sintaxis ────────────────────────────────────────── */
.tok-comentario { color: #5f7183; font-style: italic; }
.tok-etiqueta   { color: #7ee787; }
.tok-atributo   { color: #ffc978; }
.tok-cadena     { color: #a5d6ff; }
.tok-numero     { color: #f0a8c0; }
.tok-palabra    { color: #ff7b72; }
.tok-propiedad  { color: #79c0ff; }
.tok-selector   { color: #ffd580; }
.tok-variable   { color: #d2a8ff; }
.tok-funcion    { color: #d2a8ff; }
.tok-simbolo    { color: #8b98a9; }
.tok-valor      { color: #a5d6ff; }
.tok-regla      { color: #ff7b72; }