/* ========================================================================
   VARIABLES GLOBALES Y CONFIGURACIÓN BASE
   ======================================================================== */
:root {
  /* Colores Institucionales */
  --blue-dark:       #17365D;
  --blue-medium:     #005BAC;
  --blue-navy:       #0a1f44;
  --blue-header:     #002147;
  --gold:            #FFD700;
  
  /* Escala de Grises y Fondos */
  --bg-light:        #f4f6f8;
  --bg-directory:    #d4e3f1;
  --gray-medium:     #E1E5EA;
  --white:           #ffffff;
  
  /* Texto */
  --text-dark:       #212529;
  --text-main:       #2c3e50;
  
  /* Funcionales */
  --warning:         #c0392b;
  --hover-blue:      #5499c7;
  --transition-speed: 0.4s;
}

.uk-article-title {
  text-transform: none;
}

/* ========================================================================
   COMPONENTES DE ENCABEZADO Y TÍTULOS
   ======================================================================== */

/* Título Institucional */
.titulo-policia {
  display: block;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Encode Sans', sans-serif;
  font-weight: 700;
  letter-spacing: 1.5px;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--white);
  background-color: var(--blue-header);
  border-bottom: 4px solid var(--gold);
  padding: 0.5em 1em;
  margin: 1em 0;
  border-radius: 3px;
}

/* Header Sticky con Blur */
.tm-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: linear-gradient(to bottom, rgba(255,255,255,.95), rgba(255,255,255,.6));
  backdrop-filter: blur(10px);
  color: var(--blue-navy);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-image: linear-gradient(90deg, #0d345f, #47aef0) 1;
  border-image-slice: 1;
  box-shadow: 0 4px 12px rgba(0, 31, 63, 0.3);
}

/* Texto sobre Banners */
.titular-texto {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  box-sizing: border-box;
  font-family: 'Encode Sans', sans-serif;
  font-size: var(--title-size, clamp(2.5rem, 8vw, 5rem));
  line-height: 1.1;
  text-align: center;
  pointer-events: none;
  z-index: 10;
}

.titular-texto--1 { font-weight: 700; color: var(--white); text-shadow: 0 4px 12px rgba(0,0,0,0.6); letter-spacing: 0.1em; }
.titular-texto--2, .titular-texto2 { font-weight: 600; color: var(--white); -webkit-text-stroke: 1px rgba(0,0,0,0.7); letter-spacing: 0.08em; }
.titular-texto--3 { font-weight: 700; color: var(--white); text-shadow: 0 4px 12px rgba(0,0,0,0.6); background: rgba(23,54,93,0.6); padding: 0.5rem 1rem; border-radius: 12px; }
.titular-texto--4 { font-weight: 700; background: linear-gradient(90deg, #17365d 0%, #005bac 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.titular-texto--5 { font-weight: 400; color: var(--white); text-shadow: 0 2px 6px rgba(0,0,0,0.5); }

/* ========================================================================
   DIRECTORIO DE SERVIDORES PÚBLICOS
   ======================================================================== */

.directory {
  font-family: Arial, sans-serif;
  background: var(--bg-directory);
  color: var(--text-dark);
  padding: 2rem;
}

/* Acordeones (Details) */
.directory details {
  margin-bottom: 1.5rem;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  background: var(--blue-dark);
}

.directory summary {
  display: block;
  cursor: pointer;
  padding: 0.75rem 1rem;
  font-size: 1.2rem;
  font-weight: bold;
  background: rgba(0,0,64,0.4);
  color: var(--white);
  text-align: center;
  letter-spacing: 0.05em;
  border-bottom: 6px solid transparent;
  border-image: linear-gradient(90deg, #0d345f, #47aef0) 1;
  border-image-slice: 1;
}

.directory summary::before {
  content: '▸';
  margin-right: 0.5rem;
  color: var(--blue-medium);
  display: inline-block;
  transition: transform 0.2s ease;
}

.directory details[open] summary::before { transform: rotate(90deg); }

/* Grid de Tarjetas */
.directory .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  padding: 1rem;
  background: var(--white);
  border-radius: 0 0 5px 5px;
}

/* Estilo de Tarjeta */
.card {
  background: rgba(0, 0, 64, 0.05);
  border: 1px solid rgba(0, 106, 240, 0.2);
  border-radius: 5px;
  padding: 1rem;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.card-horizontal {
  flex-direction: row; /* Para diseño lateral si se desea */
  align-items: flex-start;
  text-align: left;
  flex-wrap: wrap;
}

.card h3 { margin: 0 0 0.25rem; font-size: 1.1rem; color: var(--blue-dark); }
.card .role { margin: 0.25rem 0 0.75rem; font-style: italic; color: var(--blue-dark); opacity: 0.8; }
.card .info { margin: 0.25rem 0; font-size: 0.9rem; line-height: 1.3; color: var(--blue-medium); }

/* Imagen de Perfil Circular */
.profile-photo {
  width: 250px; /* Reducido de 320px para mejor ajuste */
  height: 250px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--blue-medium);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  margin-bottom: 1rem;
}

.icon img { width: 18px; height: 18px; vertical-align: middle; margin-right: 6px; }

/* Botón de Semblanza */
.curriculum-link {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--white);
  background-color: var(--blue-medium);
  padding: 0.5rem 1.2rem;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: background 0.3s;
}

.curriculum-link:hover { background-color: var(--blue-dark); color: var(--white); }

/* ========================================================================
   SECCIÓN TIKTOK Y GUÍAS
   ======================================================================== */

#tiktok-guide {
  font-family: 'Segoe UI', sans-serif;
  color: var(--blue-navy);
  background-color: var(--bg-light);
  line-height: 1.6;
}

#tiktok-guide header { background-color: var(--blue-navy); color: var(--white); padding: 30px 16px; text-align: center; }
#tiktok-guide section { background-color: var(--white); margin: 16px auto; padding: 24px; border-radius: 10px; max-width: 900px; box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
#tiktok-guide h2 { color: var(--blue-medium); font-size: 1.4em; }

/* ========================================================================
   GALERÍA INSTITUCIONAL
   ======================================================================== */

.galeria-ssp {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 16px 0;
}

.galeria-ssp figure {
  flex: 0 0 30%;
  max-width: 30%;
  border: 1px solid #d0d2d6;
  border-radius: 6px;
  background-color: var(--white);
  overflow: hidden;
  margin: 0;
}

.galeria-ssp img { width: 100%; transition: transform 0.3s; }
.galeria-ssp img:hover { transform: scale(1.05); }

/* ========================================================================
   ARTÍCULOS CON EFECTO 3D (TILT)
   ======================================================================== */

.institucional-area { animation: fadeInUp 0.8s ease-out both; }

.institucional-section {
  position: relative;
  background: var(--white);
  padding: 3rem 2rem;
  border-radius: 0.75rem;
  box-shadow: 0 12px 28px rgba(0,0,0,0.1);
  overflow: hidden;
}

.institucional-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 6px;
  background: linear-gradient(90deg, var(--blue-dark), var(--blue-medium), var(--blue-dark));
  background-size: 200% auto;
  animation: slideGradient 3s linear infinite;
}

.institucional-card {
  background: var(--white);
  border-radius: 0.75rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  padding: 2rem;
  perspective: 1000px;
  transition: transform var(--transition-speed);
}

.institucional-card:hover {
  transform: rotateX(5deg) rotateY(-5deg) translateY(-5px);
}

.institucional-icon {
  width: 70px; height: 70px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--blue-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulseIcon 2.5s infinite;
}

/* ========================================================================
   ANIMACIONES Y RESPONSIVE
   ======================================================================== */

@keyframes slideGradient { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes pulseIcon { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 768px) {
  .galeria-ssp figure { flex: 0 0 100%; max-width: 100%; }
  .institucional-grid { grid-template-columns: 1fr; }
  .profile-photo { width: 180px; height: 180px; }
  .card-horizontal { flex-direction: column; text-align: center; }
}

/* Corrección Leyes Aplicables */
.leyes-aplicables:hover, 
.leyes-aplicables:hover * { 
  transform: none !important; 
  animation: none !important; 
}

/* =========================================
   DIRECTORIO: CONFIGURACIÓN DE IMÁGENES
   ========================================= */

/* 1. Tamaño Grande (Titular/Secretario) - Circular */
.profile-photo {
    width: 250px !important; 
    height: 250px !important;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #005BAC;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    display: block;
    margin: 0 auto 1rem auto;
}

/* 2. Tamaño Rector (UNIPOL) - Reducido al 50%, a la derecha y REDONDA */
.profile-photo-reduced {
    width: 150px !important; 
    height: 150px !important; /* Hacemos que sea un cuadrado perfecto */
    object-fit: cover;
    border-radius: 50% !important; /* <--- ESTE ES EL CAMBIO CLAVE para que sea redonda */
    border: 3px solid var(--gray-medium); /* Opcional: añade un borde sutil */
    /* Sin margen automático para que el flexbox lo empuje a la derecha */
}

/* 3. Tamaño Estándar (Otros Directores) - Arriba */
.profile-photo-standard {
    width: 130px !important;
    height: 160px !important;
    object-fit: cover;
    border-radius: 4px;
    border: 2px solid #E1E5EA;
    display: block;
    margin: 0 auto 15px auto;
}

/* =========================================
   ESTRUCTURA DE TARJETAS (LAYOUT)
   ========================================= */

.card {
    background: #ffffff;
    border: 1px solid rgba(0, 106, 240, 0.2);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Layout Horizontal (Titular y Rector) */
.card-horizontal {
    flex-direction: row;
    text-align: left;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.card-right { 
    flex: 3; /* El texto tiene prioridad de espacio */
}

.card-left { 
    flex: 0 0 auto; /* La foto mantiene su tamaño real, NO se estira */
    display: flex;
    justify-content: center;
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .card-horizontal {
        flex-direction: column !important;
        text-align: center;
    }
}



/* =========================================
   ESTRUCTURA BOTONES CONVOCATORIA
   ========================================= */
 
.botonera-policial {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.btn-institucional {
    /* Color Azul Policial de tu imagen */
    background-color: #002D62; 
    color: #ffffff !important;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;
    padding: 16px 20px;
    border: none;
    border-radius: 2px; /* Bordes casi rectos como en tu imagen */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
    /* Sombra de profundidad sutil */
    border-bottom: 3px solid #001a3a;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Efecto al pasar el mouse */
.btn-institucional:hover {
    background-color: #003a80;
    border-bottom: 3px solid #002D62;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Efecto al presionar */
.btn-institucional:active {
    transform: translateY(2px);
    border-bottom: 1px solid #001a3a;
}

/* Ajuste para pantallas pequeñas */
@media (max-width: 600px) {
    .botonera-policial {
        grid-template-columns: 1fr;
    }
}