body,html{background:var(--secondary); scrollbar-color:var(--light) var(--dark); scroll-behavior:smooth;}

a, a:hover, a:visited, a:focus {text-decoration:none;}
.cursor-pointer {cursor:pointer;}

.CML_font {font-family:'Oregano',cursive;font-weight:400;font-style:normal;}

.spinner {display:none; opacity:0; width:50px; height:50px; border:6px solid var(--dark); border-top:6px solid var(--light);
border-radius:50%; animation:spin 1s linear infinite; position:absolute; z-index:3;}
@keyframes spin {0% { transform:rotate(0deg);} 100% {transform:rotate(360deg);}}

#global-loader {position:fixed; inset:0; background:var(--primary); color:var(--light); display:flex; flex-direction:column; pointer-events:none; align-items:center; justify-content:center; z-index:50;}
#global-loader .spinner {display:block; opacity:1;}
#loader-percentage {margin-top:100px; font-size:18px; color:var(--light);}

.text-truncate-2 {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;}
.text-truncate-3 {display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;}
.text-justify {text-align: justify !important;}

.noselect {user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;}

.sticky-top {position:sticky; top:0; z-index:40;}

.sombra {box-shadow:5px 5px 10px rgba(0,0,0,0.3)!important;}

.CML_hero, .CML_footer {background-size:cover; background-repeat:no-repeat; background-position:center center;}
.CML_hero {background-image:linear-gradient(var(--secondary),rgba(0,0,0,1)),url(&#39;&#39;);}
.CML_hero h1 {font-size:clamp(6rem, 18vw, 20rem); text-shadow:5px 5px 10px black;}
@media (max-width:480px) {
  .CML_hero h1 {font-size: min(28vw, 28vh);}
  .CML_hero h1 span {display:block;}
}

.CML_images {flex-direction: row;}
.CML_images .logocamalu {width:50%; margin:auto;}
.CML_images .logoradio {width:40%; margin:18px auto 0 auto;}
@media (max-width: 480px) {
.CML_images {display:flex; flex-direction:column; width:100%;}
.CML_images .logocamalu {width:100%; margin:auto;}
.CML_images .logoradio {width:80%; margin:auto;}
}

.CML_footer {background-image:linear-gradient(var(--secondary),rgba(0,0,0,1)),url(&#39;&#39;);}

#frasesBox{min-height:100px; cursor:pointer;}
#mensaje{transition:opacity 0.6s ease-in-out;opacity:0;}

/* ENTRADAS */

h2.date-header {padding:0; margin:0; font-size:100%; text-align:center;}
h3.post-title {padding:0 0 30px 0; margin:0; text-align:center;}
#Blog1 img {width:100% !important; height:auto !important; margin:0 !important; padding:0 !important; border-radius: 0.25rem;}
#Blog1 .separator a {margin:0 !important; padding:0 !important;}
.blog-pager {display:none;}
.blog-feeds {display:none;}
.post-outer {margin:0 0 40px 0; padding:0;}

/*================================================================== PLAYER */

.cmlplayer {display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center !important;}

.marquee-container {display:flex; width:100%; overflow:hidden;}
.marquee-text {flex-shrink:0; display:inline-block; animation:marquee-animation 10s linear infinite;}
@keyframes marquee-animation{0%{transform:translateX(100%);}100%{transform:translateX(-100%);}}

/* BOTONES */

.btn-active{animation:blink 2s infinite; color:var(--white);}
@keyframes blink{0%,100%{background-color:var(--primary);}50%{background-color:var(--success); border-color:var(--primary)}}
.blink {animation:blink-fade 1s infinite;}
@keyframes blink-fade {0%,100%{opacity:1;}50%{opacity:0;}}

#btnPlay {width:80px; height:80px; border-radius:20%; display:flex !important; align-items:center; justify-content:center; padding:0; background-color:var(--primary);}
#btnPlay .bi {font-size:3rem; margin:0;}

#playGroup {display:flex; flex-direction:column; align-items:center; justify-content:center;}
#playLabel {font-size:0.8rem; margin-top:4px; display:none;}

.cmlplayer .btn {border:2px solid var(--light) !important; color:var(--white) !important;}
.cmlplayer .btn:not(#btnPlay) {flex:0 0 auto !important; height:auto !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:0.5rem 0.75rem; margin:0 0.25rem;}

.cmlplayer .d-flex, .cmlplayer .btn {align-self:center !important;}

/*================================================================== YOUTUBE */

#videos {grid-template-columns:repeat(3, 1fr); display:grid; gap:1.4rem; align-items:stretch;}
@media (max-width:767px) {
#videos {grid-template-columns:1fr; }
}

.card {height:auto;}
.card-body {min-height:auto;} 

.video-card {position:relative; width:100%; overflow:hidden;}
.yt-frame {position:relative; width:100%; aspect-ratio:16/9; cursor:pointer;}
.yt-frame iframe {position:absolute; inset:0; width:100% !important; height:100% !important; border:0; pointer-events:none;}

.play-icon, .restart-icon, .fullscreen-icon, .close-fullscreen-icon {font-size:20px; z-index:5; color:var(--white); background:var(--primary); border:none; border-radius:50%; width:35px; height:35px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.restart-icon {font-size:15px;}
.play-icon:hover, .restart-icon:hover, .fullscreen-icon:hover, .close-fullscreen-icon:hover {background:var(--success);}

.controles {position:absolute; bottom:5px; right:5px; display:flex; flex-direction:row; gap:5px; background:rgba(0,0,0,0.5); padding:5px; border-radius:6px; z-index:6;}

.overlay {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; z-index:2;}
.duration-tag {position:absolute; bottom:15px; left:10px; background:var(--black); color:var(--white); padding:2px 5px; z-index:4;}

.video-info h3 {margin:15px 0 5px 0;}
.video-info {margin:0;}
.video-info p {margin:0;}
.video-info small {margin:10px 0 0 10px;}

.contenedor_de_video:-webkit-full-screen, .contenedor_de_video:-moz-full-screen, .contenedor_de_video:-ms-fullscreen, .contenedor_de_video:fullscreen { width:100% !important; height:100% !important; position:fixed !important; top:0; left:0; background:#000; z-index:30;}
.contenedor_de_video:-webkit-full-screen .overlay, .contenedor_de_video:-moz-full-screen .overlay, .contenedor_de_video:-ms-fullscreen .overlay, .contenedor_de_video:fullscreen .overlay {display:flex; justify-content:flex-start; align-items:flex-end; padding:1em;}

/*================================================================== BLOG */

#tagMenu, .tagMenuPost {display:flex; flex-wrap:wrap;} 
#tagMenu .active, .tagMenuPost a.active {background:var(--success)!important;} 

#feedCards{grid-template-columns:repeat(2, 1fr); display:grid; gap:1.4rem;}
@media (max-width:767px) {
#feedCards {grid-template-columns:1fr; }
}

#feedCards .post-item {position: relative; overflow: hidden; height: 450px; padding-bottom: 1em; background: url('https://cdn.jsdelivr.net/gh/CamaluRadio/icon/favicon-512x512.png') center/cover no-repeat; /* placeholder como fondo fijo */
}
#feedCards .post-item img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
#feedCards .post-item .post-overlay {position:absolute; bottom:0; left:0; width:100%; padding:0.3rem 1rem; background:rgba(0,0,0,0.7); color:#fff;}
#feedCards .post-item .post-overlay h3 {font-size:clamp(1rem, 1.5vw, 2rem);}
#feedCards .post-item .post-overlay a {text-decoration:none;}

#loadMoreBtn {display:block; margin:1em auto;}

.modal-backdrop {z-index:5000 !important;}
#postModal {z-index:5001 !important;}
#postModal .modal-content {background:var(--white); color:var(--black); border-radius:0; box-shadow:none;}
#postModal .modal-header, .menu-header {background:var(--secondary); color:var(--white); border-bottom:2px solid var(--dark); height:80px;} 
#postModal .modal-footer {background:var(--secondary); color:var(--white); border-top:2px solid var(--dark); height:50px; padding:0; line-height: 1;}
#postModal .modal-title {font-size:1.5rem;}
#postModal .btn-close {filter:invert(1);}

#postModal .modal-body {overflow-y:auto; max-height:calc(100vh - 80px);}
#postModal .modal-body img {width:100%; max-width:100%; height:auto; border-radius:8px; margin:0; padding:0; outline:none; display:block; vertical-align:middle; box-shadow:none; cursor:zoom-in;}
#postModal .modal-body a {}
#postModal .modal-body a:hover {}
#postModal .modal-body p {line-height:1.6; margin-bottom:1rem;}
.eleditor, .eleditor .row, .eleditor .col-auto {margin:0; padding:0;}

#modalImgLightbox {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.95); justify-content:center; align-items:center; overflow:hidden; z-index:5002;}
#modalImgLightbox img {max-width:90%; max-height:90%; border-radius:8px; cursor:grab; transition:transform 0.18s ease; touch-action:none;}
#modalImgLightbox .closeBtn {position:absolute; top:22px; right:16px;}
/* small helper to show a subtle hint */
#modalImgLightbox .hint {position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,0.8); font-size:0.9rem; z-index:5003;}

.share-btn {width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; border-radius: 50%; font-size: 2em;}
#postModal .share-btn, .share-footer .share-btn {width: 30px; height: 30px; font-size: 1.2em;}
.share-btn:hover {transform: scale(1.1);}
.share-btn i {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; line-height: 1;}
.btn-facebook{background:#3b5998;}
.btn-twitter{background:#1da1f2;}
.btn-whatsapp{background:#25d366;}
.btn-linkedin{background:#0077b5;}
.btn-telegram{background:#0088cc;}
.btn-discord{background:#7289da;}


.btn-copy{background:#6c757d;}

/*================================================================== TTS */

.tts-help-inline {position: fixed; top: 20%; left: 50%; transform: translateX(-50%); z-index: 7000; border: 1px solid #ccc; border-radius: 5px; padding: 12px 16px 8px 16px; background-color: #f8f9fa; font-size: 0.875rem; display: none; width: 300px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); cursor: pointer; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease;}
.tts-help-inline.show {display: block; opacity: 1; transform: translateX(-50%) translateY(0);}
.tts-help-inline .close-btn {position: absolute; top: 4px; right: 6px; background: transparent; border: none; font-size: 1rem; cursor: pointer;}
.tts-highlight {background-color:var(--light);}