/* ==========================================================================
   ESTILOS DEFINITIVOS Y AJUSTADOS PARA EL SNIPPET
   ========================================================================== */

/* 1. El Contenedor Principal: Define el marco y el espaciado con la página.
----------------------------------------------------------------------------- */
.codeskill-container {
    border: 1px solid #ccc;
    background: transparent;             /* Se deja transparente para no interferir con los colores internos. */
    margin: 25px 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* 2. El Bloque de Código <pre>: El corazón visual del snippet.
----------------------------------------------------------------------------- */
.codeskill-pre {
    position: relative;
    background: #ffffff !important;
    border: none;
    border-bottom: 1px solid #ccc;
    margin: 0;
    padding: 0 15px 0 21px !important;
    border-top: 13px solid transparent !important;
    border-bottom: 13px solid transparent !important;    
    overflow-x: auto;
    font-family: 'MonoLisa', monospace !important;
    white-space: pre;
}

/* 3. Cada Línea de Código: Ajuste final de espaciado.
----------------------------------------------------------------------------- */
.code-line {
    display: block;
    margin: 0;
    padding: 0;
    /*
       'line-height' controla la separación ENTRE cada línea de código.
       Lo he reducido un poco para un look más compacto.
    */
    line-height: 1.4 !important; /* <--- VALOR LIGERAMENTE REDUCIDO */
    color: black !important;
}

.code-line:hover {
    background-color: #f5f5f5;
}

/* Estilos para el contenedor del número de línea */
.line-number {
    /* Permite que el pseudo-elemento se posicione en relación a este contenedor */
    position: relative;

    /* Hacemos espacio a la derecha para la nueva línea y para que no se pegue al código */
    padding-right: 15px; 
    margin-right: 15px; 
}

/* Creación de la línea vertical con un pseudo-elemento */
.line-number::after {
    content: ''; /* Requerido para que el pseudo-elemento se muestre */
    position: absolute;
    top: -2px;
    bottom: -2px;

    /* Posiciona la línea a la derecha del contenedor */
    right: 0; 

    /* Define la línea en sí */
    width: 1px; /* Grosor de la línea */
    background-color: #e0e0e0; /* Color gris sutil y elegante */
}

/* ==========================================================================
   ESTILOS PARA EL BOTÓN DE COPIAR (VERSIÓN MINIMALISTA PREMIUM)
   ========================================================================== */

.codeskill-copy-button {
    /* Eliminamos la apariencia de botón */
    background: transparent;
    border: none;

    /* Estilo del texto y el ícono */
    color: #757575; /* Un gris oscuro y suave */
    font-size: 0.9em; /* Un poco más grande para mejor legibilidad */
    font-weight: 400;
    cursor: pointer;
    margin-right: 12px;
    padding: 6px; /* Un poco de padding para que el área de clic sea cómoda */
    border-radius: 4px; /* Un borde redondeado sutil para el fondo del hover */

    /* CLAVE: Alineación perfecta de ícono y texto */
    display: flex;
    align-items: center;

    /* Transición suave para el hover */
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* Espacio entre el ícono y el texto */
.codeskill-copy-button i {
    margin-right: 6px; 
}

/* Hover: La clave para la descubribilidad */
.codeskill-copy-button:hover {
    color: #0073aa; /* Un color de acento, el azul de WordPress es una buena opción */
    background-color: #f0f0f0; /* Un fondo casi imperceptible aparece al pasar el cursor */
}

/* ==========================================================================
   ESTILOS PARA EL FOOTER DEL SNIPPET
   ========================================================================== */

/* Apuntamos a todas las clases de footer para añadir la línea superior */
.m-code-style-footer,
.dax-code-style-footer,
.csharp-style-footer,
.powerfx-style-footer {
    border-top: 1px solid #e0e0e0; /* Una línea sutil para separar */
}