{"id":62,"date":"2025-09-07T04:09:11","date_gmt":"2025-09-07T04:09:11","guid":{"rendered":"https:\/\/ballesterosdev.com\/?page_id=62"},"modified":"2025-10-14T04:25:22","modified_gmt":"2025-10-14T04:25:22","slug":"elementor-page-62","status":"publish","type":"page","link":"https:\/\/ballesterosdev.com\/","title":{"rendered":"Saludos ballesteros.dev te da la hora"},"content":{"rendered":"\n<style>\n\/* ====================================================================== *\/\n\/* 1. RESET Y DEFINICI\u00d3N DE VARIABLES *\/\n\/* ====================================================================== *\/\n\n\/* RESET PARA WORDPRESS - Esto es crucial *\/\n#mi-reloj-personalizado * {\n    box-sizing: border-box !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    line-height: 1 !important;\n}\n \n#mi-reloj-personalizado {\n    --clock-size: min(80vw, 350px);\n    --clock-border: calc(var(--clock-size) * 0.05);\n    --hand-width-hour: calc(var(--clock-size) * 0.015);\n    --hand-width-minute: calc(var(--clock-size) * 0.01);\n    --hand-width-second: calc(var(--clock-size) * 0.005);\n    --number-size: calc(var(--clock-size) * 0.08);\n    \n    display: flex !important;\n    flex-direction: column !important; \n    justify-content: center !important;\n    align-items: center !important;\n    background: none !important;\n    margin: 20px auto !important; \n    padding: 0 !important; \n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;\n    position: relative !important;\n    z-index: 1 !important;\n    isolation: isolate !important;\n    width: fit-content !important; \n}\n\n\/* ESTILO DEL TEXTO SOLICITADO *\/\n#mi-reloj-personalizado .header-text {\n    font-size: 1.5em !important;\n    font-weight: 700 !important;\n    color: #2c3e50 !important;\n    margin-bottom: 20px !important;\n    text-align: center !important;\n    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) !important;\n}\n\n\/* ====================================================================== *\/\n\/* 2. ESTRUCTURA DEL RELOJ *\/\n\/* ====================================================================== *\/\n\n#mi-reloj-personalizado .clock-container {\n    display: flex !important;\n    justify-content: center !important;\n    align-items: center !important;\n    width: 100% !important;\n    position: relative !important;\n    z-index: 2 !important;\n}\n\n#mi-reloj-personalizado .clock {\n    width: var(--clock-size) !important;\n    height: var(--clock-size) !important;\n    border: var(--clock-border) solid rgba(255, 255, 255, 0.3) !important;\n    border-radius: 50% !important;\n    position: relative !important;\n    box-shadow: \n        0 15px 35px rgba(0, 0, 0, 0.3),\n        inset 0 5px 15px rgba(255, 255, 255, 0.2),\n        inset 0 -5px 15px rgba(0, 0, 0, 0.1) !important;\n    background: radial-gradient(circle at center, #f9f9f9 0%, #e6e6e6 100%) !important;\n    display: flex !important;\n    justify-content: center !important;\n    align-items: center !important;\n}\n\n#mi-reloj-personalizado .clock-face {\n    position: relative !important;\n    width: 90% !important;\n    height: 90% !important;\n    border-radius: 50% !important;\n}\n\n\/* ====================================================================== *\/\n\/* 3. MANECILLAS Y PUNTO CENTRAL - VERSI\u00d3N CORREGIDA *\/\n\/* ====================================================================== *\/\n\n#mi-reloj-personalizado .hand {\n    position: absolute !important;\n    top: 50% !important;\n    left: 50% !important;\n    transform-origin: 0% 50% !important;\n    border-radius: 5px !important;\n    z-index: 10 !important;\n    transition: all 0.05s cubic-bezier(0.1, 2.7, 0.58, 1) !important;\n}\n\n#mi-reloj-personalizado .hour-hand {\n    height: var(--hand-width-hour) !important;\n    width: 30% !important;\n    background: linear-gradient(to right, #2c3e50, #34495e) !important;\n    margin-top: calc(var(--hand-width-hour) \/ -2) !important;\n    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;\n}\n\n#mi-reloj-personalizado .minute-hand {\n    height: var(--hand-width-minute) !important;\n    width: 40% !important;\n    background: linear-gradient(to right, #34495e, #2c3e50) !important;\n    margin-top: calc(var(--hand-width-minute) \/ -2) !important;\n    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;\n}\n\n#mi-reloj-personalizado .second-hand {\n    height: var(--hand-width-second) !important;\n    width: 45% !important;\n    background: linear-gradient(to right, #e74c3c, #c0392b) !important;\n    margin-top: calc(var(--hand-width-second) \/ -2) !important;\n    z-index: 15 !important;\n    box-shadow: 0 0 5px rgba(231, 76, 60, 0.5) !important;\n}\n\n#mi-reloj-personalizado .center-dot {\n    width: calc(var(--clock-size) * 0.03) !important;\n    height: calc(var(--clock-size) * 0.03) !important;\n    background: #e74c3c !important;\n    border-radius: 50% !important;\n    position: absolute !important;\n    top: 50% !important;\n    left: 50% !important;\n    transform: translate(-50%, -50%) !important;\n    z-index: 20 !important;\n    border: 2px solid white !important;\n    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) !important;\n}\n\n\/* ====================================================================== *\/\n\/* 4. MARCAS Y N\u00daMEROS *\/\n\/* ====================================================================== *\/\n\n#mi-reloj-personalizado .number {\n    position: absolute !important;\n    font-size: var(--number-size) !important;\n    font-weight: 700 !important;\n    color: #2c3e50 !important;\n    transform: translate(-50%, -50%) !important; \n    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8) !important;\n}\n\n\/* Posiciones de los n\u00fameros *\/\n#mi-reloj-personalizado .number1 { top: 20% !important; left: 75% !important; }\n#mi-reloj-personalizado .number2 { top: 35% !important; left: 88% !important; }\n#mi-reloj-personalizado .number3 { top: 50% !important; left: 93% !important; }\n#mi-reloj-personalizado .number4 { top: 65% !important; left: 88% !important; }\n#mi-reloj-personalizado .number5 { top: 80% !important; left: 75% !important; }\n#mi-reloj-personalizado .number6 { top: 85% !important; left: 50% !important; }\n#mi-reloj-personalizado .number7 { top: 80% !important; left: 25% !important; }\n#mi-reloj-personalizado .number8 { top: 65% !important; left: 12% !important; }\n#mi-reloj-personalizado .number9 { top: 50% !important; left: 7% !important; }\n#mi-reloj-personalizado .number10 { top: 35% !important; left: 12% !important; }\n#mi-reloj-personalizado .number11 { top: 20% !important; left: 25% !important; }\n#mi-reloj-personalizado .number12 { top: 15% !important; left: 50% !important; }\n\n\/* Marcas de minutos y horas *\/\n#mi-reloj-personalizado .mark {\n    position: absolute !important;\n    top: 50% !important;\n    left: 50% !important;\n    transform-origin: 0% 0% !important;\n}\n\n#mi-reloj-personalizado .hour-mark {\n    width: calc(var(--clock-size) * 0.008) !important;\n    height: calc(var(--clock-size) * 0.03) !important;\n    background: #2c3e50 !important;\n    transform: rotate(calc(var(--i) * 30deg)) translate(calc(var(--clock-size) * 0.4), calc(var(--clock-size) * -0.015)) !important;\n}\n\n#mi-reloj-personalizado .minute-mark {\n    width: calc(var(--clock-size) * 0.004) !important;\n    height: calc(var(--clock-size) * 0.015) !important;\n    background: #7f8c8d !important;\n    transform: rotate(calc(var(--i) * 6deg)) translate(calc(var(--clock-size) * 0.4), calc(var(--clock-size) * -0.0075)) !important;\n}\n\n\/* Efecto de brillo en el borde *\/\n#mi-reloj-personalizado .clock::before {\n    content: '' !important;\n    position: absolute !important;\n    top: -5px !important;\n    left: -5px !important;\n    right: -5px !important;\n    bottom: -5px !important;\n    border-radius: 50% !important;\n    background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.3)) !important;\n    z-index: -1 !important;\n    filter: blur(10px) !important;\n}\n<\/style>\n\n<div id=\"mi-reloj-personalizado\">\n    <div class=\"header-text\">Ballesteros te da la hora<\/div>\n    \n    <div class=\"clock-container\">\n        <div class=\"clock\">\n            <div class=\"clock-face\">\n                <div class=\"number number1\">1<\/div>\n                <div class=\"number number2\">2<\/div>\n                <div class=\"number number3\">3<\/div>\n                <div class=\"number number4\">4<\/div>\n                <div class=\"number number5\">5<\/div>\n                <div class=\"number number6\">6<\/div>\n                <div class=\"number number7\">7<\/div>\n                <div class=\"number number8\">8<\/div>\n                <div class=\"number number9\">9<\/div>\n                <div class=\"number number10\">10<\/div>\n                <div class=\"number number11\">11<\/div>\n                <div class=\"number number12\">12<\/div>\n                \n                <div class=\"hand hour-hand\" id=\"hour-hand\"><\/div>\n                <div class=\"hand minute-hand\" id=\"minute-hand\"><\/div>\n                <div class=\"hand second-hand\" id=\"second-hand\"><\/div>\n                \n                <div class=\"center-dot\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n\/\/ VERSI\u00d3N COMPATIBLE CON WORDPRESS - SIN && PROBLEM\u00c1TICOS\ndocument.addEventListener('DOMContentLoaded', function() {\n    console.log(\"\u23f0 Iniciando reloj...\");\n    \n    function generateMarks() {\n        var clockFace = document.querySelector('#mi-reloj-personalizado .clock-face');\n        if (clockFace === null) {\n            console.log(\"Reloj no encontrado a\u00fan, reintentando...\");\n            setTimeout(generateMarks, 100);\n            return;\n        }\n        \n        console.log(\"\u2705 Reloj encontrado, generando marcas...\");\n        \n        \/\/ Limpiar marcas existentes\n        var existingMarks = clockFace.querySelectorAll('.mark');\n        for (var i = 0; i < existingMarks.length; i++) {\n            existingMarks[i].remove();\n        }\n        \n        \/\/ Generar marcas de horas\n        for (var h = 0; h < 12; h++) {\n            var mark = document.createElement('div');\n            mark.className = 'mark hour-mark';\n            mark.style.setProperty('--i', h);\n            clockFace.appendChild(mark);\n        }\n        \n        \/\/ Generar marcas de minutos\n        for (var m = 0; m < 60; m++) {\n            if (m % 5 !== 0) {\n                var mark = document.createElement('div');\n                mark.className = 'mark minute-mark';\n                mark.style.setProperty('--i', m);\n                clockFace.appendChild(mark);\n            }\n        }\n    }\n    \n    function setClock() {\n        var now = new Date();\n        var seconds = now.getSeconds();\n        var minutes = now.getMinutes();\n        var hours = now.getHours();\n        \n        var secondDeg = ((seconds \/ 60) * 360) + 90;\n        var minuteDeg = ((minutes \/ 60) * 360) + ((seconds \/ 60) * 6) + 90;\n        var hourDeg = ((hours % 12) \/ 12 * 360) + ((minutes \/ 60) * 30) + 90;\n        \n        var hourHand = document.getElementById('hour-hand');\n        var minuteHand = document.getElementById('minute-hand');\n        var secondHand = document.getElementById('second-hand');\n        \n        if (hourHand !== null) {\n            hourHand.style.transform = 'rotate(' + hourDeg + 'deg)';\n        }\n        if (minuteHand !== null) {\n            minuteHand.style.transform = 'rotate(' + minuteDeg + 'deg)';\n        }\n        if (secondHand !== null) {\n            secondHand.style.transform = 'rotate(' + secondDeg + 'deg)';\n        }\n        \n        console.log('Hora actual: ' + hours + ':' + minutes + ':' + seconds);\n    }\n    \n    \/\/ Inicializar\n    generateMarks();\n    setClock();\n    setInterval(setClock, 1000);\n    \n    console.log(\"\u2705 Reloj iniciado correctamente\");\n});\n\n\/\/ Backup simplificado - sin &#038;&#038; problem\u00e1ticos\nsetTimeout(function() {\n    var hourHand = document.getElementById('hour-hand');\n    if (hourHand !== null) {\n        if (hourHand.style.transform === '') {\n            console.log(\"\ud83d\udd04 Ejecutando backup...\");\n            location.reload();\n        }\n    }\n}, 2000);\n<\/script>\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ballesteros te da la hora 1 2 3 4 5 6 7 8 9 10 11 12<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-62","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ballesterosdev.com\/index.php\/wp-json\/wp\/v2\/pages\/62","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ballesterosdev.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ballesterosdev.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ballesterosdev.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ballesterosdev.com\/index.php\/wp-json\/wp\/v2\/comments?post=62"}],"version-history":[{"count":26,"href":"https:\/\/ballesterosdev.com\/index.php\/wp-json\/wp\/v2\/pages\/62\/revisions"}],"predecessor-version":[{"id":266,"href":"https:\/\/ballesterosdev.com\/index.php\/wp-json\/wp\/v2\/pages\/62\/revisions\/266"}],"wp:attachment":[{"href":"https:\/\/ballesterosdev.com\/index.php\/wp-json\/wp\/v2\/media?parent=62"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}