/* Estilos básicos para el contenedor del shortbox */
.shortbox-container {
    position: relative; /* Necesario para posicionar el icono */
    box-sizing: border-box; /* Asegura que padding y border no aumenten el tamaño total */
}

/* Estilos para el icono */
.shortbox-icon {
    position: absolute;
    top: -10px; /* Ajusta según sea necesario para que esté arriba del borde */
    left: -10px; /* Ajusta según sea necesario para que esté a la izquierda del borde */
    background-color: #fff; /* Para que el fondo del icono sea blanco y "rompa" el borde */
    padding: 2px; /* Pequeño padding alrededor del icono */
    border-radius: 50%; /* Opcional: para que el fondo sea circular */
    font-size: 24px; /* Tamaño del icono */
    line-height: 1; /* Asegura que el icono no añada espacio extra */
    z-index: 10; /* Para asegurar que el icono esté sobre el borde */
    display: inline-flex; /* Usar flexbox para centrar el icono si hay espacio extra */
    align-items: center;
    justify-content: center;
}

/* Ajustes si el icono tiene un borde específico */
.shortbox-icon.dashicons {
    color: #333; /* Color predeterminado del icono, puedes sobrescribirlo */
}

/* Pequeño ajuste al contenido si hay icono para que no lo solape */
.shortbox-container .shortbox-icon + * {
    /* Esto es un selector adyacente, afecta al primer hermano después del icono. */
    /* Podrías necesitar ajustar estos valores si cambias el tamaño o posición del icono. */
    padding-top: 15px;
    padding-left: 15px;
}