/* =============================================================
   CHIRRAS — Custom Application Styles
   Compatible con Bootstrap 5.3 (data-bs-theme dark/light)
   ============================================================= */

/* ── Colores de marca ────────────────────────────────────────── */
:root {
    --color-pnp: #205135;
    --color-pnp-soft: rgba(32, 81, 53, .08);
}

[data-bs-theme="dark"] {
    --color-pnp: #2e7a4e;
    --color-pnp-soft: rgba(46, 122, 78, .15);
}

.bg-pnp {
    background-color: var(--color-pnp) !important;
    color: #f3f3f3 !important;
}

.btn-pnp {
    background-color: var(--color-pnp) !important;
    color: #f3f3f3 !important;
    border-color: var(--color-pnp) !important;
}

.btn-pnp:hover,
.btn-pnp:focus {
    background-color: #184228 !important;
    border-color: #184228 !important;
    color: #fff !important;
}

.text-pnp  { color: var(--color-pnp) !important; }
.border-pnp { border-color: var(--color-pnp) !important; }
.bg-pnp-soft { background-color: var(--color-pnp-soft) !important; }

/* ── Tema: fondo del header en modo claro ───────────────────── */
[data-bs-theme="light"] .bg-theme {
    background-color: var(--color-pnp) !important;
}

/* ── Animación pulse ─────────────────────────────────────────── */
.pulse { animation: pulse 1.5s infinite; }

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.1); }
}

/* ── Cards de imagen ─────────────────────────────────────────── */
.card-img-custom {
    object-fit: cover !important;
    width:  100% !important;
    height: 200px !important;
}

.card-img-custom-300 {
    object-fit: cover !important;
    width:  100% !important;
    height: 300px !important;
}

.card-img-custom-mini {
    object-fit: cover !important;
    width:  100px !important;
    height: 100px !important;
}

/* ── Utilidades generales ────────────────────────────────────── */
.pointer        { cursor: pointer !important; }
.text-justify   { text-align: justify !important; }
.text-shadow    { text-shadow: 2px 2px 2.5px #000 !important; }
.bg-secondary-custom { background-color: #f3f3f3; }

a {
    text-decoration: none !important;
    cursor: pointer;
}

/* ── Imagen con zoom al hover ────────────────────────────────── */
.destination-img { transition: transform .3s ease; }
.destination-img:hover { transform: scale(1.1); }

/* ── WhatsApp botón flotante ─────────────────────────────────── */
.whatsapp-ico {
    fill: white;
    width: 50px;
    height: 50px;
    padding: 3px;
    background-color: #4dc247;
    border-radius: 50%;
    box-shadow: 2px 2px 6px rgba(0,0,0,.4);
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
}
.whatsapp-ico:hover { box-shadow: 2px 2px 11px rgba(0,0,0,.7); }

/* ── Editor Quill ────────────────────────────────────────────── */
li[data-list="bullet"]::before {
    content: none !important;
    counter-reset: none !important;
}
.ql-editor {
    white-space: normal !important;
    padding: 10px 0 5px !important;
}
[data-bs-theme="dark"] .ql-editor { color: white; }

/* ── Breakpoint custom sm-md (680-997px) ────────────────────── */
@media (min-width: 680px) and (max-width: 997px) {
    .row-cols-sm-md-3 > * {
        flex: 0 0 auto;
        width: 33.33% !important;
    }
}

/* ── Selector de tema: item activo en dropdown ──────────────── */
[data-bs-theme-value].active {
    font-weight: 600;
    background-color: var(--color-pnp-soft);
}

/* ── Dark mode: ajustes finos sobre Bootstrap 5.3 ───────────── */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--bs-gray-800) !important;
}
[data-bs-theme="dark"] .shadow,
[data-bs-theme="dark"] .shadow-lg,
[data-bs-theme="dark"] .shadow-sm {
    box-shadow: none !important;
}
[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(300%);
}
[data-bs-theme="dark"] .bg-secondary-custom {
    background-color: var(--bs-gray-800);
}