/*
 * Estilos para el widget de departamentos de contacto.
 * Define las reglas de apariencia para la lista y los detalles.
 */
/*
 * Revisión de estilos para el widget de departamentos de contacto.
 * La versión anterior no aplicaba correctamente los estilos,
 * mostrando los elementos en columnas desconfiguradas.  Esta nueva
 * definición se inspira en el diseño de Figma: contenedor con
 * borde naranja, lista de departamentos en un panel claro y
 * detalles sobre un fondo naranja.
 */

:root {
  --contact-orange: #DF8233;
  --contact-dark: #333;
  --contact-bg: #F2F2F2;
}

/* Contenedor principal del widget.  Utiliza un layout de grid para
 * dividir el panel de listados y el panel de detalles.  El borde
 * naranja crea un marco según el diseño solicitado.  Se utiliza
 * overflow:hidden para que los bordes redondeados se apliquen a
 * todos los hijos. */
.contact-dept-widget {
  background: var(--contact-bg);
  /* Eliminamos el borde naranja exterior según la última iteración. */
  border: none;
  border-radius: 20px;
  display: grid;
  grid-template-columns: 0.4fr 0.6fr;
  gap: 1rem;
  padding: 1.5rem;
  overflow: hidden;
  box-sizing: border-box;
  /* Centrar el widget dentro del contenedor padre (por ejemplo,
   * .atc-wrap) estableciendo un ancho máximo y márgenes automáticos.
   */
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* En pantallas pequeñas apilamos la lista y los detalles verticalmente. */
@media (max-width: 900px) {
  .contact-dept-widget {
    grid-template-columns: 1fr;
  }
}

/* Lista de departamentos.  Se eliminan estilos predeterminados de lista
 * y se garantiza que no haya sangrías externas. */
.contact-dept-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Elemento de la lista.  Se añade un pequeño margen entre items usando
 * gap en la lista, por lo que no se necesita margin-top sucesivo. */
.contact-dept-item {
  width: 100%;
}

/* Botón que muestra cada departamento.  Por defecto usa un fondo claro
 * con borde y texto oscuro.  Al activarse, cambia a naranja y texto
 * blanco.  Se usa border-radius amplio para crear un aspecto pill. */
.contact-dept-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: 2px solid var(--contact-orange);
  background: var(--contact-bg);
  color: var(--contact-dark);
  padding: 0.8rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  font-size: 1rem;
  line-height: 1.2;
  gap: 0.5rem;
}

/* Estado activo del botón: llena el fondo con naranja y cambia el color
 * del texto a blanco. */
.contact-dept-item.is-active .contact-dept-btn {
  background: var(--contact-orange);
  color: #ffffff;
  border-color: var(--contact-orange);
}

/* Flecha que indica despliegue.  Hereda el color del texto y rota
 * cuando el elemento está activo. */
.arrow-icon {
  transition: transform 0.2s ease;
  color: currentColor;
}
.contact-dept-item.is-active .arrow-icon {
  transform: rotate(180deg);
}

/* Contenedor de detalles de cada departamento.  Se le aplica un fondo
 * naranja y bordes redondeados para armonizar con el diseño. */
.contact-dept-details {
  padding: 1.5rem;
  background: var(--contact-orange);
  border-radius: 16px;
  overflow: hidden;
  color: #ffffff;
}

/* Cada sección de detalles se oculta por defecto y se muestra al
 * activarse. */
.contact-dept-detail {
  display: none;
  animation: fadeIn 0.3s ease forwards;
}
.contact-dept-detail.is-active {
  display: block;
}

/* Animación sencilla para suavizar la transición de aparición. */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Estilo de nombre del responsable: destaca en tamaño y peso, se
 * asegura color blanco para contraste. */
.dept-resp-name {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
  color: #ffffff;
}

/* Estilos para teléfono y correo: se mantienen alineados con íconos y
 * texto blanco. */
.dept-resp-phone,
.dept-resp-email {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  color: #ffffff;
  font-size: 1rem;
}

/* Enlaces de correo se heredan en color y se subrayan sutilmente al
 * pasar el mouse. */
.dept-resp-email a {
  color: #ffffff;
  text-decoration: underline;
}
.dept-resp-email a:hover {
  text-decoration: none;
}

/* Ajuste de tamaño de iconos. */
.dept-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/*
 * Estilos para subdepartamentos.  Sólo se aplican cuando el usuario
 * habilita la opción en ACF.  Utilizamos el elemento <details> de
 * HTML5 para crear un acordeón nativo que despliega información
 * adicional del subdepartamento (nombre y descripción).  El badge
 * avisa al usuario que hay un subdepartamento disponible.
 */
/* Oculta la flecha nativa del elemento <details> en navegadores WebKit
 * para usar nuestro propio icono/badge visual. */
.contact-dept-subdept summary::-webkit-details-marker {
  display: none;
}

.contact-dept-subdept {
  margin-top: 1rem;
  color: #ffffff;
}

.contact-dept-subdept summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Badge que indica la presencia de un subdepartamento.  Usa un
 * color verde para diferenciarse del naranja principal pero se puede
 * ajustar según los lineamientos de marca. */
.contact-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #4A6B47;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

/* Contenido del subdepartamento.  Se muestra cuando el acordeón está
 * abierto.  Añadimos un borde superior para diferenciarlo del resto
 * del contenido. */
.subdept-content {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.4);
}

.subdept-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.3rem;
  color: #ffffff;
}

.subdept-desc {
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0;
  color: #ffffff;
}