/* Paleta blanco y negro para toda la página */
html[data-theme="light"], body {
    --b1: #fff !important;
    --b2: #f3f3f3 !important;
    --b3: #e5e5e5 !important;
    --bc: #222 !important;
    --p: #222 !important;
    --pc: #fff !important;
    --s: #444 !important;
    --sc: #fff !important;
    --a: #000 !important;
    --ac: #fff !important;
    --n: #222 !important;
    --nc: #fff !important;
    --btn-bg: #fff !important;
    --btn-border: #222 !important;
    --btn-text: #222 !important;
    --btn-hover-bg: #222 !important;
    --btn-hover-text: #fff !important;
}

/* Botones blanco y negro */
.btn,
.btn-primary,
.btn-secondary,
.btn-accent,
.btn-outline,
.btn-success,
.btn-error,
.btn-info,
.btn-warning {
    background-color: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    border-color: var(--btn-border) !important;
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-accent:hover,
.btn-outline:hover,
.btn-success:hover,
.btn-error:hover,
.btn-info:hover,
.btn-warning:hover {
    background-color: var(--btn-hover-bg) !important;
    color: var(--btn-hover-text) !important;
    border-color: var(--btn-border) !important;
}

/* Tarjetas y badges blanco y negro */
.badge,
.badge-primary,
.badge-secondary,
.badge-accent,
.badge-info,
.badge-success,
.badge-warning,
.badge-error,
.card,
.card-body,
.modal-box {
    background-color: #fff !important;
    color: #222 !important;
    border-color: #222 !important;
}

/* Iconos y textos de color */
.text-primary,
.text-secondary,
.text-accent,
.text-success,
.text-error,
.text-info,
.text-warning {
    color: #222 !important;
}

/* Enlaces */
a {
    color: #222 !important;
}
a:hover {
    color: #fff !important;
    background-color: #222 !important;
}

/* Inputs y selects */
.input,
.select,
.textarea {
    background-color: #fff !important;
    color: #222 !important;
    border-color: #222 !important;
}
.input:focus,
.select:focus,
.textarea:focus {
    border-color: #222 !important;
    box-shadow: 0 0 0 2px #222 !important;
}

/* Redondea todas las esquinas visibles en la página */
.card,
.card-body,
.badge,
.modal-box,
.input,
.select,
.textarea,
.btn,
.carousel,
.carousel-item,
img,
.dialog,
.stat,
.menu,
.navbar,
.footer,
.header,
.section,
aside,
nav,
form,
textarea,
input,
select {
    border-radius: 1rem !important;
}

/* Para imágenes dentro de cards y carrusel */
img {
    border-radius: 1rem !important;
}

/* Para botones circulares, mantener el círculo */
.btn-circle {
    border-radius: 50% !important;
}

/* Aumenta un 5% las sombras en toda la página excepto el carrusel */

/* Sombreados generales */
.card,
.navbar,
.footer,
.modal,
.menu,
.btn,
.input,
.select,
.textarea {
    box-shadow: 0 4px 24px rgba(0,0,0,0.20); /* antes 0.2, ahora 0.21 (+5%) */
}

/* Excepción: Carrusel */
.carousel,
.carousel-item {
    box-shadow: none !important;
}

/* Reduce un 30% la sombra en la barra lateral de redes sociales */
.fixed.top-1\/2.right-0,
.fixed.top-1\/2.right-0.transform.-translate-y-1\/2.z-50.flex.flex-col.items-center.space-y-2.bg-white.shadow-lg.rounded-l-xl.py-4.px-2 {
    /* Si la sombra original era box-shadow: 0 4px 24px rgba(0,0,0,0.2); */
    box-shadow: 0 4px 24px rgba(0,0,0,0.14) !important; /* 0.2 - 30% = 0.14 */
}