/* ========================================================
   CSS SEGURO PARA WEBANIMAL.ES
   Solo estilos que funcionan con Kadence
   ======================================================== */

/* Variables de colores */
:root {
  --webanimal-primary: #207daf;
  --webanimal-secondary: #E14D36;
  --webanimal-dark: #2c3e50;
  --webanimal-gray: #666;
  --webanimal-light: #f8f9fa;
  --webanimal-border: #e1e8ed;
}

/* ================================
   WIDGETS DEL SIDEBAR
   ================================ */
.widget {
  border-radius: 12px !important;
  border: 1px solid var(--webanimal-border) !important;
  background: white !important;
  margin-bottom: 1.5rem !important;
  padding: 1.5rem !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
  transition: all 0.3s ease !important;
}

.widget:hover {
  box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
  transform: translateY(-2px) !important;
}

.widget-title {
  font-size: 1.1rem !important;
  color: var(--webanimal-primary) !important;
  border-bottom: 3px solid var(--webanimal-primary) !important;
  padding-bottom: 0.5rem !important;
  margin-bottom: 1rem !important;
  font-weight: 700 !important;
}

.widget ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.widget ul li {
  border-bottom: 1px solid var(--webanimal-border) !important;
  padding: 0.8rem 0 !important;
  transition: all 0.3s ease !important;
}

.widget ul li:hover {
  background: var(--webanimal-light) !important;
  padding-left: 0.5rem !important;
  margin: 0 -0.5rem !important;
  border-radius: 6px !important;
}

.widget ul li:last-child {
  border-bottom: none !important;
}

.widget a {
  color: var(--webanimal-dark) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.3s ease !important;
}

.widget a:hover {
  color: var(--webanimal-primary) !important;
}

/* ================================
   ARTÍCULOS
   ================================ */
.entry {
  border-radius: 15px !important;
  border: 1px solid var(--webanimal-border) !important;
  background: white !important;
  margin-bottom: 1.5rem !important;
  overflow: hidden !important;
  box-shadow: 0 3px 15px rgba(0,0,0,0.08) !important;
  transition: all 0.3s ease !important;
}

.entry:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.12) !important;
}

/* Títulos */
.entry-title {
  font-size: 1.4rem !important;
  line-height: 1.3 !important;
  margin: 1.2rem 1.5rem 0.8rem !important;
}

.entry-title a {
  color: var(--webanimal-dark) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.entry-title a:hover {
  color: var(--webanimal-primary) !important;
}

/* Meta información */
.entry-meta {
  color: var(--webanimal-gray) !important;
  font-size: 0.9rem !important;
  margin: 0 1.5rem 1rem !important;
  display: flex !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

/* Resumen */
.entry-summary {
  padding: 0 1.5rem 1.5rem !important;
  color: var(--webanimal-gray) !important;
  line-height: 1.6 !important;
}

/* Botón Leer Más */
.read-more {
  display: inline-block !important;
  background: var(--webanimal-primary) !important;
  color: white !important;
  padding: 0.6rem 1.2rem !important;
  border-radius: 20px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  transition: all 0.3s ease !important;
  margin: 0 1.5rem 1.5rem !important;
}

.read-more:hover {
  background: var(--webanimal-secondary) !important;
  transform: translateX(5px) !important;
  color: white !important;
}

/* Categorías */
.entry-taxonomies {
  padding: 0 1.5rem 1.5rem !important;
}

.entry-taxonomies a {
  display: inline-block !important;
  background: var(--webanimal-light) !important;
  color: var(--webanimal-primary) !important;
  padding: 0.3rem 0.8rem !important;
  border-radius: 12px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  margin-right: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  transition: all 0.3s ease !important;
  border: 1px solid var(--webanimal-border) !important;
}

.entry-taxonomies a:hover {
  background: var(--webanimal-primary) !important;
  color: white !important;
  transform: translateY(-1px) !important;
}

/* ================================
   PAGINACIÓN
   ================================ */
.navigation.pagination {
  text-align: center !important;
  margin: 2rem 0 !important;
}

.page-numbers {
  display: inline-block !important;
  padding: 0.5rem 1rem !important;
  margin: 0 0.25rem !important;
  background: white !important;
  border: 2px solid var(--webanimal-border) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  min-width: 44px !important;
  line-height: 1.5 !important;
}

.page-numbers:hover,
.page-numbers.current {
  background: var(--webanimal-primary) !important;
  color: white !important;
  border-color: var(--webanimal-primary) !important;
  transform: translateY(-2px) !important;
}

/* ================================
   FOOTER CON GRADIENTE
   ================================ */
.site-footer {
  background: linear-gradient(180deg, 
    #4a90c2 0%, 
    #207daf 40%, 
    #1a6a96 70%, 
    rgba(255,255,255,0.3) 100%
  ) !important;
  color: white !important;
  padding: 3rem 0 2rem !important;
  border-radius: 12px !important;
}

.footer-widgets .widget-title {
  color: white !important;
  border-bottom-color: var(--webanimal-secondary) !important;
}

.footer-widgets a {
  color: rgba(255,255,255,0.8) !important;
}

.footer-widgets a:hover {
  color: var(--webanimal-secondary) !important;
}

.site-info {
  background: rgba(0,0,0,0.2) !important;
  padding: 1.5rem 0 !important;
  text-align: center !important;
  font-size: 0.9rem !important;
}

/* ================================
   RESPONSIVE MÓVIL
   ================================ */
@media (max-width: 768px) {
  .entry {
    margin-bottom: 1.5rem !important;
  }
  
  .entry-title {
    font-size: 1.2rem !important;
    margin: 1rem 1rem 0.5rem !important;
  }
  
  .entry-meta {
    font-size: 0.85rem !important;
    margin: 0 1rem 0.8rem !important;
    gap: 0.5rem !important;
  }
  
  .entry-summary {
    padding: 0 1rem 1rem !important;
  }
  
  .entry-taxonomies {
    padding: 0 1rem 1rem !important;
  }
  
  .entry-taxonomies a {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.6rem !important;
  }
  
  .read-more {
    padding: 0.5rem 1rem !important;
    font-size: 0.85rem !important;
  }
  
  .widget {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  .widget-title {
    font-size: 1rem !important;
  }
  
  .page-numbers {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.9rem !important;
  }
}

/* ================================
   ANIMACIONES
   ================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.entry, .widget {
  animation: fadeInUp 0.6s ease-out !important;
}

/* ================================
    GRID LAYOUT PARA ARTÍCULOS
    ================================ */
.site-main {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.site-main .entry,
.site-main .post,
.site-main .type-post,
.site-main .type-page {
  width: calc(33.333% - 20px);
  margin: 0 10px 30px;
  float: left;
  display: flex;
  flex-direction: column;
}

/* Artículo destacado (primero) */
.site-main .entry:first-child,
.site-main .post:first-child,
.site-main .type-post:first-child {
  width: 100%;
  margin: 0 0 30px;
  background: linear-gradient(135deg, 
    rgba(32, 125, 175, 0.08), 
    rgba(225, 77, 54, 0.04)
  ) !important;
  border-left: 4px solid var(--webanimal-primary) !important;
  padding: 25px !important;
  border-radius: 12px !important;
}

.site-main .entry:first-child .entry-title,
.site-main .post:first-child .entry-title {
  font-size: 2.2em !important;
  color: var(--webanimal-primary) !important;
  margin-bottom: 15px !important;
}

.site-main .entry:first-child .entry-meta {
  color: #666 !important;
  font-size: 0.95em !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid var(--webanimal-border) !important;
  padding-bottom: 10px !important;
}

/* Responsive Grid */
@media (max-width: 992px) {
  .site-main .entry,
  .site-main .post,
  .site-main .type-post,
  .site-main .type-page {
    width: calc(50% - 15px);
    margin: 0 7.5px 25px;
  }
  
  .site-main {
    margin: 0 -7.5px;
  }
}

@media (max-width: 576px) {
  .site-main .entry,
  .site-main .post,
  .site-main .type-post,
  .site-main .type-page {
    width: 100%;
    margin: 0 0 20px;
    float: none;
  }
  
  .site-main {
    margin: 0;
    display: block;
  }
  
  .site-main .entry:first-child,
  .site-main .post:first-child,
  .site-main .type-post:first-child {
    padding: 15px !important;
  }
  
  .site-main .entry:first-child .entry-title,
  .site-main .post:first-child .entry-title {
    font-size: 1.6em !important;
  }
}

/* ================================
    FILTROS DE CATEGORÍAS EN SIDEBAR
    ================================ */
.widget_categories {
  position: relative !important;
}

.widget_categories ul {
  max-height: 300px !important;
  overflow-y: auto !important;
}

.widget_categories ul::-webkit-scrollbar {
  width: 6px !important;
}

.widget_categories ul::-webkit-scrollbar-track {
  background: var(--webanimal-light) !important;
  border-radius: 3px !important;
}

.widget_categories ul::-webkit-scrollbar-thumb {
  background: var(--webanimal-primary) !important;
  border-radius: 3px !important;
}

.widget_categories ul li {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.widget_categories ul li a {
  flex: 1 !important;
}

.widget_categories .count {
  background: var(--webanimal-primary) !important;
  color: white !important;
  padding: 0.2rem 0.5rem !important;
  border-radius: 10px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  min-width: 24px !important;
  text-align: center !important;
}

/* ================================
    WIDGET DE SERVICIOS POR LOCALIDAD
    ================================ */
.widget_webanimal_locations {
  background: linear-gradient(135deg, 
    var(--webanimal-light), 
    rgba(32, 125, 175, 0.05)
  ) !important;
}

.location-item {
  display: flex !important;
  align-items: center !important;
  padding: 1rem !important;
  margin-bottom: 0.5rem !important;
  background: white !important;
  border-radius: 8px !important;
  border: 1px solid var(--webanimal-border) !important;
  transition: all 0.3s ease !important;
}

.location-item:hover {
  background: var(--webanimal-primary) !important;
  color: white !important;
  transform: translateX(5px) !important;
}

.location-item:hover .location-name {
  color: white !important;
}

.location-icon {
  width: 30px !important;
  height: 30px !important;
  background: var(--webanimal-secondary) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: white !important;
  font-weight: bold !important;
  margin-right: 1rem !important;
  flex-shrink: 0 !important;
}

.location-name {
  font-weight: 600 !important;
  color: var(--webanimal-dark) !important;
  transition: color 0.3s ease !important;
}

/* ================================
    EFECTOS HOVER AVANZADOS
    ================================ */
.entry {
  position: relative !important;
  overflow: hidden !important;
}

.entry::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(32, 125, 175, 0.1), 
    transparent
  ) !important;
  transition: left 0.6s ease !important;
  z-index: 1 !important;
}

.entry:hover::before {
  left: 100% !important;
}

.entry-thumbnail {
  position: relative !important;
  overflow: hidden !important;
}

.entry-thumbnail img {
  transition: transform 0.4s ease !important;
}

.entry:hover .entry-thumbnail img {
  transform: scale(1.08) !important;
}

/* Efecto en títulos */
.entry-title {
  position: relative !important;
  transition: all 0.3s ease !important;
}

.entry:hover .entry-title {
  color: var(--webanimal-primary) !important;
  transform: translateX(3px) !important;
}

/* ================================
    MEJORAS RESPONSIVE
    ================================ */
@media (max-width: 1200px) {
  .container {
    max-width: 100% !important;
    padding: 0 20px !important;
  }
}

@media (max-width: 992px) {
  .site-content {
    display: flex !important;
    flex-direction: column !important;
  }
  
  .content-area {
    width: 100% !important;
    order: 2 !important;
  }
  
  .widget-area {
    width: 100% !important;
    order: 1 !important;
    margin-bottom: 2rem !important;
  }
  
  .widget-area .widget {
    display: inline-block !important;
    width: calc(50% - 10px) !important;
    margin: 0 5px 1rem !important;
    vertical-align: top !important;
  }
}

@media (max-width: 768px) {
  .widget-area .widget {
    width: 100% !important;
    margin: 0 0 1rem !important;
  }
  
  .entry {
    border-radius: 10px !important;
  }
  
  .entry-title {
    font-size: 1.3rem !important;
  }
}

/* ================================
    TIPOGRAFÍA MEJORADA
    ================================ */
body {
  line-height: 1.7 !important;
  font-size: 16px !important;
}

.entry-content p {
  margin-bottom: 1.5rem !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
}

.entry-content h2 {
  color: var(--webanimal-primary) !important;
  font-size: 1.6rem !important;
  margin: 2rem 0 1rem !important;
  border-bottom: 2px solid var(--webanimal-border) !important;
  padding-bottom: 0.5rem !important;
}

.entry-content h3 {
  color: var(--webanimal-dark) !important;
  font-size: 1.3rem !important;
  margin: 1.5rem 0 0.8rem !important;
}

/* ================================
    ACCESIBILIDAD
    ================================ */
:focus {
  outline: 2px solid var(--webanimal-primary) !important;
  outline-offset: 2px !important;
}

/* Skip links para accesibilidad */
.skip-link {
  position: absolute !important;
  top: -40px !important;
  left: 6px !important;
  background: var(--webanimal-primary) !important;
  color: white !important;
  padding: 8px !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  z-index: 100000 !important;
}

.skip-link:focus {
  top: 6px !important;
}