/* =========================================
   1. CONTENEDOR PRINCIPAL (Efecto hundido celeste)
   ========================================= */
.lh-wrap {
    text-align: center;
    margin: 15px auto;
    max-width: 600px;
    background: #e4f1fb;
    padding: 30px 20px; /* <-- Cambiado: 30px arriba y abajo da ese margen interno agradable */
    border-radius: 10px;
    box-shadow: 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, 0.25) inset;
}

/* =========================================
   2. BOTÓN INICIAL (Estilo jQuery UI normal)
   ========================================= */
/* =========================================
   2. BOTÓN INICIAL (Textura realista estilo jQuery UI)
   ========================================= */
.linkhidder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 5px 16px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    border: 1px solid #74b2e2;
    color: #096FDB;
    
    /* Reemplazamos la imagen lin.png por un gradiente CSS exacto.
       Empieza muy claro arriba y termina en el celeste agua del fondo */
    background: linear-gradient(to bottom, #f6fafd 0%, #e4f1fb 100%); 
    
    cursor: pointer;
    outline: none;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
    
    /* Pequeña sombra para realzar el efecto de botón */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
}

/* HOVER BOTÓN INICIAL (Color claro al pasar el cursor) */
.linkhidder:hover {
    border-color: #5ea6d8; /* Un borde sutilmente más definido */
    
    /* El fondo se vuelve más blanco/luminoso */
    background: linear-gradient(to bottom, #ffffff 0%, #f0f7fc 100%);
    color: #096FDB;
}

.linkhidder:active {
    background: linear-gradient(to bottom, #cce4f5 0%, #ddeef9 100%);
    border-color: #4a95cc;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.15);
    transform: translateY(1px);
    color: #0860c0;
}

/* =========================================
   3. ESTADOS DE CARGA Y PROCESAMIENTO
   ========================================= */
.linkhidder:disabled,
.linkhidder.lh-loading {
    border-color: #a0c4e8;
    color: #6a9fc0;
    background: #f0f7fc;
    cursor: not-allowed;
    box-shadow: none;
}

.linkhidder.lh-loading,
.linkhidder.lh-downloading {
    pointer-events: none;
}

/* ESTADO TRANSICIÓN (Procesando...) */
.linkhidder.lh-downloading {
    border: 1px solid #6caf40;
    color: #fff !important;
    background: linear-gradient(to bottom, #88e64f 0%, #5ed037 100%);
    opacity: 0.7;
}

/* =========================================
   4. ESTADO FINAL EXITOSO (.ui-button-positive)
   ========================================= */
.linkhidder.lh-ready {
    border-top: 1px solid #6caf40;
    border-right: 1px solid #53a32e;
    border-bottom: 1px solid #3e9a20;
    border-left: 1px solid #53a32e;
    background: linear-gradient(to bottom, #88e64f 0%, #5ed037 100%);
    box-shadow: inset 0 1px 0 0 #c9f2b8, 0 1px 2px 0 #b7b7b7;
    color: #fff !important;
    text-shadow: 0 -1px 1px #4cb622;
    cursor: pointer; /* Mantiene la manito */
    pointer-events: auto;
}

/* HOVER ESTADO FINAL (Verde más intenso) */
.linkhidder.lh-ready:hover {
    background: linear-gradient(to bottom, #78da40 0%, #45b31d 100%);
    border-top: 1px solid #59a62a;
    border-right: 1px solid #59a62a;
    border-bottom: 1px solid #438918;
    border-left: 1px solid #59a62a;
}

/* =========================================
   5. SPOILER Y CAJA INTERNA DE ENLACES
   ========================================= */
.lh-spoiler {
    display: grid;
    grid-template-rows: 0fr; 
    opacity: 0;
    transition: grid-template-rows 0.4s ease-out, opacity 0.4s ease-out;
}

.lh-spoiler.open {
    grid-template-rows: 1fr; 
    opacity: 1;
}

.lh-spoiler-content {
    overflow: hidden; 
}

/* CAJA INTERNA (.info_bbc adaptada) */
.lh-spoiler-inner {
    border: 1px dashed #3190d3;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 0 3px #ddd inset;
    padding: 10px 15px;
    margin: 15px auto 0 auto; /* Separa la caja del botón y la centra */
    width: 90%; /* Ocupa menos espacio que el contenedor celeste */
    max-width: 500px;
    text-align: center;
}

/* ESTILO DE LOS ENLACES (Simulan ser <a> pero son <span>) */
.lh-spoiler-inner .lh-links {
    color: #096FDB;
    font-size: 14px;
    font-weight: 500; 
    word-break: break-all;
    
    /* El truco para el área cliqueable: */
    display: block;             /* Lo mantiene en su propia línea */
    width: fit-content;         /* Encoge la caja solo al tamaño del texto */
    margin: 0 auto 5px auto;    /* Lo centra (auto) y mantiene la separación (5px) */
    
    transition: color 0.2s ease-in-out;
    cursor: pointer;
}

.lh-spoiler-inner .lh-links:last-child {
    margin-bottom: 0;
}

/* Efecto hover */
.lh-spoiler-inner .lh-links:hover {
    color: #c0392b;
    text-decoration: underline;
}

.swal2-html-container {
    color: #fff !important;
}
.custom-icon {
    background: #ff3d00;
}
.custom-title {
    color: #ff3d00;
}
.custom-popup {
    background: -webkit-linear-gradient(360deg, #1c1c1c 10%, #494949 360%);
    background: -moz-linear-gradient(360deg, #1c1c1c 10%, #494949 360%);
    background: linear-gradient(360deg, #1c1c1c 10%, #494949 360%);
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 1px solid #3b3b3b;
}
.custom-progress {
    background-color: #ff3d00;
}
.custom-button {
	display: inline-block;
    font-size: 15px;
    font-weight: 300;
    padding: 10px 28px;
    border-radius: 6px;
    cursor: pointer;
    outline: 0;
    border: none;
    color: #fff;
    box-sizing: border-box;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    box-shadow: 0 2px 0 rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.15);
    transition: filter 0.18s, box-shadow 0.18s, transform 0.1s;
}
.custom-button:hover {
    filter: brightness(1.12);
	box-shadow: 0 3px 0 rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.15);
	transform: translateY(-1px);
}
.custom-button:active {
    filter: brightness(0.9);
    box-shadow: 0 1px 0 rgba(0,0,0,0.18), inset 0 2px 2px rgba(0,0,0,0.18);
    transform: translateY(1px);
}

.btn-red  { background: #ff3d00; border-bottom: 2px solid #8c0000; }