/*
Theme Name: astra_child
Theme URI: 
Description: Child theme de Mi Tema Padre
Author: Javi Ramos
Template: astra
Version: 1.0.1
Text Domain: mi-tema-hijo
*/

/* ===============================
   POST Y CATEGORÍAS
   =============================== */
.posted_in,
.cat-links {
   display: none !important;
}

.entry-meta {
   font-size: 0;
}

.entry-meta .posted-on {
   font-size: 14px !important;
}

/* ===============================
   GRID DE ESQUELAS
   =============================== */
.esquelas-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 1em;
}

/* ===============================
   ESTILO UNIFICADO PARA POSTS Y ESQUELAS
   =============================== */
.elementor-post,
.single-post .post,
.esquela-item {
   border: 1px solid #14532d;
   border-left: 6px solid #14532d;
   border-radius: 12px;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
   overflow: hidden;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   display: flex;
   flex-direction: column;
}

.elementor-post:hover,
.esquela-item:hover {
   transform: translateY(-5px);
   box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* ===============================
   IMÁGENES RECTANGULARES
   =============================== */
.elementor-post__thumbnail img,
.esquela-item img {
   width: 100%;
   height: 160px;
   object-fit: cover;
   display: block;
   border-radius: 0;
}

/* ===============================
   CONTENIDO INTERNO
   =============================== */
.elementor-post__text,
.esquela-item .esquela-text,
.single-post .post .entry-content {
   padding: 15px 18px;
}

/* ===============================
   TÍTULOS
   =============================== */
.elementor-post__title,
.esquela-item .esquela-title,
.single-post .entry-title {
   font-size: 1.2rem;
   font-weight: 700;
   color: #111827;
   margin: 0 0 8px 0;
}

/* ===============================
   FECHA O SUBTÍTULO
   =============================== */
.elementor-post-date,
.esquela-item .esquela-date,
.single-post .entry-meta {
   font-size: 0.8rem;
   color: #6b7280;
   margin-bottom: 10px;
}

/* ===============================
   EXTRACTO O TEXTO BREVE
   =============================== */
.elementor-post__excerpt p,
.esquela-item .esquela-excerpt,
.single-post .entry-content p {
   font-size: 0.95rem;
   line-height: 1.5;
   color: #444;
   margin-bottom: 12px;
}

/* ===============================
   IMÁGENES DENTRO DEL POST DETALLADO
   =============================== */
.single-post .entry-content img {
   border-radius: 8px;
   margin: 20px 0;
   max-width: 100%;
   height: auto;
}

/* ===============================
   BOTÓN RADIO
   =============================== */
#radio-button-player {
   display: flex;
   align-items: center;
   gap: 8px;
   background: rgba(0, 0, 0, 0.85);
   color: #fff;
   padding: 6px 12px;
   border-radius: 12px;
   cursor: pointer;
   z-index: 9999;
}

/* Escritorio: flotante */
@media (min-width: 769px) {
   #radio-button-player {
      position: fixed;
      bottom: 20px;
      left: 20px;
   }

   /* MODAL ADAPTABLE AL CONTENIDO EN DESKTOP */
   #player-modal {
      width: auto !important;
      min-width: 250px !important;
      max-width: 90vw !important;
      white-space: nowrap !important;
   }

   /* Texto del programa adaptable - DESKTOP */
   #player-modal[style*="display: block"] span,
   #player-modal #programa-actual {
      white-space: nowrap !important;
      overflow: visible !important;
      text-overflow: clip !important;
      flex: none !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      color: #333 !important;
      margin-left: 0 !important;
      text-align: left !important;
      max-width: none !important;
      width: auto !important;
   }
}

@media (max-width: 768px) {

   /* BOTÓN EN LA BARRA VERDE DEL MENÚ */
   #radio-button-player {
      position: absolute !important;
      top: 112px !important;
      /* Subido 20px desde la posición anterior */
      right: 200px !important;
      /* Movido otros 50px más a la izquierda */
      bottom: auto !important;
      left: auto !important;
      transform: none !important;
      z-index: 999 !important;
      margin: 0 !important;

      /* Botón más grande */
      padding: 10px 16px !important;
      font-size: 14px !important;
      height: auto !important;

      /* Fondo negro y estilo mejorado */
      background: rgba(0, 0, 0, 0.9) !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      color: white !important;
      border-radius: 12px !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
   }

   /* Texto del botón más pequeño */
   #radio-button-player span {
      font-size: 11px !important;
      font-weight: 600 !important;
   }

   /* Logo del botón más pequeño */
   #radio-button-player img {
      width: 16px !important;
      height: 16px !important;
   }

   /* LED parpadeante más pequeño */
   #radio-button-player div {
      width: 8px !important;
      height: 8px !important;
   }

   /* OCULTAR EL MODAL PERO MANTENER BOTÓN DE CERRAR */
   #player-modal {
      background: none !important;
      border: none !important;
      box-shadow: none !important;
      padding: 0 !important;
      position: absolute !important;
      top: 125px !important;
      left: calc(100vw - 100px) !important;
      right: auto !important;
      width: auto !important;
      height: auto !important;
   }

   /* Ocultar todo el contenido del modal excepto el botón */
   #player-modal img,
   #player-modal span,
   #player-modal audio {
      display: none !important;
   }

   /* Mostrar solo el botón de cerrar con estilo mejorado */
   #player-modal button {
      display: flex !important;
      background: rgba(239, 68, 68, 0.9) !important;
      border: none !important;
      color: white !important;
      width: 32px !important;
      height: 32px !important;
      border-radius: 50% !important;
      cursor: pointer !important;
      font-size: 14px !important;
      align-items: center !important;
      justify-content: center !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
      transition: all 0.2s ease !important;
   }

   #player-modal button:hover {
      background: rgba(220, 38, 38, 1) !important;
      transform: scale(1.1) !important;
   }

   /* Eliminar TODOS los elementos visuales excepto texto y botón */
   #player-modal[style*="display: block"] img,
   #player-modal[style*="display: block"] div:not(button) {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
      position: absolute !important;
      left: -9999px !important;
   }

   /* Asegurar que no hay divs con fondo blanco */
   #player-modal[style*="display: block"] * {
      background-color: transparent !important;
   }

   #player-modal[style*="display: block"] *:not(span):not(button) {
      display: none !important;
   }

   /* REGLAS PARA SPAN MOVIDAS A MÓVIL - VER @media (max-width: 768px) */

   #player-modal[style*="display: block"] audio {
      display: none !important;
   }

   #player-modal[style*="display: block"] button {
      background: #ef4444 !important;
      border: none !important;
      color: white !important;
      width: 18px !important;
      height: 18px !important;
      border-radius: 50% !important;
      cursor: pointer !important;
      font-size: 10px !important;
      margin-left: 6px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-shrink: 0 !important;
   }

   #player-modal[style*="display: block"] button:hover {
      background: #dc2626 !important;
      transform: scale(1.1);
   }

   /* Texto truncado SOLO EN MÓVIL */
   #player-modal[style*="display: block"] span {
      font-size: 11px !important;
      font-weight: 600 !important;
      color: #333 !important;
      margin-left: 0 !important;
      flex: 1;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
   }

   /* Reorganizar elementos en fila - SOLO CUANDO ESTÁ VISIBLE */
   #player-modal[style*="display: block"] {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 8px !important;
   }
}